feat: support Chinese nickname in registration

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

frontend/src/views/GroupView.vue

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

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

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

@@ -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;