feat: update login flow and add firework effects

- Update mobile HomeView to show WeChat scan login instructions
- Remove manual name/department input form from mobile client
- Add firework particle effects to big screen background
- Remove department field from login flow types

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/client-mobile/src/views/HomeView.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useConnectionStore } from '../stores/connection';
-import { showToast } from 'vant';
 
 const router = useRouter();
 const connectionStore = useConnectionStore();
 
-const userName = ref('');
-const userDept = ref('技术部');
-const isLoading = ref(false);
-
 // Check if already logged in
 onMounted(() => {
   if (connectionStore.userId && connectionStore.userName && connectionStore.userName !== '访客') {
@@ -18,26 +13,6 @@ onMounted(() => {
     router.replace('/vote');
   }
 });
-
-async function handleEnter() {
-  if (!userName.value.trim()) {
-    showToast('请输入您的姓名');
-    return;
-  }
-
-  isLoading.value = true;
-
-  // Generate a simple user ID (in production, this would come from auth)
-  const odrawId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-  connectionStore.setUser(odrawId, userName.value.trim(), userDept.value);
-
-  // Wait for connection
-  await new Promise((resolve) => setTimeout(resolve, 500));
-
-  isLoading.value = false;
-  router.push('/vote');
-}
 </script>
 
 <template>
@@ -59,40 +34,27 @@ async function handleEnter() {
         <p class="subtitle">投票 · 抽奖 · 互动</p>
       </div>
 
-      <div class="form-section">
-        <div class="input-wrapper guochao-border">
-          <van-field
-            v-model="userName"
-            placeholder="请输入您的姓名"
-            :border="false"
-            clearable
-            maxlength="20"
-            @keyup.enter="handleEnter"
-          />
-        </div>
- 
-        <div class="input-wrapper guochao-border">
-          <van-field
-            v-model="userDept"
-            placeholder="请输入您的部门"
-            :border="false"
-            clearable
-            maxlength="20"
-            @keyup.enter="handleEnter"
-          />
+      <div class="scan-section">
+        <div class="scan-hint">
+          <van-icon name="scan" size="64" color="#c41230" />
+          <p class="hint-title">请使用微信扫码登录</p>
+          <p class="hint-desc">请前往大屏幕扫描二维码进入年会</p>
         </div>
 
-        <van-button
-          class="enter-btn"
-          type="primary"
-          block
-          round
-          :loading="isLoading"
-          loading-text="进入中..."
-          @click="handleEnter"
-        >
-          进入年会
-        </van-button>
+        <div class="steps">
+          <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>
       </div>
 
       <!-- Features -->
@@ -240,31 +202,58 @@ async function handleEnter() {
   }
 }
 
-.form-section {
+.scan-section {
   margin-bottom: $spacing-xl;
+  text-align: center;
 
-  .input-wrapper {
-    background: $color-bg-card;
-    margin-bottom: $spacing-md;
-    padding: $spacing-xs;
+  .scan-hint {
+    margin-bottom: $spacing-xl;
 
-    :deep(.van-field) {
-      background: transparent;
+    .hint-title {
+      font-size: $font-size-xl;
+      font-weight: bold;
+      color: $color-text-primary;
+      margin: $spacing-md 0 $spacing-xs;
+    }
 
-      .van-field__control {
-        text-align: center;
-        font-size: $font-size-lg;
-      }
+    .hint-desc {
+      font-size: $font-size-md;
+      color: $color-text-secondary;
     }
   }
 
-  .enter-btn {
-    background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
-    border: none;
-    height: 48px;
-    font-size: $font-size-lg;
-    font-weight: 500;
-    box-shadow: $shadow-md;
+  .steps {
+    display: flex;
+    justify-content: center;
+    gap: $spacing-lg;
+    padding: $spacing-md;
+    background: rgba($color-primary, 0.05);
+    border-radius: $radius-lg;
+  }
+
+  .step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $spacing-xs;
+  }
+
+  .step-num {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: $color-primary;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: $font-size-sm;
+  }
+
+  .step-text {
+    font-size: $font-size-xs;
+    color: $color-text-secondary;
   }
 }