nothing

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) => {