# 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.