chore(frontend): 落地 ADS 治理体系并收录前端底座基线代码

2026-08-19 14:39:02 +08:00
parent 775e075495
commit 1f84456421
177 changed files with 18574 additions and 0 deletions
@@ -0,0 +1,68 @@
+# 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。