feat(themes): 添加可编辑的站点外观和皮肤主题(#408)
This commit is contained in:
@@ -1,24 +1,32 @@
|
||||
---
|
||||
title: 功能清单
|
||||
description: 影策当前已实现的核心工作台能力与使用入口
|
||||
description: 当前项目已实现的核心工作台能力与使用入口
|
||||
---
|
||||
|
||||
# 功能清单
|
||||
|
||||
## 平台外观管理
|
||||
## 站点及外观
|
||||
|
||||
管理员可以在“系统配置 → 外观管理”统一设置平台品牌名称、英文品牌标识、浅色与深色 Logo、Logo 外框、登录页主标题、可选说明文案、品牌视频和可选视频封面。Logo 可以只上传任意一套并自动复用,也可以分别为浅色与深色界面上传;工作台和管理后台导航中的圆角矩形外框可以通过统一开关单独禁用,禁用后 Logo 会等比放大到原外框的可用区域,但导航占位不变。品牌名称和对应主题 Logo 会应用到登录页、工作台导航、管理后台、浏览器标题以及创作与素材库的主要品牌文案;登录、注册和找回密码共享同一套左侧品牌文案与影片。
|
||||
管理员可以在“系统配置 → 站点及外观”统一管理品牌识别、登录页、SEO、首页收尾与备案、皮肤主题。品牌识别包括站点名、英文品牌标识、浅色与深色 Logo 和 Logo 外框;登录页包括主标题、说明、品牌视频和可选封面。Logo 可以只上传任意一套并自动复用,也可以分别适配浅色与深色界面;关闭外框后 Logo 会在原导航占位内等比放大。
|
||||
|
||||
前端入口在加载 React 应用之前先读取 `GET /api/public/appearance`。初始 HTML 不包含内置品牌名、Logo 或默认 favicon;只有公开配置成功或明确回退到内置外观后才渲染应用,避免自定义品牌访问时先闪现“影策”。自定义视频未设置封面时保持纯色背景直至视频首帧就绪,不复用内置视频封面。
|
||||
|
||||
浅色 Logo、深色 Logo、视频和封面通过后台专用上传接口进入现有资源存储,并由稳定的公开 slot URL 读取;公开响应不暴露资源 ID。正在使用的外观资源会阻止管理员从资源管理页直接删除。英文品牌标识可作为对象存储路径前缀建议,但不会自动覆盖已经保存的前缀或改写历史资源。“恢复影策默认”会删除外观配置记录并立即恢复全部内置品牌值和默认 Logo 外框,同时保留已经上传的素材文件。配置保留 `schemaVersion` 和 `skinId`,当前只开放 `classic`,后续皮肤库可在同一边界增加颜色、字体、圆角和组件密度包。
|
||||
浅色 Logo、深色 Logo、视频和封面通过后台专用上传接口进入现有资源存储,并由稳定的公开 slot URL 读取;公开响应不暴露资源 ID。正在使用的外观资源会阻止管理员从资源管理页直接删除。英文品牌标识可作为对象存储路径前缀建议,但不会自动覆盖已经保存的前缀或改写历史资源。“恢复影策默认”会恢复内置品牌值、SEO/页脚默认值、经典皮肤和默认 Logo 外框,同时保留已经上传的素材文件。
|
||||
|
||||
SEO 标题、描述、可选关键词会投影到浏览器 metadata、Open Graph、Twitter Card 与 canonical;版权信息在公共登录场景页脚显示。ICP备案默认关闭,启用后必须填写备案号,并链接至工信部备案系统。注册验证码与密码重置邮件的标题、正文和继承型发件人名称都会使用当前站点名。
|
||||
|
||||
皮肤主题以语义令牌集中管理浅色/深色背景、文字、表面、边界、主色、控件状态、hover/active/focus、图标、圆角、尺寸、动效和阴影。默认“经典黑白”不可修改或删除;“青瓷工作室”“暖柿纸境”“霓光紫境”作为重新校色的可编辑初始数据。每套主题还可独立设置警告色、危险操作常态/悬停/按下/前景,以及开关开/关轨道、悬停和滑块色。管理员可从经典或当前主题完整复制、新建、改名、编辑、启用和删除自定义主题;页面只消费语义变量,不按皮肤 ID 分叉业务组件。
|
||||
|
||||
主题卡顶部会按语义使用频次展示该主题浅色与深色令牌的全部去重颜色,宽度不足时保留高频色并截断尾部。颜色编辑器只在直接点击色块时打开系统取色器,点击名称、说明或 HEX 输入不会误触。
|
||||
|
||||
### 相关实现
|
||||
|
||||
- `backend/internal/service/appearance.go`:外观配置校验、公开投影、资源绑定与媒体类型校验。
|
||||
- `backend/internal/handler/appearance.go`:公开读取、公开资源流和管理员读写/上传接口。
|
||||
- `web/src/services/appearance-bootstrap.ts`:应用渲染前的公开外观解析与安全回退。
|
||||
- `web/src/pages/admin/settings/appearance-settings-page.tsx`:外观管理、草稿预览与原子保存流程。
|
||||
- `web/src/pages/admin/settings/appearance-settings-page.tsx`:站点及外观、草稿预览与原子保存流程。
|
||||
- `backend/internal/service/appearance_skins.go`、`web/src/lib/skin-themes.ts`:主题库合同、校验、亮暗语义令牌、CSS Variables 与 Ant Design 组件映射。
|
||||
- `web/src/components/layout/site-compliance-footer.tsx`:公共版权与ICP备案展示。
|
||||
|
||||
## 邮箱找回密码
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 待测试
|
||||
description: 影策已实现功能的手工验证清单与未确认边界
|
||||
description: 当前项目已实现功能的手工验证清单与未确认边界
|
||||
---
|
||||
|
||||
# 待测试
|
||||
@@ -12,13 +12,21 @@ description: 影策已实现功能的手工验证清单与未确认边界
|
||||
- [ ] 在 Linux CI 完成无文件、无权限、错误格式、异常退出与无效 JSON 的 RPC 进程测试,并使用 Docker Buildx/QEMU 执行 `payment-package-smoke` 的 amd64/arm64 双平台构建,确认目标容器内两个 provider 均能真实执行无效 JSON 冒烟请求。
|
||||
- [ ] 保留含旧 Mach-O runtime 的生产 `/data` 卷升级到修复镜像,确认启动后自动选择新 package digest,管理后台保存微信和支付宝配置进入真实凭证校验。
|
||||
|
||||
## 平台外观管理
|
||||
## 站点及外观与皮肤主题
|
||||
|
||||
管理后台已新增“系统配置 → 外观管理”,并让公开品牌配置在应用渲染前完成解析;以下真实浏览器与媒体场景需要持续确认:
|
||||
管理后台“系统配置 → 站点及外观”统一品牌、登录页、SEO、首页收尾/备案和皮肤主题,并让公开配置在应用渲染前完成解析;以下真实浏览器与媒体场景需要持续确认:
|
||||
|
||||
- [x] 后端专项与全量测试通过,覆盖内置默认值、管理员权限、资源类型/归属、公开 URL 不泄漏资源 ID、媒体字节嗅探、删除保护与路由注册。
|
||||
- [x] 前端专项测试、后台回归测试、TypeScript 检查和生产构建通过,覆盖初始 HTML 品牌中立、自定义视频不回退内置封面、不安全 URL 回退、单 Logo 深浅主题复用、双 Logo 主题选择、外框关闭与登录场景固定使用深色 Logo。
|
||||
- [x] 站点名已覆盖注册邮件、密码重置邮件、继承型发件人名称、诊断说明、批量导出、插件与协议文档中的运行时品牌文案;技术兼容键继续保留稳定值。
|
||||
- [x] SEO、版权、ICP备案和主题库通过前后端归一化、持久化、公开投影、metadata/页脚和亮暗语义令牌专项测试;经典皮肤不写覆盖变量且由服务端锁定,三套初始扩展主题可编辑或删除。
|
||||
- [x] 主题库支持从经典或当前主题完整复制、改名、新建、编辑、删除、启用和统一保存;每套包含浅/深各 50 项颜色与 17 项控件参数,公开接口只投影当前主题。
|
||||
- [x] 危险删除、系统警告、错误/成功/信息状态与全站 Ant Switch 已统一消费主题语义色;开关有可编辑的开/关轨道、悬停和滑块色,并以边界与外环增强开启态辨识。主题卡按频次显示全部去重色,取色器只由色块直接触发。
|
||||
- [x] 生产站 `/register` 与 `/forgot-password` 在 1440×900、1280×800、430×932、390×844 下无横向溢出,页面标题、SEO 描述、Open Graph 和版权均使用当前自定义站点名,正文无内置品牌残留。
|
||||
- [ ] 使用管理员账号依次保存品牌名、英文品牌标识、登录页标题/说明、浅色 PNG/WebP Logo、可选深色 Logo、外框开关、MP4/WebM 视频与封面,确认工作台和登录页立即更新,刷新后保持一致。
|
||||
- [ ] 在已登录管理后台从经典主题复制一套自定义主题,修改名称、浅色/深色、按钮 hover/active/focus、输入框、开关开/关轨道与滑块、选中卡、警告/危险色、图标、圆角、阴影和动效;保存刷新后确认保持,再删除测试主题并恢复运营方实际选择。
|
||||
- [ ] 在浅色/深色下检查后台、创作页、插件页和设置页的开关开启/关闭状态,确认颜色、滑块、边界与外环均清晰;检查删除主题、普通危险按钮、确认弹窗、warning/error message 和状态徽标均随主题色变化且文字对比可读。
|
||||
- [ ] 保存 SEO 标题/描述/关键词、版权与ICP备案开关,确认 metadata 和公共页脚刷新后同步;备案链接只指向 `https://beian.miit.gov.cn/`。
|
||||
- [ ] 分别只上传浅色 Logo、只上传深色 Logo、同时上传两套 Logo,并切换浅色/深色主题,确认单图自动复用、双图按主题选择;开启“禁用 Logo 后面的圆角矩形外框”后确认工作台和管理后台导航只显示等比放大到原外框可用区域的 Logo,布局不跳动。
|
||||
- [ ] 在“对象存储”中点击“使用品牌标识”,确认只更新当前路径前缀草稿;未点击或未保存时保留服务端已有前缀,历史资源读取不受影响。
|
||||
- [ ] 保存一套自定义品牌后点击“恢复影策默认”,确认品牌名称、英文标识、Logo、登录页文案和媒体立即恢复内置值,自定义素材文件仍保留在存储资源中。
|
||||
|
||||
Reference in New Issue
Block a user