279 lines
16 KiB
Markdown
279 lines
16 KiB
Markdown
---
|
||
name: CreatorHub
|
||
description: 延续 Ant Design 默认组件的克制、清晰的抖音运营工作台
|
||
colors:
|
||
primary: "#1677ff"
|
||
primary-hover: "#4096ff"
|
||
primary-active: "#0958d9"
|
||
primary-background: "#e6f4ff"
|
||
success: "#52c41a"
|
||
warning: "#faad14"
|
||
error: "#ff4d4f"
|
||
neutral-layout: "#f5f5f5"
|
||
neutral-container: "#ffffff"
|
||
neutral-text: "rgba(0,0,0,0.88)"
|
||
neutral-secondary: "rgba(0,0,0,0.65)"
|
||
neutral-disabled: "rgba(0,0,0,0.25)"
|
||
neutral-border: "#d9d9d9"
|
||
neutral-divider: "#f0f0f0"
|
||
nav-selected-background: "rgba(0,0,0,0.04)"
|
||
nav-selected-text: "rgba(0,0,0,0.95)"
|
||
event-like: "#eb2f96"
|
||
event-follow: "#722ed1"
|
||
event-repost: "#fa8c16"
|
||
source-sync: "#faad14"
|
||
source-notice: "#13c2c2"
|
||
tag-like-background: "#fff0f6"
|
||
tag-like-text: "#c41d7f"
|
||
typography:
|
||
title:
|
||
fontSize: "20px"
|
||
fontWeight: 600
|
||
lineHeight: 1.4
|
||
body:
|
||
fontFamily: >-
|
||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||
'Noto Color Emoji'
|
||
fontSize: "14px"
|
||
fontWeight: 400
|
||
lineHeight: 1.5714285714285714
|
||
label:
|
||
fontSize: "14px"
|
||
fontWeight: 600
|
||
lineHeight: 1.5714285714285714
|
||
rounded:
|
||
sm: "4px"
|
||
md: "6px"
|
||
lg: "8px"
|
||
spacing:
|
||
xs: "8px"
|
||
sm: "12px"
|
||
md: "16px"
|
||
lg: "24px"
|
||
components:
|
||
button-primary:
|
||
backgroundColor: "{colors.primary}"
|
||
textColor: "{colors.neutral-container}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "4px 15px"
|
||
height: "32px"
|
||
button-primary-hover:
|
||
backgroundColor: "{colors.primary-hover}"
|
||
button-primary-active:
|
||
backgroundColor: "{colors.primary-active}"
|
||
button-default:
|
||
backgroundColor: "{colors.neutral-container}"
|
||
textColor: "{colors.neutral-text}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "4px 15px"
|
||
height: "32px"
|
||
button-text:
|
||
backgroundColor: "transparent"
|
||
textColor: "{colors.neutral-text}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
height: "32px"
|
||
input:
|
||
backgroundColor: "{colors.neutral-container}"
|
||
textColor: "{colors.neutral-text}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "4px 11px"
|
||
height: "32px"
|
||
nav-selected:
|
||
backgroundColor: "{colors.nav-selected-background}"
|
||
textColor: "{colors.nav-selected-text}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
tag-like:
|
||
backgroundColor: "{colors.tag-like-background}"
|
||
textColor: "{colors.tag-like-text}"
|
||
rounded: "{rounded.sm}"
|
||
card:
|
||
backgroundColor: "{colors.neutral-container}"
|
||
rounded: "{rounded.lg}"
|
||
padding: "{spacing.lg}"
|
||
---
|
||
|
||
# Design System: CreatorHub
|
||
|
||
## Overview
|
||
|
||
**Creative North Star: "日常运营工作台"**
|
||
|
||
界面是长期处理账号和数据的工作场所。视觉语言克制、常规、清晰，通过位置、分组、文字层级、轻微颜色和状态反馈帮助使用者判断信息，而不是通过装饰吸引注意。
|
||
|
||
延续当前 Umi Max 4.7、React 19、antd 6.6.5、Pro Components 3.x 和 Ant Design X 的界面。使用 antd/pro 默认组件，不新建另一套按钮、表单、导航或视觉包装；组件不适合业务时优先调整交互。尺寸根据同屏密度与操作频率选择，不以统一放大来强调可用性。
|
||
|
||
**Key Characteristics:**
|
||
- 熟悉的组件、图标与交互，不要求使用者学习新视觉隐喻。
|
||
- 内容和操作层级清楚，辅助入口不抢主操作的注意力。
|
||
- 列表保持适合日常工作的密度，长内容不撑宽页面。
|
||
- 未知、错误和处理中有明确反馈，不通过视觉制造假正常。
|
||
|
||
本文件记录现有系统，不是改版方案。机器可读数值来自已安装 antd 的 `theme.getDesignToken()`、默认组件与预设色阶，以及 Pro Components 自带的 `getLayoutDesignToken()` 和 `ProLayout` 菜单配置；活动代码没有额外自定义主题或全局样式覆盖。ProLayout 内部默认值优先于普通 antd Menu 的默认值，不能把两者混为一套导航配色。前言中的数值是当前默认主题快照，不要求在应用中重复配置。现有实现依据为 `web/src/layouts/index.tsx`、`web/src/utils/metadata.tsx`、`web/src/components/accounts/` 和 `web/src/pages/creator/`；产品约束见 `PRODUCT.md` 与 `AGENTS.md`。本次是代码分析，未进行浏览器视觉验收。
|
||
|
||
## Colors
|
||
|
||
使用白色内容区、浅灰页面背景和低对比度分隔，保留 Ant Design 的清晰蓝色作为交互强调；业务标签用少量预设色区分语义，不形成第二套品牌配色。
|
||
|
||
### Primary
|
||
|
||
- **清晰交互蓝**（`colors.primary`）：主要按钮、链接及组件原生交互强调。悬停与按下使用默认蓝色色阶，不额外添加渐变、光晕或重色块。
|
||
- **浅蓝交互底**（`colors.primary-background`）：组件原生的轻度强调，不用于整块表格或整页背景，也不替代 ProLayout 的侧栏选中底。
|
||
|
||
### Neutral
|
||
|
||
- **浅灰工作底**（`colors.neutral-layout`）：页面底层，与白色卡片区分。
|
||
- **白色内容面**（`colors.neutral-container`）：表单、卡片和弹层的主要承载面。
|
||
- **深色正文 / 次级说明 / 禁用文字**（`colors.neutral-text`、`colors.neutral-secondary`、`colors.neutral-disabled`）：使用默认透明度表达层级，禁用色不承担重要正文。
|
||
- **控件边界 / 轻分隔**（`colors.neutral-border`、`colors.neutral-divider`）：区分输入、表格和内容分组，不增粗边框制造强调。
|
||
- **侧栏浅灰选中底 / 深色选中文字**（`colors.nav-selected-background`、`colors.nav-selected-text`）：沿用 ProLayout 自带侧栏配色，不改成普通 antd Menu 的浅蓝底与蓝字。
|
||
|
||
### Named Rules
|
||
|
||
**The Semantic Color Rule.** 颜色必须同时有文字说明：成功、警告和错误使用相应状态组件；事件类型固定为点赞粉色、评论蓝色、关注紫色、转发橙色，来源固定为同步金色、通知青色。不得仅靠颜色解释状态。
|
||
|
||
事件和来源采用 `Tag` 的 `magenta`、`blue`、`purple`、`orange`、`gold`、`cyan` 预设。前言中的事件色是色系主色；实际 Tag 文本、背景和边框由 antd 的该色系生成，不能把主色强行用作所有文字。`tag-like` 记录其中一个实际预设样例。
|
||
|
||
## Typography
|
||
|
||
**Body Font:** 使用前言中的 antd 系统字体栈，标题和标签沿用同一字体。中文由用户系统可用字体呈现；不新增网络字体、专属展示字体或装饰性字形。
|
||
|
||
**Character:** 字体服务于连续阅读和数据判断。中文标题与正文遵循默认组件层级，不使用大段全粗体或宣传式大标题。
|
||
|
||
### Hierarchy
|
||
|
||
- **Title**：默认四级标题角色，用于常规内容标题；页面标题的实际呈现由 `PageContainer` 决定，不单独覆盖。
|
||
- **Body**：表格内容、表单值、操作名称和说明的主要角色；默认字号与行高见前言。
|
||
- **Label**：需要强调的字段或小节名称，沿用默认加粗，不另设字体。
|
||
- 更小的辅助文字、其他标题级别和控件大小交由 `Typography` 与组件自身 API，不将三个记录角色当成全站强制字号表。
|
||
|
||
**The Honest Hierarchy Rule.** 标题说明“这是哪里”，正文说明“发生了什么”，辅助文字说明“下一步怎么办”；不能用放大字号掩盖状态缺失或信息组织问题。
|
||
|
||
## Layout
|
||
|
||
- 全局使用 `ProLayout` 的混合布局与固定侧栏，菜单按“运营”“资源”分组，工作台为独立入口。侧栏不另造品牌区；详情页选中所属菜单，不同时高亮多个前缀相近的入口。
|
||
- 页面标题和副标题来自 `PageContainer`，不在卡片内重复页面标题。当前全站关闭面包屑；登录页不经过主布局。
|
||
- 列表主操作放在表格 Card 内右上角，与左侧统计信息同行，使用 `Flex justify="space-between" align="center"`；操作行与后续内容间距为 `spacing.md`。不得同时在页头重复注册同一列表操作。
|
||
- 非列表页操作可使用现有页头槽，与实体信息同处 content 行；沿用默认布局能力，不另造浮动工具栏。
|
||
- ProLayout 自带的轻背景过渡属于库默认表现，不新增装饰性渐变，也不为消除它而改写主题。PageContainer 的默认内容留白由库处理，不把其较大边距推广到所有控件。
|
||
- 间距采用组件默认值和前言中的常用刻度。并非所有内容都必须使用同一内边距；普通 Card 默认内容留白与紧凑列表区应根据组件能力选择。
|
||
- 筛选行可以换行。内容必须约束在可用宽度内；长文本完整换行，不撑宽整页。确需横向空间的数据表使用组件的滚动能力，不把桌面表格硬挤成不可读的窄列。
|
||
- 默认组件保留自己的响应能力，但本项目没有已验收的独立手机布局。本次不承诺额外断点布局或移动端功能；侧栏折叠、菜单与控件适配优先使用 ProLayout/antd 原生能力。
|
||
- 返回列表保留筛选、TAB 和浏览位置；改变筛选或每页数量回到第一页。该行为避免工作中断，不通过重新排列页面表达状态变化。
|
||
|
||
## Elevation & Depth
|
||
|
||
界面以背景层次和轻边界组织信息；普通内容区不额外叠加强阴影。Modal、Dropdown、Tooltip、Popover 等短暂浮层保留组件默认深度，以区别于页面内容。不是“全站禁止阴影”，也不是每张卡片都需要悬浮感。
|
||
|
||
### Shadow Vocabulary
|
||
|
||
- **默认浮层阴影**：沿用 antd 的 `boxShadow` / `boxShadowSecondary`，准确值记录在 `.impeccable/design.json`；不在业务页面写另一套近似值。
|
||
- **默认控件反馈**：按钮自身的轻阴影和输入焦点反馈由组件保留，不扩大为卡片外发光。
|
||
|
||
**The Quiet Depth Rule.** 普通内容靠层次与分组，浮层靠默认深度；不要用厚阴影、粗描边或装饰性渐变提高存在感。
|
||
|
||
动效只用于组件状态、展开与关闭等反馈，沿用 antd 默认速度与缓动。不添加循环装饰动画，也不以假进度或永不结束的骨架屏掩盖未实现功能。
|
||
|
||
## Shapes
|
||
|
||
采用默认组件的轻圆角：常规输入与按钮使用 `rounded.md`，Tag 等小元素使用 `rounded.sm`，Card 等容器使用 `rounded.lg`。这些是默认刻度，不需要给所有现有元素手动写圆角。
|
||
|
||
表格、表单和内容区保持常规轮廓。不要将辅助开关、工具按钮或状态标签放大成胶囊式视觉中心，不增加厚边框、大圆角和装饰性形状。
|
||
|
||
作品小封面沿用现有业务组件。事件聚合的对应作品使用 48px 小封面；不同列表的封面尺寸按已有组件与信息密度处理，不推广为全站图片规格。
|
||
|
||
## Components
|
||
|
||
### Buttons
|
||
|
||
常规、清晰，突出当前任务而不是按钮本身。
|
||
|
||
- 主操作使用原生 `Button` 的主要样式；列表新增等入口采用通用图标并放在卡片内。
|
||
- 次级操作使用默认按钮、文字入口或“更多”菜单。每行只保留必要的状态感知主操作，不铺开所有动作。
|
||
- 默认大小、悬停、按下、焦点、禁用和 loading 由组件处理；不能把默认控件高度当成必须统一放大的下限。
|
||
- 暂停、停止和删除等有影响的动作明确确认。危险语义采用组件原生 `danger`，不通过自制颜色替代。
|
||
|
||
### Tags & Status
|
||
|
||
轻量、带明确文字，不作为大面积视觉装饰。
|
||
|
||
- 类型与来源使用预设彩色 `Tag`；采集状态仅一个 Tag，异常优先，原因去重后通过 Tooltip 说明。
|
||
- 未登录环境使用“待登录”；没有状态或读取失败不能显示成正常。
|
||
- 不以 Tag 替代按钮，不通过没有文字的圆点要求使用者猜测含义。
|
||
|
||
### Cards / Containers
|
||
|
||
白色内容面，边界轻，间距常规。
|
||
|
||
- 使用默认 `Card` 与内容留白，按需要通过组件属性区分边界，不用额外包装组件重做卡片。
|
||
- 卡片小节标题可保留；页面标题只能出现于全局页头。统计信息与主操作遵循 Layout 中的排列。
|
||
- 普通卡片不追加阴影、重底色或大圆角。
|
||
|
||
### Inputs / Fields
|
||
|
||
直接表达输入规则，错误紧邻对应字段。
|
||
|
||
- 使用 `Form`、`Input`、`InputNumber`、`Select` 等原生控件；数据来自可搜索下拉时不提供未经确认的手填替代。
|
||
- 保留默认焦点、错误、禁用和校验反馈。标签不能只放在 placeholder 中，重要错误不能只靠颜色表达。
|
||
- 原生 `Modal` 承载列表中的创建流程；创建成功关闭并刷新，失败保留填写内容和清楚的错误提示。
|
||
- 帮助文字说明实际格式或限制，不为短表单增加多余步骤。
|
||
|
||
### Navigation
|
||
|
||
可辨认、稳定，不抢内容的注意力。
|
||
|
||
- 菜单及中文标题以 `web/src/utils/metadata.tsx` 为准；延续 ProLayout 默认交互，不定制深蓝侧栏或另一套导航样式。
|
||
- 图标来自 `@ant-design/icons`，选用行业通用隐喻，不自行发明不熟悉的符号。
|
||
- 来源切换使用原生 Tabs；各来源独立保存筛选和分页，不让切换导致上下文丢失。
|
||
|
||
### Tables & Content
|
||
|
||
适合反复筛选、比较和追溯，不为装饰牺牲密度。
|
||
|
||
- 账号名、时间、指标和操作各有明确列语义。缺少指标显示“—”，缺少昵称使用已确认的前端提示，不伪造真实资料。
|
||
- 长事件内容在列内完整换行，不截断、不折叠、不添加“展开”，也不能撑宽页面。
|
||
- 作品入口配合本地小封面；缺图保持入口和明确提示，不以远程图片掩盖缓存失败。
|
||
- 分页、筛选、空状态和错误状态使用默认组件；空列表不是错误，读取失败不是空列表。
|
||
|
||
### Conversations
|
||
|
||
沿用聊天组件，让联系人、消息和输入保持熟悉关系。
|
||
|
||
- 私信使用 Ant Design X 的 `Conversations`、`Bubble.List` 与 `Sender`，不另造聊天皮肤。
|
||
- 同一联系人在不同账号下保持独立会话，所属账号清晰，刷新和加载更多不改变当前选中会话。
|
||
- 消息的发送中、失败和结果未确认需要可辨认说明，不展示没有证据的送达或已读状态。
|
||
|
||
### Feedback
|
||
|
||
出现问题时说明当前结果与可执行动作，不能悄悄消失。
|
||
|
||
- 使用 `Alert` 的 `title` / `description`，通过 `App.useApp()` 获取消息实例；不重新使用弃用 API。
|
||
- 纵向排列使用 `Flex vertical`，不恢复 `Space direction`。
|
||
- 断线、缺失资料、下载失败和校验失败显示不同原因；正在处理只对真实请求显示 loading。
|
||
- `Empty` 说明无数据或未实现功能。当前工作台以此说明看板尚未实现，不展示假图表、假数据或假骨架屏。
|
||
|
||
`.impeccable/design.json` 提供工具面板用的独立 HTML/CSS 样例、默认阴影、动效、断点及色阶。样例从现有默认组件翻译，供工具预览，不是可复制到应用中的自定义组件或样式；应用仍使用原生 antd/pro。工具预览不能替代实际界面验收。
|
||
|
||
## Do's and Don'ts
|
||
|
||
### Do:
|
||
|
||
- **Do** 沿用原生 antd/pro 的样式和状态，通过组件 API 解决布局与交互需求。
|
||
- **Do** 让标题、统计、筛选、列表与操作有清楚层级，主操作只在对应区域出现一次。
|
||
- **Do** 用文字和组件状态同时解释未知、错误、处理中和完成。
|
||
- **Do** 将长内容约束在列内，保持真实资料、作品入口和缺图提示可辨认。
|
||
- **Do** 保留键盘焦点、可见标签和通用图标，修改后与同屏信息密度对照检查。
|
||
|
||
### Don't:
|
||
|
||
- **Don't** 恢复 MUI、react-admin、旧深蓝导航或另一套独立主题。
|
||
- **Don't** 新建视觉包装组件或通过 CSS 覆盖默认组件样式；现有业务组件不等于新的设计系统封装。
|
||
- **Don't** 主动放大控件，增加厚边框、强阴影、大圆角、装饰性渐变或营销页式布局。
|
||
- **Don't** 仅靠颜色传达状态，或把未知、断线、缺失数据呈现为正常、零或完成。
|
||
- **Don't** 用编造的头像、指标、图表、远程封面或无限加载来隐藏真实缺失与未实现功能。
|