96 lines
4.0 KiB
Markdown
96 lines
4.0 KiB
Markdown
# Button System Upgrade Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Replace demo-like ERP buttons with a semantic, icon-backed, high-craft global button system without changing business logic.
|
|
|
|
**Architecture:** Add a small pure semantic mapper for button labels, test it first, then wire it into a browser-side enhancer that decorates existing plain buttons. Keep existing page templates and API calls intact; upgrade the shared CSS and existing `ActionButton`/`AppIcon` path so new and old buttons share one visual language.
|
|
|
|
**Tech Stack:** Vue 3, Vite, plain CSS, Node test runner, existing SVG icon map.
|
|
|
|
---
|
|
|
|
### Task 1: Button Semantics
|
|
|
|
**Files:**
|
|
- Create: `frontend/src/utils/buttonSemantics.js`
|
|
- Test: `frontend/src/utils/buttonSemantics.test.js`
|
|
|
|
- [ ] **Step 1: Write failing tests for label semantics**
|
|
|
|
Create tests that assert common terse labels become explicit business actions, including `刷新` -> `刷新数据`, `查看` -> `查看详情`, `编辑` -> `编辑资料`, `删除` -> `删除记录`, `增加一行` -> `添加明细行`, `保存` -> `保存信息`.
|
|
|
|
- [ ] **Step 2: Run the semantic tests and confirm failure**
|
|
|
|
Run: `node --test frontend/src/utils/buttonSemantics.test.js`
|
|
|
|
Expected: failure because the semantic mapper does not exist yet.
|
|
|
|
- [ ] **Step 3: Implement the mapper**
|
|
|
|
Implement `resolveButtonSemantics(label, className)` returning `{ label, icon, tone, kind }` with deterministic matching by label and risk class.
|
|
|
|
- [ ] **Step 4: Run semantic tests and confirm pass**
|
|
|
|
Run: `node --test frontend/src/utils/buttonSemantics.test.js`
|
|
|
|
Expected: all tests pass.
|
|
|
|
### Task 2: Runtime Button Enhancer
|
|
|
|
**Files:**
|
|
- Create: `frontend/src/utils/buttonEnhancer.js`
|
|
- Modify: `frontend/src/App.vue`
|
|
|
|
- [ ] **Step 1: Add DOM enhancer**
|
|
|
|
Create `installButtonEnhancer()` that scans ordinary buttons after route changes and DOM mutations. It skips buttons with `no-auto-icon`, existing SVG/icon content, table mode buttons, pagination arrows, tag close buttons, and menu items where decoration would hurt usability.
|
|
|
|
- [ ] **Step 2: Decorate compatible buttons**
|
|
|
|
For compatible buttons, update terse labels, set `data-button-kind`, `data-button-tone`, and prepend an SVG icon from the semantic mapper. Preserve click handlers, disabled state, type, and existing classes.
|
|
|
|
- [ ] **Step 3: Install once in `App.vue`**
|
|
|
|
Call the enhancer from `onMounted` and cleanup on unmount. Re-run after route navigation using the enhancer's MutationObserver instead of touching every page.
|
|
|
|
### Task 3: Visual System
|
|
|
|
**Files:**
|
|
- Modify: `frontend/src/utils/iconMap.js`
|
|
- Modify: `frontend/src/components/ActionButton.vue`
|
|
- Modify: `frontend/src/styles/main.css`
|
|
|
|
- [ ] **Step 1: Add action icons**
|
|
|
|
Add linear Iconsax-style paths for `save`, `edit`, `delete`, `view`, `import`, `export`, `filter`, `authorize`, `check`, `reject`, `upload`, `download`, and `rowAdd`.
|
|
|
|
- [ ] **Step 2: Upgrade `ActionButton`**
|
|
|
|
Expose semantic `data-button-kind` and `data-button-tone` attributes so component buttons and auto-enhanced buttons share CSS.
|
|
|
|
- [ ] **Step 3: Rewrite button styling**
|
|
|
|
Use industrial control-console styling: tactile shadows, clear tone colors, icon chip, press motion, compact table pills, and accessible focus rings. Keep motion short and non-distracting.
|
|
|
|
### Task 4: Verification
|
|
|
|
**Files:**
|
|
- Verify: `frontend`
|
|
|
|
- [ ] **Step 1: Run semantic tests**
|
|
|
|
Run: `node --test frontend/src/utils/buttonSemantics.test.js`
|
|
|
|
- [ ] **Step 2: Run production build**
|
|
|
|
Run: `npm run build`
|
|
|
|
- [ ] **Step 3: Browser verify current page**
|
|
|
|
Open `http://127.0.0.1:5173/operation-reports` and verify `刷新` becomes `刷新数据` with an icon and tactile styling. Check the table mode switch remains unchanged.
|
|
|
|
- [ ] **Step 4: Browser verify a CRUD page**
|
|
|
|
Open a typical master-data page and verify create/edit/delete/detail buttons receive explicit labels and appropriate tone.
|