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
This commit is contained in:
锦麟 王
@@ -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 }
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user