diff --git a/webui/.oxfmtrc.json b/webui/.oxfmtrc.json
index 4bddb67..f957036 100644
--- a/webui/.oxfmtrc.json
+++ b/webui/.oxfmtrc.json
@@ -1,5 +1,6 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "bracketSpacing": true
 }
diff --git a/webui/components.d.ts b/webui/components.d.ts
index 2ad6b39..bed2522 100644
--- a/webui/components.d.ts
+++ b/webui/components.d.ts
@@ -36,6 +36,7 @@ declare module 'vue' {
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
@@ -106,6 +107,7 @@ declare global {
   const NDataTable: typeof import('naive-ui')['NDataTable']
   const NDrawer: typeof import('naive-ui')['NDrawer']
   const NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+  const NDynamicTags: typeof import('naive-ui')['NDynamicTags']
   const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const NEmpty: typeof import('naive-ui')['NEmpty']
   const NFlex: typeof import('naive-ui')['NFlex']
diff --git a/webui/src/pages/AdminPage.vue b/webui/src/pages/AdminPage.vue
index e28ff56..2b0c708 100644
--- a/webui/src/pages/AdminPage.vue
+++ b/webui/src/pages/AdminPage.vue
@@ -1,10 +1,10 @@
 <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 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',
@@ -76,16 +76,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 }">
       <div id="user-page-content">
         <keep-alive>
-          <component :is="Component"/>
+          <component :is="Component" />
         </keep-alive>
       </div>
     </router-view>
diff --git a/webui/src/pages/Chatroom1Page.vue b/webui/src/pages/Chatroom1Page.vue
index 31052b4..41df909 100644
--- a/webui/src/pages/Chatroom1Page.vue
+++ b/webui/src/pages/Chatroom1Page.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import {useRoute} from 'vue-router'
-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'
-import {useMessage} from 'naive-ui'
+import { useRoute } from 'vue-router'
+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'
+import { useMessage } from 'naive-ui'
 import ChatroomCard from '@/components/chatroom/ChatroomCard.vue'
 import ChatTable from '@/components/chatroom/ChatTable.vue'
 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'
+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'
+  titleTemplate: '%s | 聊天室 | NyaHome',
 })
 
 useHead(pageHead)
