---
name: 自助洗车运营管理
description: 为自助洗车门店提供一站式运营管理平台，连接门店、服务商与车主
colors:
  cinnabar-red:
    hex: "#C6171E"
    role: primary
  cinnabar-light:
    hex: "#E84545"
    role: primary-light
  cinnabar-dark:
    hex: "#A81212"
    role: primary-dark
  success-green:
    hex: "#52C41A"
    role: semantic
  warning-orange:
    hex: "#FF9800"
    role: semantic
  error-red:
    hex: "#F44336"
    role: semantic
  info-blue:
    hex: "#2196F3"
    role: semantic
  ink-black:
    hex: "#1A1A1A"
    role: text-primary
  stone-grey:
    hex: "#666666"
    role: text-secondary
  ash-grey:
    hex: "#999999"
    role: text-disabled
  cloud-grey:
    hex: "#B0B0B0"
    role: text-placeholder
  surface-white:
    hex: "#FFFFFF"
    role: surface
  frost-page:
    hex: "#F5F7FA"
    role: page-bg
  hairline:
    hex: "#E0E0E0"
    role: border
  hairline-light:
    hex: "#F0F0F0"
    role: border-light
typography:
  display:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.2
  headline:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.3
  title:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: 1.3
  body:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: 1.2
rounded:
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  pill: "100px"
spacing:
  xs: "4px"
  sm: "8px"
  base: "12px"
  lg: "16px"
  xl: "20px"
  card-inner: "10px"
components:
  button-primary:
    backgroundColor: "{colors.cinnabar-red}"
    textColor: "{colors.surface-white}"
    rounded: "{rounded.lg}"
    padding: "12px 28px"
  button-primary-pressed:
    backgroundColor: "{colors.cinnabar-dark}"
    textColor: "{colors.surface-white}"
    rounded: "{rounded.lg}"
  button-secondary:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-black}"
    rounded: "{rounded.sm}"
    padding: "10px 24px"
  chip-status:
    backgroundColor: "var(--chip-bg)"
    textColor: "var(--chip-color)"
    rounded: "{rounded.pill}"
    padding: "3px 12px"
  card:
    backgroundColor: "{colors.surface-white}"
    rounded: "{rounded.xl}"
    padding: "12px"
  input-field:
    backgroundColor: "#F5F5F5"
    textColor: "{colors.ink-black}"
    rounded: "{rounded.sm}"
    padding: "10px 14px"
  tab-active:
    backgroundColor: "{colors.cinnabar-red}"
    textColor: "{colors.surface-white}"
    rounded: "{rounded.sm}"
  tab-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.stone-grey}"
    rounded: "{rounded.sm}"
---

# Design System: 自助洗车运营管理

## 1. Overview

**Creative North Star: "工坊里的红标工具箱"**

朱砂红是工具箱上的那块铭牌——它不抢眼，但你扫一眼就知道该拿哪一把。每一件工具都放在它应该在的位置，手柄的弧度刚好贴合手掌，不需要说明书，不需要思考。界面是安静的，但处处有回应：按下去有反馈，等待时有交代，出错时说人话。

这套设计语言服务于每天面对屏幕数小时的操作者——洗车店经营者、员工、服务商。它不追求惊艳，追求的是长期相处的舒适。温润有质、清晰优先、亲切高效：这三条产品原则直接翻译成了视觉规则。

**Key Characteristics:**
- 红色是功能性的，不是装饰性的——它标记主操作、激活态、关键信息，只占屏幕的 ≤10%
- 微妙的触感反馈：静态时平面，交互时元素微升，阴影轻且聚焦
- Inter 字体承载从 32px 标题到 12px 标签的完整层级，重量对比清晰
- 字典驱动的状态色系统：红/绿/橙/蓝四色由后端控制，前端不做假设
- 卡片白底带极轻阴影，页面底色是带有一点蓝调的灰白

## 2. Colors

朱砂红是工具箱的标记色，灰白系是工坊的墙面和桌面。

