From 0f84ef186c5544637c910576997428dd592629ef Mon Sep 17 00:00:00 2001
From: Nick Zeng <Nick.Zeng@wpic.co>
Date: Mon, 10 Nov 2025 11:07:48 +0800
Subject: [PATCH] add front user register and login page

---
 frontend/.gitignore             |   5 +
 frontend/env.d.ts               |   6 +
 frontend/package.json           |   3 +
 frontend/src/main.ts            |   9 +-
 frontend/src/pages/index.vue    |  63 ++++++++
 frontend/src/pages/login.vue    | 231 +++++++++++++++++++++++++++++
 frontend/src/pages/register.vue | 252 ++++++++++++++++++++++++++++++++
 frontend/vite.config.ts         |  45 ++++++
 8 files changed, 613 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/index.vue
 create mode 100644 frontend/src/pages/login.vue
 create mode 100644 frontend/src/pages/register.vue

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 7414e0e..b9e7245 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -28,6 +28,11 @@ coverage
 
 .eslintcache
 
+# Auto-generated by unplugin
+/src/auto-imports.d.ts
+/src/components.d.ts
+/src/typed-router.d.ts
+
 # Cypress
 /cypress/videos/
 /cypress/screenshots/
diff --git a/frontend/env.d.ts b/frontend/env.d.ts
index 11f02fe..1e8e929 100644
--- a/frontend/env.d.ts
+++ b/frontend/env.d.ts
@@ -1 +1,7 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
+
+// 自动导入的类型定义
+/// <reference types="./src/auto-imports.d.ts" />
+/// <reference types="./src/components.d.ts" />
+/// <reference types="./src/typed-router.d.ts" />
diff --git a/frontend/package.json b/frontend/package.json
index 8ce5afd..7a0459a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,6 +45,9 @@
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
     "typescript": "~5.9.0",
+    "unplugin-auto-import": "^20.2.0",
+    "unplugin-vue-components": "^30.0.0",
+    "unplugin-vue-router": "^0.16.1",
     "vite": "^7.1.11",
     "vite-plugin-vue-devtools": "^8.0.3",
     "vitest": "^3.2.4",
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5dcad83..cb1d5fa 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,10 +1,17 @@
 import './assets/main.css'
+import 'ant-design-vue/dist/reset.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
 
 import App from './App.vue'
