Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
evolve
/
car-wash-java
2
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Drzewo: fc913e2226
Gałęzie Tagi
car-wash-java
/
admin-web-new
/
DESIGN.md

DESIGN.md 11 KB
Historia Czysty

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: headline:

fontFamily: '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
fontSize: "20px"
fontWeight: 600
lineHeight: 1.4

title:

fontFamily: '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
fontSize: "16px"
fontWeight: 600
lineHeight: 1.4

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
lineHeight: 1.5

caption:

fontFamily: '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
fontSize: "12px"
fontWeight: 400
lineHeight: 1.4

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 向暖色微偏，背景灰向蓝微偏，维持「清晨车间」的微暖而不冰冷。

The Warm Restraint Rule. 不使用冷调灰色作为大面积底色。Content Background (#F0F2F5) 已经带有微弱的蓝灰偏暖，足以提供对比而不产生距离感。如果某个区域让人觉得「冷」，先检查中性色是否偏向了纯灰。

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)，transition 0.2s ease。不上移、不放大——按钮不是装饰品，保持稳定给人信心。
  • Default/Secondary: 白色背景 + 灰色边框。用于取消、返回、批量操作中的次要动作。
  • Text: 无边框无背景，Brand Red 文字色，用于表格行内操作（编辑、查看、删除）。

Sidebar Menu

  • Style: 暗色底 + 亮色文字。默认 "default" 主题 (sidebar: #001529)。
  • Menu Item: 50px 高，文字 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 高亮，密集数据场景下这两者是效率刚需
  • Do 每个交互都给确定的视觉反馈——按钮的 hover 变色、行的悬停高亮、加载态的状态指示
  • Do 空状态和错误提示用友好的人话，给操作者下一步指引而非仅报错

Don't:

  • 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 模态弹窗套模态弹窗。先穷尽内联展开、抽屉、渐进披露等替代方案