nothing

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
     <title>vtsuru.live</title>
     <meta name="description" content="主包工具站" />
   </head>

src/App.vue

@@ -1,18 +1,20 @@
 <template>
-  <NConfigProvider :theme-overrides="themeOverrides" style="height:100vh;">
-    <ViewerLayout v-if="layout == 'viewer'" />
-    <ManageLayout v-else-if="layout == 'manage'" />
-    <template v-else>
-      <RouterView />
-    </template>
-  </NConfigProvider>
+  <NMessageProvider>
+    <NConfigProvider :theme-overrides="themeOverrides" style="height: 100vh">
+      <ViewerLayout v-if="layout == 'viewer'" />
+      <ManageLayout v-else-if="layout == 'manage'" />
+      <template v-else>
+        <RouterView />
+      </template>
+    </NConfigProvider>
+  </NMessageProvider>
 </template>
 
 <script setup lang="ts">
 import ViewerLayout from '@/views/ViewerLayout.vue'
 import ManageLayout from '@/views/ManageLayout.vue'
 import { useRoute } from 'vue-router'
-import { NConfigProvider } from 'naive-ui'
+import { NConfigProvider, NMessageProvider } from 'naive-ui'
 import { computed } from 'vue'
 
 const route = useRoute()
@@ -28,7 +30,7 @@ const layout = computed(() => {
 
 const themeOverrides = {
   common: {
-    primaryColor: '#9ddddc',
+    //primaryColor: '#9ddddc',
   },
   // ...
 }

src/api/account.ts

@@ -1,20 +1,30 @@
 import { ACCOUNT_API_URL, BASE_API } from '@/data/constants'
-import { APIRoot } from './api-models'
+import { APIRoot, AccountInfo } from './api-models'
 import { QueryPostAPI } from '@/api/query'
-import { UserInfo } from '@/api/api-models'
 import { ref } from 'vue'
-import { useCookies } from '@vueuse/integrations/useCookies'
+import { useLocalStorage } from '@vueuse/core'
+import { createDiscreteApi } from 'naive-ui'
 
-export const ACCOUNT = ref<UserInfo>()
+export const ACCOUNT = ref<AccountInfo>()
 
-const cookies = useCookies()
+const { message } = createDiscreteApi(['message'])
+const cookie = useLocalStorage('JWT_Token', '')
 
 export async function GetSelfAccount() {
-  const cookie = cookies.get('VTSURU_SESSION')
-  if (cookie) {
+  if (cookie.value) {
     const result = await Self()
     if (result.code == 200) {
       ACCOUNT.value = result.data
+      console.log('[vtsuru] 已获取账户信息')
+      return result.data
+    } else if (result.code == 403) {
+      cookie.value = ''
+      console.warn('[vtsuru] Cookie 已失效, 需要重新登陆')
+      message.error('Cookie 已失效, 需要重新登陆')
+    }
+    else {
+      console.warn('[vtsuru] '+ result.message)
+      message.error(result.message)
     }
   }
 }
@@ -37,6 +47,6 @@ export async function Login(nameOrEmail: string, password: string): Promise<APIR
     password,
   })
 }
