nothing

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>