@@ -92,6 +92,7 @@ function chat() {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
+      Authorization: `Bearer ${localStorage.getItem('access-token')}`,
     },
     body: JSON.stringify({
       message: inputMessage.value,
@@ -200,7 +201,7 @@ function messageEdit(oldMessage: string, newMessage: string, change: 'aii' | 'us
 function messageDelete(message: string, change: 'aii' | 'user') {
   const id = Number(ROUTE.params.id)
   api
-    .post(`/chatroom/${id}/chat/delete/`, JSON.stringify({message, change}))
+    .post(`/chatroom/${id}/chat/delete/`, JSON.stringify({ message, change }))
     .then((res) => res.data as ReturnDto)
     .then((data) => {
       if (data.success) {
@@ -264,7 +265,7 @@ function enableSidebar() {
         :on-message-edit="messageEdit"
         :on-message-delete="messageDelete"
       />
-      <div id="main-toggle" ref="main-toggle" @click="enableSidebar"/>
+      <div id="main-toggle" ref="main-toggle" @click="enableSidebar" />
     </div>
     <div class="sidebar-column" ref="sidebar">
       <chat-control-panel
@@ -272,7 +273,7 @@ function enableSidebar() {
         v-model:quicker-prompt="quickerPrompt"
         v-model:select-model="selectedModel"
       />
-      <div id="sidebar-toggle" @click="disableSidebar"/>
+      <div id="sidebar-toggle" @click="disableSidebar" />
     </div>
   </div>
 </template>
@@ -310,13 +311,14 @@ div.page-container {
       border-radius: 5px;
       opacity: var(--opacity);
 
-      transition: background-color 0.8s,
-      transform 0.5s,
-      opacity 1s,
-      height 0.5s,
-      width 0.5s,
-      top 0.5s,
-      border-radius 0.5s;
+      transition:
+        background-color 0.8s,
+        transform 0.5s,
+        opacity 1s,
+        height 0.5s,
+        width 0.5s,
+        top 0.5s,
+        border-radius 0.5s;
 
       &:hover {
         background: rgb(0 0 0 / 0.6);
@@ -339,9 +341,10 @@ div.page-container {
 
     position: relative;
 
-    transition: transform 1s,
-    opacity 1s,
-    flex-basis 1s;
+    transition:
+      transform 1s,
+      opacity 1s,
+      flex-basis 1s;
     transform: translateX(var(--transform-x));
     flex-basis: var(--width);
     opacity: var(--opacity);
@@ -356,12 +359,13 @@ div.page-container {
       background: rgb(0 0 0 / 0.1);
       border-radius: 5px;
 
-      transition: background-color 0.8s,
-      transform 0.5s,
-      height 0.5s,
-      width 0.5s,
-      top 0.5s,
-      border-radius 0.5s;
+      transition:
+        background-color 0.8s,
+        transform 0.5s,
+        height 0.5s,
+        width 0.5s,
+        top 0.5s,
+        border-radius 0.5s;
 
       &:hover {
         background: rgb(0 0 0 / 0.6);
diff --git a/webui/src/pages/ChatroomPage.vue b/webui/src/pages/ChatroomPage.vue
index e446ef6..e7915a4 100644
--- a/webui/src/pages/ChatroomPage.vue
+++ b/webui/src/pages/ChatroomPage.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import ChatroomCard from '@/components/chatroom/ChatroomCard.vue'
-import {ref, watch} from 'vue'
-import {api} from '@/tools/web.ts'
-import type {ChatroomPublic} from '@/types/chatroom.ts'
-import type {ReturnDto} from '@/types/response.ts'
+import { ref, watch } from 'vue'
+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 {useHead} from "@unhead/vue";
+import { useNowUser } from '@/stores/now-user.ts'
+import { useHead } from '@unhead/vue'
 
 useHead({
-  title: "聊天室列表",
+  title: '聊天室列表',
 })
 
 const NOWUSER = useNowUser()
@@ -33,7 +33,7 @@ watch(
   () => {
     load()
   },
-  {immediate: true},
+  { immediate: true },
 )
 </script>
 
@@ -60,7 +60,7 @@ watch(
     />
   </div>
 
-  <chatroom-creator-modal v-model:show-modal="showModal"/>
+  <chatroom-creator-modal v-model:show-modal="showModal" />
 </template>
 
 <style scoped>
diff --git a/webui/src/pages/admin/AdminUserInfo.vue b/webui/src/pages/admin/AdminUserInfo.vue
index bbd49ea..0cda11e 100644
--- a/webui/src/pages/admin/AdminUserInfo.vue
+++ b/webui/src/pages/admin/AdminUserInfo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import {useNowUser} from '@/stores/now-user.js'
-import {ref, watch} from 'vue'
+import { useNowUser } from '@/stores/now-user.js'
+import { ref, watch } from 'vue'
 import SelectFileModal from '@/components/file/SelectFileModal.vue'
-import {api} from '@/tools/web.js'
-import type {UploadFileDto, UserDto} from '@/types/user.js'
-import {useHead} from '@unhead/vue'
+import { api } from '@/tools/web.js'
+import type { UploadFileDto, UserDto } from '@/types/user.js'
+import { useHead } from '@unhead/vue'
 import ChangeEmailModal from '@/components/admin/ChangeEmailModal.vue'
 import ChangePhoneModal from '@/components/admin/ChangePhoneModal.vue'
 
@@ -69,7 +69,7 @@ watch(
   () => {
     reInitForm()
   },
-  {immediate: true},
+  { immediate: true },
 )
 
 async function save() {
@@ -91,14 +91,14 @@ async function save() {
     <div class="ui-content">
       <n-form style="width: 450px" label-width="auto" label-placement="left" label-align="right">
         <n-form-item label="用户名">
-          <n-input v-model:value="infoForm.name"/>
+          <n-input v-model:value="infoForm.name" />
         </n-form-item>
         <n-form-item label="展示名称">
-          <n-input v-model:value="infoForm.display_name"/>
+          <n-input v-model:value="infoForm.display_name" />
         </n-form-item>
         <n-form-item label="头像">
           <n-flex>
-            <n-avatar v-model:src="infoForm.avatar_url" :size="96" circle/>
+            <n-avatar v-model:src="infoForm.avatar_url" :size="96" circle />
             <n-flex vertical>
               <n-tag type="info">需在「内容-上传」中提前上传图像。</n-tag>
               <n-tag type="warning">使用方形图像以获得最佳效果。</n-tag>
@@ -108,7 +108,7 @@ async function save() {
                   secondary
                   type="tertiary"
                   @click="infoForm.avatar_url = NOWUSER.avatar_url"
-                >重置
+                  >重置
                 </n-button>
               </n-flex>
             </n-flex>
@@ -116,7 +116,7 @@ async function save() {
         </n-form-item>
         <n-form-item label="个人背景">
           <n-flex>
-            <n-avatar v-model:src="infoForm.background_url" :size="96" object-fit="cover"/>
+            <n-avatar v-model:src="infoForm.background_url" :size="96" object-fit="cover" />
             <n-flex vertical>
               <n-tag type="info">需在「内容-上传」中提前上传图像。</n-tag>
               <n-flex>
@@ -125,7 +125,7 @@ async function save() {
                   secondary
                   type="tertiary"
                   @click="infoForm.background_url = NOWUSER.background_url"
-                >重置
+                  >重置
                 </n-button>
               </n-flex>
             </n-flex>
@@ -139,10 +139,10 @@ async function save() {
           />
         </n-form-item>
         <n-form-item label="邮箱">
-          <n-input v-model:value="NOWUSER.email" disabled/>
+          <n-input v-model:value="NOWUSER.email" disabled />
         </n-form-item>
         <n-form-item label="手机号">
-          <n-input v-model:value="NOWUSER.phone" disabled/>
+          <n-input v-model:value="NOWUSER.phone" disabled />
         </n-form-item>
       </n-form>
       <n-flex>
@@ -171,8 +171,8 @@ async function save() {
       v-model:show-modal="showBackgroundModal"
       v-model:select-files="background_selectFiles"
     />
-    <change-email-modal v-model:show-modal="showChangeEmailModal"/>
-    <change-phone-modal v-model:show-modal="showChangePhoneModal"/>
+    <change-email-modal v-model:show-modal="showChangeEmailModal" />
+    <change-phone-modal v-model:show-modal="showChangePhoneModal" />
   </n-card>
 </template>