Home Verkennen Help
Registreren Inloggen
kym
/
haha
2
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Boom: 02fd12659e
Aftakkingen Labels
haha
/
haha-admin-mp
/
DESIGN.md

DESIGN.md 13 KB
Geschiedenis Ruwe

name: haha-admin-mp description: AI 智能零售柜运营管理端，与 haha-mp 消费者端共享暖金黄品牌语言 colors: amber-primary: "#FFC107" amber-light: "#FFE082" amber-dark: "#FFA000" amber-bg: "#FFF8E1" orange-accent: "#f97316" orange-accent-bg: "#fff7ed" sky-info: "#0ea5e9" sky-info-bg: "#f0f9ff" green-success: "#10b981" green-success-bg: "#ecfdf5" amber-warning: "#f59e0b" amber-warning-bg: "#fffbeb" red-error: "#ef4444" red-error-bg: "#fef2f2" slate-text-primary: "#1e293b" slate-text-secondary: "#475569" slate-text-tertiary: "#64748b" slate-text-muted: "#94a3b8" slate-text-placeholder: "#cbd5e1" ash-page-bg: "#f8fafc" white-card-bg: "#ffffff" ash-secondary-bg: "#f1f5f9" ash-border: "#e2e8f0" ash-border-light: "#f1f5f9" typography: body:

fontFamily: "-apple-system, BlinkMacSystemFont, PingFang SC, Helvetica Neue, system-ui, sans-serif"
fontSize: "28rpx"
fontWeight: 400
lineHeight: 1.6

title:

fontWeight: 600
fontSize: "28rpx"

headline:

fontWeight: 600
fontSize: "30rpx"

display:

fontWeight: 700
fontSize: "32rpx"

label:

fontWeight: 500
fontSize: "22rpx"
letterSpacing: "0.02em"

rounded: xs: "4rpx" sm: "8rpx" base: "12rpx" md: "16rpx" lg: "20rpx" xl: "24rpx" full: "9999rpx" spacing: "1": "8rpx" "2": "16rpx" "3": "24rpx" "4": "32rpx" "5": "40rpx" "6": "48rpx" "7": "56rpx" "8": "64rpx" components: button-primary:

backgroundColor: "{colors.amber-primary}"
textColor: "{colors.slate-text-primary}"
rounded: "{rounded.xl}"
padding: "28rpx 48rpx"

button-primary-hover:

backgroundColor: "{colors.amber-dark}"

button-secondary:

backgroundColor: "{colors.ash-secondary-bg}"
textColor: "{colors.slate-text-primary}"
rounded: "{rounded.base}"

card-surface:

backgroundColor: "{colors.white-card-bg}"
rounded: "{rounded.md}"

status-tag-success:

backgroundColor: "{colors.green-success-bg}"
textColor: "{colors.green-success}"
rounded: "{rounded.sm}"
padding: "8rpx 16rpx"

status-tag-warning:

backgroundColor: "{colors.amber-warning-bg}"
textColor: "{colors.amber-warning}"
rounded: "{rounded.sm}"
padding: "8rpx 16rpx"

status-tag-error:

backgroundColor: "{colors.red-error-bg}"
textColor: "{colors.red-error}"
rounded: "{rounded.sm}"
padding: "8rpx 16rpx"

Design System: haha-admin-mp

1. Overview

Creative North Star: "The Warm Workshop"

haha-admin-mp 是 AI 智能零售柜系统的运营管理端。品牌语言与 haha-mp 消费者端一脉相承——琥珀暖金作为身份色，大面积留白托底，轻阴影赋予卡片可触感。设计不追求传统后台的功能堆砌，而是在移动端上呈现清晰、温暖、高效的信息结构。

暖金不是装饰色，是信号色。它在关键操作（主按钮、激活态、扫码入口）上集中出现，其余区域用冷灰中性色后退，让操作者凭色彩就能感知界面优先级。物理场景锚定：运营人员在自然光或室内照明下使用手机，需要快速扫读——对比度、间距和字体层级比装饰更重要。

PRODUCT.md 的反参考体系直接生效：纯黑纯白被禁用，所有中性色向暖金方向偏移 0.01 chroma；无传统 ERP 的密集表格和多级菜单；无 ThemeForest 式的过度阴影和杂色装饰。

Key Characteristics:

  • 暖金信号：琥珀色承载关键操作和选中态，其余区域用冷灰后退
  • 轻提感：卡片统一使用 2rpx 模糊 12rpx 偏移的微阴影，暗示可点击性
  • 移动优先文字：最小字号不低於 22rpx，触控区域不小于 44x44pt
  • 8rpx 基准间距：所有间距为该基准的整数倍，拒绝随意值
  • 与 haha-mp 共享色彩基因：相同的暖金主色、相同的中性色标尺、相同的圆角体系

2. Colors

暖金与冷灰的双轨系统。琥珀色系承担品牌身份和功能信号，石板灰色系承担文字层级和背景区分。功能色（绿/红/橙/蓝）各司其职，不混用。

