55 lines
2.3 KiB
Markdown
55 lines
2.3 KiB
Markdown
# 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.
|