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>