huangting/hotel-biz-h5
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
56ce6d9a76ae54211344e7bc9036e2ae181d206f
hotel-biz-h5/docs/superpowers/plans/2026-06-30-page-optimization.md
andy 4870b6761e bug修复迭代
2026-07-01 12:54:49 +08:00

2.3 KiB
Raw Blame History

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.