Primary

  • Amber Primary (#FFC107): 主按钮背景、选中态文字、激活的 Tab 下划线、扫码 FAB 背景。作为品牌身份色，出现在约 30% 的交互表面。
  • Amber Light (#FFE082): 次级暖黄点缀。极少独立使用，主要用于渐变过渡。
  • Amber Dark (#FFA000): 按钮 hover/active 态、强调文字。Primary 的加重版本。
  • Amber Background (#FFF8E1): 头像背景、选中态标记背景、status tag 的暖调底。

Secondary

  • Orange Accent (#f97316): 数据高亮（设备数量、任务次数等元数据值）。用量控制在 5% 以内。
  • Orange Accent Background (#fff7ed): Accent 的衬底，用于 subtle 的高亮区域。

Semantic

  • Green Success (#10b981): 已完成/正常/在线状态。仅用于状态指示，不作为主按钮色。
  • Red Error (#ef4444): 退款标签、故障状态、删除按钮文字。不用于大面积的统计数字（避免财务数据误读为负值）。
  • Amber Warning (#f59e0b): 待支付/未完成状态。与 Primary 同色系但偏红，形成功能区分。
  • Sky Info (#0ea5e9): 中性信息提示。极少使用。

Neutral

  • Slate Text Primary (#1e293b): 主文字。用于标题、金额、关键信息。
  • Slate Text Secondary (#475569): 次要文字。用于标签、辅助说明。
  • Slate Text Muted (#94a3b8): 弱化文字。用于 meta 信息、时间戳、占位符。
  • Slate Text Placeholder (#cbd5e1): 输入框占位文字、禁用态文字。
  • Ash Page Background (#f8fafc): 全局页面背景。不与卡片混用。
  • White Card Background (#ffffff): 所有卡片、列表项、导航栏、底部栏的表面色。
  • Ash Secondary Background (#f1f5f9): 输入框填充、空状态图标背景、加载占位。

Named Rules

The Golden Signal Rule. 暖金仅在交互关键点出现：主按钮、选中态、激活 Tab。其稀缺性制造信号效应。切勿将暖金用于大面积装饰或非交互内容。

The Tinted Neutral Rule. 所有中性色向暖金方向偏移 0.005-0.01 chroma。纯黑 #000000 和纯白 #ffffff 被禁用。视频背景使用 --bg-secondary 而非 #000。

The Financial Data Rule. 金额、统计数字永远使用 slate-text-primary，不使用红色或绿色。颜色仅携带语义状态（成功/失败），不携带价值判断。

3. Typography

Body Font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif

系统字体栈，利用各平台的优化渲染。中文优先使用苹方，西文和数字使用 SF Pro / Segoe UI。不引入外部 Web Font，避免小程序加载开销。

Character: 工具感中性无衬线。字号层次通过 weight 和 size 的 ≥1.25 比例拉开，避免扁平淡薄。

Hierarchy

  • Display (700, 32rpx, 1.3): 订单金额、统计大数。仅在关键数据上出现。
  • Headline (600, 30rpx, 1.4): 页面标题、卡片标题、弹窗标题。
  • Title (600, 28rpx, 1.5): 主要正文、列表项名称、标签。使用最广泛的字号。
  • Body (400, 28rpx, 1.6): 正文信息、表单输入、描述文字。行高 1.6 确保中文可读性。
  • Label (500, 22rpx, 0.02em letter-spacing, 1.4): 标签、徽章、meta 文字。全小写或全大写均可，保持一致性。

Named Rules

The 28rpx Anchor Rule. 正文基线和主要控件字号均锚定在 28rpx。向上取 30/32/36rpx 做标题，向下取 22/24rpx 做辅助。绝不使用 26rpx——它作为无意义的中间值被禁用。

The One Font Rule. 整个系统使用单一字体栈。层次差异通过字号和 weight 表达，不通过字体切换表达。

4. Elevation

Subtle lift 策略。所有可交互的卡片和表面在静止态带有统一的微阴影 0 2rpx 12rpx rgba(0,0,0,0.05)，暗示可点击性和信息块边界。阴影的角色是结构的而非装饰的——区分表面层次，而非制造浮动效果。

固定元素（底部操作栏、TabBar）使用方向性阴影指向上方 0 -2rpx 12rpx rgba(0,0,0,0.05)。

Shadow Vocabulary

  • Card Rest (box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05)): 所有卡片、列表卡片在静止态。最常用的层级。
  • Card Hover/Press (box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04)): 原阴影去除了 elevation，active 态通过 opacity: 0.7 补充反馈。
  • Bottom Bar (box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.05)): 固定在底部的操作栏。
  • Primary Glow (box-shadow: 0 6rpx 20rpx rgba(255,193,7,0.4)): 仅用于扫码 FAB 按钮。唯一的彩色阴影——暖金散射，强调该按钮的首要地位。
  • Page Background: #f8fafc 无阴影。通过色值与白色卡片自然区分。

Named Rules

The Shadows-As-State Rule. 阴影在静止态统一微弱，在交互态通过 opacity 而非 elevation 变化反馈。不做悬浮升起动画。FAB 的暖金 glow shadow 是唯一的例外，其存在理由是该按钮是整个 TabBar 的视觉锚点。

5. Components

Buttons

  • Shape: 全圆角胶囊形（24rpx-48rpx 半径），无直角。
  • Primary: 琥珀填充 #FFC107，文字 #1e293b 60% weight，padding 28rpx 48rpx。Active 态 opacity 降至 0.8。用于页面级主操作（保存、退款、确认）。
  • Secondary/Ghost: #f1f5f9 填充，无边框，padding 8-16rpx。用于卡片内的次级操作（查看详情、筛选、复制）。
  • Call-to-Action Fab: 80rpx 圆形，暖黄渐变背景，带 0 6rpx 20rpx rgba(255,193,7,0.4) 暖金辉光阴影。Tap 时缩至 0.92x。
  • Danger: 无独立样式。删除类操作使用红色文字 #ef4444，置于页面底部，与主按钮间用间距分隔。

Cards / Containers

  • Corner Style: 16rpx-20rpx 圆角（页面级卡片 20rpx，列表卡片 16rpx）
  • Background: 白色 #ffffff
  • Shadow: 0 2rpx 12rpx rgba(0,0,0,0.05)
  • Border: 无。通过阴影和色差区分边界
  • Internal Padding: 24rpx-32rpx
  • Active: opacity: 0.7（可点击卡片）

Status Tags

  • Shape: 8rpx 圆角，inline-flex 容器
  • Size: padding 4-8rpx 16rpx，字号 22-24rpx，weight 500
  • Variants: 使用语义色背景 + 语义色文字组合。Success（绿底绿字）、Warning（橙底橙字）、Danger（红底红字）、Info（蓝底蓝字）

Inputs / Fields

  • Style: #f1f5f9 填充背景，1rpx solid #e2e8f0 边框，12rpx 圆角
  • Internal Padding: 24rpx 28rpx，高度 80rpx
  • Placeholder: 字号 24rpx，颜色 #cbd5e1
  • Focus: 边框色变为 #FFC107

Navigation

  • NavBar: 固定在顶部，白色背景。标题在中间 (34rpx, 600 weight)。返回按钮为 CSS 旋转正方形的左箭头 (64rpx 圆形 tap target)。支持安全区域延伸。
  • CustomTabBar: 固定在底部，白色背景，120rpx 高度。4 个标准 Tab（线框 CSS 图标 + 20rpx 文字）围绕中央扫码 FAB（80rpx 暖金渐变圆形，唯一带彩阴影的元素）。激活 Tab 的图标和文字变为暖金色。

Loading States

  • Pulse Dots: 三个 9rpx 圆点，#cbd5e1 色，1.2s ease-in-out 序列脉冲动画 (0s / 0.2s / 0.4s 延迟)。用于页面级加载和骨架屏。
  • Spinner: 32rpx 圆环，#e2e8f0 底色 + #FFC107 顶色，1s 线性旋转。用于列表加载更多和按钮异步反馈。

Empty States

  • 居中排列：120rpx 图标容器（#f1f5f9 背景，24rpx 圆角）+ 28rpx 标题 #475569 + 24rpx 描述 #94a3b8
  • 无纯文字空态。每个空态都有视觉元素 + 引导文案。

6. Do's and Don'ts

Do:

  • Do 使用 8rpx 基准间距。所有 padding/margin/gap 必须是 8 的整数倍。
  • Do 使用 $spacing-N / $radius-* / $font-size-* SCSS token，不硬编码数值。
  • Do 为每个异步数据加载提供 loading 状态（pulse dots 或 spinner）。
  • Do 将暖金仅用于交互关键点。其力量来自克制。
  • Do 所有可点击卡片的 active 态使用 opacity: 0.7。
  • Do 页面使用 height: 100vh + flex column 布局，scroll-view 用 flex: 1; height: 0 填充剩余空间。
  • Do 固定底部元素使用 env(safe-area-inset-bottom) 留出安全区域。
  • Do 状态指示同时使用颜色 + 文字，不单纯依赖颜色（WCAG AA 兼容）。
  • Do 字体栈在所有页面 style 中统一声明为一行的 $font-stack 变量。

Don't:

  • Don't 使用 #000000 或 #ffffff。中性色向暖金方向偏移 0.005-0.01 chroma。
  • Don't 对财务数字使用红色或绿色。金额统计永远用 #1e293b。
  • Don't 使用 border-left 或 border-right 大于 1px 做彩色侧边条纹装饰。
  • Don't 使用渐变文字 (background-clip: text)。
  • Don't 使用 26rpx 字号。字号体系中没有这个中间值。
  • Don't 在页面中使用原生 <button> 组件 + &::after { border: none } hack。用 <view> 构建按钮。
  • Don't 显示不完整功能。"开发中"、"功能开发中" 的 UI 要么隐藏，要么用 v-if 按数据可用性控制。
  • Don't 硬编码背景色为 #000（如视频区）。使用 $bg-color-secondary。
  • Don't 使用 min-height: 100vh 做页面布局。用 height: 100vh + flex column + flex:1 scroll-view。
  • Don't 泄露传统 ERP 后台的痕迹：无密集表格、无多级菜单、无蓝白配色、无功能入口堆砌。