feat: 新增签到墙、摇一摇等功能及开发环境配置

新功能: - 签到墙页面 (CheckinWallView) 及后端接口 - 摇一摇互动页面 (ShakeView) 及服务 - 头像服务 (avatar.service) - 微信公众号静默授权登录增强开发环境: - 新增 dev-tunnel skill 用于本地调试 - docker-compose.dev.yml 开发环境配置 - 客户端 .env.development 配置文件其他改进: - VoteView 投票页面功能增强 - AdminControl 管理控制台更新 - 连接状态管理优化 - 新增马蹄声音效 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-04 17:25:56 +08:00
parent c1b4b09e40
commit 48d61a1e15
38 changed files with 2020 additions and 27 deletions
--- a/packages/client-mobile/.env.development
+++ b/packages/client-mobile/.env.development
@@ -0,0 +1,2 @@
+VITE_SOCKET_URL=https://2026.cptp.let5see.xyz
+VITE_API_URL=https://2026.cptp.let5see.xyz
--- a/packages/client-mobile/index.html
+++ b/packages/client-mobile/index.html
@@ -2,6 +2,9 @@
 <html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#c41230" />
--- a/packages/client-mobile/src/components.d.ts
+++ b/packages/client-mobile/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
  export interface GlobalComponents {
    ConnectionStatus: typeof import('./components/ConnectionStatus.vue')['default']
+    OnboardingTour: typeof import('./components/OnboardingTour.vue')['default']
    Postmark: typeof import('./components/Postmark.vue')['default']
    ProgramCard: typeof import('./components/ProgramCard.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/packages/client-mobile/src/router/index.ts
+++ b/packages/client-mobile/src/router/index.ts
@@ -28,6 +28,11 @@ const router = createRouter({
      name: 'scan-login',
      component: () => import('../views/ScanLoginView.vue'),
    },
+    {
+      path: '/shake',
+      name: 'shake',
+      component: () => import('../views/ShakeView.vue'),
+    },
  ],
 });

