{ "schemaVersion": 2, "generatedAt": "2026-05-13T00:00:00.000Z", "title": "Design System: haha-admin-mp", "extensions": { "colorMeta": { "amber-primary": { "role": "primary", "displayName": "Amber Primary", "canonical": "oklch(78% 0.17 85)", "tonalRamp": [ "oklch(20% 0.04 85)", "oklch(35% 0.08 85)", "oklch(48% 0.12 85)", "oklch(60% 0.15 85)", "oklch(70% 0.17 85)", "oklch(78% 0.17 85)", "oklch(88% 0.12 85)", "oklch(95% 0.04 85)" ] }, "amber-bg": { "role": "primary-bg", "displayName": "Amber Background", "canonical": "oklch(97% 0.02 85)", "tonalRamp": [ "oklch(98% 0.01 85)", "oklch(97% 0.02 85)", "oklch(96% 0.025 85)", "oklch(95% 0.03 85)", "oklch(94% 0.035 85)", "oklch(92% 0.05 85)", "oklch(90% 0.07 85)", "oklch(85% 0.1 85)" ] }, "orange-accent": { "role": "secondary", "displayName": "Orange Accent", "canonical": "oklch(62% 0.2 50)", "tonalRamp": [ "oklch(18% 0.05 50)", "oklch(30% 0.08 50)", "oklch(42% 0.12 50)", "oklch(52% 0.16 50)", "oklch(62% 0.2 50)", "oklch(72% 0.18 50)", "oklch(84% 0.1 50)", "oklch(94% 0.03 50)" ] }, "green-success": { "role": "semantic", "displayName": "Green Success", "canonical": "oklch(62% 0.17 160)", "tonalRamp": [ "oklch(18% 0.05 160)", "oklch(32% 0.08 160)", "oklch(45% 0.12 160)", "oklch(55% 0.15 160)", "oklch(62% 0.17 160)", "oklch(72% 0.15 160)", "oklch(84% 0.08 160)", "oklch(94% 0.03 160)" ] }, "red-error": { "role": "semantic", "displayName": "Red Error", "canonical": "oklch(55% 0.21 25)", "tonalRamp": [ "oklch(18% 0.06 25)", "oklch(28% 0.1 25)", "oklch(40% 0.15 25)", "oklch(50% 0.18 25)", "oklch(55% 0.21 25)", "oklch(65% 0.18 25)", "oklch(78% 0.1 25)", "oklch(93% 0.03 25)" ] }, "amber-warning": { "role": "semantic", "displayName": "Amber Warning", "canonical": "oklch(68% 0.16 75)", "tonalRamp": [ "oklch(18% 0.04 75)", "oklch(30% 0.07 75)", "oklch(44% 0.1 75)", "oklch(56% 0.13 75)", "oklch(68% 0.16 75)", "oklch(78% 0.14 75)", "oklch(86% 0.08 75)", "oklch(95% 0.03 75)" ] }, "slate-text-primary": { "role": "neutral-text", "displayName": "Slate Text Primary", "canonical": "oklch(25% 0.01 260)", "tonalRamp": [ "oklch(15% 0.01 260)", "oklch(20% 0.01 260)", "oklch(25% 0.01 260)", "oklch(35% 0.01 260)", "oklch(45% 0.01 260)", "oklch(60% 0.01 260)", "oklch(80% 0.005 85)", "oklch(94% 0.005 85)" ] }, "ash-page-bg": { "role": "neutral-bg", "displayName": "Ash Page Background", "canonical": "oklch(97% 0.005 85)", "tonalRamp": [ "oklch(99% 0.002 85)", "oklch(97% 0.005 85)", "oklch(95% 0.006 85)", "oklch(92% 0.007 85)", "oklch(88% 0.008 85)", "oklch(82% 0.008 85)", "oklch(72% 0.007 85)", "oklch(58% 0.006 85)" ] }, "white-card-bg": { "role": "neutral-surface", "displayName": "White Card Background", "canonical": "oklch(100% 0.002 85)", "tonalRamp": [ "oklch(100% 0 0)", "oklch(100% 0.002 85)", "oklch(98% 0.003 85)", "oklch(96% 0.004 85)", "oklch(93% 0.005 85)", "oklch(87% 0.006 85)", "oklch(76% 0.007 85)", "oklch(62% 0.006 85)" ] }, "ash-border": { "role": "neutral-border", "displayName": "Ash Border", "canonical": "oklch(90% 0.005 260)", "tonalRamp": [ "oklch(96% 0.003 260)", "oklch(93% 0.004 260)", "oklch(90% 0.005 260)", "oklch(85% 0.005 260)", "oklch(78% 0.005 260)", "oklch(68% 0.004 260)", "oklch(52% 0.003 260)", "oklch(32% 0.002 260)" ] } }, "typographyMeta": { "display": { "displayName": "Display", "purpose": "订单金额、统计大数。仅在关键数据上出现。" }, "headline": { "displayName": "Headline", "purpose": "页面标题、卡片标题、弹窗标题。" }, "title": { "displayName": "Title", "purpose": "主要正文、列表项名称、标签。最广泛的字号。" }, "body": { "displayName": "Body", "purpose": "正文信息、表单输入、描述文字。28rpx + 1.6 line-height。" }, "label": { "displayName": "Label", "purpose": "标签、徽章、meta 文字。22rpx + 0.02em letter-spacing。" } }, "shadows": [ { "name": "card-rest", "value": "0 2rpx 12rpx rgba(0,0,0,0.05)", "purpose": "所有卡片和可交互表面在静止态的标准阴影。" }, { "name": "card-subtle", "value": "0 2rpx 8rpx rgba(0,0,0,0.04)", "purpose": "轻量阴影，用于列表卡片之间的细微区分。" }, { "name": "bottom-bar", "value": "0 -2rpx 12rpx rgba(0,0,0,0.05)", "purpose": "固定底部栏的方向性阴影，指向上方。" }, { "name": "primary-glow", "value": "0 6rpx 20rpx rgba(255,193,7,0.4)", "purpose": "唯一彩色阴影。仅用于扫码FAB，暖金散射强调首要地位。" } ], "motion": [ { "name": "ease-press", "value": "opacity 0.15s ease", "purpose": "所有按钮和可点击元素的 active 态反馈。通过 opacity 变化而非 layout property 动画。" }, { "name": "ease-pulse", "value": "1.2s ease-in-out infinite", "purpose": "加载 pulse dots 的序列动画。不适用 ease-out-quart 因其为循环动画。" }, { "name": "ease-spin", "value": "1s linear infinite", "purpose": "加载 spinner 的旋转动画。" } ], "breakpoints": [ { "name": "mobile", "value": "375px-414px", "purpose": "微信小程序标准视口宽度。" } ] }, "components": [ { "name": "Primary Button", "kind": "button", "refersTo": "button-primary", "description": "页面级主操作：保存、退款、确认。暖金填充胶囊。", "html": "保存", "css": ".ds-btn-primary { background: #FFC107; border-radius: 48rpx; padding: 28rpx 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; cursor: pointer; } .ds-btn-primary:active { opacity: 0.8; } .ds-btn-primary-text { font-size: 32rpx; font-weight: 600; color: #1e293b; }" }, { "name": "Secondary Action Button", "kind": "button", "refersTo": "button-secondary", "description": "卡片内次级操作：查看详情、筛选、复制。填充底色无边框。", "html": "查看详情", "css": ".ds-btn-secondary { background: #f1f5f9; border-radius: 8rpx; padding: 8rpx 24rpx; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; } .ds-btn-secondary:active { opacity: 0.7; } .ds-btn-secondary-text { font-size: 24rpx; color: #475569; font-weight: 500; }" }, { "name": "Surface Card", "kind": "card", "refersTo": "card-surface", "description": "信息容器。白色背景，微阴影，中等圆角。用于列表项和内容区。", "html": "标题内容文本行，展示关键信息。", "css": ".ds-card { background: #ffffff; border-radius: 16rpx; padding: 24rpx 32rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); margin-bottom: 16rpx; } .ds-card:active { opacity: 0.7; } .ds-card-heading { display: block; font-size: 30rpx; font-weight: 600; color: #1e293b; margin-bottom: 8rpx; } .ds-card-body { display: block; font-size: 28rpx; color: #475569; line-height: 1.6; }" }, { "name": "Status Tag - Success", "kind": "chip", "refersTo": "status-tag-success", "description": "成功/正常/完成状态标签。绿底绿字。", "html": "已完成", "css": ".ds-tag { padding: 4rpx 16rpx; border-radius: 8rpx; font-size: 22rpx; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .ds-tag-success { background: #ecfdf5; color: #10b981; }" }, { "name": "Status Tag - Warning", "kind": "chip", "refersTo": "status-tag-warning", "description": "待处理/未支付状态标签。琥珀底琥珀字。", "html": "待支付", "css": ".ds-tag { padding: 4rpx 16rpx; border-radius: 8rpx; font-size: 22rpx; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .ds-tag-warning { background: #fffbeb; color: #f59e0b; }" }, { "name": "Status Tag - Error", "kind": "chip", "refersTo": "status-tag-error", "description": "失败/退款/故障状态标签。红底红字。", "html": "已退款", "css": ".ds-tag { padding: 4rpx 16rpx; border-radius: 8rpx; font-size: 22rpx; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .ds-tag-error { background: #fef2f2; color: #ef4444; }" }, { "name": "Navigation Bar", "kind": "nav", "refersTo": null, "description": "固定顶部导航栏。居中标题，左侧返回箭头，支持安全区域。", "html": "页面标题", "css": ".ds-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #ffffff; padding-top: env(safe-area-inset-top); } .ds-navback { width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; } .ds-navback:active { background: rgba(0,0,0,0.05); } .ds-navback-arrow { width: 20rpx; height: 20rpx; border-left: 4rpx solid #1e293b; border-bottom: 4rpx solid #1e293b; transform: rotate(45deg); margin-left: 8rpx; } .ds-navtitle { font-size: 34rpx; font-weight: 600; color: #1e293b; }" }, { "name": "Tab Bar", "kind": "nav", "refersTo": null, "description": "固定底部标签栏。4 个标准 Tab 围绕中央扫码 FAB。激活态变暖金。", "html": "工作台订单扫码设备我的", "css": ".ds-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 120rpx; background: #ffffff; display: flex; align-items: center; justify-content: space-around; border-top: 1rpx solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom); z-index: 999; box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.05); } .ds-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; } .ds-tab-label { font-size: 20rpx; color: #1e293b; } .ds-tab-active .ds-tab-label { color: #FFC107; font-weight: 600; } .ds-tabbar-fab { position: relative; width: 120rpx; height: 120rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ds-fab-circle { width: 80rpx; height: 80rpx; background: linear-gradient(135deg, #FFC107, #FFA000); border-radius: 50%; box-shadow: 0 6rpx 20rpx rgba(255,193,7,0.4); transition: transform 0.2s; } .ds-fab-circle:active { transform: scale(0.92); } .ds-fab-label { font-size: 18rpx; color: #1e293b; font-weight: 500; }" }, { "name": "Text Input Field", "kind": "input", "refersTo": null, "description": "标准输入框。灰底，圆角，暖金 focus 边框。", "html": "", "css": ".ds-input { background: #f1f5f9; border: 1rpx solid #e2e8f0; border-radius: 12rpx; padding: 24rpx 28rpx; font-size: 28rpx; color: #1e293b; height: 80rpx; width: 100%; box-sizing: border-box; transition: border-color 0.15s; } .ds-input:focus { border-color: #FFC107; } .ds-input::placeholder { color: #cbd5e1; font-size: 24rpx; }" }, { "name": "Loading Pulse Dots", "kind": "custom", "refersTo": null, "description": "页面级加载指示器。三个序列脉冲圆点。", "html": "", "css": ".ds-loading { display: flex; justify-content: center; gap: 8rpx; padding: 60rpx 0; } .ds-pulse-dot { width: 9rpx; height: 9rpx; background: #cbd5e1; border-radius: 50%; animation: ds-pulse 1.2s ease-in-out infinite; } .ds-pulse-dot:nth-child(2) { animation-delay: 0.2s; } .ds-pulse-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes ds-pulse { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }" } ], "narrative": { "northStar": "The Warm Workshop", "overview": "haha-admin-mp 是 AI 智能零售柜系统的运营管理端。品牌语言与 haha-mp 消费者端一脉相承——琥珀暖金作为身份色，大面积留白托底，轻阴影赋予卡片可触感。设计不追求传统后台的功能堆砌，而是在移动端上呈现清晰、温暖、高效的信息结构。暖金不是装饰色，是信号色。它在关键操作（主按钮、激活态、扫码入口）上集中出现，其余区域用冷灰中性色后退，让操作者凭色彩就能感知界面优先级。", "keyCharacteristics": [ "暖金信号：琥珀色承载关键操作和选中态，其余区域用冷灰后退", "轻提感：卡片统一使用 2rpx 模糊 12rpx 偏移的微阴影，暗示可点击性", "移动优先文字：最小字号不低於 22rpx，触控区域不小于 44x44pt", "8rpx 基准间距：所有间距为该基准的整数倍，拒绝随意值", "与 haha-mp 共享色彩基因" ], "rules": [ { "name": "The Golden Signal Rule", "body": "暖金仅在交互关键点出现：主按钮、选中态、激活 Tab。其稀缺性制造信号效应。切勿将暖金用于大面积装饰或非交互内容。", "section": "colors" }, { "name": "The Tinted Neutral Rule", "body": "所有中性色向暖金方向偏移 0.005-0.01 chroma。纯黑 #000000 和纯白 #ffffff 被禁用。视频背景使用 --bg-secondary 而非 #000。", "section": "colors" }, { "name": "The Financial Data Rule", "body": "金额、统计数字永远使用 slate-text-primary，不使用红色或绿色。颜色仅携带语义状态（成功/失败），不携带价值判断。", "section": "colors" }, { "name": "The 28rpx Anchor Rule", "body": "正文基线和主要控件字号均锚定在 28rpx。向上取 30/32/36rpx 做标题，向下取 22/24rpx 做辅助。绝不使用 26rpx——它作为无意义的中间值被禁用。", "section": "typography" }, { "name": "The One Font Rule", "body": "整个系统使用单一字体栈。层次差异通过字号和 weight 表达，不通过字体切换表达。", "section": "typography" }, { "name": "The Shadows-As-State Rule", "body": "阴影在静止态统一微弱，在交互态通过 opacity 而非 elevation 变化反馈。不做悬浮升起动画。FAB 的暖金 glow shadow 是唯一的例外。", "section": "elevation" } ], "dos": [ "使用 8rpx 基准间距。所有 padding/margin/gap 必须是 8 的整数倍。", "使用 $spacing-N / $radius-* / $font-size-* SCSS token，不硬编码数值。", "为每个异步数据加载提供 loading 状态（pulse dots 或 spinner）。", "将暖金仅用于交互关键点。其力量来自克制。", "所有可点击卡片的 active 态使用 opacity: 0.7。", "页面使用 height: 100vh + flex column 布局，scroll-view 用 flex: 1; height: 0 填充剩余空间。", "固定底部元素使用 env(safe-area-inset-bottom) 留出安全区域。", "状态指示同时使用颜色 + 文字，不单纯依赖颜色（WCAG AA 兼容）。", "字体栈在所有页面 style 中统一声明为一行的 $font-stack 变量。" ], "donts": [ "使用 #000000 或 #ffffff。中性色向暖金方向偏移 0.005-0.01 chroma。", "对财务数字使用红色或绿色。金额统计永远用 #1e293b。", "使用 border-left 或 border-right 大于 1px 做彩色侧边条纹装饰。", "使用渐变文字 (background-clip: text)。", "使用 26rpx 字号。字号体系中没有这个中间值。", "在页面中使用原生