From 5c1a998192f647a790663d6e4a1ef3fa869a823f Mon Sep 17 00:00:00 2001 From: charilezhou Date: Tue, 20 Jan 2026 18:22:22 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=AE=9E=E7=8E=B0=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E4=B8=BB=E9=A2=98=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 支持 6 套预设主题（默认、海洋、森林、日落、玫瑰、紫罗兰）和自定义主色色相滑块， 通过动态注入 CSS 变量实现主题切换，使用 localStorage 持久化存储， 添加 SSR 初始化脚本避免首次加载颜色闪烁。 Co-Authored-By: Claude Opus 4.5 --- apps/web/src/app/layout.tsx | 8 + .../web/src/components/settings/HueSlider.tsx | 71 +++++++++ .../src/components/settings/ThemeSettings.tsx | 98 +++++++++++- apps/web/src/config/theme-presets.ts | 115 ++++++++++++++ apps/web/src/hooks/useThemeInit.ts | 25 ++++ apps/web/src/lib/theme-generator.ts | 139 +++++++++++++++++ apps/web/src/lib/theme-init-script.ts | 140 ++++++++++++++++++ apps/web/src/lib/theme-service.ts | 124 ++++++++++++++++ apps/web/src/stores/types.ts | 6 + apps/web/src/stores/uiStore.ts | 41 ++++- 10 files changed, 761 insertions(+), 6 deletions(-) create mode 100644 apps/web/src/components/settings/HueSlider.tsx create mode 100644 apps/web/src/config/theme-presets.ts create mode 100644 apps/web/src/hooks/useThemeInit.ts create mode 100644 apps/web/src/lib/theme-generator.ts create mode 100644 apps/web/src/lib/theme-init-script.ts create mode 100644 apps/web/src/lib/theme-service.ts diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 71fc66c..5216eb5 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -2,6 +2,8 @@ import type { Metadata } from 'next'; import { Providers } from './providers'; +import { getThemeInitScript } from '@/lib/theme-init-script'; + import './globals.css'; export const metadata: Metadata = { @@ -19,6 +21,12 @@ export default function RootLayout({ }>) { return ( + + {/* 主题初始化脚本 - 避免颜色闪烁 */} +