-import router from './router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
 
 const app = createApp(App)
 
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
new file mode 100644
index 0000000..90ae633
--- /dev/null
+++ b/frontend/src/pages/index.vue
@@ -0,0 +1,63 @@
+<script setup>
+const router = useRouter()
+
+const goToRegister = () => {
+  router.push('/register')
+}
+
+const goToLogin = () => {
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="home-container">
+    <div class="home-content">
+      <h1 class="home-title">欢迎来到 DataFlow</h1>
+      <p class="home-description">数据管理平台</p>
+
+      <div class="home-actions">
+        <a-button type="primary" size="large" @click="goToLogin"> 登录 </a-button>
+        <a-button size="large" @click="goToRegister"> 注册 </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.home-content {
+  text-align: center;
+  color: white;
+}
+
+.home-title {
+  font-size: 48px;
+  font-weight: 700;
+  margin: 0 0 16px 0;
+  color: white;
+}
+
+.home-description {
+  font-size: 20px;
+  margin: 0 0 40px 0;
+  opacity: 0.9;
+}
+
+.home-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+.home-actions .ant-btn {
+  min-width: 120px;
+}
+</style>
diff --git a/frontend/src/pages/login.vue b/frontend/src/pages/login.vue
new file mode 100644
index 0000000..ef6ff3c
--- /dev/null
+++ b/frontend/src/pages/login.vue
@@ -0,0 +1,231 @@
+<script setup>
+// 表单数据
+const formState = reactive({
+  username: '',
+  password: '',
+  remember: true,
+})
+
+// 表单规则
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
+}
+
+const formRef = ref()
+const loading = ref(false)
+const router = useRouter()
+
+// 提交登录
+const handleSubmit = async () => {
+  try {
+    await formRef.value.validate()
+    loading.value = true
+
+    const response = await fetch('/api/auth/login', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username: formState.username,
+        password: formState.password,
+      }),
+    })
+
+    const data = await response.json()
+
+    if (data.code === 0) {
+      // 保存 token
+      localStorage.setItem('access_token', data.data.access_token)
+      localStorage.setItem('refresh_token', data.data.refresh_token)
+      localStorage.setItem('user', JSON.stringify(data.data.user))
+
+      message.success('登录成功！')
+      setTimeout(() => {
+        router.push('/')
+      }, 500)
+    } else {
+      message.error(data.message || '登录失败，请重试')
+    }
+  } catch (error) {
+    if (error.errorFields) {
+      // 表单验证错误
+      return
+    }
+    console.error('登录错误：', error)
+    message.error('登录失败，请检查网络连接')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 跳转到注册页
+const goToRegister = () => {
+  router.push('/register')
+}
+</script>
+
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <div class="login-header">
+        <h1 class="login-title">用户登录</h1>
+        <p class="login-subtitle">欢迎回到 DataFlow</p>
+      </div>
+
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        layout="vertical"
+        class="login-form"
+        @finish="handleSubmit"
+      >
+        <a-form-item label="用户名" name="username">
+          <a-input
+            v-model:value="formState.username"
+            size="large"
+            placeholder="请输入用户名"
+          >
+            <template #prefix>
+              <UserOutlined class="form-icon" />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item label="密码" name="password">
+          <a-input-password
+            v-model:value="formState.password"
+            size="large"
+            placeholder="请输入密码"
+          >
+            <template #prefix>
+              <LockOutlined class="form-icon" />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item>
+          <div class="login-options">
+            <a-checkbox v-model:checked="formState.remember">
+              记住我
+            </a-checkbox>
+            <a-button type="link" class="forgot-password">
+              忘记密码？
+            </a-button>
+          </div>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            html-type="submit"
+            size="large"
+            :loading="loading"
+            block
+            class="login-button"
+          >
+            登录
+          </a-button>
+        </a-form-item>
+
+        <div class="login-footer">
+          <span class="login-footer-text">还没有账户？</span>
+          <a-button type="link" @click="goToRegister">
+            立即注册
+          </a-button>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 420px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0 0 8px 0;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.login-form {
+  margin-top: 24px;
+}
+
+.form-icon {
+  color: #999;
+}
+
+.login-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.forgot-password {
+  padding: 0;
+  height: auto;
+}
+
+.login-button {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 8px;
+}
+
+.login-footer {
+  text-align: center;
+  margin-top: 16px;
+}
+
+.login-footer-text {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 576px) {
+  .login-card {
+    padding: 24px;
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/frontend/src/pages/register.vue b/frontend/src/pages/register.vue
new file mode 100644
index 0000000..2d3329d
--- /dev/null
+++ b/frontend/src/pages/register.vue
@@ -0,0 +1,252 @@
+<script setup>
+// 表单数据
+const formState = reactive({
+  username: '',
+  email: '',
+  password: '',
+  confirmPassword: '',
+})
+
+// 表单规则
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 3, max: 20, message: '用户名长度应为 3-20 个字符', trigger: 'blur' },
+  ],
+  email: [
+    { required: true, message: '请输入邮箱', trigger: 'blur' },
+    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度至少为 6 个字符', trigger: 'blur' },
+  ],
+  confirmPassword: [
+    { required: true, message: '请确认密码', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (value !== formState.password) {
+          return Promise.reject('两次输入的密码不一致')
+        }
+        return Promise.resolve()
+      },
+      trigger: 'blur',
+    },
+  ],
+}
+
+const formRef = ref()
+const loading = ref(false)
+const router = useRouter()
+
+// 提交注册
+const handleSubmit = async () => {
+  try {
+    await formRef.value.validate()
+    loading.value = true
+
+    const response = await fetch('/api/auth/register', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username: formState.username,
+        email: formState.email,
+        password: formState.password,
+      }),
+    })
+
+    const data = await response.json()
+
+    if (data.code === 0) {
+      message.success('注册成功！即将跳转到登录页...')
+      setTimeout(() => {
+        router.push('/login')
+      }, 1500)
+    } else {
+      message.error(data.message || '注册失败，请重试')
+    }
+  } catch (error) {
+    if (error.errorFields) {
+      // 表单验证错误
+      return
+    }
+    console.error('注册错误：', error)
+    message.error('注册失败，请检查网络连接')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 跳转到登录页
+const goToLogin = () => {
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="register-container">
+    <div class="register-card">
+      <div class="register-header">
+        <h1 class="register-title">用户注册</h1>
+        <p class="register-subtitle">创建您的 DataFlow 账户</p>
+      </div>
+
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        layout="vertical"
+        class="register-form"
+        @finish="handleSubmit"
+      >
+        <a-form-item label="用户名" name="username">
+          <a-input
+            v-model:value="formState.username"
+            size="large"
+            placeholder="请输入用户名"
+            :maxlength="20"
+          >
+            <template #prefix>
+              <UserOutlined class="form-icon" />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item label="邮箱" name="email">
+          <a-input
+            v-model:value="formState.email"
+            size="large"
+            type="email"
+            placeholder="请输入邮箱地址"
+          >
+            <template #prefix>
+              <MailOutlined class="form-icon" />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item label="密码" name="password">
+          <a-input-password
+            v-model:value="formState.password"
+            size="large"
+            placeholder="请输入密码（至少6位）"
+            :maxlength="50"
+          >
+            <template #prefix>
+              <LockOutlined class="form-icon" />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item label="确认密码" name="confirmPassword">
+          <a-input-password
+            v-model:value="formState.confirmPassword"
+            size="large"
+            placeholder="请再次输入密码"
+            :maxlength="50"
+          >
+            <template #prefix>
+              <LockOutlined class="form-icon" />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            html-type="submit"
+            size="large"
+            :loading="loading"
+            block
+            class="register-button"
+          >
+            注册
+          </a-button>
+        </a-form-item>
+
+        <div class="register-footer">
+          <span class="register-footer-text">已有账户？</span>
+          <a-button type="link" @click="goToLogin">
+            立即登录
+          </a-button>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.register-card {
+  width: 100%;
+  max-width: 450px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+}
+
+.register-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.register-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 0 0 8px 0;
+}
+
+.register-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.register-form {
+  margin-top: 24px;
+}
+
+.form-icon {
+  color: #999;
+}
+
+.register-button {
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 8px;
+}
+
+.register-footer {
+  text-align: center;
+  margin-top: 16px;
+}
+
+.register-footer-text {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 576px) {
+  .register-card {
+    padding: 24px;
+  }
+
+  .register-title {
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index e4ae87c..bf58197 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -6,13 +6,58 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/vite'
 
+import VueRouter from 'unplugin-vue-router/vite'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
+    // VueRouter 必须放在 vue() 之前
+    VueRouter({
+      routesFolder: 'src/pages',
+      dts: 'src/typed-router.d.ts',
+    }),
+
     vue(),
     vueJsx(),
     vueDevTools(),
     tailwindcss(),
+
+    // 自动导入 Vue API、VueRouter API 等
+    AutoImport({
+      imports: [
+        'vue',
+        'pinia',
+        VueRouterAutoImports,
+        {
+          'ant-design-vue': [
+            'message',
+            'notification',
+            'Modal',
+          ],
+        },
+      ],
+      dts: 'src/auto-imports.d.ts',
+      dirs: [
+        'src/stores',
+        'src/composables',
+      ],
+      vueTemplate: true,
+    }),
+
+    // 自动导入组件
+    Components({
+      resolvers: [
+        AntDesignVueResolver({
+          importStyle: false, // 使用 CSS，不导入 less
+        }),
+      ],
+      dts: 'src/components.d.ts',
+      dirs: ['src/components'],
+    }),
   ],
   resolve: {
     alias: {