# UI 设计规格

> 秒填鸭 — 各页面详细描述与设计规范

---

## 产品结构概览

整组页面形成完整插件链路：

1. **Popup**：扫描 → 自动展示匹配结果 → 一键填充（浏览器插件弹窗）
2. **Options 页**：个人信息管理、材料库管理、API 配置（插件内页面，通过 Popup 中点击头像跳转进入）

Popup 的核心流程：点击"扫描" → 自动识别字段并匹配 → 直接展示匹配结果（自动核对） → 用户确认后点击"一键填充"。

---

## 色板

| 用途 | 色值 |
|------|------|
| 主品牌色 | `#257FFD` |
| 主色悬停 | `#1769E6` |
| 主色按下 | `#0F56C5` |
| 浅蓝背景 | `#EAF2FF` |
| 浅蓝边框 | `#BBD7FF` |
| 页面背景 | `#F6F8FB` |
| 卡片背景 | `#FFFFFF` |
| 主文字 | `#1F2937` |
| 次级文字 | `#667085` |
| 边框线 | `#E5EAF2` |
| 成功绿色 | `#22C55E` |
| 待确认橙色 | `#F59E0B` |
| 删除红色 | `#EF4444` |

状态色语义：绿色 = 已匹配/已完成/可调用；橙色 = 需确认/待处理/敏感字段；红色 = 删除/错误/危险操作。

---

## 字体与排版

- 字体：系统默认无衬线（苹方、思源黑体、Inter）
- 页面标题：24px ~ 28px
- 模块标题：16px ~ 18px
- 正文：14px
- 辅助说明：12px ~ 13px
- 卡片圆角：12px ~ 16px
- 按钮圆角：8px ~ 12px
- 主内容区左右边距：24px ~ 32px
- 卡片之间间距：16px ~ 24px

---

## 页面一：插件 Popup — 扫描与填充

### 定位

用户点击浏览器插件图标后弹出的快捷操作面板。核心流程：点击扫描 -> 扫描中 → 自动核对展示结果 → 一键填充。

### 尺寸

- 宽度：360px ~ 420px
- 高度：约 520px（根据内容自适应）

### 布局

**顶部区域：**
- 左侧：插件 Logo + 名称"秒填鸭"
- 右侧：用户头像（点击跳转 Options 页）+ 关闭按钮

**初始状态（未扫描）：**
- 主按钮"扫描当前页面"
- 背景 `#257FFD`，文字白色，配扫描/AI 图标
- 高度 44px ~ 48px，圆角 10px ~ 14px

**扫描中状态：**
- 加载动画 + 提示文字"正在识别表单字段..."

**扫描完成状态（自动核对结果）：**

统计概览：
- 识别到 18 个字段 / 匹配成功 15 项 / 待确认 3 项

字段匹配列表（可滚动，顶部统计和底部按钮固定）：
- 每行：字段名 | 匹配内容 | 状态标签
- 状态标签：高置信度 = 浅绿色；需确认 = 浅橙色；未匹配 = 灰色
- 需确认行：浅橙色边框或浅橙背景

底部操作区：
- 主按钮"一键自动填充（15 项）"：`#257FFD` 实底，白色文字，高度 44px ~ 48px，圆角 10px ~ 12px
- 次级按钮"重新扫描"：白底浅灰边框

### 交互说明

Popup 只有一个页面，状态流转：未扫描 → 扫描中 → 扫描完成（自动展示核对结果）。用户检查后点击"一键自动填充"完成填写。

**页面跳转：**
- 点击右上角用户头像 → 在新标签页中打开插件 Options 页

---

## 页面二：Options 页 — 首页

### 定位

插件内完整管理页面，用于长期维护个人信息、材料文件和 API 配置。通过 Popup 右上角用户头像跳转进入（新标签页打开 `chrome.runtime.getURL('options.html')`）。

### 整体布局

大页面布局，不使用窄边栏弹窗。

**左侧导航栏：**
- 宽度约 220px
- 顶部：产品 Logo + 名称
- 导航项：个人信息、材料库、API 设置
- 选中项：背景 `#EAF2FF`，文字和图标 `#257FFD`，左侧 3px 蓝色竖线

**右侧主内容区：**

**个人信息页：**

基础信息卡片：
- 姓名、性别、出生日期、手机号、邮箱、身份证号、学校、学院、专业、年级、学号、学分绩、政治面貌、联系地址、邮政编码
- 图标 + 字段名 + 内容，双列或三列布局
- 右上角"编辑"按钮

结构化经历 block（每个 block 可展开/折叠）：
- 项目经历：多张小卡片，每张含项目名称、时间、简短描述、类型标签。"+ 添加"按钮
- 竞赛奖项：每条含奖项名称、时间、颁发单位。"+ 添加"按钮
- 科研经历、实习经历、学生工作、荣誉称号、语言成绩、技能证书：类似结构

**材料库页：**
- 标题"材料库" + "共 N 个材料" + "上传材料"按钮
- 材料列表：每行含缩略图、材料名称、文件类型、文件大小、"可调用"状态标签
- 每条操作：替换、设为常用、删除
- 上传区域：虚线边框拖拽上传或点击选择

**API 设置页：**
- Base URL、API Key、Model 三个输入框
- 保存按钮

### 整体风格

白色背景、大圆角卡片、轻阴影、浅灰边框。品牌蓝用于导航选中、关键按钮、链接和可交互状态。

---

## 设计原则总结

- 轻量后台 + AI 工具助手风格
- 背景浅灰，卡片纯白，轻阴影
- 品牌蓝 `#257FFD` 统一用于 Logo、主按钮、导航选中、链接、关键图标
- 不使用粉色，避免偏可爱或娱乐化
- 蓝色适合智能、效率、可信、数据处理、校园申报场景
- 全部在插件内操作，不依赖外部网页