-export async function Self(): Promise<APIRoot<UserInfo>> {
-  return QueryPostAPI<UserInfo>(`${ACCOUNT_API_URL}self`)
+export async function Self(): Promise<APIRoot<AccountInfo>> {
+  return QueryPostAPI<AccountInfo>(`${ACCOUNT_API_URL}self`)
 }

src/api/api-models.ts

@@ -12,12 +12,17 @@ export interface PaginationResponse<T> {
 }
 export interface UserInfo {
   name: string
-  uId: number
+  id: number
   createAt: number
+  biliId?: number
+  biliRoomId?: number
 }
 export interface AccountInfo extends UserInfo {
-  isRoomValid: boolean
+  isEmailVerified: boolean
+  isBiliVerified: boolean
   enableFunctions: string[]
+  biliVerifyCode?: string
+  emailVerifyUrl?: string
 }
 export interface SongsInfo {
   id: string

src/api/query.ts

@@ -1,15 +1,14 @@
 /* eslint-disable indent */
+import { useLocalStorage } from '@vueuse/core'
 import { APIRoot, PaginationResponse } from './api-models'
 
-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 cookie = useLocalStorage('JWT_Token', '')
+
+export async function QueryPostAPI<T>(url: string, body?: unknown, headers?: [string, string][]): Promise<APIRoot<T>> {
+  headers ??= []
+  headers?.push(['Authorization', `Bearer ${cookie.value}`])
+  headers?.push(['Content-Type', 'application/json'])
+
   const data = await fetch(url, {
     method: 'post',
     headers: headers,
@@ -17,10 +16,17 @@ export async function QueryPostAPI<T>(url: string, body?: unknown, headers?: any
   }) // 不处理异常, 在页面处理
   return (await data.json()) as APIRoot<T>
 }
-export async function QueryGetAPI<T>(urlString: string, params?: any): Promise<APIRoot<T>> {
+export async function QueryGetAPI<T>(urlString: string, params?: any, headers?: [string, string][]): Promise<APIRoot<T>> {
   const url = new URL(urlString)
   url.search = new URLSearchParams(params).toString()
-  const data = await fetch(url.toString()) // 不处理异常, 在页面处理
+  if (cookie.value) {
+    headers ??= []
+    headers?.push(['Authorization', `Bearer ${cookie.value}`])
+  }
+  const data = await fetch(url.toString(), {
+    method: 'get',
+    headers: headers,
+  }) // 不处理异常, 在页面处理
   return (await data.json()) as APIRoot<T>
 }
 export async function QueryPostPaginationAPI<T>(url: string, body?: unknown): Promise<APIRoot<PaginationResponse<T>>> {

src/components/RegisterAndLogin.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { GetSelfAccount } from '@/api/account'
 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 { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { useLocalStorage } from '@vueuse/core'
+import { FormInst, FormItemInst, FormItemRule, FormRules, NAlert, NButton, NCard, NDivider, NForm, NFormItem, NInput, NSpace, NSpin, NTab, NTabPane, NTabs, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
@@ -16,12 +18,16 @@ interface LoginModel {
   password: string
 }
 
+const message = useMessage()
+
 const isRegister = ref(false)
 const isLoading = ref(false)
 
 const registerModel = ref<RegisterModel>({} as RegisterModel)
 const loginModel = ref<LoginModel>({} as LoginModel)
-const token = ref()
+const token = ref('')
+const turnstile = ref()
+const cookie = useLocalStorage('JWT_Token', '')
 
 const formRef = ref<FormInst | null>(null)
 const rPasswordFormItemRef = ref<FormItemInst | null>(null)
@@ -89,8 +95,9 @@ function onPasswordInput() {
 }
 function onregisterButtonClick(e: MouseEvent) {
   e.preventDefault()
-  isLoading.value = true
+
   formRef.value?.validate().then(async () => {
+    isLoading.value = true
     await QueryPostAPI(
       ACCOUNT_API_URL + 'register',
       {
@@ -98,12 +105,12 @@ function onregisterButtonClick(e: MouseEvent) {
         email: registerModel.value.email,
         password: registerModel.value.password,
       },
-      {
-        Turnstile: token.value,
-      }
+      [['Turnstile', token.value]]
     )
       .then((data) => {
         if (data.code == 200) {
+        } else {
+          message.error(data.message)
         }
       })
       .catch((err) => {
@@ -111,25 +118,33 @@ function onregisterButtonClick(e: MouseEvent) {
       })
       .finally(() => {
         isLoading.value = false
+        turnstile.value?.reset()
       })
   })
 }
 function onLoginButtonClick(e: MouseEvent) {
   e.preventDefault()
-  isLoading.value = true
+
   formRef.value?.validate().then(async () => {
-    await QueryPostAPI(
+    isLoading.value = true
+    await QueryPostAPI<string>(
       ACCOUNT_API_URL + 'login',
       {
         nameOrEmail: loginModel.value.account,
         password: loginModel.value.password,
       },
-      {
-        Turnstile: token.value,
-      }
+      [['Turnstile', token.value]]
     )
-      .then((data) => {
+      .then(async (data) => {
         if (data.code == 200) {
+          cookie.value = data.data
+          setTimeout(() => {
+            GetSelfAccount().then((data) => {
+              message.success(`成功登陆为 ${data?.name}`)
+            })
+          }, 1)
+        } else {
+          message.error(data.message)
         }
       })
       .catch((err) => {
@@ -137,6 +152,7 @@ function onLoginButtonClick(e: MouseEvent) {
       })
       .finally(() => {
         isLoading.value = false
+        turnstile.value?.reset()
       })
   })
 }
@@ -145,49 +161,55 @@ function onLoginButtonClick(e: MouseEvent) {
 <template>
   <NSpin :show="isLoading">
     <NCard embedded>
-      <template #header>
-        <Transition name="fade" mode="out-in">
-          <span v-if="isRegister"> 注册 </span>
-          <span v-else> 登陆 </span>
-        </Transition>
+      <template #header-extra>
+        <slot name="header-extra"> </slot>
+      </template>
+      <template v-if="cookie">
+        <NAlert type="warning"> 你已经登录 </NAlert>
+      </template>
+      <template v-else>
+        <NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+          <NTabPane name="login" tab="登陆">
+            <NForm ref="formRef" :rules="loginRules" :model="loginModel">
+              <NFormItem path="account" label="用户名或邮箱">
+                <NInput v-model:value="loginModel.account" />
+              </NFormItem>
+              <NFormItem path="password" label="密码">
+                <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+              </NFormItem>
+            </NForm>
+            <NSpace vertical justify="center" align="center">
+              <NSpin :show="!token">
+                <NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
+              </NSpin>
+            </NSpace>
+          </NTabPane>
+          <NTabPane name="register" tab="注册">
+            <NForm ref="formRef" :rules="registerRules" :model="registerModel">
+              <NFormItem path="username" label="用户名">
+                <NInput v-model:value="registerModel.username" />
+              </NFormItem>
+              <NFormItem path="email" label="邮箱">
+                <NInput v-model:value="registerModel.email" />
+              </NFormItem>
+              <NFormItem path="password" label="密码">
+                <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
+              </NFormItem>
+              <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
+                <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
+              </NFormItem>
+            </NForm>
+            <NSpace vertical justify="center" align="center">
+              <NSpin :show="!token">
+                <NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
+              </NSpin>
+            </NSpace>
+          </NTabPane>
+        </NTabs>
+
+        <NDivider />
+        <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
       </template>
-      <Transition name="scale" mode="out-in">
-        <div v-if="isRegister">
-          <NForm ref="formRef" :rules="registerRules" :model="registerModel">
-            <NFormItem path="username" label="用户名">
-              <NInput v-model:value="registerModel.username" />
-            </NFormItem>
-            <NFormItem path="email" label="邮箱">
-              <NInput v-model:value="registerModel.email" />
-            </NFormItem>
-            <NFormItem path="password" label="密码">
-              <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-            </NFormItem>
-            <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
-              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
-            </NFormItem>
-          </NForm>
-          <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="loginRules" :model="loginModel">
-            <NFormItem path="account" label="用户名或邮箱">
-              <NInput v-model:value="loginModel.account" />
-            </NFormItem>
-            <NFormItem path="password" label="密码">
-              <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
-            </NFormItem>
-          </NForm>
-          <NSpace vertical justify="center" align="center">
-            <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,5 +3,8 @@ 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 TURNSTILE_KEY = '0x4AAAAAAAETUSAKbds019h0'
+
 export const USER_API_URL = `${BASE_API}user/`
 export const ACCOUNT_API_URL = `${BASE_API}account/`
+export const BILI_API_URL = `${BASE_API}bili/`

src/router/index.ts

@@ -7,6 +7,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'index',
     component: IndexView,
   },
+  {
+    path: '/verify',
+    name: 'verify',
+    component: () => import('@/views/VerifyView.vue'),
+  },
   {
     path: '/user/:id',
     name: 'user',
@@ -20,7 +25,7 @@ const routes: Array<RouteRecordRaw> = [
         },
       },
       {
-        path: 'songlist',
+        path: 'song-list',
         name: 'user-songList',
         component: () => import('@/views/view/SongListView.vue'),
         meta: {
@@ -43,9 +48,14 @@ const routes: Array<RouteRecordRaw> = [
         },
       },
       {
-        path: 'songlist',
-        name: 'songList',
-        component: () => import('@/views/view/SongListView.vue'),
+        path: 'song-list',
+        name: 'manage-songList',
+        component: () => import('@/views/manage/SongListManageView.vue'),
+      },
+      {
+        path: 'bili-verify',
+        name: 'manage-biliVerify',
+        component: () => import('@/views/manage/BiliVerifyView.vue'),
       },
     ],
   },

src/views/ManageLayout.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { NAvatar, NButton, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText } from 'naive-ui'
+import { NAvatar, NButton, NCard, NDivider, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText } from 'naive-ui'
 import { h } from 'vue'
 import { BookOutline } from '@vicons/ionicons5'
 import { useAccount } from '@/api/account'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
+import { RouterLink } from 'vue-router'
 
 const accountInfo = useAccount()
 
@@ -13,8 +14,17 @@ function renderIcon(icon: unknown) {
 
 const menuOptions = [
   {
-    label: '歌单',
-    key: 'hear-the-wind-sing',
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'manage-songList',
+          },
+        },
+        { default: () => '回家' }
+      ),
+    key: 'song-list',
     icon: renderIcon(BookOutline),
   },
   {
@@ -29,27 +39,29 @@ const menuOptions = [
   <NLayout v-if="accountInfo">
     <NLayoutHeader bordered style="height: 50px"> Header Header Header </NLayoutHeader>
     <NLayout has-sider style="height: calc(100vh - 50px)">
-      <NLayoutSider bordered show-trigger collapse-mode="width" :collapsed-width="64" :width="240" :native-scrollbar="false" style="max-height: 320px">
+      <NLayoutSider bordered show-trigger collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false" style="max-height: 320px">
+        <NButton>
+          <RouterLink :to="{ name: 'manage-index' }"> 个人中心 </RouterLink>
+        </NButton>
         <NMenu :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
       </NLayoutSider>
       <NLayout style="height: 100%">
-        <RouterView v-slot="{ Component }">
-          <KeepAlive>
-            <component :is="Component" />
-          </KeepAlive>
-        </RouterView>
+        <div style="box-sizing: border-box; padding: 20px">
+          <RouterView v-slot="{ Component }">
+            <KeepAlive>
+              <component :is="Component" />
+            </KeepAlive>
+          </RouterView>
+        </div>
       </NLayout>
     </NLayout>
   </NLayout>
   <template v-else>
-    <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;padding: 50px;height: 100%;box-sizing: border-box;">
-      <NText>
-        请登录或注册后使用
-      </NText>
-      <NButton tag="a" href="/">
-        回到主页
-      </NButton>
-      <RegisterAndLogin style="max-width: 500px;min-width: 350px;"/>
+    <div style="display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 50px; height: 100%; box-sizing: border-box">
+      <NText> 请登录或注册后使用 </NText>
+      <NButton tag="a" href="/"> 回到主页 </NButton>
+      <NDivider />
+      <RegisterAndLogin style="max-width: 500px; min-width: 350px" />
     </div>
   </template>
 </template>

src/views/VerifyView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ACCOUNT } from '@/api/account'
+import { AccountInfo } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import router from '@/router'
+import { NButton, NCard, NSpace, NSpin, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import VueTurnstile from 'vue-turnstile'
+
+const message = useMessage()
+const token = ref('')
+const route = useRoute()
+
+async function VerifyAccount() {
+  await QueryGetAPI<AccountInfo>(
+    ACCOUNT_API_URL + 'verify',
+    {
+      target: route.query.target,
+    },
+    [['Turnstile', token.value]]
+  ).then((data) => {
+    if (data.code == 200) {
+      ACCOUNT.value = data.data
+      router.push('index')
+      message.success('成功激活账户: ' + ACCOUNT.value.name)
+    }
+  })
+}
+</script>
+
+<template>
+  <div style="display: flex; align-items: center; justify-content: center; height: 100%">
+    <NCard embedded style="max-width: 500px">
+      <template #header> 激活账户 </template>
+      <NSpin :show="!token">
+        <NSpace justify="center" align="center" vertical>
+          <NButton @click="VerifyAccount" type="primary" size="large"> 进行账户激活 </NButton>
+          <VueTurnstile :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
+        </NSpace>
+      </NSpin>
+    </NCard>
+  </div>
+</template>

src/views/ViewerLayout.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/component-name-in-template-casing -->
 <script setup lang="ts">
-import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult } from 'naive-ui'
+import { NAvatar, NCard, NIcon, NLayout, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NSpace, NText, NButton, NEmpty, NResult, NPageHeader, NSwitch, useOsTheme } from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
 import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from '@vicons/ionicons5'
 import { GetInfo, useUser } from '@/api/user'
@@ -13,6 +13,7 @@ const route = useRoute()
 const uId = computed(() => {
   return Number(route.params.id)
 })
+const theme = useOsTheme()
 
 const userInfo = ref<UserInfo>()
 const biliUserInfo = ref()
@@ -24,12 +25,12 @@ function renderIcon(icon: unknown) {
 const menuOptions = [
   {
     label: '歌单',
-    key: 'hear-the-wind-sing',
+    key: 'song-list',
     icon: renderIcon(BookIcon),
   },
   {
     label: '棉花糖(匿名提问',
-    key: 'dance-dance-dance',
+    key: 'question-box',
     icon: renderIcon(BookIcon),
   },
 ]
@@ -56,16 +57,25 @@ onMounted(async () => {
 
 <template>
   <NResult v-if="!uId" status="error" title="输入的uId无效" description="再检查检查" />
-  <NResult v-else-if="!userInfo" status="error" title="未找到指定 uId 的用户" description="或者是没有进行认证" />
+  <NResult v-else-if="false" 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>
-        <NText> VTSURU </NText>
-        <span>
-          {{ $route.meta.title }}
-        </span>
-      </NSpace>
-      <NButton style="right: 0px; position: relative" type="primary"> 控制台 </NButton>
+    <NLayoutHeader style="height: 50px; padding: 5px 15px 5px 15px">
+      <NPageHeader :subtitle="($route.meta.title as string) ?? ''">
+        <template #extra>
+          <NSpace>
+            <NSwitch> </NSwitch>
+            <template v-if="accountInfo">
+              <NButton style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'manage-index' })"> 个人中心 </NButton>
+            </template>
+            <template v-else>
+              <NButton style="right: 0px; position: relative" type="primary"> 注册 / 登陆 </NButton>
+            </template>
+          </NSpace>
+        </template>
+        <template #title>
+          <NText style="font-size: 1.5rem"> VTSURU </NText>
+        </template>
+      </NPageHeader>
     </NLayoutHeader>
     <NLayout has-sider style="height: calc(100vh - 50px)">
       <NLayoutSider show-trigger collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false">
@@ -73,6 +83,9 @@ onMounted(async () => {
           <div v-if="biliUserInfo">
             <NSpace vertical justify="center" align="center">
               <NAvatar :src="biliUserInfo.face" :img-props="{ referrerpolicy: 'no-referrer' }" />
+              <NText>
+                {{ biliUserInfo.uname }}
+              </NText>
             </NSpace>
           </div>
         </Transition>
@@ -81,10 +94,10 @@ onMounted(async () => {
       <NLayout style="height: 100%">
         <div class="viewer-page-content">
           <RouterView v-slot="{ Component }">
-          <KeepAlive>
-            <component :is="Component" />
-          </KeepAlive>
-        </RouterView>
+            <KeepAlive>
+              <component :is="Component" />
+            </KeepAlive>
+          </RouterView>
         </div>
       </NLayout>
     </NLayout>

src/views/manage/BiliVerifyView.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { GetSelfAccount, useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { BILI_API_URL } from '@/data/constants'
+import { NAlert, NButton, NCard, NCode, NInput, NInputNumber, NSpace, NSpin, NText, NCountdown, NInputGroup, useMessage } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+
+const message = useMessage()
+
+const accountInfo = useAccount()
+const isStart = ref(false)
+const timeLeft = ref(0)
+
+const uId = ref()
+const roomId = ref()
+const timer = ref()
+
+function onStartVerify() {
+  QueryGetAPI(BILI_API_URL + 'verify', {
+    uId: uId.value,
+  }).then((data) => {
+    if (data.code == 200) {
+      message.info('已开始认证流程, 请前往直播间发送认证码')
+      checkStatus()
+      isStart.value = true
+      timer.value = setInterval(checkStatus, 2500)
+    }
+  })
+}
+async function checkStatus() {
+  const data = await QueryGetAPI<{
+    uId: number
+    roomId: number
+    endTime: number
+  }>(BILI_API_URL + 'status')
+  if (data.code == 200) {
+    //正在进行认证
+    roomId.value ??= data.data.roomId
+    timeLeft.value = data.data.endTime
+    return true
+  } else if (data.code == 201) {
+    clearInterval(timer.value)
+    message.success('认证成功')
+    setTimeout(() => {
+      GetSelfAccount()
+    }, 1)
+    return true
+  }
+  return false
+}
+function copyCode() {
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(accountInfo.value?.biliVerifyCode ?? '')
+    message.success('已复制认证码到剪切板')
+  } else {
+    message.warning('当前环境不支持自动复制, 请手动选择并复制')
+  }
+}
+
+onMounted(async () => {
+  if (accountInfo.value && !accountInfo.value.isBiliVerified) {
+    if (await checkStatus()) {
+      isStart.value = true
+      timer.value = setInterval(checkStatus, 5000)
+    }
+  }
+})
+</script>
+
+<template>
+  <NAlert v-if="accountInfo?.isBiliVerified" type="success"> 你已通过验证 </NAlert>
+  <NAlert v-else-if="!accountInfo">尚未登录</NAlert>
+  <NCard embedded v-else>
+    <template #header> Bilibili 身份验证 </template>
+    <template v-if="isStart">
+      <NSpace vertical justify="center" align="center">
+        <NSpin />
+        <span> 剩余 <NCountdown :duration="timeLeft - Date.now()" /> </span>
+        <NInputGroup>
+          <NInput :allow-input="() => false" v-model:value="accountInfo.biliVerifyCode" />
+          <NButton @click="copyCode"> 复制认证码 </NButton>
+        </NInputGroup>
+        <NButton v-if="roomId" type="primary" tag="a" :href="'https://live.bilibili.com/' + roomId" target="_blank"> 前往直播间 </NButton>
+      </NSpace>
+    </template>
+    <template v-else>
+      <NSpace vertical justify="center" align="center">
+        <NAlert type="info">
+          <NText>
+            请在点击
+            <NText type="primary" strong> 开始认证 </NText>
+            后五分钟之内使用
+            <NText> 需要认证的账户 </NText>
+            在自己的直播间内发送
+            <NButton type="info" text @click="copyCode">
+              {{ accountInfo?.biliVerifyCode }}
+            </NButton>
+          </NText>
+        </NAlert>
+        <NInputNumber size="small" placeholder="输入用户UId" v-model:value="uId" :min="1" :show-button="false" />
+        <NButton size="large" type="primary" @click="onStartVerify"> 开始认证 </NButton>
+      </NSpace>
+    </template>
+  </NCard>
+</template>

src/views/manage/DashboardView.vue

@@ -1,16 +1,32 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
-import { NThing } from 'naive-ui';
+import { useAccount } from '@/api/account'
+import { NAlert, NButton, NCard, NDivider, NSpace, NTag, NText, NThing, NTime } from 'naive-ui'
 
 const accountInfo = useAccount()
-
 </script>
 
 <template>
-    
-    <NThing>
-        <template #header>
+  <NCard embedded style="max-width: 500px">
+    <NSpace align="center" justify="center" vertical>
+      <NText style="font-size: 3rem">
+        {{ accountInfo?.name }}
+      </NText>
+      <NText style="color: gray">
+        于
+        <NTime :time="accountInfo?.createAt" />
+        注册
+      </NText>
+    </NSpace>
 
-        </template>
-    </NThing>
-</template>
+    <NDivider />
+    <NAlert>
+      Bilibili 账户:
+      <NTag v-if="accountInfo?.isBiliVerified" type="success"> 已认证 </NTag>
+      <template v-else>
+        <NTag type="error" size="small"> 未认证 </NTag>
+        <NDivider vertical />
+        <NButton size="small" @click="$router.push({ name: 'manage-biliVerify' })" type="info"> 前往认证 </NButton>
+      </template>
+    </NAlert>
+  </NCard>
+</template>

src/views/manage/SongListManageView.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SongsInfo } from '@/api/api-models'
+import SongList from '@/components/SongList.vue'
+import { ref } from 'vue'
+
+const songs = ref<SongsInfo[]>([])
+</script>
+
+<template>
+  <SongList :songs="songs" />
+</template>

src/views/view/SongListView.vue

@@ -2,7 +2,7 @@
 import { SongsInfo } from '@/api/api-models'
 import { QueryGetPaginationAPI } from '@/api/query'
 import SongList from '@/components/SongList.vue'
-import { USER_URL } from '@/data/constants'
+import { USER_API_URL } from '@/data/constants'
 import { onMounted, ref } from 'vue'
 import { useRouteParams } from '@vueuse/router'
 
@@ -34,7 +34,7 @@ async function RequestData() {
       tags: ['hao'],
     },
   ]
-  await QueryGetPaginationAPI<SongsInfo[]>(`${USER_URL}info`, {
+  await QueryGetPaginationAPI<SongsInfo[]>(`${USER_API_URL}info`, {
     uId: uId.value,
   })
     .then((result) => {