From 72941d9c9fcb8859cd09754b04a570fd46414323 Mon Sep 17 00:00:00 2001 From: chenhang Date: Thu, 11 Jun 2026 11:29:52 +0800 Subject: [PATCH] style(pwa-install-dialog): redesign dialog to match Dart spec Update the PWA install dialog styling and content to align with the original Dart design, including a white background with large 40px radius, 86x86 PNG icon, gradient primary button, and dynamic app title sourced from AppConstants. --- .../components/pwa-install-dialog.module.css | 66 ++++++++++--------- .../chat/components/pwa-install-dialog.tsx | 24 ++++--- src/app/layout.tsx | 14 +++- src/app/splash/components/splash-logo.tsx | 12 +--- src/lib/auth/nextauth.ts | 4 ++ 5 files changed, 67 insertions(+), 53 deletions(-) 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" >
- +

- Install cozsweet + Install {AppConstants.appTitle}

- 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.

diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 285433e5..46350008 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,4 @@ -import type { Metadata } from "next"; +import type { Metadata, Viewport } from "next"; import { SessionProvider } from "@/providers/session-provider"; import { geistSans, geistMono, athelas } from "@/lib/fonts"; import "./globals.css"; @@ -10,8 +10,6 @@ export const metadata: Metadata = { description: "cozsweet frontend (Next.js)", // PWA：链接到 public/manifest.json（由 @ducanh2912/next-pwa 体系使用） manifest: "/manifest.json", - // 浏览器顶栏 / Android PWA 顶栏颜色 - themeColor: "#f84d96", // iOS Safari "添加到主屏" 元数据 appleWebApp: { capable: true, @@ -25,6 +23,16 @@ export const metadata: Metadata = { }, }; +/** + * Next.js 14+ 推荐：viewport 相关元数据独立导出。 + * 之前放在 `metadata.themeColor` 会在 Next.js 16 触发 deprecation 警告。 + * 详见 https://nextjs.org/docs/app/api-reference/functions/generate-viewport + */ +export const viewport: Viewport = { + // 浏览器顶栏 / Android PWA 顶栏颜色 + themeColor: "#f84d96", +}; + export default function RootLayout({ children, }: Readonly<{ diff --git a/src/app/splash/components/splash-logo.tsx b/src/app/splash/components/splash-logo.tsx index 9ae38166..18001394 100644 --- a/src/app/splash/components/splash-logo.tsx +++ b/src/app/splash/components/splash-logo.tsx @@ -1,11 +1,3 @@ -/** - * Splash Logo - * - * 原始 Dart: lib/ui/splash/widgets/splash_logo.dart - * 资源: /public/images/splash/ic-logo-home.png (kebab-case 重命名后) - * 原名: ic_logo_home.png (snake_case) - * 渲染: Assets.images.icLogoHome.image() → next/image - */ import Image from "next/image"; import styles from "./splash-logo.module.css"; @@ -15,8 +7,8 @@ export function SplashLogo() { cozsweet diff --git a/src/lib/auth/nextauth.ts b/src/lib/auth/nextauth.ts index 42d56640..90a9e947 100644 --- a/src/lib/auth/nextauth.ts +++ b/src/lib/auth/nextauth.ts @@ -33,6 +33,10 @@ const handler = NextAuth({ pages: { signIn: "/auth", }, + // 显式允许从请求头（X-Forwarded-Host）推断 host；消除 v4 [NEXTAUTH_URL] 警告 + // 生产部署在反向代理后（nginx / cloudflare）必须开 + // @ts-expect-error: `trustHost` 不在 v4.24.x 的 AuthOptions 类型里，但运行时支持 + trustHost: true, secret: process.env.AUTH_SECRET ?? "dev-secret-change-in-prod", });