--- a/packages/client-mobile/src/stores/connection.ts
+++ b/packages/client-mobile/src/stores/connection.ts
@@ -284,7 +284,7 @@ export const useConnectionStore = defineStore('connection', () => {
  }

  /**
-   * Logout and clear stored user info
+   * Logout and clear all stored data
   */
  function logout() {
    // Clear state
@@ -293,10 +293,25 @@ export const useConnectionStore = defineStore('connection', () => {
    votedCategories.value = [];
    sessionToken.value = null;

-    // Clear localStorage
-    localStorage.removeItem(STORAGE_KEYS.USER_ID);
-    localStorage.removeItem(STORAGE_KEYS.USER_NAME);
-    localStorage.removeItem(STORAGE_KEYS.SESSION_TOKEN);
+    // Clear all localStorage
+    localStorage.clear();
+
+    // Clear sessionStorage
+    sessionStorage.clear();
+
+    // Clear service worker cache (PWA)
+    if ('caches' in window) {
+      caches.keys().then((names) => {
+        names.forEach((name) => caches.delete(name));
+      });
+    }
+
+    // Unregister service workers
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.getRegistrations().then((registrations) => {
+        registrations.forEach((registration) => registration.unregister());
+      });
+    }

    // Disconnect socket
    disconnect();
--- a/packages/client-mobile/src/views/ShakeView.vue
+++ b/packages/client-mobile/src/views/ShakeView.vue
@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useConnectionStore } from '../stores/connection';
+import { SOCKET_EVENTS } from '@gala/shared/constants';
+
+const router = useRouter();
+const connectionStore = useConnectionStore();
+
+const shakeCount = ref(0);
+const isShaking = ref(false);
+const hasPermission = ref(false);
+const permissionDenied = ref(false);
+
+// 摇一摇检测参数
+const SHAKE_THRESHOLD = 15;
+const SHAKE_COOLDOWN = 300;
+let lastShakeTime = 0;
+let lastX = 0, lastY = 0, lastZ = 0;
+
+// 请求设备运动权限（iOS 13+）
+async function requestPermission() {
+  if (typeof (DeviceMotionEvent as any).requestPermission === 'function') {
+    try {
+      const permission = await (DeviceMotionEvent as any).requestPermission();
+      if (permission === 'granted') {
+        permissionDenied.value = false;
+        hasPermission.value = true;
+        startListening();
+      } else {
+        permissionDenied.value = true;
+      }
+    } catch (error) {
+      console.error('Permission request failed:', error);
+      permissionDenied.value = true;
+    }
+  } else {
+    // 非 iOS 或旧版本，直接开始监听
+    hasPermission.value = true;
+    startListening();
+  }
+}
+
+// 开始监听设备运动
+function startListening() {
+  window.addEventListener('devicemotion', handleMotion);
+}
+
+// 停止监听
+function stopListening() {
+  window.removeEventListener('devicemotion', handleMotion);
+}
+
+// 处理设备运动事件
+function handleMotion(event: DeviceMotionEvent) {
+  const acceleration = event.accelerationIncludingGravity;
+  if (!acceleration) return;
+
+  const { x, y, z } = acceleration;
+  if (x === null || y === null || z === null) return;
+
+  const deltaX = Math.abs(x - lastX);
+  const deltaY = Math.abs(y - lastY);
+  const deltaZ = Math.abs(z - lastZ);
+
+  const totalDelta = deltaX + deltaY + deltaZ;
+
+  if (totalDelta > SHAKE_THRESHOLD) {
+    const now = Date.now();
+    if (now - lastShakeTime > SHAKE_COOLDOWN) {
+      lastShakeTime = now;
+      onShake();
+    }
+  }
+
+  lastX = x;
+  lastY = y;
+  lastZ = z;
+}
+
+// 摇动触发
+function onShake() {
+  shakeCount.value++;
+  isShaking.value = true;
+
+  // 发送摇动计数到服务器
+  const socket = connectionStore.getSocket();
+  if (socket?.connected) {
+    socket.emit(SOCKET_EVENTS.SHAKE_COUNT as any, { count: 1 });
+  }
+
+  // 震动反馈
+  if (navigator.vibrate) {
+    navigator.vibrate(50);
+  }
+
+  // 重置动画状态
+  setTimeout(() => {
+    isShaking.value = false;
+  }, 200);
+}
+
+// 返回投票页面
+function goBack() {
+  router.push('/vote');
+}
+
+onMounted(() => {
+  if (!connectionStore.isConnected) {
+    connectionStore.connect();
+  }
+  // 自动请求权限
+  requestPermission();
+});
+
+onUnmounted(() => {
+  stopListening();
+});
+</script>
+
+<template>
+  <div class="shake-view">
+    <!-- Header -->
+    <header class="header">
+      <button class="back-btn" @click="goBack">
+        <span class="back-icon">←</span>
+        返回
+      </button>
+      <h1 class="title">摇一摇</h1>
+      <div class="placeholder"></div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="content">
+      <!-- Permission Request -->
+      <div v-if="!hasPermission && !permissionDenied" class="permission-request">
+        <div class="permission-icon">📱</div>
+        <p class="permission-text">需要获取设备运动权限才能使用摇一摇功能</p>
+        <button class="permission-btn" @click="requestPermission">
+          授权使用
+        </button>
+      </div>
+
+      <!-- Permission Denied -->
+      <div v-else-if="permissionDenied" class="permission-denied">
+        <div class="denied-icon">🚫</div>
+        <p class="denied-text">设备运动权限被拒绝</p>
+        <p class="denied-hint">请按以下步骤开启权限：</p>
+        <div class="denied-steps">
+          <p>微信内：我 → 设置 → 通用 → 发现页管理 → 摇一摇</p>
+          <p>或：iPhone 设置 → 微信 → 运动与健身</p>
+        </div>
+        <button class="retry-btn" @click="requestPermission">
+          重新授权
+        </button>
+      </div>
+
+      <!-- Shake Area -->
+      <div v-else class="shake-area">
+        <div class="shake-phone" :class="{ shaking: isShaking }">
+          <div class="phone-screen">
+            <span class="shake-emoji">🎉</span>
+          </div>
+        </div>
+
+        <div class="shake-count-display">
+          <span class="count-label">摇动次数</span>
+          <span class="count-value">{{ shakeCount }}</span>
+        </div>
+
+        <p class="shake-hint">摇动手机参与互动</p>
+      </div>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../assets/styles/variables.scss' as *;
+
+.shake-view {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1a0a0a 0%, #2d1515 50%, #1a0a0a 100%);
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $spacing-md;
+  padding-top: calc(env(safe-area-inset-top) + #{$spacing-md});
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 8px;
+  transition: background 0.2s;
+
+  &:active {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: $color-gold;
+}
+
+.placeholder {
+  width: 60px;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-xl;
+}
+
+// Permission Request
+.permission-request,
+.permission-denied {
+  text-align: center;
+  padding: $spacing-xl;
+}
+
+.permission-icon,
+.denied-icon {
+  font-size: 64px;
+  margin-bottom: $spacing-lg;
+}
+
+.permission-text,
+.denied-text {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: $spacing-lg;
+}
+
+.denied-hint {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: $spacing-md;
+}
+
+.denied-steps {
+  text-align: left;
+  background: rgba(255, 255, 255, 0.1);
+  padding: $spacing-md;
+  border-radius: 8px;
+  margin-bottom: $spacing-lg;
+
+  p {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.7);
+    margin: $spacing-sm 0;
+    line-height: 1.5;
+  }
+}
+
+.retry-btn {
+  padding: 12px 24px;
+  background: transparent;
+  border: 1px solid $color-gold;
+  border-radius: 20px;
+  color: $color-gold;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:active {
+    background: rgba($color-gold, 0.2);
+  }
+}
+
+.permission-btn {
+  padding: 14px 32px;
+  background: linear-gradient(135deg, $color-gold 0%, #d4a84b 100%);
+  border: none;
+  border-radius: 24px;
+  color: #1a0a0a;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// Shake Area
+.shake-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-xl;
+}
+
+.shake-phone {
+  width: 120px;
+  height: 200px;
+  background: linear-gradient(145deg, #333 0%, #1a1a1a 100%);
+  border-radius: 24px;
+  padding: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  transition: transform 0.1s;
+
+  &.shaking {
+    animation: shake 0.2s ease-in-out;
+  }
+}
+
+.phone-screen {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #2d1515 0%, #1a0a0a 100%);
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shake-emoji {
+  font-size: 48px;
+}
+
+.shake-count-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.count-label {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.count-value {
+  font-size: 64px;
+  font-weight: 700;
+  color: $color-gold;
+  text-shadow: 0 0 20px rgba($color-gold, 0.5);
+}
+
+.shake-hint {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0) rotate(0); }
+  25% { transform: translateX(-10px) rotate(-5deg); }
+  75% { transform: translateX(10px) rotate(5deg); }
+}
+</style>
--- a/packages/client-mobile/src/views/VoteView.vue
+++ b/packages/client-mobile/src/views/VoteView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, nextTick } from 'vue';
+import { ref, computed, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { useVotingStore } from '../stores/voting';
 import { useConnectionStore } from '../stores/connection';
-import { showConfirmDialog } from 'vant';
+import { showConfirmDialog, showToast } from 'vant';
 import VotingDock from '../components/VotingDock.vue';
 import ProgramCard from '../components/ProgramCard.vue';
 import OnboardingTour from '../components/OnboardingTour.vue';
@@ -43,6 +43,80 @@ const router = useRouter();
 const votingStore = useVotingStore();
 const connectionStore = useConnectionStore();

+// 头像相关状态
+const userAvatar = ref<string | null>(null);
+const isLoadingAvatar = ref(false);
+
+// 获取头像授权
+async function handleAvatarClick() {
+  if (isLoadingAvatar.value) return;
+
+  // 如果已有头像，不做处理
+  if (userAvatar.value) return;
+
+  isLoadingAvatar.value = true;
+  try {
+    // 获取 snsapi_userinfo 授权 URL
+    const apiUrl = import.meta.env.VITE_API_URL || '';
+    const currentUrl = window.location.href.split('?')[0];
+    const res = await fetch(`${apiUrl}/api/mp/auth-url?scope=snsapi_userinfo&redirect_uri=${encodeURIComponent(currentUrl)}`);
+    const data = await res.json();
+
+    if (data.success && data.data?.authUrl) {
+      // 保存 state 到 localStorage
+      localStorage.setItem('avatar_auth_state', data.data.state);
+      // 跳转到微信授权页面
+      window.location.href = data.data.authUrl;
+    } else {
+      showToast('获取授权链接失败');
+    }
+  } catch (error) {
+    console.error('Failed to get auth URL:', error);
+    showToast('网络错误');
+  } finally {
+    isLoadingAvatar.value = false;
+  }
+}
+
+// 处理授权回调
+async function handleAuthCallback() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const code = urlParams.get('code');
+  const state = urlParams.get('state');
+  const savedState = localStorage.getItem('avatar_auth_state');
+
+  if (code && state && savedState === state) {
+    localStorage.removeItem('avatar_auth_state');
+    // 清除 URL 参数
+    window.history.replaceState({}, '', window.location.pathname);
+
+    try {
+      const apiUrl = import.meta.env.VITE_API_URL || '';
+      const res = await fetch(`${apiUrl}/api/mp/upgrade-auth`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          code,
+          state,
+          userId: connectionStore.userId,
+        }),
+      });
+      const data = await res.json();
+      if (data.success && data.data?.avatar) {
+        userAvatar.value = data.data.avatar;
+        showToast('头像获取成功');
+      }
+    } catch (error) {
+      console.error('Failed to upgrade auth:', error);
+    }
+  }
+}
+
+// 跳转到摇一摇页面
+function goToShake() {
+  router.push('/shake');
+}
+
 // Use server-synced programs from voting store
 const programs = computed(() => {
  // If no programs from server, show default list
@@ -87,6 +161,8 @@ onMounted(() => {
  if (!connectionStore.isConnected) {
    connectionStore.connect();
  }
+  // 处理头像授权回调
+  handleAuthCallback();
  // Start onboarding tour if not completed
  if (shouldShowTour.value) {
    nextTick(() => {
@@ -102,10 +178,19 @@ onMounted(() => {
    <div class="sticky-header">
      <!-- Header: 单行布局 -->
      <header class="page-header">
-        <!-- 左侧：昵称 + 退出 -->
+        <!-- 左侧：头像 + 昵称 + 退出 -->
        <div class="header-left">
-          <span class="user-name">{{ connectionStore.userName || '访客' }}</span>
-          <span class="logout-btn" @click="handleLogout">退出</span>
+          <div class="avatar-wrapper" @click="handleAvatarClick">
+            <img v-if="userAvatar" :src="userAvatar" class="user-avatar" alt="头像" />
+            <div v-else class="avatar-placeholder" :class="{ loading: isLoadingAvatar }">
+              <span v-if="!isLoadingAvatar">+</span>
+              <span v-else class="loading-spinner"></span>
+            </div>
+          </div>
+          <div class="user-info">
+            <span class="user-name">{{ connectionStore.userName || '访客' }}</span>
+            <span class="logout-btn" @click="handleLogout">退出</span>
+          </div>
        </div>
        <!-- 中间：投票状态 -->
        <span class="voting-status" :class="{ active: votingStore.votingOpen }" data-tour="voting-status">
@@ -144,6 +229,12 @@ onMounted(() => {
    <!-- Voting Dock -->
    <VotingDock />

+    <!-- 摇一摇悬浮按钮 (暂时隐藏) -->
+    <!-- <button class="shake-fab" @click="goToShake">
+      <span class="shake-icon">🎉</span>
+      <span class="shake-label">摇一摇</span>
+    </button> -->
+
    <!-- Onboarding Tour -->
    <OnboardingTour
      :steps="tourSteps"
@@ -183,10 +274,59 @@ onMounted(() => {
 }

 .header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 80px;
+}
+
+.avatar-wrapper {
+  cursor: pointer;
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid $color-gold;
+}
+
+.avatar-placeholder {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px dashed rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 18px;
+  transition: all 0.2s;
+
+  &:active {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  &.loading {
+    border-color: $color-gold;
+  }
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: $color-gold;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
-  min-width: 60px;
 }

 .voting-status {
@@ -273,6 +413,46 @@ onMounted(() => {
  gap: $spacing-lg;
 }

+// 摇一摇悬浮按钮
+.shake-fab {
+  position: fixed;
+  right: 16px;
+  bottom: 180px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, $color-gold 0%, #d4a84b 100%);
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100;
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.shake-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.shake-label {
+  font-size: 10px;
+  color: #1a0a0a;
+  font-weight: 600;
+  margin-top: 2px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
@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); }
--- a/packages/client-mobile/vite.config.ts
+++ b/packages/client-mobile/vite.config.ts
@@ -65,7 +65,8 @@ export default defineConfig({
  },
  server: {
    host: '0.0.0.0',
-    port: 5174,
+    port: 5173,
+    allowedHosts: ['2026.cptp.let5see.xyz'],
    proxy: {
      '/api': {
        target: 'http://localhost:3000',