4.0 KiB
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.