feat: implement QR code scan login system with admin control
- Add scan login service with Redis-based token management - Add scan login API routes for token generation and validation - Add QRCodeLogin component for PC-side QR code display - Add EntryQRCode component for mass login scenarios - Add ScanLoginView for mobile-side login form - Add localStorage persistence for user identity - Add logout functionality to mobile client - Add auto-redirect for logged-in users - Add admin console control for QR code display on big screen - Add socket event forwarding from admin to screen display Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
219
packages/client-screen/src/components/EntryQRCode.vue
Normal file
219
packages/client-screen/src/components/EntryQRCode.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
const props = defineProps<{
|
||||
mobileUrl: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
}>();
|
||||
|
||||
const qrCodeDataUrl = ref<string>('');
|
||||
|
||||
// Generate QR code
|
||||
async function generateQRCode() {
|
||||
try {
|
||||
qrCodeDataUrl.value = await QRCode.toDataURL(props.mobileUrl, {
|
||||
width: 400,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#1a1a2e',
|
||||
light: '#ffffff',
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to generate QR code:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle ESC key to close
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
emit('close');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
generateQRCode();
|
||||
window.addEventListener('keydown', handleKeydown);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="entry-qrcode-overlay" @click.self="emit('close')">
|
||||
<div class="entry-qrcode-modal">
|
||||
<!-- Close button -->
|
||||
<button class="close-btn" @click="emit('close')">
|
||||
<span>×</span>
|
||||
</button>
|
||||
|
||||
<!-- Title -->
|
||||
<h2 class="modal-title">扫码进入投票系统</h2>
|
||||
<p class="modal-subtitle">请使用微信扫描下方二维码</p>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div class="qrcode-container">
|
||||
<img v-if="qrCodeDataUrl" :src="qrCodeDataUrl" alt="入场二维码" class="qrcode-image" />
|
||||
<div v-else class="qrcode-loading">生成中...</div>
|
||||
</div>
|
||||
|
||||
<!-- URL hint -->
|
||||
<p class="url-hint">{{ mobileUrl }}</p>
|
||||
|
||||
<!-- Instructions -->
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
<span class="step-num">1</span>
|
||||
<span class="step-text">微信扫描二维码</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-num">2</span>
|
||||
<span class="step-text">填写姓名和部门</span>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-num">3</span>
|
||||
<span class="step-text">点击进入年会</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer hint -->
|
||||
<p class="footer-hint">按 ESC 或点击空白处关闭</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use '../assets/styles/variables.scss' as *;
|
||||
|
||||
.entry-qrcode-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.entry-qrcode-modal {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border-radius: 24px;
|
||||
padding: 48px 64px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 1px solid rgba($color-gold, 0.3);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: $color-text-muted;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: $color-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: $color-gold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 18px;
|
||||
color: $color-text-muted;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
display: inline-block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.qrcode-image {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qrcode-loading {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.url-hint {
|
||||
font-size: 14px;
|
||||
color: $color-text-muted;
|
||||
margin-bottom: 32px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba($color-gold, 0.2);
|
||||
color: $color-gold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 14px;
|
||||
color: $color-text-light;
|
||||
}
|
||||
|
||||
.footer-hint {
|
||||
font-size: 12px;
|
||||
color: $color-text-muted;
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
411
packages/client-screen/src/components/QRCodeLogin.vue
Normal file
411
packages/client-screen/src/components/QRCodeLogin.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import QRCode from 'qrcode';
|
||||
import { io, type Socket } from 'socket.io-client';
|
||||
import { SOCKET_EVENTS } from '@gala/shared/constants';
|
||||
import type { ScanStatusUpdatePayload, ScanLoginStatus } from '@gala/shared/types';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'login-success', data: { userId: string; userName: string; department: string; sessionToken: string }): void;
|
||||
(e: 'login-cancel'): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
serverUrl?: string;
|
||||
}>();
|
||||
|
||||
// State
|
||||
const socket = ref<Socket | null>(null);
|
||||
const scanToken = ref<string>('');
|
||||
const qrCodeDataUrl = ref<string>('');
|
||||
const status = ref<ScanLoginStatus>('pending');
|
||||
const expiresAt = ref<number>(0);
|
||||
const countdown = ref<number>(0);
|
||||
const isLoading = ref<boolean>(true);
|
||||
const error = ref<string>('');
|
||||
|
||||
// Computed
|
||||
const statusText = computed(() => {
|
||||
switch (status.value) {
|
||||
case 'pending':
|
||||
return '请使用微信扫描二维码';
|
||||
case 'scanned':
|
||||
return '已扫描，请在手机上完成登录';
|
||||
case 'confirmed':
|
||||
return '登录成功！';
|
||||
case 'expired':
|
||||
return '二维码已过期，请刷新';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
const isExpired = computed(() => status.value === 'expired' || countdown.value <= 0);
|
||||
|
||||
// Timer
|
||||
let countdownTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
// Initialize socket and generate QR code
|
||||
async function initialize() {
|
||||
isLoading.value = true;
|
||||
error.value = '';
|
||||
|
||||
try {
|
||||
// Connect socket
|
||||
const serverUrl = props.serverUrl || import.meta.env.VITE_SOCKET_URL || 'http://localhost:3000';
|
||||
socket.value = io(serverUrl, {
|
||||
transports: ['websocket', 'polling'],
|
||||
});
|
||||
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
socket.value!.on('connect', () => resolve());
|
||||
socket.value!.on('connect_error', (err) => reject(err));
|
||||
setTimeout(() => reject(new Error('Connection timeout')), 10000);
|
||||
});
|
||||
|
||||
// Generate QR code
|
||||
await generateQRCode();
|
||||
|
||||
// Listen for status updates
|
||||
socket.value.on(SOCKET_EVENTS.SCAN_STATUS_UPDATE as any, handleStatusUpdate);
|
||||
|
||||
// Start countdown
|
||||
startCountdown();
|
||||
} catch (err) {
|
||||
error.value = '连接服务器失败，请刷新重试';
|
||||
console.error('QR Login init error:', err);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function generateQRCode() {
|
||||
if (!socket.value?.id) {
|
||||
throw new Error('Socket not connected');
|
||||
}
|
||||
|
||||
const serverUrl = props.serverUrl || import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
||||
const response = await fetch(`${serverUrl}/api/scan/generate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ pcSocketId: socket.value.id }),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.success) {
|
||||
throw new Error(result.error || 'Failed to generate QR code');
|
||||
}
|
||||
|
||||
scanToken.value = result.data.scanToken;
|
||||
expiresAt.value = result.data.expiresAt;
|
||||
|
||||
// Generate QR code image
|
||||
qrCodeDataUrl.value = await QRCode.toDataURL(result.data.qrCodeUrl, {
|
||||
width: 256,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#ffffff',
|
||||
},
|
||||
});
|
||||
|
||||
// Subscribe to scan updates
|
||||
socket.value.emit(SOCKET_EVENTS.SCAN_SUBSCRIBE as any, { scanToken: scanToken.value });
|
||||
}
|
||||
|
||||
function handleStatusUpdate(data: ScanStatusUpdatePayload) {
|
||||
if (data.scanToken !== scanToken.value) return;
|
||||
|
||||
status.value = data.status;
|
||||
|
||||
if (data.status === 'confirmed' && data.userInfo) {
|
||||
// Login successful
|
||||
stopCountdown();
|
||||
emit('login-success', {
|
||||
userId: data.userInfo.userId,
|
||||
userName: data.userInfo.userName,
|
||||
department: data.userInfo.department,
|
||||
sessionToken: data.userInfo.sessionToken,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
stopCountdown();
|
||||
updateCountdown();
|
||||
countdownTimer = setInterval(updateCountdown, 1000);
|
||||
}
|
||||
|
||||
function stopCountdown() {
|
||||
if (countdownTimer) {
|
||||
clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateCountdown() {
|
||||
const remaining = Math.max(0, Math.floor((expiresAt.value - Date.now()) / 1000));
|
||||
countdown.value = remaining;
|
||||
|
||||
if (remaining <= 0) {
|
||||
status.value = 'expired';
|
||||
stopCountdown();
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
status.value = 'pending';
|
||||
await initialize();
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
emit('login-cancel');
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
initialize();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopCountdown();
|
||||
if (socket.value) {
|
||||
if (scanToken.value) {
|
||||
socket.value.emit(SOCKET_EVENTS.SCAN_UNSUBSCRIBE as any, { scanToken: scanToken.value });
|
||||
}
|
||||
socket.value.disconnect();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="qr-login-container">
|
||||
<div class="qr-login-card">
|
||||
<h2 class="title">扫码登录</h2>
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading" class="loading-state">
|
||||
<div class="spinner"></div>
|
||||
<p>正在加载...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="error-state">
|
||||
<p class="error-text">{{ error }}</p>
|
||||
<button class="refresh-btn" @click="refresh">重新加载</button>
|
||||
</div>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div v-else class="qr-content">
|
||||
<div class="qr-image-wrapper" :class="{ expired: isExpired, scanned: status === 'scanned' }">
|
||||
<img v-if="qrCodeDataUrl" :src="qrCodeDataUrl" alt="QR Code" class="qr-image" />
|
||||
|
||||
<!-- Overlay for expired/scanned states -->
|
||||
<div v-if="isExpired" class="overlay expired-overlay">
|
||||
<span class="overlay-icon">⏰</span>
|
||||
<span>已过期</span>
|
||||
</div>
|
||||
<div v-else-if="status === 'scanned'" class="overlay scanned-overlay">
|
||||
<span class="overlay-icon">✓</span>
|
||||
<span>已扫描</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status text -->
|
||||
<p class="status-text" :class="status">{{ statusText }}</p>
|
||||
|
||||
<!-- Countdown -->
|
||||
<p v-if="!isExpired && status === 'pending'" class="countdown">
|
||||
{{ Math.floor(countdown / 60) }}:{{ String(countdown % 60).padStart(2, '0') }} 后过期
|
||||
</p>
|
||||
|
||||
<!-- Refresh button -->
|
||||
<button v-if="isExpired" class="refresh-btn" @click="refresh">刷新二维码</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cancel button -->
|
||||
<button class="cancel-btn" @click="cancel">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.qr-login-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.qr-login-card {
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #fef8f0 100%);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
min-width: 360px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
color: #c41230;
|
||||
margin-bottom: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.qr-wrapper {
|
||||
min-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-state,
|
||||
.error-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #c41230;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #c41230;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.qr-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.qr-image-wrapper {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.qr-image-wrapper.expired .qr-image,
|
||||
.qr-image-wrapper.scanned .qr-image {
|
||||
filter: blur(4px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
display: block;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.expired-overlay {
|
||||
background: rgba(196, 18, 48, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.scanned-overlay {
|
||||
background: rgba(76, 175, 80, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.overlay-icon {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-text.scanned {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.status-text.confirmed {
|
||||
color: #4caf50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-text.expired {
|
||||
color: #c41230;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 12px 32px;
|
||||
background: linear-gradient(135deg, #c41230 0%, #a00f28 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(196, 18, 48, 0.3);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
margin-top: 24px;
|
||||
padding: 8px 24px;
|
||||
background: transparent;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user