69 lines
3.4 KiB
Markdown
69 lines
3.4 KiB
Markdown
# abacus-static-framework — UI/UX 设计指南
|
||
|
||
> 视觉与交互细节的权威（与 `PRD.md` 并列上游）。视觉/交互改动先改本文，再让派生实现对齐。
|
||
> 本文面向业务子系统开发：**页面模式与标准组件是唯一推荐路径**（共享规范 `docs/coding-standards.md §4.4~4.7` 为强制约束，此处给设计视角的说明）。
|
||
|
||
## 1. 设计原则（优先级递减）
|
||
|
||
1. **复用优先**：先标准组件（`framework/components/standard`），再 vxe-table（仅表格），再 Element Plus，最后才自研。
|
||
2. **模式一致**：查询+列表页用同一套骨架（AbQueryForm + vxe-grid），让所有子系统页面观感统一。
|
||
3. **配置驱动**：表单/查询表单用 fieldConfigs 配置式，少写模板代码。
|
||
4. **表格是主角**：业务数据以表格呈现，列字段名与后端响应字段对齐。
|
||
|
||
## 2. 视觉身份
|
||
|
||
- 无独立品牌视觉；跟随公司菜单框架既有主题；不引入自定义品牌色（见 §3 语义色）。
|
||
|
||
## 3. 色板与字体
|
||
|
||
- 色板：使用 Element Plus 主题变量与 `framework/styles/variables.scss` 中定义的语义变量（禁止在业务内散落硬编码 hex）。
|
||
- 字体：沿用框架全局样式；字号层级用 Element Plus 默认（14px 正文 / 标题层级）。
|
||
|
||
## 4. 间距与栅格
|
||
|
||
- 页面骨架固定：`<Title>` 页头 → `.form-container`（查询区，AbQueryForm）→ `.table-container`（vxe-grid）；间距沿用框架示例（sms 示例页面）的既有值。
|
||
- 弹窗内表单用 AbForm 的布局配置（默认 label 左对齐）。
|
||
|
||
## 5. 动效与触觉
|
||
|
||
- 无自定义动效需求；使用 Element Plus 默认过渡；表格行编辑为双击进入（`editConfig trigger:'dblclick', mode:'row'`）。
|
||
|
||
## 6. 状态系统
|
||
|
||
- 空态：vxe-grid 空数据默认展示；查询无结果提示由表格空态承担。
|
||
- 加载：`loading` 状态由 vxe-grid/按钮统一管理。
|
||
- 错误：接口错误由 request.ts 统一弹窗（业务 9xx / 系统 5xx），页面不重复提示。
|
||
- 成功：新增/保存成功用 `ElMessage.success`（框架既有约定）。
|
||
|
||
## 7. 屏幕规范
|
||
|
||
### 7.1 查询+列表页（标准模式）
|
||
```
|
||
Title 页头
|
||
AbQueryForm（fieldConfigs: input/daterange/select/radio + slot 自定义）
|
||
vxe-grid（gridDefaultProps + proxyConfig.ajax.query；clientPage 按数据量选）
|
||
el-dialog（新增/编辑，AbForm） / el-drawer（详情/日志）
|
||
```
|
||
### 7.2 可编辑表格页
|
||
- `editConfig: { trigger: 'dblclick', mode: 'row' }` + `editRender: { name: 'input' }` + `@edit-closed` 保存（参考 `views/config/business/index.vue`）。
|
||
### 7.3 容器页（List/Detail 切换）
|
||
- 容器 `index.vue` 用 `:is` 动态切换 `list.vue` / `detail.vue`（参考 `views/document/interfacedoc/`）。
|
||
|
||
## 8. 可访问性
|
||
|
||
- 表单字段 label 必填；操作按钮带语义化文字；表格 `seq` 序号列保留。
|
||
|
||
## 9. 文案语气
|
||
|
||
- 按钮：动词短语（新增/编辑/删除/导出/查询/重置）。
|
||
- 错误提示：简短、可直接行动的句子（由后端 message 提供，前端原样展示）。
|
||
|
||
## 10. 性能预算
|
||
|
||
- 列表默认服务端分页（`clientPage:false`），避免一次拉全量；大数据量禁客户端分页。
|
||
- 查询表单默认收起多余条件（按需扩展）。
|
||
|
||
## 11. 视觉资产清单
|
||
|
||
- 一般业务无需产出视觉资产；如确需图标，放入 `src/assets/` 由构建处理（或 `public/` 保持原名），命名 kebab-case。
|