qia/docs/ui-spec.md

# 掐日子（qia）UI 设计规范

> 版本：v1.0.0
> 更新日期：2026-01-29
> 设计风格：苹果公司风格，浅色系

---

## 1 设计原则

### 1.1 整体设计理念

掐日子的设计遵循"简洁、高效、温暖"三大核心理念，以苹果Human Interface Guidelines为设计准则，打造轻便易用的日期管理工具。

**简洁性原则**：去除一切不必要的视觉元素，让用户专注于核心内容。界面采用大量留白，通过清晰的层级结构引导用户视线，避免信息过载带来的认知负担。每一个设计决策都经过深思熟虑，确保每个元素都有其存在的必要性。

**高效性原则**：以用户任务为中心，优化操作流程，减少用户点击次数。AI智能解析功能让添加纪念日和提醒变得像发消息一样简单，自然语言交互降低了学习成本。快速响应和流畅的动效设计提升了整体使用效率。

**温暖性原则**：通过精心设计的细节传递产品的温度。倒计时显示让用户感受到时间的珍贵，贴心的到期提醒帮助用户不再错过重要日期。整体视觉风格采用温暖的浅色调，营造舒适愉悦的使用氛围。

### 1.2 视觉风格定义

掐日子采用苹果公司风格的浅色系设计语言，具体特征如下：

| 设计属性 | 规范定义 |
|---------|---------|
| 设计风格 | 苹果扁平化设计，轻拟物元素 |
| 主色调 | 系统蓝品牌色 `#007AFF` |
| 背景色 | 浅灰白色 `#FFFFFF` / `#F5F5F7` |
| 圆角风格 | 中等圆角，8px-16px |
| 阴影效果 | 柔和投影，轻量级层级阴影 |
| 字体风格 | 系统字体，无衬线清晰可读 |
| 图标风格 | 线性图标，圆角处理 |

---

## 2 颜色系统

### 2.1 主色调（品牌色）

品牌色是产品视觉识别的核心，应用于主要操作按钮、链接、选中状态等关键元素。

| 颜色名称 | 色值 | CSS变量 | 使用场景 |
|---------|------|---------|---------|
| 品牌主色 | `#007AFF` | `--color-primary` | 主要按钮背景、链接、选中状态、图标填充 |
| 品牌浅色 | `#EAF3FF` | `--color-primary-light` | 背景色、悬停背景、选中框背景 |
| 品牌深色 | `#0056CC` | `--color-primary-dark` | 按下状态、disabled状态 |

### 2.2 辅助色

辅助色用于补充品牌色，在特定场景下传达特定含义。

| 颜色名称 | 色值 | CSS变量 | 使用场景 |
|---------|------|---------|---------|
| 紫色 | `#AF52DE` | `--color-purple` | AI功能标识、特殊纪念日 |
| 绿色 | `#34C759` | `--color-green` | 完成状态、成功提示 |
| 橙色 | `#FF9500` | `--color-orange` | 警告提示、待处理提醒 |
| 红色 | `#FF3B30` | `--color-red` | 错误状态、删除操作、已错过提醒 |
| 黄色 | `#FFCC00` | `--color-yellow` | 提醒标识、重要日期高亮 |

### 2.3 中性色

中性色用于文字、背景、边框等基础UI元素，构建界面的层次结构。

| 颜色名称 | 色值 | CSS变量 | 使用场景 |
|---------|------|---------|---------|
| 文字主色 | `#1D1D1F` | `--color-text-primary` | 标题、重要内容 |
| 文字次色 | `#48484A` | `--color-text-secondary` | 正文内容 |
| 文字三级 | `#86868B` | `--color-text-tertiary` | 辅助说明、时间显示 |
| 文字占位 | `#C7C7CC` | `--color-text-placeholder` | 输入框占位符、空状态 |
| 背景白色 | `#FFFFFF` | `--color-bg-white` | 卡片、弹窗背景 |
| 背景浅灰 | `#F5F5F7` | `--color-bg-light` | 页面背景、分组标题背景 |
| 背景更深灰 | `#E5E5EA` | `--color-bg-darker` | 分割线、边框 |
| 边框颜色 | `#C6C6C8` | `--color-border` | 输入框边框、分隔线 |

### 2.4 功能色

功能色用于传达操作结果的反馈信息。

| 功能 | 色值 | CSS变量 | 应用示例 |
|-----|------|---------|---------|
| 成功 | `#34C759` | `--color-success` | 完成checkmark、创建成功提示 |
| 警告 | `#FF9500` | `--color-warning` | 即将过期提醒、需要注意 |
| 错误 | `#FF3B30` | `--color-error` | 删除确认、表单验证失败 |
| 信息 | `#007AFF` | `--color-info` | 普通提示、新功能引导 |

### 2.5 语义色

语义色用于区分不同类型的内容，增强信息的可识别性。

