feat(mobile): complete mobile frontend - all pages + code splitting

2026-06-15 17:05:05 +08:00
parent 9ce4683bc0
commit 0d411ea77e
22 changed files with 5223 additions and 14 deletions
@@ -0,0 +1,158 @@
+<!-- src/views-mobile/LoginMobile.vue -->
+<!-- 手机端登录页 -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { pb } from '@/api/pocketbase'
+import { showFailToast } from 'vant'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+const identity = ref('')
+const password = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  if (!identity.value || !password.value) {
+    showFailToast('请输入昵称/邮箱和密码')
+    return
+  }
+
+  try {
+    loading.value = true
+    let loginIdentity = identity.value.trim()
+
+    // 与桌面端一致：不含 @ 时按昵称或用户名查找对应 username
+    if (!loginIdentity.includes('@')) {
+      const result = await pb.collection('users').getList(1, 1, {
+        filter: `name="${loginIdentity}" || username="${loginIdentity}"`,
+        $autoCancel: false
+      })
+      if (result.items.length === 0) {
+        showFailToast('用户不存在')
+        return
+      }
+      loginIdentity = (result.items[0] as any).username
+    }
+
+    await userStore.login(loginIdentity, password.value)
+    const redirect = (route.query.redirect as string) || '/'
+    router.replace(redirect)
+  } catch (error: any) {
+    showFailToast(error.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="login-mobile">
+    <div class="brand-area">
+      <div class="brand-icon">🎮</div>
+      <h1 class="brand-title">Game Group</h1>
+      <p class="brand-subtitle">组队开黑，一起嗨</p>
+    </div>
+
+    <div class="form-area">
+      <van-cell-group inset>
+        <van-field
+          v-model="identity"
+          label="账号"
+          placeholder="昵称 / 邮箱"
+          left-icon="contact"
+          clearable
+        />
+        <van-field
+          v-model="password"
+          type="password"
+          label="密码"
+          placeholder="请输入密码"
+          left-icon="lock"
+        />
+      </van-cell-group>
+
+      <div class="submit-area">
+        <van-button
+          type="primary"
+          block
+          round
+          :loading="loading"
+          loading-text="登录中..."
+          @click="handleLogin"
+        >
+          登录
+        </van-button>
+      </div>
+
+      <div class="footer-links">
+        还没有账号？
+        <router-link :to="{ name: 'Register', query: route.query }" class="link">
+          立即注册
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-mobile {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 16px;
+  background: linear-gradient(160deg, #ecfdf5 0%, #f0fdf4 50%, #ffffff 100%);
+}
+
+.brand-area {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.brand-icon {
+  font-size: 56px;
+  margin-bottom: 12px;
+}
+
+.brand-title {
+  font-size: 28px;
+  font-weight: 800;
+  margin: 0 0 8px;
+  background: var(--gg-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.brand-subtitle {
+  font-size: 14px;
+  color: var(--gg-text-secondary);
+  margin: 0;
+}
+
+.form-area {
+  max-width: 420px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.submit-area {
+  padding: 20px 16px 0;
+}
+
+.footer-links {
+  text-align: center;
+  margin-top: 24px;
+  font-size: 14px;
+  color: var(--gg-text-muted);
+}
+
+.link {
+  color: var(--gg-primary);
+  font-weight: 500;
+}
+</style>