---
name: 自助洗车运营管理系统
description: 自助洗车门店一站式运营管理后台，兼顾效率与清爽的现代工具界面
colors:
  brand-red: "#C83A35"
  surface-white: "#FEFEFE"
  content-bg: "#F0F2F5"
  text-primary: "#303133"
  text-regular: "#606266"
  text-secondary: "#909399"
  border-light: "rgb(5 5 5 / 6%)"
  sidebar-bg: "#001529"
  sidebar-logo-bg: "#002140"
  menu-active-before: "#C83A35"
typography:
  body:
    fontFamily: '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
    fontSize: "14px"
    fontWeight: 700
  code:
    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
    fontSize: "1em"
rounded:
  sm: "3px"
  md: "4px"
  lg: "5px"
spacing:
  sidebar-expanded: "210px"
  sidebar-collapsed: "54px"
  header-height: "48px"
  menu-item-height: "50px"
components:
  button-primary:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.surface-white}"
    rounded: "{rounded.md}"
  button-primary-hover:
    backgroundColor: "oklch(45% 0.16 25)"
  menu-item-active:
    backgroundColor: "{colors.brand-red}"
    textColor: "#fff"
    rounded: "{rounded.sm}"
---

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

## 1. Overview

**Creative North Star: "清晨车间"**

走进清晨的洗车车间：地面刚冲过，工具归位整齐，阳光从高窗斜射进来，空气里有微微的温热。这个后台管理系统应该给操作者同样的感受 — 一切井然有序、触手可及、不张扬但有温度。

系统继承了 `vue-pure-admin` 的布局骨架和 Element Plus 的组件体系，但配色从默认蓝转向品牌红，在专业工具感中注入洗车行业的识别度。设计追求的是「用得顺手」而非「看了惊艳」：信息层级清晰，操作路径短，视觉噪音低。明确拒绝传统后台的密集表格堆砌和 SaaS 模板的苍白单调。

**Key Characteristics:**
- 功能先行的信息架构，核心操作路径不超过两级菜单
- 红色作为策略性点缀 (≤10% 页面面积)，不做大面积色块
- 暗色侧边栏 + 亮色内容区的经典双区布局，不跟风全暗模式
- 留白和间距有节奏变化，不追求「每处等距」的机械整齐

## 2. Colors

品牌红是系统中唯一的强调色。中性色体系来自 Element Plus 的灰度分级，足以覆盖文本、背景、边框的所有场景。

