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>
2026-01-25 21:44:52 +08:00
parent 75570af8bc
commit f4736b6ebd
26 changed files with 1925 additions and 119 deletions
--- a/packages/client-mobile/src/components.d.ts
+++ b/packages/client-mobile/src/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
    VanEmpty: typeof import('vant/es')['Empty']
    VanField: typeof import('vant/es')['Field']
    VanIcon: typeof import('vant/es')['Icon']
+    VanLoading: typeof import('vant/es')['Loading']
    VanNavBar: typeof import('vant/es')['NavBar']
    VotingDock: typeof import('./components/VotingDock.vue')['default']
  }
--- a/packages/client-mobile/src/router/index.ts
+++ b/packages/client-mobile/src/router/index.ts
@@ -23,6 +23,11 @@ const router = createRouter({
      name: 'profile',
      component: () => import('../views/ProfileView.vue'),
    },
+    {
+      path: '/scan-login',
+      name: 'scan-login',
+      component: () => import('../views/ScanLoginView.vue'),
+    },
  ],
 });

--- a/packages/client-mobile/src/stores/connection.ts
+++ b/packages/client-mobile/src/stores/connection.ts
@@ -14,6 +14,31 @@ import { CONFIG } from '@gala/shared/constants';

 type GalaSocket = Socket<ServerToClientEvents, ClientToServerEvents>;

