# H5 Page Optimization 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:** Upgrade the current H5 business pages with a clearer, more polished mobile operations UI.

**Architecture:** Keep the Vue/Vant app structure intact. Centralize the broad visual improvements in `src/styles/main.css`, then add scoped page-level polish where the page has unique layout needs.

**Tech Stack:** Vue 3, Vite, Vant 4, lucide-vue-next, vanilla CSS.

---

### Task 1: Global Tokens And Components

**Files:**
- Modify: `src/styles/main.css`

- [ ] Add primitive, semantic, and component tokens while preserving existing variables such as `--app-bg`, `--surface`, `--primary`, and `--radius`.
- [ ] Improve page shell, nav, panels, list cards, quick actions, buttons, tabs, fields, empty states, and fixed action bars.
- [ ] Add tactile `:active`, keyboard focus, reduced-motion, and narrow-phone rules.

### Task 2: High-Frequency Page Polish

**Files:**
- Modify: `src/views/home/HomeView.vue`
- Modify: `src/views/orders/OrderListView.vue`
- Modify: `src/views/events/EventListView.vue`
- Modify: `src/views/verify/VerifyView.vue`

- [ ] Make the home hero feel like a useful shift summary and make quick actions easier to scan.
- [ ] Improve list loading, cards, search/tabs spacing, and empty states for orders/events.
- [ ] Strengthen the scan panel visual hierarchy and feedback.

### Task 3: Detail, Confirm, Result, Account, And Login Polish

**Files:**
- Modify: `src/views/orders/OrderDetailView.vue`
- Modify: `src/views/verify/VerifyConfirmView.vue`
- Modify: `src/views/verify/VerifyResultView.vue`
- Modify: `src/views/events/EventCreateView.vue`
- Modify: `src/views/mine/MineView.vue`
- Modify: `src/views/login/LoginView.vue`

- [ ] Improve detail and confirm hero sections, form panels, result panels, and account profile surface.
- [ ] Keep all existing business logic unchanged.

### Task 4: Verification

**Files:**
- No source files expected.

- [ ] Run `yarn build:prod`.
- [ ] Start `yarn dev --host 127.0.0.1` or equivalent.
- [ ] Inspect representative pages in a mobile viewport and fix visible layout issues.