gamegroup2/frontend/src/views-mobile/LoginMobile.vue

<!-- 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>