From d4dbb1a10f35e2ba496ff58a9139a91e6af6acde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=94=A6=E9=BA=9F=20=E7=8E=8B?= <Jinlin.Wang@cicc.com.cn>
Date: Thu, 18 Jun 2026 10:57:33 +0800
Subject: [PATCH] feat(mobile): stage 2 - auth (LoginMobile + RegisterMobile)

- migrate LoginMobile.vue (nickname/email login, password field)
- migrate RegisterMobile.vue (auto-generated username)
- router: wire Login/Register mobile views
- verified: user store login()/register() signatures match uat

build verified: vue-tsc + vite build pass
---
 frontend/src/router/index.ts                 |   4 +-
 frontend/src/views-mobile/LoginMobile.vue    | 158 ++++++++++++++++++
 frontend/src/views-mobile/RegisterMobile.vue | 166 +++++++++++++++++++
 3 files changed, 326 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/views-mobile/LoginMobile.vue
 create mode 100644 frontend/src/views-mobile/RegisterMobile.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 70436c8..09d44a8 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -33,7 +33,7 @@ const routes: RouteRecordRaw[] = [
     name: 'Login',
     component: view(
       () => import('@/views/Login.vue'),
-      mobilePlaceholder
+      () => import('@/views-mobile/LoginMobile.vue')
     ),
     meta: { requiresGuest: true }
   },
@@ -42,7 +42,7 @@ const routes: RouteRecordRaw[] = [
     name: 'Register',
     component: view(
       () => import('@/views/Register.vue'),
-      mobilePlaceholder
+      () => import('@/views-mobile/RegisterMobile.vue')
     ),
     meta: { requiresGuest: true }
   },
diff --git a/frontend/src/views-mobile/LoginMobile.vue b/frontend/src/views-mobile/LoginMobile.vue
new file mode 100644
index 0000000..311a7e0
--- /dev/null
+++ b/frontend/src/views-mobile/LoginMobile.vue
@@ -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>
diff --git a/frontend/src/views-mobile/RegisterMobile.vue b/frontend/src/views-mobile/RegisterMobile.vue
new file mode 100644
index 0000000..6400d85
--- /dev/null
+++ b/frontend/src/views-mobile/RegisterMobile.vue
@@ -0,0 +1,166 @@
+<!-- src/views-mobile/RegisterMobile.vue -->
+<!-- 手机端注册页 -->
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { showFailToast, showSuccessToast } from 'vant'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+
+const name = ref('')
+const password = ref('')
+const passwordConfirm = ref('')
+const loading = ref(false)
+
+// 自动生成 username（与桌面端 Register 一致：'u' + 时间戳base36 + 随机）
+const generatedUsername = computed(() => {
+  return 'u' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
+})
+
+async function handleRegister() {
+  if (!name.value.trim()) {
+    showFailToast('请输入昵称')
+    return
+  }
+  if (!password.value || password.value.length < 6) {
+    showFailToast('密码至少 6 位')
+    return
+  }
+  if (password.value !== passwordConfirm.value) {
+    showFailToast('两次密码不一致')
+    return
+  }
+
+  try {
+    loading.value = true
+    const username = generatedUsername.value
+    // 注册用 email 占位（与桌面端一致，username 为系统标识，email 用 username@local 模拟）
+    await userStore.register({
+      email: `${username}@gamegroup.local`,
+      password: password.value,
+      passwordConfirm: passwordConfirm.value,
+      username,
+      name: name.value.trim()
+    })
+    showSuccessToast('注册成功')
+    const redirect = (route.query.redirect as string) || '/'
+    router.replace(redirect)
+  } catch (error: any) {
+    showFailToast(error.message || '注册失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="register-mobile">
+    <van-nav-bar title="注册" left-arrow @click-left="router.back()" />
+
+    <div class="form-area">
+      <div class="intro">
+        <div class="intro-icon">🎮</div>
+        <h2 class="intro-title">创建账号</h2>
+        <p class="intro-desc">输入昵称开始你的组队之旅</p>
+      </div>
+
+      <van-cell-group inset>
+        <van-field
+          v-model="name"
+          label="昵称"
+          placeholder="请输入中文昵称"
+          left-icon="contact"
+          clearable
+        />
+        <van-field
+          v-model="password"
+          type="password"
+          label="密码"
+          placeholder="至少 6 位"
+          left-icon="lock"
+        />
+        <van-field
+          v-model="passwordConfirm"
+          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="handleRegister"
+        >
+          注册
+        </van-button>
+      </div>
+
+      <div class="footer-links">
+        已有账号？
+        <router-link :to="{ name: 'Login', query: route.query }" class="link">
+          去登录
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-mobile {
+  min-height: 100vh;
+  background: var(--gg-bg);
+}
+
+.form-area {
+  padding: 24px 0;
+}
+
+.intro {
+  text-align: center;
+  margin-bottom: 28px;
+  padding: 0 16px;
+}
+
+.intro-icon {
+  font-size: 48px;
+  margin-bottom: 8px;
+}
+
+.intro-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--gg-text);
+  margin: 0 0 6px;
+}
+
+.intro-desc {
+  font-size: 14px;
+  color: var(--gg-text-muted);
+  margin: 0;
+}
+
+.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>