114 lines
3.6 KiB
Markdown
114 lines
3.6 KiB
Markdown
# 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.
|