fix.

src/shared/Login.vue

@@ -6,7 +6,7 @@ import type { FormRules } from "naive-ui"
 
 const userStore = useUserStore()
 const loginRef = ref()
-const [isLoading] = useToggle()
+const [isLoading, toggleLoading] = useToggle()
 const msg = ref("")
 const form = reactive({
   username: "",
@@ -21,11 +21,11 @@ const rules: FormRules = {
 }
 
 async function submit() {
-  loginRef.value?.validate(async (errors: FormRules | undefined) => {
+  loginRef.value!.validate(async (errors: FormRules | undefined) => {
     if (!errors) {
       try {
         msg.value = ""
-        isLoading.value = true
+        toggleLoading(true)
         await login(form)
       } catch (err: any) {
         if (err.data === "Your account has been disabled") {
@@ -36,7 +36,7 @@ async function submit() {
           msg.value = "无法登录"
         }
       } finally {
-        isLoading.value = false
+        toggleLoading(false)
       }
       if (!msg.value) {
         toggleLogin(false)
@@ -85,7 +85,7 @@ function goSignup() {
           <n-button type="primary" :loading="isLoading" @click="submit">
             登录
           </n-button>
-          <n-button @click="goSignup">没有账号，立即注册</n-button>
+          <n-button @click="goSignup">没有账号？立即注册</n-button>
         </n-space>
       </n-form-item>
     </n-form>

src/shared/Pagination.vue

@@ -41,7 +41,7 @@ watch(page, () => emit("update:page", page))
 </template>
 <style scoped>
 .margin {
-  margin-top: 24px;
+  margin: 20px 0;
 }
 .right {
   float: right;

src/shared/Signup.vue

@@ -1,16 +1,43 @@
 <script setup lang="ts">
-import type { FormRules } from "naive-ui"
+import { getCaptcha, signup, login } from "./api"
 import { signupModal, toggleLogin, toggleSignup } from "./composables/modal"
+import { useUserStore } from "./store/user"
+import type { FormItemRule, FormRules } from "naive-ui"
+
+const userStore = useUserStore()
+const signupRef = ref()
+const captchaSrc = ref("")
 
 const form = reactive({
   username: "",
+  email: "",
   password: "",
   passwordAgain: "",
-  email: "",
+  captcha: "",
 })
-const rules: FormRules = {}
 
-const [isLoading] = useToggle()
+const rules: FormRules = {
+  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
+  email: [{ required: true, message: "邮箱必填", trigger: "blur" }],
+  password: [
+    { required: true, message: "密码必填", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
+  ],
+  passwordAgain: [
+    { required: true, message: "密码必填", trigger: "blur" },
+    { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
+    {
+      validator: (_: FormItemRule, value: string) => value === form.password,
+      message: "两次密码输入不一致",
+      trigger: "blur",
+    },
+  ],
+  captcha: [
+    { required: true, message: "验证码必填", trigger: "blur", min: 1, max: 10 },
+  ],
+}
+
+const [isLoading, toggleLoading] = useToggle()
 const msg = ref("")
 
 function goLogin() {
@@ -18,7 +45,50 @@ function goLogin() {
   toggleSignup(false)
 }
 
-function submit() {}
+function submit() {
+  signupRef.value!.validate(async (errors: FormRules | undefined) => {
+    if (!errors) {
+      try {
+        msg.value = ""
+        toggleLoading(true)
+        await signup({
+          username: form.username,
+          email: form.email,
+          password: form.password,
+          captcha: form.captcha,
+        })
+      } catch (err: any) {
+        if (err.data === "Invalid captcha") {
+          msg.value = "验证码不正确"
+        } else if (err.data === "Username already exists") {
+          msg.value = "用户名已存在"
+        } else if (err.data === "Email already exists") {
+          msg.value = "邮箱已存在"
+        } else {
+          msg.value = "无法注册"
+        }
+        getCaptchaSrc()
+        form.captcha = ""
+      } finally {
+        toggleLoading(false)
+      }
+      if (!msg.value) {
+        toggleSignup(false)
+        await login({ username: form.username, password: form.password })
+        userStore.getMyProfile()
+      }
+    }
+  })
+}
+
+async function getCaptchaSrc() {
+  const res = await getCaptcha()
+  captchaSrc.value = res.data
+}
+
+watch(signupModal, (v) => {
+  if (v) getCaptchaSrc()
+})
 </script>
 
 <template>
@@ -55,7 +125,7 @@ function submit() {}
           name="signup password"
         />
       </n-form-item>
-      <n-form-item label="确认密码" path="password">
+      <n-form-item label="确认密码" path="passwordAgain">
         <n-input
           v-model:value="form.passwordAgain"
           clearable
@@ -63,11 +133,21 @@ function submit() {}
           name="signup password again"
         />
       </n-form-item>
+      <n-form-item label="验证码" path="captcha">
+        <n-space>
+          <n-input
+            v-model:value="form.captcha"
+            clearable
+            name="signup captcha"
+          />
+          <img class="captcha" :src="captchaSrc" @click="getCaptchaSrc" />
+        </n-space>
+      </n-form-item>
       <n-alert v-if="msg" type="error" :show-icon="false"> {{ msg }}</n-alert>
       <n-form-item>
         <n-space>
           <n-button type="primary" :loading="isLoading" @click="submit">
-            登录
+            注册
           </n-button>
           <n-button @click="goLogin">已经注册？现在登录</n-button>
         </n-space>
@@ -76,4 +156,9 @@ function submit() {}
   </n-modal>
 </template>
 
-<style scoped></style>
+<style scoped>
+.captcha {
+  height: 34px;
+  cursor: pointer;
+}
+</style>

src/shared/api.ts

@@ -5,6 +5,15 @@ export function login(data: { username: string; password: string }) {
   return http.post("login", data)
 }
 
+export function signup(data: {
+  username: string
+  email: string
+  password: string
+  captcha: string
+}) {
+  return http.post("register", data)
+}
+
 export function logout() {
   return http.get("logout")
 }
@@ -16,3 +25,7 @@ export function getProfile(username: string = "") {
 export function getProblemTagList() {
   return http.get<Tag[]>("problem/tags")
 }
+
+export function getCaptcha() {
+  return http.get("captcha")
+}

src/shared/layout/default.vue

@@ -5,7 +5,7 @@ import Header from "../Header.vue"
 </script>
 
 <template>
-  <n-layout>
+  <n-layout position="absolute">
     <n-layout-header bordered class="header">
       <Header />
     </n-layout-header>