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
@@ -11,21 +11,23 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@gala/shared": "workspace:*",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0",
|
||||
"pinia": "^2.3.0",
|
||||
"pixi.js": "^8.6.6",
|
||||
"@pixi/particle-emitter": "^5.0.8",
|
||||
"gsap": "^3.12.7",
|
||||
"howler": "^2.2.4",
|
||||
"pinia": "^2.3.0",
|
||||
"pixi.js": "^8.6.6",
|
||||
"qrcode": "^1.5.4",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"howler": "^2.2.4"
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/howler": "^2.2.12",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"vite": "^6.0.7",
|
||||
"sass": "^1.83.1",
|
||||
"typescript": "^5.7.3",
|
||||
"vue-tsc": "^2.2.0",
|
||||
"@types/howler": "^2.2.12"
|
||||
"vite": "^6.0.7",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -443,16 +443,10 @@ export class LotteryMachine {
|
||||
p.text.y = centerY + y1 * scale;
|
||||
p.text.scale.set(scale * 0.8);
|
||||
|
||||
// Depth-based alpha and color
|
||||
// Depth-based alpha - all participants show gold color
|
||||
const depthAlpha = (z2 + this.sphereRadius) / (this.sphereRadius * 2);
|
||||
p.text.alpha = p.isEligible ? 0.3 + depthAlpha * 0.7 : 0.15;
|
||||
|
||||
// Dim ineligible names
|
||||
if (!p.isEligible) {
|
||||
p.text.style.fill = 0x666666;
|
||||
} else {
|
||||
p.text.style.fill = COLORS.gold;
|
||||
}
|
||||
p.text.alpha = 0.3 + depthAlpha * 0.7;
|
||||
p.text.style.fill = COLORS.gold;
|
||||
|
||||
// Z-sorting
|
||||
p.text.zIndex = Math.floor(z2);
|
||||
@@ -462,46 +456,65 @@ export class LotteryMachine {
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Storm Phase (Tornado)
|
||||
// Storm Phase (Fast Spinning Sphere)
|
||||
// ============================================================================
|
||||
|
||||
private updateStorm(deltaMs: number): void {
|
||||
const centerX = this.app.screen.width / 2;
|
||||
const centerY = this.app.screen.height / 2;
|
||||
|
||||
// Ramp up storm intensity
|
||||
this.stormIntensity = Math.min(1, this.stormIntensity + deltaMs * 0.001);
|
||||
this.stormAngle += deltaMs * 0.01 * this.stormIntensity;
|
||||
// Ramp up rotation speed
|
||||
this.stormIntensity = Math.min(1, this.stormIntensity + deltaMs * 0.002);
|
||||
|
||||
// Apply motion blur based on intensity
|
||||
this.blurFilter.strength = this.stormIntensity * 8;
|
||||
// Fast sphere rotation - much faster than galaxy phase
|
||||
this.sphereRotationY += deltaMs * 0.008 * (1 + this.stormIntensity * 3);
|
||||
this.sphereRotationX += deltaMs * 0.003 * this.stormIntensity;
|
||||
|
||||
// Light motion blur for speed effect
|
||||
this.blurFilter.strength = this.stormIntensity * 2;
|
||||
|
||||
this.nameParticles.forEach((p, index) => {
|
||||
if (!p.text) return;
|
||||
|
||||
// Tornado vortex motion
|
||||
const baseAngle = this.stormAngle + (index / this.nameParticles.length) * Math.PI * 2;
|
||||
const verticalPos = ((this.time * 0.001 + index * 0.1) % 2) - 1; // -1 to 1
|
||||
const radius = 100 + Math.abs(verticalPos) * 200 * this.stormIntensity;
|
||||
// Get original sphere position from fibonacci distribution
|
||||
const phi = Math.acos(1 - 2 * (index + 0.5) / this.nameParticles.length);
|
||||
const theta = Math.PI * (1 + Math.sqrt(5)) * index;
|
||||
|
||||
const targetX = centerX + Math.cos(baseAngle) * radius;
|
||||
const targetY = centerY + verticalPos * 300;
|
||||
const sphereX = this.sphereRadius * Math.sin(phi) * Math.cos(theta);
|
||||
const sphereY = this.sphereRadius * Math.sin(phi) * Math.sin(theta);
|
||||
const sphereZ = this.sphereRadius * Math.cos(phi);
|
||||
|
||||
// Smooth interpolation
|
||||
p.x += (targetX - p.x) * 0.1;
|
||||
p.y += (targetY - p.y) * 0.1;
|
||||
// Apply 3D rotation (Y axis then X axis)
|
||||
const cosY = Math.cos(this.sphereRotationY);
|
||||
const sinY = Math.sin(this.sphereRotationY);
|
||||
const cosX = Math.cos(this.sphereRotationX);
|
||||
const sinX = Math.sin(this.sphereRotationX);
|
||||
|
||||
p.text.x = p.x;
|
||||
p.text.y = p.y;
|
||||
p.text.rotation += p.rotationSpeed * this.stormIntensity * 3;
|
||||
p.text.alpha = p.isEligible ? 0.8 : 0.2;
|
||||
// Rotate around Y axis
|
||||
const x1 = sphereX * cosY - sphereZ * sinY;
|
||||
const z1 = sphereX * sinY + sphereZ * cosY;
|
||||
|
||||
// Scale based on position
|
||||
const distFromCenter = Math.sqrt(
|
||||
Math.pow(p.x - centerX, 2) + Math.pow(p.y - centerY, 2)
|
||||
);
|
||||
p.text.scale.set(0.5 + (1 - distFromCenter / 400) * 0.5);
|
||||
// Rotate around X axis
|
||||
const y1 = sphereY * cosX - z1 * sinX;
|
||||
const z2 = sphereY * sinX + z1 * cosX;
|
||||
|
||||
// Project to 2D with perspective
|
||||
const perspective = 800;
|
||||
const scale = perspective / (perspective + z2);
|
||||
|
||||
p.text.x = centerX + x1 * scale;
|
||||
p.text.y = centerY + y1 * scale;
|
||||
p.text.scale.set(scale * 0.9);
|
||||
|
||||
// Depth-based alpha - all participants show same
|
||||
const depthAlpha = (z2 + this.sphereRadius) / (this.sphereRadius * 2);
|
||||
p.text.alpha = 0.4 + depthAlpha * 0.6;
|
||||
|
||||
// Z-sorting
|
||||
p.text.zIndex = Math.floor(z2);
|
||||
});
|
||||
|
||||
this.galaxyContainer.sortChildren();
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
|
||||
@@ -32,6 +32,9 @@ export const useDisplayStore = defineStore('display', () => {
|
||||
avatar?: string;
|
||||
} | null>(null);
|
||||
|
||||
// QR Code display state (controlled by admin)
|
||||
const showEntryQR = ref(false);
|
||||
|
||||
// Computed
|
||||
const connectionStatus = computed(() => {
|
||||
if (isConnected.value) return 'connected';
|
||||
@@ -131,6 +134,17 @@ export const useDisplayStore = defineStore('display', () => {
|
||||
}
|
||||
});
|
||||
|
||||
// QR Code display control events
|
||||
socketInstance.on('display:show_entry_qr' as any, () => {
|
||||
console.log('[Screen] Show entry QR code');
|
||||
showEntryQR.value = true;
|
||||
});
|
||||
|
||||
socketInstance.on('display:hide_qr' as any, () => {
|
||||
console.log('[Screen] Hide QR code');
|
||||
showEntryQR.value = false;
|
||||
});
|
||||
|
||||
socket.value = socketInstance as GalaSocket;
|
||||
}
|
||||
|
||||
@@ -169,6 +183,7 @@ export const useDisplayStore = defineStore('display', () => {
|
||||
isDrawing,
|
||||
currentPrize,
|
||||
currentWinner,
|
||||
showEntryQR,
|
||||
|
||||
// Computed
|
||||
connectionStatus,
|
||||
|
||||
@@ -243,6 +243,21 @@ function playFanfare() {
|
||||
admin.controlMusic('play', 'fanfare');
|
||||
}
|
||||
|
||||
// QR Code display control
|
||||
function showEntryQR() {
|
||||
const socket = admin.getSocket();
|
||||
if (socket) {
|
||||
socket.emit('display:show_entry_qr' as any, {});
|
||||
}
|
||||
}
|
||||
|
||||
function hideQR() {
|
||||
const socket = admin.getSocket();
|
||||
if (socket) {
|
||||
socket.emit('display:hide_qr' as any, );
|
||||
}
|
||||
}
|
||||
|
||||
// Computed helpers
|
||||
const currentPrizeConfig = computed(() => {
|
||||
// 优先使用从服务器加载的配置
|
||||
@@ -666,6 +681,19 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Display Control -->
|
||||
<div class="control-group">
|
||||
<h4>大屏二维码</h4>
|
||||
<div class="button-group">
|
||||
<button class="ctrl-btn primary" @click="showEntryQR">
|
||||
显示入场二维码
|
||||
</button>
|
||||
<button class="ctrl-btn outline" @click="hideQR">
|
||||
隐藏二维码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Music Control -->
|
||||
<div class="control-group">
|
||||
<h4>音乐控制</h4>
|
||||
|
||||
@@ -2,9 +2,27 @@
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useDisplayStore } from '../stores/display';
|
||||
import { BackgroundEffect } from '../pixi/BackgroundEffect';
|
||||
import QRCodeLogin from '../components/QRCodeLogin.vue';
|
||||
import EntryQRCode from '../components/EntryQRCode.vue';
|
||||
|
||||
const displayStore = useDisplayStore();
|
||||
|
||||
// QR Code Login (legacy - kept for direct access)
|
||||
const showQRLogin = ref(false);
|
||||
|
||||
// Mobile URL for entry QR code
|
||||
const mobileUrl = 'http://192.168.1.5:5174';
|
||||
|
||||
function handleLoginSuccess(data: { userId: string; userName: string; department: string; sessionToken: string }) {
|
||||
console.log('Login success:', data);
|
||||
showQRLogin.value = false;
|
||||
// 可以在这里处理登录成功后的逻辑
|
||||
}
|
||||
|
||||
function handleLoginCancel() {
|
||||
showQRLogin.value = false;
|
||||
}
|
||||
|
||||
// Pixi.js background
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null);
|
||||
let backgroundEffect: BackgroundEffect | null = null;
|
||||
@@ -44,6 +62,21 @@ onUnmounted(() => {
|
||||
<!-- Pixi.js Canvas Background -->
|
||||
<canvas ref="canvasRef" class="background-canvas"></canvas>
|
||||
|
||||
<!-- QR Code Login Modal (legacy) -->
|
||||
<QRCodeLogin
|
||||
v-if="showQRLogin"
|
||||
server-url="http://192.168.1.5:3000"
|
||||
@login-success="handleLoginSuccess"
|
||||
@login-cancel="handleLoginCancel"
|
||||
/>
|
||||
|
||||
<!-- Entry QR Code Modal (controlled by admin) -->
|
||||
<EntryQRCode
|
||||
v-if="displayStore.showEntryQR"
|
||||
:mobile-url="mobileUrl"
|
||||
@close="displayStore.showEntryQR = false"
|
||||
/>
|
||||
|
||||
<!-- Corner Decorations -->
|
||||
<div class="corner-decoration top-left"></div>
|
||||
<div class="corner-decoration top-right"></div>
|
||||
|
||||
@@ -10,7 +10,8 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5174,
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
|
||||
Reference in New Issue
Block a user