ITADN

Add sponsor popup with thank you dialog in download flow

#17Pull RequestCopilot 创建于 2025-10-03已合并
C
Copilotcommented
## 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 条评论