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

Pull Bank Info Upload Button Hit Area Frontend Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Make the pull-bank-info dialog file selector hit area match the visible trigger and improve the field layout without changing upload behavior.

Architecture: Keep the existing el-upload parsing flow and API calls, but replace the current loose inline upload layout with a dedicated upload panel inside the dialog. Add a focused unit test that asserts the new dialog structure and class hooks, then update scoped styles so the button-style uploader no longer inherits the full-width drag-upload hit area behavior.

Tech Stack: Vue 2, Element UI 2, scoped SCSS, Node-based source assertions in ruoyi-ui/tests/unit

---

Task 1: Add a regression test for the dialog structure

Files:

• Create: ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js
• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue

Step 1: Write the failing test

Add a source-based unit test that checks all of the following in the pull-bank-info dialog:

• the dialog contains a dedicated pull-bank-info-form container
• the file import area uses a pull-bank-file-panel
• the upload trigger uses a pull-bank-file-upload
• the template includes a visible selected-file summary block

Step 2: Run test to verify it fails

Run:

node ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js

Expected: FAIL because the current dialog does not contain the new structure/classes.

Task 2: Restructure the dialog template with minimal logic changes

Files:

• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
• Test: ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js

Step 1: Update the dialog markup

Keep the existing fields and event handlers, but:

• wrap the dialog form with pull-bank-info-form
• split the dialog into clearer sections
• move the upload button and helper text into pull-bank-file-panel
• add a selected-file summary row bound to idCardFileList
• keep handleIdCardFileChange, handleIdCardFileRemove, and parsingIdCardFile intact

Step 2: Run the new test

Run:

node ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js

Expected: PASS

Task 3: Adjust scoped styles so hit area and layout align

Files:

• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
• Test: ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js

Step 1: Add focused dialog styles

Add SCSS for:

• pull-bank-info-form
• pull-bank-file-panel
• pull-bank-file-upload
• selected-id-card-file
• pull-bank-range-picker

Use these styles to make the trigger area content-sized instead of full-row clickable, and improve spacing/alignment for desktop and mobile.

Step 2: Keep drag-upload dialogs unchanged

Retain the existing full-width dragger behavior for upload-area and batch-upload-area.

Step 3: Run regression tests

Run:

node ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js
node ruoyi-ui/tests/unit/upload-data-batch-upload.test.js
node ruoyi-ui/tests/unit/upload-data-file-list-settings.test.js

Expected: all tests pass.

Task 4: Run final verification

Files:

• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue

Step 1: Run production build verification

Run:

npm run build:prod

Workdir: ruoyi-ui

Expected: build succeeds without introducing Vue template or style compilation errors.