update

2025-12-07 02:46:55 +08:00 · 2023-10-16 11:27:37 +08:00
parent 826f99350c
commit b5b55dc3b2
29 changed files with 951 additions and 319 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
  <NMessageProvider>
    <NNotificationProvider>
-      <NConfigProvider :theme-overrides="themeOverrides" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
+      <NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
        <ViewerLayout v-if="layout == 'viewer'" />
        <ManageLayout v-else-if="layout == 'manage'" />
        <template v-else>
@@ -16,8 +16,10 @@
 import ViewerLayout from '@/views/ViewerLayout.vue'
 import ManageLayout from '@/views/ManageLayout.vue'
 import { useRoute } from 'vue-router'
-import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN, dateZhCN } from 'naive-ui'
+import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN, dateZhCN, useOsTheme, darkTheme } from 'naive-ui'
 import { computed } from 'vue'
+import { useStorage } from '@vueuse/core'
+import { ThemeType } from './api/api-models'

 const route = useRoute()
 const layout = computed(() => {
@@ -30,6 +32,16 @@ const layout = computed(() => {
  }
 })

+const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const theme = computed(() => {
+  if (themeType.value == ThemeType.Auto) {
+    var osThemeRef = useOsTheme(); //获取当前系统主题
+    return osThemeRef.value === "dark" ? darkTheme : null;
+  } else {
+    return themeType.value == ThemeType.Dark ? darkTheme : null;
+  }
+});
+
 const themeOverrides = {
  common: {
    //primaryColor: '#9ddddc',
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,3 +1,14 @@
+import { useOsTheme } from "naive-ui"
+import { ThemeType } from "./api/api-models"
+import { useStorage } from "@vueuse/core"
+
+const osThemeRef = useOsTheme() //获取当前系统主题
 export function NavigateToNewTab(url: string) {
  window.open(url, '_blank')
-}
+}
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+export function isDarkMode(): boolean {
+
+  if (themeType.value == ThemeType.Auto) return osThemeRef.value === 'dark'
+  else return themeType.value == ThemeType.Dark
+}
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -6,6 +6,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { createDiscreteApi } from 'naive-ui'

 export const ACCOUNT = ref<AccountInfo>()
+export const isLoadingAccount = ref(true)

 const { message } = createDiscreteApi(['message'])
 const cookie = useLocalStorage('JWT_Token', '')
@@ -15,6 +16,7 @@ export async function GetSelfAccount() {
    const result = await Self()
    if (result.code == 200) {
      ACCOUNT.value = result.data
+      isLoadingAccount.value = false
      console.log('[vtsuru] 已获取账户信息')
      return result.data
    } else if (result.code == 401) {
@@ -27,6 +29,7 @@ export async function GetSelfAccount() {
      message.error(result.message)
    }
  }
+  isLoadingAccount.value = false
 }
 export function useAccount() {
  return ACCOUNT
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -13,6 +13,9 @@ export interface PaginationResponse<T> {
 export enum IndexTypes {
  Default,
 }
+export enum SongListTypes {
+  Default,
+}
 export interface UserInfo {
  name: string
  id: number
@@ -20,26 +23,33 @@ export interface UserInfo {
  biliId?: number
  biliRoomId?: number
  indexType: IndexTypes
+  songListType: SongListTypes
+  enableFunctions: FunctionTypes[]
 }
 export interface AccountInfo extends UserInfo {
  isEmailVerified: boolean
  isBiliVerified: boolean
-  enableFunctions: string[]
  biliVerifyCode?: string
-  emailVerifyUrl?: string
+  bindEmail?: string
  settings: UserSetting
+
+  nextSendEmailTime?: number
 }
 export interface Setting_SendEmail {
  recieveQA: boolean
  recieveQAReply: boolean
 }
+export interface Setting_QuestionBox {
+  allowUnregistedUser: boolean
+}
 export interface UserSetting {
  sendEmail: Setting_SendEmail
+  questionBox: Setting_QuestionBox
  enableFunctions: FunctionTypes[]
 }
 export enum FunctionTypes {
-  SongList = 'SongList',
-  QuestionBox = 'QuestionBox',
+  SongList,
+  QuestionBox,
 }
 export interface SongAuthorInfo {
  name: string
@@ -61,6 +71,8 @@ export interface SongsInfo {
  language: SongLanguage[]
  description?: string
  tags?: string[]
+  createTime: number
+  updateTime: number
 }
 export enum SongLanguage {
  Chinese, // 中文
@@ -92,7 +104,7 @@ export interface QAInfo {
  isReaded?: boolean
  isSenderRegisted: boolean
  isPublic: boolean
-  isFavorite:boolean
+  isFavorite: boolean
  sendAt: number
 }
 export interface LotteryUserInfo {
@@ -112,3 +124,8 @@ export interface LotteryUserCardInfo {
  isGuard: boolean
  isCharge: boolean
 }
+export enum ThemeType {
+  Auto = 'auto',
+  Light = 'light',
+  Dark = 'dark',
+}
--- a/src/api/query.ts
+++ b/src/api/query.ts
@@ -1,18 +1,19 @@
 /* eslint-disable indent */
 import { useLocalStorage } from '@vueuse/core'
 import { APIRoot, PaginationResponse } from './api-models'
+import { Cookies20Regular } from '@vicons/fluent'

 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}`])
+  if (cookie.value) headers?.push(['Authorization', `Bearer ${cookie.value}`])
  headers?.push(['Content-Type', 'application/json'])

  const data = await fetch(url, {
    method: 'post',
    headers: headers,
-    body: JSON.stringify(body),
+    body: typeof body === 'string' ? body : JSON.stringify(body),
  }) // 不处理异常, 在页面处理
  return (await data.json()) as APIRoot<T>
 }
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -205,8 +205,6 @@ function onLoginButtonClick(e: MouseEvent) {
          </NSpace>
        </NTabPane>
      </NTabs>
-
-      <NDivider />
      <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
    </template>
  </NCard>
--- a/src/components/SongList.vue
+++ b/src/components/SongList.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { SongAuthorInfo, SongFrom, SongLanguage, SongsInfo } from '@/api/api-models'
-import { QueryPostAPI } from '@/api/query'
+import { SongAuthorInfo, SongFrom, SongLanguage, SongsInfo, UserInfo } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import { SONG_API_URL } from '@/data/constants'
+import { refDebounced, useDebounceFn } from '@vueuse/core'
 import { List } from 'linqts'
 import {
+  DataTableBaseColumn,
  DataTableColumns,
  FormInst,
  FormRules,
@@ -16,48 +18,54 @@ import {
  NEllipsis,
  NForm,
  NFormItem,
+  NIcon,
  NInput,
  NList,
  NListItem,
  NModal,
+  NPopconfirm,
  NSelect,
  NSpace,
  NTag,
  NText,
+  NTooltip,
  useMessage,
 } from 'naive-ui'
-import { FilterOptionValue } from 'naive-ui/es/data-table/src/interface'
-import { nextTick } from 'process'
-import { onMounted, h, ref, watch, computed } from 'vue'
+import { onMounted, h, ref, watch, computed, reactive } from 'vue'
 import APlayer from 'vue3-aplayer'
+import { NotepadEdit20Filled, Delete24Filled, Play24Filled, SquareArrowForward24Filled } from '@vicons/fluent'
+import NeteaseIcon from '@/svgs/netease.svg'
+import FiveSingIcon from '@/svgs/fivesing.svg'

 const props = defineProps<{
  songs: SongsInfo[]
  canEdit?: boolean
+  isSelf: boolean
 }>()
 watch(
  () => props.songs,
  (newV) => {
-    let map = new Map()
-    newV.forEach((s) => {
-      s.tags?.forEach((t) => map.set(t, t))
-    })
-    map.forEach((tag) => {
-      tagsSelectOption.value.push({
-        label: tag,
-        value: tag,
-      })
-    })
    songsInternal.value = newV
+    setTimeout(() => {
+      columns.value = createColumns()
+    }, 1)
  }
 )
 const songsInternal = ref(props.songs)
+const songsComputed = computed(() => {
+  if (debouncedInput.value) {
+    //忽略大小写比较
+    return songsInternal.value.filter((s) => s.name.toLowerCase().includes(debouncedInput.value.toLowerCase()))
+  }
+  return songsInternal.value
+})
 const message = useMessage()

 const showModal = ref(false)
 const updateSongModel = ref<SongsInfo>({} as SongsInfo)
+const searchMusicKeyword = ref()
+const debouncedInput = refDebounced(searchMusicKeyword, 500)

-const columns = ref<DataTableColumns<SongsInfo>>()
 const aplayerMusic = ref<{
  title: string
  artist: string
@@ -106,19 +114,46 @@ const songSelectOption = [
    value: SongLanguage.Other,
  },
 ]
-const tagsSelectOption = ref<{ label: string; value: string }[]>([])
-const tags = ref<string[]>([])
-const tagsOptions = computed(() => {
-  return tags.value.map((t) => ({
-    label: t,
-    value: t,
-  }))
+const tagsSelectOption = computed(() => {
+  return new List(songsInternal.value)
+    .SelectMany((s) => new List(s?.tags))
+    .Distinct()
+    .ToArray()
+    .map((t) => ({
+      label: t,
+      value: t,
+    }))
+})
+const authorsOptions = computed(() => {
+  return new List(songsInternal.value)
+    .SelectMany((s) => new List(s?.author))
+    .Distinct()
+    .ToArray()
+    .map((t) => ({
+      label: t,
+      value: t,
+    }))
+})
+
+const columns = ref<DataTableColumns<SongsInfo>>()
+const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
+  title: '作者',
+  key: 'artist',
+  width: 200,
+  resizable: true,
+  filter(value, row) {
+    return (row.author?.findIndex((t) => t == value.toString()) ?? -1) > -1
+  },
+  filterOptions: authorsOptions.value,
+  render(data) {
+    return h(NSpace, { size: 5 }, () => data.author.map((a) => h(NButton, { size: 'tiny', type: 'info', secondary: true, onClick: () => (authorColumn.value.filterOptionValue = a) }, () => a)))
+  },
 })

 function createColumns(): DataTableColumns<SongsInfo> {
+  authorColumn.value.filterOptions = authorsOptions.value
  return [
    {
-      title: '名称',
      key: 'name',
      resizable: true,
      minWidth: 100,
@@ -127,21 +162,18 @@ function createColumns(): DataTableColumns<SongsInfo> {
      render(data) {
        return h(NSpace, { size: 5 }, () => [h(NText, () => data.name), h(NText, { depth: '3' }, () => data.translateName)])
      },
+      title: '曲名',
    },
-    {
-      title: '作者',
-      key: 'artist',
-      width: 200,
-      resizable: true,
-      render(data) {
-        return h(NSpace, { size: 5 }, () => data.author.map((a) => h(NTag, { bordered: false, size: 'small', type: 'info' }, () => a)))
-      },
-    },
+    authorColumn.value,
    {
      title: '语言',
      key: 'language',
      width: 150,
      resizable: true,
+      filterOptions: songSelectOption,
+      filter(value, row) {
+        return (row.language?.findIndex((t) => t == (value.toString() as unknown as SongLanguage)) ?? -1) > -1
+      },
      render(data) {
        return (data.language?.length ?? 0) > 0
          ? h(NSpace, { size: 5 }, () => data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => songSelectOption.find((s) => s.value == a)?.label)))
@@ -163,7 +195,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
      filter(value, row) {
        return (row.tags?.findIndex((t) => t == value.toString()) ?? -1) > -1
      },
-      filterOptions: tagsOptions.value,
+      filterOptions: tagsSelectOption.value,
      render(data) {
        return (data.tags?.length ?? 0) > 0 ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a))) : null
      },
@@ -172,64 +204,89 @@ function createColumns(): DataTableColumns<SongsInfo> {
      title: '操作',
      key: 'manage',
      disabled: () => !props.canEdit,
-      width: 200,
+      width: props.isSelf ? 170 : 100,
      render(data) {
        return h(
          NSpace,
          {
-            justify: 'space-around',
+            justify: 'end',
+            size: 10
          },
          () => [
-            h(
-              NButton,
-              {
-                size: 'small',
-                onClick: () => {
-                  updateSongModel.value = JSON.parse(JSON.stringify(data))
-                  showModal.value = true
-                },
-              },
-              {
-                default: () => '修改',
-              }
-            ),
-            h(
-              NButton,
-              {
-                type: 'primary',
-                size: 'small',
-                onClick: () => {
-                  aplayerMusic.value = {
-                    title: data.name,
-                    artist: data.author.join('/') ?? '',
-                    src: data.url,
-                    pic: '',
-                  }
-                },
-              },
-              {
-                default: () => '播放',
-              }
-            ),
-            h(
-              NButton,
-              {
-                type: 'error',
-                size: 'small',
-                onClick: () => {
-                  aplayerMusic.value = {
-                    title: data.name,
-                    artist: data.author.join('/') ?? '',
-                    src: data.url,
-                    pic: '',
-                  }
-                },
-              },
-              {
-                default: () => '删除',
-              }
-            ),
            GetPlayButton(data),
+            data.url
+              ? h(NTooltip, null, {
+                  trigger: () =>
+                    h(
+                      NButton,
+                      {
+                        type: 'primary',
+                        size: 'small',
+                        circle: true,
+                        onClick: () => {
+                          aplayerMusic.value = {
+                            title: data.name,
+                            artist: data.author.join('/') ?? '',
+                            src: data.url,
+                            pic: '',
+                          }
+                        },
+                      },
+                      {
+                        icon: () => h(NIcon, { component: Play24Filled }),
+                      }
+                    ),
+                  default: () => '试听',
+                })
+              : null,
+            props.isSelf
+              ? [
+                  h(NTooltip, null, {
+                    trigger: () =>
+                      h(
+                        NButton,
+                        {
+                          size: 'small',
+                          circle: true,
+                          secondary: true,
+                          onClick: () => {
+                            updateSongModel.value = JSON.parse(JSON.stringify(data))
+                            showModal.value = true
+                          },
+                        },
+                        {
+                          icon: () => h(NIcon, { component: NotepadEdit20Filled }),
+                        }
+                      ),
+                    default: () => '修改',
+                  }),
+                  h(NTooltip, null, {
+                    trigger: () =>
+                      h(
+                        NPopconfirm,
+                        {
+                          onPositiveClick: () => delSong(data),
+                        },
+                        {
+                          trigger: () =>
+                            h(
+                              NButton,
+                              {
+                                type: 'error',
+                                size: 'small',
+                                circle: true,
+                              },
+                              {
+                                icon: () => h(NIcon, { component: Delete24Filled }),
+                              }
+                            ),
+                          default: () => '确认删除该歌曲？',
+                        }
+                      ),
+                    default: () => '删除',
+                  }),
+                ]
+              : null,
          ]
        )
      },
@@ -239,34 +296,67 @@ function createColumns(): DataTableColumns<SongsInfo> {
 function GetPlayButton(song: SongsInfo) {
  switch (song.from) {
    case SongFrom.FiveSing: {
-      return h(
-        NButton,
-        {
-          size: 'small',
-          color: '#00BBB3',
-          onClick: () => {
-            window.open(`http://5sing.kugou.com/bz/${song.id}.html`)
-          },
-        },
-        {
-          default: () => '在5sing打开',
-        }
-      )
+      return h(NTooltip, null, {
+        trigger: () =>
+          h(
+            h(
+              NButton,
+              {
+                size: 'small',
+                color: '#00BBB3',
+                ghost: true,
+                onClick: () => {
+                  window.open(`http://5sing.kugou.com/bz/${song.id}.html`)
+                },
+              },
+              {
+                icon: () => h(FiveSingIcon, { class: 'svg-icon fivesing' }),
+              }
+            )
+          ),
+        default: () => '在5sing打开',
+      })
    }
    case SongFrom.Netease:
-      return h(
-        NButton,
-        {
-          size: 'small',
-          color: '#C20C0C',
-          onClick: () => {
-            window.open(`https://music.163.com/#/song?id=${song.id}`)
-          },
-        },
-        {
-          default: () => '在网易云打开',
-        }
-      )
+      return h(NTooltip, null, {
+        trigger: () =>
+          h(
+            NButton,
+            {
+              size: 'small',
+              color: '#C20C0C',
+              ghost: true,
+              onClick: () => {
+                window.open(`https://music.163.com/#/song?id=${song.id}`)
+              },
+            },
+            {
+              icon: () => h(NeteaseIcon, { class: 'svg-icon netease' }),
+            }
+          ),
+        default: () => '在网易云打开',
+      })
+    case SongFrom.Custom:
+      return song.url
+        ? h(NTooltip, null, {
+            trigger: () =>
+              h(
+                NButton,
+                {
+                  size: 'small',
+                  color: '#6b95bd',
+                  ghost: true,
+                  onClick: () => {
+                    window.open(song.url)
+                  },
+                },
+                {
+                  icon: () => h(NIcon, { component: SquareArrowForward24Filled }),
+                }
+              ),
+            default: () => '打开链接',
+          })
+        : null
  }
 }
 function renderCell(value: string | number) {
@@ -290,13 +380,21 @@ async function updateSong() {
    }
  })
 }
