Initial commit: 添加项目代码

demo/frontend/src/views/Register.vue

@@ -0,0 +1,513 @@
+<template>
+  <div class="register">
+    <a-row justify="center" align="middle" class="register-container">
+      <a-col :xs="22" :sm="16" :md="12" :lg="8" :xl="6">
+        <a-card class="register-card">
+          <template #header>
+            <div class="register-header">
+              <UserOutlined style="font-size: 32px; color: #67C23A" />
+              <h2>{{ $t('register.title') }}</h2>
+            </div>
+          </template>
+          
+          <a-form
+            ref="registerFormRef"
+            :model="registerForm"
+            :rules="registerRules"
+            label-width="80px"
+            @submit.prevent="handleRegister"
+          >
+            <a-form-item :label="$t('profile.username')" prop="username">
+              <a-input
+                v-model="registerForm.username"
+                :placeholder="$t('register.usernamePlaceholder')"
+                prefix-icon="User"
+                clearable
+                @blur="checkUsername"
+              />
+              <div v-if="usernameChecking" class="checking-text">
+                <LoadingOutlined class="is-loading" />
+                {{ $t('common.loading') }}
+              </div>
+              <div v-if="usernameExists" class="error-text">
+                <CloseCircleFilled />
+                {{ $t('register.usernameExists') }}
+              </div>
+              <div v-if="usernameAvailable" class="success-text">
+                <CheckCircleFilled />
+                {{ $t('register.usernameAvailable') }}
+              </div>
+            </a-form-item>
+            
+            <a-form-item :label="$t('profile.email')" prop="email">
+              <a-input
+                v-model="registerForm.email"
+                :placeholder="$t('register.emailPlaceholder')"
+                prefix-icon="Message"
+                clearable
+                @blur="checkEmail"
+              />
+              <div v-if="emailChecking" class="checking-text">
+                <LoadingOutlined class="is-loading" />
+                {{ $t('common.loading') }}
+              </div>
+              <div v-if="emailExists" class="error-text">
+                <CloseCircleFilled />
+                {{ $t('register.emailExists') }}
+              </div>
+              <div v-if="emailAvailable" class="success-text">
+                <CheckCircleFilled />
+                {{ $t('register.emailAvailable') }}
+              </div>
+            </a-form-item>
+            
+            <a-form-item :label="$t('login.passwordPlaceholder').replace('请输入', '')" prop="password">
+              <a-input
+                v-model="registerForm.password"
+                type="password"
+                :placeholder="$t('register.passwordPlaceholder')"
+                prefix-icon="Lock"
+                show-password
+                clearable
+                @input="checkPasswordStrength"
+              />
+              <div v-if="passwordStrength" class="password-strength">
+                <div class="strength-bar">
+                  <div 
+                    class="strength-fill" 
+                    :class="strengthClass"
+                    :style="{ width: strengthWidth }"
+                  ></div>
+                </div>
+                <span class="strength-text">{{ strengthText }}</span>
+              </div>
+            </a-form-item>
+            
+            <a-form-item :label="$t('common.confirm')" prop="confirmPassword">
+              <a-input
+                v-model="registerForm.confirmPassword"
+                type="password"
+                :placeholder="$t('register.confirmPasswordPlaceholder')"
+                prefix-icon="Lock"
+                show-password
+                clearable
+              />
+            </a-form-item>
+            
+            <a-form-item>
+              <a-checkbox v-model:checked="agreeTerms">
+                {{ $t('register.agreement') }}
+              </a-checkbox>
+            </a-form-item>
+            
+            <a-form-item>
+              <a-button
+                type="success"
+                size="large"
+                :loading="userStore.loading"
+                :disabled="!canRegister"
+                @click="handleRegister"
+                class="register-button"
+              >
+{{ userStore.loading ? $t('register.registering') : $t('register.registerButton') }}
+              </a-button>
+            </a-form-item>
+          </a-form>
+          
+          <div class="register-footer">
+            <p>{{ $t('register.haveAccount') }}<router-link to="/login" class="login-link">{{ $t('register.loginNow') }}</router-link></p>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { checkUsernameExists, checkEmailExists } from '@/api/auth'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+import {
+  UserOutlined,
+  LockOutlined,
+  LoadingOutlined,
+  CloseCircleFilled,
+  CheckCircleFilled,
+  MailOutlined,
+  PhoneOutlined,
+  CalendarOutlined,
+  EnvironmentOutlined
+} from '@ant-design/icons-vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const userStore = useUserStore()
+
+const registerFormRef = ref()
+const agreeTerms = ref(false)
+
+// 用户名检查状态
+const usernameChecking = ref(false)
+const usernameExists = ref(false)
+const usernameAvailable = ref(false)
+
+// 邮箱检查状态
+const emailChecking = ref(false)
+const emailExists = ref(false)
+const emailAvailable = ref(false)
+
+// 密码强度
+const passwordStrength = ref(false)
+const strengthLevel = ref(0)
+
+const registerForm = reactive({
+  username: '',
+  email: '',
+  password: '',
+  confirmPassword: ''
+})
+
+const registerRules = {
+  username: [
+    { required: true, message: t('register.usernameRequired'), trigger: 'blur' },
+    { min: 3, max: 20, message: t('register.usernameLength'), trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: t('register.usernameFormat'), trigger: 'blur' }
+  ],
+  email: [
+    { required: true, message: t('register.emailRequired'), trigger: 'blur' },
+    { type: 'email', message: t('register.emailFormat'), trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: t('register.passwordRequired'), trigger: 'blur' },
+    { min: 6, max: 20, message: t('register.passwordLength'), trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: t('register.confirmPasswordRequired'), trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.password) {
+          callback(new Error(t('register.passwordMismatch')))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+}
+
+// 检查用户名是否存在
+const checkUsername = async () => {
+  if (!registerForm.username || registerForm.username.length < 3) {
+    resetUsernameCheck()
+    return
+  }
+  
+  try {
+    usernameChecking.value = true
+    usernameExists.value = false
+    usernameAvailable.value = false
+    
+    const response = await checkUsernameExists(registerForm.username)
+    
+    if (response.success) {
+      usernameExists.value = response.data.exists
+      usernameAvailable.value = !response.data.exists
+    }
+  } catch (error) {
+    console.error('CheckOutlined username error:', error)
+  } finally {
+    usernameChecking.value = false
+  }
+}
+
+// 检查邮箱是否存在
+const checkEmail = async () => {
+  if (!registerForm.email || !isValidEmail(registerForm.email)) {
+    resetEmailCheck()
+    return
+  }
+  
+  try {
+    emailChecking.value = true
+    emailExists.value = false
+    emailAvailable.value = false
+    
+    const response = await checkEmailExists(registerForm.email)
+    
+    if (response.success) {
+      emailExists.value = response.data.exists
+      emailAvailable.value = !response.data.exists
+    }
+  } catch (error) {
+    console.error('CheckOutlined email error:', error)
+  } finally {
+    emailChecking.value = false
+  }
+}
+
+// 检查密码强度
+const checkPasswordStrength = () => {
+  const password = registerForm.password
+  if (!password) {
+    passwordStrength.value = false
+    return
+  }
+  
+  passwordStrength.value = true
+  
+  let score = 0
+  if (password.length >= 6) score++
+  if (password.length >= 8) score++
+  if (/[a-z]/.test(password)) score++
+  if (/[A-Z]/.test(password)) score++
+  if (/[0-9]/.test(password)) score++
+  if (/[^A-Za-z0-9]/.test(password)) score++
+  
+  strengthLevel.value = Math.min(score, 4)
+}
+
+// 重置用户名检查状态
+const resetUsernameCheck = () => {
+  usernameChecking.value = false
+  usernameExists.value = false
+  usernameAvailable.value = false
+}
+
+// 重置邮箱检查状态
+const resetEmailCheck = () => {
+  emailChecking.value = false
+  emailExists.value = false
+  emailAvailable.value = false
+}
+
+// 验证邮箱格式
+const isValidEmail = (email) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+// 计算属性
+const strengthClass = computed(() => {
+  const classes = ['weak', 'fair', 'good', 'strong']
+  return classes[strengthLevel.value - 1] || 'weak'
+})
+
+const strengthWidth = computed(() => {
+  return `${(strengthLevel.value / 4) * 100}%`
+})
+
+const strengthText = computed(() => {
+  const texts = [t('common.weak'), t('common.fair'), t('common.good'), t('common.strong')]
+  return texts[strengthLevel.value - 1] || t('common.weak')
+})
+
+const canRegister = computed(() => {
+  return agreeTerms.value && 
+         usernameAvailable.value && 
+         emailAvailable.value && 
+         registerForm.password && 
+         registerForm.confirmPassword &&
+         registerForm.password === registerForm.confirmPassword
+})
+
+const handleRegister = async () => {
+  if (!registerFormRef.value) return
+  
+  try {
+    const valid = await registerFormRef.value.validate()
+    if (!valid) return
+    
+    if (!agreeTerms.value) {
+      message.warning(t('common.pleaseAgreeTerms'))
+      return
+    }
+    
+    const result = await userStore.registerUser(registerForm)
+    
+    if (result.success) {
+      message.success(result.message || t('common.success'))
+      router.push('/login')
+    } else {
+      message.error(result.message || t('common.updateFailed'))
+    }
+  } catch (error) {
+    console.error('Register error:', error)
+    message.error(t('common.registerFailed'))
+  }
+}
+</script>
+
+<style scoped>
+.register {
+  min-height: calc(100vh - 120px);
+  background: linear-gradient(135deg, var(--secondary-500) 0%, var(--secondary-600) 100%);
+  padding: var(--space-10) 0;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* 页面特殊效果 */
+.register::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
+  animation: registerFloat 4s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+
+@keyframes registerFloat {
+  0% { transform: translateY(0px) rotate(0deg); }
+  100% { transform: translateY(-10px) rotate(1deg); }
+}
+
+/* 内容层级 */
+.register > * {
+  position: relative;
+  z-index: 2;
+}
+
+.register-container {
+  min-height: calc(100vh - 200px);
+}
+
+.register-card {
+  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-lg);
+  backdrop-filter: blur(10px);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+}
+
+.register-header {
+  text-align: center;
+  margin-bottom: var(--space-5);
+}
+
+.register-header h2 {
+  margin: var(--space-3) 0 0 0;
+  color: var(--text-primary);
+  font-weight: var(--font-semibold);
+}
+
+.register-button {
+  width: 100%;
+  height: 45px;
+  font-size: var(--text-base);
+}
+
+.register-footer {
+  text-align: center;
+  margin-top: var(--space-5);
+}
+
+.register-footer p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.login-link {
+  color: var(--success-500);
+  text-decoration: none;
+  font-weight: var(--font-medium);
+}
+
+.login-link:hover {
+  text-decoration: underline;
+}
+
+.terms-link {
+  color: var(--primary-500);
+  text-decoration: none;
+}
+
+.terms-link:hover {
+  text-decoration: underline;
+}
+
+.checking-text, .error-text, .success-text {
+  font-size: var(--text-xs);
+  margin-top: var(--space-1);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.checking-text {
+  color: var(--text-tertiary);
+}
+
+.error-text {
+  color: var(--error-400);
+}
+
+.success-text {
+  color: var(--success-500);
+}
+
+.password-strength {
+  margin-top: var(--space-2);
+}
+
+.strength-bar {
+  height: 4px;
+  background-color: var(--bg-elevated);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: var(--space-1);
+}
+
+.strength-fill {
+  height: 100%;
+  transition: all var(--duration-slow) var(--ease-default);
+}
+
+.strength-fill.weak {
+  background-color: var(--error-400);
+}
+
+.strength-fill.fair {
+  background-color: var(--warning-500);
+}
+
+.strength-fill.good {
+  background-color: var(--primary-500);
+}
+
+.strength-fill.strong {
+  background-color: var(--success-500);
+}
+
+.strength-text {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+
+@media (max-width: 768px) {
+  .register {
+    padding: var(--space-5) 0;
+  }
+  
+  .register-container {
+    min-height: calc(100vh - 160px);
+  }
+}
+</style>
+
+
+
+
+
+
+
+