100 lines
4.5 KiB
Markdown
100 lines
4.5 KiB
Markdown
# 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`。
|