update font

src/App.vue

@@ -2,11 +2,13 @@
   <NMessageProvider>
     <NNotificationProvider>
       <NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
+        <NElement>
           <ViewerLayout v-if="layout == 'viewer'" />
           <ManageLayout v-else-if="layout == 'manage'" />
           <template v-else>
             <RouterView />
           </template>
+        </NElement>
       </NConfigProvider>
     </NNotificationProvider>
   </NMessageProvider>
@@ -16,7 +18,7 @@
 import ViewerLayout from '@/views/ViewerLayout.vue'
 import ManageLayout from '@/views/ManageLayout.vue'
 import { useRoute } from 'vue-router'
-import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN, dateZhCN, useOsTheme, darkTheme } from 'naive-ui'
+import { NConfigProvider, NMessageProvider, NNotificationProvider, zhCN, dateZhCN, useOsTheme, darkTheme, NElement } from 'naive-ui'
 import { computed } from 'vue'
 import { useStorage } from '@vueuse/core'
 import { ThemeType } from './api/api-models'
@@ -32,19 +34,21 @@ const layout = computed(() => {
   }
 })
 
-const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 const theme = computed(() => {
   if (themeType.value == ThemeType.Auto) {
-    var osThemeRef = useOsTheme(); //获取当前系统主题
+    var osThemeRef = useOsTheme() //获取当前系统主题
-    return osThemeRef.value === "dark" ? darkTheme : null;
+    return osThemeRef.value === 'dark' ? darkTheme : null
   } else {
-    return themeType.value == ThemeType.Dark ? darkTheme : null;
+    return themeType.value == ThemeType.Dark ? darkTheme : null
   }
-});
+})
 
 const themeOverrides = {
   common: {
     //primaryColor: '#9ddddc',
+    fontFamily:
+      '"Noto Sans SC",-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"!important',
   },
   // ...
 }

src/views/ManageLayout.vue

@@ -1,26 +1,23 @@
 <script setup lang="ts">
 import {
-  NAlert,
-  NAvatar,
-  NBackTop,
   NButton,
-  NCard,
-  NCountdown,
   NDivider,
   NIcon,
   NLayout,
   NLayoutContent,
-  NLayoutFooter,
   NLayoutHeader,
-  NLayoutSider,
-  NMenu,
   NPageHeader,
   NSpace,
   NSpin,
   NSwitch,
   NText,
-  NTime,
+  NScrollbar,
   useMessage,
+  NMenu,
+  NLayoutSider,
+  NAlert,
+  NBackTop,
+  NCountdown,
 } from 'naive-ui'
 import { h, onMounted, ref } from 'vue'
 import { BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, AnalyticsSharp } from '@vicons/ionicons5'
@@ -92,7 +89,7 @@ const menuOptions = [
       ),
     key: 'manage-schedule',
     icon: renderIcon(CalendarClock24Filled),
-    disabled: accountInfo.value?.isEmailVerified == false || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.Schedule) ?? -1) == -1,
+    disabled: accountInfo.value?.isEmailVerified == false,
   },
   {
     label: () =>
@@ -107,7 +104,7 @@ const menuOptions = [
       ),
     key: 'manage-songList',
     icon: renderIcon(MusicalNote),
-    disabled: accountInfo.value?.isEmailVerified == false || (accountInfo.value?.settings?.enableFunctions.indexOf(FunctionTypes.SongList) ?? -1) == -1,
+    disabled: accountInfo.value?.isEmailVerified == false,
   },
   {
     label: () =>
@@ -204,7 +201,8 @@ onMounted(() => {
         </template>
       </NPageHeader>
     </NLayoutHeader>
-    <NLayout has-sider style="height: calc(100vh - 50px)">
+    <NScrollbar x-scrollable>
+      <NLayout has-sider>
         <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%">
@@ -229,8 +227,9 @@ onMounted(() => {
             </NText>
           </NSpace>
         </NLayoutSider>
-      <NLayout style="height: 100%">
+        <NScrollbar style="height: calc(100vh - 50px);" >
-        <div style="box-sizing: border-box; padding: 20px">
+          <NLayout >
+            <div style="box-sizing: border-box; padding: 20px; min-width: 300px">
               <RouterView v-slot="{ Component }" v-if="accountInfo?.isEmailVerified">
                 <KeepAlive>
                   <Suspense>
@@ -250,7 +249,9 @@ onMounted(() => {
               <NBackTop />
             </div>
           </NLayout>
+        </NScrollbar>
       </NLayout>
+    </NScrollbar>
   </NLayout>
   <template v-else>
     <NLayoutContent style="display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 50px; height: 100%; box-sizing: border-box">

src/views/manage/DashboardView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { NAlert, NButton, NCard, NDivider, NInput, NPopconfirm, NSpace, NTag, NText, NThing, NTime } from 'naive-ui'
+import { NAlert, NButton, NCard, NDivider, NEllipsis, NInput, NPopconfirm, NSpace, NTag, NText, NThing, NTime } from 'naive-ui'
 import SettingsManageView from './SettingsManageView.vue'
 import { useLocalStorage } from '@vueuse/core'
 
@@ -15,7 +15,7 @@ function logout() {
 
 <template>
   <NSpace justify="center" align="center" vertical style="width: 100%">
-    <NCard embedded style="max-width: 90%; width: 800px">
+    <NCard embedded style="width: 100%;">
       <NSpace align="center" justify="center" vertical>
         <NText style="font-size: 3rem">
           {{ accountInfo?.name }}
@@ -29,25 +29,29 @@ function logout() {
 
       <NDivider />
       <NSpace vertical>
-        <NAlert>
+        <NCard size="small">
           邮箱:
-          <NTag v-if="accountInfo?.isEmailVerified" type="success"> 已认证 | {{ accountInfo?.bindEmail }} </NTag>
+          <NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
+            <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
+          </NEllipsis>
           <template v-else>
             <NTag type="error" size="small"> 未认证 </NTag>
           </template>
-        </NAlert>
+        </NCard>
-        <NAlert>
+        <NCard size="small">
           Bilibili 账户:
-          <NTag v-if="accountInfo?.isBiliVerified" type="success"> 已认证 | {{ accountInfo?.biliId }} </NTag>
+          <NEllipsis v-if="accountInfo?.isBiliVerified" style="max-width: 100%">
+            <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.biliId }} </NText>
+          </NEllipsis>
           <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>
         <NAlert title="Token" type="info">
           请注意保管, 这个东西可以完全操作你的账号
-          <NInput type="password" :value="accountInfo?.token" show-password-on="click" status="error"/>
+          <NInput type="password" :value="accountInfo?.token" show-password-on="click" status="error" />
         </NAlert>
       </NSpace>
       <NDivider />
@@ -64,6 +68,6 @@ function logout() {
   <div>
     <NDivider />
     <SettingsManageView />
-    <NDivider/>
+    <NDivider />
   </div>
 </template>