feat(portal): 扫码登录 + 角色自动分发 (Phase 1.3 task #16)
- 新建 frontend-portal/src/api/qrcode.ts — /api/auth_qrcode/* API 适配
- 新建 frontend-portal/src/composables/useQrcodeLogin.ts — 扫码核心逻辑
- 新建 frontend-portal/src/views/QrcodeLogin.vue — Portal 扫码登录 UI
- 扫码成功后按角色自动跳:
- 只有 admin → /itadmin/
- 只有 agent → /itagent/
- admin+agent → /itportal/select(多角色)
- 默认 user → /itdesk/
- 改 frontend-portal/src/router/index.ts — 默认 / → /qrcode-login
(原 PortalSelect.vue 保留作多角色 fallback)
- 新建 docs/NGINX-DOMAIN-ROUTING.md — 运维域名分发配置模板
build: ✅ frontend-portal vue-tsc + vite build 通过
QrcodeLogin chunk 4.82 kB
This commit is contained in:
Simon
@@ -0,0 +1,327 @@
|
||||
<!-- =============================================================================
|
||||
// IT智能服务台 — Portal 扫码登录页 (Phase 1.3, task #16)
|
||||
// =============================================================================
|
||||
// 说明：替代原 PortalSelect.vue 的"企微 OAuth + 角色选择"流程
|
||||
// 新流程:Portal 显示二维码 → 员工扫码 → 后端 confirm → 按角色自动跳到对应端
|
||||
//
|
||||
// 角色分发规则(扫码成功后):
|
||||
// 只有 admin → /itadmin/(管理后台)
|
||||
// 只有 agent → /itagent/(坐席工作台)
|
||||
// admin + agent → /itportal/select(让用户选)
|
||||
// 默认 user → /itdesk/(H5 员工端)
|
||||
//
|
||||
// nginx 域名分发建议配置见 docs/NGINX-DOMAIN-ROUTING.md
|
||||
// ============================================================================= -->
|
||||
|
||||
<template>
|
||||
<div class="qrcode-login-page">
|
||||
<div class="qrcode-login-card">
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<h1 class="title">🛠️ IT智能服务台</h1>
|
||||
<p class="subtitle">扫码登录</p>
|
||||
</div>
|
||||
|
||||
<!-- 二维码区 -->
|
||||
<div class="qrcode-section">
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading && !qrcodePngBase64" class="qrcode-placeholder">
|
||||
<el-icon class="is-loading" :size="48"><Loading /></el-icon>
|
||||
<p>正在生成二维码…</p>
|
||||
</div>
|
||||
|
||||
<!-- 二维码图片 -->
|
||||
<img
|
||||
v-else-if="qrcodePngBase64"
|
||||
:src="`data:image/png;base64,${qrcodePngBase64}`"
|
||||
alt="登录二维码"
|
||||
class="qrcode-image"
|
||||
:class="{ 'qrcode-expired': status === 'expired' }"
|
||||
/>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="errorMessage" class="qrcode-error">
|
||||
<el-icon :size="48" color="#ef4444"><CircleCloseFilled /></el-icon>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<el-button type="primary" @click="refreshQrcode">重试</el-button>
|
||||
</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">
|
||||
{{ scannedBy || '员工' }},请在手机上点<span class="highlight">"确认登录"</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status === 'confirmed'" class="status-confirmed">
|
||||
<el-icon :size="32" color="#67c23a"><Loading /></el-icon>
|
||||
<p>登录成功,正在跳转…</p>
|
||||
</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" @click="refreshQrcode">刷新二维码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="footer">
|
||||
<p class="footer-text">
|
||||
扫码后系统会根据您的角色自动跳转到对应工作台
|
||||
</p>
|
||||
<p class="footer-sub">
|
||||
坐席/管理员/H5 多端入口统一管理
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// ============================================================================
|
||||
// 导入
|
||||
// ============================================================================
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useQrcodeLogin } from '@/composables/useQrcodeLogin'
|
||||
|
||||
// ============================================================================
|
||||
// 角色 URL 映射(跟 backend/app/api/portal.py _get_role_url 保持一致)
|
||||
// ============================================================================
|
||||
const ROLE_URLS = {
|
||||
user: '/itdesk/',
|
||||
agent: '/itagent/',
|
||||
admin: '/itadmin/',
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 角色分发逻辑
|
||||
// ============================================================================
|
||||
/**
|
||||
* 按角色决定跳到哪个端
|
||||
* 规则:
|
||||
* - 只有 admin → /itadmin/
|
||||
* - 只有 agent → /itagent/
|
||||
* - admin + agent → /itportal/select(用户多角色,给选择页)
|
||||
* - 默认 user → /itdesk/
|
||||
*/
|
||||
function dispatchToRole(roles: string[]): string {
|
||||
const hasAgent = roles.includes('agent')
|
||||
const hasAdmin = roles.includes('admin')
|
||||
|
||||
// 多角色:让用户在 PortalSelect 选择
|
||||
if (hasAdmin && hasAgent) {
|
||||
return '/itportal/select'
|
||||
}
|
||||
if (hasAdmin) {
|
||||
return ROLE_URLS.admin
|
||||
}
|
||||
if (hasAgent) {
|
||||
return ROLE_URLS.agent
|
||||
}
|
||||
// 默认 user
|
||||
return ROLE_URLS.user
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录成功回调
|
||||
* 1. 存 token 到 localStorage(双 key: portal_token + 各端 token,跨端共享)
|
||||
* 2. 按角色自动跳到对应端(整页跳,因为跨基础路径)
|
||||
*/
|
||||
function handleLoginSuccess(token: string, _employeeId: string, roles: string[]): void {
|
||||
// 存 token 到所有可能的 key(避免各端读不到)
|
||||
localStorage.setItem('portal_token', token)
|
||||
localStorage.setItem('agent_token', token)
|
||||
localStorage.setItem('admin_token', token)
|
||||
localStorage.setItem('agent_user_id', _employeeId)
|
||||
|
||||
// 按角色跳
|
||||
const targetUrl = dispatchToRole(roles)
|
||||
const separator = targetUrl.includes('?') ? '&' : '?'
|
||||
const finalUrl = `${targetUrl}${separator}token=${encodeURIComponent(token)}`
|
||||
|
||||
ElMessage.success('登录成功')
|
||||
// 短暂延迟让用户看到"登录成功"提示
|
||||
setTimeout(() => {
|
||||
window.location.href = finalUrl
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const {
|
||||
qrcodePngBase64,
|
||||
countdown,
|
||||
status,
|
||||
scannedBy,
|
||||
loading,
|
||||
errorMessage,
|
||||
startLogin,
|
||||
refreshQrcode,
|
||||
stopPolling,
|
||||
} = useQrcodeLogin({
|
||||
onSuccess: handleLoginSuccess,
|
||||
onError: (msg) => ElMessage.error(msg),
|
||||
})
|
||||
|
||||
// ============================================================================
|
||||
// 生命周期
|
||||
// ============================================================================
|
||||
onMounted(() => {
|
||||
startLogin()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qrcode-login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.qrcode-login-card {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
background: rgba(30, 41, 59, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 40px 32px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(71, 85, 105, 0.5);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #f1f5f9;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #94a3b8;
|
||||
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;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
|
||||
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: #94a3b8;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.status-main {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #f1f5f9;
|
||||
margin: 0 0 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-sub {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.status-confirmed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
color: #60a5fa;
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #60a5fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid rgba(71, 85, 105, 0.5);
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.footer-sub {
|
||||
margin: 4px 0;
|
||||
font-size: 11px;
|
||||
color: #475569;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user