# 政务服务门户设计规范

本文档定义 dsh-gov-portal 的界面语言，供维护者扩展页面和调整样式时参考。

## 设计原则

1. 以清晰、稳定、高密度的信息呈现为优先目标。
2. 页面采用白色内容区、深蓝色导航和红色重点提示的政务服务门户视觉语言。
3. 模块容器优先使用直角和 `1px solid` 边框；小型控件圆角不超过 `6px`。
4. 表格、表单和通知列表应保证长文本换行、状态可辨识和键盘可操作。
5. 使用系统中文字体栈，正文与辅助信息保持清楚的层级关系。

## 视觉令牌

| 类别 | 建议值 | 用途 |
| --- | --- | --- |
| 主蓝 | `#1879d2` | 导航、主操作、链接强调 |
| 深蓝 | `#015293` | 标题、导航渐变终点、分隔线 |
| 主红 | `#e4393c` | 印章、重要通知、危险操作 |
| 正文 | `#333333` | 正文与默认链接 |
| 次要文字 | `#666666` | 描述、辅助说明 |
| 弱化文字 | `#999999` | 时间、状态和占位信息 |
| 页面背景 | `#ffffff` | 主要内容区域 |
| 浅灰背景 | `#f7f7f7` | 表头、次级区域 |
| 常规边框 | `#dddddd` | 表格、表单和模块分隔 |

## 页面结构

推荐的页面结构由以下部分构成：

1. 顶部工具条：高度紧凑，承载全局辅助操作、时间或状态信息。
2. 主头部：展示平台标识、名称和全局查询入口。
3. 主导航：使用稳定的一级栏目，当前栏目应具有明确状态。
4. 内容区：以标题条、数据表、通知列表、表单和操作区组织业务信息。
5. 页脚：放置平台说明、运行信息和必要链接。

## 组件规则

### 标题与列表

- 一级栏目标题使用深蓝色并通过底线或色块与内容区分。
- 列表项采用明确的行高和分隔线，日期或状态放在右侧辅助区域。
- 重要通知使用红色线条或标签，不使用大面积高饱和背景。

### 表格与表单

- 表头使用浅灰背景，单元格保留清晰边框。
- 常规单元格内边距使用 `0.7rem` 左右，长文本允许自然换行。
- 输入框保持可见边界和稳定高度，焦点态使用主蓝色边框。
- 主要操作按钮使用蓝色，危险操作使用红色，次要操作使用中性灰。

### 响应与状态

- 成功、处理中、失败和需要审批的状态必须同时以文字和颜色表达。
- 动态信息区应预留稳定尺寸，避免加载和流式输出导致布局跳动。
- 弹窗不得遮挡固定顶部工具条，关闭和确认操作必须始终可见。

## 实现约定

- 样式变量集中维护在 `public/css/gov.css` 的 `:root` 中。
- 主题覆盖使用变量，不为单一页面复制整套颜色规则。
- 页面布局优先使用 Grid 或 Flexbox，并对窄屏宽度设置合理的换行与最小尺寸。
- 不依赖外部字体、样式框架或远程图片资源，以保持离线可用性。