style(webui): Oxc format 已有代码

webui/src/pages/AdminPage.vue

@@ -1,59 +1,59 @@
 <script setup lang="ts">
-import UserAction from "@/components/admin/UserAction.vue";
-import type {MenuOption} from "naive-ui";
-import {computed, onMounted, ref, useTemplateRef} from "vue";
-import {useRouter} from "vue-router";
-import {useNowUser} from "@/stores/now-user.js";
-import {useHead} from "@unhead/vue";
+import UserAction from '@/components/admin/UserAction.vue'
+import type { MenuOption } from 'naive-ui'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNowUser } from '@/stores/now-user.js'
+import { useHead } from '@unhead/vue'
 
 useHead({
-  titleTemplate: "%s | 管理面板 | NayHome"
+  titleTemplate: '%s | 管理面板 | NayHome',
 })
 
 const ROUTER = useRouter()
 const NOWUSER = useNowUser()
 
-const menu = useTemplateRef("menu")
+const menu = useTemplateRef('menu')
 
-const selectOption = ref("")
+const selectOption = ref('')
 const options = computed<MenuOption[]>(() => [
   {
-    label: "总览",
-    key: "",
+    label: '总览',
+    key: '',
   },
   {
-    label: "用户",
-    key: "user-basic",
+    label: '用户',
+    key: 'user-basic',
     children: [
       {
-        label: "资料",
-        key: "user-info"
+        label: '资料',
+        key: 'user-info',
       },
       {
-        label: "安全",
-        key: "user-security"
-      }
-    ]
+        label: '安全',
+        key: 'user-security',
+      },
+    ],
   },
   {
-    label: "内容",
-    key: "user-creation",
+    label: '内容',
+    key: 'user-creation',
     children: [
       {
-        label: "上传",
-        key: "user-upload"
+        label: '上传',
+        key: 'user-upload',
       },
       {
-        label: "剧本",
-        key: "user-script"
-      }
-    ]
+        label: '剧本',
+        key: 'user-script',
+      },
+    ],
   },
   {
-    label: "NyaHome 管理后台",
-    key: "nyahome",
+    label: 'NyaHome 管理后台',
+    key: 'nyahome',
     show: NOWUSER.is_admin,
-  }
+  },
 ])
 
 function handleMenuClick(key: string) {
@@ -61,12 +61,12 @@ function handleMenuClick(key: string) {
 }
 
 onMounted(() => {
-  const key = ROUTER.currentRoute.value.fullPath.replace("/admin/", "")
+  const key = ROUTER.currentRoute.value.fullPath.replace('/admin/', '')
   if (key) {
     selectOption.value = key
     menu.value?.showOption(key)
   } else {
-    selectOption.value = ""
+    selectOption.value = ''
   }
 })
 </script>
@@ -74,16 +74,16 @@ onMounted(() => {
 <template>
   <div id="user-page">
     <div id="user-page-sidebar">
-      <user-action/>
+      <user-action />
       <div class="nyahome-card">
-        <n-menu ref="menu" v-model:value="selectOption" :options @update:value="handleMenuClick"/>
+        <n-menu ref="menu" v-model:value="selectOption" :options @update:value="handleMenuClick" />
       </div>
     </div>
 
-    <router-view v-slot="{Component}">
+    <router-view v-slot="{ Component }">
       <div id="user-page-content">
         <keep-alive>
-          <component :is="Component"/>
+          <component :is="Component" />
         </keep-alive>
       </div>
     </router-view>

webui/src/pages/Chatroom1Page.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useRoute} from 'vue-router'
-import {onMounted, ref, useTemplateRef, watch} from 'vue'
+import {onMounted, reactive, ref, useTemplateRef, watch} from 'vue'
 import {api} from '@/tools/web.ts'
 import type {ReturnDto} from '@/types/response.ts'
 import type {Chatroom} from '@/types/chatroom.ts'
@@ -11,6 +11,14 @@ import ChatControlPanel from '@/components/chatroom/ChatControlPanel.vue'
 import {fetchEventSource} from '@microsoft/fetch-event-source'
 import type {AiiTokenInfo} from '@/types/aii.ts'
 import {SEE_YOU_TOMORROW} from '@/types/syt.ts'
+import {useHead} from '@unhead/vue'
+
+const pageHead = reactive({
+  title: '正在加载聊天室...',
+  titleTemplate: '%s | 聊天室 | NyaHome'
+})
+
+useHead(pageHead)
 
 const ROUTE = useRoute()
 const MESSAGE = useMessage()
@@ -45,6 +53,7 @@ function load() {
       }
     })
     .then((cr) => {
+      pageHead.title = cr.name
       crName.value = cr.name
       crDescription.value = cr.description
       crFeatureImage.value = cr.feature_image
@@ -235,8 +244,12 @@ function enableSidebar() {
 <template>
   <div class="page-container">
     <div class="main-column">
-      <chatroom-card :id="Number(ROUTE.params.id)" :name="crName" :description="crDescription"
-                     :feature_image="crFeatureImage"/>
+      <chatroom-card
+        :id="Number(ROUTE.params.id)"
+        :name="crName"
+        :description="crDescription"
+        :feature_image="crFeatureImage"
+      />
       <chat-table
         :content="crContent"
         :aii-thinking

webui/src/pages/ChatroomPage.vue

@@ -5,7 +5,12 @@ import {api} from '@/tools/web.ts'
 import type {ChatroomPublic} from '@/types/chatroom.ts'
 import type {ReturnDto} from '@/types/response.ts'
 import ChatroomCreatorModal from '@/components/chatroom/ChatroomCreatorModal.vue'
-import {useNowUser} from "@/stores/now-user.ts";
+import {useNowUser} from '@/stores/now-user.ts'
+import {useHead} from "@unhead/vue";
+
+useHead({
+  title: "聊天室列表",
+})
 
 const NOWUSER = useNowUser()
 
@@ -23,9 +28,13 @@ function load() {
     })
 }
 
-watch(() => NOWUSER.isLogin, () => {
-  load()
-}, {immediate: true})
+watch(
+  () => NOWUSER.isLogin,
+  () => {
+    load()
+  },
+  {immediate: true},
+)
 </script>
 
 <template>

webui/src/pages/WelcomePage.vue

@@ -1,19 +1,33 @@
 <script setup lang="ts">
 import UserAction from '@/components/admin/UserAction.vue'
+import { useHead } from '@unhead/vue'
+
+useHead({
+  title: '首页',
+})
 </script>
 
 <template>
-  <n-flex vertical style="padding: 6px 20px">
+  <div class="welcome-page">
     <n-flex>
       <n-card class="welcome-card" title="Welcome to Welcome!"></n-card>
       <div class="user-action-card">
-        <user-action/>
+        <user-action />
       </div>
     </n-flex>
-  </n-flex>
+  </div>
 </template>
 
 <style scoped>
+div.welcome-page {
+  min-width: min(1200px, 90%);
+  width: min(1200px, 90%);
+  min-height: 0;
+  padding: 6px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
 .welcome-card {
   flex: 1;
 }

webui/src/pages/admin/AdminNyahome.vue

@@ -1,73 +1,71 @@
 <script setup lang="ts">
-import ConfigCard from "@/components/admin/ConfigCard.vue";
-import {useHead} from "@unhead/vue";
-import {ref} from "vue";
-import {api} from "@/tools/web.ts";
-import InDev from "@/components/InDev.vue";
-import {useMessage} from "naive-ui";
-import type {ReturnDto} from "@/types/response.ts";
+import ConfigCard from '@/components/admin/ConfigCard.vue'
+import { useHead } from '@unhead/vue'
+import { ref } from 'vue'
+import { api } from '@/tools/web.ts'
+import InDev from '@/components/InDev.vue'
+import { useMessage } from 'naive-ui'
+import type { ReturnDto } from '@/types/response.ts'
 
 interface SiteConfig {
-  site_name: string;
-  site_url: string;
-  backend_url: string;
+  site_name: string
+  site_url: string
+  backend_url: string
 
-  jwt_secret_key: string;
+  jwt_secret_key: string
 
-  smtp_enable: boolean;
-  smtp_sender: string;
-  smtp_hostname: string;
-  smtp_port: number;
-  smtp_username: string;
-  smtp_password: string;
-  smtp_use_tls: boolean;
+  smtp_enable: boolean
+  smtp_sender: string
+  smtp_hostname: string
+  smtp_port: number
+  smtp_username: string
+  smtp_password: string
+  smtp_use_tls: boolean
 }
 
 const MESSAGE = useMessage()
 
 useHead({
-  title: "NyaHome 管理后台"
+  title: 'NyaHome 管理后台',
 })
 
-const siteConfig = ref<SiteConfig | null>(null);
+const siteConfig = ref<SiteConfig | null>(null)
 
 function getConfig() {
-  api.get("/admin/site_config/")
-      .then((res) => {
-        siteConfig.value = res.data as SiteConfig
-        MESSAGE.success("成功获取设置~")
-      })
+  api.get('/admin/site_config/').then((res) => {
+    siteConfig.value = res.data as SiteConfig
+    MESSAGE.success('成功获取设置~')
+  })
 }
 
 function saveConfig() {
-  api.post("/admin/site_config/", JSON.stringify(siteConfig.value))
-      .then((res) => {
-        siteConfig.value = res.data as SiteConfig
-        MESSAGE.success("保存并刷新设置成功~")
-      })
+  api.post('/admin/site_config/', JSON.stringify(siteConfig.value)).then((res) => {
+    siteConfig.value = res.data as SiteConfig
+    MESSAGE.success('保存并刷新设置成功~')
+  })
 }
 
-const testMailTo = ref("25565@qq.com")
+const testMailTo = ref('25565@qq.com')
 
 function sendTestMail() {
-  api.post("/admin/email-test/", JSON.stringify({to: testMailTo.value}))
-      .then(res => res.data as ReturnDto)
-      .then(data => data.success)
-      .then(success => {
-        if (success) {
-          MESSAGE.success("邮件发送成功，请稍等片刻，然后检查收件箱~")
-        } else {
-          MESSAGE.error("后端表示邮件发送失败，请检查日志输出。")
-        }
-      })
+  api
+    .post('/admin/email-test/', JSON.stringify({ to: testMailTo.value }))
+    .then((res) => res.data as ReturnDto)
+    .then((data) => data.success)
+    .then((success) => {
+      if (success) {
+        MESSAGE.success('邮件发送成功，请稍等片刻，然后检查收件箱~')
+      } else {
+        MESSAGE.error('后端表示邮件发送失败，请检查日志输出。')
+      }
+    })
 }
-
 </script>
 
 <template>
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">NyaHome 管理后台</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">NyaHome 管理后台</n-h3>
     </template>
     <template #header-extra>
       <n-flex>
@@ -80,19 +78,19 @@ function sendTestMail() {
   <n-tabs type="card" v-if="siteConfig !== null">
     <n-tab-pane name="user" tab="用户" display-directive="show">
       <config-card title="全部用户">
-        <in-dev/>
+        <in-dev />
       </config-card>
     </n-tab-pane>
 
     <n-tab-pane name="chatroom" tab="聊天室" display-directive="show">
       <config-card title="全部聊天室">
-        <in-dev/>
+        <in-dev />
       </config-card>
     </n-tab-pane>
 
     <n-tab-pane name="script" tab="剧本" display-directive="show">
       <config-card title="全部剧本">
-        <in-dev/>
+        <in-dev />
       </config-card>
     </n-tab-pane>
 
@@ -101,29 +99,30 @@ function sendTestMail() {
         <config-card title="基本信息">
           <n-form>
             <n-form-item label="站点名称">
-              <n-input v-model:value="siteConfig.site_name"/>
+              <n-input v-model:value="siteConfig.site_name" />
             </n-form-item>
             <n-form-item label="站点地址">
-              <n-input v-model:value="siteConfig.site_url"/>
+              <n-input v-model:value="siteConfig.site_url" />
             </n-form-item>
             <n-alert type="info" class="in-form-alert">
-              如果您需要将 NyaHome 的前后端分开部署，则需要在此设置后端地址。您需要自行处理跨域问题。
+              如果您需要将 NyaHome
+              的前后端分开部署，则需要在此设置后端地址。您需要自行处理跨域问题。
             </n-alert>
             <n-form-item label="FastAPI 后端地址">
-              <n-input v-model:value="siteConfig.backend_url"/>
+              <n-input v-model:value="siteConfig.backend_url" />
             </n-form-item>
           </n-form>
         </config-card>
 
         <config-card title="搜索引擎设置与 SEO">
-          <in-dev/>
+          <in-dev />
         </config-card>
       </n-flex>
     </n-tab-pane>
 
     <n-tab-pane name="permission" tab="权限设置" display-directive="show">
       <config-card title="用户权限">
-        <in-dev/>
+        <in-dev />
       </config-card>
     </n-tab-pane>
 
@@ -132,11 +131,11 @@ function sendTestMail() {
         <config-card title="JWT">
           <n-form>
             <n-alert type="info" class="in-form-alert">
-              JWT（Json Web Token）签名需要一个密钥，你可以手动提供一个，或者自行生成一个。<br/>
+              JWT（Json Web Token）签名需要一个密钥，你可以手动提供一个，或者自行生成一个。<br />
               修改此密钥会导致所有用户的登录状态丢失（你也会），请一次性设置一个足够安全的。
             </n-alert>
             <n-form-item label="JWT 密钥">
-              <n-input v-model:value="siteConfig.jwt_secret_key"/>
+              <n-input v-model:value="siteConfig.jwt_secret_key" />
             </n-form-item>
           </n-form>
         </config-card>
@@ -148,37 +147,38 @@ function sendTestMail() {
         <config-card title="邮件 SMTP">
           <n-form>
             <n-alert type="info" class="in-form-alert">
-              NayHome 无法自己发送邮件，需要配置 SMTP 服务。<br/>
+              NayHome 无法自己发送邮件，需要配置 SMTP 服务。<br />
               或者你也可以关闭邮件功能，当然芒果还是建议你配置一下的。
             </n-alert>
             <n-form-item label="启用邮件功能（SMTP）">
-              <n-switch v-model:value="siteConfig.smtp_enable"/>
+              <n-switch v-model:value="siteConfig.smtp_enable" />
             </n-form-item>
             <n-form-item label="发件人邮件地址">
-              <n-input v-model:value="siteConfig.smtp_sender"/>
+              <n-input v-model:value="siteConfig.smtp_sender" />
             </n-form-item>
             <n-form-item label="SMTP 主机名">
-              <n-input v-model:value="siteConfig.smtp_hostname"/>
+              <n-input v-model:value="siteConfig.smtp_hostname" />
             </n-form-item>
             <n-form-item label="SMTP 端口">
-              <n-input-number v-model:value="siteConfig.smtp_port"/>
+              <n-input-number v-model:value="siteConfig.smtp_port" />
             </n-form-item>
             <n-form-item label="SMTP 用户名">
-              <n-input v-model:value="siteConfig.smtp_username"/>
+              <n-input v-model:value="siteConfig.smtp_username" />
             </n-form-item>
             <n-form-item label="SMTP 密码（一般应当是一个独立的应用程序密码）">
-              <n-input v-model:value="siteConfig.smtp_password"/>
+              <n-input v-model:value="siteConfig.smtp_password" />
             </n-form-item>
             <n-form-item label="使用 TLS/SSL 加密">
-              <n-switch v-model:value="siteConfig.smtp_use_tls"/>
+              <n-switch v-model:value="siteConfig.smtp_use_tls" />
             </n-form-item>
           </n-form>
           <template #action>
             <n-flex vertical>
-              <n-text>你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
+              <n-text
+                >你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
                 设置工作，这会发送一封测试邮件。
               </n-text>
-              <n-input v-model:value="testMailTo"/>
+              <n-input v-model:value="testMailTo" />
               <n-button secondary type="warning" @click="sendTestMail()">发送测试邮件</n-button>
             </n-flex>
           </template>
@@ -187,7 +187,7 @@ function sendTestMail() {
     </n-tab-pane>
   </n-tabs>
 
-  <n-empty size="large" v-else description="请尝试手动获取设置..."/>
+  <n-empty size="large" v-else description="请尝试手动获取设置..." />
 </template>
 
 <style scoped>

webui/src/pages/admin/AdminOverview.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {useNowUser} from "@/stores/now-user.js";
-import {computed} from "vue";
-import {useHead} from "@unhead/vue";
+import { useNowUser } from '@/stores/now-user.js'
+import { computed } from 'vue'
+import { useHead } from '@unhead/vue'
 
 useHead({
-  title: "总览"
+  title: '总览',
 })
 
 const NOWUSER = useNowUser()

webui/src/pages/admin/AdminUserScript.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import InDev from "@/components/InDev.vue";
-import {useHead} from "@unhead/vue";
+import InDev from '@/components/InDev.vue'
+import { useHead } from '@unhead/vue'
 
 useHead({
-  title: "剧本"
+  title: '剧本',
 })
 </script>
 
 <template>
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">个人剧本库</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">个人剧本库</n-h3>
     </template>
 
-    <in-dev/>
+    <in-dev />
   </n-card>
 </template>
 

webui/src/pages/admin/AdminUserSecurity.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import {useNowUser} from "@/stores/now-user.js";
-import UserPasswordModal from "@/components/admin/UserPasswordModal.vue";
-import {h, ref} from "vue";
-import {api} from "@/tools/web.ts";
-import {type DataTableColumn, NTag, NText} from "naive-ui";
-import InDev from "@/components/InDev.vue";
-import {useHead} from "@unhead/vue";
+import { useNowUser } from '@/stores/now-user.js'
+import UserPasswordModal from '@/components/admin/UserPasswordModal.vue'
+import { h, ref } from 'vue'
+import { api } from '@/tools/web.ts'
+import { type DataTableColumn, NTag, NText } from 'naive-ui'
+import InDev from '@/components/InDev.vue'
+import { useHead } from '@unhead/vue'
 
 useHead({
-  title: "用户安全"
+  title: '用户安全',
 })
 
 const NOWUSER = useNowUser()
@@ -16,8 +16,8 @@ const NOWUSER = useNowUser()
 const showPasswordModal = ref(false)
 
 interface SecureChange {
-  created_at: number;
-  type: "login" | "change_password" | "change_email" | "change_phone"
+  created_at: number
+  type: 'login' | 'change_password' | 'change_email' | 'change_phone'
   old: string | null
   new: string | null
 }
@@ -26,56 +26,53 @@ const secureChanges = ref<SecureChange[]>([])
 
 const columns = [
   {
-    title: "记录时间",
-    key: "created_at",
+    title: '记录时间',
+    key: 'created_at',
     render(row) {
       const date = new Date(row.created_at * 1000)
-      return h(
-        NText,
-        {},
-        {default: () => date.toLocaleString()}
-      )
-    }
+      return h(NText, {}, { default: () => date.toLocaleString() })
+    },
   },
   {
-    title: "类型",
-    key: "type",
+    title: '类型',
+    key: 'type',
     render: (row) => {
       return h(
         NTag,
         {
-          type: "info"
+          type: 'info',
         },
-        {default: () => row.type}
+        { default: () => row.type },
       )
-    }
+    },
   },
   {
-    title: "事件之前",
-    key: "old",
+    title: '事件之前',
+    key: 'old',
   },
   {
-    title: "事件之后",
-    key: "new",
-  }
+    title: '事件之后',
+    key: 'new',
+  },
 ] as DataTableColumn<SecureChange>[]
 
 function loadSecureChanges() {
-  api.get("/admin/me/secure_changes/")
-    .then(res => secureChanges.value = res.data as SecureChange[])
+  api
+    .get('/admin/me/secure_changes/')
+    .then((res) => (secureChanges.value = res.data as SecureChange[]))
 }
 </script>
 
 <template>
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">密码</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">密码</n-h3>
     </template>
 
     <n-flex vertical>
       <n-alert type="warning" v-if="NOWUSER.id === 1">
         您正在使用 NyaHome 初始化时创建的管理员账号，此账号的默认密码为 admin。
-        <strong>您应该及时修改默认密码。</strong><br/>
+        <strong>您应该及时修改默认密码。</strong><br />
         如果您已修改密码，请忽略。
       </n-alert>
       <n-flex>
@@ -84,27 +81,27 @@ function loadSecureChanges() {
       </n-flex>
     </n-flex>
 
-    <user-password-modal v-model:show-modal="showPasswordModal"/>
+    <user-password-modal v-model:show-modal="showPasswordModal" />
   </n-card>
 
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">其他登录方式</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">其他登录方式</n-h3>
     </template>
 
     <n-flex vertical>
       <n-alert type="info">
-        在这里连接第三方账户之后，可以使用它们进行登录。<br/>
+        在这里连接第三方账户之后，可以使用它们进行登录。<br />
         <strong>必须先在这里连接后才能使用第三方账户进行登录。</strong>
       </n-alert>
 
-      <in-dev/>
+      <in-dev />
     </n-flex>
   </n-card>
 
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">两步验证</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">两步验证</n-h3>
     </template>
 
     <n-flex vertical>
@@ -112,21 +109,19 @@ function loadSecureChanges() {
         启用两步验证可以更好地保护您的账户，这会强制此账号在登录时进行额外验证。
       </n-alert>
 
-      <in-dev/>
+      <in-dev />
     </n-flex>
   </n-card>
 
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">安全事件记录</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">安全事件记录</n-h3>
     </template>
     <n-flex vertical>
-      <n-data-table :columns :data="secureChanges"/>
+      <n-data-table :columns :data="secureChanges" />
       <n-button secondary type="warning" @click="loadSecureChanges()">查询（更新）</n-button>
     </n-flex>
   </n-card>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

webui/src/pages/admin/AdminUserUpload.vue

@@ -1,62 +1,66 @@
 <script setup lang="ts">
-import {ref, watch} from "vue";
-import UploadFileModal from "@/components/file/UploadFileModal.vue";
-import {api} from "@/tools/web.js";
-import type {UploadFileDto} from "@/types/user.js";
-import {useNowUser} from "@/stores/now-user.js";
-import {uploadFilesCom} from "@/components/file/upload-files.js";
-import {useHead} from "@unhead/vue";
+import { ref, watch } from 'vue'
+import UploadFileModal from '@/components/file/UploadFileModal.vue'
+import { api } from '@/tools/web.js'
+import type { UploadFileDto } from '@/types/user.js'
+import { useNowUser } from '@/stores/now-user.js'
+import { uploadFilesCom } from '@/components/file/upload-files.js'
+import { useHead } from '@unhead/vue'
 
 useHead({
-  title: "上传"
+  title: '上传',
 })
 
-const NOWUSER = useNowUser();
+const NOWUSER = useNowUser()
 
 const showUploadModal = ref(false)
 
 const files = ref<UploadFileDto[]>([])
 
 function load() {
-  api.get("/file/")
-    .then(res => {
-      files.value = res.data as UploadFileDto[]
-    })
+  api.get('/file/').then((res) => {
+    files.value = res.data as UploadFileDto[]
+  })
 }
 
-watch(() => NOWUSER.isLogin, () => {
-  load()
-}, {immediate: true})
+watch(
+  () => NOWUSER.isLogin,
+  () => {
+    load()
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">上传文件</n-h3>
+      <n-h3 prefix="bar" style="margin: 0">上传文件</n-h3>
     </template>
 
     <n-flex vertical>
-      <n-alert type="info">
-        接受的文件类型：
-      </n-alert>
+      <n-alert type="info"> 接受的文件类型： </n-alert>
       <n-button @click="showUploadModal = true">打开上传向导</n-button>
 
-      <upload-file-modal v-model:show-modal="showUploadModal" :after-leave="() => {load()}"/>
+      <upload-file-modal
+        v-model:show-modal="showUploadModal"
+        :after-leave="
+          () => {
+            load()
+          }
+        "
+      />
     </n-flex>
   </n-card>
 
   <n-card>
     <template #header>
-      <n-h3 prefix="bar" style="margin: 0;">个人文件库</n-h3>
-    </template>
-    <template #header-extra>
-      您已经上传的文件都在这里，可以选择性地删除以及重新下载。
+      <n-h3 prefix="bar" style="margin: 0">个人文件库</n-h3>
     </template>
+    <template #header-extra> 您已经上传的文件都在这里，可以选择性地删除以及重新下载。 </template>
 
-    <component :is="uploadFilesCom(files)"/>
+    <component :is="uploadFilesCom(files)" />
   </n-card>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>