nothing

src/api/account.ts

@@ -1,11 +1,10 @@
-import { BASE_API } from '@/data/constants'
+import { ACCOUNT_API_URL, BASE_API } from '@/data/constants'
 import { APIRoot } from './api-models'
 import { QueryPostAPI } from '@/api/query'
 import { UserInfo } from '@/api/api-models'
 import { ref } from 'vue'
 import { useCookies } from '@vueuse/integrations/useCookies'
 
-const ACCOUNT_URL = `${BASE_API}account/`
 export const ACCOUNT = ref<UserInfo>()
 
 const cookies = useCookies()
@@ -24,7 +23,7 @@ export function useAccount() {
 }
 
 export async function Register(name: string, email: string, password: string, token: string): Promise<APIRoot<string>> {
-  return QueryPostAPI<string>(`${ACCOUNT_URL}register`, {
+  return QueryPostAPI<string>(`${ACCOUNT_API_URL}register`, {
     name,
     email,
     password,
@@ -33,11 +32,11 @@ export async function Register(name: string, email: string, password: string, to
 }
 
 export async function Login(nameOrEmail: string, password: string): Promise<APIRoot<string>> {
-  return QueryPostAPI<string>(`${ACCOUNT_URL}login`, {
+  return QueryPostAPI<string>(`${ACCOUNT_API_URL}login`, {
     nameOrEmail,
     password,
   })
 }
 export async function Self(): Promise<APIRoot<UserInfo>> {
-  return QueryPostAPI<UserInfo>(`${ACCOUNT_URL}self`)
+  return QueryPostAPI<UserInfo>(`${ACCOUNT_API_URL}self`)
 }

src/api/query.ts

@@ -1,12 +1,18 @@
 /* eslint-disable indent */
 import { APIRoot, PaginationResponse } from './api-models'
 
-export async function QueryPostAPI<T>(url: string, body?: unknown): Promise<APIRoot<T>> {
+export async function QueryPostAPI<T>(url: string, body?: unknown, headers?: any): Promise<APIRoot<T>> {
+  if (headers) {
+    headers['Content-Type'] = 'application/json'
+  }
+  else {
+    headers = {
+      'Content-Type': 'application/json',
+    }
+  }
   const data = await fetch(url, {
     method: 'post',
-    headers: {
-      'Content-Type': 'application/json',
-    },
+    headers: headers,
     body: JSON.stringify(body),
   }) // 不处理异常, 在页面处理
   return (await data.json()) as APIRoot<T>

src/api/user.ts

@@ -1,9 +1,8 @@
 import { QueryGetAPI } from '@/api/query'
-import { BASE_API } from '@/data/constants'
+import { BASE_API, USER_API_URL } from '@/data/constants'
 import { APIRoot, UserInfo } from './api-models'
 import { ref } from 'vue'
 
-const ACCOUNT_URL = `${BASE_API}user/`
 export const USERS = ref<{ [uId: number]: UserInfo }>({})
 
 export async function useUser(uId: number) {
@@ -17,7 +16,7 @@ export async function useUser(uId: number) {
 }
 
 export async function GetInfo(uId: number): Promise<APIRoot<UserInfo>> {
-  return QueryGetAPI<UserInfo>(`${ACCOUNT_URL}info`, {
+  return QueryGetAPI<UserInfo>(`${USER_API_URL}info`, {
     uId: uId,
   })
 }

src/components/RegisterAndLogin.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { FormInst, FormItemInst, FormItemRule, FormRules, NButton, NCard, NForm, NFormItem, NInput, NSpace } from 'naive-ui'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import { FormInst, FormItemInst, FormItemRule, FormRules, NButton, NCard, NForm, NFormItem, NInput, NSpace, NSpin } from 'naive-ui'
 import { ref } from 'vue'
+import VueTurnstile from 'vue-turnstile'
 
 interface RegisterModel {
   username: string
@@ -14,17 +17,25 @@ interface LoginModel {
 }
 
 const isRegister = ref(false)
+const isLoading = ref(false)
 
 const registerModel = ref<RegisterModel>({} as RegisterModel)
 const loginModel = ref<LoginModel>({} as LoginModel)
+const token = ref()
 
 const formRef = ref<FormInst | null>(null)
 const rPasswordFormItemRef = ref<FormItemInst | null>(null)
-const rules: FormRules = {
-  account: [
+const registerRules: FormRules = {
+  username: [
     {
       required: true,
-      message: '请输入用户名或邮箱',
+      message: '请输入用户名',
+    },
+  ],
+  email: [
+    {
+      required: true,
+      message: '请输入邮箱',
     },
   ],
   password: [
@@ -51,6 +62,20 @@ const rules: FormRules = {
     },
   ],
 }
+const loginRules: FormRules = {
+  account: [
+    {
+      required: true,
+      message: '请输入用户名或邮箱',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请输入密码',
+    },
+  ],
+}
 function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
   return !!registerModel.value.password && registerModel.value.password.startsWith(value) && registerModel.value.password.length >= value.length
 }
@@ -62,9 +87,63 @@ function onPasswordInput() {
     rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
   }
 }
+function onregisterButtonClick(e: MouseEvent) {
+  e.preventDefault()
+  isLoading.value = true
+  formRef.value?.validate().then(async () => {
+    await QueryPostAPI(
+      ACCOUNT_API_URL + 'register',
+      {
+        name: registerModel.value.username,
+        email: registerModel.value.email,
+        password: registerModel.value.password,
+      },
+      {
+        Turnstile: token.value,
+      }
+    )
+      .then((data) => {
+        if (data.code == 200) {
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  })
+}
+function onLoginButtonClick(e: MouseEvent) {
+  e.preventDefault()
+  isLoading.value = true
+  formRef.value?.validate().then(async () => {
+    await QueryPostAPI(
+      ACCOUNT_API_URL + 'login',
+      {
+        nameOrEmail: loginModel.value.account,
+        password: loginModel.value.password,
+      },
+      {
+        Turnstile: token.value,
+      }
+    )
+      .then((data) => {
+        if (data.code == 200) {
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  })
+}
 </script>
 
 <template>
+  <NSpin :show="isLoading">
     <NCard embedded>
       <template #header>
         <Transition name="fade" mode="out-in">
@@ -74,7 +153,7 @@ function onPasswordInput() {
       </template>
       <Transition name="scale" mode="out-in">
         <div v-if="isRegister">
-        <NForm ref="formRef" :rules="rules" :model="registerModel">
+          <NForm ref="formRef" :rules="registerRules" :model="registerModel">
             <NFormItem path="username" label="用户名">
               <NInput v-model:value="registerModel.username" />
             </NFormItem>
@@ -88,10 +167,13 @@ function onPasswordInput() {
               <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
             </NFormItem>
           </NForm>
-        <NButton @click="isRegister = false"> 或者现在去登陆 </NButton>
+          <NSpace vertical justify="center" align="center">
+            <NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
+            <NButton @click="isRegister = false" size="small" text> 或者现在去登陆 </NButton>
+          </NSpace>
         </div>
         <div v-else>
-        <NForm ref="formRef" :rules="rules" :model="registerModel">
+          <NForm ref="formRef" :rules="loginRules" :model="loginModel">
             <NFormItem path="account" label="用户名或邮箱">
               <NInput v-model:value="loginModel.account" />
             </NFormItem>
@@ -100,10 +182,12 @@ function onPasswordInput() {
             </NFormItem>
           </NForm>
           <NSpace vertical justify="center" align="center">
-          <NButton type="primary" size="large"> 登陆 </NButton>
+            <NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
             <NButton @click="isRegister = true" size="small" text> 或者现在去注册 </NButton>
           </NSpace>
         </div>
       </Transition>
+      <VueTurnstile site-key="0x4AAAAAAAETUSAKbds019h0" v-model="token" theme="auto" style="text-align: center" />
     </NCard>
+  </NSpin>
 </template>

src/data/constants.ts

@@ -3,4 +3,5 @@ const releseAPI = `${document.location.protocol}//api.vtsuru.live/`
 export const BASE_API = process.env.NODE_ENV === 'development' ? debugAPI : releseAPI
 export const FETCH_API = 'https://fetch.vtsuru.live/'
 
-export const USER_URL = `${BASE_API}user/`
+export const USER_API_URL = `${BASE_API}user/`
+export const ACCOUNT_API_URL = `${BASE_API}account/`

src/main.ts

@@ -6,4 +6,4 @@ import { GetSelfAccount } from './api/account'
 
 createApp(App).use(store).use(router).mount('#app')
 
-await GetSelfAccount()
+GetSelfAccount()

src/views/ViewerLayout.vue

@@ -6,7 +6,7 @@ import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as Wi
 import { GetInfo, useUser } from '@/api/user'
 import { useRoute } from 'vue-router'
 import { UserInfo } from '@/api/api-models'
-import { FETCH_API, USER_URL } from '@/data/constants'
+import { FETCH_API } from '@/data/constants'
 import { useAccount } from '@/api/account'
 
 const route = useRoute()
@@ -56,7 +56,7 @@ onMounted(async () => {
 
 <template>
   <NResult v-if="!uId" status="error" title="输入的uId无效" description="再检查检查" />
-  <NResult v-else-if="false" status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
+  <NResult v-else-if="!userInfo" status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
   <NLayout v-else style="height: 100vh">
     <NLayoutHeader style="height: 50px; display: flex; justify-content: left; align-items: center; padding-left: 15px">
       <NSpace>