jsowell-charger-web/docs/financial-account-user-info-redesign-plan.md

开户信息页面重构实施说明（方案 A，历史版本）

说明：本文档记录的是上一轮“基于旧组件做方案 A 微调”的实施思路，现已不再作为当前落地方向。当前实际实现已切换为“新页面重做”，请优先参考 docs/financial-account-user-info-rebuild.md。

目标

本次针对财务中心开户信息页面做 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

参考点：

• 卡片头层级
• 标签样式
• 信息模块留白
• 页面区块化表达