12 KiB
name, description, colors, typography, rounded, spacing, components
| name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 虫虫出海 Admin | 克制、清晰且高密度可扫描的企业级运营工作台 |
|
|
|
|
|
Design System: 虫虫出海 Admin
Overview
Creative North Star: "冷静的运营工作面"
虫虫出海 Admin 是面向平台员工的高密度运营工作台。界面以冷灰工作面承接连续任务，以白色边框面板划分可操作区域，以柏悦蓝标记主操作、焦点和当前选中项；视觉表达克制，优先让字段、状态和操作顺序一眼可扫。
系统不依赖装饰性大色块制造层级。面板边界、浅层级色、紧凑字号和稳定间距共同组织信息；状态色只承担分类、进度、告警和错误反馈，不替代文字标签。壳层可以建立明确品牌存在感，业务内容区保持安静、可复用、可扩展。
Key Characteristics:
- 冷灰画布与白色面板构成稳定工作面。
- 柏悦蓝只承载主操作、焦点和选中态。
- 12–13px 信息层与 16–20px 标题层形成紧凑层级。
- 边框和浅色填充负责大多数深度，阴影保持稀缺。
- 桌面端追求密度，窄屏端保证 44px 级触控与可横向退化的数据表格。
Colors
主色清晰但不过量；中性冷灰负责内容秩序，语义色只在需要判断状态时出现。
Primary
- 柏悦蓝：用于主操作、当前导航、页内选中态、关键链接和可见焦点。
- 柏悦蓝悬停色：用于白底描边操作的悬停文字与边框反馈。
- 柏悦蓝浅底：用于图标容器、头像底和弱强调背景，不作为大面积业务面板底色。
Neutral
- 冷灰工作面：应用画布与全屏看板背景，使白色业务面板保持清晰边界。
- 白色业务面：卡片、表格、筛选栏、抽屉和控件的默认承载面。
- 浅层级灰：表头、说明块和次级区域背景。
- 墨色正文：标题、主值和核心业务文本。
- 次级墨灰：表头、次级数据和操作文案。
- 说明灰：帮助文本、辅助标签、时间与空值提示。
- 冷灰边线：面板、分区和表格结构的主要深度手段。
Secondary
- 成功绿 / 浅成功绿：已完成、启用和正向状态。
- 告警橙 / 浅告警橙：待处理、临近期限和需关注状态。
- 危险红 / 浅危险红：错误、失败、停用和高风险状态。
- 信息靛蓝 / 浅信息靛蓝：信息型状态和非主操作分类。
Named Rules
The One Primary Rule. 柏悦蓝是唯一的全局交互主色；图表分类色和语义色不得升级为第二主色。
The Status Has Words Rule. 状态色必须与状态文字、图标或结构共同出现，绝不只靠颜色传达业务含义。
Typography
Display Font: PingFang SC（回退至 Microsoft YaHei、Segoe UI、sans-serif）
Body Font: PingFang SC（回退至 Microsoft YaHei、Segoe UI、sans-serif）
Label/Mono Font: 业务标签沿用正文栈；权限码与接口值使用 Cascadia Code（回退至 Consolas、monospace）
Character: 统一的系统无衬线字栈保证中文字段紧凑清晰，不使用展示型字体制造品牌感。层级主要来自字号、字重和颜色，而不是大幅字距或全大写。
Hierarchy
- Headline（700，20px，1.35）：页面级标题、详情页标题和空状态主标题。
- Title（700，16px，1.4）：面板标题、表格区标题和主要分区标题。
- Body（400，13px，1.5）：业务内容、表单值和操作说明。
- Label（650，12px，1.5）：表头、筛选标签、按钮和强调型元数据。
- Supporting（400，11px，1.5）：帮助文本、时间、附注、次级值和状态胶囊。
Named Rules
The Scan Before Drama Rule. 业务页标题不以超大字号争夺空间；20px 页面标题、16px 分区标题与 12–13px 内容层已经构成完整层级。
Layout
应用壳层在桌面端使用固定 240px 侧栏、64px 顶部栏和 20px 内容边距；折叠侧栏为 76px。业务页面以 16px 垂直节奏堆叠，数据看板使用 14–18px 卡片间距，面板常用 16–24px 内边距。筛选栏、指标条、表格面板和抽屉分区通过一致边框对齐，避免每个模块自行发明容器结构。
960px 以下优先减少多列网格；720px 以下侧栏变为遮罩抽屉，页面边距收至 14–18px，筛选控件纵向铺满，抽屉占满宽度，操作按钮保证可触控高度；420px 以下指标条转为单列或受控双列。表格保留语义列和首列操作，通过水平滚动退化，不把关键操作固定到最右侧。最低 320px 宽度下仍保持内容可访问。
The Operation First Rule. 业务数据表格的“操作”列始终是第一列；布局收窄时保留该顺序。
Elevation & Depth
系统采用“平面为主、壳层有深度”的混合策略。业务面板默认依靠冷灰画布、白色表面、1px 边框和浅层级填充建立关系；常驻阴影集中在固定侧栏、粘性顶部栏、头像与粘性操作区，卡片阴影只在明确悬停状态出现。
Shadow Vocabulary
- 侧栏壳层（
4px 0 32px rgba(0,0,0,.08)）：固定侧栏与内容工作面的分界。 - 顶部栏壳层（
0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.1)）：粘性顶部栏的结构性悬浮。 - 头像状态（
0 4px 12px rgba(0,0,0,.15)）：顶部栏内小面积实体的清晰分离。 - 卡片悬停（
0 6px 16px rgba(23,42,70,.08)）：仅用于可点击卡片的悬停反馈。 - 粘性底栏（
0 -8px 22px rgba(15,23,42,.05)）：需要在长表单中保持可见的操作区。
Named Rules
The Flat Business Surface Rule. 普通卡片、表格和筛选面板静止时不加阴影；边框与层级色已经足够。
Shapes
业务面板和主要交互以轻度圆角为主：8px 是卡片、面板、页内按钮和多数复合控件的主轮廓；6px 用于说明块和紧凑内部容器，10–12px 只用于导航或更具身份感的壳层元素。状态胶囊使用完全圆角，头像、数据图例点和进度点使用圆形。结构边线保持 1px，不使用厚描边装饰内容区。
Components
Buttons
- Shape: 页内按钮和分段选择使用轻度圆角（8px）；Element Plus 通用按钮保留其既有组件轮廓。
- Primary: 柏悦蓝底配白字，用于查询、提交和当前选中项；同一区域避免并列多个主按钮。
- Hover / Focus: 描边按钮悬停时转为柏悦蓝系边框与文字；全局键盘焦点使用 3px 半透明蓝色轮廓并保留外偏移。
- Secondary / Ghost: 白底冷灰描边承载重置、返回、全屏和低优先级操作；禁用态使用浅灰底、浅灰字并移除可点击光标。
Chips
- Style: 状态胶囊最小高度 24px，左右 8px 内边距，11px 半粗文字；默认使用中性灰，成功、告警、危险与信息状态使用各自的浅底深字组合。
- State: 胶囊用于呈现状态，不替代按钮；可筛选标签的选中态仍回到柏悦蓝交互语义。
Cards / Containers
- Corner Style: 白色业务面板采用 8px 圆角。
- Background: 业务内容用白色，表头和内部次级区域用浅层级灰。
- Shadow Strategy: 默认无阴影，遵守 Elevation & Depth 中的平面业务面规则。
- Border: 1px 冷灰边线；表格内部使用更浅的分隔线。
- Internal Padding: 常规面板 20px，紧凑工具栏 14–16px，抽屉分区 22–24px。
Inputs / Fields
- Style: 复用 Element Plus 输入、选择和日期控件；筛选字段桌面端常用 260–360px，白底、细边框、紧凑高度。
- Focus: 使用柏悦蓝焦点边框和全局可见焦点轮廓，不以阴影替代键盘焦点。
- Error / Disabled: 错误保留具体文案与请求元信息；禁用态降低对比并保持不可操作语义。
Navigation
- Style: 桌面侧栏 240px，折叠为 76px；一级项高 46px，子项高 42px。默认文字为中性灰，悬停以浅蓝渐变和轻微横移反馈，当前项使用柏悦蓝文字、加粗字重与左侧内嵌标记。720px 以下转换为遮罩式侧栏，不压缩正文到不可读宽度。
Data Tables
- Style: 表头高 44px，12px 半粗文字与浅灰底；单元格垂直内边距 12px，主值 13px、次值 11px。
- Structure: 操作列在第一列；表格面板裁切外轮廓，表尾用顶边线连接分页和结果统计。
- Responsive: 窄屏保留水平滚动与 44px 操作触控高度，不隐藏关键字段而制造上下文丢失。
Dashboard Panels
- Style: 指标卡和图表面板沿用 8px 白色边框面板。图表分类色只在图形、图例点和数据标记中出现；面板标题、轴标签和说明仍使用全局中性色层级。
- State: 全屏模式回到冷灰工作面；数据未接入时必须明确标注为静态演示，不把占位数据伪装为实时数据。
Do's and Don'ts
Do:
- Do 优先复用
--cc-primary、--cc-border、--cc-muted和既有白色面板结构。 - Do 用 1px 边线、浅层级灰和稳定间距组织密集数据。
- Do 为加载、空数据、错误、禁用和无权限状态保留清晰文字与可恢复操作。
- Do 在 720px 以下检查侧栏、筛选栏、表格、抽屉与按钮的触控和滚动退化。
- Do 使用 Lucide 图标，并为纯图形操作提供文本或无障碍名称。
Don't:
- Don't 在普通业务面板上批量添加阴影、玻璃效果或装饰渐变。
- Don't 把图表分类色或状态色用于主操作、导航选中态或大面积背景。
- Don't 用表情符号充当功能图标，也不要只靠颜色表达状态。
- Don't 用超大标题、宽字距或低密度留白牺牲运营页面的扫描效率。
- Don't 把核心操作放到表格末列或右侧固定列。