优化拉取本行信息弹窗上传交互

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

@@ -0,0 +1,40 @@
+# Pull Bank Info Upload Button Hit Area Backend Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Confirm this UI optimization does not require backend changes and document the verification boundary.
+
+**Architecture:** The issue is caused by the frontend dialog structure and scoped styles in the upload page. Backend APIs, request payloads, and parsing logic remain unchanged, so this plan only records the no-op backend conclusion and the checks needed to avoid accidental interface regressions.
+
+**Tech Stack:** Java 21, Spring Boot 3, Maven, existing `ccdi-project` upload APIs
+
+---
+
+### Task 1: Verify backend impact is zero
+
+**Files:**
+- Review: `docs/plans/2026-03-12-pull-bank-info-upload-button-hit-area-design.md`
+- Review: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/controller/`
+- Review: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/`
+
+**Step 1: Confirm the bug scope**
+
+Check that the reported problem is limited to the frontend dialog button hit area and layout, not request construction or backend response handling.
+
+**Step 2: Verify no API contract changes are needed**
+
+Review the existing pull-bank-info request fields and confirm the dialog still submits the same `projectId`, `idCards`, `startDate`, and `endDate`.
+
+**Step 3: Keep backend code unchanged**
+
+Do not modify controller, service, mapper, or DTO classes for this task.
+
+**Step 4: Run targeted regression verification if frontend payload changes are suspected**
+
+Run only if implementation unexpectedly touches request assembly:
+
+```bash
+mvn test -Dtest=CcdiFileUploadServiceImplTest
+```
+
+Expected: related backend tests pass and no interface behavior changes are introduced.

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

@@ -0,0 +1,113 @@
+# 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:
+
+```bash
+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:
+
+```bash
+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:
+
+```bash
+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:
+
+```bash
+npm run build:prod
+```
+
+Workdir: `ruoyi-ui`
+
+Expected: build succeeds without introducing Vue template or style compilation errors.