| 内容类型 | 色值 | CSS变量 | 使用场景 |
|---------|------|---------|---------|
| 纪念日色条 | `#AF52DE` | `--color-anniversary` | 纪念日卡片左侧色条 |
| 提醒色条 | `#007AFF` | `--color-reminder` | 提醒卡片左侧色条 |
| 便签色条 | `#34C759` | `--color-note` | 便签区域标识 |
| AI对话色 | `#5856D6` | `--color-ai` | AI消息气泡、对话框 |
| 农历标识 | `#FF9500` | `--color-lunar` | 农历日期文字颜色 |
| 法定节假日 | `#FF3B30` | `--color-holiday` | 节假日标签 |

### 2.6 颜色令牌汇总

```css
:root {
  /* 品牌色 */
  --color-primary: #007AFF;
  --color-primary-light: #EAF3FF;
  --color-primary-dark: #0056CC;

  /* 辅助色 */
  --color-purple: #AF52DE;
  --color-green: #34C759;
  --color-orange: #FF9500;
  --color-red: #FF3B30;
  --color-yellow: #FFCC00;

  /* 中性色 */
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #48484A;
  --color-text-tertiary: #86868B;
  --color-text-placeholder: #C7C7CC;
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F5F5F7;
  --color-bg-darker: #E5E5EA;
  --color-border: #C6C6C8;

  /* 功能色 */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  --color-info: #007AFF;

  /* 语义色 */
  --color-anniversary: #AF52DE;
  --color-reminder: #007AFF;
  --color-note: #34C759;
  --color-ai: #5856D6;
  --color-lunar: #FF9500;
  --color-holiday: #FF3B30;
}
```

---

## 3 字体系统

### 3.1 字体家族

采用系统默认字体，确保在不同平台上的最佳可读性和一致性。

| 字体类型 | 字体名称 | CSS声明 | 说明 |
|---------|---------|---------|------|
| 主字体 | -apple-system | `font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif` | iOS/macOS系统字体 |
| 中文字体 | PingFang SC | `'PingFang SC', 'Microsoft YaHei', sans-serif` | 苹方字体（Mac）/微软雅黑（Windows） |
| 等宽字体 | SF Mono | `font-family: 'SF Mono', Monaco, Menlo, monospace` | 用于代码展示 |

### 3.2 字号层级

建立清晰的字号层级体系，确保信息层次的视觉区分。

| 字号名称 | 字号大小 | 行高 | 字重 | CSS变量 | 使用场景 |
|---------|---------|------|------|---------|---------|
| 超大标题 | 34px | 41px | 700 | `--font-size-xxl` | 宣传页主标题 |
| 大标题 | 28px | 34px | 700 | `--font-size-xl` | 页面主标题 |
| 中标题 | 22px | 28px | 600 | `--font-size-lg` | 区域标题、卡片标题 |
| 小标题 | 18px | 24px | 600 | `--font-size-md` | 分组标题、重要内容 |
| 正文字 | 16px | 24px | 400 | `--font-size-base` | 正文内容、输入文字 |
| 小正文 | 14px | 20px | 400 | `--font-size-sm` | 次要说明、卡片内容 |
| 辅助文字 | 12px | 16px | 400 | `--font-size-xs` | 时间标签、占位符 |
| 最小文字 | 10px | 14px | 400 | `--font-size-xxs` | 徽章标签、数量标识 |

### 3.3 字重规范

| 字重 | CSS值 | 使用场景 |
|-----|-------|---------|
| 700 (Bold) | `700` / `bold` | 大标题、区域标题、数字强调 |
| 600 (Semibold) | `600` | 小标题、卡片标题、需要强调的文字 |
| 400 (Regular) | `400` / `normal` | 正文内容、辅助说明 |

### 3.4 行高规范

行高与字号保持合理比例，确保文本的可读性。

| 字号范围 | 推荐行高 | 行高/字号比例 |
|---------|---------|--------------|
| 28px及以上 | 字号 + 6-8px | 约 1.2 |
| 18-22px | 字号 + 6px | 约 1.3 |
| 14-16px | 字号 + 8px | 约 1.5 |
| 12px及以下 | 字号 + 4px | 约 1.4 |

### 3.5 字体令牌汇总

```css
:root {
  /* 字号 */
  --font-size-xxl: 34px;
  --font-size-xl: 28px;
  --font-size-lg: 22px;
  --font-size-md: 18px;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;

  /* 行高 */
  --line-height-xxl: 41px;
  --line-height-xl: 34px;
  --line-height-lg: 28px;
  --line-height-md: 24px;
  --line-height-base: 24px;
  --line-height-sm: 20px;
  --line-height-xs: 16px;
  --line-height-xxs: 14px;

  /* 字重 */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;
}
```

---

## 4 间距系统

### 4.1 基础间距单位

以 4px 作为基础间距单位，所有间距值均为 4px 的倍数。

