feat(web): 添加可自定义主题工作室 / add customizable theme studio

[Cec1c]

中文说明

这个 PR 为 CPA Manager Plus 增加了统一的「主题工作室」，将原本分散的明暗主题和视觉效果设置整合到一个带调色板图标的侧边抽屉中，并补齐类似 new-api 的主题风格定制能力。

主要功能

• 10 套内置主题配色：CPAMP 蓝、暖陶、地下花园、玫瑰花园、湖光、落日余晖、森林低语、海风、薰衣草梦、黑白。
• 支持自定义强调色，并自动生成明暗模式下的语义色阶和可读前景色。
• 支持自动 / 明亮 / 黑夜三种显示模式。
• 支持默认、直角、小、中、大、超大六档圆角。
• 支持系统、现代、衬线三种字体风格。
• 支持紧凑、默认、舒适三档界面密度。
• 支持铺满与居中两种内容宽度。
• 整合原有「完整效果 / 性能优先」选项。
• 登录页与管理界面共用同一个主题入口，所有设置实时预览并在浏览器本地持久化。
• 支持键盘焦点约束、Esc 关闭、低动态效果、低透明度偏好和 375px 移动端布局。
• 已补充简体中文、繁体中文、英文和俄文文案。

兼容性

这是纯前端改动，不修改 Manager Server、CPA API、配置文件或数据库。CPA panel、Manager Server 和完整 Docker 模式均沿用现有单文件前端构建方式，不新增运行时依赖。

验证结果

• npm run type-check 通过
• npm run lint 通过
• npm test：106 个测试文件、971 项测试全部通过
• npm run build 和 npm run build:demo 通过
• 已实测桌面端、375×812 移动端、明暗模式、主题持久化、登录页和管理页
• 浏览器控制台无应用警告或错误

---

Summary

Adds a unified Theme Studio inspired by modern admin theme customizers. It replaces the separate theme/effects menus with one palette drawer and keeps all preferences local to the browser.

Scope

• Frontend panel
• Manager Server
• CPA panel mode
• Full Docker mode
• Native packages / release
• Docs / Wiki
• CI / build / tooling

Changes

• Add 10 named color presets plus a custom accent color, with paired light/dark semantic tokens.
• Add radius, font, density, content-width, display-mode, and visual-effects controls with live preview and reset.
• Reuse the same accessible palette drawer on the login page and authenticated header; persist settings with Zustand.
• Add responsive/mobile behavior, focus trapping, reduced-motion/transparency handling, four-locale copy, and theme utility tests.

User Impact

Users can open the palette icon to personalize CPAMP without editing CSS. Existing Auto/Light/Dark and Full effects/Performance choices are now part of the same panel and retain their prior behavior.

Compatibility / Runtime Notes

• CPA panel mode: frontend-only local preferences; no API or configuration changes.
• Manager Server mode: same frontend behavior.
• Full Docker / native packages: bundled into the existing single-file web build; no runtime dependency changes.

Data / Security Notes

N/A. Theme preferences are stored in browser local storage only; no credentials or server data are touched.

Risk / Rollback

Risk level: Medium

Rollback notes: revert commit 75bec2d2; no data migration or server rollback is required.

Verification

• Type check
• Lint
• Tests
• Build
• Manual UI check
• Docs/link check
• Not applicable, docs-only

Commands / evidence:

npm run type-check
npm run lint
npm test                         # 106 files, 971 tests passed
npm run build                    # production single-file build passed
npm run build:demo               # demo single-file build passed
Manual: desktop 1874x931, mobile 375x812, light/dark, presets, radius,
density, content width, effects, login page, persistence across reload.
Browser console: 0 warnings/errors from the app.

Screenshots / Recordings

Manual screenshots were captured during local QA for the desktop dashboard, mobile drawer, and login page. They are not committed to avoid adding binary documentation assets; the demo can be reproduced with npm run dev:demo.

Docs

• README / README_CN updated for user-visible capabilities
• Matching docs manual and navigation updated
• Demo fixtures, screenshots, and deep links reviewed
• Release notes needed
• Not needed — explanation included below

Docs decision: the feature is self-contained and discoverable from the palette icon, introduces no server configuration, and uses translated inline descriptions for every option.

Related

N/A

[Cec1c]

主题示范

[Cec1c]

btw，我抄newapi的