feat(agent): 扫码登录前端 UI (Phase 1.2 task #15)

- 新建 src/api/qrcode.ts — 后端 /api/auth_qrcode/* API 适配层 - 新建 src/composables/useQrcodeLogin.ts — 扫码登录核心逻辑 (create → poll 2s 间隔 → 120s 倒计时 → 状态机 waiting/scanned/confirmed/expired) - 重写 src/views/Login.vue — 企微扫码 UI 替代原用户名表单 - 展示后端返回的二维码 PNG(base64) - 倒计时 + 自动过期 - 扫码成功后跳 /workspace - 管理员 OTP 场景预留按钮(Phase 2.4 集成) build: ✅ vue-tsc + vite build 通过 (Login chunk 4.91 kB)
2026-06-21 00:46:50 +08:00
parent 8bfd0cfdc3
commit 8c609e72ba
3 changed files with 603 additions and 124 deletions
@@ -0,0 +1,80 @@
+// =============================================================================
+// 企微IT智能服务台 — 扫码登录 API 适配层 (Phase 1.2)
+// =============================================================================
+// 说明：封装 /api/auth_qrcode/* 4 个端点
+// 对应后端: backend/app/api/auth_qrcode.py (Phase 1.1, task #14)
+//
+// 4 个端点:
+//   POST /auth_qrcode/create            坐席端:生成二维码 ticket
+//   GET  /auth_qrcode/poll/{ticket}    坐席端:轮询扫码状态
+//   POST /auth_qrcode/scan             企微 OAuth 回调:写扫码状态(后端内部用)
+//   POST /auth_qrcode/confirm          员工扫码后,在手机上确认登录(后端内部用)
+//
+// 前端只用前 2 个(create + poll),后 2 个是后端内部流程,不直接调。
+// =============================================================================
+
+import apiClient from './index'
+import type { AxiosResponse } from 'axios'
+
+// --------------------------------------------------------------------------
+// TypeScript 类型定义 — 与后端 schema/qrcode.py 保持一致
+// --------------------------------------------------------------------------
+
+/** create 响应:坐席端拿到二维码 + ticket */
+export interface QrcodeCreateData {
+  /** 二维码标识(UUID),用于轮询 */
+  ticket: string
+  /** 企微 OAuth 扫码 URL(员工用企微扫这个 URL) */
+  qrcode_url: string
+  /** 二维码有效期(秒),固定 120 */
+  expires_in: number
+  /** 过期时间戳(ISO 8601) */
+  expires_at: string
+  /** 二维码 PNG 图片 base64(可选,如果后端没生成则前端需要 qrcode 库渲染 qrcode_url) */
+  qrcode_png_base64?: string
+}
+
+/** poll 响应:扫码状态 */
+export type QrcodePollStatus = 'waiting' | 'scanned' | 'confirmed' | 'expired'
+
+export interface QrcodePollData {
+  /** 当前状态 */
+  status: QrcodePollStatus
+  /** 已扫码时的员工信息 */
+  employee_id?: string
+  /** 已扫码时的员工姓名 */
+  name?: string
+  /** 已确认时的 token(confirmed 状态才有) */
+  token?: string
+  /** 已确认时的角色列表 */
+  roles?: string[]
+  /** 是否需要 OTP 验证(管理员扫码登录时) */
+  require_otp?: boolean
+}
+
+// --------------------------------------------------------------------------
+// API 函数
+// --------------------------------------------------------------------------
+
+/**
+ * 生成登录二维码
+ * 坐席端进入登录页时调用,拿到 ticket + 二维码图片
+ *
+ * @returns 二维码信息
+ */
+export async function createQrcode(): Promise<QrcodeCreateData> {
+  const response: AxiosResponse = await apiClient.post('/auth_qrcode/create')
+  return response.data.data
+}
+
+/**
+ * 轮询扫码状态
+ * 坐席端每 2 秒调一次,直到 status='confirmed' 拿到 token
+ *
+ * @param ticket - 二维码标识
+ * @returns 扫码状态
+ */
+export async function pollQrcode(ticket: string): Promise<QrcodePollData> {
+  const response: AxiosResponse = await apiClient.get(`/auth_qrcode/poll/${ticket}`)
+  return response.data.data
+}
@@ -0,0 +1,215 @@
+// =============================================================================
+// 企微IT智能服务台 — 扫码登录 Composable (Phase 1.2)
+// =============================================================================
+// 说明：封装扫码登录核心逻辑(create → poll → 倒计时 → 确认)
+// 用法:
+//   const { qrcodeUrl, qrcodePngBase64, status, countdown, otpRequired,
+//           startLogin, confirmLogin, refreshQrcode } = useQrcodeLogin(onSuccess)
+//
+// 流程:
+//   1. startLogin() → 调 /auth_qrcode/create 拿 ticket + 二维码 → 启动轮询
+//   2. 后端返回 scanned → 状态切换为"已扫码,请在手机上确认"
+//   3. 后端返回 confirmed + token → 调 onSuccess(token, employee_id, roles)
+//   4. 倒计时 0 → 自动 refreshQrcode() 重新生成
+//
+// 配合 task #14 (后端 auth_qrcode.py) 使用
+// =============================================================================
+
+import { ref, onUnmounted, type Ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createQrcode, pollQrcode } from '@/api/qrcode'
+import type { QrcodePollStatus } from '@/api/qrcode'
+
+/** 轮询间隔(毫秒)— 2 秒,跟后端 ticket TTL 120s 匹配 */
+const POLL_INTERVAL_MS = 2000
+
+/** 倒计时精度(毫秒)— 1 秒刷新一次显示 */
+const COUNTDOWN_TICK_MS = 1000
+
+/** useQrcodeLogin 配置项 */
+export interface UseQrcodeLoginOptions {
+  /** 登录成功回调(token, employeeId, roles) */
+  onSuccess: (token: string, employeeId: string, roles: string[]) => void
+  /** 登录失败回调(可选,默认用 ElMessage.error) */
+  onError?: (message: string) => void
+}
+
+/** useQrcodeLogin 返回值 */
+export interface UseQrcodeLoginReturn {
+  /** 二维码图片 base64(后端生成 PNG 时) */
+  qrcodePngBase64: Ref<string | null>
+  /** 二维码扫码 URL(后端没返回 base64 时,前端可自己用 qrcode 库渲染) */
+  qrcodeUrl: Ref<string | null>
+  /** 剩余有效期(秒),0 表示已过期 */
+  countdown: Ref<number>
+  /** 当前扫码状态 */
+  status: Ref<QrcodePollStatus>
+  /** 是否需要 OTP 验证(管理员场景) */
+  otpRequired: Ref<boolean>
+  /** 已扫码的员工姓名(给 UI 提示用) */
+  scannedBy: Ref<string | null>
+  /** 加载中(创建二维码时) */
+  loading: Ref<boolean>
+  /** 错误信息(给 UI 显示) */
+  errorMessage: Ref<string | null>
+  /** 开始扫码登录(create ticket + 启动轮询) */
+  startLogin: () => Promise<void>
+  /** 刷新二维码(ticket 过期时) */
+  refreshQrcode: () => Promise<void>
+  /** 停止轮询(组件卸载时自动调用) */
+  stopPolling: () => void
+}
+
+export function useQrcodeLogin(options: UseQrcodeLoginOptions): UseQrcodeLoginReturn {
+  // --------------------------------------------------------------------------
+  // 响应式状态
+  // --------------------------------------------------------------------------
+  const qrcodePngBase64 = ref<string | null>(null)
+  const qrcodeUrl = ref<string | null>(null)
+  const countdown = ref<number>(0)
+  const status = ref<QrcodePollStatus>('waiting')
+  const otpRequired = ref<boolean>(false)
+  const scannedBy = ref<string | null>(null)
+  const loading = ref<boolean>(false)
+  const errorMessage = ref<string | null>(null)
+
+  // --------------------------------------------------------------------------
+  // 内部状态(不暴露给外部)
+  // --------------------------------------------------------------------------
+  let ticket: string | null = null
+  let pollTimer: ReturnType<typeof setInterval> | null = null
+  let countdownTimer: ReturnType<typeof setInterval> | null = null
+  let expiresAt: number | null = null  // 时间戳(毫秒)
+
+  // --------------------------------------------------------------------------
+  // 工具:清理所有 timer
+  // --------------------------------------------------------------------------
+  function clearTimers(): void {
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = null
+    }
+    if (countdownTimer) {
+      clearInterval(countdownTimer)
+      countdownTimer = null
+    }
+  }
+
+  // --------------------------------------------------------------------------
+  // 工具:启动倒计时(每秒刷新 countdown)
+  // --------------------------------------------------------------------------
+  function startCountdown(): void {
+    if (countdownTimer) clearInterval(countdownTimer)
+    countdownTimer = setInterval(() => {
+      if (!expiresAt) {
+        countdown.value = 0
+        return
+      }
+      const remaining = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000))
+      countdown.value = remaining
+      if (remaining === 0 && status.value === 'waiting') {
+        // 二维码过期但还没扫 → 标记 expired,停止轮询
+        status.value = 'expired'
+        stopPolling()
+      }
+    }, COUNTDOWN_TICK_MS)
+  }
+
+  // --------------------------------------------------------------------------
+  // 工具:启动轮询(每 2s 调 poll)
+  // --------------------------------------------------------------------------
+  function startPolling(): void {
+    if (pollTimer) clearInterval(pollTimer)
+    pollTimer = setInterval(async () => {
+      if (!ticket) return
+      try {
+        const data = await pollQrcode(ticket)
+        status.value = data.status
+        scannedBy.value = data.name || null
+        otpRequired.value = !!data.require_otp
+
+        if (data.status === 'confirmed' && data.token && data.employee_id) {
+          // 登录成功
+          stopPolling()
+          const roles = data.roles || ['agent']
+          options.onSuccess(data.token, data.employee_id, roles)
+        } else if (data.status === 'expired') {
+          stopPolling()
+        }
+      } catch (err: any) {
+        // 轮询失败不打断 UI(下次轮询会重试)
+        console.warn('[useQrcodeLogin] poll error:', err)
+      }
+    }, POLL_INTERVAL_MS)
+  }
+
+  // --------------------------------------------------------------------------
+  // 公开方法:停止轮询
+  // --------------------------------------------------------------------------
+  function stopPolling(): void {
+    clearTimers()
+  }
+
+  // --------------------------------------------------------------------------
+  // 公开方法:开始扫码登录
+  // --------------------------------------------------------------------------
+  async function startLogin(): Promise<void> {
+    if (loading.value) return
+    loading.value = true
+    errorMessage.value = null
+    stopPolling()  // 清旧 timer
+
+    try {
+      const data = await createQrcode()
+      ticket = data.ticket
+      qrcodeUrl.value = data.qrcode_url
+      qrcodePngBase64.value = data.qrcode_png_base64 || null
+      countdown.value = data.expires_in
+      expiresAt = Date.now() + data.expires_in * 1000
+      status.value = 'waiting'
+      scannedBy.value = null
+      otpRequired.value = false
+
+      startCountdown()
+      startPolling()
+    } catch (err: any) {
+      const msg = err?.message || '生成二维码失败'
+      errorMessage.value = msg
+      if (options.onError) {
+        options.onError(msg)
+      } else {
+        ElMessage.error(msg)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // --------------------------------------------------------------------------
+  // 公开方法:刷新二维码(ticket 过期后用户点"刷新"按钮)
+  // --------------------------------------------------------------------------
+  async function refreshQrcode(): Promise<void> {
+    await startLogin()
+  }
+
+  // --------------------------------------------------------------------------
+  // 生命周期:组件卸载时清理 timer
+  // --------------------------------------------------------------------------
+  onUnmounted(() => {
+    stopPolling()
+  })
+
+  return {
+    qrcodePngBase64,
+    qrcodeUrl,
+    countdown,
+    status,
+    otpRequired,
+    scannedBy,
+    loading,
+    errorMessage,
+    startLogin,
+    refreshQrcode,
+    stopPolling,
+  }
+}
@@ -1,80 +1,121 @@
 <!-- =============================================================================
-// 企微IT智能服务台 — 坐席登录页面
+// 企微IT智能服务台 — 坐席扫码登录页 (Phase 1.2, task #15)
 // =============================================================================
-// 说明：坐席登录页面，简单的用户名+姓名表单
-// 登录成功后跳转到工作台页面
-// 第一步不做密码验证，仅输入用户ID和姓名即可登录
+// 说明:重写自原"用户名 + 姓名表单"登录,改为"企微扫码登录"
+//
+// 流程:
+//   1. 进入页面 → useQrcodeLogin.startLogin() 调后端 /auth_qrcode/create
+//   2. 展示二维码 + 倒计时(120s)
+//   3. 员工用企微扫 → 后端状态 → scanned → UI 切换"已扫码,请在手机上确认"
+//   4. 员工在手机上点确认 → 后端 confirm → 拿到 token → 写 localStorage → 跳 /workspace
+//   5. 倒计时归 0 → 自动停止轮询,UI 显示"已过期",用户点"刷新二维码"
+//
+// 管理员场景(扫码确认后 require_otp=true)→ 当前版本暂未集成 OTP 输入框
+//   OTP 二次认证由 task #17 (Phase 2.1 后端 MFA) + task #20 (Phase 2.4 前端 MFA UI) 负责
+//   短期方案:管理员走 /itportal/ 入口(那边有 OTP UI)
 // ============================================================================= -->

 <template>
-  <div class="login-container">
+  <div class="login-page">
    <div class="login-card">
-      <!-- 标题区域 -->
+      <!-- 标题区 -->
      <div class="login-title">
        <h1>🛠️ IT智能服务台</h1>
-        <p>坐席工作台 · 登录</p>
+        <p>坐席工作台 · 扫码登录</p>
      </div>

-      <!-- 登录表单 -->
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="loginRules"
-        label-position="top"
-        @submit.prevent="handleLogin"
-      >
-        <!-- 企微用户ID -->
-        <el-form-item label="企微用户ID" prop="userId">
-          <el-input
-            v-model="loginForm.userId"
-            placeholder="请输入企微用户ID"
-            prefix-icon="User"
-            size="large"
-            clearable
-          />
-        </el-form-item>
+      <!-- 二维码区 -->
+      <div class="qrcode-section">
+        <!-- 加载中 -->
+        <div v-if="loading && !qrcodePngBase64" class="qrcode-placeholder">
+          <el-icon class="is-loading"><Loading /></el-icon>
+          <p>正在生成二维码…</p>
+        </div>

-        <!-- 坐席姓名 -->
-        <el-form-item label="姓名" prop="name">
-          <el-input
-            v-model="loginForm.name"
-            placeholder="请输入您的姓名"
-            prefix-icon="UserFilled"
-            size="large"
-            clearable
+        <!-- 二维码图片(base64 PNG) -->
+        <img
+          v-else-if="qrcodePngBase64"
+          :src="`data:image/png;base64,${qrcodePngBase64}`"
+          alt="登录二维码"
+          class="qrcode-image"
+          :class="{ 'qrcode-expired': status === 'expired' }"
        />
-        </el-form-item>

-        <!-- OTP 动态码（admin 角色需要） -->
-        <el-form-item v-if="requireOtp" label="OTP动态码" prop="otpCode">
+        <!-- 降级:后端没返回 base64,显示 qrcode_url 提示用户手动复制 -->
+        <div v-else-if="qrcodeUrl" class="qrcode-fallback">
+          <p class="qrcode-fallback-hint">请复制以下链接到企业微信打开:</p>
          <el-input
-            v-model="loginForm.otpCode"
-            placeholder="请输入Google Authenticator中的6位动态码"
-            prefix-icon="Lock"
-            size="large"
-            maxlength="6"
-            clearable
-            @keyup.enter="handleLogin"
+            :model-value="qrcodeUrl"
+            readonly
+            type="textarea"
+            :rows="3"
+            class="qrcode-fallback-url"
          />
-        </el-form-item>
+          <p class="qrcode-fallback-tip">
+            (前端暂未集成二维码渲染库,后端应返回 base64 PNG)
+          </p>
+        </div>

-        <!-- 登录按钮 -->
-        <el-form-item>
+        <!-- 错误状态 -->
+        <div v-else-if="errorMessage" class="qrcode-error">
+          <el-icon><CircleClose /></el-icon>
+          <p>{{ errorMessage }}</p>
+        </div>
+      </div>
+
+      <!-- 状态文字 -->
+      <div class="status-section">
+        <!-- 等待扫码 -->
+        <div v-if="status === 'waiting' && countdown > 0" class="status-waiting">
+          <p class="status-main">
+            <el-icon><Iphone /></el-icon>
+            请用<span class="highlight">企业微信</span>扫描二维码
+          </p>
+          <p class="status-sub">
+            二维码 <span class="countdown">{{ countdown }}</span> 秒后过期
+          </p>
+        </div>
+
+        <!-- 已扫码,等待员工在手机上确认 -->
+        <div v-else-if="status === 'scanned'" class="status-scanned">
+          <p class="status-main">
+            <el-icon color="#67c23a"><Check /></el-icon>
+            扫码成功
+          </p>
+          <p class="status-sub" v-if="scannedBy">
+            {{ scannedBy }},请在手机上点<span class="highlight">"确认登录"</span>
+          </p>
+          <p class="status-sub" v-else>
+            请在手机上点<span class="highlight">"确认登录"</span>
+          </p>
          <el-button
+            v-if="otpRequired"
            type="primary"
-            size="large"
-            :loading="agentStore.logging"
-            style="width: 100%"
-            @click="handleLogin"
+            class="otp-button"
+            @click="handleOtpConfirm"
          >
-            {{ agentStore.logging ? '登录中...' : '登 录' }}
+            输入 OTP 动态码
          </el-button>
-        </el-form-item>
-      </el-form>
+        </div>

-      <!-- 提示信息 -->
+        <!-- 已过期 -->
+        <div v-else-if="status === 'expired'" class="status-expired">
+          <p class="status-main">
+            <el-icon color="#e6a23c"><Warning /></el-icon>
+            二维码已过期
+          </p>
+          <el-button type="primary" class="refresh-button" @click="refreshQrcode">
+            刷新二维码
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 底部提示 -->
      <div class="login-hint">
-        使用企微账号登录，姓名将自动获取
+        <p>登录即表示同意《IT智能服务台使用规范》</p>
+        <p class="login-hint-sub">
+          首次使用请确保已在企业微信中完成认证
+        </p>
      </div>
    </div>
  </div>
@@ -84,87 +125,230 @@
 // ============================================================================
 // 导入
 // ============================================================================
-import { ref, reactive } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
-import { useAgentStore } from '@/stores/agent'
+import { useQrcodeLogin } from '@/composables/useQrcodeLogin'

 // ============================================================================
 // 状态
 // ============================================================================
-
-/** 坐席 Store */
-const agentStore = useAgentStore()
-
-/** 表单引用 */
-const loginFormRef = ref<FormInstance>()
-
-/** 登录表单数据 */
-const loginForm = reactive({
-  /** 企微用户ID */
-  userId: '',
-  /** 坐席姓名 */
-  name: '',
-  /** OTP 动态码 */
-  otpCode: '',
-})
-
-/** 是否需要 OTP 验证 */
-const requireOtp = ref(false)
-
-/** 表单校验规则 */
-const loginRules = reactive<FormRules>({
-  userId: [
-    { required: true, message: '请输入企微用户ID', trigger: 'blur' },
-    { min: 1, max: 64, message: '用户ID长度为1-64个字符', trigger: 'blur' },
-  ],
-  name: [
-    { required: true, message: '请输入姓名', trigger: 'blur' },
-    { min: 1, max: 128, message: '姓名长度为1-128个字符', trigger: 'blur' },
-  ],
-})
-
-// ============================================================================
-// 方法
-// ============================================================================
+const router = useRouter()

 /**
- * 处理登录
- * 1. 校验表单
- * 2. 调用登录 API
- * 3. 如果返回 require_otp，显示 OTP 输入框
- * 4. 用户输入 OTP 后再次登录
- * 5. 成功后自动跳转
+ * 扫码登录成功回调
+ * 1. 存 token 到 localStorage(双 key: agent_token + portal_token,跨端共享)
+ * 2. 跳转到 /workspace
 */
-async function handleLogin(): Promise<void> {
-  // 表单校验
-  if (!loginFormRef.value) return
-  const valid = await loginFormRef.value.validate().catch(() => false)
-  if (!valid) return
-
-  try {
-    const data = await agentStore.login(loginForm.userId, loginForm.name, loginForm.otpCode || undefined)
-
-    // 检查是否需要 OTP 验证
-    if (data && 'require_otp' in data && data.require_otp) {
-      requireOtp.value = true
-      ElMessage.warning('请输入OTP动态码')
-      return
-    }
-
+function handleLoginSuccess(token: string, _employeeId: string, _roles: string[]): void {
+  localStorage.setItem('agent_token', token)
+  localStorage.setItem('portal_token', token)
  ElMessage.success('登录成功')
-  } catch (error: any) {
-    // 错误信息已在 Axios 拦截器中显示
-    console.error('登录失败:', error)
+  router.push('/workspace')
 }
+
+const {
+  qrcodePngBase64,
+  qrcodeUrl,
+  countdown,
+  status,
+  otpRequired,
+  scannedBy,
+  loading,
+  errorMessage,
+  startLogin,
+  refreshQrcode,
+  stopPolling,
+} = useQrcodeLogin({
+  onSuccess: handleLoginSuccess,
+  onError: (msg) => ElMessage.error(msg),
+})
+
+/**
+ * 管理员 OTP 输入按钮(暂未实现完整流程,提示用户去 /itportal/)
+ * Phase 2.4 完成后这里跳到 OTP 输入弹窗
+ */
+function handleOtpConfirm(): void {
+  ElMessage.info('管理员 OTP 二次认证:请前往 /itportal/ 完成(Phase 2.4 即将上线)')
 }
+
+// ============================================================================
+// 生命周期
+// ============================================================================
+onMounted(() => {
+  // 进入页面立即生成二维码
+  startLogin()
+})
+
+onUnmounted(() => {
+  // 离开页面停止轮询(防止内存泄漏)
+  stopPolling()
+})
 </script>

 <style scoped>
+/* 登录页面容器:全屏居中 */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 24px;
+}
+
+/* 登录卡片 */
+.login-card {
+  width: 100%;
+  max-width: 440px;
+  background: var(--bg-secondary, #ffffff);
+  border-radius: 16px;
+  padding: 40px 32px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+/* 标题区 */
+.login-title {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-title h1 {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--text-primary, #303133);
+  margin: 0 0 8px 0;
+}
+
+.login-title p {
+  font-size: 14px;
+  color: var(--text-tertiary, #909399);
+  margin: 0;
+}
+
+/* 二维码区 */
+.qrcode-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+  margin-bottom: 24px;
+}
+
+.qrcode-image {
+  width: 200px;
+  height: 200px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  transition: opacity 0.3s;
+}
+
+.qrcode-expired {
+  opacity: 0.3;
+  filter: grayscale(100%);
+}
+
+.qrcode-placeholder,
+.qrcode-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: var(--text-tertiary, #909399);
+}
+
+.qrcode-placeholder .el-icon,
+.qrcode-error .el-icon {
+  font-size: 48px;
+}
+
+.qrcode-fallback {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.qrcode-fallback-hint {
+  font-size: 13px;
+  color: var(--text-regular, #606266);
+  margin: 0;
+}
+
+.qrcode-fallback-url {
+  font-size: 11px;
+  font-family: monospace;
+}
+
+.qrcode-fallback-tip {
+  font-size: 11px;
+  color: var(--text-placeholder, #c0c4cc);
+  margin: 0;
+  text-align: center;
+}
+
+/* 状态区 */
+.status-section {
+  text-align: center;
+  margin-bottom: 24px;
+  min-height: 80px;
+}
+
+.status-main {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary, #303133);
+  margin: 0 0 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.status-sub {
+  font-size: 13px;
+  color: var(--text-tertiary, #909399);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.status-waiting .status-main .el-icon {
+  font-size: 20px;
+}
+
+.countdown {
+  color: #409eff;
+  font-weight: 600;
+  font-family: monospace;
+}
+
+.highlight {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.refresh-button,
+.otp-button {
+  margin-top: 16px;
+  width: 100%;
+}
+
+/* 底部提示 */
 .login-hint {
  text-align: center;
-  color: var(--text-tertiary);
+  color: var(--text-placeholder, #c0c4cc);
  font-size: 12px;
-  margin-top: 16px;
+  line-height: 1.6;
+  border-top: 1px solid var(--border-color-lighter, #ebeef5);
+  padding-top: 16px;
+}
+
+.login-hint p {
+  margin: 4px 0;
+}
+
+.login-hint-sub {
+  font-size: 11px;
+  color: var(--text-placeholder, #c0c4cc);
 }
 </style>