1

src/views/AuthView.vue

@@ -4,26 +4,36 @@ import { useRouter } from 'vue-router'
 import { Button as VanButton, Field as VanField, Form as VanForm, showToast } from 'vant'
 import { healthApi } from '../services/health'
 import { saveTokens } from '../services/auth'
+import { usePageRequest } from '../composables/usePageRequest'
 
 const router = useRouter()
 const mode = ref<'login' | 'register'>('login')
 const loading = ref(false)
 const form = reactive({ phone: '', password: '', displayName: '' })
 const title = computed(() => mode.value === 'login' ? '欢迎回来' : '开启专属健康档案')
+const pageRequest = usePageRequest()
 
 async function submit() {
+  if (loading.value) return
+  const requestMode = mode.value
+  const phone = form.phone.trim(), displayName = form.displayName.trim()
+  if (!/^1[3-9]\d{9}$/.test(phone)) { showToast('请输入正确的手机号'); return }
+  if (!form.password || (requestMode === 'register' && form.password.length < 8)) { showToast(requestMode === 'register' ? '注册密码至少 8 位' : '请输入密码'); return }
+  if (requestMode === 'register' && !displayName) { showToast('请输入姓名或称呼'); return }
+  const requestId = pageRequest.begin()
   loading.value = true
   try {
-    const output = mode.value === 'login'
-      ? await healthApi.login({ phone: form.phone, password: form.password })
-      : await healthApi.register(form)
+    const output = requestMode === 'login'
+      ? await healthApi.login({ phone, password: form.password })
+      : await healthApi.register({ phone, password: form.password, displayName })
+    if (!pageRequest.isCurrent(requestId)) return
     saveTokens(output.accessToken, output.refreshToken)
-    showToast({ type: 'success', message: mode.value === 'login' ? '登录成功' : '注册成功' })
-    await router.replace(mode.value === 'login' ? '/dashboard' : '/tcm-assessment')
+    showToast({ type: 'success', message: requestMode === 'login' ? '登录成功' : '注册成功' })
+    await router.replace(requestMode === 'login' ? '/dashboard' : '/tcm-assessment')
   } catch (error) {
-    showToast(error instanceof Error ? error.message : '操作失败')
+    if (pageRequest.isCurrent(requestId)) showToast(error instanceof Error ? error.message : '操作失败')
   } finally {
-    loading.value = false
+    if (pageRequest.isCurrent(requestId)) loading.value = false
   }
 }
 </script>
@@ -39,7 +49,7 @@ async function submit() {
       <h1>一人一方<br />健康与空间协同</h1>
       <p class="brand-copy">以睡眠为切入点，融合五感空间与动态健康方案，开启日常健康管理。</p>
       <div class="feature-pill-row">
-        <span>🌿 六维处方</span><span>🌙 五感微环境</span><span>📊 闭环调理</span>
+        <span>体质评估</span><span>舒睡联动</span><span>健康档案</span>
       </div>
     </section>
 
@@ -48,6 +58,7 @@ async function submit() {
         <button
           type="button"
           :class="{ active: mode === 'login' }"
+          :aria-pressed="mode === 'login'" :disabled="loading"
           @click="mode = 'login'"
         >
           账号登录
@@ -55,6 +66,7 @@ async function submit() {
         <button
           type="button"
           :class="{ active: mode === 'register' }"
+          :aria-pressed="mode === 'register'" :disabled="loading"
           @click="mode = 'register'"
         >
           注册建档
@@ -62,8 +74,8 @@ async function submit() {
       </div>
 
       <div class="auth-heading">
-        <h2 style="font-size: 20px; font-weight: 700; color: #142e27; margin-bottom: 4px;">{{ title }}</h2>
-        <p style="color: #72847d; font-size: 13px; margin-bottom: 16px;">
+        <h2>{{ title }}</h2>
+        <p>
           {{ mode === 'login' ? '登录后查看今日健康方案与空间联动' : '第一步，填写信息创建您的专属健康档案' }}
         </p>
       </div>
@@ -73,12 +85,14 @@ async function submit() {
           v-if="mode === 'register'"
           v-model="form.displayName"
           label="姓名"
+          :disabled="loading" autocomplete="name" maxlength="30"
           placeholder="请输入姓名或称呼"
           :rules="[{ required: true, message: '请输入姓名' }]"
         />
         <van-field
           v-model="form.phone"
           type="tel"
+          :disabled="loading" autocomplete="username" inputmode="tel"
           label="手机号"
           maxlength="11"
           placeholder="请输入 11 位手机号"
@@ -87,11 +101,12 @@ async function submit() {
         <van-field
           v-model="form.password"
           type="password"
+          :disabled="loading" :autocomplete="mode === 'register' ? 'new-password' : 'current-password'"
           label="密码"
-          placeholder="至少 8 位密码"
-          :rules="[{ required: true, message: '请输入至少 8 位密码' }]"
+          :placeholder="mode === 'register' ? '设置至少 8 位密码' : '请输入密码'"
+          :rules="[{ required: true, message: '请输入密码' }, { validator: (value: string) => mode === 'login' || value.length >= 8, message: '注册密码至少 8 位' }]"
         />
-        <van-button block round color="#0c5045" native-type="submit" :loading="loading">
+        <van-button block round color="#0c5045" native-type="submit" :loading="loading" :disabled="loading">
           {{ mode === 'login' ? '登 录' : '创建档案并继续' }}
         </van-button>
       </van-form>