feat(themes): 添加可编辑的站点外观和皮肤主题(#408)
This commit is contained in:
Ray
@@ -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备案展示。
|
||||
|
||||
## 邮箱找回密码
|
||||
|
||||
|
||||
Reference in New Issue
Block a user