rtc_prd/airhub_app/assets/www/design_system.md

Airhub 设计规范 (视觉标准) 🎨

Important

本文档严格区分 App 全局规范 与 产品专属规范。 开发人员 必须 在应用样式前确认当前页面所属的上下文。

---

1. App 全局规范 (科技主题) 🌐

适用范围: index.html (首页), bluetooth.html (蓝牙搜索), wifi-config.html (配网) 核心风格: 未来感、洁净、科技、蓝紫色调。

首要行动点 (Global Primary Action)

用途：主连接按钮、配网流程的“下一步”。

• 渐变色: linear-gradient(90deg, #22D3EE 0%, #3B82F6 35%, #6366F1 65%, #8B5CF6 100%) (青 -> 蓝 -> 靛 -> 紫)
• 阴影: box-shadow: 0 0 15px rgba(34, 211, 238, 0.35)

导航与头部

• 背景: 透明或深度磨砂玻璃 (Glassmorphism)。
• 图标: 细描边风格，冷灰色 #6B7280。

---

2. 产品专属规范：毛绒机芯 (Capybara) 🐹

适用范围: device-control.html (设备控), products.html (卡片), 故事生成弹窗。 核心风格: 温暖、毛绒感、舒适、杏褐色调。

Note

所有与控制“毛绒机芯”设备相关的页面/弹窗，必须强制遵循此主题。

首要行动点 (Capybara Context)

用途：“创作新故事”、“开始生成”、设备页内的主要交互。

• 渐变色: linear-gradient(135deg, #ECCFA8 0%, #C99672 100%) (浅杏色 -> 暖褐色)
• 阴影: box-shadow: 0 0 15px rgba(201, 150, 114, 0.35), 0 0 30px rgba(201, 150, 114, 0.25) (复合光晕)
• 边框: 无 (依靠阴影和光感定义边界)

背景色系统

• 设备页底色: #FDF9F3 (暖沙色 Warm Sand) - 禁止使用纯白或渐变。
• 卡片背景: #FFFFFF (奶白色) 配柔和阴影。
• 选中高亮: #FFF7ED (极淡的橙色叠底)。

字体颜色 (Capybara Context)

• 标题: #4B2404 (黑巧棕)。
• 正文: #4B5563 (暖灰)。

选中交互模式 (Apple Style) 🍏

• 操作方式: 直接点击卡片。
• 指示器: 右上角复选徽章 (Checkmark Badge)。
  • 样式：杏褐色渐变实心圆 + 白色对钩。
• 状态: 摒弃“已选列表栏”，视觉反馈完全集中在卡片本体上。

---

3. 开发执行规则 📏

1. 确认上下文: 拿到设计稿先判断：这是 App 公共页面（用科技蓝）还是某个具体产品的页面（用产品色）？
2. 按钮混用禁令:
   • 公共页 -> 必须用科技渐变 (Tech Gradient)。
   • 卡皮巴拉页 -> 必须用毛绒渐变 (Plush Gradient)。
   • 一致性: 严禁混搭。卡皮巴拉页面里绝不应该出现“科技蓝”的按钮，除非是系统级的报错弹窗。

---

2.1 设置页规范 (Settings Page - Overlay) ⚙️

交互模式: 全屏覆盖层 (Full-screen Overlay)，从底部滑入。

核心布局 (Layout & Metrics)

• 容器层级: z-index: 2000 (覆盖此时的主页)。
• 背景: 暖色渐变 linear-gradient(135deg, #FEF5EC 0%, #FDF2F8 100%)。
• 进出动画: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)。

头部规范 (Header)

为了与主页保持视觉一致性，头部必须遵循以下严格计算：

• 定位: position: absolute (悬浮于内容之上)。
• 高度: 自然高度 (Auto)，不固定。
• 上边距 (Padding-Top): calc(env(safe-area-inset-top, 20px) + 48px) —— 严格对齐首页。
• 底边距 (Padding-Bottom): 16px。
• 左右边距: 20px。

内容区域 (Content)

• 遮罩效果: 顶部使用渐变遮罩 (Gradient Mask) 实现内容在头部下方平滑消失，而非简单的背景色遮挡。
  • mask-image: linear-gradient(to bottom, transparent 0, transparent 80px, black 110px, ...)
• 上边距: calc(env(safe-area-inset-top) + 100px) (确保内容不被头部遮挡)。

弹窗规范 (Modals) 🚨

设置页内的二级操作（改名、解绑）必须使用以下弹窗样式：

• 层级: z-index: 2200 (必须高于设置页)。
• 背景: rgba(255, 255, 255, 0.95) (高透明度)。
• 动画: 必须添加 forwards 属性防止闪退。
  • animation: popIn 0.3s ... forwards
• 交互:
  • 必须设置 pointer-events: auto。
  • 必须设置 position: relative 和独立 z-index 给内容元素。
• 点击阻断: item 点击事件必须加 event.stopPropagation() 防止冒泡。

组件样式

• 开关 (Toggle): 激活色 #FFB088 (暖橙)。
• 滑动条 (Slider): 纯白滑块 + 投影，轨道背景 #E5E5EA。