# 产品视觉设计说明

## 设计目标

本系统是一套证书管理和公开查询产品，视觉上应当清爽、可信、便于长期办公使用。后台页面优先保证信息密度、扫描效率和操作稳定感；公开查询页优先保证用户能快速完成查询、预览和下载。

## 设计方向

- 不做营销式首页。
- 不做重装饰背景。
- 不使用沉重深色大面积背景。
- 不使用老气的灰褐色或暗沉配色。
- 使用浅色背景、白色工作区、克制青绿色主色。
- 通过边框、间距、字体粗细和轻微阴影建立层级。

## 颜色

主色：

```text
#16817e
```

用于：

- 主按钮。
- 激活导航。
- 有效状态。
- 链接。

背景：

```text
#f7fafb -> #eef4f6
```

用于页面底色，保持清爽但不纯白刺眼。

边框：

```text
#dbe6ea
#c8d7dd
```

用于卡片、输入框、表格边界。

文字：

```text
#172033 主文字
#64748b 次级文字
```

风险色：

```text
#c9413a 高风险/危险操作
#b7791f 中风险/警告
```

## 后台布局

- 左侧导航固定 248px。
- 工作区使用 28px 页面内边距。
- 页面标题区采用左标题、右主操作按钮布局。
- 表单区域和列表区域分成独立白色面板。
- 卡片圆角控制在 10px 左右，不使用过大的圆角。
- 分页右对齐，符合后台数据列表习惯。

## 公开查询页

- 查询卡片是第一屏核心。
- 不放多余介绍文字。
- 查询方式使用分段选择。
- 查询结果使用证书卡片展示。
- 结果卡保留证书编号、姓名、项目、课程/阶段、发证日期、发证单位。
- 预览和下载按钮放在卡片右下方。

## 表格和控件

- 表头使用浅灰蓝背景。
- 表格 hover 只做轻微背景变化。
- 输入框和下拉框高度统一。
- 下拉框箭头不得贴边。
- 主要按钮使用青绿色，危险按钮使用红色。
- 状态标签使用圆角胶囊，但尺寸克制。

## 自行决策记录

- 选择青绿色作为主色，因为它比蓝色更接近当前证书产品的清爽和可信气质，也不会显得像通用后台模板。
- 没有加入大面积插画、渐变装饰或复杂动效，避免影响后台扫描效率。
- 正式版新增全局 `design.css`，统一 Element Plus 控件和通用布局。
- 本地验证版同步更新内联 CSS，保证本地验收看到的视觉方向与正式版一致。