---
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 后台的痕迹：无密集表格、无多级菜单、无蓝白配色、无功能入口堆砌。
