style(webui): Oxc format 已有代码

webui/src/App.vue

@@ -3,12 +3,12 @@ import PageHeader from '@/components/PageHeader.vue'
 import { dateZhCN, zhCN } from 'naive-ui'
 import { useNowUser } from '@/stores/now-user.ts'
 import { onMounted } from 'vue'
-import {useHead} from "@unhead/vue";
+import { useHead } from '@unhead/vue'
 
 const NOWUSER = useNowUser()
 
 useHead({
-  titleTemplate: "%s | NayHome"
+  titleTemplate: '%s | NayHome',
 })
 
 onMounted(async () => {
@@ -18,9 +18,9 @@ onMounted(async () => {
     try {
       await NOWUSER.loadUserInfo(Number(user_id), access_token)
     } catch {
-      localStorage.removeItem("user-id")
+      localStorage.removeItem('user-id')
       localStorage.removeItem('access-token')
-      console.log("已移除 localstorage 中存储的验证信息。")
+      console.log('已移除 localstorage 中存储的验证信息。')
     }
   }
 })

webui/src/components/InDev.vue

@@ -1,13 +1,9 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-
-</script>
 
 <template>
   <div class="in-dev">
     <n-text class="in-dev-title">功能开发中</n-text>
-    <n-text class="in-dev-content">
+    <n-text class="in-dev-content"> 已经被画在饼上辽，请耐心等待喵！ </n-text>
-      已经被画在饼上辽，请耐心等待喵！
-    </n-text>
   </div>
 </template>
 

webui/src/components/admin/ChangeEmailModal.vue

@@ -4,7 +4,7 @@ import {api} from '@/tools/web.ts'
 import type { ReturnDto } from '@/types/response.ts'
 import { useMessage } from 'naive-ui'
 import VerifyCodeModal from '@/components/admin/VerifyCodeModal.vue'
-import {useNowUser} from "@/stores/now-user.ts";
+import { useNowUser } from '@/stores/now-user.ts'
 
 const MESSAGE = useMessage()
 const NOWUSER = useNowUser()
@@ -12,8 +12,8 @@ const NOWUSER = useNowUser()
 const showModal = defineModel('showModal', { required: true })
 
 const showVerifyCodeModal = ref(false)
-const newEmail = ref("")
+const newEmail = ref('')
-const verifyCode = ref("")
+const verifyCode = ref('')
 
 function sendEmail() {
   api
@@ -33,10 +33,14 @@ function sendEmail() {
 }
 
 function verifyEmail() {
-  api.post('/admin/me/email-verify/', JSON.stringify({
+  api
+    .post(
+      '/admin/me/email-verify/',
+      JSON.stringify({
         to: newEmail.value,
-    verify_code: String(verifyCode.value).split(",").join(""),
+        verify_code: String(verifyCode.value).split(',').join(''),
-  }))
+      }),
+    )
     .then((res) => res.data as ReturnDto)
     .then((res) => {
       if (res.success) {
@@ -69,8 +73,11 @@ function verifyEmail() {
     </n-form>
   </n-modal>
 
-  <verify-code-modal v-model:show-modal="showVerifyCodeModal" v-model:verify-code="verifyCode"
+  <verify-code-modal
-                     :verify="verifyEmail"/>
+    v-model:show-modal="showVerifyCodeModal"
+    v-model:verify-code="verifyCode"
+    :verify="verifyEmail"
+  />
 </template>
 
 <style scoped></style>

webui/src/components/admin/ConfigCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  title: string;
+  title: string
 }>()
 </script>
 
@@ -16,6 +16,4 @@ defineProps<{
   </n-card>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

webui/src/components/admin/UserAction.vue

@@ -55,8 +55,8 @@ function login() {
 <template>
   <div>
     <div class="user-action nyahome-card" v-if="NOWUSER.isLogin" style="position: relative">
-      <img :src="NOWUSER.background_url" alt="User Background" class="user-action-background">
+      <img :src="NOWUSER.background_url" alt="User Background" class="user-action-background" />
-      <div class="card-content" style="margin-top: auto; margin-bottom: 20px;">
+      <div class="card-content" style="margin-top: auto; margin-bottom: 20px">
         <n-avatar :size="96" circle :src="NOWUSER.avatar_url" />
         <n-h2 style="margin: 0">
           {{ NOWUSER.display_name ? NOWUSER.display_name : NOWUSER.name }}

webui/src/components/admin/UserPasswordModal.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import { ref } from 'vue'
-import {api} from "@/tools/web.ts";
+import { api } from '@/tools/web.ts'
-import {useNowUser} from "@/stores/now-user.ts";
+import { useNowUser } from '@/stores/now-user.ts'
-import {useMessage} from "naive-ui";
+import { useMessage } from 'naive-ui'
-import {useRouter} from "vue-router";
+import { useRouter } from 'vue-router'
 
-const ROUTER = useRouter();
+const ROUTER = useRouter()
 const MESSAGE = useMessage()
 const NOWUSER = useNowUser()
 
-const showModal = defineModel("showModal", {required: true})
+const showModal = defineModel('showModal', { required: true })
 
 const changeForm = ref({
   old_password: '',
@@ -17,23 +17,24 @@ const changeForm = ref({
 })
 
 function change() {
-  api.post("/admin/me/password/", JSON.stringify(changeForm.value))
+  api
+    .post('/admin/me/password/', JSON.stringify(changeForm.value))
     .then(() => {
-      MESSAGE.success("密码修改成功，请重新登录。")
+      MESSAGE.success('密码修改成功，请重新登录。')
       NOWUSER.isLogin = false
-      localStorage.removeItem("user-id")
+      localStorage.removeItem('user-id')
-      localStorage.removeItem("access-token")
+      localStorage.removeItem('access-token')
-      ROUTER.push("/")
+      ROUTER.push('/')
     })
     .catch((err) => {
       MESSAGE.error(`密码修改失败：${err}`)
-      MESSAGE.warning("如果您忘记了原密码，请选择「忘记密码」。")
+      MESSAGE.warning('如果您忘记了原密码，请选择「忘记密码」。')
     })
 }
 </script>
 
 <template>
-  <n-modal style="width: 600px;" v-model:show="showModal" title="修改密码" preset="card">
+  <n-modal style="width: 600px" v-model:show="showModal" title="修改密码" preset="card">
     <n-form label-align="right" label-placement="left" label-width="auto" :model="changeForm">
       <n-form-item label="原密码" path="old_password">
         <n-input v-model:value="changeForm.old_password" />
@@ -44,13 +45,13 @@ function change() {
       <n-form-item label="确认修改">
         <n-flex>
           <n-button type="error" @click="change()">确认修改</n-button>
-          <n-tag type="warning" size="large">修改密码会注销所有已登录状态，您将需要重新登录。</n-tag>
+          <n-tag type="warning" size="large"
+            >修改密码会注销所有已登录状态，您将需要重新登录。</n-tag
+          >
         </n-flex>
       </n-form-item>
     </n-form>
   </n-modal>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

webui/src/components/chatroom/AiiModelAddModal.vue

@@ -124,12 +124,10 @@ function onConfirm() {
           <n-tag round type="info">修改已添加的提供商？请前往管理中心</n-tag>
           <n-button secondary type="success" size="small" round @click="loadProviders()"
             >刷新
-          </n-button
+          </n-button>
-          >
           <n-button secondary type="warning" size="small" round @click="showAddProviderModal = true"
             >添加
-          </n-button
+          </n-button>
-          >
         </n-flex>
       </n-form-item>
       <n-form-item label="模型名称" path="model_name">
@@ -145,13 +143,11 @@ function onConfirm() {
               v-bind:key="m"
               @click="addModelForm.model_name = m"
               >{{ m }}
-            </n-button
+            </n-button>
-            >
           </n-flex>
           <n-button secondary type="success" size="small" round @click="onGetRemoteModels()"
             >获取模型列表
-          </n-button
+          </n-button>
-          >
         </n-flex>
       </n-form-item>
       <n-form-item label="最大上下文" path="max_context_length">

webui/src/components/chatroom/ChatroomCard.vue

@@ -10,11 +10,24 @@ defineProps<{
 
 <template>
   <div class="chatroom-card">
-    <n-image v-if="infoMode" class="image" object-fit="cover" preview-disabled :src="feature_image"
+    <n-image
+      v-if="infoMode"
+      class="image"
+      object-fit="cover"
+      preview-disabled
+      :src="feature_image"
       width="140"
-             height="100"/>
+      height="100"
-    <n-image v-else class="image" object-fit="cover" preview-disabled :src="feature_image"
+    />
-             width="84" height="60"/>
+    <n-image
+      v-else
+      class="image"
+      object-fit="cover"
+      preview-disabled
+      :src="feature_image"
+      width="84"
+      height="60"
+    />
     <div class="card-body">
       <n-text class="name">{{ name }}</n-text>
       <n-ellipsis :line-clamp="2" style="max-width: 100%" class="description">

webui/src/components/chatroom/ChatroomCreatorModal.vue

@@ -4,9 +4,9 @@ import type {ChatroomPublic} from '@/types/chatroom.js'
 import { api } from '@/tools/web.js'
 import type { ReturnDto } from '@/types/response.js'
 import { useMessage } from 'naive-ui'
-import UploadFileModal from "@/components/file/UploadFileModal.vue";
+import UploadFileModal from '@/components/file/UploadFileModal.vue'
-import SelectFileModal from "@/components/file/SelectFileModal.vue";
+import SelectFileModal from '@/components/file/SelectFileModal.vue'
-import type {UploadFileDto} from "@/types/user.js";
+import type { UploadFileDto } from '@/types/user.js'
 
 const MESSAGE = useMessage()
 
@@ -34,7 +34,7 @@ watch(image_url, () => {
 })
 
 async function loadFiles() {
-  return await api.get("/file/").then(res => files.value = res.data as UploadFileDto[])
+  return await api.get('/file/').then((res) => (files.value = res.data as UploadFileDto[]))
 }
 
 function onSubmit() {
@@ -56,8 +56,13 @@ function onSubmit() {
 </script>
 
 <template>
-  <n-modal v-model:show="showModal" preset="card" title="创建聊天室" content-scrollable
+  <n-modal
-           style="width: 800px;">
+    v-model:show="showModal"
+    preset="card"
+    title="创建聊天室"
+    content-scrollable
+    style="width: 800px"
+  >
     <n-form
       :model="createChatroomForm"
       label-placement="left"
@@ -71,11 +76,13 @@ function onSubmit() {
         <n-input type="textarea" v-model:value="createChatroomForm.description" />
       </n-form-item>
       <n-form-item path="feature_image" label="特色图像">
-        <n-flex style="width: 100%;" :wrap="false">
+        <n-flex style="width: 100%" :wrap="false">
-          <n-input v-model:value="createChatroomForm.feature_image"
+          <n-input
-                   placeholder="留空以使用默认图像"/>
+            v-model:value="createChatroomForm.feature_image"
-          <n-button secondary type="info" @click="showSelectModal = true;">选择</n-button>
+            placeholder="留空以使用默认图像"
-          <n-button secondary type="warning" @click="showUploadModal = true;">上传</n-button>
+          />
+          <n-button secondary type="info" @click="showSelectModal = true">选择</n-button>
+          <n-button secondary type="warning" @click="showUploadModal = true">上传</n-button>
         </n-flex>
       </n-form-item>
       <n-form-item label="确认？">
@@ -83,8 +90,13 @@ function onSubmit() {
       </n-form-item>
     </n-form>
 
-    <select-file-modal :max="1" :extensions="['png', 'jpeg', 'jpg']" :load-files="loadFiles"
+    <select-file-modal
-                       v-model:show-modal="showSelectModal" v-model:select-files="selectFiles"/>
+      :max="1"
+      :extensions="['png', 'jpeg', 'jpg']"
+      :load-files="loadFiles"
+      v-model:show-modal="showSelectModal"
+      v-model:select-files="selectFiles"
+    />
     <upload-file-modal v-model:show-modal="showUploadModal" :after-leave="loadFiles" />
   </n-modal>
 </template>

webui/src/components/chatroom/ScriptDrawer.vue

@@ -48,8 +48,7 @@ watch(
   () => {
     try {
       scriptForm.value = JSON.parse(script) as ChatScript
-    } catch {
+    } catch {}
-    }
   },
   { immediate: true },
 )

webui/src/components/file/FileModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type {UploadFileDto} from "@/types/user.js";
+import type { UploadFileDto } from '@/types/user.js'
-import {useNowUser} from "@/stores/now-user.js";
+import { useNowUser } from '@/stores/now-user.js'
-import {computed} from "vue";
+import { computed } from 'vue'
 
 const NOWUSER = useNowUser()
 
@@ -11,17 +11,18 @@ const {file} = defineProps<{
 
 const is_you = computed(() => NOWUSER.id === file.uploader_id)
 
-const showModal = defineModel("showModal", {required: true})
+const showModal = defineModel('showModal', { required: true })
 </script>
 
 <template>
-  <n-modal v-model:show="showModal" preset="card" style="width: 1000px;" title="文件信息">
+  <n-modal v-model:show="showModal" preset="card" style="width: 1000px" title="文件信息">
     <div class="card-content">
       <n-image :width="500" :height="500" object-fit="contain" :src="file.download_url" />
       <div class="side">
         <n-h3>{{ file.original_name }}</n-h3>
         <n-p>保存文件名：{{ file.safe_name }}</n-p>
-        <n-p>上传用户ID：{{ file.uploader_id }}
+        <n-p
+          >上传用户ID：{{ file.uploader_id }}
           <n-tag v-if="is_you" type="primary">你</n-tag>
         </n-p>
 

webui/src/components/file/FileThumbnail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type {UploadFileDto} from "@/types/user.js";
+import type { UploadFileDto } from '@/types/user.js'
-import {computed, onMounted, ref, useTemplateRef} from "vue";
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import FileModal from "@/components/file/FileModal.vue";
+import FileModal from '@/components/file/FileModal.vue'
 
 const { file, size, enableSelect, onSelect, onRemove } = defineProps<{
   file: UploadFileDto
@@ -11,12 +11,12 @@ const {file, size, enableSelect, onSelect, onRemove} = defineProps<{
   onRemove?: (file: UploadFileDto) => boolean
 }>()
 
-const th = useTemplateRef("th")
+const th = useTemplateRef('th')
 
 const showModal = ref(false)
 const selected = ref(false)
 
-const ALLOWED_EXTENSIONS = ["jpg", "jpeg", "png"]
+const ALLOWED_EXTENSIONS = ['jpg', 'jpeg', 'png']
 
 onMounted(() => {
   if (ALLOWED_EXTENSIONS.includes(file.safe_name.split('.').at(-1)!.toLowerCase())) {
@@ -32,13 +32,13 @@ function onClick() {
   if (selected.value && onRemove) {
     if (onRemove(file)) {
       selected.value = false
-      th.value?.classList.remove("selected")
+      th.value?.classList.remove('selected')
       console.log(`选中文件：${file.original_name}`)
     }
   } else if (!selected.value && onSelect) {
     if (onSelect(file)) {
       selected.value = true
-      th.value?.classList.add("selected")
+      th.value?.classList.add('selected')
       console.log(`取消文件：${file.original_name}`)
     }
   }
@@ -64,7 +64,9 @@ div.file-thumbnail {
   background-repeat: no-repeat;
   background-size: cover;
 
-  transition: border-color 0.3s, box-shadow 0.3s;
+  transition:
+    border-color 0.3s,
+    box-shadow 0.3s;
 }
 
 div.selected {

webui/src/components/file/SelectFileModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {selectFilesCom} from "@/components/file/upload-files.js";
+import { selectFilesCom } from '@/components/file/upload-files.js'
-import {computed, ref, watch} from "vue";
+import { computed, ref, watch } from 'vue'
-import type {UploadFileDto} from "@/types/user.js";
+import type { UploadFileDto } from '@/types/user.js'
-import {useMessage} from "naive-ui";
+import { useMessage } from 'naive-ui'
 
 const MESSAGE = useMessage()
 
@@ -12,18 +12,18 @@ const {max, extensions, loadFiles} = defineProps<{
   loadFiles: () => Promise<UploadFileDto[]>
 }>()
 
-const showModal = defineModel("showModal", {required: true})
+const showModal = defineModel('showModal', { required: true })
 
 const files = ref<UploadFileDto[]>([])
 const tempFiles = ref<UploadFileDto[]>([])
-const selectFiles = defineModel<UploadFileDto[]>("selectFiles", {required: true})
+const selectFiles = defineModel<UploadFileDto[]>('selectFiles', { required: true })
 
 function selectFile(file: UploadFileDto) {
   if (tempFiles.value.length < max) {
     tempFiles.value.push(file)
     return true
   } else {
-    MESSAGE.warning("可选择文件数量达到上限……")
+    MESSAGE.warning('可选择文件数量达到上限……')
     return false
   }
 }
@@ -41,27 +41,38 @@ watch(showModal, async () => {
   files.value = await loadFiles()
 })
 
-const tip_1 = computed(() => max > 1 ? `请选择至少 ${max} 个文件。` : "请选择一个文件。")
+const tip_1 = computed(() => (max > 1 ? `请选择至少 ${max} 个文件。` : '请选择一个文件。'))
 const tip_2 = computed(() => `允许的文件类型：${extensions.join('、')}。`)
 </script>
 
 <template>
-  <n-modal preset="card" style="max-width: 600px; max-height: 600px;" title="选择文件"
+  <n-modal
+    preset="card"
+    style="max-width: 600px; max-height: 600px"
+    title="选择文件"
     content-scrollable
-           v-model:show="showModal">
+    v-model:show="showModal"
+  >
     <n-flex vertical>
       <n-alert type="info">
         {{ tip_1 }}
         {{ tip_2 }}
       </n-alert>
       <component :is="selectFilesCom(files, selectFile, removeFile)" />
-      <n-button type="primary" secondary @click="selectFiles = tempFiles; showModal = false;">
+      <n-button
+        type="primary"
+        secondary
+        @click="
+          () => {
+            selectFiles = tempFiles
+            showModal = false
+          }
+        "
+      >
         确认选择
       </n-button>
     </n-flex>
   </n-modal>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

webui/src/components/file/UploadFileModal.vue

@@ -1,37 +1,37 @@
 <script setup lang="ts">
-import {type UploadCustomRequestOptions, type UploadFileInfo} from "naive-ui";
+import { type UploadCustomRequestOptions, type UploadFileInfo } from 'naive-ui'
-import {api} from "@/tools/web.js";
+import { api } from '@/tools/web.js'
-import type {UploadFileDto} from "@/types/user.js";
+import type { UploadFileDto } from '@/types/user.js'
-import {shallowRef, useTemplateRef} from "vue";
+import { shallowRef, useTemplateRef } from 'vue'
 
 defineProps<{
-  afterLeave?: () => void;
+  afterLeave?: () => void
 }>()
 
-const showModal = defineModel("showModal", {required: true})
+const showModal = defineModel('showModal', { required: true })
 
-const upload = useTemplateRef("upload")
+const upload = useTemplateRef('upload')
 
 const fileList = shallowRef<UploadFileInfo[]>([])
 
 async function handle_upload({ file, onFinish, onError, onProgress }: UploadCustomRequestOptions) {
-  const formData = new FormData();
+  const formData = new FormData()
   console.log(file.file)
-  formData.append("file", file.file!)
+  formData.append('file', file.file!)
   console.log(formData)
 
   try {
-    const data = await api.post("/file/upload/", formData, {
+    const data = await api
+      .post('/file/upload/', formData, {
         headers: {
-        'Content-Type': undefined  // 取消全局默认的 application/json 很重要！！！！！！！！
+          'Content-Type': undefined, // 取消全局默认的 application/json 很重要！！！！！！！！
         },
         onUploadProgress: (progressEvent) => {
-        const percent = Math.ceil(
+          const percent = Math.ceil((progressEvent.loaded / progressEvent.total!) * 100)
-          (progressEvent.loaded / progressEvent.total!) * 100
-        )
           onProgress({ percent }) // 更新进度条
-      }
+        },
-    }).then((res) => res.data as UploadFileDto)
+      })
+      .then((res) => res.data as UploadFileDto)
 
     file.url = data.download_url
     onFinish()
@@ -47,12 +47,23 @@ function onUpload() {
 </script>
 
 <template>
-  <n-modal style="width: 600px;" preset="card" v-model:show="showModal"
+  <n-modal
-           title="上传文件" content-scrollable
+    style="width: 600px"
-           @after-leave="afterLeave">
+    preset="card"
+    v-model:show="showModal"
+    title="上传文件"
+    content-scrollable
+    @after-leave="afterLeave"
+  >
     <n-flex vertical>
-      <n-upload multiple ref="upload" :default-upload="false" list-type="image"
+      <n-upload
-                :custom-request="handle_upload" v-model:file-list="fileList">
+        multiple
+        ref="upload"
+        :default-upload="false"
+        list-type="image"
+        :custom-request="handle_upload"
+        v-model:file-list="fileList"
+      >
         <n-upload-dragger>
           <n-p>拖拽文件到此区域可以快速上传。</n-p>
         </n-upload-dragger>

webui/src/components/file/upload-files.tsx

@@ -1,30 +1,41 @@
-import type {UploadFileDto} from "@/types/user.ts";
+import type { UploadFileDto } from '@/types/user.ts'
-import FileThumbnail from "@/components/file/FileThumbnail.vue";
+import FileThumbnail from '@/components/file/FileThumbnail.vue'
-import {NEmpty, NFlex} from "naive-ui";
+import { NEmpty, NFlex } from 'naive-ui'
 
 export function uploadFilesCom(files: UploadFileDto[]) {
   if (files.length === 0) {
     return <NEmpty description="你还没有上传任何文件。" size="large" />
   }
-  return <NFlex>
+  return (
+    <NFlex>
       {files.map((file: UploadFileDto) => {
-      return <FileThumbnail size={120} file={file}></FileThumbnail>;
+        return <FileThumbnail size={120} file={file}></FileThumbnail>
       })}
     </NFlex>
+  )
 }
 
 export function selectFilesCom(
   files: UploadFileDto[],
   onSelect: (file: UploadFileDto) => boolean,
-  onRemove: (file: UploadFileDto) => boolean
+  onRemove: (file: UploadFileDto) => boolean,
 ) {
   if (files.length === 0) {
     return <NEmpty description="你还没有上传任何文件。" size="large" />
   }
-  return <NFlex>
+  return (
+    <NFlex>
       {files.map((file: UploadFileDto) => {
-      return <FileThumbnail size={82} file={file} enableSelect onSelect={onSelect}
+        return (
-                            onRemove={onRemove}></FileThumbnail>;
+          <FileThumbnail
+            size={82}
+            file={file}
+            enableSelect
+            onSelect={onSelect}
+            onRemove={onRemove}
+          ></FileThumbnail>
+        )
       })}
     </NFlex>
+  )
 }

webui/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import {createHead} from "@unhead/vue/client";
+import { createHead } from '@unhead/vue/client'
 
 import '@/assets/main.scss'
 import '@/assets/beautiful.scss'

webui/src/pages/AdminPage.vue

@@ -1,59 +1,59 @@
 <script setup lang="ts">
-import UserAction from "@/components/admin/UserAction.vue";
+import UserAction from '@/components/admin/UserAction.vue'
-import type {MenuOption} from "naive-ui";
+import type { MenuOption } from 'naive-ui'
-import {computed, onMounted, ref, useTemplateRef} from "vue";
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import {useRouter} from "vue-router";
+import { useRouter } from 'vue-router'
-import {useNowUser} from "@/stores/now-user.js";
+import { useNowUser } from '@/stores/now-user.js'
-import {useHead} from "@unhead/vue";
+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: "总览",
+    label: '总览',
-    key: "",
+    key: '',
   },
   {
-    label: "用户",
+    label: '用户',
-    key: "user-basic",
+    key: 'user-basic',
     children: [
       {
-        label: "资料",
+        label: '资料',
-        key: "user-info"
+        key: 'user-info',
       },
       {
-        label: "安全",
+        label: '安全',
-        key: "user-security"
+        key: 'user-security',
-      }
+      },
-    ]
+    ],
   },
   {
-    label: "内容",
+    label: '内容',
-    key: "user-creation",
+    key: 'user-creation',
     children: [
       {
-        label: "上传",
+        label: '上传',
-        key: "user-upload"
+        key: 'user-upload',
       },
       {
-        label: "剧本",
+        label: '剧本',
-        key: "user-script"
+        key: 'user-script',
-      }
+      },
-    ]
+    ],
   },
   {
-    label: "NyaHome 管理后台",
+    label: 'NyaHome 管理后台',
-    key: "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>

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"
+      <chatroom-card
-                     :feature_image="crFeatureImage"/>
+        :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, () => {
+watch(
+  () => NOWUSER.isLogin,
+  () => {
     load()
-}, {immediate: true})
+  },
+  {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 />
       </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 ConfigCard from '@/components/admin/ConfigCard.vue'
-import {useHead} from "@unhead/vue";
+import { useHead } from '@unhead/vue'
-import {ref} from "vue";
+import { ref } from 'vue'
-import {api} from "@/tools/web.ts";
+import { api } from '@/tools/web.ts'
-import InDev from "@/components/InDev.vue";
+import InDev from '@/components/InDev.vue'
-import {useMessage} from "naive-ui";
+import { useMessage } from 'naive-ui'
-import type {ReturnDto} from "@/types/response.ts";
+import type { ReturnDto } from '@/types/response.ts'
 
 interface SiteConfig {
-  site_name: string;
+  site_name: string
-  site_url: string;
+  site_url: string
-  backend_url: string;
+  backend_url: string
 
-  jwt_secret_key: string;
+  jwt_secret_key: string
 
-  smtp_enable: boolean;
+  smtp_enable: boolean
-  smtp_sender: string;
+  smtp_sender: string
-  smtp_hostname: string;
+  smtp_hostname: string
-  smtp_port: number;
+  smtp_port: number
-  smtp_username: string;
+  smtp_username: string
-  smtp_password: string;
+  smtp_password: string
-  smtp_use_tls: boolean;
+  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/")
+  api.get('/admin/site_config/').then((res) => {
-      .then((res) => {
     siteConfig.value = res.data as SiteConfig
-        MESSAGE.success("成功获取设置~")
+    MESSAGE.success('成功获取设置~')
   })
 }
 
 function saveConfig() {
-  api.post("/admin/site_config/", JSON.stringify(siteConfig.value))
+  api.post('/admin/site_config/', JSON.stringify(siteConfig.value)).then((res) => {
-      .then((res) => {
     siteConfig.value = res.data as SiteConfig
-        MESSAGE.success("保存并刷新设置成功~")
+    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}))
+  api
-      .then(res => res.data as ReturnDto)
+    .post('/admin/email-test/', JSON.stringify({ to: testMailTo.value }))
-      .then(data => data.success)
+    .then((res) => res.data as ReturnDto)
-      .then(success => {
+    .then((data) => data.success)
+    .then((success) => {
       if (success) {
-          MESSAGE.success("邮件发送成功，请稍等片刻，然后检查收件箱~")
+        MESSAGE.success('邮件发送成功，请稍等片刻，然后检查收件箱~')
       } else {
-          MESSAGE.error("后端表示邮件发送失败，请检查日志输出。")
+        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>
@@ -107,7 +105,8 @@ function sendTestMail() {
               <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" />
@@ -175,7 +174,8 @@ function sendTestMail() {
           </n-form>
           <template #action>
             <n-flex vertical>
-              <n-text>你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
+              <n-text
+                >你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
                 设置工作，这会发送一封测试邮件。
               </n-text>
               <n-input v-model:value="testMailTo" />

webui/src/pages/admin/AdminOverview.vue

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

webui/src/pages/admin/AdminUserScript.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import InDev from "@/components/InDev.vue";
+import InDev from '@/components/InDev.vue'
-import {useHead} from "@unhead/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 />

webui/src/pages/admin/AdminUserSecurity.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import {useNowUser} from "@/stores/now-user.js";
+import { useNowUser } from '@/stores/now-user.js'
-import UserPasswordModal from "@/components/admin/UserPasswordModal.vue";
+import UserPasswordModal from '@/components/admin/UserPasswordModal.vue'
-import {h, ref} from "vue";
+import { h, ref } from 'vue'
-import {api} from "@/tools/web.ts";
+import { api } from '@/tools/web.ts'
-import {type DataTableColumn, NTag, NText} from "naive-ui";
+import { type DataTableColumn, NTag, NText } from 'naive-ui'
-import InDev from "@/components/InDev.vue";
+import InDev from '@/components/InDev.vue'
-import {useHead} from "@unhead/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;
+  created_at: number
-  type: "login" | "change_password" | "change_email" | "change_phone"
+  type: 'login' | 'change_password' | 'change_email' | 'change_phone'
   old: string | null
   new: string | null
 }
@@ -26,50 +26,47 @@ const secureChanges = ref<SecureChange[]>([])
 
 const columns = [
   {
-    title: "记录时间",
+    title: '记录时间',
-    key: "created_at",
+    key: 'created_at',
     render(row) {
       const date = new Date(row.created_at * 1000)
-      return h(
+      return h(NText, {}, { default: () => date.toLocaleString() })
-        NText,
+    },
-        {},
-        {default: () => date.toLocaleString()}
-      )
-    }
   },
   {
-    title: "类型",
+    title: '类型',
-    key: "type",
+    key: 'type',
     render: (row) => {
       return h(
         NTag,
         {
-          type: "info"
+          type: 'info',
         },
-        {default: () => row.type}
+        { default: () => row.type },
       )
-    }
+    },
   },
   {
-    title: "事件之前",
+    title: '事件之前',
-    key: "old",
+    key: 'old',
   },
   {
-    title: "事件之后",
+    title: '事件之后',
-    key: "new",
+    key: 'new',
-  }
+  },
 ] as DataTableColumn<SecureChange>[]
 
 function loadSecureChanges() {
-  api.get("/admin/me/secure_changes/")
+  api
-    .then(res => secureChanges.value = res.data as SecureChange[])
+    .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>
@@ -89,7 +86,7 @@ function loadSecureChanges() {
 
   <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>
@@ -104,7 +101,7 @@ function loadSecureChanges() {
 
   <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>
@@ -118,7 +115,7 @@ function loadSecureChanges() {
 
   <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" />
@@ -127,6 +124,4 @@ function loadSecureChanges() {
   </n-card>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

webui/src/pages/admin/AdminUserUpload.vue

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

webui/src/router/index.ts

@@ -1,14 +1,14 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import ChatroomPage from '@/pages/ChatroomPage.vue'
 import WelcomePage from '@/pages/WelcomePage.vue'
-import Chatroom1Page from "@/pages/Chatroom1Page.vue";
+import Chatroom1Page from '@/pages/Chatroom1Page.vue'
-import AdminPage from "@/pages/AdminPage.vue";
+import AdminPage from '@/pages/AdminPage.vue'
-import AdminOverview from "@/pages/admin/AdminOverview.vue";
+import AdminOverview from '@/pages/admin/AdminOverview.vue'
-import AdminUserInfo from "@/pages/admin/AdminUserInfo.vue";
+import AdminUserInfo from '@/pages/admin/AdminUserInfo.vue'
-import AdminUserSecurity from "@/pages/admin/AdminUserSecurity.vue";
+import AdminUserSecurity from '@/pages/admin/AdminUserSecurity.vue'
-import AdminUserUpload from "@/pages/admin/AdminUserUpload.vue";
+import AdminUserUpload from '@/pages/admin/AdminUserUpload.vue'
-import AdminNyahome from "@/pages/admin/AdminNyahome.vue";
+import AdminNyahome from '@/pages/admin/AdminNyahome.vue'
-import AdminUserScript from "@/pages/admin/AdminUserScript.vue";
+import AdminUserScript from '@/pages/admin/AdminUserScript.vue'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -34,36 +34,36 @@ const router = createRouter({
       component: AdminPage,
       children: [
         {
-          name: "admin-overview",
+          name: 'admin-overview',
-          path: "",
+          path: '',
           component: AdminOverview,
         },
         {
-          name: "admin-user-info",
+          name: 'admin-user-info',
-          path: "user-info",
+          path: 'user-info',
           component: AdminUserInfo,
         },
         {
-          name: "admin-user-security",
+          name: 'admin-user-security',
-          path: "user-security",
+          path: 'user-security',
           component: AdminUserSecurity,
         },
         {
-          name: "admin-user-upload",
+          name: 'admin-user-upload',
-          path: "user-upload",
+          path: 'user-upload',
           component: AdminUserUpload,
         },
         {
-          name: "admin-user-script",
+          name: 'admin-user-script',
-          path: "user-script",
+          path: 'user-script',
           component: AdminUserScript,
         },
         {
-          name: "admin-nyahome",
+          name: 'admin-nyahome',
-          path: "nyahome",
+          path: 'nyahome',
           component: AdminNyahome,
-        }
+        },
-      ]
+      ],
     },
   ],
 })

webui/src/stores/now-user.ts

@@ -22,9 +22,7 @@ export const useNowUser = defineStore('now-user', () => {
 
     let user: UserDto
     try {
-      user = await api
+      user = await api.get('/admin/me/').then((res) => res.data as UserDto)
-        .get('/admin/me/')
-        .then((res) => res.data as UserDto)
     } catch (err) {
       console.error(`请求用户信息时失败：${err}`)
       throw err