+// LocalStorage keys
+const STORAGE_KEYS = {
+  USER_ID: 'gala_user_id',
+  USER_NAME: 'gala_user_name',
+  DEPARTMENT: 'gala_department',
+};
+
+// Helper functions for localStorage
+function loadFromStorage<T>(key: string, defaultValue: T): T {
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+function saveToStorage(key: string, value: unknown): void {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch (e) {
+    console.warn('[Storage] Failed to save:', e);
+  }
+}
+
 export const useConnectionStore = defineStore('connection', () => {
  // State - use shallowRef for socket to avoid deep reactivity issues
  const socket = shallowRef<GalaSocket | null>(null);
@@ -23,9 +48,9 @@ export const useConnectionStore = defineStore('connection', () => {
  const lastPingTime = ref<number>(0);
  const latency = ref<number>(0);
  const reconnectAttempts = ref(0);
-  const userId = ref<string | null>(null);
-  const userName = ref<string | null>(null);
-  const department = ref<string | null>(null);
+  const userId = ref<string | null>(loadFromStorage(STORAGE_KEYS.USER_ID, null));
+  const userName = ref<string | null>(loadFromStorage(STORAGE_KEYS.USER_NAME, null));
+  const department = ref<string | null>(loadFromStorage(STORAGE_KEYS.DEPARTMENT, null));
  const votedCategories = ref<VoteCategory[]>([]);

  // Computed
@@ -69,10 +94,12 @@ export const useConnectionStore = defineStore('connection', () => {
      isConnecting.value = false;
      reconnectAttempts.value = 0;

-      // Auto-generate userId if not set
+      // Auto-generate userId if not set (and save to localStorage)
      if (!userId.value) {
        userId.value = `user_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
        userName.value = '访客';
+        saveToStorage(STORAGE_KEYS.USER_ID, userId.value);
+        saveToStorage(STORAGE_KEYS.USER_NAME, userName.value);
      }

      // Join with user info
@@ -217,19 +244,43 @@ export const useConnectionStore = defineStore('connection', () => {
  }

  /**
-   * Set user info
+   * Set user info (and persist to localStorage)
   */
  function setUser(id: string, name: string, dept: string) {
    userId.value = id;
    userName.value = name;
    department.value = dept;

+    // Persist to localStorage
+    saveToStorage(STORAGE_KEYS.USER_ID, id);
+    saveToStorage(STORAGE_KEYS.USER_NAME, name);
+    saveToStorage(STORAGE_KEYS.DEPARTMENT, dept);
+
    // Rejoin if already connected
    if (socket.value?.connected) {
      joinRoom();
    }
  }

+  /**
+   * Logout and clear stored user info
+   */
+  function logout() {
+    // Clear state
+    userId.value = null;
+    userName.value = null;
+    department.value = null;
+    votedCategories.value = [];
+
+    // Clear localStorage
+    localStorage.removeItem(STORAGE_KEYS.USER_ID);
+    localStorage.removeItem(STORAGE_KEYS.USER_NAME);
+    localStorage.removeItem(STORAGE_KEYS.DEPARTMENT);
+
+    // Disconnect socket
+    disconnect();
+  }
+
  /**
   * Add voted category
   */
@@ -274,6 +325,7 @@ export const useConnectionStore = defineStore('connection', () => {
    // Actions
    connect,
    disconnect,
+    logout,
    setUser,
    addVotedCategory,
    requestSync,
--- a/packages/client-mobile/src/views/HomeView.vue
+++ b/packages/client-mobile/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useConnectionStore } from '../stores/connection';
 import { showToast } from 'vant';
@@ -11,6 +11,14 @@ const userName = ref('');
 const userDept = ref('技术部');
 const isLoading = ref(false);

+// Check if already logged in
+onMounted(() => {
+  if (connectionStore.userId && connectionStore.userName && connectionStore.userName !== '访客') {
+    // Already logged in, redirect to vote page
+    router.replace('/vote');
+  }
+});
+
 async function handleEnter() {
  if (!userName.value.trim()) {
    showToast('请输入您的姓名');
--- a/packages/client-mobile/src/views/ScanLoginView.vue
+++ b/packages/client-mobile/src/views/ScanLoginView.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { showToast, showLoadingToast, closeToast } from 'vant';
+import { useConnectionStore } from '../stores/connection';
+
+const route = useRoute();
+const router = useRouter();
+const connectionStore = useConnectionStore();
+
+// State
+const token = ref<string>('');
+const isValidating = ref<boolean>(true);
+const isValid = ref<boolean>(false);
+const isSubmitting = ref<boolean>(false);
+const userName = ref<string>('');
+const department = ref<string>('技术部');
+const errorMessage = ref<string>('');
+
+// API base URL - use LAN IP for mobile access
+const apiUrl = import.meta.env.VITE_API_URL || 'http://192.168.1.5:3000';
+
+// Computed
+const canSubmit = computed(() => {
+  return userName.value.trim().length > 0 && department.value.trim().length > 0;
+});
+
+// Validate token on mount
+onMounted(async () => {
+  token.value = (route.query.token as string) || '';
+
+  if (!token.value) {
+    errorMessage.value = '无效的登录链接';
+    isValidating.value = false;
+    return;
+  }
+
+  await validateToken();
+});
+
+async function validateToken() {
+  try {
+    const response = await fetch(`${apiUrl}/api/scan/validate/${token.value}`);
+    const result = await response.json();
+
+    if (!result.success) {
+      errorMessage.value = result.error || '验证失败';
+      isValid.value = false;
+    } else if (!result.data.valid) {
+      errorMessage.value = result.data.status === 'expired'
+        ? '二维码已过期，请重新扫描'
+        : '无效的二维码';
+      isValid.value = false;
+    } else if (result.data.status === 'confirmed') {
+      errorMessage.value = '此二维码已被使用';
+      isValid.value = false;
+    } else {
+      isValid.value = true;
+      // Mark as scanned
+      await markScanned();
+    }
+  } catch (err) {
+    errorMessage.value = '网络错误，请重试';
+    isValid.value = false;
+  } finally {
+    isValidating.value = false;
+  }
+}
+
+async function markScanned() {
+  try {
+    await fetch(`${apiUrl}/api/scan/scanned`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ scanToken: token.value }),
+    });
+  } catch (err) {
+    console.error('Failed to mark scanned:', err);
+  }
+}
+
+async function handleSubmit() {
+  if (!canSubmit.value || isSubmitting.value) return;
+
+  isSubmitting.value = true;
+  showLoadingToast({ message: '登录中...', forbidClick: true });
+
+  try {
+    const response = await fetch(`${apiUrl}/api/scan/confirm`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        scanToken: token.value,
+        userName: userName.value.trim(),
+        department: department.value.trim(),
+      }),
+    });
+
+    const result = await response.json();
+    closeToast();
+
+    if (result.success) {
+      // Set user info in connection store
+      const userId = result.data?.sessionToken || `user_${Date.now()}`;
+      connectionStore.setUser(userId, userName.value.trim(), department.value.trim());
+
+      showToast({ message: '登录成功！', type: 'success' });
+
+      // Redirect to vote page
+      router.push('/vote');
+    } else {
+      showToast({ message: result.error || '登录失败', type: 'fail' });
+    }
+  } catch (err) {
+    closeToast();
+    showToast({ message: '网络错误，请重试', type: 'fail' });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="scan-login-view safe-area-top safe-area-bottom">
+    <!-- Header -->
+    <div class="header">
+      <h1 class="title">扫码登录</h1>
+      <p class="subtitle">年会互动系统</p>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="isValidating" class="loading-state">
+      <van-loading type="spinner" color="#c41230" size="48px" />
+      <p>正在验证...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="!isValid" class="error-state">
+      <van-icon name="warning-o" size="64" color="#c41230" />
+      <p class="error-text">{{ errorMessage }}</p>
+      <van-button type="primary" round @click="$router.push('/')">
+        返回首页
+      </van-button>
+    </div>
+
+    <!-- Login form -->
+    <div v-else class="form-section">
+      <div class="form-card">
+        <p class="form-hint">请填写您的信息完成登录</p>
+
+        <van-cell-group inset>
+          <van-field
+            v-model="userName"
+            label="姓名"
+            placeholder="请输入您的姓名"
+            :rules="[{ required: true, message: '请输入姓名' }]"
+            maxlength="20"
+          />
+          <van-field
+            v-model="department"
+            label="部门"
+            placeholder="请输入您的部门"
+            :rules="[{ required: true, message: '请输入部门' }]"
+            maxlength="20"
+          />
+        </van-cell-group>
+
+        <div class="button-wrapper">
+          <van-button
+            type="primary"
+            block
+            round
+            :disabled="!canSubmit"
+            :loading="isSubmitting"
+            loading-text="登录中..."
+            @click="handleSubmit"
+          >
+            确认登录
+          </van-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+      <p>© 2026 公司年会</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../assets/styles/variables.scss' as *;
+
+.scan-login-view {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #fff5f5 0%, #fef8f0 50%, #ffffff 100%);
+}
+
+.header {
+  text-align: center;
+  padding: 48px 24px 24px;
+
+  .title {
+    font-size: 28px;
+    color: $color-primary;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+
+  .subtitle {
+    font-size: 14px;
+    color: $color-text-secondary;
+  }
+}
+
+.loading-state,
+.error-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+}
+
+.error-text {
+  font-size: 16px;
+  color: $color-primary;
+  text-align: center;
+}
+
+.form-section {
+  flex: 1;
+  padding: 24px;
+}
+
+.form-card {
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.form-hint {
+  text-align: center;
+  color: $color-text-secondary;
+  font-size: 14px;
+  margin-bottom: 24px;
+}
+
+.button-wrapper {
+  margin-top: 32px;
+
+  :deep(.van-button--primary) {
+    background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
+    border: none;
+  }
+}
+
+.footer {
+  text-align: center;
+  padding: 16px;
+  color: $color-text-muted;
+  font-size: 12px;
+}
+</style>
--- a/packages/client-mobile/src/views/VoteView.vue
+++ b/packages/client-mobile/src/views/VoteView.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { useVotingStore } from '../stores/voting';
 import { useConnectionStore } from '../stores/connection';
+import { showConfirmDialog } from 'vant';
 import VotingDock from '../components/VotingDock.vue';
 import ProgramCard from '../components/ProgramCard.vue';

+const router = useRouter();
 const votingStore = useVotingStore();
 const connectionStore = useConnectionStore();

@@ -32,6 +35,22 @@ const votingStatusMessage = computed(() => {
  return '投票进行中';
 });

+// Logout handler
+async function handleLogout() {
+  try {
+    await showConfirmDialog({
+      title: '退出登录',
+      message: '确定要退出登录吗？',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    });
+    connectionStore.logout();
+    router.replace('/');
+  } catch {
+    // User cancelled
+  }
+}
+
 onMounted(() => {
  if (!connectionStore.isConnected) {
    connectionStore.connect();
@@ -41,23 +60,32 @@ onMounted(() => {

 <template>
  <div class="vote-view">
-    <!-- Header -->
-    <header class="page-header">
-      <h1 class="page-title">节目投票</h1>
-      <div class="progress-ring">
-        <svg viewBox="0 0 36 36" class="circular-progress">
-          <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
-          <path class="circle-progress" :stroke-dasharray="`${(votingStore.usedTickets.length / 7) * 100}, 100`"
-            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
-        </svg>
-        <span class="progress-text">{{ votingStore.usedTickets.length }}/7</span>
-      </div>
-    </header>
-
-    <!-- Voting Status Bar -->
-    <div class="voting-status-bar" :class="{ active: votingStore.votingOpen }">
-      <span class="status-dot" :class="{ pulsing: votingStore.votingOpen }"></span>
-      <span class="status-text">{{ votingStatusMessage }}</span>
+    <!-- Sticky Header Container -->
+    <div class="sticky-header">
+      <!-- Header -->
+      <header class="page-header">
+        <div class="header-left">
+          <h1 class="page-title">节目投票</h1>
+          <div class="header-info">
+            <span class="user-name">{{ connectionStore.userName || '访客' }}</span>
+            <span class="info-divider">·</span>
+            <span class="status-indicator" :class="{ active: votingStore.votingOpen }">
+              <span class="status-dot" :class="{ pulsing: votingStore.votingOpen }"></span>
+              {{ votingStatusMessage }}
+            </span>
+            <span class="info-divider">·</span>
+            <span class="logout-btn" @click="handleLogout">退出</span>
+          </div>
+        </div>
+        <div class="progress-ring">
+          <svg viewBox="0 0 36 36" class="circular-progress">
+            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+            <path class="circle-progress" :stroke-dasharray="`${(votingStore.usedTickets.length / 7) * 100}, 100`"
+              d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+          </svg>
+          <span class="progress-text">{{ votingStore.usedTickets.length }}/7</span>
+        </div>
+      </header>
    </div>

    <!-- Program List -->
@@ -88,6 +116,12 @@ onMounted(() => {
  padding-bottom: 120px;
 }

+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: $z-index-sticky;
+}
+
 .page-header {
  background: $color-surface-glass;
  backdrop-filter: $backdrop-blur;
@@ -97,9 +131,12 @@ onMounted(() => {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  position: sticky;
-  top: 0;
-  z-index: $z-index-sticky;
+}
+
+.header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }

 .page-title {
@@ -108,6 +145,58 @@ onMounted(() => {
  color: $color-text-inverse;
 }

+.user-name {
+  font-size: $font-size-sm;
+  color: $color-gold;
+}
+
+.header-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: $font-size-sm;
+}
+
+.info-divider {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: $color-text-secondary;
+
+  &.active {
+    color: #22c55e;
+  }
+}
+
+.logout-btn {
+  color: $color-text-muted;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &:active {
+    background: rgba(255, 255, 255, 0.1);
+    color: $color-text-light;
+  }
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #666;
+
+  &.pulsing {
+    background: #22c55e;
+    animation: pulse-dot 1.5s ease-in-out infinite;
+  }
+}
+
 .progress-ring {
  position: relative;
  width: 48px;
@@ -151,50 +240,9 @@ onMounted(() => {
  gap: $spacing-lg;
 }

-// Voting Status Bar
-.voting-status-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: $spacing-sm $spacing-lg;
-  background: rgba(255, 255, 255, 0.05);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  font-size: $font-size-sm;
-  color: $color-text-secondary;
-
-  &.active {
-    background: rgba($color-gold, 0.1);
-    border-color: rgba($color-gold, 0.2);
-  }
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #666;
-
-  &.pulsing {
-    background: #22c55e;
-    animation: pulse-dot 1.5s ease-in-out infinite;
-  }
-}
-
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
 }
-
-.status-text {
-  flex: 1;
-}
-
-.late-catch-hint {
-  font-size: 10px;
-  color: $color-gold;
-  padding: 2px 8px;
-  background: rgba($color-gold, 0.15);
-  border-radius: 4px;
-}
 </style>

--- a/packages/client-mobile/vite.config.ts
+++ b/packages/client-mobile/vite.config.ts
@@ -64,7 +64,8 @@ export default defineConfig({
    },
  },
  server: {
-    port: 5173,
+    host: '0.0.0.0',
+    port: 5174,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
--- a/packages/client-screen/package.json
+++ b/packages/client-screen/package.json
@@ -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"
  }
 }
--- a/packages/client-screen/src/components/EntryQRCode.vue
+++ b/packages/client-screen/src/components/EntryQRCode.vue
@@ -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>
--- a/packages/client-screen/src/components/QRCodeLogin.vue
+++ b/packages/client-screen/src/components/QRCodeLogin.vue
@@ -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>
--- a/packages/client-screen/src/pixi/LotteryMachine.ts
+++ b/packages/client-screen/src/pixi/LotteryMachine.ts
@@ -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();
  }

  // ============================================================================
--- a/packages/client-screen/src/stores/display.ts
+++ b/packages/client-screen/src/stores/display.ts
@@ -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,
--- a/packages/client-screen/src/views/AdminControl.vue
+++ b/packages/client-screen/src/views/AdminControl.vue
@@ -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>
--- a/packages/client-screen/src/views/MainDisplay.vue
+++ b/packages/client-screen/src/views/MainDisplay.vue
@@ -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>
--- a/packages/client-screen/vite.config.ts
+++ b/packages/client-screen/vite.config.ts
@@ -10,7 +10,8 @@ export default defineConfig({
    },
  },
  server: {
-    port: 5174,
+    host: '0.0.0.0',
+    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -29,6 +29,7 @@
    "express": "^4.21.2",
    "helmet": "^8.0.0",
    "ioredis": "^5.4.2",
+    "jsonwebtoken": "^9.0.3",
    "multer": "^2.0.2",
    "nanoid": "^5.0.9",
    "pino": "^9.6.0",
@@ -42,6 +43,7 @@
    "@types/compression": "^1.7.5",
    "@types/cors": "^2.8.17",
    "@types/express": "^5.0.0",
+    "@types/jsonwebtoken": "^9.0.10",
    "@types/multer": "^2.0.0",
    "@types/uuid": "^11.0.0",
    "artillery": "^2.0.28",
--- a/packages/server/src/app.ts
+++ b/packages/server/src/app.ts
@@ -8,20 +8,38 @@ import { errorHandler } from './middleware/errorHandler';
 import { requestLogger } from './middleware/requestLogger';
 import voteRoutes from './routes/vote.routes';
 import adminRoutes from './routes/admin.routes';
+import scanRoutes from './routes/scan.routes';

 export const app: Application = express();

-// Security middleware
-app.use(helmet());
-
-// CORS
+// CORS - must be before helmet
 app.use(
  cors({
-    origin: config.corsOrigins,
+    origin: function (origin, callback) {
+      // Allow requests with no origin (like mobile apps or curl)
+      if (!origin) return callback(null, true);
+
+      const allowedOrigins = [
+        'http://localhost:5173',
+        'http://localhost:5174',
+        'http://192.168.1.5:5173',
+        'http://192.168.1.5:5174',
+      ];
+
+      if (allowedOrigins.includes(origin)) {
+        callback(null, true);
+      } else {
+        console.log('CORS blocked origin:', origin);
+        callback(null, true); // Allow all for development
+      }
+    },
    credentials: true,
  })
 );

+// Security middleware
+app.use(helmet());
+
 // Compression
 app.use(compression());

@@ -40,6 +58,7 @@ app.get('/health', (_req, res) => {
 // API routes
 app.use('/api/vote', voteRoutes);
 app.use('/api/admin', adminRoutes);
+app.use('/api/scan', scanRoutes);

 // 404 handler
 app.use((_req, res) => {
--- a/packages/server/src/config/index.ts
+++ b/packages/server/src/config/index.ts
@@ -7,7 +7,12 @@ export const config = {
  isDev: process.env.NODE_ENV !== 'production',

  // CORS
-  corsOrigins: process.env.CORS_ORIGINS?.split(',') || ['http://localhost:5173', 'http://localhost:5174'],
+  corsOrigins: process.env.CORS_ORIGINS?.split(',') || [
+    'http://localhost:5173',
+    'http://localhost:5174',
+    'http://192.168.1.5:5173',
+    'http://192.168.1.5:5174',
+  ],

  // Redis
  redis: {
@@ -24,6 +29,9 @@ export const config = {
  jwtSecret: process.env.JWT_SECRET || 'dev-secret-change-in-production',
  jwtExpiresIn: process.env.JWT_EXPIRES_IN || '24h',

+  // Mobile client URL (for QR code generation)
+  mobileClientUrl: process.env.MOBILE_CLIENT_URL || 'http://192.168.1.5:5174',
+
  // Socket.io
  socket: {
    pingTimeout: 10000,
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -34,10 +34,11 @@ async function main(): Promise<void> {
    logger.info('Initializing Socket.io...');
    await initializeSocket(httpServer);

-    // Start server
-    httpServer.listen(config.port, () => {
+    // Start server - listen on all interfaces for LAN access
+    httpServer.listen(config.port, '0.0.0.0', () => {
      logger.info({ port: config.port, env: config.nodeEnv }, 'Server started');
      logger.info(`Health check: http://localhost:${config.port}/health`);
+      logger.info(`LAN access: http://192.168.1.5:${config.port}`);
    });

    // Graceful shutdown
--- a/packages/server/src/routes/scan.routes.ts
+++ b/packages/server/src/routes/scan.routes.ts
@@ -0,0 +1,151 @@
+import { Router, IRouter } from 'express';
+import { scanLoginService } from '../services/scan-login.service';
+import { getIO } from '../socket';
+import { SOCKET_EVENTS } from '@gala/shared/constants';
+import type { ScanStatusUpdatePayload } from '@gala/shared/types';
+
+const router: IRouter = Router();
+
+/**
+ * POST /api/scan/generate
+ * Generate a new scan token and QR code URL
+ */
+router.post('/generate', async (req, res, next) => {
+  try {
+    const { pcSocketId } = req.body;
+
+    if (!pcSocketId) {
+      return res.status(400).json({
+        success: false,
+        error: 'pcSocketId is required',
+      });
+    }
+
+    const result = await scanLoginService.generateScanToken(pcSocketId);
+
+    return res.json(result);
+  } catch (error) {
+    next(error);
+  }
+});
+
+/**
+ * GET /api/scan/validate/:token
+ * Validate a scan token
+ */
+router.get('/validate/:token', async (req, res, next) => {
+  try {
+    const { token } = req.params;
+
+    if (!token) {
+      return res.status(400).json({
+        success: false,
+        error: 'Token is required',
+      });
+    }
+
+    const result = await scanLoginService.validateToken(token);
+
+    return res.json(result);
+  } catch (error) {
+    next(error);
+  }
+});
+
+/**
+ * POST /api/scan/scanned
+ * Mark token as scanned (called by mobile client after scanning QR code)
+ */
+router.post('/scanned', async (req, res, next) => {
+  try {
+    const { scanToken } = req.body;
+
+    if (!scanToken) {
+      return res.status(400).json({
+        success: false,
+        error: 'scanToken is required',
+      });
+    }
+
+    const result = await scanLoginService.markScanned(scanToken);
+
+    if (result.success && result.pcSocketId) {
+      // Notify PC client that QR code has been scanned
+      const io = getIO();
+      const statusUpdate: ScanStatusUpdatePayload = {
+        scanToken,
+        status: 'scanned',
+      };
+      io.to(result.pcSocketId).emit(
+        SOCKET_EVENTS.SCAN_STATUS_UPDATE as any,
+        statusUpdate
+      );
+    }
+
+    return res.json({
+      success: result.success,
+      error: result.error,
+    });
+  } catch (error) {
+    next(error);
+  }
+});
+
+/**
+ * POST /api/scan/confirm
+ * Confirm login with user info
+ */
+router.post('/confirm', async (req, res, next) => {
+  try {
+    const { scanToken, userName, department } = req.body;
+
+    if (!scanToken || !userName || !department) {
+      return res.status(400).json({
+        success: false,
+        error: 'scanToken, userName, and department are required',
+      });
+    }
+
+    const result = await scanLoginService.confirmLogin(
+      scanToken,
+      userName,
+      department
+    );
+
+    if (result.success && result.data) {
+      // Notify PC client that login is confirmed
+      const io = getIO();
+      const statusUpdate: ScanStatusUpdatePayload = {
+        scanToken,
+        status: 'confirmed',
+        userInfo: {
+          userId: result.data.userId,
+          userName,
+          department,
+          sessionToken: result.data.sessionToken,
+        },
+      };
+      io.to(result.data.pcSocketId).emit(
+        SOCKET_EVENTS.SCAN_STATUS_UPDATE as any,
+        statusUpdate
+      );
+
+      return res.json({
+        success: true,
+        data: {
+          sessionToken: result.data.sessionToken,
+          userId: result.data.userId,
+        },
+      });
+    }
+
+    return res.json({
+      success: false,
+      error: result.error,
+    });
+  } catch (error) {
+    next(error);
+  }
+});
+
+export default router;
--- a/packages/server/src/services/scan-login.service.ts
+++ b/packages/server/src/services/scan-login.service.ts
@@ -0,0 +1,232 @@
+import { v4 as uuidv4 } from 'uuid';
+import jwt from 'jsonwebtoken';
+import { redis } from '../config/redis';
+import { config } from '../config';
+import { logger } from '../utils/logger';
+import type { ScanTokenData, ScanLoginStatus } from '@gala/shared/types';
+
+const SCAN_TOKEN_PREFIX = 'scan:';
+const SESSION_TOKEN_PREFIX = 'session:';
+const SCAN_TOKEN_TTL = 5 * 60; // 5 minutes
+const SESSION_TOKEN_TTL = 24 * 60 * 60; // 24 hours
+
+class ScanLoginService {
+  /**
+   * Generate a new scan token for QR code login
+   */
+  async generateScanToken(pcSocketId: string): Promise<{
+    success: boolean;
+    data?: { scanToken: string; qrCodeUrl: string; expiresAt: number };
+    error?: string;
+  }> {
+    try {
+      const scanToken = uuidv4();
+      const now = Date.now();
+      const expiresAt = now + SCAN_TOKEN_TTL * 1000;
+
+      const tokenData: ScanTokenData = {
+        scanToken,
+        pcSocketId,
+        status: 'pending',
+        createdAt: now,
+        expiresAt,
+      };
+
+      await redis.setex(
+        `${SCAN_TOKEN_PREFIX}${scanToken}`,
+        SCAN_TOKEN_TTL,
+        JSON.stringify(tokenData)
+      );
+
+      // Generate QR code URL (mobile client will access this)
+      const baseUrl = config.mobileClientUrl || 'http://localhost:5174';
+      const qrCodeUrl = `${baseUrl}/scan-login?token=${scanToken}`;
+
+      logger.info({ scanToken, pcSocketId }, 'Scan token generated');
+
+      return {
+        success: true,
+        data: { scanToken, qrCodeUrl, expiresAt },
+      };
+    } catch (error) {
+      logger.error({ error }, 'Failed to generate scan token');
+      return { success: false, error: 'Failed to generate scan token' };
+    }
+  }
+
+  /**
+   * Validate a scan token
+   */
+  async validateToken(scanToken: string): Promise<{
+    success: boolean;
+    data?: { valid: boolean; status: ScanLoginStatus; expiresAt: number };
+    error?: string;
+  }> {
+    try {
+      const data = await redis.get(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+
+      if (!data) {
+        return {
+          success: true,
+          data: { valid: false, status: 'expired', expiresAt: 0 },
+        };
+      }
+
+      const tokenData: ScanTokenData = JSON.parse(data);
+
+      if (Date.now() > tokenData.expiresAt) {
+        await redis.del(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+        return {
+          success: true,
+          data: { valid: false, status: 'expired', expiresAt: 0 },
+        };
+      }
+
+      return {
+        success: true,
+        data: {
+          valid: true,
+          status: tokenData.status,
+          expiresAt: tokenData.expiresAt,
+        },
+      };
+    } catch (error) {
+      logger.error({ error, scanToken }, 'Failed to validate token');
+      return { success: false, error: 'Failed to validate token' };
+    }
+  }
+
+  /**
+   * Mark token as scanned (mobile user has scanned the QR code)
+   */
+  async markScanned(scanToken: string): Promise<{
+    success: boolean;
+    pcSocketId?: string;
+    error?: string;
+  }> {
+    try {
+      const data = await redis.get(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+
+      if (!data) {
+        return { success: false, error: 'Token not found or expired' };
+      }
+
+      const tokenData: ScanTokenData = JSON.parse(data);
+
+      if (tokenData.status !== 'pending') {
+        return { success: false, error: 'Token already used' };
+      }
+
+      if (Date.now() > tokenData.expiresAt) {
+        await redis.del(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+        return { success: false, error: 'Token expired' };
+      }
+
+      tokenData.status = 'scanned';
+
+      const ttl = await redis.ttl(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+      await redis.setex(
+        `${SCAN_TOKEN_PREFIX}${scanToken}`,
+        ttl > 0 ? ttl : SCAN_TOKEN_TTL,
+        JSON.stringify(tokenData)
+      );
+
+      logger.info({ scanToken }, 'Token marked as scanned');
+
+      return { success: true, pcSocketId: tokenData.pcSocketId };
+    } catch (error) {
+      logger.error({ error, scanToken }, 'Failed to mark token as scanned');
+      return { success: false, error: 'Failed to mark token as scanned' };
+    }
+  }
+
+  /**
+   * Confirm login with user info
+   */
+  async confirmLogin(
+    scanToken: string,
+    userName: string,
+    department: string
+  ): Promise<{
+    success: boolean;
+    data?: {
+      sessionToken: string;
+      userId: string;
+      pcSocketId: string;
+    };
+    error?: string;
+  }> {
+    try {
+      const data = await redis.get(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+
+      if (!data) {
+        return { success: false, error: 'Token not found or expired' };
+      }
+
+      const tokenData: ScanTokenData = JSON.parse(data);
+
+      if (tokenData.status !== 'scanned') {
+        return { success: false, error: 'Invalid token status' };
+      }
+
+      if (Date.now() > tokenData.expiresAt) {
+        await redis.del(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+        return { success: false, error: 'Token expired' };
+      }
+
+      // Generate user ID and session token
+      const userId = `user_${Date.now()}_${uuidv4().slice(0, 8)}`;
+      const sessionToken = jwt.sign(
+        { userId, userName, department },
+        config.jwtSecret || 'gala-secret-key',
+        { expiresIn: '24h' }
+      );
+
+      // Store session
+      await redis.setex(
+        `${SESSION_TOKEN_PREFIX}${sessionToken}`,
+        SESSION_TOKEN_TTL,
+        JSON.stringify({ userId, userName, department })
+      );
+
+      // Update scan token status
+      tokenData.status = 'confirmed';
+      tokenData.userInfo = { userId, userName, department };
+
+      await redis.setex(
+        `${SCAN_TOKEN_PREFIX}${scanToken}`,
+        60, // Keep for 1 minute for status sync
+        JSON.stringify(tokenData)
+      );
+
+      logger.info({ scanToken, userId, userName }, 'Login confirmed');
+
+      return {
+        success: true,
+        data: {
+          sessionToken,
+          userId,
+          pcSocketId: tokenData.pcSocketId,
+        },
+      };
+    } catch (error) {
+      logger.error({ error, scanToken }, 'Failed to confirm login');
+      return { success: false, error: 'Failed to confirm login' };
+    }
+  }
+
+  /**
+   * Get token data
+   */
+  async getTokenData(scanToken: string): Promise<ScanTokenData | null> {
+    try {
+      const data = await redis.get(`${SCAN_TOKEN_PREFIX}${scanToken}`);
+      return data ? JSON.parse(data) : null;
+    } catch (error) {
+      logger.error({ error, scanToken }, 'Failed to get token data');
+      return null;
+    }
+  }
+}
+
+export const scanLoginService = new ScanLoginService();
--- a/packages/server/src/socket/index.ts
+++ b/packages/server/src/socket/index.ts
@@ -24,6 +24,7 @@ import type {
  EmergencyResetPayload,
  MusicControlPayload,
  AdminState,
+  ScanSubscribePayload,
 } from '@gala/shared/types';

 export type GalaSocket = Socket<ClientToServerEvents, ServerToClientEvents, InterServerEvents, SocketData>;
@@ -128,6 +129,30 @@ function handleConnection(socket: GalaSocket): void {
    handleToggleLateCatch(socket, data, callback);
  });

+  // Scan login events
+  socket.on(SOCKET_EVENTS.SCAN_SUBSCRIBE as any, (data: ScanSubscribePayload) => {
+    handleScanSubscribe(socket, data);
+  });
+
+  socket.on(SOCKET_EVENTS.SCAN_UNSUBSCRIBE as any, (data: ScanSubscribePayload) => {
+    handleScanUnsubscribe(socket, data);
+  });
+
+  // QR Code display control events (admin -> screen)
+  socket.on('display:show_entry_qr' as any, () => {
+    if (socket.data.role === 'admin') {
+      logger.info('Admin requested to show entry QR code');
+      io.to(SOCKET_ROOMS.SCREEN_DISPLAY).emit('display:show_entry_qr' as any);
+    }
+  });
+
+  socket.on('display:hide_qr' as any, () => {
+    if (socket.data.role === 'admin') {
+      logger.info('Admin requested to hide QR code');
+      io.to(SOCKET_ROOMS.SCREEN_DISPLAY).emit('display:hide_qr' as any);
+    }
+  });
+
  // Disconnect handler
  socket.on('disconnect', (reason) => {
    handleDisconnect(socket, reason);
@@ -590,7 +615,32 @@ async function handleToggleLateCatch(
    io.to(SOCKET_ROOMS.ALL).emit(SOCKET_EVENTS.ADMIN_STATE_SYNC as any, adminService.getState());
    callback({ success: true });
  } else {
-    callback({ success: false, message: result.message });
+    callback({ success: false, message: 'Failed to toggle late catch' });
  }
 }

+// ============================================================================
+// Scan Login Event Handlers
+// ============================================================================
+
+/**
+ * Handle scan subscribe - PC client subscribes to scan status updates
+ */
+function handleScanSubscribe(socket: GalaSocket, data: ScanSubscribePayload): void {
+  const { scanToken } = data;
+  // Join a room specific to this scan token for targeted updates
+  const roomName = `scan:${scanToken}`;
+  socket.join(roomName);
+  logger.info({ socketId: socket.id, scanToken }, 'Socket subscribed to scan updates');
+}
+
+/**
+ * Handle scan unsubscribe - PC client unsubscribes from scan status updates
+ */
+function handleScanUnsubscribe(socket: GalaSocket, data: ScanSubscribePayload): void {
+  const { scanToken } = data;
+  const roomName = `scan:${scanToken}`;
+  socket.leave(roomName);
+  logger.info({ socketId: socket.id, scanToken }, 'Socket unsubscribed from scan updates');
+}
+
--- a/packages/shared/src/constants/events.ts
+++ b/packages/shared/src/constants/events.ts
@@ -34,6 +34,15 @@ export const SOCKET_EVENTS = {
  ADMIN_EMERGENCY_RESET: 'admin:emergency_reset',
  ADMIN_STATE_SYNC: 'admin:state_sync',
  ADMIN_MUSIC_CONTROL: 'admin:music_control',
+
+  // Scan login events
+  SCAN_SUBSCRIBE: 'scan:subscribe',
+  SCAN_UNSUBSCRIBE: 'scan:unsubscribe',
+  SCAN_STATUS_UPDATE: 'scan:status_update',
+
+  // QR code display control events
+  DISPLAY_SHOW_ENTRY_QR: 'display:show_entry_qr',
+  DISPLAY_HIDE_QR: 'display:hide_qr',
 } as const;

 export const SOCKET_ROOMS = {
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -3,3 +3,4 @@ export * from './socket.types';
 export * from './vote.types';
 export * from './draw.types';
 export * from './admin.types';
+export * from './scan-login.types';
--- a/packages/shared/src/types/scan-login.types.ts
+++ b/packages/shared/src/types/scan-login.types.ts
@@ -0,0 +1,66 @@
+// Scan login types
+
+export type ScanLoginStatus = 'pending' | 'scanned' | 'confirmed' | 'expired';
+
+export interface ScanTokenData {
+  scanToken: string;
+  pcSocketId: string;
+  status: ScanLoginStatus;
+  createdAt: number;
+  expiresAt: number;
+  userInfo?: {
+    userId: string;
+    userName: string;
+    department: string;
+  };
+}
+
+export interface GenerateScanTokenResponse {
+  success: boolean;
+  data?: {
+    scanToken: string;
+    qrCodeUrl: string;
+    expiresAt: number;
+  };
+  error?: string;
+}
+
+export interface ValidateTokenResponse {
+  success: boolean;
+  data?: {
+    valid: boolean;
+    status: ScanLoginStatus;
+    expiresAt: number;
+  };
+  error?: string;
+}
+
+export interface ScanConfirmPayload {
+  scanToken: string;
+  userName: string;
+  department: string;
+}
+
+export interface ScanConfirmResponse {
+  success: boolean;
+  data?: {
+    sessionToken: string;
+    userId: string;
+  };
+  error?: string;
+}
+
+export interface ScanStatusUpdatePayload {
+  scanToken: string;
+  status: ScanLoginStatus;
+  userInfo?: {
+    userId: string;
+    userName: string;
+    department: string;
+    sessionToken: string;
+  };
+}
+
+export interface ScanSubscribePayload {
+  scanToken: string;
+}