Initial certificate system

docs/产品视觉设计说明.md

@@ -0,0 +1,94 @@
+# 产品视觉设计说明
+
+## 设计目标
+
+本系统是一套证书管理和公开查询产品，视觉上应当清爽、可信、便于长期办公使用。后台页面优先保证信息密度、扫描效率和操作稳定感；公开查询页优先保证用户能快速完成查询、预览和下载。
+
+## 设计方向
+
+- 不做营销式首页。
+- 不做重装饰背景。
+- 不使用沉重深色大面积背景。
+- 不使用老气的灰褐色或暗沉配色。
+- 使用浅色背景、白色工作区、克制青绿色主色。
+- 通过边框、间距、字体粗细和轻微阴影建立层级。
+
+## 颜色
+
+主色：
+
+```text
+#16817e
+```
+
+用于：
+
+- 主按钮。
+- 激活导航。
+- 有效状态。
+- 链接。
+
+背景：
+
+```text
+#f7fafb -> #eef4f6
+```
+
+用于页面底色，保持清爽但不纯白刺眼。
+
+边框：
+
+```text
+#dbe6ea
+#c8d7dd
+```
+
+用于卡片、输入框、表格边界。
+
+文字：
+
+```text
+#172033 主文字
+#64748b 次级文字
+```
+
+风险色：
+
+```text
+#c9413a 高风险/危险操作
+#b7791f 中风险/警告
+```
+
+## 后台布局
+
+- 左侧导航固定 248px。
+- 工作区使用 28px 页面内边距。
+- 页面标题区采用左标题、右主操作按钮布局。
+- 表单区域和列表区域分成独立白色面板。
+- 卡片圆角控制在 10px 左右，不使用过大的圆角。
+- 分页右对齐，符合后台数据列表习惯。
+
+## 公开查询页
+
+- 查询卡片是第一屏核心。
+- 不放多余介绍文字。
+- 查询方式使用分段选择。
+- 查询结果使用证书卡片展示。
+- 结果卡保留证书编号、姓名、项目、课程/阶段、发证日期、发证单位。
+- 预览和下载按钮放在卡片右下方。
+
+## 表格和控件
+
+- 表头使用浅灰蓝背景。
+- 表格 hover 只做轻微背景变化。
+- 输入框和下拉框高度统一。
+- 下拉框箭头不得贴边。
+- 主要按钮使用青绿色，危险按钮使用红色。
+- 状态标签使用圆角胶囊，但尺寸克制。
+
+## 自行决策记录
+
+- 选择青绿色作为主色，因为它比蓝色更接近当前证书产品的清爽和可信气质，也不会显得像通用后台模板。
+- 没有加入大面积插画、渐变装饰或复杂动效，避免影响后台扫描效率。
+- 正式版新增全局 `design.css`，统一 Element Plus 控件和通用布局。
+- 本地验证版同步更新内联 CSS，保证本地验收看到的视觉方向与正式版一致。