--- 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** 在页面中使用原生 `