+async function delSong(song: SongsInfo) {
+  await QueryGetAPI<SongsInfo>(SONG_API_URL + 'del', {
+    key: song.key,
+  }).then((data) => {
+    if (data.code == 200) {
+      songsInternal.value = songsInternal.value.filter((s) => s.key != song.key)
+      message.success('已删除歌曲')
+    } else {
+      message.error('未能删除歌曲: ' + data.message)
+    }
+  })
+}

 onMounted(() => {
  songsInternal.value = props.songs
-  tags.value = new List(songsInternal.value)
-    .SelectMany((s) => new List(s?.tags))
-    .Distinct()
-    .ToArray()
  setTimeout(() => {
    columns.value = createColumns()
  }, 1)
@@ -304,14 +402,22 @@ onMounted(() => {
 </script>

 <template>
-  歌单 {{ songsInternal.length }}
-  <NCard embedded>
-    <NButton> </NButton>
+  <NCard embedded size="small">
+    <NInput placeholder="搜索歌曲" v-model:value="searchMusicKeyword" size="small" style="max-width: 150px" />
  </NCard>
+  <NDivider style="margin: 5px 0 5px 0"> 共 {{ songsInternal.length }} 首 </NDivider>
  <Transition>
-    <APlayer v-if="aplayerMusic" :music="aplayerMusic" autoplay />
+    <div v-if="aplayerMusic">
+      <APlayer :music="aplayerMusic" autoplay />
+      <NDivider style="margin: 15px 0 15px 0" />
+    </div>
  </Transition>
-  <NDataTable size="small" :columns="columns" :data="songsInternal"> </NDataTable>
+  <NDataTable
+    size="small"
+    :columns="columns"
+    :data="songsComputed"
+    :pagination="{ itemCount: songsInternal.length, defaultPageSize: 25, pageSizes: [25, 50, 200], size: 'small', showSizePicker: true }"
+  />
  <NModal v-model:show="showModal" style="max-width: 600px" preset="card">
    <template #header> 修改信息 </template>
    <NForm ref="formRef" :rules="updateSongRules" :model="updateSongModel" :render-cell="renderCell">
@@ -338,3 +444,12 @@ onMounted(() => {
    <NButton @click="updateSong" type="success"> 更新 </NButton>
  </NModal>
 </template>
+
+<style>
+.netease path:nth-child(2) {
+  fill: #c20c0c;
+}
+.fivesing:first-child {
+  fill: #00bbb3;
+}
+</style>
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -1,5 +1,10 @@
+import { ref } from 'vue'
+
 const debugAPI = import.meta.env.VITE_DEBUG_API
 const releseAPI = `${document.location.protocol}//api.vtsuru.live/`
+
+export const isBackendUsable = ref(true)
+
 export const BASE_API = process.env.NODE_ENV === 'development' ? debugAPI : releseAPI
 export const FETCH_API = 'https://fetch.vtsuru.live/'
 export const FIVESING_SEARCH_API = 'http://search.5sing.kugou.com/home/json?sort=1&page=1&filter=3&type=0&keyword='
--- a/src/data/notifactions.ts
+++ b/src/data/notifactions.ts
@@ -1,22 +1,33 @@
 import { QueryGetAPI } from '@/api/query'
 import { useRequest } from 'vue-request'
-import { NOTIFACTION_API_URL } from './constants'
+import { NOTIFACTION_API_URL, isBackendUsable } from './constants'
 import { NotifactionInfo } from '@/api/api-models'
 import { useAccount } from '@/api/account'
+import { ref } from 'vue'

 const account = useAccount()
-const { data, run } = useRequest(get, {
-  errorRetryCount: 5,
-  pollingInterval: 5000,
-  pollingWhenHidden: false,
-})
+const n = ref<NotifactionInfo>()
+let isLoading = false
 function get() {
-  return QueryGetAPI<NotifactionInfo>(NOTIFACTION_API_URL + 'get')
+  if (isLoading) return
+  QueryGetAPI<NotifactionInfo>(NOTIFACTION_API_URL + 'get')
+    .then((data) => {
+      if (data.code == 200) {
+        n.value = data.data
+        isBackendUsable.value = true
+      }
+    })
+    .catch((err) => {
+      isBackendUsable.value = false
+    })
+    .finally(() => {
+      isLoading = false
+    })
 }

-export const notifactions = () => data
+export const notifactions = () => n
 export const GetNotifactions = () => {
  if (account) {
-    run()
+    setInterval(get, 5000)
  }
 }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
      {
        path: '',
        name: 'user-index',
-        component: () => import('@/views/view/IndexView.vue'),
+        component: () => import('@/views/view/UserIndexView.vue'),
        meta: {
          title: '主页',
        },
@@ -37,7 +37,7 @@ const routes: Array<RouteRecordRaw> = [
        name: 'user-questionBox',
        component: () => import('@/views/view/QuestionBoxView.vue'),
        meta: {
-          title: '棉花糖(提问箱',
+          title: '棉花糖 (提问箱',
        },
      },
    ],
--- a/src/svgs/fivesing.svg
+++ b/src/svgs/fivesing.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="50" width="50" viewBox="0 0 1024 1024"><path d="M256 0h512c140.8 0 256 115.2 256 256v512c0 140.8-115.2 256-256 256H256c-140.8 0-256-115.2-256-256V256c0-140.8 115.2-256 256-256z m256 486.4c-12.8-25.6-34.133333-42.666667-46.933333-64-21.333333-25.6-38.4-55.466667-55.466667-85.333333L384 273.066667c-8.533333-21.333333-17.066667-46.933333-34.133333-64-8.533333-8.533333-25.6-12.8-38.4-12.8-12.8 4.266667-21.333333 8.533333-29.866667 12.8-21.333333 21.333333-34.133333 42.666667-51.2 64-29.866667 51.2-46.933333 106.666667-55.466667 162.133333-12.8 72.533333-8.533333 149.333333 12.8 221.866667 17.066667 59.733333 46.933333 115.2 93.866667 157.866666 12.8 17.066667 42.666667 21.333333 59.733333 8.533334 25.6-12.8 42.666667-29.866667 59.733334-51.2 21.333333-25.6 38.4-51.2 51.2-81.066667 25.6-46.933333 51.2-93.866667 64-149.333333 8.533333-17.066667 4.266667-38.4-4.266667-55.466667z m337.066667-8.533333c-8.533333-25.6-21.333333-46.933333-34.133334-68.266667-21.333333-34.133333-46.933333-64-76.8-89.6-51.2-46.933333-110.933333-85.333333-174.933333-115.2-21.333333-8.533333-42.666667-17.066667-68.266667-21.333333-17.066667-4.266667-38.4-4.266667-55.466666 0-17.066667 0-34.133333 12.8-34.133334 29.866666v21.333334c4.266667 38.4 21.333333 72.533333 38.4 102.4s38.4 59.733333 59.733334 85.333333l25.6 25.6c42.666667 38.4 93.866667 68.266667 153.6 85.333333 25.6 4.266667 51.2 4.266667 72.533333 4.266667 25.6-4.266667 55.466667-4.266667 76.8-21.333333 8.533333-4.266667 12.8-12.8 12.8-21.333334 8.533333-4.266667 4.266667-17.066667 4.266667-17.066666z m-8.533334 81.066666c-25.6-12.8-51.2 4.266667-81.066666 0-34.133333 0-64-4.266667-98.133334-8.533333-25.6-4.266667-46.933333-8.533333-72.533333-8.533333-12.8 4.266667-25.6 4.266667-34.133333 17.066666-12.8 17.066667-21.333333 34.133333-25.6 55.466667-21.333333 55.466667-51.2 106.666667-81.066667 153.6-8.533333 12.8-17.066667 21.333333-21.333333 34.133333-4.266667 8.533333-8.533333 21.333333 0 34.133334 8.533333 12.8 25.6 12.8 38.4 12.8 55.466667 4.266667 115.2-8.533333 166.4-34.133334 51.2-25.6 102.4-59.733333 145.066666-98.133333 34.133333-34.133333 68.266667-72.533333 76.8-123.733333 0-8.533333 0-25.6-12.8-34.133334z"></path></svg>
--- a/src/svgs/netease.svg
+++ b/src/svgs/netease.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g>
+        <path fill="none" d="M0 0h24v24H0z"/>
+        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1.086-10.432c.24-.84 1.075-1.541 1.99-1.648.187.694.388 1.373.545 2.063.053.23.037.495-.018.727-.213.892-1.248 1.242-1.978.685-.53-.405-.742-1.12-.539-1.827zm3.817-.197c-.125-.465-.256-.927-.393-1.42.5.13.908.36 1.255.698 1.257 1.221 1.385 3.3.294 4.731-1.135 1.49-3.155 2.134-5.028 1.605-2.302-.65-3.808-2.952-3.441-5.316.274-1.768 1.27-3.004 2.9-3.733.407-.182.58-.56.42-.93-.157-.364-.54-.504-.944-.343-2.721 1.089-4.32 4.134-3.67 6.987.713 3.118 3.495 5.163 6.675 4.859 1.732-.165 3.164-.948 4.216-2.347 1.506-2.002 1.297-4.783-.463-6.499-.666-.65-1.471-1.018-2.39-1.153-.083-.013-.217-.052-.232-.106-.087-.313-.18-.632-.206-.954-.029-.357.29-.64.65-.645.253-.003.434.13.603.3.303.3.704.322.988.062.29-.264.296-.678.018-1.008-.566-.672-1.586-.891-2.43-.523-.847.37-1.321 1.187-1.2 2.093.038.28.11.557.167.842l-.26.072c-.856.24-1.561.704-2.098 1.414-.921 1.22-.936 2.828-.041 3.947 1.274 1.594 3.747 1.284 4.523-.568.284-.676.275-1.368.087-2.065z"/>
+    </g>
+</svg>
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -1,12 +1,47 @@
 <script setup lang="ts">
-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 {
+  NAlert,
+  NAvatar,
+  NButton,
+  NCard,
+  NCountdown,
+  NDivider,
+  NIcon,
+  NLayout,
+  NLayoutContent,
+  NLayoutFooter,
+  NLayoutHeader,
+  NLayoutSider,
+  NMenu,
+  NPageHeader,
+  NSpace,
+  NSpin,
+  NSwitch,
+  NText,
+  NTime,
+  useMessage,
+} from 'naive-ui'
+import { h, onMounted, ref } from 'vue'
+import { BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
+import { Lottery24Filled } from '@vicons/fluent'
+import { isLoadingAccount, useAccount } from '@/api/account'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
 import { RouterLink } from 'vue-router'
+import { useElementSize, useStorage } from '@vueuse/core'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import { QueryGetAPI } from '@/api/query'
+import { ThemeType } from '@/api/api-models'
+import { isDarkMode } from '@/Utils'

 const accountInfo = useAccount()
+const message = useMessage()
+
+const windowWidth = window.innerWidth
+const sider = ref()
+const { width } = useElementSize(sider)
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
+
+const canResendEmail = ref(false)

 function renderIcon(icon: unknown) {
  return () => h(NIcon, null, { default: () => h(icon as any) })
@@ -21,11 +56,12 @@ const menuOptions = [
          to: {
            name: 'manage-songList',
          },
+          disabled: !accountInfo.value?.isEmailVerified,
        },
        { default: () => '歌单' }
      ),
    key: 'manage-songList',
-    icon: renderIcon(BookOutline),
+    icon: renderIcon(MusicalNote),
  },
  {
    label: () =>
@@ -39,7 +75,7 @@ const menuOptions = [
        { default: () => '棉花糖 (提问箱' }
      ),
    key: 'manage-questionBox',
-    icon: renderIcon(BookOutline),
+    icon: renderIcon(Chatbox),
  },
  {
    label: () =>
@@ -53,38 +89,117 @@ const menuOptions = [
        { default: () => '动态抽奖' }
      ),
    key: 'manage-lottery',
-    icon: renderIcon(BookOutline),
+    icon: renderIcon(Lottery24Filled),
  },
 ]
+
+async function resendEmail() {
+  await QueryGetAPI(ACCOUNT_API_URL + 'send-verify-email')
+    .then((data) => {
+      if (data.code == 200) {
+        canResendEmail.value = false
+        message.success('发送成功, 请检查你的邮箱. 如果没有收到, 请检查垃圾邮件')
+        if (accountInfo.value && accountInfo.value.nextSendEmailTime) accountInfo.value.nextSendEmailTime += 1000 * 60
+      } else {
+        message.error('发送失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发送失败')
+    })
+}
+
+onMounted(() => {
+  if (accountInfo.value?.isEmailVerified == false) {
+    if ((accountInfo.value?.nextSendEmailTime ?? -1) <= 0) {
+      canResendEmail.value = true
+    }
+  }
+})
 </script>

 <template>
  <NLayout v-if="accountInfo">
-    <NLayoutHeader bordered style="height: 50px"> Header Header Header </NLayoutHeader>
+    <NLayoutHeader bordered style="height: 50px; padding: 10px 15px 5px 15px">
+      <NPageHeader>
+        <template #title>
+          <NText strong style="font-size: 1.4rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)"> VTSURU CENTER </NText>
+        </template>
+        <template #extra>
+          <NSpace align="center" justify="center">
+            <NSwitch :default-value="!isDarkMode()" @update:value="(value: string & number & boolean) => themeType = value ? ThemeType.Light : ThemeType.Dark">
+              <template #checked>
+                <NIcon :component="Sunny" />
+              </template>
+              <template #unchecked>
+                <NIcon :component="Moon" />
+              </template>
+            </NSwitch>
+            <NButton size="small" style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'user-index', params: { id: accountInfo.id } })"> 回到主页 </NButton>
+          </NSpace>
+        </template>
+      </NPageHeader>
+    </NLayoutHeader>
    <NLayout has-sider style="height: calc(100vh - 50px)">
-      <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 :default-value="$route.name?.toString()" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
+      <NLayoutSider ref="sider" bordered show-trigger collapse-mode="width" :default-collapsed="windowWidth < 750" :collapsed-width="64" :width="180" :native-scrollbar="false">
+        <NSpace justify="center" style="margin-top: 16px">
+          <NButton @click="$router.push({ name: 'manage-index' })" type="info" style="width: 100%">
+            <template #icon>
+              <NIcon :component="BrowsersOutline" />
+            </template>
+            <template v-if="width >= 180"> 面板 </template>
+          </NButton>
+        </NSpace>
+        <NMenu
+          style="margin-top: 12px"
+          :disabled="accountInfo?.isEmailVerified != true"
+          :default-value="$route.name?.toString()"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="menuOptions"
+        />
+        <NSpace justify="center">
+          <NText depth="3" v-if="width > 150">
+            有更多功能建议请
+            <NButton text type="info"> 反馈 </NButton>
+          </NText>
+        </NSpace>
      </NLayoutSider>
      <NLayout style="height: 100%">
        <div style="box-sizing: border-box; padding: 20px">
-          <RouterView v-slot="{ Component }">
+          <RouterView v-slot="{ Component }" v-if="accountInfo?.isEmailVerified">
            <KeepAlive>
              <component :is="Component" />
            </KeepAlive>
          </RouterView>
+          <template v-else>
+            <NAlert type="info">
+              请进行邮箱验证
+              <br /><br />
+              <NButton size="small" type="info" :disabled="!canResendEmail" @click="resendEmail"> 重新发送验证邮件 </NButton>
+              <NCountdown v-if="!canResendEmail" :duration="(accountInfo?.nextSendEmailTime ?? 0) - Date.now()" @finish="canResendEmail = true" />
+            </NAlert>
+          </template>
        </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>
-      <NDivider />
-      <RegisterAndLogin style="max-width: 500px; min-width: 350px" />
-    </div>
+    <NLayoutContent style="display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 50px; height: 100%; box-sizing: border-box">
+      <template v-if="!isLoadingAccount">
+        <NSpace vertical justify="center" align="center">
+          <NText> 请登录或注册后使用 </NText>
+          <NButton tag="a" href="/"> 回到主页 </NButton>
+        </NSpace>
+        <NDivider />
+        <RegisterAndLogin style="max-width: 500px; min-width: 350px" />
+      </template>
+      <template v-else>
+        <NSpin :loading="isLoadingAccount">
+          正在请求账户数据...
+        </NSpin>
+      </template>
+    </NLayoutContent>
  </template>
 </template>
--- a/src/views/VerifyView.vue
+++ b/src/views/VerifyView.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { ACCOUNT } from '@/api/account'
+import { ACCOUNT, useAccount } 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 { NAlert, NButton, NCard, NSpace, NSpin, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import VueTurnstile from 'vue-turnstile'

+const accountInfo = useAccount()
+
 const message = useMessage()
 const token = ref('')
 const route = useRoute()
@@ -23,8 +25,11 @@ async function VerifyAccount() {
  ).then((data) => {
    if (data.code == 200) {
      ACCOUNT.value = data.data
-      router.push('index')
      message.success('成功激活账户: ' + ACCOUNT.value.name)
+      router.push('/manage')
+    }
+    else {
+      message.error('激活失败: ' + data.message)
    }
  })
 }
@@ -32,7 +37,7 @@ async function VerifyAccount() {

 <template>
  <div style="display: flex; align-items: center; justify-content: center; height: 100%">
-    <NCard embedded style="max-width: 500px">
+    <NCard v-if="accountInfo?.isEmailVerified != true" embedded style="max-width: 500px">
      <template #header> 激活账户 </template>
      <NSpin :show="!token">
        <NSpace justify="center" align="center" vertical>
@@ -41,5 +46,8 @@ async function VerifyAccount() {
        </NSpace>
      </NSpin>
    </NCard>
+    <NAlert v-else type="error">
+      此账户已完成验证
+    </NAlert>
  </div>
 </template>
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -1,74 +1,51 @@
 <!-- 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, NPageHeader, NSwitch, useOsTheme, NModal } from 'naive-ui'
+import {
+  NAvatar,
+  NIcon,
+  NLayout,
+  NLayoutHeader,
+  NLayoutSider,
+  NMenu,
+  NSpace,
+  NText,
+  NButton,
+  NResult,
+  NPageHeader,
+  NSwitch,
+  NModal,
+  NEllipsis,
+  MenuOption,
+} from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
-import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from '@vicons/ionicons5'
+import { BookOutline as BookIcon, Chatbox, Home, Moon, MusicalNote, PersonOutline as PersonIcon, Sunny, WineOutline as WineIcon } from '@vicons/ionicons5'
 import { GetInfo, useUser, useUserWithUId } from '@/api/user'
 import { RouterLink, useRoute } from 'vue-router'
-import { UserInfo } from '@/api/api-models'
+import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models'
 import { FETCH_API } from '@/data/constants'
 import { useAccount } from '@/api/account'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
+import { useElementSize, useStorage } from '@vueuse/core'
+import { isDarkMode } from '@/Utils'

 const route = useRoute()
 const id = computed(() => {
  return Number(route.params.id)
 })
-const theme = useOsTheme()
+const themeType = useStorage('Settings.Theme', ThemeType.Auto);

 const userInfo = ref<UserInfo>()
 const biliUserInfo = ref()
 const accountInfo = useAccount()

 const registerAndLoginModalVisiable = ref(false)
+const sider = ref()
+const { width } = useElementSize(sider)

 function renderIcon(icon: unknown) {
  return () => h(NIcon, null, { default: () => h(icon as any) })
 }
-const menuOptions = [
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'user-index',
-          },
-        },
-        { default: () => '主页' }
-      ),
-    key: 'user-index',
-    icon: renderIcon(BookIcon),
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'user-songList',
-          },
-        },
-        { default: () => '歌单' }
-      ),
-    key: 'user-songList',
-    icon: renderIcon(BookIcon),
-  },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: 'user-questionBox',
-          },
-        },
-        { default: () => '棉花糖 (提问箱' }
-      ),
-    key: 'user-questionBox',
-    icon: renderIcon(BookIcon),
-  },
-]
+const menuOptions = ref<MenuOption[]>()
 async function RequestBiliUserData() {
  await fetch(FETCH_API + `https://account.bilibili.com/api/member/getCardByMid?mid=${userInfo.value?.biliId}`)
    .then(async (respone) => {
@@ -86,6 +63,52 @@ async function RequestBiliUserData() {

 onMounted(async () => {
  userInfo.value = await useUser()
+  menuOptions.value = [
+    {
+      label: () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: 'user-index',
+            },
+          },
+          { default: () => '主页' }
+        ),
+      key: 'user-index',
+      icon: renderIcon(Home),
+    },
+    {
+      label: () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: 'user-songList',
+            },
+          },
+          { default: () => '歌单' }
+        ),
+      show: (userInfo.value?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) > -1,
+      key: 'user-songList',
+      icon: renderIcon(MusicalNote),
+    },
+    {
+      label: () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: 'user-questionBox',
+            },
+          },
+          { default: () => '棉花糖 (提问箱' }
+        ),
+      show: (userInfo.value?.enableFunctions.indexOf(FunctionTypes.QuestionBox) ?? -1) > -1,
+      key: 'user-questionBox',
+      icon: renderIcon(Chatbox),
+    },
+  ]
  await RequestBiliUserData()
 })
 </script>
