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`

参考点：

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