From d2a41dffe94437f9759781e811f7a38035203783 Mon Sep 17 00:00:00 2001
From: brother7 <7brother7@gmail.com>
Date: Tue, 30 Jun 2026 15:20:34 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=93=E5=8C=85?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production | 4 ++--
 env.d.ts        | 1 +
 vite.config.ts  | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.env.production b/.env.production
index bc2a177..05a6cbc 100644
--- a/.env.production
+++ b/.env.production
@@ -1,7 +1,7 @@
 VITE_USE_MOCK=false
+VITE_APP_BASE=/hotel-staff-h5/
 VITE_PROXY_TARGET=
-#VITE_API_BASE_URL=https://biz.nianxx.cn/
-VITE_API_BASE_URL=
+VITE_API_BASE_URL=https://biz.nianxx.cn
 VITE_AUTH_BASE=/auth
 VITE_ADMIN_BASE=/admin
 VITE_STAFF_BASE=/hotelStaff
diff --git a/env.d.ts b/env.d.ts
index 64ad23a..b69db06 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_USE_MOCK?: string
+  readonly VITE_APP_BASE?: string
   readonly VITE_PROXY_TARGET?: string
   readonly VITE_API_BASE_URL?: string
   readonly VITE_AUTH_BASE?: string
diff --git a/vite.config.ts b/vite.config.ts
index 6feb9f8..8149ec3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,8 +5,10 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const proxyTarget = env.VITE_PROXY_TARGET || 'http://localhost:9999'
+  const base = env.VITE_APP_BASE || '/'
 
   return {
+    base,
     plugins: [vue()],
     resolve: {
       alias: {
-- 
2.43.7


From 4919a311c32d321708122f09079e3e477ba2eeb7 Mon Sep 17 00:00:00 2001
From: andy <andymtt@163.com>
Date: Tue, 30 Jun 2026 17:25:52 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E6=94=B9=E9=80=A0=E7=9F=AD=E4=BF=A1?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E5=9B=BE=E5=BD=A2=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts               | 24 ++++++++--
 src/api/mock.ts               |  6 ++-
 src/views/login/LoginView.vue | 84 +++++++++++++++++++++++++++++++++--
 3 files changed, 105 insertions(+), 9 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index c4f247a..13fff33 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -12,17 +12,35 @@ export interface OrganizationMemberInfo {
   memberRoleId?: string
 }
 
+export interface SendMobileCodePayload {
+  phone: string
+  imageRandomStr: string
+  imageCode: string
+}
+
 const basicAuth = () => {
   const raw = `${env.clientId}:${env.clientSecret}`
   return `Basic ${window.btoa(raw)}`
 }
 
-export const sendMobileCode = async (phone: string) => {
-  if (env.useMock) return mockApi.sendMobileCode(phone)
-  return await http.get<boolean>(joinUrl(env.adminBase, 'platformUser/sendMobileCode', phone), {
+export const getImageCodeUrl = (imageRandomStr: string) => {
+  const params = new URLSearchParams({
+    randomStr: imageRandomStr,
+    t: String(Date.now())
+  })
+  return `${joinUrl(env.authBase, 'code/image')}?${params.toString()}`
+}
+
+export const sendMobileCode = async (payload: SendMobileCodePayload) => {
+  if (env.useMock) return mockApi.sendMobileCode(payload)
+  return await http.get<boolean>(joinUrl(env.adminBase, 'platformUser/sendMobileCode', payload.phone), {
     headers: {
       clientId: env.clientId,
       clientConfigId: env.clientConfigId
+    },
+    params: {
+      imageRandomStr: payload.imageRandomStr,
+      imageCode: payload.imageCode
     }
   }) as unknown as boolean
 }
diff --git a/src/api/mock.ts b/src/api/mock.ts
index 80dc465..6aa8491 100644
--- a/src/api/mock.ts
+++ b/src/api/mock.ts
@@ -129,9 +129,11 @@ const page = <T>(records: T[], pageNum: number, pageSize: number): PageResponse<
 }
 
 export const mockApi = {
-  async sendMobileCode(phone: string) {
+  async sendMobileCode(payload: { phone: string; imageRandomStr?: string; imageCode?: string }) {
     await wait()
-    return { data: true, msg: phone ? '5678nianxx' : '请输入手机号' }
+    if (!payload.phone) return { data: false, msg: '请输入手机号' }
+    if (!payload.imageRandomStr || !payload.imageCode) return { data: false, msg: '请输入图形验证码' }
+    return { data: true, msg: '5678nianxx' }
   },
 
   async loginByMobile(phone: string): Promise<TokenResponse> {
diff --git a/src/views/login/LoginView.vue b/src/views/login/LoginView.vue
index 20947c0..c120c27 100644
--- a/src/views/login/LoginView.vue
+++ b/src/views/login/LoginView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { BadgeCheck, Phone, ShieldCheck } from 'lucide-vue-next'
-import { sendMobileCode } from '@/api/auth'
+import { getImageCodeUrl, sendMobileCode } from '@/api/auth'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
@@ -11,6 +11,9 @@ const route = useRoute()
 const auth = useAuthStore()
 
 const phone = ref('')
+const imageCode = ref('')
+const imageRandomStr = ref('')
+const imageCodeUrl = ref('')
 const code = ref('')
 const loading = ref(false)
 const sending = ref(false)
@@ -18,6 +21,20 @@ const seconds = ref(0)
 
 let timer: number | undefined
 
+const createImageRandomStr = () => {
+  if (window.crypto?.randomUUID) return window.crypto.randomUUID()
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) => {
+    const value = Math.floor(Math.random() * 16)
+    return (char === 'x' ? value : (value & 0x3) | 0x8).toString(16)
+  })
+}
+
+const refreshImageCode = () => {
+  imageRandomStr.value = createImageRandomStr()
+  imageCode.value = ''
+  imageCodeUrl.value = getImageCodeUrl(imageRandomStr.value)
+}
+
 const canSend = computed(() => /^1\d{10}$/.test(phone.value) && seconds.value === 0)
 
 const startCountdown = () => {
@@ -32,21 +49,35 @@ const startCountdown = () => {
 }
 
 const handleSend = async () => {
-  if (!canSend.value) {
+  if (!/^1\d{10}$/.test(phone.value)) {
     showToast('请输入正确手机号')
     return
   }
+  if (!imageCode.value.trim()) {
+    showToast('请输入图形验证码')
+    return
+  }
   sending.value = true
   try {
-    const result = await sendMobileCode(phone.value)
+    const result = await sendMobileCode({
+      phone: phone.value,
+      imageRandomStr: imageRandomStr.value,
+      imageCode: imageCode.value.trim()
+    })
     const message = typeof result === 'object' && result && 'msg' in result ? result.msg : ''
     if (message) {
       code.value = String(message)
       showToast(`验证码：${message}`)
+    } else if (result === false) {
+      throw new Error('验证码发送失败')
     } else {
       showToast('验证码已发送')
     }
     startCountdown()
+    refreshImageCode()
+  } catch (error) {
+    showToast(error instanceof Error ? error.message : '验证码发送失败')
+    refreshImageCode()
   } finally {
     sending.value = false
   }
@@ -72,6 +103,8 @@ const handleLogin = async () => {
     loading.value = false
   }
 }
+
+onMounted(refreshImageCode)
 </script>
 
 <template>
@@ -97,6 +130,28 @@ const handleLogin = async () => {
         >
           <template #left-icon><Phone :size="18" /></template>
         </van-field>
+        <van-field
+          v-model="imageCode"
+          type="text"
+          name="imageCode"
+          maxlength="8"
+          placeholder="请输入图形验证码"
+          autocomplete="off"
+          clearable
+        >
+          <template #left-icon><ShieldCheck :size="18" /></template>
+          <template #button>
+            <button
+              class="captcha-image-button"
+              type="button"
+              aria-label="刷新图形验证码"
+              @click="refreshImageCode"
+            >
+              <img v-if="imageCodeUrl" :src="imageCodeUrl" alt="图形验证码" />
+              <span v-else>刷新</span>
+            </button>
+          </template>
+        </van-field>
         <van-field
           v-model="code"
           type="text"
@@ -227,6 +282,27 @@ const handleLogin = async () => {
   max-width: 100%;
 }
 
+.captcha-image-button {
+  display: inline-flex;
+  width: 100px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+  color: var(--primary-deep);
+}
+
+.captcha-image-button img {
+  display: block;
+  width: 100px;
+  height: 40px;
+  object-fit: cover;
+}
+
 .login-note {
   margin: 14px 0 0;
   color: var(--text-muted);
-- 
2.43.7


From 9e67339d3c112162346b7db26a1b322e6b29424f Mon Sep 17 00:00:00 2001
From: andy <andymtt@163.com>
Date: Wed, 1 Jul 2026 11:33:26 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=A0=A1=E9=AA=8C=E5=92=8C=E5=9B=BE=E5=BD=A2?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts               | 10 +++++-
 src/api/mock.ts               | 11 ++++++
 src/stores/auth.ts            |  4 +--
 src/views/login/LoginView.vue | 66 ++++++++++++++++++++++++++++-------
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 13fff33..eb49856 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -5,6 +5,7 @@ import type { TokenResponse } from '@/types/api'
 import { joinUrl } from '@/utils/url'
 
 export interface OrganizationMemberInfo {
+  userId?: string
   memberId?: string
   organizationId?: string
   memberName?: string
@@ -28,7 +29,7 @@ export const getImageCodeUrl = (imageRandomStr: string) => {
     randomStr: imageRandomStr,
     t: String(Date.now())
   })
-  return `${joinUrl(env.authBase, 'code/image')}?${params.toString()}`
+  return `${joinUrl(env.apiBase, env.authBase, 'code/image')}?${params.toString()}`
 }
 
 export const sendMobileCode = async (payload: SendMobileCodePayload) => {
@@ -72,3 +73,10 @@ export const bindUserInfoAndGetUserMemberInfoByPhone = async (phone: string) =>
     { userPhone: phone }
   ) as unknown as OrganizationMemberInfo
 }
+
+export const getBindStaffInfo = async () => {
+  if (env.useMock) return mockApi.getBindStaffInfo()
+  return await http.post<OrganizationMemberInfo>(
+    joinUrl(env.staffBase, 'user/getBindStaffInfo')
+  ) as unknown as OrganizationMemberInfo
+}
diff --git a/src/api/mock.ts b/src/api/mock.ts
index 6aa8491..d4e662e 100644
--- a/src/api/mock.ts
+++ b/src/api/mock.ts
@@ -171,6 +171,17 @@ export const mockApi = {
     }
   },
 
+  async getBindStaffInfo() {
+    await wait(180)
+    return {
+      userId: 'USER10001',
+      memberId: 'MEMBER10001',
+      organizationId: 'ORG10001',
+      memberName: '当前员工',
+      memberRoleId: 'ROLE_STAFF'
+    }
+  },
+
   async orderList(query: CommodityOrderSearch) {
     await wait()
     const keyword = query.orderId || query.contactPhone || ''
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index cfcbe11..b1f0dfe 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,7 +1,7 @@
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import {
-  bindUserInfoAndGetUserMemberInfoByPhone,
+  getBindStaffInfo,
   loginByMobile,
   type OrganizationMemberInfo
 } from '@/api/auth'
@@ -66,7 +66,7 @@ export const useAuthStore = defineStore('auth', () => {
     const payload = await loginByMobile(phone, code)
     persistToken(payload, phone)
     try {
-      const member = await bindUserInfoAndGetUserMemberInfoByPhone(phone)
+      const member = await getBindStaffInfo()
       if (!member?.organizationId || !member?.memberId) {
         throw new Error('未绑定组织，请联系管理员')
       }
diff --git a/src/views/login/LoginView.vue b/src/views/login/LoginView.vue
index c120c27..3d31dac 100644
--- a/src/views/login/LoginView.vue
+++ b/src/views/login/LoginView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { BadgeCheck, Phone, ShieldCheck } from 'lucide-vue-next'
@@ -36,6 +36,7 @@ const refreshImageCode = () => {
 }
 
 const canSend = computed(() => /^1\d{10}$/.test(phone.value) && seconds.value === 0)
+const captchaLocked = computed(() => seconds.value > 0 || sending.value)
 
 const startCountdown = () => {
   seconds.value = 60
@@ -43,7 +44,9 @@ const startCountdown = () => {
   timer = window.setInterval(() => {
     seconds.value -= 1
     if (seconds.value <= 0) {
+      seconds.value = 0
       window.clearInterval(timer)
+      refreshImageCode()
     }
   }, 1000)
 }
@@ -74,7 +77,6 @@ const handleSend = async () => {
       showToast('验证码已发送')
     }
     startCountdown()
-    refreshImageCode()
   } catch (error) {
     showToast(error instanceof Error ? error.message : '验证码发送失败')
     refreshImageCode()
@@ -105,6 +107,7 @@ const handleLogin = async () => {
 }
 
 onMounted(refreshImageCode)
+onBeforeUnmount(() => window.clearInterval(timer))
 </script>
 
 <template>
@@ -137,6 +140,7 @@ onMounted(refreshImageCode)
           maxlength="8"
           placeholder="请输入图形验证码"
           autocomplete="off"
+          :disabled="captchaLocked"
           clearable
         >
           <template #left-icon><ShieldCheck :size="18" /></template>
@@ -145,6 +149,7 @@ onMounted(refreshImageCode)
               class="captcha-image-button"
               type="button"
               aria-label="刷新图形验证码"
+              :disabled="captchaLocked"
               @click="refreshImageCode"
             >
               <img v-if="imageCodeUrl" :src="imageCodeUrl" alt="图形验证码" />
@@ -200,6 +205,7 @@ onMounted(refreshImageCode)
   overflow-x: hidden;
   place-items: center;
   background:
+    radial-gradient(circle at 18% 4%, rgba(19, 144, 111, 0.18), transparent 220px),
     linear-gradient(180deg, #dff4ec 0, rgba(246, 248, 247, 0) 44%),
     var(--app-bg);
 }
@@ -210,10 +216,11 @@ onMounted(refreshImageCode)
   min-width: 0;
   padding: 22px 16px 16px;
   overflow: hidden;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
+  border: 1px solid rgba(202, 214, 208, 0.86);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.9);
   box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
 }
 
 .login-brand {
@@ -233,7 +240,8 @@ onMounted(refreshImageCode)
   width: 54px;
   height: 54px;
   flex: 0 0 54px;
-  border-radius: var(--radius);
+  border: 1px solid rgba(19, 144, 111, 0.16);
+  border-radius: var(--panel-radius);
   background: var(--primary-soft);
   color: var(--primary-deep);
   place-items: center;
@@ -250,6 +258,7 @@ onMounted(refreshImageCode)
   margin: 0;
   color: var(--text-strong);
   font-size: 25px;
+  font-weight: 750;
   line-height: 1.2;
 }
 
@@ -261,10 +270,18 @@ onMounted(refreshImageCode)
 
 .login-form :deep(.van-cell) {
   width: 100%;
+  height: 50px;
   min-width: 0;
-  min-height: 50px;
+  padding: 0 12px;
+  align-items: center;
   border: 1px solid var(--line);
   border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.login-form :deep(.van-cell:focus-within) {
+  border-color: var(--primary);
+  box-shadow: var(--focus-ring);
 }
 
 .login-form :deep(.van-field__value),
@@ -273,8 +290,16 @@ onMounted(refreshImageCode)
   min-width: 0;
 }
 
+.login-form :deep(.van-field__value),
+.login-form :deep(.van-field__body) {
+  height: 100%;
+  align-items: center;
+}
+
 .login-form :deep(.van-field__button) {
+  display: inline-flex;
   flex: 0 0 auto;
+  align-items: center;
   padding-left: 8px;
 }
 
@@ -282,10 +307,17 @@ onMounted(refreshImageCode)
   max-width: 100%;
 }
 
+.login-form :deep(.van-field__button .van-button) {
+  min-width: 86px;
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
 .captcha-image-button {
   display: inline-flex;
-  width: 100px;
-  height: 40px;
+  width: 96px;
+  height: 32px;
   align-items: center;
   justify-content: center;
   overflow: hidden;
@@ -294,13 +326,23 @@ onMounted(refreshImageCode)
   border-radius: var(--radius);
   background: var(--surface-soft);
   color: var(--primary-deep);
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.captcha-image-button:active {
+  transform: scale(0.98);
+}
+
+.captcha-image-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.66;
 }
 
 .captcha-image-button img {
   display: block;
-  width: 100px;
-  height: 40px;
-  object-fit: cover;
+  width: 96px;
+  height: 32px;
+  object-fit: contain;
 }
 
 .login-note {
-- 
2.43.7


From 5ac547a9d585cf2be3483cd83e9e98cedc27eb79 Mon Sep 17 00:00:00 2001
From: andy <andymtt@163.com>
Date: Wed, 1 Jul 2026 12:19:40 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E9=83=A8=E7=BD=B2=E5=92=8C=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.test                            |  1 +
 nginx/default.conf.template          | 15 ++++++++
 src/api/request.ts                   | 26 ++++++++++----
 src/views/events/EventListView.vue   | 22 ++++++++++++
 src/views/login/LoginView.vue        | 10 ++++--
 src/views/mine/MineView.vue          | 38 ++++++++++++++++++--
 src/views/orders/OrderDetailView.vue | 54 +++++++++++++++++++++-------
 7 files changed, 143 insertions(+), 23 deletions(-)

diff --git a/.env.test b/.env.test
index 1ab81b8..66bcd42 100644
--- a/.env.test
+++ b/.env.test
@@ -1,4 +1,5 @@
 VITE_USE_MOCK=false
+VITE_APP_BASE=/
 VITE_PROXY_TARGET=
 # VITE_API_BASE_URL=http://8.138.234.141/ingress
 VITE_API_BASE_URL=
diff --git a/nginx/default.conf.template b/nginx/default.conf.template
index 82d0204..6d026d0 100644
--- a/nginx/default.conf.template
+++ b/nginx/default.conf.template
@@ -20,6 +20,21 @@ server {
     try_files $uri =404;
   }
 
+  location ^~ /hotel-staff-h5/assets/ {
+    rewrite ^/hotel-staff-h5/(.*)$ /$1 break;
+    expires 30d;
+    add_header Cache-Control "public, immutable";
+    try_files $uri =404;
+  }
+
+  location = /hotel-staff-h5 {
+    return 301 /hotel-staff-h5/;
+  }
+
+  location ^~ /hotel-staff-h5/ {
+    try_files $uri $uri/ /index.html;
+  }
+
   location /auth/ {
     proxy_pass ${BACKEND_GATEWAY}/auth/;
     proxy_http_version 1.1;
diff --git a/src/api/request.ts b/src/api/request.ts
index aee8942..f74d6c4 100644
--- a/src/api/request.ts
+++ b/src/api/request.ts
@@ -8,6 +8,11 @@ const http = axios.create({
   timeout: 15000
 })
 
+export type RequestError = Error & {
+  cause?: unknown
+  toastShown?: boolean
+}
+
 let isRedirectingToLogin = false
 
 const authExpiredTexts = ['请求令牌已过期', '令牌已过期', 'token已过期', 'Token已过期', 'invalid_token']
@@ -20,6 +25,13 @@ const getHeader = (headers: unknown, key: string) => {
 
 const hasBearerAuthorization = (headers: unknown) => getHeader(headers, 'Authorization').startsWith('Bearer ')
 
+const createRequestError = (message: string, cause?: unknown, toastShown = false) => {
+  const requestError = new Error(message) as RequestError
+  requestError.cause = cause
+  requestError.toastShown = toastShown
+  return requestError
+}
+
 const isAuthExpired = (status?: number, code?: unknown, message = '', hasBearerToken = false) => {
   const normalizedCode = String(code || '')
   return (
@@ -32,7 +44,7 @@ const redirectToLogin = (message: string) => {
   clearAuthStorage()
   window.dispatchEvent(new Event(AUTH_EXPIRED_EVENT))
 
-  if (isRedirectingToLogin || window.location.pathname.endsWith('/login')) return
+  if (isRedirectingToLogin || window.location.pathname.endsWith('/login')) return false
   isRedirectingToLogin = true
   showToast(message || '登录已失效，请重新登录')
 
@@ -46,6 +58,7 @@ const redirectToLogin = (message: string) => {
       }
     })
   })
+  return true
 }
 
 http.interceptors.request.use((config) => {
@@ -65,9 +78,10 @@ http.interceptors.response.use(
       }
       const message = payload.msg || payload.message || '请求失败'
       if (isAuthExpired(response.status, payload.code, message, hasBearerAuthorization(response.config.headers))) {
-        redirectToLogin(message)
+        const toastShown = redirectToLogin(message)
+        return Promise.reject(createRequestError(message, undefined, toastShown))
       }
-      return Promise.reject(new Error(message))
+      return Promise.reject(createRequestError(message))
     }
     return payload
   },
@@ -81,11 +95,11 @@ http.interceptors.response.use(
         hasBearerAuthorization(error.config?.headers)
       )
     ) {
-      redirectToLogin(message)
-      return Promise.reject(error)
+      const toastShown = redirectToLogin(message)
+      return Promise.reject(createRequestError(message, error, toastShown))
     }
     showToast(message)
-    return Promise.reject(error)
+    return Promise.reject(createRequestError(message, error, true))
   }
 )
 
diff --git a/src/views/events/EventListView.vue b/src/views/events/EventListView.vue
index 1f2a311..4ca1d36 100644
--- a/src/views/events/EventListView.vue
+++ b/src/views/events/EventListView.vue
@@ -53,6 +53,7 @@ onMounted(() => loadEvents(true))
       <div>
         <p class="page-kicker">事件管理</p>
         <h1 class="page-title">事件列表</h1>
+        <p class="page-subtitle">查看门店通知、弹窗提醒和正在生效的运营事件。</p>
       </div>
       <van-button type="primary" size="small" @click="router.push('/events/create')">
         <template #icon><Plus :size="16" /></template>
@@ -96,6 +97,9 @@ onMounted(() => loadEvents(true))
             </div>
           </article>
         </div>
+        <div v-else-if="loading" class="list-skeleton">
+          <van-skeleton v-for="item in 3" :key="item" title :row="4" />
+        </div>
         <div v-else-if="!loading" class="empty-state">
           <Megaphone :size="30" />
           <div>暂无事件</div>
@@ -117,10 +121,24 @@ onMounted(() => loadEvents(true))
   padding-top: 12px;
 }
 
+.list-skeleton {
+  display: grid;
+  gap: 10px;
+  padding-top: 12px;
+}
+
+.list-skeleton :deep(.van-skeleton) {
+  padding: 13px;
+  border: 1px solid rgba(202, 214, 208, 0.82);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.62);
+}
+
 .event-card__media {
   height: 124px;
   overflow: hidden;
   margin-bottom: 10px;
+  border: 1px solid rgba(221, 230, 225, 0.9);
   border-radius: var(--radius);
   background: var(--surface-soft);
 }
@@ -133,10 +151,14 @@ onMounted(() => loadEvents(true))
 }
 
 .event-desc {
+  min-width: 0;
   margin: 10px 0;
   color: var(--text-main);
   font-size: 14px;
   line-height: 1.55;
+  overflow-wrap: anywhere;
+  white-space: normal;
+  word-break: break-word;
 }
 
 .event-status-row {
diff --git a/src/views/login/LoginView.vue b/src/views/login/LoginView.vue
index 3d31dac..ff5e935 100644
--- a/src/views/login/LoginView.vue
+++ b/src/views/login/LoginView.vue
@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 import { BadgeCheck, Phone, ShieldCheck } from 'lucide-vue-next'
 import { getImageCodeUrl, sendMobileCode } from '@/api/auth'
+import type { RequestError } from '@/api/request'
 import { useAuthStore } from '@/stores/auth'
 
 const router = useRouter()
@@ -51,6 +52,11 @@ const startCountdown = () => {
   }, 1000)
 }
 
+const showErrorToast = (error: unknown, fallback: string) => {
+  if (error && typeof error === 'object' && (error as RequestError).toastShown) return
+  showToast(error instanceof Error ? error.message : fallback)
+}
+
 const handleSend = async () => {
   if (!/^1\d{10}$/.test(phone.value)) {
     showToast('请输入正确手机号')
@@ -78,7 +84,7 @@ const handleSend = async () => {
     }
     startCountdown()
   } catch (error) {
-    showToast(error instanceof Error ? error.message : '验证码发送失败')
+    showErrorToast(error, '验证码发送失败')
     refreshImageCode()
   } finally {
     sending.value = false
@@ -100,7 +106,7 @@ const handleLogin = async () => {
     const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/home'
     await router.replace(redirect)
   } catch (error) {
-    showToast(error instanceof Error ? error.message : '登录失败')
+    showErrorToast(error, '登录失败')
   } finally {
     loading.value = false
   }
diff --git a/src/views/mine/MineView.vue b/src/views/mine/MineView.vue
index d588d92..2d33db1 100644
--- a/src/views/mine/MineView.vue
+++ b/src/views/mine/MineView.vue
@@ -29,8 +29,8 @@ const logout = () => {
         <template #icon><ShieldCheck :size="18" class="cell-icon" /></template>
       </van-cell>
       <van-cell title="组织绑定" :value="auth.hasOrganization ? '已绑定' : '未绑定'" />
-      <van-cell title="组织ID" :value="auth.memberInfo?.organizationId || '-'" />
-      <van-cell title="员工ID" :value="auth.memberInfo?.memberId || '-'" />
+      <van-cell class="id-cell" title="组织ID" :value="auth.memberInfo?.organizationId || '-'" />
+      <van-cell class="id-cell" title="员工ID" :value="auth.memberInfo?.memberId || '-'" />
       <van-cell title="租户" :value="String(auth.user?.tenantId || '-')" />
     </section>
 
@@ -48,13 +48,17 @@ const logout = () => {
   gap: 12px;
   padding: 18px 14px;
   margin-top: 18px;
+  background:
+    linear-gradient(135deg, rgba(19, 144, 111, 0.12), rgba(237, 246, 255, 0.72)),
+    var(--surface);
 }
 
 .avatar {
   display: grid;
   width: 58px;
   height: 58px;
-  border-radius: var(--radius);
+  border: 1px solid rgba(19, 144, 111, 0.16);
+  border-radius: var(--panel-radius);
   background: var(--primary-soft);
   color: var(--primary-deep);
   place-items: center;
@@ -76,6 +80,33 @@ const logout = () => {
   margin-top: 12px;
 }
 
+.mine-panel :deep(.van-cell) {
+  align-items: center;
+  background: transparent;
+}
+
+.mine-panel :deep(.van-cell__title) {
+  flex: 0 0 86px;
+  color: var(--text-main);
+  font-weight: 650;
+}
+
+.mine-panel :deep(.van-cell__value) {
+  min-width: 0;
+  color: var(--text-muted);
+  text-align: right;
+}
+
+.mine-panel :deep(.id-cell .van-cell__value) {
+  flex: 1;
+  overflow: hidden;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
 .cell-icon {
   margin: 2px 8px 0 0;
   color: var(--primary);
@@ -83,5 +114,6 @@ const logout = () => {
 
 .logout-button {
   margin-top: 14px;
+  background: rgba(255, 255, 255, 0.78);
 }
 </style>
diff --git a/src/views/orders/OrderDetailView.vue b/src/views/orders/OrderDetailView.vue
index c23ba6f..4fc03f7 100644
--- a/src/views/orders/OrderDetailView.vue
+++ b/src/views/orders/OrderDetailView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { CalendarDays, CheckCircle2, Phone, ReceiptText, UserRound } from 'lucide-vue-next'
+import { CalendarDays, CheckCircle2, ReceiptText, UserRound } from 'lucide-vue-next'
 import { fetchOrderDetail } from '@/api/orders'
 import PageNav from '@/components/PageNav.vue'
 import StatusTag from '@/components/StatusTag.vue'
@@ -82,10 +82,6 @@ onMounted(loadDetail)
           <span>订单金额</span>
           <strong>¥{{ detail.orderAmt }}</strong>
         </div>
-        <div class="detail-row">
-          <span>优惠金额</span>
-          <strong>¥{{ detail.discountAmt || '0.00' }}</strong>
-        </div>
         <div class="detail-row">
           <span>支付流水</span>
           <strong>{{ detail.paySerialNumber || '-' }}</strong>
@@ -103,11 +99,6 @@ onMounted(loadDetail)
           <span>预约时间</span>
           <strong>{{ detail.reservationDate || detail.checkInData || '无需预约' }}</strong>
         </div>
-        <div class="info-row">
-          <Phone :size="17" />
-          <span>投诉电话</span>
-          <strong>{{ detail.complaintHotline || '-' }}</strong>
-        </div>
       </section>
 
       <section class="panel detail-panel">
@@ -130,7 +121,8 @@ onMounted(loadDetail)
             <div>
               <strong>{{ record.commodityName || detail.commodityName }}</strong>
               <p v-if="record.packageName">套餐名称：{{ record.packageName }}</p>
-              <p>{{ record.createTime }} · {{ record.userName || '员工' }}</p>
+              <p>核销时间：{{ record.createTime || '-' }}</p>
+              <p>核销人：{{ record.userName || '-' }}</p>
             </div>
           </div>
         </div>
@@ -159,7 +151,10 @@ onMounted(loadDetail)
   display: grid;
   grid-template-columns: 112px minmax(0, 1fr);
   gap: 12px;
-  padding: 12px;
+  padding: 13px;
+  background:
+    linear-gradient(135deg, rgba(19, 144, 111, 0.08), rgba(237, 246, 255, 0.58)),
+    var(--surface);
 }
 
 .order-hero__content,
@@ -171,6 +166,7 @@ onMounted(loadDetail)
 .order-hero img {
   width: 112px;
   height: 112px;
+  border: 1px solid rgba(221, 230, 225, 0.9);
   border-radius: var(--radius);
   object-fit: cover;
 }
@@ -181,6 +177,7 @@ onMounted(loadDetail)
   margin: 12px 0;
   color: var(--text-strong);
   font-size: 18px;
+  font-weight: 750;
   line-height: 1.35;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -205,6 +202,16 @@ onMounted(loadDetail)
   font-size: 14px;
 }
 
+.package-row,
+.record-row {
+  padding: 10px 0;
+}
+
+.package-row + .package-row,
+.record-row + .record-row {
+  border-top: 1px solid rgba(221, 230, 225, 0.8);
+}
+
 .info-row svg,
 .package-row svg,
 .record-row svg {
@@ -234,4 +241,27 @@ onMounted(loadDetail)
   font-size: 13px;
   line-height: 1.5;
 }
+
+.empty-line {
+  padding: 12px;
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+  text-align: center;
+}
+
+@media (max-width: 360px) {
+  .order-hero {
+    grid-template-columns: 92px minmax(0, 1fr);
+  }
+
+  .order-hero img {
+    width: 92px;
+    height: 92px;
+  }
+
+  .order-hero h1 {
+    margin: 8px 0;
+    font-size: 16px;
+  }
+}
 </style>
-- 
2.43.7


From 4870b6761e1f13bd634f08eb754f703eac525ec9 Mon Sep 17 00:00:00 2001
From: andy <andymtt@163.com>
Date: Wed, 1 Jul 2026 12:54:49 +0800
Subject: [PATCH 5/5] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D=E8=BF=AD=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                               |   2 +-
 H5页面规划.md                                 |   2 +-
 README.md                                     |   6 +-
 docs/frontend-practices.md                    |  10 +-
 .../plans/2026-06-30-image-captcha-sms.md     | 892 ++++++++++++++++++
 .../plans/2026-06-30-page-optimization.md     |  54 ++
 .../2026-06-30-page-optimization-design.md    |  30 +
 index.html                                    |   2 +-
 src/components/StatusTag.vue                  |   9 +-
 src/styles/main.css                           | 354 +++++--
 src/views/events/EventCreateView.vue          |  21 +-
 src/views/home/HomeView.vue                   |  79 +-
 src/views/orders/OrderListView.vue            |  23 +-
 src/views/verify/VerifyConfirmView.vue        |  26 +-
 src/views/verify/VerifyResultView.vue         |  17 +-
 src/views/verify/VerifyView.vue               |  83 +-
 16 files changed, 1519 insertions(+), 91 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-06-30-image-captcha-sms.md
 create mode 100644 docs/superpowers/plans/2026-06-30-page-optimization.md
 create mode 100644 docs/superpowers/specs/2026-06-30-page-optimization-design.md

diff --git a/.env.production b/.env.production
index 05a6cbc..98cfa9c 100644
--- a/.env.production
+++ b/.env.production
@@ -8,4 +8,4 @@ VITE_STAFF_BASE=/hotelStaff
 VITE_HOTEL_BIZ_BASE=/hotelBiz
 VITE_CLIENT_ID=custom
 VITE_CLIENT_SECRET=custom
-VITE_CLIENT_CONFIG_ID=6
+VITE_CLIENT_CONFIG_ID=5
diff --git a/H5页面规划.md b/H5页面规划.md
index 1122b62..c982dea 100644
--- a/H5页面规划.md
+++ b/H5页面规划.md
@@ -1,4 +1,4 @@
-# 员工端 H5 页面规划
+# 核销端 H5 页面规划
 
 ## 产品定位
 
diff --git a/README.md b/README.md
index e4de802..72699ad 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# 员工端 H5
+# 核销端 H5
 
-Vue 3 + Vite + TypeScript + Vant 的移动端员工工作台。当前包含 mock 数据，可直接预览完整流程。
+Vue 3 + Vite + TypeScript + Vant 的移动端核销工作台。当前包含 mock 数据，可直接预览完整流程。
 
 ## 启动
 
@@ -33,7 +33,7 @@ cp .env.example .env.local
 - `VITE_API_BASE_URL`：打包后的接口网关地址。为空时使用当前站点同源地址。
 - `VITE_AUTH_BASE=/auth`：登录服务前缀。
 - `VITE_ADMIN_BASE=/admin`：用户与验证码服务前缀。
-- `VITE_STAFF_BASE=/hotelStaff`：员工端接口前缀。
+- `VITE_STAFF_BASE=/hotelStaff`：核销端使用的员工业务接口前缀，后端路由仍为 `/hotelStaff`。
 - `VITE_HOTEL_BIZ_BASE=/hotelBiz`：酒店业务通用接口前缀。
 - `VITE_CLIENT_ID`、`VITE_CLIENT_SECRET`、`VITE_CLIENT_CONFIG_ID`：短信登录所需客户端配置。
 
diff --git a/docs/frontend-practices.md b/docs/frontend-practices.md
index 4aeac6f..acbfb40 100644
--- a/docs/frontend-practices.md
+++ b/docs/frontend-practices.md
@@ -1,6 +1,6 @@
-# 员工端 H5 前端经验总结
+# 核销端 H5 前端经验总结
 
-这份文档记录当前员工端 H5 在页面规划、接口接入、移动端兼容、扫码核销和部署上的经验。后续改页面时，优先按这里的约定处理，避免重复踩坑。
+这份文档记录当前核销端 H5 在页面规划、接口接入、移动端兼容、扫码核销和部署上的经验。后续改页面时，优先按这里的约定处理，避免重复踩坑。
 
 ## 页面规划
 
@@ -8,21 +8,21 @@
 - 当前核心页面包括：登录、工作台、订单列表、订单详情、扫码核销、核销确认、核销结果、事件列表、发布事件、我的。
 - 工作台上的统计数据必须有明确后端依据。没有独立统计接口时，可以展示列表接口能稳定支持的指标，例如待确认订单、生效事件、近期订单、近期事件。
 - 不要把 mock 推导出的数据当成真实业务指标。比如订单表没有可直接查询的核销状态或核销时间时，不要在工作台展示“今日核销”这类指标。
-- 页面文案保持员工端视角，产品名称统一使用“员工端”。
+- 页面文案保持核销端视角，产品名称统一使用“核销端”。
 
 ## 登录与组织关系
 
 - 登录使用手机号验证码流程，登录成功后必须主动调用 `/hotelStaff/organizationMember/bindUserInfoAndGetUserMemberInfoByPhone` 获取当前用户组织关系。
 - 如果组织关系获取失败，统一提示“未绑定组织，请联系管理员”。
 - 当前不需要调用 `/user/checkUserHasBindPhone`。
-- 登录态只代表认证成功，不代表用户一定拥有员工端组织关系，业务页面入口应以后续组织关系接口成功为准。
+- 登录态只代表认证成功，不代表用户一定拥有核销端可用的员工组织关系，业务页面入口应以后续组织关系接口成功为准。
 - 接口返回“请求令牌已过期”、`401` 或 token 失效类错误时，要统一清理本地登录态并跳转 `/login`，同时带上当前页面作为 `redirect`，避免用户继续停留在失效页面。
 
 ## 接口路径
 
 - 所有真实接口都通过后端网关访问，由网关按路由转发到具体服务。
 - 本地开发使用 Vite proxy，当前开发网关是 `http://192.168.3.211:9999`。
-- 员工端接口前缀是 `/hotelStaff`，订单接口路径是 `/hotelStaff/order/...`，事件接口路径是 `/hotelStaff/event/...`。
+- 核销端使用的员工业务接口前缀是 `/hotelStaff`，订单接口路径是 `/hotelStaff/order/...`，事件接口路径是 `/hotelStaff/event/...`。
 - 登录接口走 `/auth`，验证码和用户相关接口走 `/admin`。
 - 不要在业务代码里硬编码完整网关地址，统一从环境变量和 `src/utils/env.ts` 读取。
 
diff --git a/docs/superpowers/plans/2026-06-30-image-captcha-sms.md b/docs/superpowers/plans/2026-06-30-image-captcha-sms.md
new file mode 100644
index 0000000..c1be74d
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-30-image-captcha-sms.md
@@ -0,0 +1,892 @@
+# Image Captcha SMS Protection 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:** Add a required image captcha before sending mobile SMS codes for the H5 verification app, reducing SMS abuse while keeping the existing mobile login flow.
+
+**Architecture:** Reuse the existing `pig-auth` image captcha endpoint `/auth/code/image?randomStr=...`. The H5 login page will fetch and display that image, then send `phone`, `randomStr`, and `imageCode` to a new POST SMS endpoint in `pig-upms`; the backend validates the image captcha from Redis before sending the SMS code. Keep the existing SMS rate limiting and SMS login verification unchanged.
+
+**Tech Stack:** Vue 3 + Vite + Vant + TypeScript frontend; Spring Boot Java backend; Redis via `StringRedisTemplate` / `RedisTemplate`; existing Pig response wrapper `R`.
+
+---
+
+## File Structure
+
+Frontend repository: `/Users/andy/IdeaProjects/hotel-biz-h5`
+
+- Modify `src/api/auth.ts`: add image captcha URL helper and change `sendMobileCode` to POST a structured payload.
+- Modify `src/views/login/LoginView.vue`: add image captcha state, input field, refresh behavior, and send-SMS validation.
+- Modify `src/api/mock.ts`: accept the new SMS payload shape in mock mode.
+- Optional modify `docs/frontend-practices.md`: record that SMS sending requires image captcha.
+
+Backend repository: `/Users/andy/IdeaProjects/one-feel-server`
+
+- Create `pig-upms/pig-upms-api/src/main/java/com/pig4cloud/pig/admin/api/form/SendMobileCodeForm.java`: request body for SMS code sending.
+- Modify `pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/controller/PlatformUserController.java`: add POST endpoint and validate request body.
+- Create `pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/service/impl/ImageCaptchaVerifier.java`: verify image captcha from Redis and delete it on success.
+- Modify `pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/service/impl/PlatformMobileServiceImpl.java`: keep existing send logic; do not move captcha logic here unless controller becomes too large.
+- Add focused backend tests under `pig-upms/pig-upms-biz/src/test/java/com/pig4cloud/pig/admin/service/impl/`.
+
+---
+
+### Task 1: Backend Request Form
+
+**Files:**
+- Create: `/Users/andy/IdeaProjects/one-feel-server/pig-upms/pig-upms-api/src/main/java/com/pig4cloud/pig/admin/api/form/SendMobileCodeForm.java`
+
+- [ ] **Step 1: Create the request form**
+
+```java
+package com.pig4cloud.pig.admin.api.form;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.Data;
+
+@Data
+@Schema(description = "发送手机验证码请求")
+public class SendMobileCodeForm {
+
+	@Schema(description = "手机号")
+	private String phone;
+
+	@Schema(description = "图形验证码随机标识")
+	private String randomStr;
+
+	@Schema(description = "图形验证码")
+	private String imageCode;
+
+}
+```
+
+- [ ] **Step 2: Compile API module**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-api -am -DskipTests compile
+```
+
+Expected: build succeeds with no compilation errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+git add pig-upms/pig-upms-api/src/main/java/com/pig4cloud/pig/admin/api/form/SendMobileCodeForm.java
+git commit -m "新增发送短信验证码请求表单"
+```
+
+---
+
+### Task 2: Backend Image Captcha Verifier
+
+**Files:**
+- Create: `/Users/andy/IdeaProjects/one-feel-server/pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/service/impl/ImageCaptchaVerifier.java`
+- Test: `/Users/andy/IdeaProjects/one-feel-server/pig-upms/pig-upms-biz/src/test/java/com/pig4cloud/pig/admin/service/impl/ImageCaptchaVerifierTest.java`
+
+- [ ] **Step 1: Write the failing unit test**
+
+```java
+package com.pig4cloud.pig.admin.service.impl;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.springframework.data.redis.core.StringRedisTemplate;
+import org.springframework.data.redis.core.ValueOperations;
+
+import static org.junit.jupiter.api.Assertions.assertDoesNotThrow;
+import static org.junit.jupiter.api.Assertions.assertThrows;
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+class ImageCaptchaVerifierTest {
+
+	private StringRedisTemplate redisTemplate;
+
+	private ValueOperations<String, String> valueOperations;
+
+	private ImageCaptchaVerifier verifier;
+
+	@BeforeEach
+	void setUp() {
+		redisTemplate = mock(StringRedisTemplate.class);
+		valueOperations = mock(ValueOperations.class);
+		when(redisTemplate.opsForValue()).thenReturn(valueOperations);
+		verifier = new ImageCaptchaVerifier(redisTemplate);
+	}
+
+	@Test
+	void verifyAndDeletePassesAndDeletesKeyWhenCodeMatches() {
+		when(valueOperations.get("DEFAULT_CODE_KEY:abc123")).thenReturn("8");
+
+		assertDoesNotThrow(() -> verifier.verifyAndDelete("abc123", "8"));
+
+		verify(redisTemplate).delete("DEFAULT_CODE_KEY:abc123");
+	}
+
+	@Test
+	void verifyAndDeleteRejectsBlankValues() {
+		assertThrows(IllegalArgumentException.class, () -> verifier.verifyAndDelete("", "8"));
+		assertThrows(IllegalArgumentException.class, () -> verifier.verifyAndDelete("abc123", ""));
+	}
+
+	@Test
+	void verifyAndDeleteRejectsMissingRedisCode() {
+		when(valueOperations.get("DEFAULT_CODE_KEY:abc123")).thenReturn(null);
+
+		assertThrows(IllegalArgumentException.class, () -> verifier.verifyAndDelete("abc123", "8"));
+	}
+
+	@Test
+	void verifyAndDeleteRejectsWrongCode() {
+		when(valueOperations.get("DEFAULT_CODE_KEY:abc123")).thenReturn("8");
+
+		assertThrows(IllegalArgumentException.class, () -> verifier.verifyAndDelete("abc123", "9"));
+	}
+
+}
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-biz -Dtest=ImageCaptchaVerifierTest test
+```
+
+Expected: FAIL because `ImageCaptchaVerifier` does not exist.
+
+- [ ] **Step 3: Implement the verifier**
+
+```java
+package com.pig4cloud.pig.admin.service.impl;
+
+import cn.hutool.core.util.StrUtil;
+import com.pig4cloud.pig.common.core.constant.CacheConstants;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.redis.core.StringRedisTemplate;
+import org.springframework.stereotype.Component;
+
+@Component
+@RequiredArgsConstructor
+public class ImageCaptchaVerifier {
+
+	private final StringRedisTemplate redisTemplate;
+
+	public void verifyAndDelete(String randomStr, String imageCode) {
+		if (StrUtil.hasBlank(randomStr, imageCode)) {
+			throw new IllegalArgumentException("图形验证码不能为空");
+		}
+
+		String key = CacheConstants.DEFAULT_CODE_KEY + randomStr;
+		String savedCode = redisTemplate.opsForValue().get(key);
+		if (StrUtil.isBlank(savedCode)) {
+			throw new IllegalArgumentException("图形验证码已过期，请刷新后重试");
+		}
+
+		if (!StrUtil.equalsIgnoreCase(savedCode, imageCode.trim())) {
+			throw new IllegalArgumentException("图形验证码不正确");
+		}
+
+		redisTemplate.delete(key);
+	}
+
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-biz -Dtest=ImageCaptchaVerifierTest test
+```
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+git add pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/service/impl/ImageCaptchaVerifier.java \
+  pig-upms/pig-upms-biz/src/test/java/com/pig4cloud/pig/admin/service/impl/ImageCaptchaVerifierTest.java
+git commit -m "增加图形验证码校验器"
+```
+
+---
+
+### Task 3: Backend POST SMS Endpoint
+
+**Files:**
+- Modify: `/Users/andy/IdeaProjects/one-feel-server/pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/controller/PlatformUserController.java`
+- Uses: `/Users/andy/IdeaProjects/one-feel-server/pig-upms/pig-upms-api/src/main/java/com/pig4cloud/pig/admin/api/form/SendMobileCodeForm.java`
+- Uses: `/Users/andy/IdeaProjects/one-feel-server/pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/service/impl/ImageCaptchaVerifier.java`
+
+- [ ] **Step 1: Add imports**
+
+Add these imports if absent:
+
+```java
+import cn.hutool.core.lang.Validator;
+import com.pig4cloud.pig.admin.api.form.SendMobileCodeForm;
+import com.pig4cloud.pig.admin.service.impl.ImageCaptchaVerifier;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.PostMapping;
+```
+
+- [ ] **Step 2: Inject the verifier**
+
+Find the controller fields and constructor style. Add a field:
+
+```java
+private final ImageCaptchaVerifier imageCaptchaVerifier;
+```
+
+If `PlatformUserController` uses Lombok `@RequiredArgsConstructor`, this field is enough. If it has an explicit constructor, add `ImageCaptchaVerifier imageCaptchaVerifier` to that constructor and assign it.
+
+- [ ] **Step 3: Add the new POST endpoint next to the existing GET endpoint**
+
+```java
+@PostMapping("/sendMobileCode")
+public R<Boolean> sendMobileCode(@RequestBody SendMobileCodeForm form,
+		@RequestHeader(value = SecurityConstants.CLIENT_CONFIG_ID_PARAMETER_NAME, required = false) String clientConfigId) {
+	assertValidSmsClientConfig(form.getPhone(), clientConfigId);
+	assertValidImageCode(form);
+	imageCaptchaVerifier.verifyAndDelete(form.getRandomStr(), form.getImageCode());
+	return platformMobileService.sendSmsCode(form.getPhone(), clientConfigId);
+}
+```
+
+- [ ] **Step 4: Add strict validation helpers**
+
+Add these private methods near `assertValidSmsClientConfig`:
+
+```java
+private void assertValidImageCode(SendMobileCodeForm form) {
+	if (form == null || StrUtil.hasBlank(form.getRandomStr(), form.getImageCode())) {
+		throw new CheckedException("图形验证码不能为空");
+	}
+}
+
+private void assertValidSmsClientConfig(String phone, String clientConfigId) {
+	if (StrUtil.hasBlank(phone, clientConfigId)) {
+		throw new CheckedException("手机号或clientConfigId不能为空");
+	}
+	if (!Validator.isMobile(phone)) {
+		throw new CheckedException("手机号格式不正确");
+	}
+	ClientConfigEntity clientConfig = clientConfigService.getById(clientConfigId);
+	if (Objects.isNull(clientConfig) || StrUtil.isBlank(clientConfig.getClientTenantId())) {
+		log.error("短信验证码发送失败，客户端配置不存在或未配置租户，clientConfigId={}", clientConfigId);
+		throw new CheckedException("验证码发送失败");
+	}
+	try {
+		Long.parseLong(clientConfig.getClientTenantId());
+	}
+	catch (NumberFormatException ex) {
+		log.error("短信验证码发送失败，客户端租户配置非法，clientConfigId={}, clientTenantId={}", clientConfigId,
+				clientConfig.getClientTenantId());
+		throw new CheckedException("验证码发送失败");
+	}
+}
+```
+
+Important: replace the existing `assertValidSmsClientConfig` body instead of creating a duplicate method.
+
+- [ ] **Step 5: Keep the old GET endpoint temporarily**
+
+Do not delete this method in the first rollout:
+
+```java
+@GetMapping("/sendMobileCode/{phone}")
+public R<Boolean> sendMobileCode(@PathVariable String phone,
+		@RequestHeader(value = SecurityConstants.CLIENT_CONFIG_ID_PARAMETER_NAME, required = false) String clientConfigId) {
+	assertValidSmsClientConfig(phone, clientConfigId);
+	return platformMobileService.sendSmsCode(phone, clientConfigId);
+}
+```
+
+Reason: keeping it avoids breaking other clients immediately. After H5 and other clients migrate, remove the GET endpoint in a separate cleanup.
+
+- [ ] **Step 6: Compile backend**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-biz -am -DskipTests compile
+```
+
+Expected: build succeeds with no compilation errors.
+
+- [ ] **Step 7: Commit**
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+git add pig-upms/pig-upms-biz/src/main/java/com/pig4cloud/pig/admin/controller/PlatformUserController.java
+git commit -m "短信验证码发送增加图形验证码校验"
+```
+
+---
+
+### Task 4: Frontend API Contract
+
+**Files:**
+- Modify: `/Users/andy/IdeaProjects/hotel-biz-h5/src/api/auth.ts`
+- Modify: `/Users/andy/IdeaProjects/hotel-biz-h5/src/api/mock.ts`
+
+- [ ] **Step 1: Update `src/api/auth.ts` types and helpers**
+
+Replace the existing `sendMobileCode` implementation with:
+
+```ts
+export interface SendMobileCodePayload {
+  phone: string
+  randomStr: string
+  imageCode: string
+}
+
+export const getImageCodeUrl = (randomStr: string) =>
+  joinUrl(env.authBase, 'code/image') + `?randomStr=${encodeURIComponent(randomStr)}&t=${Date.now()}`
+
+export const sendMobileCode = async (payload: SendMobileCodePayload) => {
+  if (env.useMock) return mockApi.sendMobileCode(payload)
+  return await http.post<boolean>(joinUrl(env.adminBase, 'platformUser/sendMobileCode'), payload, {
+    headers: {
+      clientId: env.clientId,
+      clientConfigId: env.clientConfigId
+    }
+  }) as unknown as boolean
+}
+```
+
+- [ ] **Step 2: Update `src/api/mock.ts`**
+
+Change the mock method signature:
+
+```ts
+async sendMobileCode(payload: { phone: string; randomStr?: string; imageCode?: string }) {
+  await wait()
+  if (!payload.phone) return { data: false, msg: '请输入手机号' }
+  if (!payload.imageCode) return { data: false, msg: '请输入图形验证码' }
+  return { data: true, msg: '5678nianxx' }
+}
+```
+
+- [ ] **Step 3: Run frontend typecheck to verify expected failures**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+yarn typecheck
+```
+
+Expected: FAIL because `LoginView.vue` still calls `sendMobileCode(phone.value)`.
+
+- [ ] **Step 4: Commit only if the expected failure is documented**
+
+Do not commit a failing frontend state. Continue to Task 5 before committing frontend changes.
+
+---
+
+### Task 5: Frontend Login Page UI
+
+**Files:**
+- Modify: `/Users/andy/IdeaProjects/hotel-biz-h5/src/views/login/LoginView.vue`
+
+- [ ] **Step 1: Update imports**
+
+Change:
+
+```ts
+import { computed, ref } from 'vue'
+import { sendMobileCode } from '@/api/auth'
+```
+
+to:
+
+```ts
+import { computed, onMounted, ref } from 'vue'
+import { getImageCodeUrl, sendMobileCode } from '@/api/auth'
+```
+
+- [ ] **Step 2: Add captcha state**
+
+Add below `const code = ref('')`:
+
+```ts
+const imageCode = ref('')
+const captchaRandomStr = ref('')
+const captchaUrl = ref('')
+```
+
+- [ ] **Step 3: Add captcha refresh helpers**
+
+Add below `let timer: number | undefined`:
+
+```ts
+const createRandomStr = () => `${Date.now()}${Math.random().toString(36).slice(2, 10)}`
+
+const refreshCaptcha = () => {
+  captchaRandomStr.value = createRandomStr()
+  captchaUrl.value = getImageCodeUrl(captchaRandomStr.value)
+  imageCode.value = ''
+}
+```
+
+- [ ] **Step 4: Update send eligibility**
+
+Replace:
+
+```ts
+const canSend = computed(() => /^1\d{10}$/.test(phone.value) && seconds.value === 0)
+```
+
+with:
+
+```ts
+const canSend = computed(() => /^1\d{10}$/.test(phone.value) && imageCode.value.trim().length > 0 && seconds.value === 0)
+```
+
+- [ ] **Step 5: Update `handleSend` validation and payload**
+
+Replace the beginning of `handleSend` with:
+
+```ts
+const handleSend = async () => {
+  if (!/^1\d{10}$/.test(phone.value)) {
+    showToast('请输入正确手机号')
+    return
+  }
+  if (!imageCode.value.trim()) {
+    showToast('请输入图形验证码')
+    return
+  }
+  sending.value = true
+  try {
+    const result = await sendMobileCode({
+      phone: phone.value,
+      randomStr: captchaRandomStr.value,
+      imageCode: imageCode.value.trim()
+    })
+    const message = typeof result === 'object' && result && 'msg' in result ? result.msg : ''
+    if (message) {
+      code.value = String(message)
+      showToast(`验证码：${message}`)
+    } else {
+      showToast('验证码已发送')
+    }
+    startCountdown()
+  } catch (error) {
+    refreshCaptcha()
+    showToast(error instanceof Error ? error.message : '验证码发送失败')
+  } finally {
+    sending.value = false
+  }
+}
+```
+
+- [ ] **Step 6: Initialize captcha on mount**
+
+Add below `handleLogin`:
+
+```ts
+onMounted(refreshCaptcha)
+```
+
+- [ ] **Step 7: Add captcha field to template**
+
+Insert this `van-field` between phone and SMS code fields:
+
+```vue
+<van-field
+  v-model="imageCode"
+  type="text"
+  name="imageCode"
+  maxlength="8"
+  placeholder="请输入图形验证码"
+  autocomplete="off"
+  clearable
+>
+  <template #left-icon><ShieldCheck :size="18" /></template>
+  <template #button>
+    <button class="captcha-image-button" type="button" @click="refreshCaptcha">
+      <img v-if="captchaUrl" :src="captchaUrl" alt="图形验证码" />
+      <span v-else>刷新</span>
+    </button>
+  </template>
+</van-field>
+```
+
+- [ ] **Step 8: Add scoped styles**
+
+Add before the closing `</style>`:
+
+```css
+.captcha-image-button {
+  display: inline-flex;
+  width: 100px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius);
+  background: var(--surface-soft);
+  color: var(--primary-deep);
+  padding: 0;
+}
+
+.captcha-image-button img {
+  display: block;
+  width: 100px;
+  height: 40px;
+  object-fit: cover;
+}
+```
+
+- [ ] **Step 9: Run frontend checks**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+yarn typecheck
+yarn build:test
+```
+
+Expected: both pass. `vite build` may still show the existing router dynamic/static import warning; that warning is unrelated.
+
+- [ ] **Step 10: Commit frontend changes**
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+git add src/api/auth.ts src/api/mock.ts src/views/login/LoginView.vue
+git commit -m "登录短信发送增加图形验证码"
+```
+
+---
+
+### Task 6: End-to-End Manual Verification
+
+**Files:**
+- No code changes expected.
+
+- [ ] **Step 1: Start backend services needed for auth, upms, gateway, and Redis**
+
+Use the existing local backend startup process for `/Users/andy/IdeaProjects/one-feel-server`. Confirm these routes are reachable through the gateway:
+
+```text
+GET /auth/code/image?randomStr=manual-test
+POST /admin/platformUser/sendMobileCode
+POST /auth/oauth2/token
+```
+
+- [ ] **Step 2: Start frontend**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+yarn dev
+```
+
+Expected: Vite starts and prints a local URL.
+
+- [ ] **Step 3: Verify captcha image loads**
+
+Open `/login`.
+
+Expected:
+- Login title shows `核销端`.
+- Phone input is visible.
+- Image captcha input is visible.
+- Captcha image loads from `/auth/code/image`.
+- Clicking the image refreshes the URL and clears the image code input.
+
+- [ ] **Step 4: Verify empty captcha is blocked by frontend**
+
+Enter a valid phone number and leave image captcha empty. Click `获取验证码`.
+
+Expected:
+- No SMS request is sent.
+- Toast says `请输入图形验证码`.
+
+- [ ] **Step 5: Verify wrong captcha is rejected by backend**
+
+Enter a valid phone number and a wrong image captcha. Click `获取验证码`.
+
+Expected:
+- `POST /admin/platformUser/sendMobileCode` returns a failure response.
+- Toast shows backend error.
+- Captcha image refreshes.
+
+- [ ] **Step 6: Verify correct captcha sends SMS**
+
+Enter a valid phone number and the correct image captcha. Click `获取验证码`.
+
+Expected:
+- SMS send endpoint returns success.
+- Countdown starts.
+- Existing SMS frequency limit still applies if clicking repeatedly.
+
+- [ ] **Step 7: Verify login still works**
+
+Enter the SMS code and submit login.
+
+Expected:
+- Login calls `/auth/oauth2/token`.
+- After token success, frontend calls `/hotelStaff/organizationMember/bindUserInfoAndGetUserMemberInfoByPhone`.
+- Bound users enter `/home`.
+- Unbound users see `未绑定组织，请联系管理员`.
+
+---
+
+### Task 7: Documentation Update
+
+**Files:**
+- Modify: `/Users/andy/IdeaProjects/hotel-biz-h5/docs/frontend-practices.md`
+
+- [ ] **Step 1: Add SMS captcha note**
+
+Add this bullet under `## 登录与组织关系`:
+
+```markdown
+- 发送短信验证码前必须先通过图形验证码校验；前端展示 `/auth/code/image` 生成的验证码图片，后端在 `/admin/platformUser/sendMobileCode` 校验 `randomStr` 和 `imageCode` 后才发送短信。
+```
+
+- [ ] **Step 2: Run docs diff check**
+
+Run:
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+git diff --check docs/frontend-practices.md
+```
+
+Expected: no output.
+
+- [ ] **Step 3: Commit docs**
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+git add docs/frontend-practices.md
+git commit -m "补充短信图形验证码约定"
+```
+
+---
+
+## Rollout Notes
+
+- Keep the old GET endpoint during the first deployment to avoid breaking unknown clients.
+- H5 should switch to the new POST endpoint immediately after backend deployment.
+- After production confirms no clients call `GET /admin/platformUser/sendMobileCode/{phone}`, remove the GET endpoint in a later cleanup.
+- Do not remove existing Redis SMS frequency limits; image captcha is an additional layer, not a replacement.
+- Do not rely on frontend captcha checks for security; backend validation is required.
+
+## Execution Checkpoints
+
+### Checkpoint 0: Baseline Safety
+
+**Purpose:** Confirm both repositories are in a known state before touching code.
+
+**Scope:** No code changes.
+
+**Verification commands:**
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+git status --short --branch
+yarn typecheck
+
+cd /Users/andy/IdeaProjects/one-feel-server
+git status --short --branch
+mvn -pl pig-upms/pig-upms-api -am -DskipTests compile
+```
+
+**Pass criteria:**
+- Current branch and dirty files are understood.
+- Existing frontend typecheck passes.
+- Backend API module compiles before changes.
+
+**Stop condition:** If baseline build fails for unrelated reasons, record the failure and do not start feature work until the owner decides whether to fix baseline first.
+
+### Checkpoint 1: Backend Contract Ready
+
+**Purpose:** Add the new SMS request body without changing runtime behavior.
+
+**Scope:** Task 1 only.
+
+**Verification commands:**
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-api -am -DskipTests compile
+git show --stat --oneline HEAD
+```
+
+**Pass criteria:**
+- `SendMobileCodeForm` exists with `phone`, `randomStr`, and `imageCode`.
+- API module compiles.
+- Commit contains only the request form.
+
+**Rollback point:** Revert the request-form commit only.
+
+### Checkpoint 2: Captcha Verifier Proven
+
+**Purpose:** Prove Redis image captcha validation works before wiring it into the SMS endpoint.
+
+**Scope:** Task 2 only.
+
+**Verification commands:**
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-biz -Dtest=ImageCaptchaVerifierTest test
+git show --stat --oneline HEAD
+```
+
+**Pass criteria:**
+- Matching captcha passes and deletes `DEFAULT_CODE_KEY:{randomStr}`.
+- Blank, missing, and wrong captcha values fail.
+- Unit test passes.
+- Commit contains only verifier and verifier test.
+
+**Stop condition:** If the project lacks test dependencies for this isolated unit test, stop and decide whether to add test dependencies or verify with an integration test instead.
+
+**Rollback point:** Revert the verifier commit only.
+
+### Checkpoint 3: Backend Endpoint Protected
+
+**Purpose:** Make SMS sending require backend image captcha validation while preserving the old GET endpoint for compatibility.
+
+**Scope:** Task 3 only.
+
+**Verification commands:**
+
+```bash
+cd /Users/andy/IdeaProjects/one-feel-server
+mvn -pl pig-upms/pig-upms-biz -am -DskipTests compile
+git diff --check
+git show --stat --oneline HEAD
+```
+
+**Pass criteria:**
+- New `POST /admin/platformUser/sendMobileCode` accepts `SendMobileCodeForm`.
+- Backend validates phone format, `clientConfigId`, `randomStr`, and `imageCode`.
+- Captcha verification runs before `platformMobileService.sendSmsCode`.
+- Existing `GET /sendMobileCode/{phone}` is still present.
+- Existing SMS rate limits are untouched.
+
+**Manual smoke check after backend starts:**
+
+```text
+POST /admin/platformUser/sendMobileCode
+body: {"phone":"13800000000","randomStr":"wrong","imageCode":"0000"}
+Expected: failure response, no SMS sent.
+```
+
+**Rollback point:** Revert the backend endpoint commit. Old GET endpoint remains available.
+
+### Checkpoint 4: Frontend Contract Switched
+
+**Purpose:** Move H5 from URL-phone GET sending to structured POST sending.
+
+**Scope:** Task 4 and Task 5.
+
+**Verification commands:**
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+yarn typecheck
+yarn build:test
+git diff --check src/api/auth.ts src/api/mock.ts src/views/login/LoginView.vue
+git show --stat --oneline HEAD
+```
+
+**Pass criteria:**
+- Login page displays phone input, image captcha input, captcha image, SMS code input, and login button.
+- `sendMobileCode` sends `phone`, `randomStr`, and `imageCode` to `POST /admin/platformUser/sendMobileCode`.
+- Empty image captcha is blocked in the frontend with `请输入图形验证码`.
+- Failed SMS send shows a toast and refreshes captcha.
+- Mock mode still works.
+
+**Manual smoke check with frontend only:**
+
+```text
+1. Start H5 in mock mode.
+2. Open /login.
+3. Try sending with empty image captcha.
+4. Expected: toast says 请输入图形验证码 and no countdown starts.
+5. Enter any image captcha in mock mode and send.
+6. Expected: countdown starts and mock SMS code appears.
+```
+
+**Rollback point:** Revert the frontend commit. Backend POST endpoint can remain deployed without affecting old clients.
+
+### Checkpoint 5: End-to-End Gate
+
+**Purpose:** Verify the complete browser -> gateway -> auth/upms -> Redis flow before release.
+
+**Scope:** Task 6.
+
+**Verification steps:**
+
+```text
+1. Start Redis, gateway, pig-auth, pig-upms, and H5.
+2. Open /login.
+3. Confirm captcha image loads from /auth/code/image.
+4. Enter wrong image captcha and click 获取验证码.
+5. Expected: SMS endpoint returns failure and no countdown starts.
+6. Refresh captcha, enter correct image captcha, and click 获取验证码.
+7. Expected: SMS send succeeds and countdown starts.
+8. Enter SMS code and login.
+9. Expected: token endpoint succeeds, organization binding endpoint runs, bound user enters /home.
+```
+
+**Pass criteria:**
+- Wrong captcha cannot send SMS.
+- Correct captcha can send SMS.
+- Captcha cannot be reused after one successful SMS send.
+- Existing SMS frequency limit still blocks repeated sends.
+- Login flow after receiving SMS code is unchanged.
+
+**Stop condition:** If correct captcha still fails, inspect Redis key serialization between `ImageCodeEndpoint` and `ImageCaptchaVerifier` before changing frontend code.
+
+### Checkpoint 6: Documentation And Release Readiness
+
+**Purpose:** Lock the new behavior into project docs and prepare release notes.
+
+**Scope:** Task 7 and release review.
+
+**Verification commands:**
+
+```bash
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+git diff --check docs/frontend-practices.md
+
+cd /Users/andy/IdeaProjects/one-feel-server
+git log --oneline -3
+
+cd /Users/andy/IdeaProjects/hotel-biz-h5
+git log --oneline -3
+```
+
+**Pass criteria:**
+- Docs say SMS sending requires image captcha.
+- Backend commits and frontend commits are clearly separated.
+- Release notes mention that old GET SMS endpoint is temporarily retained.
+
+**Release decision:** Deploy backend first, then deploy H5. Do not deploy H5 before the backend POST endpoint is available.
+
+## Self-Review
+
+- Spec coverage: The plan covers existing image captcha reuse, backend POST endpoint, Redis verification, frontend login UI, API contract, tests, manual verification, and documentation.
+- Placeholder scan: No `TBD`, `TODO`, or vague "handle edge cases" steps remain; each task includes concrete file paths and code.
+- Type consistency: Frontend `SendMobileCodePayload` fields match backend `SendMobileCodeForm` fields: `phone`, `randomStr`, `imageCode`.
diff --git a/docs/superpowers/plans/2026-06-30-page-optimization.md b/docs/superpowers/plans/2026-06-30-page-optimization.md
new file mode 100644
index 0000000..b5ee3f0
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-30-page-optimization.md
@@ -0,0 +1,54 @@
+# 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.
diff --git a/docs/superpowers/specs/2026-06-30-page-optimization-design.md b/docs/superpowers/specs/2026-06-30-page-optimization-design.md
new file mode 100644
index 0000000..79c346e
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-30-page-optimization-design.md
@@ -0,0 +1,30 @@
+# H5 Page Optimization Design
+
+## Goal
+
+Improve the existing hotel business H5 pages as a high-frequency mobile operations tool, keeping the current Vue 3, Vant, and green verification-oriented brand language.
+
+## Direction
+
+Use a practical business-tool polish rather than a marketing redesign. The UI should feel clearer, steadier, and more tactile for staff who repeatedly check orders, scan verification codes, and review events.
+
+## Scope
+
+- Keep the existing route structure, APIs, Vant components, icons, and data flow.
+- Upgrade global design tokens while preserving existing variable names for compatibility.
+- Improve common surfaces: page shell, panels, list cards, buttons, tabs, search, forms, empty states, and fixed actions.
+- Polish key pages: home, order list/detail, event list/create, verify scan/confirm/result, mine, and login.
+- Avoid new dependencies and framework migration.
+
+## Visual System
+
+- Primary tone remains green, with more precise neutrals and status colors.
+- Cards use tighter radius, clearer borders, subtle tinted shadows, and pressed feedback.
+- Typography gains a clearer scale and tabular numeric rendering for order IDs, amounts, and counts.
+- Loading and empty states should use composed surfaces rather than isolated spinners.
+- Mobile constraints target narrow phones first, then the existing 560px page max width.
+
+## Verification
+
+- Run TypeScript/build verification.
+- Start the local dev server and inspect representative pages in a mobile viewport.
diff --git a/index.html b/index.html
index bec013a..5566445 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#f7faf8" />
-    <title>酒店员工端</title>
+    <title>核销端</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/components/StatusTag.vue b/src/components/StatusTag.vue
index 1bb29a6..a63c045 100644
--- a/src/components/StatusTag.vue
+++ b/src/components/StatusTag.vue
@@ -12,5 +12,12 @@ const tone = computed(() => orderStatusTone[props.status as OrderStatus] || 'def
 </script>
 
 <template>
-  <van-tag :type="tone" plain round>{{ text }}</van-tag>
+  <van-tag class="status-tag" :type="tone" plain>{{ text }}</van-tag>
 </template>
+
+<style scoped>
+.status-tag {
+  border-radius: var(--radius-xs);
+  font-weight: 650;
+}
+</style>
diff --git a/src/styles/main.css b/src/styles/main.css
index d2e8b3e..6bf566d 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,20 +1,84 @@
 :root {
-  --app-bg: #f6f8f7;
-  --surface: #ffffff;
-  --surface-soft: #eef7f3;
-  --text-strong: #14211c;
-  --text-main: #26352f;
-  --text-muted: #7a8780;
-  --line: #e2e8e4;
-  --primary: #0f8b72;
-  --primary-deep: #08705e;
-  --primary-soft: #dff4ec;
-  --amber: #f3a51d;
-  --rose: #d94d5c;
-  --blue: #286fb7;
-  --shadow: 0 8px 20px rgba(18, 38, 31, 0.08);
-  --radius: 8px;
+  --color-white: #ffffff;
+  --color-green-50: #eff9f5;
+  --color-green-100: #d9f1e8;
+  --color-green-500: #13906f;
+  --color-green-600: #0f7d65;
+  --color-green-700: #086854;
+  --color-slate-50: #f7f9f8;
+  --color-slate-100: #edf2ef;
+  --color-slate-200: #dde6e1;
+  --color-slate-300: #cad6d0;
+  --color-slate-500: #77847e;
+  --color-slate-700: #33433c;
+  --color-slate-900: #13211b;
+  --color-amber-50: #fff7df;
+  --color-amber-600: #b97407;
+  --color-rose-50: #fff0f2;
+  --color-rose-600: #c83f52;
+  --color-blue-50: #edf6ff;
+  --color-blue-600: #256eaa;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-md: 15px;
+  --font-size-lg: 18px;
+  --font-size-xl: 24px;
+  --font-weight-medium: 550;
+  --font-weight-semibold: 650;
+  --font-weight-bold: 750;
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --shadow-sm: 0 3px 10px rgba(21, 54, 42, 0.06);
+  --shadow-md: 0 10px 28px rgba(21, 54, 42, 0.09);
+  --shadow-action: 0 12px 26px rgba(15, 125, 101, 0.22);
+  --duration-fast: 140ms;
+  --duration-normal: 220ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --app-bg: var(--color-slate-50);
+  --surface: var(--color-white);
+  --surface-soft: var(--color-green-50);
+  --surface-raised: rgba(255, 255, 255, 0.88);
+  --text-strong: var(--color-slate-900);
+  --text-main: var(--color-slate-700);
+  --text-muted: var(--color-slate-500);
+  --line: var(--color-slate-200);
+  --primary: var(--color-green-500);
+  --primary-deep: var(--color-green-700);
+  --primary-soft: var(--color-green-100);
+  --amber: var(--color-amber-600);
+  --amber-soft: var(--color-amber-50);
+  --rose: var(--color-rose-600);
+  --rose-soft: var(--color-rose-50);
+  --blue: var(--color-blue-600);
+  --blue-soft: var(--color-blue-50);
+  --shadow: var(--shadow-md);
+  --radius: var(--radius-sm);
+  --panel-bg: var(--surface);
+  --panel-border: rgba(202, 214, 208, 0.82);
+  --panel-radius: var(--radius-md);
+  --panel-shadow: var(--shadow-sm);
+  --button-radius: var(--radius-sm);
+  --focus-ring: 0 0 0 3px rgba(19, 144, 111, 0.18);
   --safe-bottom: env(safe-area-inset-bottom);
+  --van-primary-color: var(--primary);
+  --van-success-color: var(--primary);
+  --van-danger-color: var(--rose);
+  --van-warning-color: var(--amber);
+  --van-text-color: var(--text-main);
+  --van-text-color-2: var(--text-muted);
+  --van-border-color: var(--line);
+  --van-background: var(--app-bg);
+  --van-background-2: var(--surface);
+  --van-radius-md: var(--radius);
   color: var(--text-main);
   background: var(--app-bg);
   font-family:
@@ -25,6 +89,7 @@
     "Hiragino Sans GB",
     "Microsoft YaHei",
     sans-serif;
+  font-variant-numeric: tabular-nums;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -51,6 +116,10 @@ body {
   min-width: 0;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 button,
 input,
 textarea {
@@ -60,6 +129,7 @@ textarea {
 
 button {
   color: inherit;
+  cursor: pointer;
 }
 
 input,
@@ -77,9 +147,11 @@ canvas {
 
 .app-shell {
   min-height: 100vh;
-  padding: 0 14px 78px;
+  min-height: 100dvh;
+  padding: 0 14px calc(82px + var(--safe-bottom));
   background:
-    linear-gradient(180deg, #e9f6ef 0, rgba(246, 248, 247, 0) 210px),
+    radial-gradient(circle at 18% 0, rgba(19, 144, 111, 0.14), transparent 220px),
+    linear-gradient(180deg, #e7f5ef 0, rgba(247, 249, 248, 0) 230px),
     var(--app-bg);
 }
 
@@ -89,39 +161,46 @@ canvas {
 
 .app-tabbar {
   border-top: 1px solid var(--line);
+  box-shadow: 0 -10px 28px rgba(21, 54, 42, 0.06);
+}
+
+.van-tabbar-item--active {
+  font-weight: var(--font-weight-semibold);
 }
 
 .page {
   width: min(100%, 560px);
   min-width: 0;
   margin: 0 auto;
-  padding: 14px 0 18px;
+  padding: 14px 0 20px;
 }
 
 .page-header {
-  padding: 18px 2px 14px;
+  padding: 20px 2px 16px;
 }
 
 .page-kicker {
   margin: 0 0 6px;
   color: var(--primary-deep);
-  font-size: 13px;
-  font-weight: 600;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
 }
 
 .page-title {
   margin: 0;
   color: var(--text-strong);
-  font-size: 24px;
-  font-weight: 750;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
   line-height: 1.2;
+  text-wrap: balance;
 }
 
 .page-subtitle {
   margin: 8px 0 0;
   color: var(--text-muted);
-  font-size: 14px;
+  font-size: var(--font-size-base);
   line-height: 1.5;
+  text-wrap: pretty;
 }
 
 .page-nav {
@@ -135,7 +214,7 @@ canvas {
   height: 52px;
   margin: 0 auto;
   padding-top: max(0px, env(safe-area-inset-top));
-  background: rgba(246, 248, 247, 0.94);
+  background: rgba(247, 249, 248, 0.9);
   backdrop-filter: blur(10px);
 }
 
@@ -143,8 +222,8 @@ canvas {
   overflow: hidden;
   margin: 0;
   color: var(--text-strong);
-  font-size: 18px;
-  font-weight: 750;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
   line-height: 1.2;
   text-align: center;
   text-overflow: ellipsis;
@@ -161,17 +240,21 @@ canvas {
   border: 0;
   border-radius: var(--radius);
   background: transparent;
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
 }
 
 .icon-button:active,
 .nav-text-button:active {
   background: rgba(15, 139, 114, 0.1);
+  transform: translateY(1px) scale(0.98);
 }
 
 .nav-text-button {
   color: var(--primary-deep);
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
 }
 
 .nav-placeholder {
@@ -181,15 +264,15 @@ canvas {
 .panel {
   overflow: hidden;
   min-width: 0;
-  border: 1px solid rgba(226, 232, 228, 0.9);
-  border-radius: var(--radius);
-  background: var(--surface);
-  box-shadow: var(--shadow);
+  border: 1px solid var(--panel-border);
+  border-radius: var(--panel-radius);
+  background: var(--panel-bg);
+  box-shadow: var(--panel-shadow);
 }
 
 .panel + .panel,
 .section + .section {
-  margin-top: 12px;
+  margin-top: 14px;
 }
 
 .section-title {
@@ -197,23 +280,28 @@ canvas {
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  margin: 0 0 10px;
+  margin: 0 0 12px;
   color: var(--text-strong);
   font-size: 16px;
-  font-weight: 750;
+  font-weight: var(--font-weight-bold);
 }
 
 .section-title small {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  padding: 0 2px;
   color: var(--text-muted);
-  font-size: 12px;
-  font-weight: 500;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
 }
 
 .toolbar {
   display: flex;
   gap: 8px;
   align-items: center;
-  padding: 10px 0;
+  padding: 6px 0 10px;
 }
 
 .toolbar .van-search {
@@ -222,6 +310,12 @@ canvas {
   background: transparent;
 }
 
+.toolbar .van-search__content {
+  border: 1px solid rgba(202, 214, 208, 0.8);
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: var(--shadow-sm);
+}
+
 .quick-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -231,16 +325,23 @@ canvas {
 .quick-action {
   display: flex;
   min-width: 0;
-  min-height: 76px;
+  min-height: 82px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
+  border: 1px solid rgba(202, 214, 208, 0.9);
+  border-radius: var(--panel-radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 249, 245, 0.58)),
+    var(--surface);
   color: var(--text-main);
   text-decoration: none;
+  box-shadow: var(--shadow-sm);
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
 }
 
 .quick-action svg {
@@ -252,22 +353,33 @@ canvas {
   overflow: hidden;
   padding: 0 4px;
   font-size: 12px;
-  font-weight: 650;
+  font-weight: var(--font-weight-semibold);
   line-height: 1.2;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.quick-action:active {
+  border-color: rgba(19, 144, 111, 0.36);
+  box-shadow: none;
+  transform: translateY(1px) scale(0.985);
+}
+
 .order-card,
 .event-card {
   display: block;
-  padding: 12px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
+  padding: 13px;
+  border: 1px solid rgba(202, 214, 208, 0.82);
+  border-radius: var(--panel-radius);
+  background: var(--surface-raised);
   color: inherit;
   text-decoration: none;
+  box-shadow: var(--shadow-sm);
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
 }
 
 .order-card + .order-card,
@@ -275,6 +387,13 @@ canvas {
   margin-top: 10px;
 }
 
+.order-card:active,
+.event-card:active {
+  border-color: rgba(19, 144, 111, 0.36);
+  box-shadow: none;
+  transform: translateY(1px) scale(0.99);
+}
+
 .order-card__main {
   display: grid;
   grid-template-columns: 76px minmax(0, 1fr);
@@ -285,6 +404,7 @@ canvas {
   width: 76px;
   height: 76px;
   overflow: hidden;
+  border: 1px solid rgba(221, 230, 225, 0.9);
   border-radius: var(--radius);
   background: var(--surface-soft);
 }
@@ -301,8 +421,8 @@ canvas {
   overflow: hidden;
   margin: 0;
   color: var(--text-strong);
-  font-size: 15px;
-  font-weight: 750;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
   line-height: 1.35;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -315,7 +435,7 @@ canvas {
   justify-content: space-between;
   gap: 12px;
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: var(--font-size-xs);
   line-height: 1.5;
 }
 
@@ -343,7 +463,7 @@ canvas {
 .detail-row strong {
   flex: 0 1 auto;
   color: var(--text-main);
-  font-weight: 650;
+  font-weight: var(--font-weight-semibold);
   text-align: right;
   overflow-wrap: anywhere;
 }
@@ -362,7 +482,14 @@ canvas {
 }
 
 .empty-state {
+  display: grid;
+  min-height: 150px;
+  align-content: center;
+  justify-items: center;
   padding: 34px 20px;
+  border: 1px dashed rgba(202, 214, 208, 0.9);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.58);
   color: var(--text-muted);
   text-align: center;
 }
@@ -372,6 +499,11 @@ canvas {
   color: var(--primary);
 }
 
+.empty-state div {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+}
+
 .fixed-action {
   position: fixed;
   z-index: 10;
@@ -380,8 +512,9 @@ canvas {
   left: 0;
   padding: 10px 14px calc(10px + var(--safe-bottom));
   border-top: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.96);
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 -10px 30px rgba(21, 54, 42, 0.08);
 }
 
 .fixed-action__inner {
@@ -393,19 +526,68 @@ canvas {
 }
 
 .van-button {
-  border-radius: var(--radius);
+  border-radius: var(--button-radius);
+  font-weight: var(--font-weight-semibold);
+  transition:
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
 }
 
 .van-button__content {
   gap: 6px;
 }
 
+.van-button--primary:not(.van-button--plain) {
+  border-color: var(--primary);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
+    var(--primary);
+  box-shadow: var(--shadow-action);
+}
+
+.van-button--plain {
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.van-button:active {
+  transform: translateY(1px) scale(0.985);
+}
+
+.van-button--disabled,
+.van-button--loading {
+  box-shadow: none;
+  transform: none;
+}
+
 .van-tabs__wrap {
+  overflow: hidden;
+  border: 1px solid rgba(202, 214, 208, 0.76);
   border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: var(--shadow-sm);
+}
+
+.van-tabs__nav {
+  background: transparent;
+}
+
+.van-tab {
+  color: var(--text-muted);
+  font-weight: var(--font-weight-medium);
+}
+
+.van-tab--active {
+  color: var(--primary-deep);
+  font-weight: var(--font-weight-semibold);
+}
+
+.van-tabs__line {
+  background: var(--primary);
 }
 
 .form-panel {
-  padding: 12px;
+  padding: 14px;
 }
 
 .plain-input {
@@ -414,17 +596,75 @@ canvas {
   padding: 0 12px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: var(--surface);
+  background: rgba(255, 255, 255, 0.9);
   color: var(--text-main);
   outline: none;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
 }
 
 .plain-input:focus {
   border-color: var(--primary);
+  box-shadow: var(--focus-ring);
+}
+
+.van-cell {
+  color: var(--text-main);
+}
+
+.van-cell::after {
+  border-color: rgba(221, 230, 225, 0.9);
+}
+
+.van-field__control::placeholder {
+  color: #98a49e;
+}
+
+a:focus-visible,
+button:focus-visible,
+.plain-input:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+@media (hover: hover) {
+  .quick-action:hover,
+  .order-card:hover,
+  .event-card:hover {
+    border-color: rgba(19, 144, 111, 0.28);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+  }
 }
 
 @media (max-width: 360px) {
+  .app-shell {
+    padding-right: 12px;
+    padding-left: 12px;
+  }
+
   .quick-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .order-card__main {
+    grid-template-columns: 68px minmax(0, 1fr);
+  }
+
+  .thumb {
+    width: 68px;
+    height: 68px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
 }
diff --git a/src/views/events/EventCreateView.vue b/src/views/events/EventCreateView.vue
index 38c1f7e..93a15c1 100644
--- a/src/views/events/EventCreateView.vue
+++ b/src/views/events/EventCreateView.vue
@@ -152,6 +152,12 @@ const submit = async () => {
 .form-panel :deep(.van-cell) {
   border: 1px solid var(--line);
   border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.form-panel :deep(.van-field__label) {
+  color: var(--text-main);
+  font-weight: 650;
 }
 
 .upload-box {
@@ -159,11 +165,22 @@ const submit = async () => {
   width: 110px;
   height: 110px;
   border: 1px dashed rgba(15, 139, 114, 0.45);
-  border-radius: var(--radius);
-  background: var(--surface-soft);
+  border-radius: var(--panel-radius);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(239, 249, 245, 0.9)),
+    var(--surface-soft);
   color: var(--primary-deep);
   font-size: 13px;
+  font-weight: 650;
   place-items: center;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
+}
+
+.upload-box:active {
+  border-color: var(--primary);
+  transform: scale(0.985);
 }
 
 .time-panel label {
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 28dca82..c4176eb 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -52,12 +52,27 @@ onMounted(loadData)
         <h1 class="page-title">工作台</h1>
         <p class="page-subtitle">{{ auth.user?.phone || auth.user?.username || '当前员工' }}</p>
       </div>
-      <van-button type="primary" size="small" @click="router.push('/verify')">
+      <van-button class="hero-action" type="primary" size="small" @click="router.push('/verify')">
         <template #icon><ScanLine :size="16" /></template>
         核销
       </van-button>
     </header>
 
+    <section class="home-summary panel">
+      <div>
+        <span>近期订单</span>
+        <strong>{{ orders.length }}</strong>
+      </div>
+      <div>
+        <span>近期事件</span>
+        <strong>{{ events.length }}</strong>
+      </div>
+      <div>
+        <span>工作状态</span>
+        <strong>{{ loading ? '同步中' : '已同步' }}</strong>
+      </div>
+    </section>
+
     <section class="section">
       <h2 class="section-title">快捷入口</h2>
       <div class="quick-grid">
@@ -85,7 +100,9 @@ onMounted(loadData)
         近期订单
         <small @click="router.push('/orders')">全部</small>
       </h2>
-      <van-loading v-if="loading" />
+      <div v-if="loading" class="loading-panel">
+        <van-skeleton v-for="item in 3" :key="item" avatar :row="3" />
+      </div>
       <template v-else-if="orders.length">
         <RouterLink
           v-for="order in orders.slice(0, 3)"
@@ -126,7 +143,10 @@ onMounted(loadData)
         近期事件
         <small @click="router.push('/events')">全部</small>
       </h2>
-      <div v-if="events.length">
+      <div v-if="loading" class="loading-panel">
+        <van-skeleton v-for="item in 2" :key="item" title :row="2" />
+      </div>
+      <div v-else-if="events.length">
         <article v-for="event in events.slice(0, 2)" :key="event.id" class="event-card">
           <div class="meta-row">
             <strong>{{ event.entityName }}</strong>
@@ -155,7 +175,58 @@ onMounted(loadData)
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
-  padding: 18px 2px 14px;
+  padding: 20px 2px 14px;
+}
+
+.hero-action {
+  flex: 0 0 auto;
+  margin-top: 4px;
+}
+
+.home-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1px;
+  padding: 4px;
+  margin-bottom: 16px;
+  background:
+    linear-gradient(135deg, rgba(19, 144, 111, 0.08), rgba(255, 247, 223, 0.58)),
+    var(--surface);
+}
+
+.home-summary > div {
+  display: grid;
+  min-width: 0;
+  gap: 5px;
+  padding: 12px 8px;
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.home-summary span {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-summary strong {
+  overflow: hidden;
+  color: var(--text-strong);
+  font-size: 18px;
+  font-weight: 750;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.loading-panel {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid rgba(202, 214, 208, 0.82);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.62);
 }
 
 .event-desc {
diff --git a/src/views/orders/OrderListView.vue b/src/views/orders/OrderListView.vue
index 2d71b34..545322d 100644
--- a/src/views/orders/OrderListView.vue
+++ b/src/views/orders/OrderListView.vue
@@ -70,6 +70,7 @@ onMounted(() => loadOrders(true))
     <header class="page-header">
       <p class="page-kicker">订单管理</p>
       <h1 class="page-title">订单列表</h1>
+      <p class="page-subtitle">按手机号和订单状态快速定位客人的待处理订单。</p>
     </header>
 
     <div class="toolbar">
@@ -84,7 +85,7 @@ onMounted(() => loadOrders(true))
       </van-search>
     </div>
 
-    <van-tabs v-model:active="status" shrink>
+    <van-tabs v-model:active="status" shrink class="filter-tabs">
       <van-tab title="全部" name="" />
       <van-tab title="待使用" name="2" />
       <van-tab title="待确认" name="1" />
@@ -125,6 +126,9 @@ onMounted(() => loadOrders(true))
             </div>
           </RouterLink>
         </div>
+        <div v-else-if="listLoading" class="list-skeleton">
+          <van-skeleton v-for="item in 4" :key="item" avatar :row="3" />
+        </div>
         <div v-else-if="!listLoading" class="empty-state">
           <ClipboardList :size="30" />
           <div>暂无订单</div>
@@ -136,7 +140,24 @@ onMounted(() => loadOrders(true))
 </template>
 
 <style scoped>
+.filter-tabs {
+  margin-bottom: 2px;
+}
+
 .order-list {
   padding-top: 12px;
 }
+
+.list-skeleton {
+  display: grid;
+  gap: 10px;
+  padding-top: 12px;
+}
+
+.list-skeleton :deep(.van-skeleton) {
+  padding: 13px;
+  border: 1px solid rgba(202, 214, 208, 0.82);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.62);
+}
 </style>
diff --git a/src/views/verify/VerifyConfirmView.vue b/src/views/verify/VerifyConfirmView.vue
index 7dbeb52..0036301 100644
--- a/src/views/verify/VerifyConfirmView.vue
+++ b/src/views/verify/VerifyConfirmView.vue
@@ -191,7 +191,7 @@ onMounted(loadDetail)
       <section class="panel detail-panel">
         <h2 class="section-title">核销内容</h2>
         <van-radio-group v-model="packageName">
-          <van-cell-group inset>
+          <van-cell-group class="package-group">
             <van-cell v-if="packageMismatch" title="扫码套餐不属于当前订单" label="请返回重新扫码或联系管理员核对订单二维码" />
             <van-cell
               v-for="item in packageOptions"
@@ -268,10 +268,17 @@ onMounted(loadDetail)
   padding: 14px;
 }
 
+.confirm-hero {
+  background:
+    linear-gradient(135deg, rgba(19, 144, 111, 0.1), rgba(255, 247, 223, 0.72)),
+    var(--surface);
+}
+
 .confirm-hero h1 {
   margin: 14px 0;
   color: var(--text-strong);
   font-size: 19px;
+  font-weight: 750;
   line-height: 1.35;
 }
 
@@ -287,10 +294,27 @@ onMounted(loadDetail)
   font-weight: 700;
 }
 
+.package-group {
+  overflow: hidden;
+  border: 1px solid rgba(221, 230, 225, 0.86);
+  border-radius: var(--radius);
+}
+
+.package-group :deep(.van-cell) {
+  align-items: center;
+}
+
+.package-group :deep(.van-cell__label) {
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
 .warning-panel {
   display: flex;
   gap: 8px;
   align-items: center;
+  border-color: rgba(185, 116, 7, 0.28);
+  background: var(--amber-soft);
   color: var(--amber);
   font-size: 14px;
 }
diff --git a/src/views/verify/VerifyResultView.vue b/src/views/verify/VerifyResultView.vue
index a2ee62c..73c6f63 100644
--- a/src/views/verify/VerifyResultView.vue
+++ b/src/views/verify/VerifyResultView.vue
@@ -52,7 +52,10 @@ const operatedAt = computed(() => String(route.query.operatedAt || ''))
 
 <style scoped>
 .result-panel {
-  padding: 30px 16px 18px;
+  padding: 32px 16px 18px;
+  background:
+    linear-gradient(180deg, rgba(19, 144, 111, 0.1), rgba(255, 255, 255, 0) 58%),
+    var(--surface);
   text-align: center;
 }
 
@@ -60,21 +63,25 @@ const operatedAt = computed(() => String(route.query.operatedAt || ''))
   display: inline-grid;
   width: 86px;
   height: 86px;
-  border-radius: var(--radius);
+  border: 1px solid rgba(19, 144, 111, 0.16);
+  border-radius: var(--panel-radius);
   background: var(--primary-soft);
   color: var(--primary-deep);
+  box-shadow: 0 14px 30px rgba(15, 125, 101, 0.16);
   place-items: center;
 }
 
 .result-icon--error {
   background: #fae7e9;
   color: var(--rose);
+  box-shadow: 0 14px 30px rgba(200, 63, 82, 0.12);
 }
 
 .result-panel h1 {
   margin: 16px 0 8px;
   color: var(--text-strong);
   font-size: 23px;
+  font-weight: 750;
 }
 
 .result-panel p {
@@ -85,8 +92,10 @@ const operatedAt = computed(() => String(route.query.operatedAt || ''))
 
 .result-detail {
   margin-top: 20px;
-  padding-top: 12px;
-  border-top: 1px solid var(--line);
+  padding: 12px;
+  border: 1px solid rgba(221, 230, 225, 0.9);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.66);
 }
 
 .result-detail .detail-row + .detail-row {
diff --git a/src/views/verify/VerifyView.vue b/src/views/verify/VerifyView.vue
index 68ab1d5..7b8dc23 100644
--- a/src/views/verify/VerifyView.vue
+++ b/src/views/verify/VerifyView.vue
@@ -167,18 +167,31 @@ onBeforeUnmount(stopScan)
       </div>
       <button v-else class="scan-button" type="button" :disabled="loading" @click="startScan">
         <QrCode :size="54" />
-        <span>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</span>
+        <strong>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</strong>
+        <span>请将客人的核销二维码置于取景框内</span>
       </button>
       <p v-if="scanError" class="scan-error">{{ scanError }}</p>
     </section>
+
+    <section class="scan-tips">
+      <div>
+        <strong>核销前确认</strong>
+        <span>扫码后仍需核对订单、套餐和可核销数量。</span>
+      </div>
+      <div>
+        <strong>识别不成功</strong>
+        <span>调整距离、光线，或请客人提高屏幕亮度。</span>
+      </div>
+    </section>
   </section>
 </template>
 
 <style scoped>
 .scan-panel {
-  padding: 18px;
+  padding: 16px;
   background:
-    linear-gradient(135deg, rgba(15, 139, 114, 0.12), rgba(243, 165, 29, 0.12)),
+    radial-gradient(circle at 50% 0, rgba(19, 144, 111, 0.16), transparent 190px),
+    linear-gradient(135deg, rgba(15, 139, 114, 0.1), rgba(255, 247, 223, 0.78)),
     var(--surface);
 }
 
@@ -186,7 +199,8 @@ onBeforeUnmount(stopScan)
   position: relative;
   overflow: hidden;
   min-height: 260px;
-  border-radius: var(--radius);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: var(--panel-radius);
   background: #111827;
 }
 
@@ -236,14 +250,37 @@ onBeforeUnmount(stopScan)
 .scan-button {
   display: grid;
   width: 100%;
-  min-height: 156px;
-  border: 1px dashed rgba(15, 139, 114, 0.45);
-  border-radius: var(--radius);
-  background: rgba(255, 255, 255, 0.78);
+  min-height: 174px;
+  padding: 20px 16px;
+  border: 1px dashed rgba(15, 139, 114, 0.5);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.74);
   color: var(--primary-deep);
-  font-weight: 750;
-  gap: 10px;
+  gap: 8px;
   place-items: center;
+  transition:
+    border-color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
+
+.scan-button:active {
+  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.9);
+  transform: scale(0.99);
+}
+
+.scan-button strong {
+  color: var(--text-strong);
+  font-size: 17px;
+  font-weight: 750;
+}
+
+.scan-button span {
+  max-width: 210px;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.45;
 }
 
 .scan-button:disabled {
@@ -256,4 +293,30 @@ onBeforeUnmount(stopScan)
   font-size: 12px;
   line-height: 1.5;
 }
+
+.scan-tips {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.scan-tips > div {
+  display: grid;
+  gap: 4px;
+  padding: 12px 13px;
+  border: 1px solid rgba(202, 214, 208, 0.78);
+  border-radius: var(--panel-radius);
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.scan-tips strong {
+  color: var(--text-strong);
+  font-size: 14px;
+}
+
+.scan-tips span {
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
 </style>
-- 
2.43.7