| 间距名称 | 间距值 | CSS变量 | 用途 |
|---------|--------|---------|------|
| 间距-xs | 4px | `--spacing-xs` | 元素内部最小间距 |
| 间距-sm | 8px | `--spacing-sm` | 紧密相关的元素间距 |
| 间距-md | 16px | `--spacing-md` | 标准间距 |
| 间距-lg | 24px | `--spacing-lg` | 较大间距 |
| 间距-xl | 32px | `--spacing-xl` | 大间距 |
| 间距-2xl | 48px | `--spacing-2xl` | 区块间距 |
| 间距-3xl | 64px | `--spacing-3xl` | 页面边距 |

### 4.2 组件内间距

| 组件类型 | 水平 padding | 垂直 padding | CSS变量 |
|---------|-------------|-------------|---------|
| 卡片类 | 16px | 12px | `--card-padding` |
| 按钮类 | 16px | 8px | `--button-padding` |
| 输入框 | 12px | 10px | `--input-padding` |
| 弹窗内容 | 24px | 20px | `--modal-padding` |
| 分组标题 | 16px | 8px | `--section-padding` |

### 4.3 组件间距

| 场景 | 间距值 | CSS变量 |
|-----|--------|---------|
| 卡片之间 | 12px | `--gap-card` |
| 分组之间 | 24px | `--gap-section` |
| 列表项之间 | 8px | `--gap-item` |
| 表单项之间 | 16px | `--gap-form` |
| 按钮之间 | 12px | `--gap-button` |
| 图标与文字 | 8px | `--gap-icon-text` |
| 标题与内容 | 8px | `--gap-title-content` |

### 4.4 页面边距

| 页面类型 | 水平边距 | 垂直边距 | 最大宽度 |
|---------|---------|---------|---------|
| 宣传页 | 24px | 0 | 1200px |
| 登录/注册页 | 24px | 0 | 400px |
| Home页 | 24px | 0 | 1200px |
| 弹窗 | 24px | 0 | 480px |

### 4.5 间距令牌汇总

```css
:root {
  /* 基础间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* 组件内间距 */
  --card-padding: 16px 12px;
  --button-padding: 8px 16px;
  --input-padding: 10px 12px;
  --modal-padding: 24px 20px;
  --section-padding: 8px 16px;

  /* 组件间距 */
  --gap-card: 12px;
  --gap-section: 24px;
  --gap-item: 8px;
  --gap-form: 16px;
  --gap-button: 12px;
  --gap-icon-text: 8px;
  --gap-title-content: 8px;

  /* 页面边距 */
  --page-margin: 24px;
  --page-max-width: 1200px;
}
```

---

## 5 圆角与阴影

### 5.1 圆角层级

建立统一的圆角规范，不同场景使用不同层级的圆角。

| 圆角层级 | 圆角值 | CSS变量 | 使用场景 |
|---------|--------|---------|---------|
| 圆角-sm | 4px | `--radius-sm` | 小按钮、徽章、标签 |
| 圆角-md | 8px | `--radius-md` | 卡片、输入框、弹窗 |
| 圆角-lg | 12px | `--radius-lg` | 大卡片、分组容器 |
| 圆角-xl | 16px | `--radius-xl` | 弹窗、侧边栏 |
| 圆角-full | 9999px | `--radius-full` | 头像、圆形按钮、Pill标签 |

### 5.2 阴影规范

阴影用于表现层级关系和交互状态，层级越高阴影越明显。

| 阴影层级 | 阴影值 | CSS变量 | 使用场景 |
|---------|--------|---------|---------|
| 阴影-sm | `0 1px 2px rgba(0, 0, 0, 0.05)` | `--shadow-sm` | 微小投影、分隔线 |
| 阴影-md | `0 2px 8px rgba(0, 0, 0, 0.08)` | `--shadow-md` | 卡片悬停、按钮按下 |
| 阴影-lg | `0 4px 16px rgba(0, 0, 0, 0.1)` | `--shadow-lg` | 弹窗、下拉菜单 |
| 阴影-xl | `0 8px 32px rgba(0, 0, 0, 0.12)` | `--shadow-xl` | 重要弹窗、模态框 |
| 阴影-inner | `inset 0 2px 4px rgba(0, 0, 0, 0.06)` | `--shadow-inner` | 输入框内陷效果 |

### 5.3 交互状态阴影

| 交互状态 | 阴影效果 | 说明 |
|---------|---------|------|
| 默认状态 | `0 1px 3px rgba(0, 0, 0, 0.06)` | 基础卡片投影 |
| 悬停状态 | `0 4px 12px rgba(0, 122, 255, 0.15)` | 品牌色微光效果 |
| 按下状态 | `0 0 0 3px rgba(0, 122, 255, 0.2)` | 品牌色边框扩散 |
| 选中状态 | `0 0 0 2px var(--color-primary)` | 品牌色描边 |

### 5.4 圆角与阴影令牌汇总

```css
:root {
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
```

---

## 6 组件设计规范

### 6.1 纪念日卡片

纪念日卡片用于展示用户的重要日期，支持倒计时显示和重复规则标识。

