diff --git a/.gitignore b/.gitignore index ff48835bb..3f8d07b77 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,4 @@ build/ .vscode/ .mvn/ /.claude/ +.ace-tool/ diff --git a/docs/financial-account-user-info-redesign-options.md b/docs/financial-account-user-info-redesign-options.md new file mode 100644 index 000000000..678b21a2b --- /dev/null +++ b/docs/financial-account-user-info-redesign-options.md @@ -0,0 +1,137 @@ +# 开户信息页面改造方案对比(A / B) + +## 当前决策 + +当前优先实施 **方案 A:实体卡片式重构**。 + +原因: + +- 改动集中在模板结构与样式层 +- 不需要改业务逻辑 +- 不需要重构数据流 +- 更适合当前已有组件 `adapayMember.vue` +- 回滚成本低 + +如果方案 A 实施后仍无法满足视觉与使用体验要求,再按 **方案 B** 重做。 + +--- + +## 方案 A:实体卡片式重构 + +### 核心思路 + +围绕两个业务实体组织页面: + +- 汇付用户 +- 结算账户 + +并把操作动作拆到独立操作卡中。 + +### 页面结构 + +- 顶部说明区 +- 汇付用户信息卡 +- 用户操作卡 +- 结算账户信息卡 +- 结算账户操作卡 + +### 优点 + +- 改造风险低 +- 适合当前组件结构 +- 字段迁移成本低 +- 操作区分离明确 +- 易于在现有样式基础上快速落地 + +### 缺点 + +- 仍属于传统后台卡片布局 +- 如果后续字段继续增加,页面长度可能上升 +- 状态导向能力有限,不如更激进的重构方案强 + +--- + +## 方案 B:顶部摘要 + 双栏详情重做 + +### 核心思路 + +将页面重构为更强的现代后台详情页: + +- 顶部摘要头部展示关键身份与状态 +- 中部左右双栏分别展示汇付用户与结算账户详情 +- 右侧或底部放独立操作面板 + +### 页面结构 + +- 顶部主信息区 + - 页面标题 + - 汇付会员ID + - 用户类型 + - 审核状态 + - 结算账户状态 + - 主操作入口 + +- 左栏 + - 汇付用户详情 + +- 右栏 + - 结算账户详情 + +- 底部/侧栏 + - 全部操作按钮区 + +### 优点 + +- 首屏状态感更强 +- 信息结构更现代 +- 更适合扩展更多模块信息 +- 用户一眼就能看到关键状态与主操作 + +### 缺点 + +- 模板重排幅度更大 +- 字段映射更复杂 +- 联动验证成本更高 +- 对当前组件结构侵入更深 + +--- + +## A / B 对比 + +| 维度 | 方案 A | 方案 B | +|---|---|---| +| 改造成本 | 低 | 中高 | +| 对现有逻辑侵入度 | 低 | 中 | +| 实施速度 | 快 | 较慢 | +| 风险 | 低 | 中 | +| 视觉提升幅度 | 中高 | 高 | +| 首屏状态表达 | 中 | 高 | +| 适配当前组件 | 高 | 中 | +| 后续扩展性 | 中 | 高 | +| 回滚成本 | 低 | 中 | + +--- + +## 何时从 A 切换到 B + +如果方案 A 上线评审或联调后,出现以下任一情况,则启动方案 B 评估: + +1. 首屏仍然不能快速识别当前开户状态 +2. 主要操作按钮仍然不够聚焦,用户需要反复寻找 +3. 汇付用户信息与结算账户信息虽然分卡,但仍缺少清晰主次 +4. 业务方反馈页面“只是换皮”,信息查找效率没有明显改善 +5. 新增字段后,方案 A 的卡片分组持续失衡 +6. 页面长度明显增加,影响查看效率 + +## 切换建议 + +- 如果只是配色、间距、卡片层级不满意,继续微调方案 A +- 如果是信息架构本身无法满足需求,不再继续修补 A,直接按方案 B 重做 + +--- + +## 本次边界 + +当前版本只落地方案 A,不直接实现方案 B。 + +方案 B 仅作为备用重做方向保留,便于后续快速切换。 \ No newline at end of file diff --git a/docs/financial-account-user-info-redesign-plan.md b/docs/financial-account-user-info-redesign-plan.md new file mode 100644 index 000000000..9970e6dab --- /dev/null +++ b/docs/financial-account-user-info-redesign-plan.md @@ -0,0 +1,102 @@ +# 开户信息页面重构实施说明(方案 A) + +## 目标 + +本次针对财务中心开户信息页面做 UI 优化,保持原有字段、按钮、接口和提交逻辑不变,仅调整页面结构与视觉表现。 + +核心目标: + +- 保留全部字段展示 +- 保留所有操作入口 +- 明确信息展示区与操作区分离 +- 提升页面层次感、可读性与后台质感 +- 降低改造风险,优先复用现有组件逻辑 + +## 实施范围 + +涉及文件: + +- `jsowell-charge-ui/src/views/pile/merchant/components/adapayMember.vue` +- `jsowell-charge-ui/src/views/financial/accountUserInfo.vue`(本次仅作为壳页,不调整核心逻辑) + +## 方案 A:实体卡片式重构 + +### 页面结构 + +页面按业务实体拆成 4 个清晰区域: + +1. 页面顶部说明区 + - 页面标题 + - 简短说明文案 + - 刷新与查询快捷操作 + +2. 汇付用户信息区 + - 顶部状态标签 + - 汇付会员ID / 用户类型 / 结算账户状态 / 删除状态摘要 + - 完整的个人或企业资料信息 + - 审核说明与删除提示保留 + +3. 用户操作区 + - 新增个人用户 + - 新增企业用户 + - 修改用户信息 + - 删除汇付用户 + +4. 结算账户信息与操作区 + - 独立展示结算账户详情 + - 独立展示创建、查询、删除结算账户按钮 + +### 视觉策略 + +- 顶部使用轻量渐变信息头,强化“开户信息”主视觉 +- 信息区采用卡片 + 子卡片层级 +- 操作区采用侧栏卡片,强调“动作”与“数据”分离 +- 空状态增加引导文案 +- 弹窗表单增加分段标题,提高可读性 + +## 保持不变的内容 + +以下内容本次不改: + +- API 请求与返回结构 +- 表单字段本身 +- 表单校验规则 +- 上传逻辑与附件结构 +- 按钮点击方法 +- 按钮显隐/禁用逻辑 +- 个人/企业两类用户逻辑 +- 结算账户创建与删除逻辑 + +## 验收标准 + +1. 页面上信息展示与操作按钮必须明显分开 +2. 个人 / 企业 / 结算账户字段不得遗漏 +3. 无汇付用户、有汇付用户、无结算账户、有结算账户四类场景都能正常展示 +4. 所有按钮行为与改造前一致 +5. 弹窗中的字段、附件上传和校验不受影响 + +## 回归检查清单 + +- [ ] 无汇付用户时空状态与新增入口正常 +- [ ] 个人用户信息字段完整展示 +- [ ] 企业用户信息字段完整展示 +- [ ] 审核状态与审核说明展示正常 +- [ ] 删除提示展示正常 +- [ ] 结算账户详情字段完整展示 +- [ ] 新增/修改/删除用户按钮逻辑正常 +- [ ] 创建/查询/删除结算账户按钮逻辑正常 +- [ ] 企业用户附件上传流程正常 +- [ ] 弹窗表单校验正常 + +## 设计参考 + +主要参考页面: + +- `jsowell-charge-ui/src/views/member/info/components/MemberInfo.vue` + +参考点: + +- 卡片头层级 +- 标签样式 +- 信息模块留白 +- 页面区块化表达