Files
ccdi/docs/plans/2026-03-12-pull-bank-info-upload-button-hit-area-design.md

1.2 KiB

拉取本行信息上传按钮交互区域修复设计

背景

“上传信息”页面的“拉取本行信息”弹窗中,上传文件按钮的视觉大小与实际交互区域不一致,造成点击范围异常偏大的体验问题。

目标

  • 让“选择文件”按钮的可点击区域与视觉边界一致
  • 保持拖拽上传弹窗仍为全宽拖拽区域
  • 不改动上传逻辑与接口

非目标

  • 不调整上传流程与校验逻辑
  • 不新增后端接口或数据结构

方案概述

将对话框内 el-upload 的通用“全宽”样式收窄到拖拽上传区域(如 .upload-area.batch-upload-area),避免对按钮型上传产生影响。必要时仅对“拉取本行信息”弹窗维持默认按钮布局。

影响范围

  • 前端样式:UploadData.vuescoped 样式块
  • 组件结构与逻辑保持不变

风险与回归验证

  • 风险:拖拽上传区域样式变形
  • 回归验证:
    • 打开“拉取本行信息”弹窗,确认按钮点击区域与视觉一致
    • 打开“上传数据/批量上传”弹窗,确认拖拽区域仍为全宽

验收标准

  • “拉取本行信息”弹窗中按钮交互区域正常
  • 拖拽上传弹窗布局无回归