**布局结构**：
```
┌─────────────────────────────────────────────────────────┐
│ [左侧色条]  纪念日名称（主标题）                    [标识] │
│            倒计时 + 日期信息（副标题）                    │
└─────────────────────────────────────────────────────────┘
```

**尺寸规范**：
| 属性 | 规范值 |
|-----|-------|
| 卡片高度 | 60px |
| 左侧色条宽度 | 4px |
| 圆角 | 8px |
| 内边距 | 12px 16px |

**样式规范**：
| 元素 | 字号 | 字重 | 颜色 |
|-----|------|-----|------|
| 纪念日名称 | 16px | 600 | `--color-text-primary` |
| 倒计时 | 14px | 400 | `--color-text-secondary` |
| 日期信息 | 12px | 400 | `--color-text-tertiary` |
| 色条颜色 | - | - | `--color-anniversary` (#AF52DE) |

**状态定义**：
| 状态 | 视觉效果 |
|-----|---------|
| 默认 | 白色背景，轻微阴影 |
| 悬停 | 背景色变浅，品牌色微光阴影 |
| 即将到来（30天内） | 高亮显示，倒计时文字使用品牌色 |
| 今日 | 背景色为 `--color-primary-light`，倒计时显示"今日" |

**重复标识**：
| 重复类型 | 图标/标识 | 说明 |
|---------|----------|------|
| 仅一次 | 无标识 | 不重复 |
| 年度重复 | 循环图标 (360度旋转箭头) | 每年重复 |
| 月度重复 | 双循环图标 | 每月重复 |

**农历/节假日标识**：
| 类型 | 样式 |
|-----|------|
| 农历 | 橙色文字"农历"，带月亮图标 |
| 法定节假日 | 红色"节假日"标签 |

### 6.2 提醒卡片

提醒卡片用于展示待办任务，支持完成标记和过期状态。

**布局结构**：
```
┌─────────────────────────────────────────────────────────┐
│ [checkbox]  提醒内容（主标题）                    [时间] │
└─────────────────────────────────────────────────────────┘
```

**尺寸规范**：
| 属性 | 规范值 |
|-----|-------|
| 卡片高度 | 50px |
| checkbox尺寸 | 20px x 20px |
| 圆角 | 8px |
| 内边距 | 10px 16px |

**样式规范**：
| 元素 | 字号 | 字重 | 颜色 |
|-----|------|-----|------|
| 提醒内容 | 14px | 400 | `--color-text-primary` |
| 时间信息 | 12px | 400 | `--color-text-tertiary` |
| 色条颜色 | - | - | `--color-reminder` (#007AFF) |

**Checkbox 样式**：
| 属性 | 规范值 |
|-----|-------|
| 未选中 | 灰色边框，圆角4px |
| 选中 | 绿色背景 + 白色checkmark |
| 悬停 | 边框加深 |

**分组样式**：
| 分组名称 | 标题颜色 | 标题字号 |
|---------|---------|---------|
| 今天 | `--color-text-primary` | 14px |
| 明天 | `--color-text-primary` | 14px |
| 更久之后 | `--color-text-secondary` | 14px |
| 已错过 | `--color-error` | 14px |

**完成状态**：
| 状态 | 视觉效果 |
|-----|---------|
| 未完成 | 正常显示 |
| 已完成 | 内容灰色划线，时间显示完成时间，移至分组底部 |
| 已过期 | 红色高亮，显示在"已错过"分组顶部 |

### 6.3 便签编辑器

便签区域提供富文本编辑能力，采用 Quill 编辑器组件。

**布局结构**：
```
┌─────────────────────────────────────────────────────┐
│  [便签标题]                              [清空按钮] │
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │              富文本编辑器容器                   │ │
│  │              （可编辑区域）                     │ │
│  └───────────────────────────────────────────────┘ │
│                              [保存状态：已保存]      │
└─────────────────────────────────────────────────────┘
```

**尺寸规范**：
| 属性 | 规范值 |
|-----|-------|
| 便签区域高度 | 占右侧区域的50% |
| 编辑器最小高度 | 200px |
| 工具栏高度 | 40px |
| 圆角 | 8px |

**工具栏按钮**：
| 按钮 | 图标 | 用途 |
|-----|------|------|
| H1 | 标题1 | 一级标题 |
| H2 | 标题2 | 二级标题 |
| B | 粗体 | 加粗文字 |
| I | 斜体 | 斜体文字 |
| U | 下划线 | 添加下划线 |
| S | 删除线 | 添加删除线 |
| 链接 | 链接图标 | 插入链接 |
| 有序列表 | 数字列表 | 有序列表 |
| 无序列表 | 圆点列表 | 无序列表 |

**保存状态指示**：
| 状态 | 颜色 | 位置 |
|-----|------|------|
| 已保存 | `--color-success` | 右上角 |
| 保存中 | `--color-text-tertiary` + 加载动画 | 右上角 |
| 离线保存 | `--color-warning` | 右上角 |

**空状态**：
| 状态 | 显示内容 |
|-----|---------|
| 便签为空 | "开始记录你的想法..."，灰色文字 `--color-text-placeholder` |

### 6.4 AI对话框

AI对话区域是产品的核心特色，采用聊天气泡形式展示对话历史。

**布局结构**：
```
┌─────────────────────────────────────────────────────┐
│  [AI区域标题]                                        │
├─────────────────────────────────────────────────────┤
│  ┌───────────────┐  ┌─────────────────────────────┐ │
│  │               │  │ AI消息气泡                  │ │
│  │    AI头像     │  │ （自然语言解析结果）         │ │
│  │               │  └─────────────────────────────┘ │
│  └───────────────┘                                  │
│  ┌─────────────────────────────┐  ┌───────────────┐ │
│  │ 用户消息气泡                 │  │               │ │
│  │ （用户输入内容）             │  │    用户头像   │ │
│  └─────────────────────────────┘  │               │ │
│                                   └───────────────┘ │
├─────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────┐│
│  │  [输入框：输入描述要添加的纪念日或提醒...] [发送] ││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘
```

**气泡样式**：
| 气泡类型 | 背景色 | 圆角 | 最大宽度 |
|---------|--------|------|---------|
| AI气泡 | `--color-bg-light` (浅灰) | 16px | 280px |
| 用户气泡 | `--color-primary-light` (浅蓝) | 16px | 280px |
| 解析确认卡片 | 白色 + 边框 | 12px | 100% |

**气泡内边距**：12px 16px

**发送按钮**：
| 状态 | 背景色 | 效果 |
|-----|--------|------|
| 默认 | `--color-primary` | 蓝色圆形 |
| 悬停 | `--color-primary-dark` | 颜色加深 |
| disabled | `--color-text-placeholder` | 灰色不可点击 |

**解析确认卡片**：
| 元素 | 样式 |
|-----|------|
| 卡片背景 | 白色，边框2px实线 `--color-primary-light` |
| 卡片圆角 | 12px |
| 确认按钮 | 主要按钮样式 |
| 修改按钮 | 次要按钮样式 |

### 6.5 详情弹窗

点击纪念日或提醒卡片时弹出详情弹窗，支持二次编辑。

**布局结构**：
```
┌─────────────────────────────────────────────────────┐
│  [X]  编辑纪念日 / 编辑提醒                     [删除]│
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │  表单字段区域                                  │ │
│  │  - 输入框/选择器                               │ │
│  │  - 开关/下拉选择                               │ │
│  └───────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│            [取消]                    [保存]          │
└─────────────────────────────────────────────────────┘
```

**尺寸规范**：
| 属性 | 规范值 |
|-----|-------|
| 弹窗宽度 | 400px - 480px |
| 弹窗最大高度 | 80vh |
| 圆角 | 16px |
| 头部高度 | 52px |
| 底部按钮区高度 | 60px |

**头部样式**：
| 元素 | 样式 |
|-----|------|
| 标题 | 中标题 18px，字重 600，颜色 `--color-text-primary` |
| 关闭按钮 | 20px x 20px，灰色图标 |
| 删除按钮 | 红色文字按钮，字重 500 |

**表单控件样式**：
| 控件类型 | 样式规范 |
|---------|---------|
| 输入框 | 高度 40px，圆角 8px，边框 `--color-border`，聚焦边框 `--color-primary` |
| 标签 | 小正文 14px，颜色 `--color-text-secondary`，上方留白 8px |
| 开关 | iOS样式，圆角 16px，滑块白色 |
| 下拉选择 | 右侧下拉箭头，高度 40px，圆角 8px |

**操作按钮**：
| 按钮类型 | 样式 |
|---------|------|
| 保存按钮 | 主要按钮，蓝色背景，白色文字 |
| 取消按钮 | 次要按钮，灰色边框，黑色文字 |
| 删除按钮 | 危险按钮，红色文字，无背景 |

### 6.6 按钮样式

按钮是用户操作的主要入口，需要清晰区分主次和危险操作。

**主要按钮**：
| 属性 | 规范值 |
|-----|-------|
| 背景色 | `--color-primary` (#007AFF) |
| 文字颜色 | 白色 |
| 高度 | 36px - 44px |
| 圆角 | 8px |
| 字重 | 600 |
| 字重 | 14px |
| 内边距 | 0 20px |
| 悬停背景 | `--color-primary-dark` (#0056CC) |

**次要按钮**：
| 属性 | 规范值 |
|-----|-------|
| 背景色 | 透明 |
| 文字颜色 | `--color-text-primary` |
| 边框 | 1px solid `--color-border` |
| 高度 | 36px - 44px |
| 圆角 | 8px |
| 字号 | 14px |
| 内边距 | 0 20px |
| 悬停背景 | `--color-bg-light` |

**文字按钮**：
| 属性 | 规范值 |
|-----|-------|
| 背景色 | 透明 |
| 文字颜色 | `--color-primary` |
| 高度 | 36px |
| 圆角 | 无（0px） |
| 字号 | 14px |
| 内边距 | 0 12px |
| 悬停背景 | `--color-primary-light` |

**危险按钮（删除/清除）**：
| 属性 | 规范值 |
|-----|-------|
| 背景色 | 透明 |
| 文字颜色 | `--color-error` |
| 边框 | 1px solid `--color-error` |
| 高度 | 36px - 44px |
| 圆角 | 8px |
| 字号 | 14px |
| 内边距 | 0 20px |
| 悬停背景 | `--color-error` + 10% opacity |

**按钮尺寸变体**：
| 变体 | 高度 | 字号 | 用途 |
|-----|------|-----|------|
| 小按钮 | 28px | 12px | 工具栏、徽章 |
| 中按钮 | 36px | 14px | 表单操作 |
| 大按钮 | 44px | 16px | 主要行动按钮 |
| 大号按钮 | 52px | 17px | 宣传页CTA |

---

## 7 页面布局规范

### 7.1 宣传页布局

宣传页采用极简设计，分为三个主要区域。

**布局结构**：
```
┌─────────────────────────────────────────────────────────┐
│  [Logo: 掐日子 + Slogan]                     [登录][注册]│
├─────────────────────────────────────────────────────────┤
│                                                         │
│              让重要日期不再错过                          │
│                                                         │
│        AI智能解析  ·  轻松管理纪念日  ·  即时提醒        │
│                                                         │
│                      [开始使用]                         │
│                                                         │
├─────────────────────────────────────────────────────────┤
│     © 2025 掐日子    隐私政策    服务条款                │
└─────────────────────────────────────────────────────────┘
```

**区域规范**：
| 区域 | 高度 | 背景色 |
|-----|------|--------|
| 顶部导航区 | 60px | 白色 |
| 内容展示区 | 自适应（最小600px） | 白色 |
| 底部信息区 | 60px | `--color-bg-light` |

**Logo规范**：
| 元素 | 样式 |
|-----|------|
| 产品名称 | 20px，字重 700，品牌色 |
| Slogan | 14px，灰色 `--color-text-tertiary` |

**CTA按钮**：
| 属性 | 规范值 |
|-----|-------|
| 尺寸 | 大号按钮（高度52px） |
| 圆角 | 26px (pill形状) |
| 文字 | "开始使用" |

### 7.2 登录/注册页布局

登录和注册采用同一页面布局，通过Tab切换。

**布局结构**：
```
┌─────────────────────────────────────────────────────┐
│                                                     │
│                    [Logo]                           │
│                                                     │
│              [登录]        [注册]                   │
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │  邮箱地址                                    │   │
│  └─────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────┐   │
│  │  密码                                        │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│               [登录按钮]                            │
│                                                     │
│          还没有账号？点击注册                        │
│                                                     │
└─────────────────────────────────────────────────────┘
```

**卡片规范**：
| 属性 | 规范值 |
|-----|-------|
| 卡片宽度 | 400px |
| 卡片圆角 | 16px |
| 卡片背景 | 白色 |
| 卡片阴影 | `--shadow-lg` |

**输入框规范**：
| 属性 | 规范值 |
|-----|-------|
| 高度 | 44px |
| 圆角 | 8px |
| 边框 | 1px solid `--color-border` |
| 间距 | 下边距 16px |

**Tab样式**：
| 状态 | 视觉效果 |
|-----|---------|
| 激活 | 下边框2px实线 `--color-primary`，文字品牌色 |
| 未激活 | 文字灰色 `--color-text-tertiary`，无下划线 |

### 7.3 Home页四区布局

Home页面采用三栏布局，总宽度1200px居中显示。

**布局结构**：
```
┌─────────────────────────────────────────────────────────────────────┐
│                         顶部导航栏（60px）                            │
├───────────────┬───────────────────────────────────────┬─────────────┤
│               │                                       │             │
│  纪念日列表   │              主内容区                  │   便签区    │
│  （40%宽度）  │              （40%宽度）              │  （20%）    │
│               │                                       │             │
│  + 纪念日     │                                       │  ┌─────────┐│
│  + 提醒列表   │                                       │  │  便签   ││
│  （40%宽度）  │                                       │  │  编辑器 ││
│               │                                       │  └─────────┘│
│               │                                       │             │
│               │                                       │  ┌─────────┐│
│               │                                       │  │  AI     ││
│               │                                       │  │  对话   ││
│               │                                       │  │  区域   ││
│               │                                       │  └─────────┘│
│               │                                       │             │
├───────────────┴───────────────────────────────────────┴─────────────┤
│                         底部版权信息                                  │
└─────────────────────────────────────────────────────────────────────┘
```

**顶部导航栏**：
| 属性 | 规范值 |
|-----|-------|
| 高度 | 60px |
| 背景色 | 白色 |
| 内容 | Logo + 用户邮箱 + 登出按钮 |

**左侧区域（纪念日 + 提醒）**：
| 属性 | 规范值 |
|-----|-------|
| 宽度占比 | 40%（约480px） |
| 纪念日区域高度 | 50% |
| 提醒区域高度 | 50% |
| 分割线 | 1px solid `--color-bg-darker` |

**主内容区（便签 + AI对话）**：
| 属性 | 规范值 |
|-----|-------|
| 宽度占比 | 60%（约720px） |
| 便签区域高度 | 50% |
| AI对话区域高度 | 50% |
| 便签与AI之间 | 16px间距 |

**底部版权信息**：
| 属性 | 规范值 |
|-----|-------|
| 高度 | 40px |
| 背景色 | `--color-bg-light` |
| 文字 | 12px，灰色 `--color-text-tertiary` |

### 7.4 响应式适配规则

| 断点 | 屏幕宽度 | 布局变化 |
|-----|---------|---------|
| xs | < 768px | 单栏堆叠布局 |
| sm | 768px - 1024px | 两栏布局（左侧合并，右侧保留） |
| md | 1024px - 1200px | 三栏布局（宽度压缩） |
| lg | 1200px - 1440px | 标准三栏布局 |
| xl | > 1440px | 三栏布局（内容居中，最大宽度1440px） |

**移动端适配方案**：
| 场景 | 适配方案 |
|-----|---------|
| 导航栏 | 折叠为汉堡菜单 |
| 三栏布局 | 改为Tab切换（纪念日/提醒/其他） |
| 弹窗 | 全屏显示 |
| 卡片 | 占据全宽 |

---

## 8 交互动效规范

### 8.1 悬停效果

交互元素在鼠标悬停时应有明确的视觉反馈。

| 元素类型 | 悬停效果 |
|---------|---------|
| 主要按钮 | 背景色加深5%，轻微上移2px |
| 次要按钮 | 背景色变为 `--color-bg-light` |
| 卡片 | 阴影加深，轻微上移，cursor变为pointer |
| 链接 | 颜色变为 `--color-primary-dark`，下划线显示 |
| 表格行 | 背景色变为 `--color-bg-light` |

### 8.2 点击反馈

用户点击操作应有即时的视觉反馈。

| 元素类型 | 点击效果 |
|---------|---------|
| 按钮 | 背景色变暗10%，轻微下沉 |
| 卡片 | 阴影消失，按下效果 |
| checkbox | 立即显示选中状态，checkmark动画 |
| 链接 | 颜色变化，无动画 |
| 图标按钮 | 灰色圆形背景闪烁 |

**checkbox动画**：
| 阶段 | 动画效果 |
|-----|---------|
| 点击瞬间 | 缩放0.8倍 |
| 选中完成 | 缩放1.0倍 + 绿色背景填充 |
| checkmark | 从中心向外展开的线条动画 |

### 8.3 过渡动画

元素状态变化时使用平滑的过渡动画。

**通用过渡**：
```css
transition: all 0.2s ease-out;
```

**具体场景动画**：
| 场景 | 进入动画 | 离开动画 |
|-----|---------|---------|
| 弹窗显示 | fadeIn + scale(0.95) -> fadeIn + scale(1) | fadeOut + scale(1) -> fadeOut + scale(0.95) |
| 下拉菜单 | slideDown (200ms) | slideUp (150ms) |
| 列表项增删 | fadeIn + slideIn | fadeOut + slideOut |
| 卡片悬停 | scale(1.02) | scale(1) |
| 按钮点击 | scale(0.95) | scale(1) |

**AI消息动画**：
| 阶段 | 动画效果 | 时长 |
|-----|---------|------|
| 消息出现 | 渐显 + 打字机效果 | 300ms |
| 解析中 | 气泡呼吸动画 | 持续 |
| 发送中 | 发送按钮旋转 | 持续 |

**保存状态指示**：
| 状态切换 | 动画效果 |
|---------|---------|
| 保存中 -> 已保存 | 绿色对勾从小到大的缩放动画 |
| 离线保存 | 黄色警告图标闪烁 |

### 8.4 动画令牌

```css
:root {
  /* 动画时长 */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* 动画缓动 */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
```

---

## 9 图标规范

### 9.1 图标风格

图标采用线性风格（Outline），与苹果设计语言保持一致。

| 属性 | 规范定义 |
|-----|---------|
| 线条粗细 | 1.5px - 2px |
| 圆角 | 2px（线条端点） |
| 颜色 | 与文字颜色一致 |
| 尺寸 | 16px, 20px, 24px, 32px |
| 风格 | 线性、空心、圆角矩形框 |

### 9.2 图标尺寸

| 尺寸 | CSS变量 | 使用场景 |
|-----|---------|---------|
| 16px | `--icon-size-sm` | 表格内图标、标签旁图标 |
| 20px | `--icon-size-md` | 卡片内图标、按钮图标 |
| 24px | `--icon-size-lg` | 区域标题图标、独立图标 |
| 32px | `--icon-size-xl` | Logo、空状态图标 |

### 9.3 图标使用场景

| 图标名称 | 图标形状 | 用途 |
|---------|---------|------|
| 添加 | 加号 (+) | 添加按钮 |
| 删除 | 垃圾桶 | 删除操作 |
| 编辑 | 铅笔 | 编辑操作 |
| 保存 | 磁盘/对勾 | 保存操作 |
| 关闭 | X号 | 关闭弹窗 |
| 日历 | 日历形状 | 纪念日/日期相关 |
| 闹钟 | 闹钟形状 | 提醒相关 |
| 星星 | 星星形状 | 重要标记 |
| 循环 | 循环箭头 | 重复规则 |
| 月亮 | 月亮形状 | 农历标识 |
| 旗帜 | 旗帜形状 | 节假日标识 |
| 勾选 | 对勾 | 完成、确认 |
| 发送 | 箭头 | 发送消息 |
| 用户 | 用户头像 | 个人中心 |
| 登出 | 退出箭头 | 登出操作 |
| AI | 机器人头像 | AI对话区域 |
| 便签 | 文档形状 | 便签区域 |

### 9.4 图标颜色规则

| 场景 | 图标颜色 |
|-----|---------|
| 普通操作 | `--color-text-secondary` |
| 主要操作 | `--color-primary` |
| 完成状态 | `--color-success` |
| 警告状态 | `--color-warning` |
| 危险操作 | `--color-error` |
| 禁用状态 | `--color-text-placeholder` |

### 9.5 图标令牌

```css
:root {
  /* 图标尺寸 */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;

  /* 图标颜色 */
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-text-secondary);
  --icon-color-tertiary: var(--color-text-tertiary);
  --icon-color-success: var(--color-success);
  --icon-color-warning: var(--color-warning);
  --icon-color-error: var(--color-error);
  --icon-color-disabled: var(--color-text-placeholder);

  /* 图标线条粗细 */
  --icon-stroke-width: 1.5px;
}
```

---

## 10 设计资源

### 10.1 组件速查表

| 组件名称 | 高度 | 圆角 | 字号 | 主要颜色 |
|---------|------|------|------|---------|
| 纪念日卡片 | 60px | 8px | 16px/14px | `--color-anniversary` |
| 提醒卡片 | 50px | 8px | 14px | `--color-reminder` |
| 主要按钮 | 36-44px | 8px | 14-16px | `--color-primary` |
| 次要按钮 | 36-44px | 8px | 14px | 透明+边框 |
| 输入框 | 40px | 8px | 14px | `--color-border` |
| 弹窗 | 自适应 | 16px | 16px | 白色 |
| 聊天气泡 | 自适应 | 16px | 14px | 浅灰/浅蓝 |

### 10.2 常见颜色组合

| 场景 | 背景色 | 文字色 | 边框色 |
|-----|--------|--------|--------|
| 主要按钮 | `#007AFF` | `#FFFFFF` | 无 |
| 次要按钮 | 透明 | `#1D1D1F` | `#C6C6C8` |
| 纪念日卡片 | `#FFFFFF` | `#1D1D1F` | 无 |
| 提醒卡片 | `#FFFFFF` | `#1D1D1F` | 无 |
| AI气泡 | `#F5F5F7` | `#1D1D1F` | 无 |
| 用户气泡 | `#EAF3FF` | `#1D1D1F` | 无 |
| 弹窗 | `#FFFFFF` | `#1D1D1F` | 无 |
| 错误提示 | `#FFF2F2` | `#FF3B30` | `#FF3B30` |

### 10.3 快捷开发样式类

```css
/* 按钮类 */
.btn-primary {
  background: var(--color-primary);
  color: white;
  height: 40px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  height: 40px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* 卡片类 */
.card {
  background: white;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 输入框类 */
.input {
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 弹窗类 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: white;
  border-radius: 16px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  animation: scaleIn 0.2s ease;
}
```

---

## 11 附录

### 11.1 设计决策记录

| 决策项 | 决策内容 | 理由 |
|-------|---------|------|
| 圆角值 | 8px作为标准圆角 | 与苹果设计语言一致，视觉平衡 |
| 主色调 | 系统蓝 #007AFF | 用户熟悉度高，易于识别操作入口 |
| 卡片高度 | 纪念日60px，提醒50px | 纪念日信息更多，需要更大空间 |
| 间距单位 | 4px | 与Tailwind CSS一致，便于开发 |
| 图标风格 | 线性图标 | 与苹果风格一致，清晰易读 |

### 11.2 待确认事项

以下事项需要在设计评审中确认：

1. 倒计时超过365天时是否显示"还有X年"还是统一显示天数
2. 法定节假日是否需要特殊视觉效果（如红色高亮）
3. AI对话区域的聊天记录是否需要持久化存储
4. 便签是否支持多种颜色标签或主题

### 11.3 更新日志

| 版本 | 日期 | 更新内容 | 更新人 |
|------|------|---------|--------|
| v1.0.0 | 2026-01-29 | 初稿完成 | UI设计师 |