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