### Primary
- **朱砂红 Cinnabar Red** (#C6171E): 主操作按钮、选中态、导航栏背景、品牌焦点。出现在每屏 ≤10% 的面积上——它的稀缺就是它的力量。
- **浅朱砂 Cinnabar Light** (#E84545): 悬停态、渐变终点、需要比主色轻一级的强调场景。
- **深朱砂 Cinnabar Dark** (#A81212): 按压态、链接悬停、需要更沉一步的红色。

### Semantic
- **成功绿 Success Green** (#52C41A): 在线、已完成、收入金额。字典映射的默认成功色。
- **提醒橙 Warning Orange** (#FF9800): 待处理、忙碌、需注意。非破坏性的警示。
- **错误红 Error Red** (#F44336): 删除、危险操作、失败状态。与朱砂红保持区分。
- **信息蓝 Info Blue** (#2196F3): 链接、辅助信息、中性提示。

### Neutral
- **墨黑 Ink Black** (#1A1A1A): 正文标题，最高对比度文字。
- **石灰 Stone Grey** (#666666): 次要信息、描述文字、未选中标签。
- **灰 Ash Grey** (#999999): 禁用态、占位提示、次级辅助信息。
- **云灰 Cloud Grey** (#B0B0B0): 输入框占位符。
- **纸白 Surface White** (#FFFFFF): 所有卡片和内容区的背景。
- **霜白页面 Frost Page** (#F5F7FA): 页面底色，略带蓝调的灰白，与卡片白形成自然层级。
- **发丝线 Hairline** (#E0E0E0): 标准分割线和边框。
- **浅发丝 Hairline Light** (#F0F0F0): 轻量分割，卡片内部元素分隔。

### Named Rules

**The 10% Rule.** 朱砂红在任何一屏上的面积不超过 10%。它是标记，不是底色。如果发现自己在给第三个元素涂红，先问问前两个是不是必须的。

**The Red Don't Compete Rule.** 错误红 (#F44336) 和朱砂红 (#C6171E) 永远不同时出现在同一视线区域内。它们是两套独立的信号系统——品牌 vs 状态——混在一起就是噪音。

## 3. Typography

**Display Font:** Inter (with system fallback stack)
**Body Font:** Inter (with system fallback stack)

**Character:** Inter 是一个「没有口音」的字体——它不暗示任何时代、任何地域、任何行业。它的中性让操作者把注意力完全放在数据上，而不是字体的性格上。但它的 x-height 偏高、开口开阔，在长时间阅读时不容易疲劳。

### Hierarchy
- **Display** (700, 32px, 1.2): 页面级标题。每页只出现一次。
- **Headline** (600, 24px, 1.3): 区块标题、弹窗标题。
- **Title** (600, 20px, 1.3): 卡片标题、列表项主文字。
- **Body** (400, 16px, 1.5): 正文、表单标签、列表内容。行宽上限 70ch。
- **Body SM** (400, 14px, 1.5): 辅助描述、时间戳、次要列表项。
- **Label** (500, 12px, 1.2): 状态标签内文字、表头、元数据。可配合大写。

### Named Rules

**The Weight Contrast Rule.** 相邻层级之间字重差至少 200（Regular→Semibold→Bold），字号差至少 1.25 倍。不要用同字重不同字号来区分层级——它看起来像排版错误。

**The Single Typeface Rule.** 全系统只用 Inter 一个字族。不要引入第二个字体——层级完全由字号和字重区分，不需要换字体来「增加变化」。

## 4. Elevation

**触感微升 Tactile Lift.** 界面在静态时是平的——卡片和页面底色之间只有颜色差异，没有阴影。元素只有在交互时才微微浮起：悬停的卡片、按下的按钮、展开的下拉。阴影是交互的产物，不是默认装饰。

### Shadow Vocabulary
- **微光 Ambient SM** (`0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)`): 悬停态，元素刚刚离开表面。
- **标准 Ambient Base** (`0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)`): 卡片默认态（当页面需要卡片显式分层时）。
- **升起 Lift LG** (`0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)`): 激活卡片、拖拽中元素。
- **顶层 Elevate XL** (`0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)`): 模态框、弹出层。
- **品牌导航 Branded Nav** (`0 2px 8px rgba(198,23,30,0.15)`): 顶部导航栏专属——红色调阴影让它温和地浮在内容之上。

### Named Rules

**The Lift-On-Interaction Rule.** 静态元素没有阴影。阴影只在 hover、focus、active、drag 时出现。如果一张卡在用户碰到它之前就已经浮在那里，问自己它是不是真的需要那么重要。

## 5. Components

### Buttons

**Character:** 温润确定。圆角柔和但不圆胖，按压有下降和颜色加深的双重反馈。

- **Shape:** 主按钮圆角 16px（lg），次级按钮和操作按钮 8px（sm）。提交型全宽按钮使用 44rpx（22px）胶囊形。
- **Primary:** 朱砂红背景，白色文字，内边距 12px 28px。字体 14px/500。
- **Hover:** 背景变为浅朱砂 (#E84545)，或原色基础上叠加半透明遮罩。
- **Pressed:** 背景变为深朱砂 (#A81212)，同时 `transform: scale(0.97)`——双重确认。
- **Disabled:** 不透明度 0.5，背景退为 #CCCCCC。交互完全阻断。
- **Secondary:** 白底，墨黑文字，1px 发丝线边框。悬停时边框加深。
- **Ghost:** 纯文字，无背景无边框。用于表格行内操作、工具栏次要动作。悬停时文字变色为朱砂红。

### Chips / Status Tags

**Character:** 功能性徽章——一眼知道状态，不需要读文字。

- **Shape:** 胶囊形（pill，100px 半径），内边距 3px 12px，字号 11px/500。
- **Color:** 背景 = 字典色 + `1A`（10% 不透明度），文字 = 字典色原值。例如在线状态：`background: #52C41A1A; color: #52C41A`。
- **Fallback:** 当字典数据不可用时，成功态 #52C41A，警告态 #FAAD14，错误态 #F5222D，中性态 #999999。
- **Size:** 统一高度，文字自适应宽度。不设固定宽度。

### Cards

**Character:** 安静的白纸。圆角柔和（24px/xl），阴影极轻（Ambient Base），只在悬停时升起。

- **Corner Style:** 24px（xl），或页面内使用 20rpx（10px）。
- **Background:** 纸白 #FFFFFF。
- **Shadow (at rest):** 可选，取决于页面是否需要显式分层。数据密集页面可默认带阴影；信息流页面可仅靠底色区分。
- **Shadow (hover):** `0 4rpx 16rpx rgba(0,0,0,0.06)`，配合 `translateY(-2px)`。
- **Border:** 无。用阴影和间距区分卡片与背景，不加描边。
- **Internal Padding:** 24rpx（12px）标准，30rpx（15px）宽松。

### Inputs / Fields

**Character:** 低调的输入区，焦点时被朱砂红唤醒。

- **Style:** 背景 #F5F5F5（比霜白页面稍暖的灰），无边框，圆角 8px（sm），内边距 10px 14px。
- **Focus:** 朱砂红聚焦环 `0 0 0 3px rgba(198,23,30,0.2)`，背景保持 #F5F5F5 不变。
- **Placeholder:** 云灰 #B0B0B0，14px/400。
- **Error:** 聚焦环变为错误红，输入框下方不额外显示红色提示框（错误信息在字段旁或下方用文字提示）。

### Segmented Controls / Filter Tabs

**Character:** 快速切换视口的「挡位选择器」。选中态有明确的物理感。

- **Container:** 背景 #F5F5F5，圆角 16rpx（8px），内边距 6rpx（3px），flex 排列。
- **Active Segment:** 朱砂红背景，白色文字，字重 500。附带品牌色阴影 `0 4rpx 12rpx rgba(198,23,30,0.3)`——这是整个系统里阴影最重的元素，因为它需要确认「你在这里」。
- **Inactive:** 透明背景，石灰 (#666666) 文字，字重 400。
- **Transition:** 0.25s cubic-bezier(0.4, 0, 0.2, 1)。

### Search Bars

**Character:** 工具条，不是装饰。输入区和按钮紧密相邻，一眼知道是搜索。

- **Container:** 白底卡片，标准阴影 `0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)`，圆角匹配所在页面的卡片风格。
- **Input Wrapper:** 背景 #F5F5F5，圆角 8px，内含搜索图标（AppIcon `search`，云灰色）。
- **Search Button:** 朱砂红背景，白色文字 "搜索"，圆角 8px。紧贴输入区右侧。

### Navigation (NavBar)

**Character:** 朱砂红的顶部标记——告诉操作者「你还在工具里」。白色标题文字，左侧返回箭头。

- **Background:** 朱砂红 #C6171E。
- **Shadow:** 品牌导航阴影 `0 2px 8px rgba(198,23,30,0.15)`。
- **Layout:** 三列——左侧 120rpx 固定宽度（返回箭头），中间标题居中，右侧 120rpx 固定宽度（可选操作按钮）。
- **Title:** 17px/600，白色。
- **Height:** 44px + 状态栏高度。
- **Back Arrow:** AppIcon `chevron-left`，白色，24px。

## 6. Do's and Don'ts

### Do:
- **Do** 用朱砂红标记每屏唯一的主操作路径。如果一屏上出现两个红色按钮，其中一个必须降级为次级。
- **Do** 用 24px 圆角统一所有卡片。页面上不应该出现两种不同的卡片圆角。
- **Do** 让阴影只出现在交互时。静态元素保持平坦，页面底色和卡片底色之间的色差已经足够区分层级。
- **Do** 用字重差异（≥200）和字号差异（≥1.25x）来建立信息层级，不依赖颜色。
- **Do** 在状态标签上使用字典色 + 10% 不透明度背景的公式。这是系统级的约定，不要为某个标签特判。
- **Do** 给所有颜色过渡和位置变化使用 `cubic-bezier(0.4, 0, 0.2, 1)` 缓动，0.25s 时长。统一的节奏比花哨的曲线更重要。

### Don't:
- **Don't** 使用大色块堆砌、过度装饰、多余动画、营销口号式文案。这个系统是为工具使用场景设计的，不是营销页面。
- **Don't** 出现密集表格、灰色调泛滥、控件堆叠、缺乏视觉层级和呼吸感的老式 ERP 风格。
- **Don't** 使用 SaaS 奶油白 + 单色蓝紫渐变的模板化配色。这里没有蓝紫渐变的位置。
- **Don't** 为了追求"专业"而牺牲温度——无性格的灰色、机械的间距、缺乏反馈的交互。
- **Don't** 使用 `border-left` 或 `border-right` 超过 1px 的彩色侧边条纹来标记卡片或列表项。用完整的边框、背景色差或前置图标代替。
- **Don't** 使用渐变文字（`background-clip: text`）。标题的强调通过字重和字号实现，不需要渐变。
- **Don't** 在一屏上同时使用错误红 (#F44336) 和朱砂红 (#C6171E)——它们是两套信号系统，混在一起互相消解。
- **Don't** 引入第二个字体。Inter 承担所有角色。层级靠字重和字号，不靠换字体。
- **Don't** 嵌套卡片——卡片里面再放卡片永远是错的。用背景色差或分割线区分内容区块。
