feat(web): brand PWA as 有数记账

This commit is contained in:
openclaw 2026-07-26 20:11:03 +08:00
parent 65ce9670b8
commit ae31f2e567
13 changed files with 36 additions and 22 deletions

View File

@ -4,8 +4,8 @@ DOMAIN=cents.homemade.net.cn
# App install identity. Use "dev" for cents-dev and "pro" for cents-pro. # App install identity. Use "dev" for cents-dev and "pro" for cents-pro.
APP_VARIANT=pro APP_VARIANT=pro
# Optional overrides for the PWA install name/id. # Optional overrides for the PWA install name/id.
# VITE_APP_NAME=Cents Dev # VITE_APP_NAME=有数记账 Dev
# VITE_APP_SHORT_NAME=Cents Dev # VITE_APP_SHORT_NAME=有数 Dev
# VITE_APP_ID=/?app=cents-dev # VITE_APP_ID=/?app=cents-dev
# Public VPS / frps address. # Public VPS / frps address.

View File

@ -3,8 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#f7f4ee" /> <meta name="theme-color" content="#43c9bd" />
<link rel="manifest" href="/manifest.webmanifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<title>Cents</title> <title>Cents</title>
</head> </head>
<body> <body>
@ -12,4 +14,3 @@
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

View File

@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
<rect width="128" height="128" rx="24" fill="#214e4b"/>
<path d="M34 38h60v52H34z" fill="#f7f4ee"/>
<path d="M44 50h40M44 64h30M44 78h22" stroke="#214e4b" stroke-width="8" stroke-linecap="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 274 B

View File

@ -1,5 +1,5 @@
const CACHE_NAME = "cents-shell-v3"; const CACHE_NAME = "cents-shell-v3";
const APP_SHELL = ["/", "/manifest.webmanifest", "/icon.svg"]; const APP_SHELL = ["/", "/manifest.webmanifest"];
self.addEventListener("install", (event) => { self.addEventListener("install", (event) => {
event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL))); event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)));

View File

@ -7,11 +7,15 @@ type AppVariant = "dev" | "pro";
function appIdentityPlugin(mode: string): Plugin { function appIdentityPlugin(mode: string): Plugin {
const env = loadEnv(mode, monorepoRoot, ""); const env = loadEnv(mode, monorepoRoot, "");
const envValue = (name: string) => process.env[name] || env[name];
const defaultVariant: AppVariant = mode === "development" ? "dev" : "pro"; const defaultVariant: AppVariant = mode === "development" ? "dev" : "pro";
const variant: AppVariant = env.APP_VARIANT === "dev" || env.APP_VARIANT === "pro" ? env.APP_VARIANT : defaultVariant; const configuredVariant = envValue("APP_VARIANT");
const appName = env.VITE_APP_NAME || (variant === "dev" ? "Cents Dev" : "Cents"); const variant: AppVariant = configuredVariant === "dev" || configuredVariant === "pro" ? configuredVariant : defaultVariant;
const shortName = env.VITE_APP_SHORT_NAME || appName; const appName = envValue("VITE_APP_NAME") || (variant === "dev" ? "有数记账 Dev" : "有数记账");
const appId = env.VITE_APP_ID || (variant === "dev" ? "/?app=cents-dev" : "/?app=cents"); const shortName = envValue("VITE_APP_SHORT_NAME") || appName;
const appId = envValue("VITE_APP_ID") || (variant === "dev" ? "/?app=cents-dev" : "/?app=cents");
const iconPrefix = variant === "dev" ? "icon-dev" : "icon";
const appleTouchIcon = variant === "dev" ? "/apple-touch-icon-dev.png" : "/apple-touch-icon.png";
const manifest = JSON.stringify( const manifest = JSON.stringify(
{ {
@ -21,14 +25,26 @@ function appIdentityPlugin(mode: string): Plugin {
description: "家庭共享账本", description: "家庭共享账本",
start_url: "/", start_url: "/",
display: "standalone", display: "standalone",
background_color: "#f7f4ee", background_color: "#ffffff",
theme_color: "#f7f4ee", theme_color: "#43c9bd",
icons: [ icons: [
{ {
src: "/icon.svg", src: `/${iconPrefix}-192.png`,
sizes: "any", sizes: "192x192",
type: "image/svg+xml", type: "image/png",
purpose: "any maskable", purpose: "any",
},
{
src: `/${iconPrefix}-512.png`,
sizes: "512x512",
type: "image/png",
purpose: "any",
},
{
src: `/${iconPrefix}-maskable-512.png`,
sizes: "512x512",
type: "image/png",
purpose: "maskable",
}, },
], ],
}, },
@ -50,7 +66,10 @@ function appIdentityPlugin(mode: string): Plugin {
}); });
}, },
transformIndexHtml(html) { transformIndexHtml(html) {
return html.replace(/<title>.*<\/title>/, `<title>${appName}</title>`); return html
.replace(/<title>.*<\/title>/, `<title>${appName}</title>`)
.replace('href="/icon-192.png"', `href="/${iconPrefix}-192.png"`)
.replace('href="/apple-touch-icon.png"', `href="${appleTouchIcon}"`);
}, },
generateBundle() { generateBundle() {
this.emitFile({ this.emitFile({