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',
|
name: 'Login',
|
||||||
component: view(
|
component: view(
|
||||||
() => import('@/views/Login.vue'),
|
() => import('@/views/Login.vue'),
|
||||||
mobilePlaceholder
|
() => import('@/views-mobile/LoginMobile.vue')
|
||||||
),
|
),
|
||||||
meta: { requiresGuest: true }
|
meta: { requiresGuest: true }
|
||||||
},
|
},
|
||||||
@@ -42,7 +42,7 @@ const routes: RouteRecordRaw[] = [
|
|||||||
name: 'Register',
|
name: 'Register',
|
||||||
component: view(
|
component: view(
|
||||||
() => import('@/views/Register.vue'),
|
() => import('@/views/Register.vue'),
|
||||||
mobilePlaceholder
|
() => import('@/views-mobile/RegisterMobile.vue')
|
||||||
),
|
),
|
||||||
meta: { requiresGuest: true }
|
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