262 lines
12 KiB
Markdown
262 lines
12 KiB
Markdown
|
---
|
|||
|
|
name: "虫虫出海 Admin"
|
|||
|
|
description: "克制、清晰且高密度可扫描的企业级运营工作台"
|
|||
|
|
colors:
|
|||
|
|
primary: "#667eea"
|
|||
|
|
primary-hover: "#5366c8"
|
|||
|
|
primary-soft: "#eaf1ff"
|
|||
|
|
work-canvas: "#f4f6f8"
|
|||
|
|
surface: "#ffffff"
|
|||
|
|
surface-muted: "#f8fafc"
|
|||
|
|
text: "#172033"
|
|||
|
|
text-secondary: "#475467"
|
|||
|
|
muted: "#667085"
|
|||
|
|
muted-light: "#98a2b3"
|
|||
|
|
border: "#e3e8ef"
|
|||
|
|
border-subtle: "#edf0f4"
|
|||
|
|
success: "#067647"
|
|||
|
|
success-soft: "#ecfdf3"
|
|||
|
|
warning: "#b54708"
|
|||
|
|
warning-soft: "#fffaeb"
|
|||
|
|
danger: "#b42318"
|
|||
|
|
danger-soft: "#fef3f2"
|
|||
|
|
info: "#3538cd"
|
|||
|
|
info-soft: "#eff4ff"
|
|||
|
|
typography:
|
|||
|
|
headline:
|
|||
|
|
fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif'
|
|||
|
|
fontSize: "20px"
|
|||
|
|
fontWeight: 700
|
|||
|
|
lineHeight: 1.35
|
|||
|
|
letterSpacing: "0"
|
|||
|
|
title:
|
|||
|
|
fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif'
|
|||
|
|
fontSize: "16px"
|
|||
|
|
fontWeight: 700
|
|||
|
|
lineHeight: 1.4
|
|||
|
|
letterSpacing: "0"
|
|||
|
|
body:
|
|||
|
|
fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif'
|
|||
|
|
fontSize: "13px"
|
|||
|
|
fontWeight: 400
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
letterSpacing: "0"
|
|||
|
|
label:
|
|||
|
|
fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif'
|
|||
|
|
fontSize: "12px"
|
|||
|
|
fontWeight: 650
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
letterSpacing: "0"
|
|||
|
|
supporting:
|
|||
|
|
fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif'
|
|||
|
|
fontSize: "11px"
|
|||
|
|
fontWeight: 400
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
letterSpacing: "0"
|
|||
|
|
rounded:
|
|||
|
|
xs: "3px"
|
|||
|
|
sm: "4px"
|
|||
|
|
md: "6px"
|
|||
|
|
panel: "8px"
|
|||
|
|
nav: "10px"
|
|||
|
|
accent: "12px"
|
|||
|
|
pill: "999px"
|
|||
|
|
circle: "50%"
|
|||
|
|
spacing:
|
|||
|
|
xxs: "4px"
|
|||
|
|
xs: "8px"
|
|||
|
|
sm: "10px"
|
|||
|
|
md: "12px"
|
|||
|
|
lg: "16px"
|
|||
|
|
xl: "20px"
|
|||
|
|
xxl: "24px"
|
|||
|
|
xxxl: "32px"
|
|||
|
|
components:
|
|||
|
|
dashboard-tab-selected:
|
|||
|
|
backgroundColor: "{colors.primary}"
|
|||
|
|
textColor: "{colors.surface}"
|
|||
|
|
typography: "{typography.label}"
|
|||
|
|
rounded: "{rounded.panel}"
|
|||
|
|
padding: "0 12px"
|
|||
|
|
height: "36px"
|
|||
|
|
dashboard-button-outline:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.text-secondary}"
|
|||
|
|
typography: "{typography.label}"
|
|||
|
|
rounded: "{rounded.panel}"
|
|||
|
|
padding: "0 13px"
|
|||
|
|
height: "36px"
|
|||
|
|
surface-panel:
|
|||
|
|
backgroundColor: "{colors.surface}"
|
|||
|
|
textColor: "{colors.text}"
|
|||
|
|
rounded: "{rounded.panel}"
|
|||
|
|
padding: "20px"
|
|||
|
|
status-badge:
|
|||
|
|
backgroundColor: "{colors.success-soft}"
|
|||
|
|
textColor: "{colors.success}"
|
|||
|
|
typography: "{typography.supporting}"
|
|||
|
|
rounded: "{rounded.pill}"
|
|||
|
|
padding: "2px 8px"
|
|||
|
|
height: "24px"
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 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** 把核心操作放到表格末列或右侧固定列。
|