Add sponsor popup with thank you dialog in download flow
## Overview
This PR adds a sponsor popup that appears after users agree to the terms in the download flow, encouraging users to support the project while maintaining a seamless download experience. After confirming sponsorship, a thank you dialog appears before redirecting to the download.
## Changes
### User Flow
After users check all the required boxes and agree to the terms by clicking "GOGOGO", a new sponsor modal now appears asking **"是否愿意赞助?"** (Would you like to sponsor?) with the subtitle "您的支持是我们持续开发的动力".
Users are presented with two choices:
- **确认 (Confirm)**: Opens the sponsor page (https://afdian.com/a/dwhlqwq), then shows a thank you dialog. Users must click "跳转到网盘" to proceed to the download link.
- **取消 (Cancel)**: Opens only the download link
**New Thank You Dialog**: After clicking "确认", a thank you dialog appears with:
- Title: "感谢您的赞助" (Thank you for your sponsorship)
- Subtitle: "点击跳转到网盘" (Click to jump to cloud storage)
- Button: "跳转到网盘" to open the download link
This approach is non-intrusive as users can skip sponsorship while still getting access to their download.
### Technical Implementation
**Modified file**: `download/comp.vue` (+295 lines, -2 lines)
#### JavaScript Changes
1. Added `showSponsorModal` ref to control the sponsor modal's visibility
2. Added `showThankYouModal` ref to control the thank you dialog's visibility
3. Modified `check_question()` to close the terms modal and show the sponsor modal instead of directly opening the download link
4. Added `handleSponsorConfirm()` handler to open sponsor page and show thank you dialog
5. Added `handleSponsorCancel()` handler to open only the download link when user cancels
6. Added `handleThankYouClick()` handler to open the download link from the thank you dialog
#### Template Changes
Added two new modal components using Naive UI's `n-modal`:
**Sponsor Modal:**
- Centered card layout with glass-morphism effect
- Pulsing heart emoji icon (💝)
- Clear title and subtitle text
- Two styled action buttons with distinct visual hierarchy
**Thank You Modal:**
- Centered card with celebration emoji icon (🎉)
- Green gradient title for success theme
- "跳转到网盘" button to proceed to download
- Bounce animation for celebration effect
#### CSS Styles
- Complete styling with modern gradient design for both modals
- Pink/rose gradient for the sponsor confirm button
- Gray styling for the cancel button
- Green gradient for thank you title
- Pulse animation (2s loop) for the heart icon
- Bounce animation (1s) for the celebration icon
- Smooth hover effects with lift and shadow
- Full dark mode support with appropriate color adjustments
- Responsive design that works on mobile devices (90vw width)
## Design Highlights
Both modals follow the existing design system with:
- Backdrop blur effect matching other modals
- Purple/green gradient accents consistent with the site theme
- Smooth transitions and animations
- Proper spacing and typography
- Accessible button sizes (48px height) for easy clicking
## Screenshots
The sponsor modal appears as a centered card with:
```
┌─────────────────────────────────────┐
│ 💝 (pulsing) │
│ │
│ 是否愿意赞助? │
│ 您的支持是我们持续开发的动力 │
│ │
│ [❤️ 确认] [⏭️ 取消] │
└─────────────────────────────────────┘
```
After clicking "确认", the thank you dialog appears:
```
┌─────────────────────────────────────┐
│ 🎉 (bouncing) │
│ │
│ 感谢您的赞助 │
│ 点击跳转到网盘 │
│ │
│ [📦 跳转到网盘] │
└─────────────────────────────────────┘
```
## Testing Recommendations
- Verify both "确认" and "取消" buttons work correctly
- Verify thank you dialog appears after clicking "确认"
- Verify download link opens when clicking "跳转到网盘"
- Test the responsive design on mobile devices
- Check dark mode appearance for both modals
- Ensure animations are smooth
- Verify no breaking changes to existing download flow
## Notes
This implementation maintains backward compatibility and does not block users from downloading if they choose not to sponsor. All users can access downloads regardless of their choice, making this a user-friendly way to encourage support while providing clear acknowledgment of sponsorship actions.
<!-- START COPILOT CODING AGENT SUFFIX -->
<details>
<summary>Original prompt</summary>
> In the `download/comp.vue` file, after the user agrees to the terms, add a pop-up that asks '是否愿意赞助?' (Would you like to sponsor?). If the user clicks '确认' (Confirm), redirect them to https://afdian.com/a/dwhlqwq.
</details>
<!-- START COPILOT CODING AGENT TIPS -->
---
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click [here](https://survey3.medallia.com/?EAHeSx-AP01bZqG0Ld9QLQ) to start the survey.
合并状态:已合并 合并于 2025-10-03 关闭于 2025-10-03 4 条评论