refactor(project): Reorganize frontend and backend directories

2026-03-18 10:45:15 +08:00
parent cc9eaf4cdf
commit 92a139e470
513 changed files with 28251 additions and 287 deletions
@@ -0,0 +1,196 @@
+<template>
+  <div class="register-page">
+    <div class="register-container">
+      <div class="register-header">
+        <h1 class="logo">HAOVP</h1>
+        <p class="slogan">注册新账号</p>
+      </div>
+
+      <van-form @submit="handleRegister">
+        <van-cell-group inset>
+          <van-field
+            v-model="form.username"
+            name="username"
+            label="用户名"
+            placeholder="请输入用户名"
+            :rules="[{ required: true, message: '请输入用户名' }]"
+          />
+          <van-field
+            v-model="form.email"
+            name="email"
+            label="邮箱"
+            placeholder="请输入邮箱"
+            :rules="[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式不正确' }]"
+          />
+          <van-field
+            v-model="form.phone"
+            name="phone"
+            label="手机号"
+            placeholder="请输入手机号"
+          />
+          <van-field
+            v-model="form.password"
+            type="password"
+            name="password"
+            label="密码"
+            placeholder="请输入密码"
+            :rules="[{ required: true, message: '请输入密码' }, { pattern: /^.{6,}$/, message: '密码至少6位' }]"
+          />
+          <van-field
+            v-model="form.confirmPassword"
+            type="password"
+            name="confirmPassword"
+            label="确认密码"
+            placeholder="请再次输入密码"
+            :rules="[{ required: true, message: '请确认密码' }, { validator: validatePassword, message: '两次密码不一致' }]"
+          />
+          <van-field
+            v-model="form.captcha"
+            name="captcha"
+            label="验证码"
+            placeholder="请输入验证码"
+            :rules="[{ required: true, message: '请输入验证码' }]"
+          >
+            <template #button>
+              <van-image :src="captchaImage" fit="contain" class="captcha-btn" @click="refreshCaptcha" />
+            </template>
+          </van-field>
+        </van-cell-group>
+
+        <div class="register-actions">
+          <van-button round block type="primary" native-type="submit" :loading="loading" color="#00a1d6">
+            注册
+          </van-button>
+        </div>
+      </van-form>
+
+      <div class="register-footer">
+        <router-link to="/login" class="link">已有账号？去登录</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showSuccessToast } from 'vant'
+import { authApi, type CaptchaResult } from '@/api/auth.ts'
+
+const router = useRouter()
+const loading = ref(false)
+const captchaKey = ref('')
+const captchaImage = ref('')
+
+const form = reactive({
+  username: '',
+  email: '',
+  phone: '',
+  password: '',
+  confirmPassword: '',
+  captcha: ''
+})
+
+const validatePassword = () => {
+  return form.password === form.confirmPassword
+}
+
+const refreshCaptcha = async () => {
+  try {
+    const res: CaptchaResult = await authApi.getCaptcha()
+    captchaKey.value = res.captchaKey
+    captchaImage.value = res.captchaImage
+  } catch (error) {
+    showToast('获取验证码失败')
+  }
+}
+
+const handleRegister = async () => {
+  if (!validatePassword()) {
+    showToast('两次密码不一致')
+    return
+  }
+
+  loading.value = true
+  try {
+    await authApi.register({
+      username: form.username,
+      email: form.email,
+      phone: form.phone,
+      password: form.password,
+      confirmPassword: form.confirmPassword,
+      captcha: form.captcha,
+      captchaKey: captchaKey.value
+    })
+    showSuccessToast('注册成功')
+    router.push('/login')
+  } catch (error: any) {
+    showToast(error.message || '注册失败')
+    refreshCaptcha()
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  refreshCaptcha()
+})
+</script>
+
+<style scoped lang="scss">
+.register-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.register-container {
+  width: 100%;
+  max-width: 400px;
+  background: #fff;
+  border-radius: 16px;
+  padding: 30px 24px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+.register-header {
+  text-align: center;
+  margin-bottom: 24px;
+
+  .logo {
+    font-size: 32px;
+    font-weight: bold;
+    color: #00a1d6;
+    margin: 0;
+  }
+
+  .slogan {
+    color: #999;
+    font-size: 14px;
+    margin-top: 8px;
+  }
+}
+
+.register-actions {
+  margin-top: 20px;
+}
+
+.register-footer {
+  text-align: center;
+  margin-top: 20px;
+
+  .link {
+    color: #00a1d6;
+    font-size: 14px;
+    text-decoration: none;
+  }
+}
+
+.captcha-btn {
+  height: 32px;
+  cursor: pointer;
+}
+</style>