Skip to content

Add donation card to About page #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sunwuyuan merged 5 commits into from
Feb 3, 2026
Merged

Add donation card to About page #39

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
67598f8
Initial plan
Copilot Feb 3, 2026
8691feb
Add beautiful donation card to About page
Copilot Feb 3, 2026
0ebc14c
Address code review feedback: remove duplicate cursor style and add a…
Copilot Feb 3, 2026
faea001
更新 AboutCard.vue
Sunwuyuan Feb 3, 2026
2964c52
更新 AboutCard.vue
Sunwuyuan Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions src/components/settings/AboutCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,45 @@
<v-card-text>
<v-row>
<v-col class="mx-auto" cols="12" md="8">
<!-- 捐赠卡片 -->
<v-card
border
class="donation-card gradient-donation clickable mb-6"
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
class="donation-card gradient-donation clickable mb-6"
class="donation-card gradient-donation mb-6"

Copilot uses AI. Check for mistakes.
color="pink-lighten-4"
elevation="8"
hover
rounded="xl"
variant="tonal"
@click="openDonationLink"
>
<v-card-item>
<div class="card-content">
<div>
<div class="text-h6 font-weight-bold">请支持我们 Classworks</div>

</div>
</div>
</v-card-item>
Comment on lines +25 to +31
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<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>

Copilot uses AI. Check for mistakes.
<v-card-text>
<p class="text-body-2 mb-3">
我是Classworks的开发者孙悟元，是一名高二的中国在校学生。Classworks 是一个完全开源免费的项目。如果可以，欢迎打赏。
</p>
<div class="mt-4">
<v-btn
append-icon="mdi-heart"
aria-label="Support Classworks on Aifadian"
class="text-none"
color="pink"
rounded="xl"
variant="elevated"
@click="openDonationLink"
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
@click="openDonationLink"
@click.stop="openDonationLink"

Copilot uses AI. Check for mistakes.
>
爱发电
</v-btn>
</div>
</v-card-text>
</v-card>

<div class="d-flex flex-column align-start">
<v-avatar class="mb-4" size="120">
<v-img
Expand Down Expand Up @@ -378,6 +417,10 @@ export default {
}
};

const openDonationLink = () => {
window.open('https://afdian.com/a/wydev', '_blank');
};

onMounted(() => {
loadDependencies();
});
Expand All @@ -396,6 +439,7 @@ export default {
openReportDialog,
copyEnvInfo,
openFeedback,
openDonationLink,
envBoxText,
envInfo,
reportBody,
Expand All @@ -405,3 +449,27 @@ export default {
},
};
</script>

<style scoped>
.gradient-donation {
background: linear-gradient(135deg, rgba(236, 64, 122, 0.15), rgba(233, 30, 99, 0.08) 60%);
border: 2px solid rgba(236, 64, 122, 0.25);
transition: all 0.3s ease;
cursor: pointer;
}

.gradient-donation:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(236, 64, 122, 0.3) !important;
}

.gradient-donation:active {
transform: translateY(-2px);
}

.card-content {
display: flex;
align-items: center;
justify-content: space-between;
}
Comment on lines +469 to +474
Copy link

Copilot AI Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
.card-content {
display: flex;
align-items: center;
justify-content: space-between;
}

Copilot uses AI. Check for mistakes.
</style>
Loading