302 lines
15 KiB
Markdown
302 lines
15 KiB
Markdown
---
|
||
name: CaiWuXiTong
|
||
description: 面向多角色财务协作的克制型 VIP 黑金财务管理系统
|
||
colors:
|
||
rail-black: "#050506"
|
||
rail-gold: "#F2E7C5"
|
||
sidebar-black: "#1D1D1F"
|
||
sidebar-gold: "#F0E4BF"
|
||
sidebar-gold-soft: "#DDD0AA"
|
||
sidebar-active: "#2A2927"
|
||
content-bg: "#F8F6F1"
|
||
surface: "#FFFFFF"
|
||
content-ink: "#171717"
|
||
content-muted: "#595959"
|
||
content-accent: "#B9954F"
|
||
content-accent-soft: "#F7F0DE"
|
||
content-accent-dark: "#856632"
|
||
border: "#D8D2C7"
|
||
success: "#53793E"
|
||
danger: "#B80000"
|
||
warning: "#935F07"
|
||
info: "#006395"
|
||
typography:
|
||
title:
|
||
fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
|
||
fontSize: "0.875rem"
|
||
fontWeight: 600
|
||
lineHeight: 1.25
|
||
body:
|
||
fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
|
||
fontSize: "0.8125rem"
|
||
fontWeight: 400
|
||
lineHeight: 1.5
|
||
label:
|
||
fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
|
||
fontSize: "0.75rem"
|
||
fontWeight: 500
|
||
lineHeight: 1.333
|
||
data:
|
||
fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
|
||
fontSize: "0.78125rem"
|
||
fontWeight: 400
|
||
lineHeight: 1.5
|
||
fontFeature: "tnum"
|
||
rounded:
|
||
sm: "4px"
|
||
md: "8px"
|
||
lg: "12px"
|
||
panel: "16px"
|
||
pill: "999px"
|
||
spacing:
|
||
xs: "4px"
|
||
sm: "8px"
|
||
md: "16px"
|
||
lg: "24px"
|
||
xl: "40px"
|
||
components:
|
||
button-primary:
|
||
backgroundColor: "{colors.content-accent-dark}"
|
||
textColor: "{colors.surface}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "0 14px"
|
||
height: "34px"
|
||
button-primary-hover:
|
||
backgroundColor: "#6A5129"
|
||
textColor: "{colors.surface}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "0 14px"
|
||
height: "34px"
|
||
button-secondary:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.content-ink}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "0 14px"
|
||
height: "34px"
|
||
input-default:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.content-ink}"
|
||
typography: "{typography.body}"
|
||
rounded: "{rounded.md}"
|
||
padding: "0 10px"
|
||
height: "34px"
|
||
sidebar-item:
|
||
backgroundColor: "{colors.sidebar-black}"
|
||
textColor: "{colors.sidebar-gold}"
|
||
typography: "{typography.label}"
|
||
rounded: "{rounded.sm}"
|
||
padding: "8px 10px"
|
||
sidebar-item-active:
|
||
backgroundColor: "{colors.sidebar-active}"
|
||
textColor: "{colors.rail-gold}"
|
||
typography: "{typography.label}"
|
||
rounded: "{rounded.sm}"
|
||
padding: "8px 10px"
|
||
tab-default:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.content-muted}"
|
||
typography: "{typography.title}"
|
||
padding: "0 4px"
|
||
minHeight: "34px"
|
||
tab-active:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.content-accent-dark}"
|
||
typography: "{typography.title}"
|
||
padding: "0 4px"
|
||
minHeight: "34px"
|
||
panel:
|
||
backgroundColor: "{colors.surface}"
|
||
textColor: "{colors.content-ink}"
|
||
rounded: "{rounded.lg}"
|
||
padding: "16px"
|
||
---
|
||
|
||
# Design System: CaiWuXiTong
|
||
|
||
## 1. Overview
|
||
|
||
**Creative North Star: "黑金财务中枢"**
|
||
|
||
CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视觉设计服务于读取、核对、筛选、审批和追踪，不服务于装饰。整体气质必须克制、专业、清晰，具有 VIP 黑金的品质感，但不能变成奢侈品海报、娱乐场所或高饱和暗黑界面。
|
||
|
||
应用外壳使用“深黑工具轨道 + 浅黑功能栏 + 浅色内容区”的三层结构。黑色区域承担全局导航和功能定位，浅金色提供文字与图标的高对比识别；内容区始终保持浅色，使用深色文字和有限的金色交互信号，让大量表格、金额和状态信息稳定可读。
|
||
|
||
这是唯一正式视觉标准。现存页面中的紫色、靛蓝、亮蓝硬编码属于遗留偏差，不能被新页面复制，也不能被写入新的组件。语义色只用于成功、失败、警告和信息状态，不构成第二套主题色。
|
||
|
||
**Key Characteristics:**
|
||
|
||
- 深黑工具轨道、浅黑功能栏、浅色内容区，三层边界清楚。
|
||
- 浅金用于深色导航，深金用于浅色内容区的文字与主要操作。
|
||
- 全站使用 JetBrains Mono，标题和数据采用固定字号，不使用流体放大。
|
||
- 页面标题位于内容区右侧，保持 14px；导航使用统一的紧凑字号。
|
||
- 一、二级导航统一 12px；同一层级的图标、字号和交互状态必须一致。
|
||
- 表格、筛选器和状态反馈优先，装饰性卡片、阴影和动画受到严格限制。
|
||
- 标签切换是局部状态变化，不触发整页刷新；加载前后字号和布局不得跳变。
|
||
|
||
**The Task-First Rule.** 用户必须先看到任务和数据，再看到品牌装饰；任何视觉效果只在帮助定位、读取或确认状态时才允许存在。
|
||
|
||
## 2. Colors
|
||
|
||
配色采用受控的黑金体系：深色导航使用高明度浅金，浅色内容区使用对比度合格的深金。亮金是强调材料，不是正文颜色。
|
||
|
||
### Primary
|
||
|
||
- **VIP 金** (#B9954F): 用于活动下划线、细边框、图标点缀、进度和非文字强调；禁止作为浅色背景上的小号正文或白字按钮背景。
|
||
- **可读深金** (#856632): 用于浅色内容区的活动文字、链接、焦点边框和主要按钮。它在内容底色上的对比度约为 4.93:1，满足普通文字要求。
|
||
- **淡金底色** (#F7F0DE): 用于标签、选中行和弱提示背景，必须搭配深金或深色文字。
|
||
|
||
### Semantic States
|
||
|
||
- 本系统没有第二装饰主题色。紫色、靛蓝和亮蓝不得承担品牌、导航、按钮或选中状态。
|
||
- **成功绿** (#53793E): 只表达已完成、已通过或正向业务结果。
|
||
- **危险红** (#B80000): 只表达错误、拒绝、删除或高风险结果。
|
||
- **警告棕橙** (#935F07): 只表达待处理、需注意或可能产生影响的状态。
|
||
- **信息蓝** (#006395): 只表达中性信息或帮助提示，不得作为主题色。
|
||
|
||
### Neutral
|
||
|
||
- **工具轨道黑** (#050506): 最左侧固定工具栏，是全站最深背景。
|
||
- **功能栏黑** (#1D1D1F): 功能列表区域，比工具轨道略浅，保持两层黑色结构。
|
||
- **活动浅黑** (#2A2927): 深色导航的悬停和选中底色。
|
||
- **工具轨道浅金** (#F2E7C5): 最深工具轨道上的文字和图标。
|
||
- **功能栏浅金** (#F0E4BF): 功能栏一级文字和图标；深色背景上的对比度超过 13:1。
|
||
- **功能栏柔金** (#DDD0AA): 功能栏二级文字和弱提示，不再通过透明度继续降对比度。
|
||
- **内容底色** (#F8F6F1): 页面工作区的浅灰暖白底色。
|
||
- **内容表面** (#FFFFFF): 表格、筛选区和业务面板表面。
|
||
- **正文墨色** (#171717): 标题、正文和关键数据。
|
||
- **辅助墨色** (#595959): 说明、占位和次要数据；不得再降低透明度导致对比不足。
|
||
- **边界色** (#D8D2C7): 面板、输入框、表格分隔和结构边界。
|
||
|
||
### Named Rules
|
||
|
||
**The Two-Gold Rule.** 深色背景使用浅金，浅色背景使用深金；不得把两者交换。亮金在白色上的对比度不足，只能用于非文字强调。
|
||
|
||
**The One-Accent Rule.** 金色是唯一交互强调色。任何新页面出现装饰性紫色、靛蓝、亮蓝或绿色，都视为视觉回归。
|
||
|
||
**The Semantic Exception Rule.** 红、绿、橙、蓝只在状态本身有业务含义时出现，并同时提供文字或图标，不能只依赖颜色传达结果。
|
||
|
||
## 3. Typography
|
||
|
||
**Display Font:** JetBrains Mono (with Microsoft YaHei, PingFang SC, monospace)
|
||
|
||
**Body Font:** JetBrains Mono (with Microsoft YaHei, PingFang SC, monospace)
|
||
|
||
**Label/Mono Font:** JetBrains Mono
|
||
|
||
**Character:** 单一字体家族带来稳定、技术化和可核对的财务工具气质。中文回退字体只在字形缺失时接管；不要增加相似但不同的第二套无衬线字体。
|
||
|
||
### Hierarchy
|
||
|
||
- **页面标题** (600, 14px, 1.25): 固定在内容头部右侧，与配套图标同行；禁止在业务内容内部重复放置大号 H1。
|
||
- **侧边栏一级标题** (500–600, 12px, 16px): 模块和一级功能名称。
|
||
- **侧边栏二级标题** (400–500, 12px, 16px): 通过缩进区分层级，保持单行和稳定行高。
|
||
- **正文** (400, 13px, 1.5): 表单说明、面板正文和常规业务文字。
|
||
- **标签** (500, 12px, 16px): 筛选条件、字段名、状态标签和辅助说明。
|
||
- **表格与金额** (400–600, 12.5px, 1.5): 启用等宽数字 `tabular-nums`，金额和数量右对齐。
|
||
- **关键汇总值** (700, 22px, 1.2): 只用于真实汇总数字，不能充当页面标题。
|
||
|
||
### Named Rules
|
||
|
||
**The Fixed-Scale Rule.** 产品界面使用固定 rem 字号，不使用 `clamp()` 放大标题；桌面与移动端通过布局重排适配，不通过夸张缩放字体适配。
|
||
|
||
**The Stable-First-Paint Rule.** 关键字号、行高和容器尺寸必须由首屏 CSS 直接提供，不能等待 JavaScript 或异步样式后再缩小，禁止首次进入时出现巨大字体闪烁。
|
||
|
||
**The One-Family Rule.** 按钮、标签、导航、表格和正文都使用同一字体家族；禁止在数据界面引入装饰性展示字体。
|
||
|
||
## 4. Elevation
|
||
|
||
界面默认采用“色调分层 + 细边界”，不是依赖大阴影堆叠。工具轨道、功能栏和内容区通过背景明度形成第一层深度；内容面板通过白色表面与细边界形成第二层。阴影只用于浮层或短暂交互反馈。
|
||
|
||
### Shadow Vocabulary
|
||
|
||
- **Surface Low** (`box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04)`): 只用于需要从内容底色中轻微抬起的单层面板。
|
||
- **Floating** (`box-shadow: 0 4px 8px rgba(23, 23, 23, 0.10)`): 只用于下拉框、悬浮菜单和模态浮层。
|
||
- **Focus Ring** (`box-shadow: 0 0 0 3px rgba(133, 102, 50, 0.20)`): 键盘焦点和输入聚焦反馈，不承担常驻装饰。
|
||
|
||
### Named Rules
|
||
|
||
**The Flat-by-Default Rule.** 静态业务面板默认无阴影；若已经有 1px 边框，不得再叠加 16px 以上模糊半径的宽阴影。
|
||
|
||
**The No-Nested-Cards Rule.** 卡片只用于真实分组；卡片内部不能再套同样外观的卡片。优先使用标题、间距、分隔线和表格分组表达层级。
|
||
|
||
## 5. Components
|
||
|
||
### App Shell
|
||
|
||
- 最左工具轨道固定为 56px，使用 `colors.rail-black`。
|
||
- 功能列表桌面宽度为 224px，使用 `colors.sidebar-black`；收起后不残留透明占位。
|
||
- 内容区使用 `colors.content-bg`，业务表面使用 `colors.surface`。
|
||
- 小屏幕折叠导航，内容保持完整宽度；表格允许局部横向滚动，页面本身不得横向漂移。
|
||
|
||
### Navigation
|
||
|
||
- 一、二级导航统一 12px；文字和对应 Material 图标使用同一浅金色。
|
||
- 图标统一采用 Material Icons Outlined/Round，导航图标统一 16px；同一业务语义不得在不同页面更换图标体系。
|
||
- 当前二级菜单只显示一个 16px 圆形浅金 chevron 指示器；禁止同时保留竖条、圆点或第二个箭头。
|
||
- 悬停使用轻微浅金透明底，选中使用 `colors.sidebar-active`；状态变化为 150–200ms。
|
||
|
||
### Page Header
|
||
|
||
- 页面标题始终位于内容头部右侧，14px/600，文字前配一个与业务匹配的 18–20px 图标。
|
||
- 标题文字使用 `colors.content-ink`，图标使用可读深金；禁止左侧大号标题或内容面板内的重复 H1。
|
||
- 标题区域必须在首屏 CSS 中获得最终字号和位置，不能依赖加载完成后的脚本纠正。
|
||
|
||
### Tabs
|
||
|
||
- 标签栏采用白色表面，按所在区域保持紧凑高度和足够点击空间；同类页面一致，不把主标签栏的 80px 高度套用到局部标签。
|
||
- 默认文字使用辅助墨色；活动文字使用 `colors.content-accent-dark`，底部使用 3px `colors.content-accent` 下划线。
|
||
- 标签图标与文字同色；切换只更新内容、URL History 和活动状态，不触发 document 级刷新。
|
||
- 标签变化使用 150ms 状态过渡；`prefers-reduced-motion` 下立即切换。
|
||
|
||
### Buttons
|
||
|
||
- 标准高度 34px，8px 圆角，13px/500；同一操作在所有页面保持相同高度、圆角和状态。
|
||
- 主按钮使用可读深金底和白字；悬停使用更深一档金色，焦点显示 3px 深金焦点环。
|
||
- 次按钮使用白底、边界色和正文墨色；悬停只改变边界或浅底，不变成第二主题色。
|
||
- 禁用状态保留可读标签，降低整体强调并移除点击反馈；加载状态保持原宽度。
|
||
|
||
### Inputs / Fields
|
||
|
||
- 标准高度 34px，8px 圆角，白底、1px 边界；标签位于字段上方，12px/500。
|
||
- 聚焦使用深金边框和半透明焦点环；占位文字至少使用辅助墨色，不允许低对比浅灰。
|
||
- 错误状态使用语义危险色、明确文字和错误图标；不能只把边框染红。
|
||
|
||
### Cards / Containers
|
||
|
||
- 常规业务面板使用 12px 圆角、16px 内边距；大型工作区容器最多使用 16px 圆角、24px 内边距。
|
||
- 表面为白色，边界为 `colors.border`；默认不加宽阴影。
|
||
- 筛选、汇总和数据表属于同一业务流程时，用间距和分隔线组织，不生成无意义的多层卡片。
|
||
|
||
### Data Tables
|
||
|
||
- 表格正文 12.5px，表头 12px/600；表头可使用极浅金背景，不能使用蓝紫背景。
|
||
- 金额、数量、比例右对齐并启用等宽数字；文本左对齐，状态居中或按列契约统一。
|
||
- 行悬停使用极浅金/中性背景；选中状态同时提供图标、文字或边界，不只改变底色。
|
||
- 收入、支出、错误和成功色遵循业务语义；不得为了“好看”交换红绿含义。
|
||
|
||
- 各业务表格支持列显示/隐藏、拖动排序和恢复默认；按用户及页面、标签页、表格分别保存，表头、数据和合计同步排列，必要操作列可固定。
|
||
- 单层或多层表头随纵向滚动保持可见；横向滚动条在浏览数据时始终可达，不得落到屏幕外或必须滚至整表底部才能操作。
|
||
- 合理设置表格滚动容器，适配视口、缩放和侧栏变化，避免多层滚动互相干扰。优先复用现有组件，具体实现自主选择。
|
||
- 导出明确范围，支持当前筛选结果及可见列顺序，不把当前页冒充全部；保留金额精度、日期和长编号格式，遵守字段权限，密码不导出，大数据量沿用分批或后台机制。
|
||
- 允许导入的业务提供模板、预览、字段校验、重复处理和逐行失败反馈，不静默覆盖数据；只读上游镜像不增加写回入口。业务规则不明时只澄清必要问题。
|
||
|
||
### Scrollbars
|
||
|
||
- 内容滚动条为 8px，轨道使用浅中性色，滑块使用 VIP 金；悬停使用更深金色。
|
||
- 深色导航的滚动条轨道透明、滑块浅金，不能出现系统紫色或亮蓝色。
|
||
|
||
### Loading, Empty and Error States
|
||
|
||
- 首次加载使用与最终布局同尺寸的骨架或稳定占位，避免标题、标签和表格跳动。
|
||
- 空状态说明“为什么没有数据”和“下一步能做什么”，不能只写“暂无数据”。
|
||
- 错误状态保留重试入口和明确原因；局部失败不能清空整个页面或触发整页刷新。
|
||
|
||
## 6. 使用原则
|
||
|
||
- 复用已有令牌和组件，按上述标准保持同类页面一致；常规排版和交互细节自主决定，不增加额外设计审批。
|
||
- 临时截图和 `design-qa.md` 仅作验收证据，不覆盖本文件；规则变化时同步 `.impeccable/design.json`，不另建规范文件。
|
||
- 保持首屏布局稳定、焦点可见，正文和小号文字对比度至少 4.5:1；不添加与业务无关的装饰或宣传内容。
|