@@ -97,8 +120,15 @@ onMounted(async () => {
    <NLayoutHeader style="height: 50px; padding: 5px 15px 5px 15px">
      <NPageHeader :subtitle="($route.meta.title as string) ?? ''">
        <template #extra>
-          <NSpace>
-            <NSwitch> </NSwitch>
+          <NSpace align="center">
+            <NSwitch :default-value="!isDarkMode()" @update:value="(value: string & number & boolean) => themeType = value ? ThemeType.Light : ThemeType.Dark">
+              <template #checked>
+                <NIcon :component="Sunny" />
+              </template>
+              <template #unchecked>
+                <NIcon :component="Moon"/>
+              </template>
+            </NSwitch>
            <template v-if="accountInfo">
              <NButton style="right: 0px; position: relative" type="primary" @click="$router.push({ name: 'manage-index' })"> 个人中心 </NButton>
            </template>
@@ -108,36 +138,38 @@ onMounted(async () => {
          </NSpace>
        </template>
        <template #title>
-          <NText style="font-size: 1.5rem"> VTSURU </NText>
+          <NText strong style="font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)"> 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">
+      <NLayoutSider ref="sider" show-trigger default-collapsed collapse-mode="width" :collapsed-width="64" :width="180" :native-scrollbar="false">
        <Transition>
-          <div v-if="biliUserInfo" style="margin-top: 15px;">
+          <div v-if="biliUserInfo" style="margin-top: 8px">
            <NSpace vertical justify="center" align="center">
-              <NAvatar :src="biliUserInfo.face" :img-props="{ referrerpolicy: 'no-referrer' }" />
-              <NText strong>
-                {{ biliUserInfo.name }}
-              </NText>
+              <NAvatar :src="biliUserInfo.face" :img-props="{ referrerpolicy: 'no-referrer' }" round bordered style="box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1)" />
+              <NEllipsis v-if="width > 100" style="max-width: 100%">
+                <NText strong>
+                  {{ biliUserInfo.name }}
+                </NText>
+              </NEllipsis>
            </NSpace>
          </div>
        </Transition>
        <NMenu :default-value="$route.name?.toString()" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
      </NLayoutSider>
      <NLayout style="height: 100%">
-        <div class="viewer-page-content">
+        <div class="viewer-page-content" :style="`box-shadow:${isDarkMode() ? 'rgb(28 28 28 / 9%) 5px 5px 6px inset, rgba(139, 139, 139, 0.09) -5px -5px 6px inset' : 'inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;'}`">
          <RouterView v-slot="{ Component }">
            <KeepAlive>
-              <component :is="Component" />
+              <component :is="Component" :bili-info="biliUserInfo" />
            </KeepAlive>
          </RouterView>
        </div>
      </NLayout>
    </NLayout>
  </NLayout>
-  <NModal v-model:show="registerAndLoginModalVisiable" style="width: 500px; max-width: 90vw;">
+  <NModal v-model:show="registerAndLoginModalVisiable" style="width: 500px; max-width: 90vw">
    <RegisterAndLogin />
  </NModal>
 </template>
@@ -146,7 +178,6 @@ onMounted(async () => {
 .viewer-page-content{
    height: 100%;
    border-radius: 18px;
-    box-shadow: inset 5px 5px 6px #8b8b8b17, inset -5px -5px 6px #8b8b8b17;
    padding: 15px;
    margin-right: 10px;
    box-sizing: border-box;
--- a/src/views/manage/BiliVerifyView.vue
+++ b/src/views/manage/BiliVerifyView.vue
@@ -90,7 +90,7 @@ onMounted(async () => {
            请在点击
            <NText type="primary" strong> 开始认证 </NText>
            后五分钟之内使用
-            <NText> 需要认证的账户 </NText>
+            <NText strong type="primary"> 需要认证的账户 </NText>
            在自己的直播间内发送
            <NButton type="info" text @click="copyCode">
              {{ accountInfo?.biliVerifyCode }}
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -1,32 +1,48 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
 import { NAlert, NButton, NCard, NDivider, NSpace, NTag, NText, NThing, NTime } from 'naive-ui'
+import SettingsManageView from './SettingsManageView.vue';

 const accountInfo = useAccount()
+
+
 </script>

 <template>
-  <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>
+  <NSpace justify="center" align="center" vertical>
+    <NCard embedded style="max-width: 90%;width: 800px;">
+      <NSpace align="center" justify="center" vertical>
+        <NText style="font-size: 3rem">
+          {{ accountInfo?.name }}
+        </NText>
+        <NText style="color: gray">
+          于
+          <NTime :time="accountInfo?.createAt" />
+          注册
+        </NText>
+      </NSpace>

-    <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>
+      <NDivider />
+      <NAlert>
+        邮箱:
+        <NTag v-if="accountInfo?.isEmailVerified" type="success"> 已认证 | {{ accountInfo?.bindEmail }} </NTag>
+        <template v-else>
+          <NTag type="error" size="small"> 未认证 </NTag>
+        </template>
+      </NAlert>
+      <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>
+    <div style="max-width: 90%;width: 800px;">
+      <NDivider/>
+      <SettingsManageView />
+    </div>
+  </NSpace>
 </template>
--- a/src/views/manage/HistoryView.vue
+++ b/src/views/manage/HistoryView.vue
@@ -0,0 +1,2 @@
+<script setup lang="ts">
+</script>
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -104,9 +104,9 @@ async function read(question: QAInfo, read: boolean) {
    })
 }
 async function favorite(question: QAInfo, fav: boolean) {
-  await QueryGetAPI(QUESTION_API_URL + 'read', {
+  await QueryGetAPI(QUESTION_API_URL + 'favorite', {
    id: question.id,
-    read: fav ? 'true' : 'false',
+    favorite: fav ? 'true' : 'false',
  })
    .then((data) => {
      if (data.code == 200) {
@@ -164,6 +164,11 @@ function onOpenModal(question: QAInfo) {
  replyMessage.value = question.answer?.message
  replyModalVisiable.value = true
 }
+function refresh() {
+  isSendGetted = false
+  isRevieveGetted = false
+  onTabChange(selectedTabItem.value)
+}

 onMounted(() => {
  GetRecieveQAInfo()
@@ -171,12 +176,12 @@ onMounted(() => {
 </script>

 <template>
-  <NButton type="primary"> 刷新 </NButton>
+  <NButton type="primary" @click="refresh"> 刷新 </NButton>
  <NDivider style="margin: 10px 0 10px 0" />
  <NTabs animated @update:value="onTabChange" v-model:value="selectedTabItem">
    <NTabPane tab="我收到的" name="0">
      只显示收藏 <NSwitch v-model:value="onlyFavorite" />
-      <NList>
+      <NList :bordered="false">
        <NListItem v-for="item in recieveQuestionsFiltered" :key="item.id">
          <NCard :embedded="!item.isReaded" hoverable size="small">
            <template #header>
@@ -209,7 +214,7 @@ onMounted(() => {
                  收藏
                </NButton>
                <NButton size="small"> 举报 </NButton>
-                <NButton size="small"> 拉黑 </NButton>
+                <NButton size="small" @click="blacklist(item)"> 拉黑 </NButton>
              </NSpace>
            </template>
            <template #header-extra>
@@ -279,3 +284,9 @@ onMounted(() => {
    <NButton :loading="isRepling" @click="reply" type="primary"> 发送 </NButton>
  </NModal>
 </template>
+
+<style>
+.n-list{
+  background-color: transparent;
+}
+</style>
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NSwitch, useMessage } from 'naive-ui'
+import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NSpace, NSwitch, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import { useRequest } from 'vue-request'
 import { FunctionTypes } from '@/api/api-models'
@@ -20,24 +20,60 @@ function UpdateEnableFunction(func: FunctionTypes, enable: boolean) {
    }
  }
 }
-async function SaveSetting() {
-  const data = await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', {
-    setting: JSON.stringify(account.value?.settings),
-  })
-  if (data.code == 200) {
-    message.success('保存成功')
+async function SaveComboGroupSetting(value: (string | number)[], meta: { actionType: 'check' | 'uncheck'; value: string | number }) {
+  if (account.value) {
+    //UpdateEnableFunction(meta.value as FunctionTypes, meta.actionType == 'check')
+    await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', account.value?.settings)
+      .then((data) => {
+        if (data.code == 200) {
+          //message.success('保存成功')
+        } else {
+          message.error('修改失败')
+          if (account.value) {
+            account.value.settings.enableFunctions = account.value.settings.enableFunctions.filter((f) => f != (meta.value as FunctionTypes))
+          }
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+        message.error('修改失败')
+      })
+  }
+}
+async function SaveComboSetting(value :boolean) {
+  if (account.value) {
+    //UpdateEnableFunction(meta.value as FunctionTypes, meta.actionType == 'check')
+    await QueryPostAPI(ACCOUNT_API_URL + 'update-setting', account.value?.settings)
+      .then((data) => {
+        if (data.code == 200) {
+          //message.success('保存成功')
+        } else {
+          message.error('修改失败')
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+        message.error('修改失败')
+      })
  }
 }
 </script>

 <template>
-  <NCard v-if="account">
-    <NDivider> 启用功能 </NDivider>
-    <NCheckboxGroup v-model:value="account.settings.enableFunctions">
+  <NCard v-if="account" title="设置">
+    <NDivider style="margin: 0"> 启用功能 </NDivider>
+    <NCheckboxGroup v-model:value="account.settings.enableFunctions" @update:value="SaveComboGroupSetting">
      <NCheckbox :value="FunctionTypes.SongList"> 歌单 </NCheckbox>
      <NCheckbox :value="FunctionTypes.QuestionBox"> 提问箱(棉花糖 </NCheckbox>
    </NCheckboxGroup>
-    <NDivider />
-    <NButton @click="SaveSetting"> 保存 </NButton>
+    <NDivider > 通知 </NDivider>
+    <NSpace>
+      <NCheckbox v-model:checked="account.settings.sendEmail.recieveQA" @update:checked="SaveComboSetting"> 收到新提问时发送邮件 </NCheckbox>
+      <NCheckbox v-model:checked="account.settings.sendEmail.recieveQAReply" @update:checked="SaveComboSetting"> 提问收到回复时发送邮件 </NCheckbox>
+    </NSpace>
+    <NDivider> 提问箱 </NDivider>
+    <NSpace>
+      <NCheckbox v-model:checked="account.settings.questionBox.allowUnregistedUser" @update:checked="SaveComboSetting"> 允许未注册用户提问 </NCheckbox>
+    </NSpace>
  </NCard>
 </template>
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -171,10 +171,22 @@ async function addNeteaseSongs() {
 }
 async function addFingsingSongs(song: SongsInfo) {
  isModalLoading.value = true
+  if (!song.url) {
+    try {
+      const url = await getFivesingSongUrl(song)
+      song.url = url
+    } catch (err) {
+      isModalLoading.value = false
+      message.error('添加失败')
+      console.error(err)
+      return
+    }
+  }
  await addSongs([song], SongFrom.FiveSing)
    .then((data) => {
      if (data.code == 200) {
        message.success(`已添加歌曲`)
+        addSongModel.value = {} as SongsInfo
        songs.value.push(...data.data)
      } else {
        message.error('添加失败: ' + data.message)
@@ -311,8 +323,21 @@ onMounted(async () => {
 </script>

 <template>
-  <NButton @click="showModal = true"> 添加歌曲 </NButton>
-  <NModal v-model:show="showModal" style="max-width: 1000px;" preset="card">
+  <NSpace>
+    <NButton @click="showModal = true" type="primary"> 添加歌曲 </NButton>
+    <NButton
+      @click="
+        () => {
+          getSongs()
+          message.success('完成')
+        }
+      "
+    >
+      刷新
+    </NButton>
+  </NSpace>
+  <NDivider style="margin: 16px 0 16px 0" />
+  <NModal v-model:show="showModal" style="max-width: 1000px" preset="card">
    <template #header> 添加歌曲 </template>
    <NSpin :show="isModalLoading">
      <NTabs default-value="custom" animated>
@@ -377,10 +402,10 @@ onMounted(async () => {
                        </NTag>
                      </NSpace>
                    </td>
-                    <td style="display: flex; justify-content: flex-end;">
+                    <td style="display: flex; justify-content: flex-end">
                      <!-- 在这里播放song.url链接中的音频 -->
-                      <NButton size="small" v-if="!song.url"  @click="playFivesingSong(song)" :loading="isGettingFivesingSongPlayUrl == song.id"> 试听 </NButton>
-                      <audio v-else controls autoplay style="max-height: 30px">
+                      <NButton size="small" v-if="!song.url" @click="playFivesingSong(song)" :loading="isGettingFivesingSongPlayUrl == song.id"> 试听 </NButton>
+                      <audio v-else controls style="max-height: 30px">
                        <source :src="song.url" />
                      </audio>
                    </td>
@@ -398,5 +423,6 @@ onMounted(async () => {
      </NTabs>
    </NSpin>
  </NModal>
-  <SongList :songs="songs" />
+  <SongList :songs="songs" is-self />
+  <NDivider />
 </template>
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -50,6 +50,7 @@ async function SendQuestion() {
      if (data.code == 200) {
        message.success('成功发送棉花糖')
        questionMessage.value = ''
+        fileList.value = []
      } else {
        message.error(data.message)
      }
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -1,40 +1,70 @@
-<script setup lang="ts">
-import { SongsInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryGetPaginationAPI } from '@/api/query'
-import SongList from '@/components/SongList.vue'
-import { SONG_API_URL, USER_API_URL } from '@/data/constants'
-import { onMounted, ref } from 'vue'
-import { useRouteParams } from '@vueuse/router'
-import { useAccount } from '@/api/account'
-import { NAlert } from 'naive-ui'
+<template>
+  <NSpin v-if="isLoading" show />
+  <component v-else :is="songListType" :user-info="userInfo" :songs="songs" />
+</template>

-const accountInfo = useAccount()
+<script lang="ts" setup>
+import { useUser } from '@/api/user'
+import { SongListTypes, SongsInfo } from '@/api/api-models'
+import DefaultSongListTemplate from '@/views/view/songListTemplate/DefaultSongListTemplate.vue'
+import { computed, onMounted, ref } from 'vue'
+import { UserInfo } from '@/api/api-models'
+import { useRouteParams } from '@vueuse/router'
+import { QueryGetAPI } from '@/api/query'
+import { SONG_API_URL } from '@/data/constants'
+import { NSpin, useMessage } from 'naive-ui'
+
+defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+}>()
+
+const songListType = computed(() => {
+  if (userInfo.value) {
+    switch (userInfo.value.songListType) {
+      case SongListTypes.Default:
+        return DefaultSongListTemplate
+
+      default:
+        return DefaultSongListTemplate
+    }
+  } else {
+    return DefaultSongListTemplate
+  }
+})
 const songs = ref<SongsInfo[]>()
 const uId = useRouteParams('id', '-1', { transform: Number })
+const isLoading = ref(true)
+const message = useMessage()

 const errMessage = ref('')

 async function getSongs() {
+  isLoading.value = true
  await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
    id: uId.value,
-  }).then((data) => {
-    if (data.code == 200) {
-      songs.value = data.data
-    }
-    else {
-      errMessage.value = data.message
-    }
  })
+    .then((data) => {
+      if (data.code == 200) {
+        songs.value = data.data
+      } else {
+        errMessage.value = data.message
+        message.error('加载失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('加载失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
 }

+const userInfo = ref<UserInfo>()
+
 onMounted(async () => {
+  userInfo.value = await useUser()
  await getSongs()
 })
 </script>
-
-<template>
-  <SongList v-if="songs" :songs="songs ?? []" />
-  <NAlert v-else-if="errMessage" type="error">
-    {{ errMessage }}
-  </NAlert>
-</template>
--- a/src/views/view/UserIndexView.vue
+++ b/src/views/view/UserIndexView.vue
@@ -1,23 +1,22 @@
 <template>
-  <div style="display: flex; justify-content: center">
-    <div>
-      <NText strong tag="h1"> vtsuru </NText>
-      <component :is="indexType" :user-info="userInfo"/>
-    </div>
-  </div>
+  <component :is="indexType" :user-info="userInfo" :bili-info="biliInfo"/>
 </template>

 <script lang="ts" setup>
-import { useAccount } from '@/api/account'
 import { useUser } from '@/api/user'
 import { IndexTypes } from '@/api/api-models'
-import { NButton, NText } from 'naive-ui'
 import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplate.vue'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { UserInfo } from '@/api/api-models'
+
+defineProps<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  biliInfo: any | undefined
+}>()

 const indexType = computed(() => {
-  if (userInfo) {
-    switch (userInfo.indexType) {
+  if (userInfo.value) {
+    switch (userInfo.value.indexType) {
      case IndexTypes.Default:
        return DefaultIndexTemplate

@@ -28,6 +27,9 @@ const indexType = computed(() => {
    return DefaultIndexTemplate
  }
 })
-const accountInfo = useAccount()
-const userInfo = await useUser()
+const userInfo = ref<UserInfo>()
+
+onMounted(async () => {
+  userInfo.value = await useUser()
+})
 </script>
--- a/src/views/view/indexTemplate/DefaultIndexTemplate.vue
+++ b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
@@ -1,11 +1,44 @@
 <script lang="ts" setup>
-import { UserInfo } from '@/api/api-models';
+import { UserInfo } from '@/api/api-models'
+import { NAvatar, NButton, NDivider, NSpace, NText } from 'naive-ui'
+
+const width = window.innerWidth

 const props = defineProps<{
-  userInfo: UserInfo
+  userInfo: UserInfo | undefined
+  biliInfo: any | undefined
 }>()
+function navigate(url: string) {
+  window.open(url, '_blank')
+}
 </script>

 <template>
-  1
-</template>
+  <NDivider />
+  <template v-if="userInfo?.biliId">
+    <NSpace justify="center" align="center" vertical>
+      <NAvatar :src="biliInfo?.face" :size="width > 750 ? 175 : 100" round bordered style="box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);" />
+      <NSpace align="baseline" justify="center">
+        <NText strong style="font-size: 32px"> {{ biliInfo?.name }} </NText>
+        <NText strong style="font-size: 20px" depth="3"> ({{ userInfo?.name }}) </NText>
+      </NSpace>
+      <NText strong depth="3" style="font-size: medium">
+        {{ userInfo?.biliId }}
+      </NText>
+      <NText strong depth="2" style="font-size: medium">
+        {{ biliInfo?.sign }}
+      </NText>
+    </NSpace>
+    <NDivider/>
+    <NSpace align="center" justify="center">
+      <NButton type="primary" @click="navigate('https://space.bilibili.com/' + userInfo?.biliId)"> 个人主页 </NButton>
+      <NButton type="primary" secondary @click="navigate('https://live.bilibili.com/' + userInfo?.biliRoomId)"> 直播间 </NButton>
+    </NSpace>
+  </template>
+  <template v-else>
+    <NSpace justify="center" align="center">
+      <NText strong style="font-size: 32px"> {{ userInfo?.name }} </NText>
+      未认证
+    </NSpace>
+  </template>
+</template>
--- a/src/views/view/songListTemplate/DefaultSongListTemplate.vue
+++ b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account';
+import { SongsInfo, UserInfo } from '@/api/api-models'
+import SongList from '@/components/SongList.vue'
+import { NDivider } from 'naive-ui';
+
+const accountInfo = useAccount()
+
+const props = defineProps<{
+  userInfo: UserInfo | undefined
+  songs: SongsInfo[] | undefined
+}>()
+</script>
+
+<template>
+  <SongList v-if="songs" :songs="songs ?? []" :is-self="accountInfo?.id.toString() == $route.params.id?.toString()"/>
+  <NDivider/>
+</template>
				`@@ -0,0 +1 @@`
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="50" width="50" viewBox="0 0 1024 1024"><path d="M256 0h512c140.8 0 256 115.2 256 256v512c0 140.8-115.2 256-256 256H256c-140.8 0-256-115.2-256-256V256c0-140.8 115.2-256 256-256z m256 486.4c-12.8-25.6-34.133333-42.666667-46.933333-64-21.333333-25.6-38.4-55.466667-55.466667-85.333333L384 273.066667c-8.533333-21.333333-17.066667-46.933333-34.133333-64-8.533333-8.533333-25.6-12.8-38.4-12.8-12.8 4.266667-21.333333 8.533333-29.866667 12.8-21.333333 21.333333-34.133333 42.666667-51.2 64-29.866667 51.2-46.933333 106.666667-55.466667 162.133333-12.8 72.533333-8.533333 149.333333 12.8 221.866667 17.066667 59.733333 46.933333 115.2 93.866667 157.866666 12.8 17.066667 42.666667 21.333333 59.733333 8.533334 25.6-12.8 42.666667-29.866667 59.733334-51.2 21.333333-25.6 38.4-51.2 51.2-81.066667 25.6-46.933333 51.2-93.866667 64-149.333333 8.533333-17.066667 4.266667-38.4-4.266667-55.466667z m337.066667-8.533333c-8.533333-25.6-21.333333-46.933333-34.133334-68.266667-21.333333-34.133333-46.933333-64-76.8-89.6-51.2-46.933333-110.933333-85.333333-174.933333-115.2-21.333333-8.533333-42.666667-17.066667-68.266667-21.333333-17.066667-4.266667-38.4-4.266667-55.466666 0-17.066667 0-34.133333 12.8-34.133334 29.866666v21.333334c4.266667 38.4 21.333333 72.533333 38.4 102.4s38.4 59.733333 59.733334 85.333333l25.6 25.6c42.666667 38.4 93.866667 68.266667 153.6 85.333333 25.6 4.266667 51.2 4.266667 72.533333 4.266667 25.6-4.266667 55.466667-4.266667 76.8-21.333333 8.533333-4.266667 12.8-12.8 12.8-21.333334 8.533333-4.266667 4.266667-17.066667 4.266667-17.066666z m-8.533334 81.066666c-25.6-12.8-51.2 4.266667-81.066666 0-34.133333 0-64-4.266667-98.133334-8.533333-25.6-4.266667-46.933333-8.533333-72.533333-8.533333-12.8 4.266667-25.6 4.266667-34.133333 17.066666-12.8 17.066667-21.333333 34.133333-25.6 55.466667-21.333333 55.466667-51.2 106.666667-81.066667 153.6-8.533333 12.8-17.066667 21.333333-21.333333 34.133333-4.266667 8.533333-8.533333 21.333333 0 34.133334 8.533333 12.8 25.6 12.8 38.4 12.8 55.466667 4.266667 115.2-8.533333 166.4-34.133334 51.2-25.6 102.4-59.733333 145.066666-98.133333 34.133333-34.133333 68.266667-72.533333 76.8-123.733333 0-8.533333 0-25.6-12.8-34.133334z"></path></svg>