Conversation
Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>
Deploying classworks with
|
| Latest commit: |
faea001
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://5848d5f5.classworks.pages.dev |
| Branch Preview URL: | https://copilot-add-donation-card-to.classworks.pages.dev |
…ria-label Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR adds a prominent donation card to the Settings > About page, encouraging users to support the Classworks project through the Aifadian (爱发电) platform.
Changes:
- Added a pink gradient donation card component with hover effects at the top of the About section
- Implemented
openDonationLink()method to open https://afdian.com/a/wydev in a new tab - Added custom CSS styles following existing gradient card patterns in the codebase
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| color="pink" | ||
| rounded="xl" | ||
| variant="elevated" | ||
| @click="openDonationLink" |
There was a problem hiding this comment.
The click handler is defined on both the card (line 22) and the button inside it (line 44). When the button is clicked, both click handlers will fire due to event bubbling. Consider adding @click.stop to the button's click handler to prevent the event from propagating to the parent card, or remove the click handler from one of these elements.
| @click="openDonationLink" | |
| @click.stop="openDonationLink" |
|
|
||
| .card-content { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } |
There was a problem hiding this comment.
The .card-content CSS class is defined but not used for any functional styling in the donation card. The div structure with this class (lines 25-30) contains unnecessary nesting with empty divs. Consider simplifying this structure or removing the unused class definition.
| .card-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } |
| <!-- 捐赠卡片 --> | ||
| <v-card | ||
| border | ||
| class="donation-card gradient-donation clickable mb-6" |
There was a problem hiding this comment.
The 'clickable' class is used but not defined in this component's scoped styles. While it may work if defined globally or in another component, scoped styles won't apply it here. The cursor: pointer is already set in .gradient-donation (line 458), making this class redundant. Consider removing the 'clickable' class from the v-card.
| class="donation-card gradient-donation clickable mb-6" | |
| class="donation-card gradient-donation mb-6" |
| <div class="card-content"> | ||
| <div> | ||
| <div class="text-h6 font-weight-bold">请支持我们 Classworks</div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </v-card-item> |
There was a problem hiding this comment.
The structure contains unnecessary nested divs (lines 26-29) with one being empty (line 29). This creates needless DOM depth without adding functionality. Simplify by removing the wrapper divs and placing the title directly in v-card-item.
| <div class="card-content"> | |
| <div> | |
| <div class="text-h6 font-weight-bold">请支持我们 Classworks</div> | |
| </div> | |
| </div> | |
| </v-card-item> | |
| <v-card-title class="text-h6 font-weight-bold"> | |
| 请支持我们 Classworks | |
| </v-card-title> | |
| </v-card-item> |
Adds prominent donation card to Settings > About page linking to https://afdian.com/a/wydev.
Changes
openDonationLink()methodScreenshot
The card uses a
linear-gradientbackground with pink tones and includes accessibility attributes (aria-label) for the CTA button.Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.