congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support Chinese nickname in registration

Browse Source 
- User input "昵称" stored in `name` field (supports Chinese)
- `username` auto-generated (PocketBase requires ASCII)
- Password rules displayed inline with real-time validation
- All UI displays prefer `name` over `username`

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
2026-04-18 13:01:41 +08:00
parent 262f946a4e
commit 5cec2101af
13 changed files with 191 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/game/GameComments.vue
+1 -1
View File
@@ -71,7 +71,7 @@ function formatDate(dateStr: string) {
<div v-else class="comment-list">
<div v-for="c in comments" :key="c.id" class="comment-item">
<div class="comment-header">
<span class="comment-author">{{ c.expand?.author?.username || '用户' }}</span>
<span class="comment-author">{{ c.expand?.author?.name || c.expand?.author?.username || '用户' }}</span>
<span v-if="c.rating" class="comment-rating">
<el-icon v-for="i in c.rating" :key="i" :size="12"><StarFilled /></el-icon>
</span>
frontend/src/components/group/GroupMembersPanel.vue
+2 -2
View File
@@ -130,13 +130,13 @@ async function onJoinRequestResponded(requestId: string) {
<div v-for="member in members" :key="member.id" class="member-row">
<img :src="member.avatar || '/default-avatar.svg'" class="member-avatar" alt="" />
<div class="member-info">
<span class="member-name">{{ member.username }}</span>
<span class="member-name">{{ member.name || member.username }}</span>
<span v-if="member.id === group.owner" class="owner-badge">群主</span>
</div>
<button
v-if="isOwner && member.id !== group.owner && member.id !== userStore.userId"
class="remove-btn"
@click="removeMember(member.id, member.username)"
@click="removeMember(member.id, member.name || member.username)"
>
移除
</button>
frontend/src/components/group/JoinRequestCard.vue
+2 -2
View File
@@ -46,11 +46,11 @@ async function handleReject() {
<div class="request-info">
<img
:src="(props as any).expand?.user?.avatar || '/default-avatar.svg'"
:alt="(props as any).expand?.user?.username"
:alt="(props as any).expand?.user?.name || (props as any).expand?.user?.username"
class="avatar"
/>
<div class="info-text">
<span class="username">{{ (props as any).expand?.user?.username || '用户' }}</span>
<span class="username">{{ (props as any).expand?.user?.name || (props as any).expand?.user?.username || '用户' }}</span>
<span class="group-name">申请加入「{{ (props as any).expand?.group?.name || '群组' }}」</span>
</div>
</div>
frontend/src/components/team/IdleMembersList.vue
+3 -3
View File
@@ -62,17 +62,17 @@ async function inviteMember(userId: string, username: string) {
>
<img
:src="member.avatar || '/default-avatar.svg'"
:alt="member.username"
:alt="member.name || member.username"
class="avatar"
/>
<div class="member-info">
<span class="username">{{ member.username }}</span>
<span class="username">{{ member.name || member.username }}</span>
<span v-if="member.statusNote" class="status-note">{{ member.statusNote }}</span>
</div>
<button
v-if="status === 'idle'"
class="invite-btn"
@click="inviteMember(member.id, member.username)"
@click="inviteMember(member.id, member.name || member.username)"
>
邀请
</button>
frontend/src/components/team/InvitationCard.vue
+2 -2
View File
@@ -50,11 +50,11 @@ async function rejectInvitation() {
<div class="invitation-header">
<img
:src="invitation.expand?.from?.avatar || '/default-avatar.svg'"
:alt="invitation.expand?.from?.username"
:alt="invitation.expand?.from?.name || invitation.expand?.from?.username"
class="avatar"
/>
<div class="invitation-info">
<span class="inviter-name">{{ invitation.expand?.from?.username }}</span>
<span class="inviter-name">{{ invitation.expand?.from?.name || invitation.expand?.from?.username }}</span>
<span class="invitation-text">邀请你加入</span>
</div>
</div>
frontend/src/components/team/InviteButton.vue
+1 -1
View File
@@ -32,7 +32,7 @@ async function handleGameSelect(gameName: string) {
try {
const session = await createTeamSession({
sourceGroup: groupStore.currentGroupId,
name: `${userStore.user?.username || ''}的车队`,
name: `${userStore.user?.name || userStore.user?.username || ''}的车队`,
gameName,
members: [userStore.userId]
})
frontend/src/components/team/TeamSessionPanel.vue
+2 -2
View File
@@ -100,10 +100,10 @@ async function handleGameSelected(gameName: string) {
>
<img
:src="member.avatar || '/default-avatar.svg'"
:alt="member.username"
:alt="member.name || member.username"
class="avatar"
/>
<span class="username">{{ member.username }}</span>
<span class="username">{{ member.name || member.username }}</span>
</div>
</div>
</div>
frontend/src/stores/user.ts
+1 -1
View File
@@ -53,7 +53,7 @@ export const useUserStore = defineStore('user', () => {
}
// 注册
async function register(data: { email: string; password: string; passwordConfirm: string; username: string }) {
async function register(data: { email: string; password: string; passwordConfirm: string; username: string; name?: string }) {
try {
loading.value = true
await pb.collection('users').create(data)
frontend/src/types/index.ts
+6
View File
@@ -45,6 +45,7 @@ export type GamePlatform = 'PC' | 'PS5' | 'Xbox' | 'Switch' | 'Mobile'
export interface User {
id: string
username: string
name?: string
email: string
avatar?: string
status: UserStatus
@@ -171,6 +172,11 @@ export interface JoinRequest {
}
}
// 获取用户显示名称（优先 name，回退 username）
export function displayName(user?: { name?: string; username: string } | null): string {
return user?.name || user?.username || '未知'
}
// 多媒体记忆类型 (二期规划)
export type MemoryFileType = 'image' | 'video' | 'audio' | 'other'
frontend/src/views/GroupView.vue
+3 -3
View File
@@ -23,7 +23,7 @@ const members = computed(() => groupStore.currentMembers)
const ownerName = computed(() => {
const owner = members.value.find(m => m.id === group.value?.owner)
return owner?.username || '未知'
return owner?.name || owner?.username || '未知'
})
const membersByStatus = computed(() => {
@@ -155,8 +155,8 @@ async function refreshMembers() {
<div v-if="list.length === 0" class="empty-row">暂无</div>
<div v-else class="member-row-list">
<div v-for="m in list" :key="m.id" class="member-row">
<img :src="m.avatar || '/default-avatar.svg'" :alt="m.username" class="avatar" />
<span class="member-name">{{ m.username }}</span>
<img :src="m.avatar || '/default-avatar.svg'" :alt="m.name || m.username" class="avatar" />
<span class="member-name">{{ m.name || m.username }}</span>
<span v-if="m.statusNote" class="member-note">{{ m.statusNote }}</span>
</div>
</div>
frontend/src/views/Home.vue
+1 -1
View File
@@ -70,7 +70,7 @@ function openGameDetail(game: Game) {
<section class="welcome-bar">
<div class="welcome-left">
<h1 class="welcome-title">
欢迎回来, <span class="gg-text-gradient">{{ userStore.user?.username || '玩家' }}</span>
欢迎回来, <span class="gg-text-gradient">{{ userStore.user?.name || userStore.user?.username || '玩家' }}</span>
</h1>
<div class="status-line">
<span :class="statusDotClass" />
frontend/src/views/Layout.vue
+2 -1
View File
@@ -11,6 +11,7 @@ import NotificationPanel from '@/components/common/NotificationPanel.vue'
import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
import JoinGroupDialog from '@/components/group/JoinGroupDialog.vue'
import { Monitor, HomeFilled, Grid, Plus, Search, Bell, AlarmClock, SwitchButton, Document } from '@element-plus/icons-vue'
import { displayName } from '@/types'
const router = useRouter()
const route = useRoute()
@@ -151,7 +152,7 @@ const pageTitle = computed(() => {
class="user-avatar"
alt=""
/>
<span class="user-name">{{ userStore.user?.username }}</span>
<span class="user-name">{{ displayName(userStore.user) }}</span>
<button class="logout-btn" @click="handleLogout" title="退出登录">
<el-icon><SwitchButton /></el-icon>
</button>
frontend/src/views/Register.vue
+165 -55
View File
@@ -1,49 +1,74 @@
<!-- src/views/Register.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import PasswordInput from '@/components/common/PasswordInput.vue'
const router = useRouter()
const userStore = useUserStore()
const username = ref('')
const nickname = ref('')
const email = ref('')
const password = ref('')
const passwordConfirm = ref('')
const loading = ref(false)
const formError = ref('')
// ── 实时校验 ──
const nicknameOk = computed(() => nickname.value.length >= 2 && nickname.value.length <= 16)
const hasLetter = computed(() => /[a-zA-Z]/.test(password.value))
const hasDigit = computed(() => /[0-9]/.test(password.value))
const hasSpecial = computed(() => /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password.value))
const pwLenOk = computed(() => password.value.length >= 6)
const pwTypeCount = computed(() => [hasLetter.value, hasDigit.value, hasSpecial.value].filter(Boolean).length)
const passwordOk = computed(() => pwLenOk.value && pwTypeCount.value >= 2)
const matchOk = computed(() => password.value === passwordConfirm.value && password.value !== '')
const passwordStrength = computed(() => {
if (!pwLenOk.value) return 0
if (pwTypeCount.value >= 3 && password.value.length >= 8) return 3
if (pwTypeCount.value >= 2) return 2
return 1
})
const strengthLabels = ['', '弱', '中', '强']
const strengthColors = ['', '#ef4444', '#f59e0b', '#10b981']
async function handleRegister() {
if (!username.value || !email.value || !password.value) {
ElMessage.warning('请填写所有必填项')
formError.value = ''
if (!nickname.value || !email.value || !password.value) {
formError.value = '请填写所有必填项'
return
}
if (password.value !== passwordConfirm.value) {
ElMessage.warning('两次输入的密码不一致')
if (!nicknameOk.value) {
formError.value = '昵称需 2-16 个字符'
return
}
if (password.value.length < 6) {
ElMessage.warning('密码长度至少为 6 位')
if (!passwordOk.value) {
formError.value = '密码不符合要求'
return
}
if (!matchOk.value) {
formError.value = '两次输入的密码不一致'
return
}
try {
loading.value = true
// 自动生成合法 username（PocketBase 要求英文字母数字），昵称存到 name 字段
const autoUsername = 'u' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
await userStore.register({
username: username.value,
username: autoUsername,
name: nickname.value,
email: email.value,
password: password.value,
passwordConfirm: passwordConfirm.value
})
ElMessage.success('注册成功')
router.push({ name: 'Home' })
} catch (error: any) {
ElMessage.error(error.message || '注册失败')
formError.value = error.message || '注册失败'
} finally {
loading.value = false
}
@@ -61,49 +86,52 @@ async function handleRegister() {
</div>
<form class="register-form" @submit.prevent="handleRegister">
<!-- 昵称 -->
<div class="form-group">
<label for="username">用户名</label>
<el-input
id="username"
v-model="username"
placeholder="请输入用户名"
required
/>
<label for="nickname">昵称</label>
<el-input id="nickname" v-model="nickname" placeholder="2-16 个字符，支持中文" required />
<div class="field-rules">
<span class="rule" :class="{ ok: nicknameOk && nickname }">2-16 个字符，支持中英文</span>
</div>
</div>
<!-- 邮箱 -->
<div class="form-group">
<label for="email">邮箱</label>
<el-input
id="email"
v-model="email"
type="email"
placeholder="请输入邮箱"
required
/>
<el-input id="email" v-model="email" type="email" placeholder="请输入邮箱" required />
</div>
<!-- 密码 -->
<div class="form-group">
<label for="password">密码</label>
<PasswordInput
id="password"
v-model="password"
placeholder="请输入密码（至少6位）"
required
/>
<PasswordInput id="password" v-model="password" placeholder="设置密码" required />
<div class="pw-rules">
<span class="rule" :class="{ ok: pwLenOk }">至少 6 位</span>
<span class="rule" :class="{ ok: hasLetter }">包含字母</span>
<span class="rule" :class="{ ok: hasDigit }">包含数字</span>
<span class="rule" :class="{ ok: hasSpecial }">包含特殊字符</span>
</div>
<div class="pw-note">需满足以上四项中的任意两项</div>
<div v-if="password" class="password-strength">
<div class="strength-bar">
<div class="strength-fill" :style="{ width: passwordStrength * 33 + '%', background: strengthColors[passwordStrength] }" />
</div>
<span class="strength-label" :style="{ color: strengthColors[passwordStrength] }">{{ strengthLabels[passwordStrength] }}</span>
</div>
</div>
<!-- 确认密码 -->
<div class="form-group">
<label for="passwordConfirm">确认密码</label>
<PasswordInput
id="passwordConfirm"
v-model="passwordConfirm"
placeholder="请再次输入密码"
required
/>
<PasswordInput id="passwordConfirm" v-model="passwordConfirm" placeholder="请再次输入密码" required />
<span v-if="passwordConfirm && !matchOk" class="field-hint error">密码不一致</span>
</div>
<!-- 表单级错误 -->
<div v-if="formError" class="form-error">{{ formError }}</div>
<button type="submit" class="submit-btn" :disabled="loading">
<span v-if="loading" class="btn-loader"></span>
<span v-if="loading" class="btn-loader" />
{{ loading ? '注册中...' : '注册' }}
</button>
</form>
@@ -123,15 +151,14 @@ async function handleRegister() {
justify-content: center;
min-height: 100vh;
padding: 24px;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f0fdf4 100%);
}
/* ── 卡片 ── */
.register-card {
width: 100%;
max-width: 420px;
padding: 44px 40px 40px;
background: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--gg-border);
@@ -139,15 +166,12 @@ async function handleRegister() {
box-shadow: 0 8px 40px rgba(5, 150, 105, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* ── 头部品牌 ── */
.card-header {
text-align: center;
margin-bottom: 32px;
margin-bottom: 28px;
}
.brand {
margin: 0 0 8px;
}
.brand { margin: 0 0 8px; }
.brand-text {
font-size: 32px;
@@ -163,27 +187,113 @@ async function handleRegister() {
margin: 0;
font-size: 15px;
color: var(--gg-text-secondary);
font-weight: 400;
}
/* ── 表单 ── */
.register-form {
display: flex;
flex-direction: column;
gap: 18px;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
gap: 6px;
}
.form-group label {
font-size: 13px;
font-weight: 500;
color: var(--gg-text-secondary);
letter-spacing: 0.02em;
}
/* ── 规则提示 ── */
.field-rules {
display: flex;
gap: 6px;
}
.pw-rules {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rule {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
color: var(--gg-text-muted);
padding: 2px 8px;
border-radius: 4px;
background: var(--gg-bg-elevated);
transition: all 0.2s;
}
.rule::before {
content: '○';
font-size: 10px;
}
.rule.ok {
color: var(--gg-primary);
background: rgba(5, 150, 105, 0.08);
}
.rule.ok::before {
content: '●';
}
.pw-note {
font-size: 11px;
color: var(--gg-text-muted);
}
.field-hint {
font-size: 12px;
}
.field-hint.error {
color: var(--gg-danger);
}
/* ── 密码强度 ── */
.password-strength {
display: flex;
align-items: center;
gap: 8px;
}
.strength-bar {
flex: 1;
height: 4px;
background: var(--gg-bg-elevated);
border-radius: 2px;
overflow: hidden;
}
.strength-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s, background 0.3s;
}
.strength-label {
font-size: 11px;
font-weight: 600;
}
/* ── 表单错误 ── */
.form-error {
padding: 10px 14px;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--gg-radius-sm);
color: var(--gg-danger);
font-size: 13px;
line-height: 1.5;
}
/* ── 提交按钮 ── */
@@ -220,7 +330,7 @@ async function handleRegister() {
width: 14px;
height: 14px;
margin-right: 8px;
border: 2px solid rgba(255,255,255,0.3);
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;