完善测试建表并统一前端格式

2026-07-14 01:32:14 +08:00
parent 2efcede800
commit 2ca6fd9306
36 changed files with 714 additions and 478 deletions
@@ -40,8 +40,7 @@ export async function fetchUnreadNotificationCount() {
 }

 export async function markAllNotificationsRead() {
-  const { data } = await apiClient.put<ApiResponse<{ read_count: number }>>(
-    '/notifications/read-all'
-  )
+  const { data } =
+    await apiClient.put<ApiResponse<{ read_count: number }>>('/notifications/read-all')
  return data.data
 }
@@ -167,7 +167,9 @@ async function handleRegister() {
 }
 const modeEyebrow = computed(() => (topTab.value === 'register' ? 'Register' : 'Login'))
 const modeTitle = computed(() => (topTab.value === 'register' ? '创建账号' : '欢迎回来'))
-const modeSubtitle = computed(() => (topTab.value === 'register' ? '注册后即可发布或租赁账号' : '登录后即可发布或租赁账号'))
+const modeSubtitle = computed(() =>
+  topTab.value === 'register' ? '注册后即可发布或租赁账号' : '登录后即可发布或租赁账号'
+)
 </script>

 <template>
@@ -198,14 +200,10 @@ const modeSubtitle = computed(() => (topTab.value === 'register' ? '注册后即
        </div>

        <div class="login-tabs">
-          <button
-            :class="{ active: topTab === 'login' }"
-            @click="switchTab('login')"
-          >登录</button>
-          <button
-            :class="{ active: topTab === 'register' }"
-            @click="switchTab('register')"
-          >注册</button>
+          <button :class="{ active: topTab === 'login' }" @click="switchTab('login')">登录</button>
+          <button :class="{ active: topTab === 'register' }" @click="switchTab('register')">
+            注册
+          </button>
        </div>

        <!-- 登录模式下的方式切换 -->
@@ -213,23 +211,48 @@ const modeSubtitle = computed(() => (topTab.value === 'register' ? '注册后即
          <button
            :class="{ active: loginMode === 'password' }"
            @click="switchLoginMode('password')"
-          >密码登录</button>
+          >
+            密码登录
+          </button>
          <span class="sub-divider">|</span>
-          <button
-            :class="{ active: loginMode === 'sms' }"
-            @click="switchLoginMode('sms')"
-          >短信登录</button>
+          <button :class="{ active: loginMode === 'sms' }" @click="switchLoginMode('sms')">
+            短信登录
+          </button>
        </div>

        <!-- 短信登录 -->
-        <el-form v-if="topTab === 'login' && loginMode === 'sms'" class="user-form" label-position="top" @submit.prevent>
+        <el-form
+          v-if="topTab === 'login' && loginMode === 'sms'"
+          class="user-form"
+          label-position="top"
+          @submit.prevent
+        >
          <el-form-item label="手机号">
-            <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" size="large" :prefix-icon="Iphone" />
+            <el-input
+              v-model="form.phone"
+              maxlength="11"
+              placeholder="请输入手机号"
+              size="large"
+              :prefix-icon="Iphone"
+            />
          </el-form-item>
          <el-form-item label="图形验证码">
            <div class="user-captcha-row">
-              <el-input v-model="form.captchaCode" maxlength="4" placeholder="请输入图形验证码" size="large" :prefix-icon="Key" @keyup.enter="handleSendCode" />
-              <button class="user-captcha-image" type="button" :disabled="captchaLoading" aria-label="刷新图形验证码" @click="refreshCaptcha">
+              <el-input
+                v-model="form.captchaCode"
+                maxlength="4"
+                placeholder="请输入图形验证码"
+                size="large"
+                :prefix-icon="Key"
+                @keyup.enter="handleSendCode"
+              />
+              <button
+                class="user-captcha-image"
+                type="button"
+                :disabled="captchaLoading"
+                aria-label="刷新图形验证码"
+                @click="refreshCaptcha"
+              >
                <img v-if="captcha" :src="captcha.image" alt="图形验证码" />
                <span v-else>刷新</span>
              </button>
@@ -237,37 +260,107 @@ const modeSubtitle = computed(() => (topTab.value === 'register' ? '注册后即
          </el-form-item>
          <el-form-item label="验证码">
            <div class="user-code-row">
-              <el-input v-model="form.code" maxlength="6" placeholder="6 位验证码" size="large" :prefix-icon="ChatLineRound" @keyup.enter="handleLogin" />
-              <el-button size="large" :disabled="countDown > 0 || sending" :loading="sending" @click="handleSendCode">
+              <el-input
+                v-model="form.code"
+                maxlength="6"
+                placeholder="6 位验证码"
+                size="large"
+                :prefix-icon="ChatLineRound"
+                @keyup.enter="handleLogin"
+              />
+              <el-button
+                size="large"
+                :disabled="countDown > 0 || sending"
+                :loading="sending"
+                @click="handleSendCode"
+              >
                {{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
              </el-button>
            </div>
          </el-form-item>
-          <el-button class="user-login-btn" type="primary" size="large" :loading="loading" @click="handleLogin">登录</el-button>
+          <el-button
+            class="user-login-btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            @click="handleLogin"
+            >登录</el-button
+          >
          <p class="login-notice">未收到验证码时，请稍后重试或联系客服处理</p>
        </el-form>

        <!-- 密码登录 -->
-        <el-form v-if="topTab === 'login' && loginMode === 'password'" class="user-form" label-position="top" @submit.prevent>
+        <el-form
+          v-if="topTab === 'login' && loginMode === 'password'"
+          class="user-form"
+          label-position="top"
+          @submit.prevent
+        >
          <el-form-item label="手机号">
-            <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" size="large" :prefix-icon="Iphone" />
+            <el-input
+              v-model="form.phone"
+              maxlength="11"
+              placeholder="请输入手机号"
+              size="large"
+              :prefix-icon="Iphone"
+            />
          </el-form-item>
          <el-form-item label="密码">
-            <el-input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码" size="large" :prefix-icon="Lock" show-password @keyup.enter="handlePasswordLogin" />
+            <el-input
+              v-model="form.password"
+              type="password"
+              maxlength="20"
+              placeholder="请输入密码"
+              size="large"
+              :prefix-icon="Lock"
+              show-password
+              @keyup.enter="handlePasswordLogin"
+            />
          </el-form-item>
-          <el-button class="user-login-btn" type="primary" size="large" :loading="loading" @click="handlePasswordLogin">登录</el-button>
+          <el-button
+            class="user-login-btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            @click="handlePasswordLogin"
+            >登录</el-button
+          >
          <p class="login-notice">未设置密码？请使用短信登录后前往个人中心设置密码</p>
        </el-form>

        <!-- 注册 -->
-        <el-form v-if="topTab === 'register'" class="user-form" label-position="top" @submit.prevent>
+        <el-form
+          v-if="topTab === 'register'"
+          class="user-form"
+          label-position="top"
+          @submit.prevent
+        >
          <el-form-item label="手机号">
-            <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" size="large" :prefix-icon="Iphone" />
+            <el-input
+              v-model="form.phone"
+              maxlength="11"
+              placeholder="请输入手机号"
+              size="large"
+              :prefix-icon="Iphone"
+            />
          </el-form-item>
          <el-form-item label="图形验证码">
            <div class="user-captcha-row">
-              <el-input v-model="form.captchaCode" maxlength="4" placeholder="请输入图形验证码" size="large" :prefix-icon="Key" @keyup.enter="handleSendCode" />
-              <button class="user-captcha-image" type="button" :disabled="captchaLoading" aria-label="刷新图形验证码" @click="refreshCaptcha">
+              <el-input
+                v-model="form.captchaCode"
+                maxlength="4"
+                placeholder="请输入图形验证码"
+                size="large"
+                :prefix-icon="Key"
+                @keyup.enter="handleSendCode"
+              />
+              <button
+                class="user-captcha-image"
+                type="button"
+                :disabled="captchaLoading"
+                aria-label="刷新图形验证码"
+                @click="refreshCaptcha"
+              >
                <img v-if="captcha" :src="captcha.image" alt="图形验证码" />
                <span v-else>刷新</span>
              </button>
@@ -275,19 +368,62 @@ const modeSubtitle = computed(() => (topTab.value === 'register' ? '注册后即
          </el-form-item>
          <el-form-item label="验证码">
            <div class="user-code-row">
-              <el-input v-model="form.code" maxlength="6" placeholder="6 位验证码" size="large" :prefix-icon="ChatLineRound" @keyup.enter="handleRegister" />
-              <el-button size="large" :disabled="countDown > 0 || sending" :loading="sending" @click="handleSendCode">
+              <el-input
+                v-model="form.code"
+                maxlength="6"
+                placeholder="6 位验证码"
+                size="large"
+                :prefix-icon="ChatLineRound"
+                @keyup.enter="handleRegister"
+              />
+              <el-button
+                size="large"
+                :disabled="countDown > 0 || sending"
+                :loading="sending"
+                @click="handleSendCode"
+              >
                {{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
              </el-button>
            </div>
          </el-form-item>
-          <el-form-item label="设置密码" :error="form.password && !passwordValid ? '密码长度 8-20 位' : ''">
-            <el-input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码（8-20 位）" size="large" :prefix-icon="Lock" show-password :class="{ 'is-error': form.password && !passwordValid }" />
+          <el-form-item
+            label="设置密码"
+            :error="form.password && !passwordValid ? '密码长度 8-20 位' : ''"
+          >
+            <el-input
+              v-model="form.password"
+              type="password"
+              maxlength="20"
+              placeholder="请输入密码（8-20 位）"
+              size="large"
+              :prefix-icon="Lock"
+              show-password
+              :class="{ 'is-error': form.password && !passwordValid }"
+            />
          </el-form-item>
-          <el-form-item label="确认密码" :error="form.confirmPassword && !confirmValid ? '两次密码不一致' : ''">
-            <el-input v-model="form.confirmPassword" type="password" maxlength="20" placeholder="请再次输入密码" size="large" :prefix-icon="Lock" show-password :class="{ 'is-error': form.confirmPassword && !confirmValid }" />
+          <el-form-item
+            label="确认密码"
+            :error="form.confirmPassword && !confirmValid ? '两次密码不一致' : ''"
+          >
+            <el-input
+              v-model="form.confirmPassword"
+              type="password"
+              maxlength="20"
+              placeholder="请再次输入密码"
+              size="large"
+              :prefix-icon="Lock"
+              show-password
+              :class="{ 'is-error': form.confirmPassword && !confirmValid }"
+            />
          </el-form-item>
-          <el-button class="user-login-btn" type="primary" size="large" :loading="loading" @click="handleRegister">注册</el-button>
+          <el-button
+            class="user-login-btn"
+            type="primary"
+            size="large"
+            :loading="loading"
+            @click="handleRegister"
+            >注册</el-button
+          >
          <p class="login-notice">注册即表示同意《用户协议》和《隐私政策》</p>
        </el-form>
      </div>
@@ -174,21 +174,25 @@ async function handlePasswordLogin() {
        <!-- 密码登录 -->
        <template v-if="loginMode === 'password'">
          <label class="auth-input-row">
-            <input
-              v-model="form.password"
-              type="password"
-              maxlength="20"
-              placeholder="密码"
-            />
+            <input v-model="form.password" type="password" maxlength="20" placeholder="密码" />
          </label>
        </template>

        <div class="assist-row">
          <span v-if="loginMode === 'sms'">验证码登录</span>
          <span v-else>密码登录</span>
-          <button v-if="loginMode === 'sms'" class="link-btn" type="button" @click="switchToPassword">密码登录</button>
+          <button
+            v-if="loginMode === 'sms'"
+            class="link-btn"
+            type="button"
+            @click="switchToPassword"
+          >
+            密码登录
+          </button>
          <button v-else class="link-btn" type="button" @click="switchToSms">短信验证码登录</button>
-          <RouterLink v-if="loginMode === 'sms'" to="/m/register">没有账号？<b>立即注册</b></RouterLink>
+          <RouterLink v-if="loginMode === 'sms'" to="/m/register"
+            >没有账号？<b>立即注册</b></RouterLink
+          >
        </div>

        <div class="agreement-row">
@@ -129,7 +129,13 @@ function typeLabel(type: string) {
            >
              查看详情
            </van-button>
-            <van-button v-if="!item.read_at" size="small" round type="primary" @click="markRead(item)">
+            <van-button
+              v-if="!item.read_at"
+              size="small"
+              round
+              type="primary"
+              @click="markRead(item)"
+            >
              已读
            </van-button>
          </div>
@@ -309,7 +309,9 @@ async function savePassword() {
      </el-form>
      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
-        <el-button type="primary" :loading="savingPassword" @click="savePassword">保存密码</el-button>
+        <el-button type="primary" :loading="savingPassword" @click="savePassword"
+          >保存密码</el-button
+        >
      </template>
    </el-dialog>
  </section>