saas-mbr/abacus-static-framework/.project.agents/docs/context/UIUX.md

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。