diff --git a/src/app/chat/components/pwa-install-dialog.module.css b/src/app/chat/components/pwa-install-dialog.module.css index 6f0f0d99..ee1220a0 100644 --- a/src/app/chat/components/pwa-install-dialog.module.css +++ b/src/app/chat/components/pwa-install-dialog.module.css @@ -1,4 +1,7 @@ -/* PwaInstallDialog PWA 安装弹窗样式 */ +/* PwaInstallDialog PWA 安装弹窗样式 + * 原始 Dart: lib/ui/chat/widgets/pwa_install_dialog.dart + * 视觉规格:白底 + 大圆角 + 渐变按钮 + 86×86 图标 + */ .overlay { position: fixed; @@ -12,67 +15,66 @@ .dialog { width: calc(100% - 40px); - max-width: 360px; - background: var(--color-surface, #1f1a2e); - border-radius: var(--radius-lg, 12px); - padding: var(--spacing-5, 20px); - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); - text-align: center; + max-width: var(--pwa-install-dialog-max-width, 360px); + background: var(--color-page-background, #ffffff); + border-radius: 40px; + padding: 20px 16px 16px 16px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; + text-align: center; } .icon { - width: 64px; - height: 64px; - border-radius: 50%; - background: rgba(248, 77, 150, 0.2); - color: var(--color-accent, #f84d96); - display: flex; - align-items: center; - justify-content: center; - font-size: 32px; - margin-bottom: var(--spacing-4, 16px); + width: var(--icon-size-86, 86px); + height: var(--icon-size-86, 86px); + margin-bottom: var(--spacing-lg, 16px); + object-fit: contain; } .title { - font-size: var(--font-size-lg, 18px); - font-weight: 600; - margin: 0 0 var(--spacing-2, 8px); - color: var(--color-text-primary, #fff); + font-size: var(--font-size-22, 22px); + font-weight: 700; + margin: 0 0 var(--spacing-sm, 8px); + color: var(--color-text-foreground, #171717); + line-height: 1.2; } .content { - font-size: var(--font-size-sm, 14px); + font-size: var(--font-size-lg, 16px); line-height: 1.5; color: var(--color-text-secondary, #9e9e9e); - margin: 0 0 var(--spacing-5, 20px); + margin: 0 0 var(--spacing-xxl, 24px); } .actions { display: flex; - gap: var(--spacing-3, 12px); + gap: var(--spacing-md, 12px); width: 100%; } .btn { flex: 1 1 auto; - height: 40px; + height: var(--pwa-button-height, 44px); border: 0; - border-radius: var(--radius-md, 8px); - font-size: var(--font-size-base, 14px); + border-radius: var(--radius-bottom-sheet, 28px); + font-size: var(--font-size-lg, 16px); font-weight: 600; cursor: pointer; + color: var(--color-page-background, #ffffff); + display: flex; + align-items: center; + justify-content: center; } .btnSecondary { - background: transparent; - color: var(--color-text-primary, #fff); - border: 1px solid rgba(255, 255, 255, 0.2); + background: var(--color-text-secondary, #9e9e9e); } .btnPrimary { - background: var(--color-accent, #f84d96); - color: #fff; + background: linear-gradient( + var(--color-button-gradient-start, #ff67e0), + var(--color-button-gradient-end, #ff52a2) + ); } diff --git a/src/app/chat/components/pwa-install-dialog.tsx b/src/app/chat/components/pwa-install-dialog.tsx index f2d70228..277f1028 100644 --- a/src/app/chat/components/pwa-install-dialog.tsx +++ b/src/app/chat/components/pwa-install-dialog.tsx @@ -7,6 +7,10 @@ * 用途:引导用户将 Web App 安装到桌面 * 触发:由 PwaInstallOverlay 在延迟 3.5s 后自动显示 */ +import Image from "next/image"; + +import { AppConstants } from "@/core/constants/app_constants"; + import styles from "./pwa-install-dialog.module.css"; export interface PwaInstallDialogProps { @@ -35,15 +39,19 @@ export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps) aria-labelledby="pwa-dialog-title" >
- Add to your home screen for the best experience. Faster loading, - full-screen mode, and offline support. + {AppConstants.appTitle} can be installed on your device for a faster, full-screen experience.