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)
This commit is contained in:
Simon
@@ -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,
|
||||
}
|
||||
}
|
||||
+308
-124
@@ -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
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 二维码图片(base64 PNG) -->
|
||||
<img
|
||||
v-else-if="qrcodePngBase64"
|
||||
:src="`data:image/png;base64,${qrcodePngBase64}`"
|
||||
alt="登录二维码"
|
||||
class="qrcode-image"
|
||||
:class="{ 'qrcode-expired': status === 'expired' }"
|
||||
/>
|
||||
|
||||
<!-- 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
|
||||
}
|
||||
|
||||
ElMessage.success('登录成功')
|
||||
} catch (error: any) {
|
||||
// 错误信息已在 Axios 拦截器中显示
|
||||
console.error('登录失败:', error)
|
||||
}
|
||||
function handleLoginSuccess(token: string, _employeeId: string, _roles: string[]): void {
|
||||
localStorage.setItem('agent_token', token)
|
||||
localStorage.setItem('portal_token', token)
|
||||
ElMessage.success('登录成功')
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
.login-hint p {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.login-hint-sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-placeholder, #c0c4cc);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user