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.
This commit is contained in:
2026-06-11 11:29:52 +08:00
parent 39ef78e9ea
commit 72941d9c9f
5 changed files with 67 additions and 53 deletions
@@ -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)
);
}
+16 -8
View File
@@ -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"
>
<div className={styles.dialog}>
<div className={styles.icon} aria-hidden="true">
📱
</div>
<Image
className={styles.icon}
src="/images/icons/icon-add-to-home.png"
alt=""
width={86}
height={86}
priority
/>
<h2 id="pwa-dialog-title" className={styles.title}>
Install cozsweet
Install {AppConstants.appTitle}
</h2>
<p className={styles.content}>
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.
</p>
<div className={styles.actions}>
<button
@@ -51,14 +59,14 @@ export function PwaInstallDialog({ onClose, onInstall }: PwaInstallDialogProps)
className={`${styles.btn} ${styles.btnSecondary}`}
onClick={onClose}
>
Not now
Cancel
</button>
<button
type="button"
className={`${styles.btn} ${styles.btnPrimary}`}
onClick={handleInstall}
>
Install
OK
</button>
</div>
</div>
+11 -3
View File
@@ -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<{
+2 -10
View File
@@ -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 <Image>
*/
import Image from "next/image";
import styles from "./splash-logo.module.css";
@@ -15,8 +7,8 @@ export function SplashLogo() {
<Image
src="/images/splash/ic-logo-home.png"
alt="cozsweet"
width={120}
height={40}
width={180}
height={60}
priority
className={styles.image}
/>
+4
View File
@@ -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",
});