update

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`
+
+参考点：
+
+- 卡片头层级
+- 标签样式
+- 信息模块留白
+- 页面区块化表达