### Primary
- **Brand Red** (#C83A35 / oklch(52% 0.16 25)): 洗车品牌红 — 精神、醒目但不刺眼。用于主按钮、激活态菜单项、关键状态指示、进度条。仅在需要传达「行动」和「确认」时出现。

### Neutral
- **Surface White** (#FEFEFE): 卡片、弹窗、表格等浮层组件的背景。微暖，不是纯白。
- **Content Background** (#F0F2F5): 主要内容区底色，提供柔和的对比基准。
- **Text Primary** (#303133): 正文、标题、核心信息的默认色。
- **Text Regular** (#606266): 辅助描述、次要标签、表单字段名。
- **Text Secondary** (#909399): 占位符、禁用语态、极次要信息。
- **Border Light** (rgb(5 5 5 / 6%)): 分割线、卡片边框、输入框描边。

### Sidebar (Dark Zone)
侧边栏使用独立暗色调，与亮色内容区形成稳定双栏对比。
- **Sidebar BG** (#001529): 侧边栏底色，深藏蓝黑。
- **Sidebar Logo BG** (#002140): 侧边栏顶部 Logo 区域，比主体略亮。

### Named Rules
**The 10% Rule.** Brand Red 在任何页面上的总面积不超过 10%。按钮、选中态、关键图标 — 它的力量来自稀缺，而不是铺张。

**The Tinted Neutral Rule.** 不在中性色中使用纯黑 (#000) 或纯白 (#fff)。Surface White 向暖色微偏，背景灰向蓝微偏，维持「清晨车间」的微暖而不冰冷。

## 3. Typography

**Body Font:** "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
**Code/Mono Font:** ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

**Character:** 标准中文后台字体栈。PingFang SC / Microsoft YaHei 保证中英文混排的一致性，Helvetica Neue 在前端作为数字和英文的最优渲染选择。

### Hierarchy
- **Headline** (600, 20px, 1.4): 页面主标题。一个页面最多一个。
- **Title** (600, 16px, 1.4): 区块标题、卡片头、弹窗标题。
- **Body** (400, 14px, 1.5): 正文、表格内容、描述文本。最大行宽 75ch。
- **Label** (700, 14px, 1.5): 表单标签、字段名。用重量而非颜色建立层级。
- **Caption** (400, 12px, 1.4): 辅助说明、时间戳、次要元数据。

### Named Rules
**The Weight-Only Hierarchy Rule.** 文本层级通过字号和字重区分，不依赖颜色变化。同字号下，Regular vs Bold 的信息差足够大。

## 4. Elevation

系统采用**轻量分层**策略。大部分表面是平的，阴影仅用于浮层组件（弹窗、下拉菜单、消息提示）和悬停反馈。侧边栏和内容区通过颜色对比分层，不走纯阴影路径。

### Shadow Vocabulary
- **Message Float** (`0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05)`): 消息提示、通知弹出。
- **Dialog Footer** (`0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%)`): 弹窗和搜索框底部分隔。
- **VXE Table Fixed Column** (`8px 0 10px -5px rgba(0,0,0,0.06)`): 固定列的横向滚动阴影提示。

### Named Rules
**The Flat-By-Default Rule.** 卡片、表格、表单默认无阴影。阴影只在需要传达「此层浮于彼层之上」时出现。

## 5. Components

所有组件基于 Element Plus 2.x，以下记录关键定制和用法约束。

### Buttons
- **Shape:** 微圆角，默认 4px。
- **Primary:** Brand Red 背景 + 白色文字。padding 遵循 Element Plus 默认 (8-15px 横, 5-12px 纵按尺寸)。用于主操作：确认、提交、新建。
- **Hover:** 背景加深至 oklch(45% 0.16 25)，无上移或放大动画。
- **Default/Secondary:** 白色背景 + 灰色边框。用于取消、返回、批量操作中的次要动作。
- **Text:** 无边框无背景，Brand Red 文字色，用于表格行内操作（编辑、查看、删除）。

### Sidebar Menu
- **Style:** 暗色底 + 亮色文字。默认 "default" 主题 (sidebar: #001529)。
- **Menu Item:** 48px 高，文字 color: rgb(254 254 254 / 65%)，hover 时变亮。
- **Active Item:** Brand Red 背景底 (3px 圆角)，白色文字带 z-index 浮于底条之上。
- **Collapse:** 折叠到 54px 宽时只显示图标，hover 弹出完整菜单项。

### Cards
- **Corner Style:** 4px 圆角 (Element Plus 默认)。
- **Background:** Surface White。
- **Shadow Strategy:** 无默认阴影。悬停时可选轻微阴影做反馈。
- **Internal Padding:** 默认 20px。

### Inputs / Fields
- **Style:** 白色背景，1px Border Light 描边，4px 圆角。
- **Focus:** Brand Red 描边置换（Element Plus 默认行为）。
- **Label:** 700 字重，Text Regular 色。

### Tables (VXE Table)
- **Style:** 表头深色底 (暗色模式下 #151515 底 + #c9d1d9 文字)。
- **Stripe:** 可选斑马纹，偶数行浅灰底。
- **Hover:** 行悬停背景微变。
- **Fixed Column:** 阴影过渡提示可横向滚动。

### Navigation (Horizontal Header)
- **Style:** 48px 高横栏，背景色继承侧边栏主题。
- **Logo:** 左侧 32px 高图片 + 18px 600 字重标题。
- **Right Actions:** 搜索、全屏、通知铃铛、用户头像下拉，间距均匀。

## 6. Do's and Don'ts

本文档继承 PRODUCT.md 的所有反参考，以下是视觉层面的具体约束。

### Do:
- **Do** 用 Brand Red 做页面唯一强调色，按钮、选中态、关键状态指示
- **Do** 让信息层级通过字号和字重表达，不依赖多种颜色区分
- **Do** 保持侧边栏暗色 + 内容区亮色的经典布局，这是操作者熟悉的心智模型
- **Do** 表单标签加粗 (700)，用重量而非颜色建立字段层级
- **Do** 最大正文行宽控制在 75ch 以内，确保表格和描述文本的可读性
- **Do** 为 VXE Table 启用斑马纹和 hover 高亮，密集数据场景下这两者是效率刚需

### Don't:
- **Don't** 在页面中使用超过 10% 面积的 Brand Red。大红色块是营销页面做的事，不是工具后台该有的
- **Don't** 使用花哨的大色块、多余动画、营销口号式文案
- **Don't** 堆砌密集表格、灰色调泛滥、控件挨控件 — 避免传统 ERP 式的窒息感
- **Don't** 使用 `border-left` 或 `border-right` 超过 1px 的彩色强调条
- **Don't** 使用渐变文字 (`background-clip: text`)
- **Don't** 默认使用玻璃拟态 (glassmorphism)
- **Don't** 用统一尺寸的图标卡片网格铺满页面，每个区块的信息权重不同，视觉处理也应有差异
- **Don't** 模态弹窗套模态弹窗。先穷尽内联展开、抽屉、渐进披露等替代方案
