car-wash-java/admin-web-new/.impeccable/design.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-05-14T09:14:00Z",
  "title": "Design System: 自助洗车运营管理系统",
  "extensions": {
    "colorMeta": {
      "brand-red": {
        "role": "primary",
        "displayName": "Brand Red",
        "canonical": "oklch(52% 0.16 25)",
        "tonalRamp": [
          "oklch(15% 0.04 25)",
          "oklch(25% 0.08 25)",
          "oklch(35% 0.12 25)",
          "oklch(45% 0.16 25)",
          "oklch(52% 0.16 25)",
          "oklch(65% 0.12 25)",
          "oklch(78% 0.08 25)",
          "oklch(92% 0.03 25)"
        ]
      },
      "surface-white": {
        "role": "neutral",
        "displayName": "Surface White",
        "canonical": "oklch(99% 0.002 25)",
        "tonalRamp": [
          "oklch(96% 0.001 25)",
          "oklch(97% 0.001 25)",
          "oklch(98% 0.002 25)",
          "oklch(99% 0.002 25)",
          "oklch(99.5% 0.001 25)",
          "oklch(99% 0.003 25)",
          "oklch(98% 0.004 25)",
          "oklch(97% 0.005 25)"
        ]
      },
      "content-bg": {
        "role": "neutral",
        "displayName": "Content Background",
        "canonical": "oklch(95% 0.005 255)",
        "tonalRamp": [
          "oklch(90% 0.003 255)",
          "oklch(92% 0.004 255)",
          "oklch(94% 0.005 255)",
          "oklch(95% 0.005 255)",
          "oklch(96% 0.004 255)",
          "oklch(97% 0.003 255)",
          "oklch(98% 0.002 255)",
          "oklch(99% 0.001 255)"
        ]
      },
      "text-primary": {
        "role": "neutral",
        "displayName": "Text Primary",
        "canonical": "oklch(27% 0.005 255)"
      },
      "text-regular": {
        "role": "neutral",
        "displayName": "Text Regular",
        "canonical": "oklch(45% 0.005 255)"
      },
      "text-secondary": {
        "role": "neutral",
        "displayName": "Text Secondary",
        "canonical": "oklch(62% 0.005 255)"
      },
      "sidebar-bg": {
        "role": "neutral",
        "displayName": "Sidebar Background",
        "canonical": "oklch(14% 0.03 255)"
      }
    },
    "typographyMeta": {
      "headline": {
        "displayName": "Headline",
        "purpose": "Page-level headings. At most one per page."
      },
      "title": {
        "displayName": "Title",
        "purpose": "Section headers, card titles, dialog titles."
      },
      "body": {
        "displayName": "Body",
        "purpose": "Body text, table content, descriptions. Max 75ch line width."
      },
      "label": {
        "displayName": "Label",
        "purpose": "Form labels and field names. Weight carries hierarchy, not color."
      },
      "caption": {
        "displayName": "Caption",
        "purpose": "Helper text, timestamps, secondary metadata."
      }
    },
    "shadows": [
      {
        "name": "message-float",
        "value": "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)",
        "purpose": "Message toasts and notification popups."
      },
      {
        "name": "dialog-footer",
        "value": "0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%)",
        "purpose": "Bottom divider shadow for dialogs and search overlays."
      },
      {
        "name": "table-fixed-column",
        "value": "8px 0 10px -5px rgba(0,0,0,0.06)",
        "purpose": "Horizontal scroll hint for fixed table columns."
      }
    ],
    "motion": [
      {
        "name": "ease-standard",
        "value": "cubic-bezier(0.4, 0, 0.2, 1)",
        "purpose": "Default transition for hover states and UI element changes."
      },
      {
        "name": "sidebar-transition",
        "value": "var(--pure-transition-duration, 0.3s)",
        "purpose": "Sidebar expand/collapse and layout width transitions."
      }
    ],
    "breakpoints": [
      { "name": "mobile", "value": "760px" },
      { "name": "collapsed-sidebar", "value": "990px" }
    ]
  },
  "components": [
    {
      "name": "Primary Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "Main action button: confirm, submit, create. Brand red with white text.",
      "html": "<button class=\"ds-btn-primary\">确认提交</button>",
      "css": ".ds-btn-primary { background: #C83A35; color: #fff; border: none; border-radius: 4px; padding: 8px 15px; font-size: 14px; font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif; cursor: pointer; transition: background-color 0.2s ease; } .ds-btn-primary:hover { background: oklch(45% 0.16 25); } .ds-btn-primary:focus-visible { outline: 2px solid #C83A35; outline-offset: 2px; } .ds-btn-primary:active { background: oklch(38% 0.15 25); }"
    },
    {
      "name": "Secondary Button",
      "kind": "button",
      "refersTo": "button-default",
      "description": "Secondary actions: cancel, back, batch operations.",
      "html": "<button class=\"ds-btn-secondary\">取消</button>",
      "css": ".ds-btn-secondary { background: #FEFEFE; color: #303133; border: 1px solid rgb(5 5 5 / 6%); border-radius: 4px; padding: 8px 15px; font-size: 14px; font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif; cursor: pointer; transition: background-color 0.2s ease; } .ds-btn-secondary:hover { background: #f5f5f5; }"
    },
    {
      "name": "Text Link Button",
      "kind": "button",
      "refersTo": "button-text",
      "description": "Inline table row actions: edit, view, delete.",
      "html": "<button class=\"ds-btn-text\">编辑</button>",
      "css": ".ds-btn-text { background: transparent; color: #C83A35; border: none; padding: 0; font-size: 14px; cursor: pointer; transition: opacity 0.2s ease; } .ds-btn-text:hover { opacity: 0.8; }"
    },
    {
      "name": "Active Menu Item",
      "kind": "nav",
      "refersTo": "menu-item-active",
      "description": "Currently active sidebar menu item with brand red background pill.",
      "html": "<div class=\"ds-menu-item-active\"><span class=\"ds-menu-icon\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"9\"/><line x1=\"9\" y1=\"13\" x2=\"15\" y2=\"13\"/><line x1=\"9\" y1=\"17\" x2=\"12\" y2=\"17\"/></svg></span><span>订单管理</span></div>",
      "css": ".ds-menu-item-active { position: relative; display: flex; align-items: center; height: 50px; padding: 0 20px; color: #fff; font-size: 14px; font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif; cursor: pointer; z-index: 1; } .ds-menu-item-active::before { position: absolute; inset: 0 8px; margin: 4px 0; content: \"\"; background: #C83A35; border-radius: 3px; z-index: -1; } .ds-menu-icon { display: flex; align-items: center; margin-right: 5px; width: 18px; height: 18px; }"
    },
    {
      "name": "Content Card",
      "kind": "card",
      "refersTo": "card",
      "description": "Standard page content container with subtle hover shadow feedback.",
      "html": "<div class=\"ds-card\"><div class=\"ds-card-body\">卡片内容</div></div>",
      "css": ".ds-card { background: #FEFEFE; border-radius: 4px; border: 1px solid rgb(5 5 5 / 6%); overflow: hidden; transition: box-shadow 0.2s ease; } .ds-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .ds-card-body { padding: 20px; font-size: 14px; color: #303133; font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif; }"
    },
    {
      "name": "Text Input",
      "kind": "input",
      "refersTo": "input",
      "description": "Standard form input with brand red focus ring.",
      "html": "<div class=\"ds-form-item\"><label class=\"ds-label\">字段名</label><input class=\"ds-input\" type=\"text\" placeholder=\"请输入\" /></div>",
      "css": ".ds-form-item { display: flex; flex-direction: column; gap: 8px; } .ds-label { font-size: 14px; font-weight: 700; color: #606266; font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif; } .ds-input { background: #FEFEFE; border: 1px solid rgb(5 5 5 / 6%); border-radius: 4px; padding: 8px 12px; font-size: 14px; color: #303133; font-family: \"Helvetica Neue\", Helvetica, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif; outline: none; transition: border-color 0.2s ease; } .ds-input:focus { border-color: #C83A35; } .ds-input::placeholder { color: #909399; }"
    }
  ],
  "narrative": {
    "northStar": "清晨车间",
    "overview": "走进清晨的洗车车间：地面刚冲过，工具归位整齐，阳光从高窗斜射进来，空气里有微微的温热。这不是无菌实验室般的冰冷秩序，而是一个被用心打理过的、有体温的工作空间。系统继承了 vue-pure-admin 的布局骨架和 Element Plus 的组件体系，但配色从默认蓝转向品牌红，在专业工具感中注入洗车行业的识别度。设计追求的是「用得顺手」而非「看了惊艳」。像一个熟悉的老工具——不需要说明书，手感刚好，放在那里就知道该怎么用。",
    "keyCharacteristics": [
      "功能先行的信息架构，核心操作路径不超过两级菜单",
      "红色作为策略性点缀 (≤10% 页面面积)，它的力量来自稀缺而非铺张",
      "暗色侧边栏 + 亮色内容区的经典双区布局，不跟风全暗模式",
      "留白和间距有节奏变化，不追求「每处等距」的机械整齐",
      "每个交互都有确定的反馈，错误提示说人话，空状态给引导"
    ],
    "rules": [
      {
        "name": "The 10% Rule",
        "body": "Brand Red 在任何页面上的总面积不超过 10%。按钮、选中态、关键图标——它的力量来自稀缺，而不是铺张。",
        "section": "colors"
      },
      {
        "name": "The Tinted Neutral Rule",
        "body": "不在中性色中使用纯黑 (#000) 或纯白 (#fff)。Surface White 向暖色微偏，背景灰向蓝微偏，维持「清晨车间」的微暖而不冰冷。",
        "section": "colors"
      },
      {
        "name": "The Warm Restraint Rule",
        "body": "不使用冷调灰色作为大面积底色。Content Background (#F0F2F5) 已经带有微弱的蓝灰偏暖，足以提供对比而不产生距离感。如果某个区域让人觉得「冷」，先检查中性色是否偏向了纯灰。",
        "section": "colors"
      },
      {
        "name": "The Weight-Only Hierarchy Rule",
        "body": "文本层级通过字号和字重区分，不依赖颜色变化。同字号下，Regular vs Bold 的信息差足够大。",
        "section": "typography"
      },
      {
        "name": "The Flat-By-Default Rule",
        "body": "卡片、表格、表单默认无阴影。阴影只在需要传达「此层浮于彼层之上」时出现。",
        "section": "elevation"
      }
    ],
    "dos": [
      "Do 用 Brand Red 做页面唯一强调色，按钮、选中态、关键状态指示",
      "Do 让信息层级通过字号和字重表达，不依赖多种颜色区分",
      "Do 保持侧边栏暗色 + 内容区亮色的经典布局，这是操作者熟悉的心智模型",
      "Do 表单标签加粗 (700)，用重量而非颜色建立字段层级",
      "Do 最大正文行宽控制在 75ch 以内，确保表格和描述文本的可读性",
      "Do 为 VXE Table 启用斑马纹和 hover 高亮，密集数据场景下这两者是效率刚需",
      "Do 每个交互都给确定的视觉反馈——按钮的 hover 变色、行的悬停高亮、加载态的状态指示",
      "Do 空状态和错误提示用友好的人话，给操作者下一步指引而非仅报错"
    ],
    "donts": [
      "Don't 在页面中使用超过 10% 面积的 Brand Red",
      "Don't 使用花哨的大色块、多余动画、营销口号式文案",
      "Don't 堆砌密集表格、灰色调泛滥、控件挨控件——避免传统 ERP 式的窒息感",
      "Don't 追求「专业感」而牺牲温度——无性格的冷灰、机械的等距排列、缺乏反馈的沉默交互",
      "Don't 使用 border-left 或 border-right 超过 1px 的彩色强调条",
      "Don't 使用渐变文字 (background-clip: text)",
      "Don't 默认使用玻璃拟态 (glassmorphism)",
      "Don't 用统一尺寸的图标卡片网格铺满页面",
      "Don't 模态弹窗套模态弹窗"
    ]
  }
}