Release 20260103 修复 Chrome 100+兼容性、修复下载 modal 弹两次问题、修复相同CDK转移提示

[MistEO]

由 Sourcery 提供的摘要

将共享下载流程重构为独立的客户端封装组件，调整布局和视觉样式以获得更好的跨浏览器表现，并改进 CDK 传输校验的处理逻辑。

Bug 修复：

• 确保通过 URL 查询触发的共享下载只触发一次，并防止下载弹窗出现两次。
• 当在出现“相同 CDK”错误之后，对方的 CDK 发生变化时，重置并重新校验 CDK 字段，以避免残留的错误状态。

增强改进：

• 将下载弹窗逻辑从项目卡片视图中抽离出来，放入可复用的 DownloadModalWrapper 中，并在项目页面中使用。
• 改进滚动条和布局行为，避免页面抖动，并新增可复用的径向渐变遮罩工具，用于加载动画视觉效果。
• 简化并统一各页面和弹窗中的排版与遮罩样式，并针对明暗主题优化方案卡片边框和按钮样式。

Original summary in English

Summary by Sourcery

Refactor the shared download flow into a dedicated client wrapper component, adjust layout and visual styles for better cross-browser behavior, and improve CDK transfer validation handling.

Bug Fixes:

• Ensure shared download via URL query only triggers once and prevent the download modal from appearing twice.
• Reset and revalidate CDK fields when the counterpart CDK changes after a 'same CDK' error to avoid stale error states.

Enhancements:

• Move the download modal logic out of the project card view into a reusable DownloadModalWrapper used on the projects page.
• Improve scrollbar and layout behavior to avoid page jitter and add a reusable radial gradient mask utility for loader visuals.
• Simplify and align various typography and overlay styles across pages and modals, and refine plan card borders and button styles for light/dark themes.

[sourcery-ai]

Hey - 我在这里留下了一些整体反馈：

• 在 DownloadModalWrapper 中，URL 清理使用了硬编码的 /${locale}/projects?... 路径；如果这个 wrapper 将来在其他路由中复用，会导致用户被意外导航回 projects 页面。因此建议不要硬编码，而是从当前路径派生（例如使用 usePathname / window.location.pathname）。
• 在 CDK 转账页面中，fromCdkHasSameError / toCdkHasSameError 这两个标志位以及重新校验逻辑已经变得有些复杂；可以考虑添加一个小的辅助函数，把两侧的「相同 CDK」错误处理封装起来，这样可以减少重复代码，也让状态流转更容易理解。

给 AI 智能体的提示词

Please address the comments from this code review:

## Overall Comments
- In `DownloadModalWrapper`, the URL cleanup uses a hardcoded `/${locale}/projects?...` path; if this wrapper is ever reused on other routes it will unexpectedly navigate users back to the projects page, so consider deriving the current pathname (e.g. from `usePathname`/`window.location.pathname`) instead of hardcoding.
- In the CDK transfer page, the extra `fromCdkHasSameError` / `toCdkHasSameError` flags and revalidation logic have become a bit intricate; adding a small helper to encapsulate the "same CDK" error handling for both sides would reduce duplication and make the state transitions easier to reason about.

---

Sourcery 对开源项目永久免费——如果你觉得我们的评审对你有帮助，欢迎分享给更多人 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据你的反馈改进后续的代码评审。}

Original comment in English

Hey - I've left some high level feedback:

• In DownloadModalWrapper, the URL cleanup uses a hardcoded /${locale}/projects?... path; if this wrapper is ever reused on other routes it will unexpectedly navigate users back to the projects page, so consider deriving the current pathname (e.g. from usePathname/window.location.pathname) instead of hardcoding.
• In the CDK transfer page, the extra fromCdkHasSameError / toCdkHasSameError flags and revalidation logic have become a bit intricate; adding a small helper to encapsulate the "same CDK" error handling for both sides would reduce duplication and make the state transitions easier to reason about.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `DownloadModalWrapper`, the URL cleanup uses a hardcoded `/${locale}/projects?...` path; if this wrapper is ever reused on other routes it will unexpectedly navigate users back to the projects page, so consider deriving the current pathname (e.g. from `usePathname`/`window.location.pathname`) instead of hardcoding.
- In the CDK transfer page, the extra `fromCdkHasSameError` / `toCdkHasSameError` flags and revalidation logic have become a bit intricate; adding a small helper to encapsulate the "same CDK" error handling for both sides would reduce duplication and make the state transitions easier to reason about.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull request overview

This PR addresses Chrome 100+ compatibility issues and fixes two key bugs related to download modal behavior and CDK transfer validation. The changes primarily focus on replacing CSS properties that have deprecated syntax with modern equivalents and refactoring the download modal logic to prevent duplicate triggering.

• Replaces Tailwind's ring-* utilities with border-* equivalents and updates opacity syntax from bg-opacity-* to slash notation (bg-black/25) for better browser compatibility
• Extracts download modal logic from ProjectCardView into a new DownloadModalWrapper component with a ref-based guard to prevent duplicate downloads
• Adds dynamic re-validation logic for CDK transfer when the "same CDK" error is cleared by changing either input field

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/home/PlanCard.tsx	Replaces ring-* classes with border-* classes for Chrome 100+ compatibility
src/components/checkout/WaitForPayModal.tsx	Updates backdrop opacity syntax from bg-opacity-25 to bg-black/25
src/components/checkout/QRCodePayModal.tsx	Updates backdrop opacity syntax from bg-opacity-25 to bg-black/25
src/components/checkout/InAppBrowserWarningModal.tsx	Updates backdrop opacity syntax and reorders CSS classes (top/right position)
src/components/checkout/HtmlFormPayModal.tsx	Updates backdrop opacity syntax from bg-opacity-25 to bg-black/25
src/components/ProjectCardView.tsx	Removes download modal logic and related imports (moved to new component)
src/components/OrderInfoModal.tsx	Updates backdrop opacity syntax from bg-opacity-25 to bg-black/25
src/components/MultiStepLoader.tsx	Extracts inline mask-image to a CSS utility class with webkit prefix
src/components/LoadingState.tsx	Removes text-balance and text-pretty classes for compatibility
src/components/DownloadModalWrapper.tsx	New component that encapsulates download modal with useRef guard to prevent duplicate triggers
src/app/globals.css	Adds webkit-prefixed mask-image utility class and changes scrollbar handling strategy
src/app/[locale]/transfer/page.tsx	Adds state tracking and re-validation logic to clear "same CDK" errors when inputs change
src/app/[locale]/projects/page.tsx	Imports and renders new DownloadModalWrapper component; removes text-balance and text-pretty classes
src/app/[locale]/get-start/page.tsx	Removes text-balance and text-pretty classes for compatibility
src/app/[locale]/get-key/page.tsx	Replaces focus:ring-1 with focus:shadow-[0_0_0_1px_#4f46e5] for Chrome 100+
src/app/[locale]/dashboard/LoginForm.tsx	Removes text-balance class for compatibility

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.