diff --git a/.github/workflows/bun.yml b/.github/workflows/bun.yml
index 76fef51..bb1713a 100644
--- a/.github/workflows/bun.yml
+++ b/.github/workflows/bun.yml
@@ -5,7 +5,7 @@ name: Bun CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: [master]
 
 env:
   DOCKERHUB_SLUG: megghy/vtsuru_live
@@ -21,47 +21,47 @@ jobs:
       packages: write
 
     steps:
-    - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
-    - name: Use bun
-      uses: oven-sh/setup-bun@v2
+      - name: Use bun
+        uses: oven-sh/setup-bun@v2
 
-    - name: 📥 Install dependencies
-      run: bun install
+      - name: 📥 Install dependencies
+        run: bun install
 
-    - name: 📦 Build
-      run: bun run build
+      - name: 📦 Build
+        run: bun run build
 
-    - name: 📦 Upload SourceMap
-      run: bunx @hyperdx/cli upload-sourcemaps --serviceKey ${{ secrets.HYPERDX_SERVICE_KEY }} --path dist/assets
-      
-    - name: Login to GitHub Container Registry
-      uses: docker/login-action@v2
-      with:
-        registry: ghcr.io
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
+      - name: 📦 Upload SourceMap
+        run: bunx @hyperdx/cli upload-sourcemaps --serviceKey ${{ secrets.HYPERDX_SERVICE_KEY }} --path dist/assets
 
-    - name: Docker meta
-      id: meta
-      uses: docker/metadata-action@v4
-      with:
-        images: |
-          ${{ env.DOCKERHUB_SLUG }}
-          ${{ env.GHCR_SLUG }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Get current time
-      uses: josStorer/get-current-time@v2
-      id: time
-      with:
-        format: YYYYMMDD_HHmmss
-        utcOffset: "+08:00"
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ${{ env.DOCKERHUB_SLUG }}
+            ${{ env.GHCR_SLUG }}
 
-    - name: Build Docker image and push
-      uses: docker/build-push-action@v4
-      with:
-        context: .
-        push: true
-        tags: |
-          ${{ env.GHCR_SLUG }}:latest
-          ${{ env.GHCR_SLUG }}:${{ steps.time.outputs.formattedTime }}
+      - name: Get current time
+        uses: josStorer/get-current-time@v2
+        id: time
+        with:
+          format: YYYYMMDD_HHmmss
+          utcOffset: '+08:00'
+
+      - name: Build Docker image and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: |
+            ${{ env.GHCR_SLUG }}:latest
+            ${{ env.GHCR_SLUG }}:${{ steps.time.outputs.formattedTime }}
diff --git a/.oxlintrc.json b/.oxlintrc.json
index f7dcf8d..a82973a 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -1,43 +1,9 @@
 {
   "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": [
-    "typescript"
-  ],
-  "categories": {
-    "correctness": "off"
-  },
+  "plugins": ["typescript", "vue"],
   "env": {
     "builtin": true,
     "browser": true
   },
-  "rules": {
-
-  },
-
-  "overrides": [
-    {
-      "files": [
-        "**/*.js",
-        "**/*.jsx"
-      ],
-      "rules": {
-        "no-console": "off",
-        "no-debugger": "off",
-        "vue/no-mutating-props": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-var-requires": "warn"
-      }
-    },
-    {
-      "files": [
-        "**/*.ts",
-        "**/*.tsx",
-        "**/*.vue"
-      ],
-      "rules": {
-        "@typescript-eslint/no-explicit-any": "off",
-        "vue/no-mutating-props": "off"
-      }
-    }
-  ]
-}
\ No newline at end of file
+  "rules": {}
+}
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index a5c69cf..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "printWidth": 80
-}
\ No newline at end of file
diff --git a/README.md b/README.md
index 166f220..5d7f760 100644
--- a/README.md
+++ b/README.md
@@ -21,4 +21,4 @@ bun run lint
 ```
 
 ### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
\ No newline at end of file
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/bun.lockb b/bun.lockb
index 9f11ac5..3fa5256 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/default.d.ts b/default.d.ts
index 39c2151..391c8cf 100644
--- a/default.d.ts
+++ b/default.d.ts
@@ -1,4 +1,3 @@
-
 import type { DialogProviderInst, LoadingBarProviderInst, MessageProviderInst, ModalProviderInst, NotificationProviderInst } from 'naive-ui'
 import type { useRoute } from 'vue-router'
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 617605f..dfe33ff 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,6 @@
 import antfu from '@antfu/eslint-config'
 import VueVine from '@vue-vine/eslint-config'
+import oxlint from 'eslint-plugin-oxlint'
 
 export default antfu(
   {
@@ -64,7 +65,7 @@ export default antfu(
       // 通用规则
       'no-console': 'off',
       'unused-imports/no-unused-vars': 'warn',
-      
+
       // 关闭一些过于严格的规则
       'antfu/if-newline': 'off',
       'style/brace-style': ['error', '1tbs'],
@@ -72,4 +73,6 @@ export default antfu(
   },
   // 集成 VueVine 配置
   ...VueVine(),
+  // 集成 oxlint 配置 - 必须放在最后以禁用与 oxlint 冲突的 ESLint 规则
+  oxlint.buildFromOxlintConfigFile('./.oxlintrc.json'),
 )
diff --git a/package.json b/package.json
index 35e3f74..8583ae5 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "vtsuru.live",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "bunx --bun vite",
     "build": "vite build",
-    "lint": "vite lint",
+    "lint": "oxlint && eslint .",
+    "lint:fix": "oxlint --fix && eslint . --fix",
     "knip": "knip"
   },
   "dependencies": {
@@ -63,7 +64,7 @@
     "unplugin-vue-components": "^29.1.0",
     "unplugin-vue-markdown": "^29.2.0",
     "uuid": "^13.0.0",
-    "vite": "7.1.7",
+    "vite": "npm:rolldown-vite@latest",
     "vite-svg-loader": "^5.1.0",
     "vue": "3.5.22",
     "vue-cropperjs": "^5.0.0",
@@ -87,6 +88,8 @@
     "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vue-vine/eslint-config": "^1.1.9",
     "eslint": "^9.36.0",
+    "eslint-plugin-oxlint": "^1.19.0",
+    "oxlint": "^1.19.0",
     "stylus": "^0.64.0",
     "typescript": "^5.9.2",
     "vue-vine": "^1.7.6"
diff --git a/src/App.vue b/src/App.vue
index 9bfa454..4a66542 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import ManageLayout from '@/views/ManageLayout.vue';
-import ViewerLayout from '@/views/ViewerLayout.vue';
 import {
   dateZhCN,
   NConfigProvider,
@@ -13,83 +11,80 @@ import {
   NNotificationProvider,
   NSpin,
   zhCN,
-} from 'naive-ui';
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import TempComponent from './components/TempComponent.vue';
-import { isDarkMode, theme } from './Utils';
-import OBSLayout from './views/OBSLayout.vue';
-import OpenLiveLayout from './views/OpenLiveLayout.vue';
-import ClientLayout from './client/ClientLayout.vue';
-import { ThemeType } from './api/api-models';
+} from 'naive-ui'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import ManageLayout from '@/views/ManageLayout.vue'
+import ViewerLayout from '@/views/ViewerLayout.vue'
+import { ThemeType } from './api/api-models'
+import ClientLayout from './client/ClientLayout.vue'
+import TempComponent from './components/TempComponent.vue'
+import { isDarkMode, theme } from './Utils'
+import OBSLayout from './views/OBSLayout.vue'
+import OpenLiveLayout from './views/OpenLiveLayout.vue'
 
-const route = useRoute();
-const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const route = useRoute()
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 
 const layout = computed(() => {
   if (route.path.startsWith('/user') || route.name == 'user' || route.path.startsWith('/@')) {
-    document.title = `${route.meta.title} · ${route.params.id} · VTsuru`;
-    return 'viewer';
+    document.title = `${route.meta.title} · ${route.params.id} · VTsuru`
+    return 'viewer'
+  } else if (route.path.startsWith('/manage')) {
+    document.title = `${route.meta.title} · 管理 · VTsuru`
+    return 'manage'
+  } else if (route.path.startsWith('/open-live')) {
+    document.title = `${route.meta.title} · 开放平台 · VTsuru`
+    return 'open-live'
+  } else if (route.path.startsWith('/obs')) {
+    document.title = `${route.meta.title} · OBS · VTsuru`
+    return 'obs'
+  } else if (route.path.startsWith('/client')) {
+    document.title = `${route.meta.title} · 客户端 · VTsuru`
+    return 'client'
+  } else {
+    document.title = `${route.meta.title} · VTsuru`
+    return ''
   }
-  else if (route.path.startsWith('/manage')) {
-    document.title = `${route.meta.title} · 管理 · VTsuru`;
-    return 'manage';
-  }
-  else if (route.path.startsWith('/open-live')) {
-    document.title = `${route.meta.title} · 开放平台 · VTsuru`;
-    return 'open-live';
-  }
-  else if (route.path.startsWith('/obs')) {
-    document.title = `${route.meta.title} · OBS · VTsuru`;
-    return 'obs';
-  }
-  else if (route.path.startsWith('/client')) {
-    document.title = `${route.meta.title} · 客户端 · VTsuru`;
-    return 'client';
-  }
-  else {
-    document.title = `${route.meta.title} · VTsuru`;
-    return '';
-  }
-});
+})
 watchEffect(() => {
   if (isDarkMode.value) {
-    document.documentElement.classList.add('dark');
+    document.documentElement.classList.add('dark')
   } else {
-    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.remove('dark')
   }
-});
+})
 
 const themeOverrides = computed(() => {
   return {
     common: {
       // 主色调 (中蓝色基调，提升可读性并增强对比)
       primaryColor: '#4D6E9C',
-      primaryColorHover: '#6483A9',      // 略微提亮悬浮色
-      primaryColorPressed: '#365A7D',     // 调整按下色，避免在暗色模式下过暗
-      primaryColorSuppl: '#809BC1',     // 调整补充色，使其与背景有区分
+      primaryColorHover: '#6483A9', // 略微提亮悬浮色
+      primaryColorPressed: '#365A7D', // 调整按下色，避免在暗色模式下过暗
+      primaryColorSuppl: '#809BC1', // 调整补充色，使其与背景有区分
 
       // 信息色 (浅蓝色基调，提升对比度)
-      infoColorHover: '#79AFDE',        // 提亮悬浮色
-      infoColorPressed: '#4B8AC3',       // 调整按下色
+      infoColorHover: '#79AFDE', // 提亮悬浮色
+      infoColorPressed: '#4B8AC3', // 调整按下色
 
       // 成功色 (柔和青绿, 增强对比)
       successColor: '#3AA89C',
-      successColorHover: '#5AB9AE',      // 调整悬浮色
-      successColorPressed: '#2C8C82',     // 调整按下色
-      successColorSuppl: '#B4E4DF',      // 调整补充色
+      successColorHover: '#5AB9AE', // 调整悬浮色
+      successColorPressed: '#2C8C82', // 调整按下色
+      successColorSuppl: '#B4E4DF', // 调整补充色
 
       // 警告色 (柔和橙色, 微调对比)
       warningColor: '#FFA64D',
-      warningColorHover: '#FFBA70',      // 调整悬浮色
-      warningColorPressed: '#E89530',     // 调整按下色
-      warningColorSuppl: '#FFE2C2',      // 调整补充色
+      warningColorHover: '#FFBA70', // 调整悬浮色
+      warningColorPressed: '#E89530', // 调整按下色
+      warningColorSuppl: '#FFE2C2', // 调整补充色
 
       // 错误色 (柔和红色, 微调对比)
       errorColor: '#E16565',
-      errorColorHover: '#EA8282',       // 调整悬浮色
-      errorColorPressed: '#D44848',      // 调整按下色
-      errorColorSuppl: '#F3C0C0',       // 调整补充色
+      errorColorHover: '#EA8282', // 调整悬浮色
+      errorColorPressed: '#D44848', // 调整按下色
+      errorColorSuppl: '#F3C0C0', // 调整补充色
 
       // 保持字体设置
       fontFamily:
@@ -105,15 +100,15 @@ const themeOverrides = computed(() => {
       color: isDarkMode.value ? '#48484e' : '#FFFFFF',
       textColor: isDarkMode.value ? '#FFFFFF' : '#333333',
     },
-  };
+  }
 })
-const body = document.body;
+const body = document.body
 
 onMounted(() => {
   if (isDarkMode.value) {
-    document.documentElement.classList.add('dark');
+    document.documentElement.classList.add('dark')
   }
-});
+})
 </script>
 
 <template>
diff --git a/src/Utils.ts b/src/Utils.ts
index f8aea7a..0c539a6 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,227 +1,230 @@
-import { useStorage } from '@vueuse/core';
-import {
+import type {
   ConfigProviderProps,
-  NButton,
-  NIcon,
-  NTooltip,
   UploadFileInfo,
+} from 'naive-ui'
+import type { DiscreteApiType } from 'naive-ui/es/discrete/src/interface'
+import type { SongsInfo } from './api/api-models'
+import { SquareArrowForward24Filled } from '@vicons/fluent'
+import { useStorage } from '@vueuse/core'
+import {
   createDiscreteApi,
   darkTheme,
   dateZhCN,
+  NButton,
+  NIcon,
+  NTooltip,
   useOsTheme,
-  zhCN
-} from 'naive-ui';
-import { SongFrom, SongsInfo, ThemeType } from './api/api-models';
-import { computed } from 'vue';
-import { VTSURU_API_URL } from './data/constants';
-import { DiscreteApiType } from 'naive-ui/es/discrete/src/interface';
-import { SquareArrowForward24Filled } from '@vicons/fluent';
-import FiveSingIcon from '@/svgs/fivesing.svg';
-import NeteaseIcon from '@/svgs/netease.svg';
+  zhCN,
+} from 'naive-ui'
+import { computed } from 'vue'
+import FiveSingIcon from '@/svgs/fivesing.svg'
+import NeteaseIcon from '@/svgs/netease.svg'
+import { SongFrom, ThemeType } from './api/api-models'
+import { VTSURU_API_URL } from './data/constants'
 
-const { message } = createDiscreteApi(['message']);
+const { message } = createDiscreteApi(['message'])
 
-const osThemeRef = useOsTheme(); //获取当前系统主题
-const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const osThemeRef = useOsTheme() // 获取当前系统主题
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 export const theme = computed(() => {
   if (themeType.value == ThemeType.Auto) {
-    var osThemeRef = useOsTheme(); //获取当前系统主题
-    return osThemeRef.value === 'dark' ? darkTheme : null;
+    const osThemeRef = useOsTheme() // 获取当前系统主题
+    return osThemeRef.value === 'dark' ? darkTheme : null
   } else {
-    return themeType.value == ThemeType.Dark ? darkTheme : null;
+    return themeType.value == ThemeType.Dark ? darkTheme : null
   }
-});
+})
 export const configProviderPropsRef = computed<ConfigProviderProps>(() => ({
   theme: theme.value,
   locale: zhCN,
   dateLocale: dateZhCN,
 
-}));
+}))
 export function createNaiveUIApi(types: DiscreteApiType[]) {
   return createDiscreteApi(types, {
-    configProviderProps: configProviderPropsRef
-  });
+    configProviderProps: configProviderPropsRef,
+  })
 }
 export function NavigateToNewTab(url: string) {
-  window.open(url, '_blank');
+  window.open(url, '_blank')
 }
 export const isDarkMode = computed(() => {
-  if (themeType.value == ThemeType.Auto) return osThemeRef.value === 'dark';
-  else return themeType.value == ThemeType.Dark;
-});
+  if (themeType.value == ThemeType.Auto) return osThemeRef.value === 'dark'
+  else return themeType.value == ThemeType.Dark
+})
 export function copyToClipboard(text: string) {
   if (navigator.clipboard) {
-    navigator.clipboard.writeText(text);
-    message.success('已复制到剪切板');
+    navigator.clipboard.writeText(text)
+    message.success('已复制到剪切板')
   } else {
-    message.warning('当前环境不支持自动复制, 请手动选择并复制');
+    message.warning('当前环境不支持自动复制, 请手动选择并复制')
   }
 }
 export function objectsToCSV(arr: any[]) {
-  const array = [Object.keys(arr[0])].concat(arr);
+  const array = [Object.keys(arr[0])].concat(arr)
   return array
     .map((row) => {
       return Object.values(row)
         .map((value) => {
-          return typeof value === 'string' ? JSON.stringify(value) : value;
+          return typeof value === 'string' ? JSON.stringify(value) : value
         })
-        .toString();
+        .toString()
     })
-    .join('\n');
+    .join('\n')
 }
 export function GetGuardColor(level: number | null | undefined): string {
   if (level) {
     switch (level) {
       case 1: {
-        return 'rgb(122, 4, 35)';
+        return 'rgb(122, 4, 35)'
       }
       case 2: {
-        return 'rgb(157, 155, 255)';
+        return 'rgb(157, 155, 255)'
       }
       case 3: {
-        return 'rgb(104, 136, 241)';
+        return 'rgb(104, 136, 241)'
       }
     }
   }
-  return '';
+  return ''
 }
 export function downloadImage(imageSrc: string, filename: string) {
-  const image = new Image();
-  image.crossOrigin = 'Anonymous'; // This might be needed depending on the image's server
+  const image = new Image()
+  image.crossOrigin = 'Anonymous' // This might be needed depending on the image's server
   image.onload = () => {
-    const canvas = document.createElement('canvas');
-    canvas.width = image.width;
-    canvas.height = image.height;
-    const ctx = canvas.getContext('2d');
-    ctx!.drawImage(image, 0, 0);
+    const canvas = document.createElement('canvas')
+    canvas.width = image.width
+    canvas.height = image.height
+    const ctx = canvas.getContext('2d')
+    ctx!.drawImage(image, 0, 0)
     canvas.toBlob((blob) => {
       if (blob) {
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
       }
-    }); // Omitted the 'image/jpeg' to use the original image format
-  };
-  image.src = imageSrc;
+    }) // Omitted the 'image/jpeg' to use the original image format
+  }
+  image.src = imageSrc
 }
-export function getBase64(
-  file: File | undefined | null
+export async function getBase64(
+  file: File | undefined | null,
 ): Promise<string | undefined> {
-  if (!file) return new Promise((resolve) => resolve(undefined));
+  if (!file) return new Promise(resolve => resolve(undefined))
   return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
     reader.onload = () =>
-      resolve(reader.result?.toString().split(',')[1] || undefined);
-    reader.onerror = (error) => reject(error);
-  });
+      resolve(reader.result?.toString().split(',')[1] || undefined)
+    reader.onerror = error => reject(error)
+  })
 }
 export async function getImageUploadModel(
   files: UploadFileInfo[] | undefined | null,
-  maxSize: number = 10 * 1024 * 1024
+  maxSize: number = 10 * 1024 * 1024,
 ) {
   const result = {
     existImages: [],
-    newImagesBase64: []
-  } as { existImages: string[]; newImagesBase64: string[]; };
-  if (!files) return result;
+    newImagesBase64: [],
+  } as { existImages: string[], newImagesBase64: string[] }
+  if (!files) return result
   for (let i = 0; i < files.length; i++) {
-    const file = files[i];
+    const file = files[i]
     if ((file.file?.size ?? 0) > maxSize) {
-      message.error('文件大小不能超过 ' + maxSize / 1024 / 1024 + 'MB');
-      return result;
+      message.error(`文件大小不能超过 ${maxSize / 1024 / 1024}MB`)
+      return result
     }
     if (!file.file) {
-      result.existImages.push(file.id); //用id绝对路径当的文件名
+      result.existImages.push(file.id) // 用id绝对路径当的文件名
     } else {
-      const base64 = await getBase64(file.file);
+      const base64 = await getBase64(file.file)
       if (base64) {
-        result.newImagesBase64.push(base64);
+        result.newImagesBase64.push(base64)
       }
     }
   }
-  return result;
+  return result
 }
 export function getUserAvatarUrl(userId: number | undefined | null) {
-  if (!userId) return '';
-  return VTSURU_API_URL + 'user-face/' + userId;
+  if (!userId) return ''
+  return `${VTSURU_API_URL}user-face/${userId}`
 }
 export function getOUIdAvatarUrl(ouid: string) {
-  return VTSURU_API_URL + 'face/' + ouid;
+  return `${VTSURU_API_URL}face/${ouid}`
 }
 
 export class GuidUtils {
   // 将数字转换为GUID
   public static numToGuid(value: number): string {
     if (!Number.isSafeInteger(value) || value < 0) {
-      throw new Error('输入必须是非负安全整数');
+      throw new Error('输入必须是非负安全整数')
     }
-    const buffer = new ArrayBuffer(16);
-    const view = new DataView(buffer);
-    view.setBigUint64(8, BigInt(value)); // 将数字写入后8个字节
-    return GuidUtils.bufferToGuid(buffer);
+    const buffer = new ArrayBuffer(16)
+    const view = new DataView(buffer)
+    view.setBigUint64(8, BigInt(value)) // 将数字写入后8个字节
+    return GuidUtils.bufferToGuid(buffer)
   }
 
   // 检查GUID是否由数字生成
   public static isGuidFromUserId(guid: string): boolean {
     try {
-      const buffer = GuidUtils.guidToBuffer(guid);
-      const view = new DataView(buffer);
+      const buffer = GuidUtils.guidToBuffer(guid)
+      const view = new DataView(buffer)
       for (let i = 0; i < 8; i++) {
-        if (view.getUint8(i) !== 0) return false; // 检查前8个字节是否为0
+        if (view.getUint8(i) !== 0) return false // 检查前8个字节是否为0
       }
-      return true;
+      return true
     } catch (e) {
-      return false;
+      return false
     }
   }
 
   // 将GUID转换为数字
   public static guidToLong(guid: string): number {
     try {
-      const buffer = GuidUtils.guidToBuffer(guid);
-      const view = new DataView(buffer);
-      return Number(view.getBigUint64(8));
+      const buffer = GuidUtils.guidToBuffer(guid)
+      const view = new DataView(buffer)
+      return Number(view.getBigUint64(8))
     } catch (e) {
-      throw new Error('无效的GUID格式');
+      throw new Error('无效的GUID格式')
     }
   }
 
   // 辅助方法：将ArrayBuffer转换为GUID字符串
   private static bufferToGuid(buffer: ArrayBuffer): string {
-    const bytes = new Uint8Array(buffer);
-    let hex = '';
+    const bytes = new Uint8Array(buffer)
+    let hex = ''
 
     for (let i = 0; i < 16; i++) {
-      hex += bytes[i].toString(16).padStart(2, '0');
+      hex += bytes[i].toString(16).padStart(2, '0')
     }
 
     // 标准GUID格式：xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
-    return hex.substring(0, 8) + '-' +
-      hex.substring(8, 12) + '-' +
-      hex.substring(12, 16) + '-' +
-      hex.substring(16, 20) + '-' +
-      hex.substring(20);
+    return `${hex.substring(0, 8)}-${
+      hex.substring(8, 12)}-${
+      hex.substring(12, 16)}-${
+      hex.substring(16, 20)}-${
+      hex.substring(20)}`
   }
 
   // 辅助方法：将GUID字符串转换为ArrayBuffer
   private static guidToBuffer(guid: string): ArrayBuffer {
-    const hex = guid.replace(/-/g, '');
-    if (hex.length !== 32) throw new Error('无效的GUID格式');
+    const hex = guid.replace(/-/g, '')
+    if (hex.length !== 32) throw new Error('无效的GUID格式')
 
-    const buffer = new ArrayBuffer(16);
-    const view = new Uint8Array(buffer);
+    const buffer = new ArrayBuffer(16)
+    const view = new Uint8Array(buffer)
 
     for (let i = 0; i < 16; i++) {
-      const byteValue = parseInt(hex.substr(i * 2, 2), 16);
-      if (isNaN(byteValue)) throw new Error('GUID包含非法字符');
-      view.set([byteValue], i);
+      const byteValue = Number.parseInt(hex.substr(i * 2, 2), 16)
+      if (isNaN(byteValue)) throw new Error('GUID包含非法字符')
+      view.set([byteValue], i)
     }
 
-    return buffer;
+    return buffer
   }
 }
 export function GetPlayButton(song: SongsInfo) {
@@ -237,7 +240,7 @@ export function GetPlayButton(song: SongsInfo) {
                 color: '#00BBB3',
                 ghost: true,
                 onClick: () => {
-                  window.open(`http://5sing.kugou.com/bz/${song.id}.html`);
+                  window.open(`http://5sing.kugou.com/bz/${song.id}.html`)
                 },
               },
               {
@@ -246,7 +249,7 @@ export function GetPlayButton(song: SongsInfo) {
             ),
           ),
         default: () => '在5sing打开',
-      });
+      })
     }
     case SongFrom.Netease:
       return h(NTooltip, null, {
@@ -258,7 +261,7 @@ export function GetPlayButton(song: SongsInfo) {
               color: '#C20C0C',
               ghost: true,
               onClick: () => {
-                window.open(`https://music.163.com/#/song?id=${song.id}`);
+                window.open(`https://music.163.com/#/song?id=${song.id}`)
               },
             },
             {
@@ -266,54 +269,47 @@ export function GetPlayButton(song: SongsInfo) {
             },
           ),
         default: () => '在网易云打开',
-      });
+      })
     case SongFrom.Custom:
       return song.url
         ? h(NTooltip, null, {
-          trigger: () =>
-            h(
-              NButton,
-              {
-                size: 'small',
-                color: '#6b95bd',
-                ghost: true,
-                onClick: () => {
-                  window.open(song.url);
+            trigger: () =>
+              h(
+                NButton,
+                {
+                  size: 'small',
+                  color: '#6b95bd',
+                  ghost: true,
+                  onClick: () => {
+                    window.open(song.url)
+                  },
                 },
-              },
-              {
-                icon: () => h(NIcon, { component: SquareArrowForward24Filled }),
-              },
-            ),
-          default: () => '打开链接',
-        })
-        : null;
+                {
+                  icon: () => h(NIcon, { component: SquareArrowForward24Filled }),
+                },
+              ),
+            default: () => '打开链接',
+          })
+        : null
   }
 }
 export function getBrowserName() {
-  var userAgent = navigator.userAgent;
-  if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
-    return 'Opera';
+  const userAgent = navigator.userAgent
+  if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
+    return 'Opera'
+  } else if (userAgent.includes('compatible') && userAgent.includes('MSIE')) {
+    return 'IE'
+  } else if (userAgent.includes('Edge')) {
+    return 'Edge'
+  } else if (userAgent.includes('Firefox')) {
+    return 'Firefox'
+  } else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
+    return 'Safari'
+  } else if (userAgent.includes('Chrome') && userAgent.includes('Safari')) {
+    return 'Chrome'
+  } else if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+    return 'IE>=11'
+  } else {
+    return 'Unkonwn'
   }
-  else if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
-    return 'IE';
-  }
-  else if (userAgent.indexOf("Edge") > -1) {
-    return 'Edge';
-  }
-  else if (userAgent.indexOf("Firefox") > -1) {
-    return 'Firefox';
-  }
-  else if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1) {
-    return 'Safari';
-  }
-  else if (userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1) {
-    return 'Chrome';
-  }
-  else if (!!window.ActiveXObject || "ActiveXObject" in window) {
-    return 'IE>=11';
-  }
-  else {
-    return 'Unkonwn';
-  }
-}
\ No newline at end of file
+}
diff --git a/src/api/account.ts b/src/api/account.ts
index 491e649..2c5d055 100644
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -1,84 +1,84 @@
-import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query';
-import { ACCOUNT_API_URL, USER_CONFIG_API_URL, VTSURU_API_URL } from '@/data/constants';
-import { isSameDay } from 'date-fns';
-import { createDiscreteApi } from 'naive-ui';
-import { ref } from 'vue';
-import { APIRoot, AccountInfo, FunctionTypes } from './api-models';
-import { StorageSerializers } from '@vueuse/core';
+import type { AccountInfo, APIRoot, FunctionTypes } from './api-models'
+import { StorageSerializers } from '@vueuse/core'
+import { isSameDay } from 'date-fns'
+import { createDiscreteApi } from 'naive-ui'
+import { ref } from 'vue'
+import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
+import { ACCOUNT_API_URL, USER_CONFIG_API_URL } from '@/data/constants'
 
-export const ACCOUNT = ref<AccountInfo>({} as AccountInfo);
-export const isLoadingAccount = ref(true);
+export const ACCOUNT = ref<AccountInfo>({} as AccountInfo)
+export const isLoadingAccount = ref(true)
 export const isLoggedIn = computed<boolean>(() => {
-  return ACCOUNT.value.id > 0;
-});
+  return ACCOUNT.value.id > 0
+})
 
-const { message } = createDiscreteApi(['message']);
-export const cookie = useLocalStorage<{ cookie: string; refreshDate: number }>('Cookie', {cookie: '', refreshDate: 0}, { serializer: StorageSerializers.object });
+const { message } = createDiscreteApi(['message'])
+export const cookie = useLocalStorage<{ cookie: string, refreshDate: number }>('Cookie', { cookie: '', refreshDate: 0 }, { serializer: StorageSerializers.object })
 
 export async function GetSelfAccount(token?: string) {
   if (cookie.value.cookie || token) {
-    const result = await Self(token);
+    const result = await Self(token)
     if (result.code == 200) {
       if (!ACCOUNT.value.id) {
-        ACCOUNT.value = result.data;
+        ACCOUNT.value = result.data
       } else {
-        result.data.settings = ACCOUNT.value.settings;
-        ACCOUNT.value = result.data;
+        result.data.settings = ACCOUNT.value.settings
+        ACCOUNT.value = result.data
       }
-      isLoadingAccount.value = false;
-      //console.log('[vtsuru] 已获取账户信息')
-      if (!cookie.value.cookie || !isSameDay(new Date(), cookie.value!.refreshDate)) {
-        refreshCookie(token);
+      isLoadingAccount.value = false
+      // console.log('[vtsuru] 已获取账户信息')
+      if (!cookie.value.cookie || !isSameDay(new Date(), cookie.value.refreshDate)) {
+        refreshCookie(token)
       }
-      return result.data;
+      return result.data
     } else if (result.code == 401) {
-      localStorage.removeItem('JWT_Token');
+      localStorage.removeItem('JWT_Token')
       if (!token) {
-        cookie.value = undefined;
-        console.warn('[vtsuru] Cookie 已失效, 需要重新登陆');
-        message.error('Cookie 已失效, 需要重新登陆');
+        cookie.value = undefined
+        console.warn('[vtsuru] Cookie 已失效, 需要重新登陆')
+        message.error('Cookie 已失效, 需要重新登陆')
         setTimeout(() => {
-          location.reload();
-        }, 1500);
+          location.reload()
+        }, 1500)
       }
     } else {
-      console.warn('[vtsuru] ' + result.message);
-      message.error(result.message);
+      console.warn(`[vtsuru] ${result.message}`)
+      message.error(result.message)
     }
   }
-  isLoadingAccount.value = false;
+  isLoadingAccount.value = false
 }
 
 export function UpdateAccountLoop() {
   setInterval(() => {
     if (ACCOUNT.value && window.$route?.name != 'question-display') {
       // 防止在问题详情页刷新
-      GetSelfAccount();
+      GetSelfAccount()
     }
-  }, 60 * 1000);
+  }, 60 * 1000)
 }
 function refreshCookie(token?: string) {
   QueryPostAPIWithParams<string>(`${ACCOUNT_API_URL}refresh-token`, { token }).then((data) => {
     if (data.code == 200) {
       cookie.value = {
         cookie: data.data,
-        refreshDate: new Date().getTime()
-      };
-      console.log('[vtsuru] 已刷新Cookie');
+        refreshDate: new Date().getTime(),
+      }
+      console.log('[vtsuru] 已刷新Cookie')
     }
-  });
+  })
 }
 export async function SaveAccountSettings() {
-  return await QueryPostAPI(
-    ACCOUNT_API_URL + 'update-setting',
-    ACCOUNT.value?.settings
-  );
+  return QueryPostAPI(
+    `${ACCOUNT_API_URL}update-setting`,
+    ACCOUNT.value?.settings,
+  )
 }
 export async function SaveEnableFunctions(functions: FunctionTypes[]) {
-  return await QueryPostAPI(
-    ACCOUNT_API_URL + 'update-enable-functions',
-    functions
-  );
+  return QueryPostAPI(
+    `${ACCOUNT_API_URL}update-enable-functions`,
+    functions,
+  )
 }
 export async function SaveSetting(
   name:
@@ -90,239 +90,239 @@ export async function SaveSetting(
     | 'SongRequest'
     | 'QuestionBox'
     | 'SendEmail',
-  setting: unknown
+  setting: unknown,
 ) {
   const result = await QueryPostAPIWithParams(
-    ACCOUNT_API_URL + 'update-single-setting',
+    `${ACCOUNT_API_URL}update-single-setting`,
     {
-      name
+      name,
     },
-    setting
-  );
-  return result.message;
+    setting,
+  )
+  return result.message
 }
 export async function UpdateFunctionEnable(func: FunctionTypes) {
   if (ACCOUNT.value) {
     const oldValue = JSON.parse(
-      JSON.stringify(ACCOUNT.value.settings.enableFunctions)
-    );
+      JSON.stringify(ACCOUNT.value.settings.enableFunctions),
+    )
     if (ACCOUNT.value?.settings.enableFunctions.includes(func)) {
-      ACCOUNT.value.settings.enableFunctions =
-        ACCOUNT.value.settings.enableFunctions.filter((f) => f != func);
+      ACCOUNT.value.settings.enableFunctions
+        = ACCOUNT.value.settings.enableFunctions.filter(f => f != func)
     } else {
-      ACCOUNT.value.settings.enableFunctions.push(func);
+      ACCOUNT.value.settings.enableFunctions.push(func)
     }
     await SaveEnableFunctions(ACCOUNT.value?.settings.enableFunctions)
       .then((data) => {
         if (data.code == 200) {
           message.success(
-            `已${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}`
-          );
+            `已${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}`,
+          )
         } else {
           if (ACCOUNT.value) {
-            ACCOUNT.value.settings.enableFunctions = oldValue;
+            ACCOUNT.value.settings.enableFunctions = oldValue
           }
           message.error(
-            `${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}失败: ${data.message}`
-          );
+            `${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}失败: ${data.message}`,
+          )
         }
       })
       .catch((err) => {
         message.error(
-          `${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}失败: ${err}`
-        );
-      });
+          `${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}失败: ${err}`,
+        )
+      })
   }
 }
 export function useAccount() {
-  return ACCOUNT;
+  return ACCOUNT
 }
 
 export async function Register(
   name: string,
   email: string,
   password: string,
-  token: string
+  token: string,
 ): Promise<APIRoot<string>> {
   return QueryPostAPI<string>(`${ACCOUNT_API_URL}register`, {
     name,
     email,
     password,
-    token
-  });
+    token,
+  })
 }
 
 export async function Login(
   nameOrEmail: string,
-  password: string
+  password: string,
 ): Promise<APIRoot<string>> {
   return QueryPostAPI<string>(`${ACCOUNT_API_URL}login`, {
     nameOrEmail,
-    password
-  });
+    password,
+  })
 }
 export async function Self(token?: string): Promise<APIRoot<AccountInfo>> {
-  return QueryPostAPIWithParams<AccountInfo>(`${ACCOUNT_API_URL}self`, token ? { token } : undefined);
+  return QueryPostAPIWithParams<AccountInfo>(`${ACCOUNT_API_URL}self`, token ? { token } : undefined)
 }
 export async function AddBiliBlackList(
   id: number,
-  name: string
+  name: string,
 ): Promise<APIRoot<unknown>> {
   return QueryGetAPI<AccountInfo>(`${ACCOUNT_API_URL}black-list/add-bili`, {
-    id: id,
-    name: name
-  });
+    id,
+    name,
+  })
 }
 export async function DelBiliBlackList(id: number): Promise<APIRoot<unknown>> {
   return QueryGetAPI<AccountInfo>(`${ACCOUNT_API_URL}black-list/del-bili`, {
-    id: id
-  });
+    id,
+  })
 }
 export async function DelBlackList(id: number): Promise<APIRoot<unknown>> {
   return QueryGetAPI<AccountInfo>(`${ACCOUNT_API_URL}black-list/del`, {
-    id: id
-  });
+    id,
+  })
 }
-export function downloadConfigDirect(name: string) {
-  return QueryGetAPI<string>(USER_CONFIG_API_URL + 'get', {
-    name: name
-  });
+export async function downloadConfigDirect(name: string) {
+  return QueryGetAPI<string>(`${USER_CONFIG_API_URL}get`, {
+    name,
+  })
 }
-export type ConfigStatus = 'success' | 'error' | 'notfound';
+export type ConfigStatus = 'success' | 'error' | 'notfound'
 export async function DownloadConfig<T>(name: string, id?: number): Promise<
   | {
-    msg: undefined;
-    status: ConfigStatus;
-    data: T;
+    msg: undefined
+    status: ConfigStatus
+    data: T
   }
   | {
-    msg: string;
-    status: ConfigStatus;
-    data: undefined;
+    msg: string
+    status: ConfigStatus
+    data: undefined
   }
 > {
   try {
     const resp = await QueryGetAPI<string>(USER_CONFIG_API_URL + (id ? 'get-user' : 'get'), {
-      name: name,
-      id: id
-    });
+      name,
+      id,
+    })
     if (resp.code == 200) {
-      console.log('已获取配置文件: ' + name);
+      console.log(`已获取配置文件: ${name}`)
       return {
         msg: undefined,
         status: 'success',
-        data: JSON.parse(resp.data) as T
-      };
+        data: JSON.parse(resp.data) as T,
+      }
     } else if (resp.code == 404) {
-      console.error(`未找到名为 ${name} 的配置文件`);
+      console.error(`未找到名为 ${name} 的配置文件`)
       return {
         msg: `未找到名为 ${name} 的配置文件, 需要先上传`,
         status: 'notfound',
-        data: undefined
-      };
+        data: undefined,
+      }
     } else {
-      console.error(`无法获取配置文件 [${name}]: ` + resp.message);
+      console.error(`无法获取配置文件 [${name}]: ${resp.message}`)
       return {
-        msg: `无法获取配置文件 [${name}]: ` + resp.message,
+        msg: `无法获取配置文件 [${name}]: ${resp.message}`,
         status: 'error',
-        data: undefined
-      };
+        data: undefined,
+      }
     }
   } catch (err) {
-    console.error(`无法获取配置文件 [${name}]: ` + err);
+    console.error(`无法获取配置文件 [${name}]: ${err}`)
     return {
-      msg: `无法获取配置文件 [${name}]: ` + err,
+      msg: `无法获取配置文件 [${name}]: ${err}`,
       status: 'error',
-      data: undefined
-    };
+      data: undefined,
+    }
   }
 }
 export async function UploadConfig(name: string, data: unknown, isPublic: boolean = false) {
   try {
-    const resp = await QueryPostAPI(USER_CONFIG_API_URL + 'set', {
-      name: name,
+    const resp = await QueryPostAPI(`${USER_CONFIG_API_URL}set`, {
+      name,
       json: JSON.stringify(data),
-      public: isPublic
-    });
+      public: isPublic,
+    })
     if (resp.code == 200) {
-      console.log('已保存配置文件至服务器:' + name);
-      return true;
+      console.log(`已保存配置文件至服务器:${name}`)
+      return true
     } else {
-      console.error('保存失败: ' + resp.message);
+      console.error(`保存失败: ${resp.message}`)
     }
   } catch (err) {
-    console.error(`保存配置文件失败: ` + err);
+    console.error(`保存配置文件失败: ${err}`)
   }
-  return false;
+  return false
 }
 export async function GetConfigHash(name: string) {
   try {
-    const resp = await QueryGetAPI<string>(USER_CONFIG_API_URL + 'hash', {
-      name: name
-    });
+    const resp = await QueryGetAPI<string>(`${USER_CONFIG_API_URL}hash`, {
+      name,
+    })
     if (resp.code == 200) {
-      return resp.data;
+      return resp.data
     } else {
-      console.error(`获取配置文件hash失败: ` + resp.message);
-      return null;
+      console.error(`获取配置文件hash失败: ${resp.message}`)
+      return null
     }
   } catch (err) {
-    console.error(`获取配置文件hash失败: ` + err);
-    return null;
+    console.error(`获取配置文件hash失败: ${err}`)
+    return null
   }
 }
 export async function EnableFunction(func: FunctionTypes) {
   if (ACCOUNT.value) {
     if (ACCOUNT.value.settings.enableFunctions.includes(func)) {
-      return true;
+      return true
     } else {
-      ACCOUNT.value.settings.enableFunctions.push(func);
+      ACCOUNT.value.settings.enableFunctions.push(func)
       if (await updateFunctionEnable()) {
-        return true;
+        return true
       } else {
         ACCOUNT.value.settings.enableFunctions.splice(
           ACCOUNT.value.settings.enableFunctions.indexOf(func),
-          1
-        );
-        return false;
+          1,
+        )
+        return false
       }
     }
   }
-  return false;
+  return false
 }
 export async function DisableFunction(func: FunctionTypes) {
   if (ACCOUNT.value) {
     if (!ACCOUNT.value.settings.enableFunctions.includes(func)) {
-      return true;
+      return true
     } else {
       ACCOUNT.value.settings.enableFunctions.splice(
         ACCOUNT.value.settings.enableFunctions.indexOf(func),
-        1
-      );
+        1,
+      )
       if (await updateFunctionEnable()) {
-        return true;
+        return true
       } else {
-        ACCOUNT.value.settings.enableFunctions.push(func);
-        return false;
+        ACCOUNT.value.settings.enableFunctions.push(func)
+        return false
       }
     }
   }
-  return false;
+  return false
 }
 async function updateFunctionEnable() {
   if (ACCOUNT.value) {
     try {
       const data = await SaveEnableFunctions(
-        ACCOUNT.value.settings.enableFunctions
-      );
+        ACCOUNT.value.settings.enableFunctions,
+      )
       if (data.code == 200) {
-        return true;
+        return true
       } else {
-        return false;
+        return false
       }
     } catch (err) {
-      console.log(err);
-      return false;
+      console.log(err)
+      return false
     }
   }
 }
diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 91952c0..3bb31e9 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -1,5 +1,4 @@
-import { ExtendedDock24Filled } from '@vicons/fluent'
-import { UserConsumptionSetting } from './models/consumption'
+import type { UserConsumptionSetting } from './models/consumption'
 
 export interface APIRoot<T> {
   code: number
@@ -13,16 +12,16 @@ export interface PaginationResponse<T> extends APIRoot<T> {
   more: boolean
 }
 export enum IndexTypes {
-  Default
+  Default,
 }
 export enum SongListTypes {
-  Default
+  Default,
 }
 export enum GuardLevel {
   None = 0,
   Zongdu = 1,
   Tidu = 2,
-  Jianzhang = 3
+  Jianzhang = 3,
 }
 export interface UserBasicInfo {
   name: string
@@ -40,7 +39,7 @@ export interface UserInfo extends UserBasicInfo {
     isInBlackList: boolean
     templateTypes: { [key: string]: string }
     streamerInfo?: StreamerModel
-    allowCheckInRanking?: boolean  // 是否允许查看签到排行
+    allowCheckInRanking?: boolean // 是否允许查看签到排行
     allowQuestionBoxUploadImage?: boolean // 是否允许问题箱上传图片
   }
 }
@@ -57,7 +56,7 @@ export enum EventFetcherType {
   Application,
   OBS,
   Tauri,
-  Server
+  Server,
 }
 export interface AccountInfo extends UserInfo {
   isEmailVerified: boolean
@@ -105,7 +104,7 @@ export enum BiliAuthCodeStatusType {
   NotBind,
   Active,
   Notfound,
-  Inactive
+  Inactive,
 }
 export interface Setting_SendEmail {
   recieveQA: boolean
@@ -116,7 +115,7 @@ export enum SaftyLevels {
   Disabled,
   Low,
   Medium,
-  High
+  High,
 }
 export interface Setting_QuestionBox {
   allowUnregistedUser: boolean
@@ -236,15 +235,15 @@ export interface Setting_Point {
   shouldDiscontinueWhenSoldOut: boolean
 
   // 签到系统设置
-  enableCheckIn: boolean           // 是否启用签到功能
-  checkInKeyword: string           // 签到关键词
-  givePointsForCheckIn: boolean    // 是否为签到提供积分
-  baseCheckInPoints: number        // 基础签到积分
-  enableConsecutiveBonus: boolean  // 是否启用连续签到奖励
-  bonusPointsPerDay: number        // 每天额外奖励积分
-  maxBonusPoints: number           // 最大奖励积分
-  allowSelfCheckIn: boolean        // 是否允许自己签到
-  requireAuth: boolean             // 是否需要认证
+  enableCheckIn: boolean // 是否启用签到功能
+  checkInKeyword: string // 签到关键词
+  givePointsForCheckIn: boolean // 是否为签到提供积分
+  baseCheckInPoints: number // 基础签到积分
+  enableConsecutiveBonus: boolean // 是否启用连续签到奖励
+  bonusPointsPerDay: number // 每天额外奖励积分
+  maxBonusPoints: number // 最大奖励积分
+  allowSelfCheckIn: boolean // 是否允许自己签到
+  requireAuth: boolean // 是否需要认证
 }
 export interface Setting_QuestionDisplay {
   font?: string // Optional string, with a maximum length of 30 characters
@@ -271,28 +270,28 @@ export interface Setting_QuestionDisplay {
 export enum QuestionDisplayAlign {
   Left,
   Right,
-  Center
+  Center,
 }
 export enum SettingPointGiftAllowType {
   All,
-  WhiteList
+  WhiteList,
 }
 export enum KeywordMatchType {
   Full,
   Contains,
-  Regex
+  Regex,
 }
 
 export enum QueueSortType {
   GuardFirst,
   PaymentFist,
   TimeFirst,
-  FansMedalFirst
+  FansMedalFirst,
 }
 
 export enum QueueGiftFilterType {
   Or,
-  And
+  And,
 }
 export enum FunctionTypes {
   SongList,
@@ -312,7 +311,7 @@ export enum SongFrom {
   Custom,
   Netease,
   FiveSing,
-  Kugou
+  Kugou,
 }
 export interface SongsInfo {
   id: number
@@ -327,7 +326,7 @@ export interface SongsInfo {
   tags?: string[]
   createTime: number
   updateTime: number
-  //paidSong: boolean
+  // paidSong: boolean
   options?: SongRequestOption
   cover?: string
 }
@@ -344,13 +343,13 @@ export enum SongLanguage {
   Japanese, // 日文
   Spanish, // 西班牙文
   French, // 法文
-  Other //其他
+  Other, // 其他
 }
 export enum LevelTypes {
   Info,
   Success,
   Warn,
-  Error
+  Error,
 }
 export interface NotifactionInfo {
   id: string
@@ -359,7 +358,7 @@ export interface NotifactionInfo {
   message: string
   type: LevelTypes
 }
-//SENSITIVE_TERM, HATE, VIOLENCE, PORNOGRAPHY, POLITICS, ADVERTISING, AGGRESSION
+// SENSITIVE_TERM, HATE, VIOLENCE, PORNOGRAPHY, POLITICS, ADVERTISING, AGGRESSION
 export enum ViolationTypes {
   SENSITIVE_TERM,
   HATE,
@@ -367,9 +366,9 @@ export enum ViolationTypes {
   PORNOGRAPHY,
   POLITICS,
   ADVERTISING,
-  AGGRESSION
+  AGGRESSION,
 }
-export type QAReviewInfo = {
+export interface QAReviewInfo {
   isApproved: boolean
   saftyScore: number
   violationType: ViolationTypes[]
@@ -378,8 +377,8 @@ export interface QAInfo {
   id: number
   sender: UserBasicInfo
   target: UserBasicInfo
-  question: { message: string;  }
-  answer?: { message: string; createdAt: number }
+  question: { message: string }
+  answer?: { message: string, createdAt: number }
   isReaded?: boolean
   isSenderRegisted: boolean
   isPublic: boolean
@@ -433,7 +432,7 @@ export interface BatchScheduleRequest {
 export enum ThemeType {
   Auto = 'auto',
   Light = 'light',
-  Dark = 'dark'
+  Dark = 'dark',
 }
 export interface VideoCollectCreateModel {
   id?: string
@@ -467,12 +466,12 @@ export interface VideoCollectVideo {
 }
 export enum VideoFrom {
   Collect,
-  Spam
+  Spam,
 }
 export enum VideoStatus {
   Pending,
   Accepted,
-  Rejected
+  Rejected,
 }
 export interface VideoSender {
   sendAt: number
@@ -488,7 +487,7 @@ export interface VideoInfo {
 }
 export interface VideoCollectDetail {
   table: VideoCollectTable
-  videos: { info: VideoInfo; video: VideoCollectVideo }[]
+  videos: { info: VideoInfo, video: VideoCollectVideo }[]
 }
 export interface GameInfo {
   game_id: string
@@ -519,13 +518,13 @@ export interface OpenLiveLotteryUserInfo {
   level?: number
   avatar: string
   fans_medal_level: number
-  fans_medal_name: string //粉丝勋章名
-  fans_medal_wearing_status: boolean //该房间粉丝勋章佩戴情况
+  fans_medal_name: string // 粉丝勋章名
+  fans_medal_wearing_status: boolean // 该房间粉丝勋章佩戴情况
   guard_level: number
 }
 export enum OpenLiveLotteryType {
   Waiting,
-  Result
+  Result,
 }
 export interface UpdateLiveLotteryUsersModel {
   users: OpenLiveLotteryUserInfo[]
@@ -560,26 +559,26 @@ export enum SongRequestFrom {
   Danmaku,
   SC,
   Web,
-  Gift
+  Gift,
 }
 export enum QueueFrom {
   Manual,
   Danmaku,
   Gift,
-  Web
+  Web,
 }
 
 export enum SongRequestStatus {
   Waiting,
   Singing,
   Finish,
-  Cancel
+  Cancel,
 }
 export enum QueueStatus {
   Waiting,
   Progressing,
   Finish,
-  Cancel
+  Cancel,
 }
 export interface EventModel {
   type: EventDataTypes
@@ -606,7 +605,7 @@ export enum EventDataTypes {
   Like,
   SCDel,
   Enter,
-  Follow
+  Follow,
 }
 export interface ResponseQueueModel {
   id: number
@@ -659,7 +658,7 @@ export enum FeedbackType {
   Opinion,
   Bug,
   FunctionRequest,
-  Other
+  Other,
 }
 export enum FeedbackStatus {
   Padding,
@@ -667,7 +666,7 @@ export enum FeedbackStatus {
   Finish,
   Todo,
   Reject,
-  Developing
+  Developing,
 }
 export interface TagInfo {
   name: string
@@ -675,23 +674,23 @@ export interface TagInfo {
 }
 export enum GoodsStatus {
   Normal, // 商品正常
-  //OutOfStock,  // 商品无货
-  Discontinued // 商品下架
+  // OutOfStock,  // 商品无货
+  Discontinued, // 商品下架
 }
 export enum GoodsTypes {
   Physical,
-  Virtual
+  Virtual,
 }
 
 // 添加密钥选择模式枚举
 export enum KeySelectionMode {
   None,
-  Random,    // 随机选择
-  Sequential  // 顺序选择
+  Random, // 随机选择
+  Sequential, // 顺序选择
 }
 
 export interface PointGoodsSetting {
-  guardFree?: { year: number; month: number }
+  guardFree?: { year: number, month: number }
   allowGuardLevel?: GuardLevel
 }
 export interface ResponsePointGoodModel {
@@ -814,7 +813,7 @@ export interface ResponsePointOrder2UserModel {
 export enum PointOrderStatus {
   Pending, // 订单正在等待处理
   Shipped, // 订单已发货
-  Completed // 订单已完成
+  Completed, // 订单已完成
 }
 export interface ResponsePointHisrotyModel {
   point: number
@@ -831,7 +830,7 @@ export enum PointFrom {
   Danmaku,
   Manual,
   Use,
-  CheckIn
+  CheckIn,
 }
 
 export interface ResponseUserIndexModel {
@@ -850,7 +849,7 @@ export interface CheckInRankingInfo {
   lastCheckInTime: number
   isAuthed: boolean
   monthlyCheckInCount?: number // 本月签到次数
-  totalCheckInCount?: number   // 总签到次数
+  totalCheckInCount?: number // 总签到次数
 }
 
 // 签到结果
@@ -870,108 +869,108 @@ export enum UserFileTypes {
   Audio = 1,
   Video = 2,
   Document = 3,
-  Other = 4
+  Other = 4,
 }
 
 /**
  * 文件存储位置枚举
  */
 export enum UserFileLocation {
-  Local = 0
+  Local = 0,
 }
 
 /**
  * 文件上传响应接口
  */
 export interface UploadFileResponse {
-  id: number;
-  path: string;
-  name: string;
-  hash: string;
+  id: number
+  path: string
+  name: string
+  hash: string
 }
 
 /**
  * 扩展的文件信息接口，用于文件上传组件
  */
 export interface ExtendedUploadFileInfo {
-  id: string;  // 文件唯一标识符
-  name: string; // 文件名称
-  status: 'uploading' | 'finished' | 'error' | 'removed'; // 上传状态
-  thumbnailUrl?: string; // 缩略图URL
-  file?: File; // 可选的文件对象
+  id: string // 文件唯一标识符
+  name: string // 文件名称
+  status: 'uploading' | 'finished' | 'error' | 'removed' // 上传状态
+  thumbnailUrl?: string // 缩略图URL
+  file?: File // 可选的文件对象
 }
 
 // 弹幕投票相关类型定义
 export enum VoteResultMode {
-  ByCount = 0,    // 按人数计票
-  ByGiftValue = 1 // 按礼物价值计票
+  ByCount = 0, // 按人数计票
+  ByGiftValue = 1, // 按礼物价值计票
 }
 
 export interface APIFileModel {
-  id: number;
-  path: string;
-  name: string;
-  hash: string;
+  id: number
+  path: string
+  name: string
+  hash: string
 }
 
 export interface VoteConfig {
-  isEnabled: boolean;
-  showResults: boolean;
-  voteDurationSeconds: number;
-  voteCommand: string;
-  voteEndCommand: string;
-  voteTitle: string;
-  allowMultipleOptions: boolean;
-  allowMultipleVotes: boolean;
-  allowCustomOptions: boolean;
-  logVotes: boolean;
-  defaultOptions: string[];
-  backgroundFile?: APIFileModel;
-  backgroundColor: string;
-  textColor: string;
-  optionColor: string;
-  roundedCorners: boolean;
-  displayPosition: string;
-  allowGiftVoting: boolean;
-  minGiftPrice?: number;
-  voteResultMode: VoteResultMode;
+  isEnabled: boolean
+  showResults: boolean
+  voteDurationSeconds: number
+  voteCommand: string
+  voteEndCommand: string
+  voteTitle: string
+  allowMultipleOptions: boolean
+  allowMultipleVotes: boolean
+  allowCustomOptions: boolean
+  logVotes: boolean
+  defaultOptions: string[]
+  backgroundFile?: APIFileModel
+  backgroundColor: string
+  textColor: string
+  optionColor: string
+  roundedCorners: boolean
+  displayPosition: string
+  allowGiftVoting: boolean
+  minGiftPrice?: number
+  voteResultMode: VoteResultMode
 }
 
 export interface VoteOption {
-  text: string;
-  count: number;
-  voters: string[];
-  percentage?: number; // 用于OBS显示
+  text: string
+  count: number
+  voters: string[]
+  percentage?: number // 用于OBS显示
 }
 
 export interface ResponseVoteSession {
-  id: number;
-  title: string;
-  options: VoteOption[];
-  startTime: number;
-  endTime?: number;
-  isActive: boolean;
-  totalVotes: number;
-  creator?: UserBasicInfo;
+  id: number
+  title: string
+  options: VoteOption[]
+  startTime: number
+  endTime?: number
+  isActive: boolean
+  totalVotes: number
+  creator?: UserBasicInfo
 }
 
 export interface RequestCreateBulletVote {
-  title: string;
-  options: string[];
-  allowMultipleVotes: boolean;
-  durationSeconds?: number;
+  title: string
+  options: string[]
+  allowMultipleVotes: boolean
+  durationSeconds?: number
 }
 
 export interface VoteOBSData {
-  title: string;
-  options: VoteOption[];
-  totalVotes: number;
-  showResults: boolean;
-  isEnding: boolean;
-  backgroundImage?: string;
-  backgroundColor: string;
-  textColor: string;
-  optionColor: string;
-  roundedCorners: boolean;
-  displayPosition: string;
-}
\ No newline at end of file
+  title: string
+  options: VoteOption[]
+  totalVotes: number
+  showResults: boolean
+  isEnding: boolean
+  backgroundImage?: string
+  backgroundColor: string
+  textColor: string
+  optionColor: string
+  roundedCorners: boolean
+  displayPosition: string
+}
diff --git a/src/api/models/consumption.ts b/src/api/models/consumption.ts
index a32a3b0..a1a0d92 100644
--- a/src/api/models/consumption.ts
+++ b/src/api/models/consumption.ts
@@ -1,16 +1,16 @@
-export enum ConsumptionTypes{
+export enum ConsumptionTypes {
   DanmakuStorage,
 }
 
 export interface IDeductionSetting {
   isEnabled: boolean
- }
+}
 export interface UserConsumptionSetting {
   danmakuStorage: DanmakuStorageDeductionSetting
 }
 export enum DeductionStorageType {
   Time,
-  Count
+  Count,
 }
 export interface DanmakuStorageDeductionSetting extends IDeductionSetting {
   storageType: DeductionStorageType
diff --git a/src/api/models/forum.ts b/src/api/models/forum.ts
index 768b710..99fd56c 100644
--- a/src/api/models/forum.ts
+++ b/src/api/models/forum.ts
@@ -1,4 +1,4 @@
-import { UserBasicInfo } from '../api-models'
+import type { UserBasicInfo } from '../api-models'
 
 export enum ForumTopicSortTypes {
   Time,
@@ -26,9 +26,9 @@ export interface ForumSetting {
   sendTopicDelay: number // Assuming the default value is handled elsewhere
 }
 export interface ForumUserModel extends UserBasicInfo {
- isAdmin: boolean
+  isAdmin: boolean
 }
-export type ForumModel = {
+export interface ForumModel {
   id: number
   name: string
   owner: ForumUserModel
@@ -51,7 +51,7 @@ export type ForumModel = {
   isAdmin: boolean
   isMember: boolean
 }
-export type ForumSectionModel = {
+export interface ForumSectionModel {
   id: number
   name: string
   description: string
@@ -61,7 +61,7 @@ export enum ForumTopicTypes {
   Default,
   Vote,
 }
-export type ForumTopicSetting = {
+export interface ForumTopicSetting {
   canReply?: boolean
 }
 export interface ForumTopicBaseModel {
diff --git a/src/api/query.ts b/src/api/query.ts
index c7c65cc..e8daed4 100644
--- a/src/api/query.ts
+++ b/src/api/query.ts
@@ -1,21 +1,19 @@
-/* eslint-disable indent */
+import type { APIRoot, PaginationResponse } from './api-models'
 import { apiFail } from '@/data/constants'
-import { useLocalStorage } from '@vueuse/core'
-import { APIRoot, PaginationResponse } from './api-models'
-import { cookie } from './account';
+import { cookie } from './account'
 
 export async function QueryPostAPI<T>(
   urlString: string,
   body?: unknown,
   headers?: [string, string][],
-  contentType?: string
+  contentType?: string,
 ): Promise<APIRoot<T>> {
-  return await QueryPostAPIWithParams<T>(
+  return QueryPostAPIWithParams<T>(
     urlString,
     undefined,
     body,
     contentType || 'application/json',
-    headers
+    headers,
   )
 }
 export async function QueryPostAPIWithParams<T>(
@@ -23,15 +21,15 @@ export async function QueryPostAPIWithParams<T>(
   params?: any,
   body?: any,
   contentType?: string,
-  headers?: [string, string][]
+  headers?: [string, string][],
 ): Promise<APIRoot<T>> {
   // @ts-expect-error 忽略
-  return await QueryPostAPIWithParamsInternal<APIRoot<T>>(
+  return QueryPostAPIWithParamsInternal<APIRoot<T>>(
     urlString,
     params,
     body,
     contentType,
-    headers
+    headers,
   )
 }
 async function QueryPostAPIWithParamsInternal<T>(
@@ -39,36 +37,36 @@ async function QueryPostAPIWithParamsInternal<T>(
   params?: any,
   body?: any,
   contentType: string = 'application/json',
-  headers: [string, string][] = []
+  headers: [string, string][] = [],
 ) {
   let url: URL
   try {
     url = new URL(urlString.toString())
   } catch (e) {
-    console.error('尝试解析API地址失败: ' + urlString, e)
+    console.error(`尝试解析API地址失败: ${urlString}`, e)
     return {
       code: 400,
-      message: '无效的API地址: ' + urlString,
-      data: {} as T
+      message: `无效的API地址: ${urlString}`,
+      data: {} as T,
     }
   }
   url.search = getParams(params)
   headers ??= []
-  let h = {} as { [key: string]: string }
+  const h = {} as { [key: string]: string }
   headers.forEach((header) => {
     h[header[0]] = header[1]
   })
-  if (cookie.value.cookie) h['Authorization'] = `Bearer ${cookie.value.cookie}`
+  if (cookie.value.cookie) h.Authorization = `Bearer ${cookie.value.cookie}`
 
   // 当使用FormData时，不手动设置Content-Type，让浏览器自动添加boundary
   if (!(body instanceof FormData)) {
     h['Content-Type'] = contentType
   }
 
-  return await QueryAPIInternal<T>(url, {
+  return QueryAPIInternal<T>(url, {
     method: 'post',
     headers: h,
-    body: body instanceof FormData ? body : typeof body === 'string' ? body : JSON.stringify(body)
+    body: body instanceof FormData ? body : typeof body === 'string' ? body : JSON.stringify(body),
   })
 }
 async function QueryAPIInternal<T>(url: URL, init: RequestInit) {
@@ -88,36 +86,36 @@ async function QueryAPIInternal<T>(url: URL, init: RequestInit) {
 export async function QueryGetAPI<T>(
   urlString: string,
   params?: any,
-  headers?: [string, string][]
+  headers?: [string, string][],
 ): Promise<APIRoot<T>> {
   // @ts-expect-error 忽略
-  return await QueryGetAPIInternal<APIRoot<T>>(urlString, params, headers)
+  return QueryGetAPIInternal<APIRoot<T>>(urlString, params, headers)
 }
 async function QueryGetAPIInternal<T>(
   urlString: string,
   params?: any,
-  headers?: [string, string][]
+  headers?: [string, string][],
 ) {
   try {
     let url: URL
     try {
       url = new URL(urlString.toString())
     } catch (e) {
-      console.error('尝试解析API地址失败: ' + urlString, e)
+      console.error(`尝试解析API地址失败: ${urlString}`, e)
       return {
         code: 400,
-        message: '无效的API地址: ' + urlString,
-        data: {} as T
+        message: `无效的API地址: ${urlString}`,
+        data: {} as T,
       }
     }
     url.search = getParams(params)
     headers ??= []
-    let h = {} as { [key: string]: string }
+    const h = {} as { [key: string]: string }
     headers.forEach((header) => {
       h[header[0]] = header[1]
     })
     if (cookie.value.cookie) {
-      h['Authorization'] = `Bearer ${cookie.value.cookie}`
+      h.Authorization = `Bearer ${cookie.value.cookie}`
     }
     return await QueryAPIInternal<T>(url, { method: 'get', headers: h })
   } catch (err) {
@@ -151,21 +149,21 @@ function getParams(params: any) {
 }
 export async function QueryPostPaginationAPI<T>(
   url: string,
-  body?: unknown
+  body?: unknown,
 ): Promise<PaginationResponse<T>> {
   // @ts-expect-error 忽略
-  return await QueryPostAPIWithParamsInternal<PaginationResponse<T>>(
+  return QueryPostAPIWithParamsInternal<PaginationResponse<T>>(
     url,
     undefined,
-    body
+    body,
   )
 }
 export async function QueryGetPaginationAPI<T>(
   urlString: string,
-  params?: unknown
+  params?: unknown,
 ): Promise<PaginationResponse<T>> {
   // @ts-expect-error 忽略
-  return await QueryGetAPIInternal<PaginationResponse<T>>(urlString, params)
+  return QueryGetAPIInternal<PaginationResponse<T>>(urlString, params)
 }
 export function GetHeaders(): [string, string][] {
   return [['Authorization', `Bearer ${cookie.value?.cookie}`]]
diff --git a/src/api/user.ts b/src/api/user.ts
index 74b7e1c..d2c0da2 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,8 +1,8 @@
-import { QueryGetAPI } from '@/api/query'
-import { USER_API_URL, apiFail } from '@/data/constants'
+import type { APIRoot, UserBasicInfo, UserInfo } from './api-models'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { APIRoot, UserBasicInfo, UserInfo } from './api-models'
+import { QueryGetAPI } from '@/api/query'
+import { apiFail, USER_API_URL } from '@/data/constants'
 
 export const USERS = ref<{ [id: string]: UserInfo }>({})
 
@@ -24,7 +24,7 @@ export async function useUser(id: string | undefined = undefined) {
     }
     return USERS.value[id]
   } else {
-    console.error('指定id: ' + id + ' 无效')
+    console.error(`指定id: ${id} 无效`)
   }
 }
 export async function useUserWithUId(id: number) {
@@ -45,6 +45,6 @@ export async function getUserBasicInfo(id: string | number | undefined) {
 
 export async function GetInfo(id: string): Promise<APIRoot<UserInfo>> {
   return QueryGetAPI<UserInfo>(`${USER_API_URL}info`, {
-    id: id,
+    id,
   })
 }
diff --git a/src/assets/controller/DirectInput/NOTE-button prompt placement.md b/src/assets/controller/DirectInput/NOTE-button prompt placement.md
index 52125a1..aa637fa 100644
--- a/src/assets/controller/DirectInput/NOTE-button prompt placement.md	
+++ b/src/assets/controller/DirectInput/NOTE-button prompt placement.md	
@@ -1,5 +1,5 @@
 ## Regarding DirectInput prompts
 
-Due to the way DirectInput buttons are approached; The order of the face button across various DirectInput-compatible Game Controller may not be consistent. This button prompt theme is best used for HOTAS or Racing Wheels. Although: **this theme will provide *up* to 32 Buttons Icons**. 
+Due to the way DirectInput buttons are approached; The order of the face button across various DirectInput-compatible Game Controller may not be consistent. This button prompt theme is best used for HOTAS or Racing Wheels. Although: **this theme will provide *up* to 32 Buttons Icons**.
 
-If using newer Input APIs such as SDL_GameController or Windows GameInput: We recommend using the "Shared" theme as a way to handle generic game controllers.
\ No newline at end of file
+If using newer Input APIs such as SDL_GameController or Windows GameInput: We recommend using the "Shared" theme as a way to handle generic game controllers.
diff --git a/src/client/ClientAutoAction.vue b/src/client/ClientAutoAction.vue
index b7d2197..34170be 100644
--- a/src/client/ClientAutoAction.vue
+++ b/src/client/ClientAutoAction.vue
@@ -1,51 +1,51 @@
 <script setup lang="ts">
-import { AutoActionItem, TriggerType, useAutoAction } from '@/client/store/useAutoAction';
-import { useDanmakuClient } from '@/store/useDanmakuClient';
-import { useBiliCookie } from '@/client/store/useBiliCookie';
-import { useWebFetcher } from '@/store/useWebFetcher';
-import { useBiliFunction } from '@/client/store/useBiliFunction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { ArrowDown24Regular, ArrowUp24Regular, Edit16Regular, Target24Filled } from '@vicons/fluent'
 import {
   NAlert,
   NButton,
   NCard,
-  NCountdown,
+  NDataTable,
+  NDivider,
   NDropdown,
   NEmpty,
+  NIcon,
+  NInput,
+  NInputNumber,
   NModal,
   NPopconfirm,
   NSelect,
   NSpace,
+  NSwitch,
   NTabPane,
   NTabs,
   NTag,
-  useMessage,
-  NDataTable,
-  NSwitch,
-  NDivider,
-  NIcon,
   NText,
   NTooltip,
-  NInput,
-  NInputNumber
-} from 'naive-ui';
-import { computed, h, onMounted, onUnmounted, ref, watch, reactive } from 'vue';
-import { ArrowUp24Regular, ArrowDown24Regular, Target24Filled, Edit16Regular } from '@vicons/fluent';
-import AutoActionEditor from './components/autoaction/AutoActionEditor.vue';
-import GlobalScheduledSettings from './components/autoaction/settings/GlobalScheduledSettings.vue';
-import TimerCountdown from './components/autoaction/TimerCountdown.vue';
-import DataManager from './components/autoaction/DataManager.vue';
-import ActionHistoryViewer from './components/autoaction/ActionHistoryViewer.vue';
-import CheckInSettings from './components/autoaction/settings/CheckInSettings.vue';
+  useMessage,
+} from 'naive-ui'
+import { computed, h, reactive, ref } from 'vue'
+import { TriggerType, useAutoAction } from '@/client/store/useAutoAction'
+import { useBiliCookie } from '@/client/store/useBiliCookie'
+import { useBiliFunction } from '@/client/store/useBiliFunction'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import { useWebFetcher } from '@/store/useWebFetcher'
+import ActionHistoryViewer from './components/autoaction/ActionHistoryViewer.vue'
+import AutoActionEditor from './components/autoaction/AutoActionEditor.vue'
+import DataManager from './components/autoaction/DataManager.vue'
+import CheckInSettings from './components/autoaction/settings/CheckInSettings.vue'
+import GlobalScheduledSettings from './components/autoaction/settings/GlobalScheduledSettings.vue'
+import TimerCountdown from './components/autoaction/TimerCountdown.vue'
 
-const autoActionStore = useAutoAction();
-const message = useMessage();
-const danmakuClient = useDanmakuClient();
-const biliCookieStore = useBiliCookie();
-const webFetcherStore = useWebFetcher();
-const biliFunc = useBiliFunction();
+const autoActionStore = useAutoAction()
+const message = useMessage()
+const danmakuClient = useDanmakuClient()
+const biliCookieStore = useBiliCookie()
+const webFetcherStore = useWebFetcher()
+const biliFunc = useBiliFunction()
 
 // 从 store 获取 enabledTriggerTypes
-const enabledTriggerTypes = computed(() => autoActionStore.enabledTriggerTypes);
+const enabledTriggerTypes = computed(() => autoActionStore.enabledTriggerTypes)
 
 // 分类标签
 const typeMap = {
@@ -56,18 +56,18 @@ const typeMap = {
   [TriggerType.ENTER]: '入场欢迎',
   [TriggerType.SCHEDULED]: '定时发送',
   [TriggerType.SUPER_CHAT]: 'SC感谢',
-};
+}
 
-const activeTab = ref(TriggerType.GIFT);
-const activeMainTab = ref('action-management');
-const showAddModal = ref(false);
-const selectedTriggerType = ref<TriggerType>(TriggerType.GIFT);
-const editingActionId = ref<string | null>(null);
-const showSetNextModal = ref(false);
-const targetNextActionId = ref<string | null>(null);
-const showTestModal = ref(false);
-const testUid = ref<string>('10004');
-const currentTestType = ref<TriggerType | null>(null);
+const activeTab = ref(TriggerType.GIFT)
+const activeMainTab = ref('action-management')
+const showAddModal = ref(false)
+const selectedTriggerType = ref<TriggerType>(TriggerType.GIFT)
+const editingActionId = ref<string | null>(null)
+const showSetNextModal = ref(false)
+const targetNextActionId = ref<string | null>(null)
+const showTestModal = ref(false)
+const testUid = ref<string>('10004')
+const currentTestType = ref<TriggerType | null>(null)
 
 const triggerTypeOptions = [
   { label: '自动回复', value: TriggerType.DANMAKU },
@@ -77,46 +77,46 @@ const triggerTypeOptions = [
   { label: '入场欢迎', value: TriggerType.ENTER },
   { label: '定时发送', value: TriggerType.SCHEDULED },
   { label: 'SC感谢', value: TriggerType.SUPER_CHAT },
-];
+]
 
-const customColumnsByType = reactive<Record<string, any[]>>({});
+const customColumnsByType = reactive<Record<string, any[]>>({})
 
 function toggleActionStatus(action: AutoActionItem) {
-  autoActionStore.toggleAutoAction(action.id, !action.enabled);
-  message.success(`已${!action.enabled ? '启用' : '禁用'}操作: ${action.name || '未命名自动操作'}`);
+  autoActionStore.toggleAutoAction(action.id, !action.enabled)
+  message.success(`已${!action.enabled ? '启用' : '禁用'}操作: ${action.name || '未命名自动操作'}`)
 }
 
 function getStatusTag(action: AutoActionItem) {
   // 检查是否需要登录且未登录
-  const config = action.actionConfig as any; // 使用类型断言访问 type
-  const requiresLogin = config.type === 'sendDanmaku' || config.type === 'sendMessage';
+  const config = action.actionConfig as any // 使用类型断言访问 type
+  const requiresLogin = config.type === 'sendDanmaku' || config.type === 'sendMessage'
   if (requiresLogin && !biliCookieStore.isCookieValid) {
-    return { type: 'error' as const, text: '需登录', tooltip: '发送弹幕或私信需要登录B站账号' };
+    return { type: 'error' as const, text: '需登录', tooltip: '发送弹幕或私信需要登录B站账号' }
   }
   // 1. Check type enable switch (从 store 读取)
   if (!enabledTriggerTypes.value[action.triggerType]) {
-    return { type: 'warning' as const, text: '类型已禁用', tooltip: `所有${typeMap[action.triggerType]}类型的操作已禁用` };
+    return { type: 'warning' as const, text: '类型已禁用', tooltip: `所有${typeMap[action.triggerType]}类型的操作已禁用` }
   }
   // 2. Check action self enabled
   if (!action.enabled) {
-    return { type: 'error' as const, text: '已禁用', tooltip: '此操作已被手动禁用' };
+    return { type: 'error' as const, text: '已禁用', tooltip: '此操作已被手动禁用' }
   }
   // 3. Check if template is empty
-  if (!action.template ||
-      (typeof action.template === 'string' && action.template.trim() === '') ||
-      (Array.isArray(action.template) && action.template.length === 0)) {
-    return { type: 'warning' as const, text: '模板为空', tooltip: '请设置有效的模板内容' };
+  if (!action.template
+    || (typeof action.template === 'string' && action.template.trim() === '')
+    || (Array.isArray(action.template) && action.template.length === 0)) {
+    return { type: 'warning' as const, text: '模板为空', tooltip: '请设置有效的模板内容' }
   }
   // 4. Check onlyDuringLive condition
   if (action.triggerConfig.onlyDuringLive && !autoActionStore.isLive) {
-    return { type: 'warning' as const, text: '待机中', tooltip: '此操作设置为仅在直播时触发' };
+    return { type: 'warning' as const, text: '待机中', tooltip: '此操作设置为仅在直播时触发' }
   }
   // 5. Check ignoreTianXuan condition
   if (action.triggerConfig.ignoreTianXuan && autoActionStore.isTianXuanActive) {
-    return { type: 'warning' as const, text: '暂停中', tooltip: '此操作设置为忽略天选时刻，当前正在进行天选' };
+    return { type: 'warning' as const, text: '暂停中', tooltip: '此操作设置为忽略天选时刻，当前正在进行天选' }
   }
   // 6. All conditions met, enabled
-  return { type: 'success' as const, text: '已启用', tooltip: '此操作当前处于活动状态' };
+  return { type: 'success' as const, text: '已启用', tooltip: '此操作当前处于活动状态' }
 }
 
 const baseColumns = [
@@ -124,15 +124,15 @@ const baseColumns = [
     title: '名称',
     key: 'name',
     render: (row: AutoActionItem) => {
-      return h('div', { style: 'font-weight: 500' }, row.name || '未命名自动操作');
-    }
+      return h('div', { style: 'font-weight: 500' }, row.name || '未命名自动操作')
+    },
   },
   {
     title: '状态',
     key: 'enabled',
     width: 100,
     render: (row: AutoActionItem) => {
-      const status = getStatusTag(row);
+      const status = getStatusTag(row)
 
       const options = [
         {
@@ -140,52 +140,54 @@ const baseColumns = [
           key: 'toggleEnable',
           props: {
             onClick: () => {
-              autoActionStore.toggleAutoAction(row.id, !row.enabled);
-              message.success(`已${!row.enabled ? '启用' : '禁用'}操作: ${row.name || '未命名自动操作'}`);
-            }
-          }
+              autoActionStore.toggleAutoAction(row.id, !row.enabled)
+              message.success(`已${!row.enabled ? '启用' : '禁用'}操作: ${row.name || '未命名自动操作'}`)
+            },
+          },
         },
         {
           label: row.triggerConfig.onlyDuringLive ? '取消"仅直播触发"' : '设为"仅直播触发"',
           key: 'toggleLive',
           props: {
             onClick: () => {
-              row.triggerConfig.onlyDuringLive = !row.triggerConfig.onlyDuringLive;
-              message.success(`操作"${row.name || '未命名'}"已${row.triggerConfig.onlyDuringLive ? '设为' : '取消'}仅直播触发`);
+              row.triggerConfig.onlyDuringLive = !row.triggerConfig.onlyDuringLive
+              message.success(`操作"${row.name || '未命名'}"已${row.triggerConfig.onlyDuringLive ? '设为' : '取消'}仅直播触发`)
               if (row.triggerType === TriggerType.SCHEDULED) {
-                if (row.triggerConfig.useGlobalTimer) autoActionStore.restartGlobalTimer();
-                else {
-                  autoActionStore.stopIndividualTimer(row.id);
-                  autoActionStore.startIndividualTimer(row);
+                if (row.triggerConfig.useGlobalTimer) {
+                  autoActionStore.restartGlobalTimer()
+                } else {
+                  autoActionStore.stopIndividualTimer(row.id)
+                  autoActionStore.startIndividualTimer(row)
                 }
               }
-            }
-          }
+            },
+          },
         },
         {
           label: row.triggerConfig.ignoreTianXuan ? '取消"忽略天选暂停"' : '设为"忽略天选暂停"',
           key: 'toggleTianXuan',
           props: {
             onClick: () => {
-              row.triggerConfig.ignoreTianXuan = !row.triggerConfig.ignoreTianXuan;
-              message.success(`操作"${row.name || '未命名'}"已${row.triggerConfig.ignoreTianXuan ? '设为' : '取消'}忽略天选暂停`);
+              row.triggerConfig.ignoreTianXuan = !row.triggerConfig.ignoreTianXuan
+              message.success(`操作"${row.name || '未命名'}"已${row.triggerConfig.ignoreTianXuan ? '设为' : '取消'}忽略天选暂停`)
               if (row.triggerType === TriggerType.SCHEDULED) {
-                if (row.triggerConfig.useGlobalTimer) autoActionStore.restartGlobalTimer();
-                else {
-                  autoActionStore.stopIndividualTimer(row.id);
-                  autoActionStore.startIndividualTimer(row);
+                if (row.triggerConfig.useGlobalTimer) {
+                  autoActionStore.restartGlobalTimer()
+                } else {
+                  autoActionStore.stopIndividualTimer(row.id)
+                  autoActionStore.startIndividualTimer(row)
                 }
               }
-            }
-          }
-        }
-      ];
+            },
+          },
+        },
+      ]
 
       return h(
         NDropdown,
         {
           trigger: 'click',
-          options: options,
+          options,
           showArrow: true,
         },
         {
@@ -199,18 +201,18 @@ const baseColumns = [
                   type: status.type,
                   size: 'small',
                   round: true,
-                  style: 'cursor: pointer;'
+                  style: 'cursor: pointer;',
                 },
-                { default: () => status.text }
+                { default: () => status.text },
               ),
-              default: () => status.tooltip
-            }
-          )
-        }
-      );
-    }
+              default: () => status.tooltip,
+            },
+          ),
+        },
+      )
+    },
   },
-];
+]
 
 const remainingTimeColumn = {
   title: '下一次发送 (估算)',
@@ -218,13 +220,13 @@ const remainingTimeColumn = {
   width: 180,
   render: (row: AutoActionItem) => {
     if (!enabledTriggerTypes.value[TriggerType.SCHEDULED]) {
-      return h(NText, { depth: 3 }, '类型已禁用');
+      return h(NText, { depth: 3 }, '类型已禁用')
     }
-    return h(TimerCountdown, { actionId: row.id });
-  }
-};
+    return h(TimerCountdown, { actionId: row.id })
+  },
+}
 
-const createActionsColumn = (type: TriggerType, items: AutoActionItem[]) => {
+function createActionsColumn(type: TriggerType, items: AutoActionItem[]) {
   return {
     title: '操作',
     key: 'actions',
@@ -237,38 +239,32 @@ const createActionsColumn = (type: TriggerType, items: AutoActionItem[]) => {
             size: 'small',
             type: 'primary',
             ghost: true,
-            onClick: () => editAction(row.id)
+            onClick: () => editAction(row.id),
           },
-          { default: () => '编辑' }
-        )
-      ];
+          { default: () => '编辑' },
+        ),
+      ]
 
       if (type === TriggerType.SCHEDULED) {
         buttons.unshift(
-          h(NButton,
-            {
-              size: 'small',
-              circle: true,
-              tertiary: true,
-              disabled: index === 0,
-              onClick: () => moveAction(row.id, 'up'),
-              title: '上移'
-            },
-            { icon: () => h(NIcon, { component: ArrowUp24Regular }) }
-          ),
-          h(NButton,
-            {
-              size: 'small',
-              circle: true,
-              tertiary: true,
-              style: 'margin-left: 6px;',
-              disabled: index === items.length - 1,
-              onClick: () => moveAction(row.id, 'down'),
-              title: '下移'
-            },
-            { icon: () => h(NIcon, { component: ArrowDown24Regular }) }
-          )
-        );
+          h(NButton, {
+            size: 'small',
+            circle: true,
+            tertiary: true,
+            disabled: index === 0,
+            onClick: () => moveAction(row.id, 'up'),
+            title: '上移',
+          }, { icon: () => h(NIcon, { component: ArrowUp24Regular }) }),
+          h(NButton, {
+            size: 'small',
+            circle: true,
+            tertiary: true,
+            style: 'margin-left: 6px;',
+            disabled: index === items.length - 1,
+            onClick: () => moveAction(row.id, 'down'),
+            title: '下移',
+          }, { icon: () => h(NIcon, { component: ArrowDown24Regular }) }),
+        )
       }
 
       buttons.push(
@@ -278,162 +274,162 @@ const createActionsColumn = (type: TriggerType, items: AutoActionItem[]) => {
             trigger: 'hover',
             options: [
               { label: '复制', key: 'duplicate' },
-              { label: '删除', key: 'delete' }
+              { label: '删除', key: 'delete' },
             ],
             onSelect: (key: string) => {
-              if (key === 'duplicate') duplicateAutoAction(row);
-              if (key === 'delete') removeAutoAction(row);
-            }
+              if (key === 'duplicate') duplicateAutoAction(row)
+              if (key === 'delete') removeAutoAction(row)
+            },
           },
           {
             default: () => h(
               NButton,
               { size: 'small', tertiary: true, style: 'padding: 0 8px; margin-left: 6px;' },
-              { default: () => '•••' }
-            )
-          }
-        )
-      );
+              { default: () => '•••' },
+            ),
+          },
+        ),
+      )
 
-      return h(NSpace, { justify: 'end', align: 'center' }, { default: () => buttons });
-    }
-  };
-};
+      return h(NSpace, { justify: 'end', align: 'center' }, { default: () => buttons })
+    },
+  }
+}
 
-const getColumnsForType = (type: TriggerType) => {
-  const items = groupedActions.value[type] || [];
-  const customCols = customColumnsByType[type] || [];
-  const actionsCol = createActionsColumn(type, items);
+function getColumnsForType(type: TriggerType) {
+  const items = groupedActions.value[type] || []
+  const customCols = customColumnsByType[type] || []
+  const actionsCol = createActionsColumn(type, items)
 
   if (type === TriggerType.SCHEDULED) {
-    return [...baseColumns, remainingTimeColumn, ...customCols, actionsCol];
+    return [...baseColumns, remainingTimeColumn, ...customCols, actionsCol]
   }
 
-  return [...baseColumns, ...customCols, actionsCol];
-};
+  return [...baseColumns, ...customCols, actionsCol]
+}
 
 const groupedActions = computed(() => {
-  const grouped: Record<string, AutoActionItem[]> = {};
-  Object.values(TriggerType).forEach(type => {
-    grouped[type as string] = [];
-  });
-  autoActionStore.autoActions.forEach(action => {
+  const grouped: Record<string, AutoActionItem[]> = {}
+  Object.values(TriggerType).forEach((type) => {
+    grouped[type as string] = []
+  })
+  autoActionStore.autoActions.forEach((action) => {
     if (grouped[action.triggerType]) {
-      grouped[action.triggerType].push(action);
+      grouped[action.triggerType].push(action)
     }
-  });
-  Object.keys(grouped).forEach(type => {
+  })
+  Object.keys(grouped).forEach((type) => {
     grouped[type].sort((a, b) => {
-      if (a.enabled === b.enabled) return 0;
-      return a.enabled ? -1 : 1;
-    });
-  });
-  return grouped;
-});
+      if (a.enabled === b.enabled) return 0
+      return a.enabled ? -1 : 1
+    })
+  })
+  return grouped
+})
 
 const eligibleGlobalActions = computed(() => {
-  if (!enabledTriggerTypes.value) return [];
+  if (!enabledTriggerTypes.value) return []
   return autoActionStore.autoActions.filter(action =>
-    action.triggerType === TriggerType.SCHEDULED &&
-    enabledTriggerTypes.value[TriggerType.SCHEDULED] &&
-    action.enabled &&
-    action.triggerConfig.useGlobalTimer &&
-    (!action.triggerConfig.onlyDuringLive || autoActionStore.isLive) &&
-    (!action.triggerConfig.ignoreTianXuan || !autoActionStore.isTianXuanActive)
+    action.triggerType === TriggerType.SCHEDULED
+    && enabledTriggerTypes.value[TriggerType.SCHEDULED]
+    && action.enabled
+    && action.triggerConfig.useGlobalTimer
+    && (!action.triggerConfig.onlyDuringLive || autoActionStore.isLive)
+    && (!action.triggerConfig.ignoreTianXuan || !autoActionStore.isTianXuanActive),
   ).map(action => ({
     label: action.name || '未命名操作',
-    value: action.id
-  }));
-});
+    value: action.id,
+  }))
+})
 
 function openSetNextModal() {
-  targetNextActionId.value = autoActionStore.nextScheduledAction?.id ?? null;
-  showSetNextModal.value = true;
+  targetNextActionId.value = autoActionStore.nextScheduledAction?.id ?? null
+  showSetNextModal.value = true
 }
 
 function confirmSetNextAction() {
   if (targetNextActionId.value) {
-    autoActionStore.setNextGlobalAction(targetNextActionId.value);
-    message.success('已指定下一条执行的操作');
+    autoActionStore.setNextGlobalAction(targetNextActionId.value)
+    message.success('已指定下一条执行的操作')
   }
-  showSetNextModal.value = false;
+  showSetNextModal.value = false
 }
 
 function addAutoAction() {
   if (!selectedTriggerType.value) {
-    message.error('请选择触发类型');
-    return;
+    message.error('请选择触发类型')
+    return
   }
-  const newAction = autoActionStore.addAutoAction(selectedTriggerType.value);
-  showAddModal.value = false;
-  activeTab.value = selectedTriggerType.value;
-  editingActionId.value = newAction.id;
-  message.success('已添加新的自动操作');
+  const newAction = autoActionStore.addAutoAction(selectedTriggerType.value)
+  showAddModal.value = false
+  activeTab.value = selectedTriggerType.value
+  editingActionId.value = newAction.id
+  message.success('已添加新的自动操作')
 }
 
 function removeAutoAction(action: AutoActionItem) {
-  autoActionStore.removeAutoAction(action.id);
+  autoActionStore.removeAutoAction(action.id)
   if (editingActionId.value === action.id) {
-    editingActionId.value = null;
+    editingActionId.value = null
   }
-  message.success('已删除自动操作');
+  message.success('已删除自动操作')
 }
 
 function duplicateAutoAction(action: AutoActionItem) {
-  const newActionData = JSON.parse(JSON.stringify(action));
-  const newActionId = `auto-action-${Date.now()}`;
-  newActionData.id = newActionId;
-  newActionData.name += ' (复制)';
-  autoActionStore.autoActions.push(newActionData);
+  const newActionData = JSON.parse(JSON.stringify(action))
+  const newActionId = `auto-action-${Date.now()}`
+  newActionData.id = newActionId
+  newActionData.name += ' (复制)'
+  autoActionStore.autoActions.push(newActionData)
   if (newActionData.triggerType === TriggerType.SCHEDULED) {
-    const addedAction = autoActionStore.autoActions.find(a => a.id === newActionId);
+    const addedAction = autoActionStore.autoActions.find(a => a.id === newActionId)
     if (addedAction) {
       if (addedAction.triggerConfig.useGlobalTimer) {
-        autoActionStore.restartGlobalTimer();
+        autoActionStore.restartGlobalTimer()
       } else {
-        autoActionStore.startIndividualTimer(addedAction);
+        autoActionStore.startIndividualTimer(addedAction)
       }
     } else {
-      console.error("[ClientAutoAction] Could not find duplicated action after pushing.");
+      console.error('[ClientAutoAction] Could not find duplicated action after pushing.')
     }
   }
-  message.success('已复制自动操作');
+  message.success('已复制自动操作')
 }
 
 function moveAction(actionId: string, direction: 'up' | 'down') {
-  autoActionStore.moveAction(actionId, direction);
+  autoActionStore.moveAction(actionId, direction)
 }
 
 function editAction(actionId: string) {
-  editingActionId.value = actionId;
+  editingActionId.value = actionId
 }
 
 function backToOverview() {
-  editingActionId.value = null;
+  editingActionId.value = null
 }
 
 function toggleTypeStatus(type: string) {
-  const triggerType = type as TriggerType;
-  const newState = !enabledTriggerTypes.value[triggerType];
-  autoActionStore.setTriggerTypeEnabled(triggerType, newState);
-  message.success(`已${newState ? '启用' : '禁用'}所有 ${typeMap[triggerType]}`);
+  const triggerType = type as TriggerType
+  const newState = !enabledTriggerTypes.value[triggerType]
+  autoActionStore.setTriggerTypeEnabled(triggerType, newState)
+  message.success(`已${newState ? '启用' : '禁用'}所有 ${typeMap[triggerType]}`)
 }
 
 function handleTestClick(type: TriggerType) {
-  const requiresLogin = [TriggerType.DANMAKU, TriggerType.GUARD, TriggerType.SUPER_CHAT].includes(type);
+  const requiresLogin = [TriggerType.DANMAKU, TriggerType.GUARD, TriggerType.SUPER_CHAT].includes(type)
   if (requiresLogin && !biliCookieStore.isCookieValid) {
-    message.error('此测试需要登录B站账号，请先前往设置页面登录');
-    return;
+    message.error('此测试需要登录B站账号，请先前往设置页面登录')
+    return
   }
 
   if (type === TriggerType.GUARD) {
     // 为舰长相关(私信)测试显示UID输入对话框
-    currentTestType.value = type;
-    testUid.value = '10004'; // 默认值
-    showTestModal.value = true;
+    currentTestType.value = type
+    testUid.value = '10004' // 默认值
+    showTestModal.value = true
   } else {
     // 其他类型直接测试
-    autoActionStore.triggerTestActionByType(type);
+    autoActionStore.triggerTestActionByType(type)
   }
 }
 
@@ -441,18 +437,18 @@ function confirmTest() {
   if (currentTestType.value === TriggerType.GUARD) {
     // 在执行私信测试前再次确认登录状态
     if (!biliCookieStore.isCookieValid) {
-        message.error('无法发送私信测试，请先登录B站账号');
-        showTestModal.value = false;
-        return;
+      message.error('无法发送私信测试，请先登录B站账号')
+      showTestModal.value = false
+      return
     }
-    const uid = parseInt(testUid.value);
+    const uid = Number.parseInt(testUid.value)
     if (isNaN(uid) || uid <= 0) {
-      message.error('请输入有效的UID');
-      return;
+      message.error('请输入有效的UID')
+      return
     }
-    autoActionStore.triggerTestActionByType(currentTestType.value, uid);
+    autoActionStore.triggerTestActionByType(currentTestType.value, uid)
   }
-  showTestModal.value = false;
+  showTestModal.value = false
 }
 </script>
 
@@ -513,7 +509,7 @@ function confirmTest() {
                   <span
                     :style="{
                       color: enabledTriggerTypes && enabledTriggerTypes[type] ? '#18a058' : '#d03050',
-                      fontWeight: 'medium'
+                      fontWeight: 'medium',
                     }"
                     :title="enabledTriggerTypes && enabledTriggerTypes[type] ? '已启用' : '已禁用'"
                   >
@@ -548,8 +544,8 @@ function confirmTest() {
                     style="margin-bottom: 12px;"
                   >
                     <NPopconfirm
-                      :negative-text="'取消'"
-                      :positive-text="'确认测试'"
+                      negative-text="取消"
+                      positive-text="确认测试"
                       @positive-click="() => handleTestClick(type as TriggerType)"
                     >
                       <template #trigger>
@@ -957,4 +953,4 @@ code {
   border-radius: var(--n-border-radius);
   font-size: 13px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/ClientDanmakuItem.vue b/src/client/ClientDanmakuItem.vue
index 1d20a58..7534578 100644
--- a/src/client/ClientDanmakuItem.vue
+++ b/src/client/ClientDanmakuItem.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import { useDanmakuUtils, BaseDanmakuItemProps } from './components/danmaku/danmakuUtils';
-import CardStyleDanmakuItem from './components/danmaku/CardStyleDanmakuItem.vue';
-import TextStyleDanmakuItem from './components/danmaku/TextStyleDanmakuItem.vue';
-import { useDanmakuWindow } from './store/useDanmakuWindow';
+import type { BaseDanmakuItemProps } from './components/danmaku/danmakuUtils'
+import CardStyleDanmakuItem from './components/danmaku/CardStyleDanmakuItem.vue'
+import { useDanmakuUtils } from './components/danmaku/danmakuUtils'
+import TextStyleDanmakuItem from './components/danmaku/TextStyleDanmakuItem.vue'
+import { useDanmakuWindow } from './store/useDanmakuWindow'
 
-const props = defineProps<BaseDanmakuItemProps>();
+const props = defineProps<BaseDanmakuItemProps>()
 
 // 使用工具函数获取基础计算属性
-const emojiData = useDanmakuWindow().emojiData;
-const { typeClass } = useDanmakuUtils(props, emojiData);
+const emojiData = useDanmakuWindow().emojiData
+const { typeClass } = useDanmakuUtils(props, emojiData)
 </script>
 
 <template>
   <div
-    :class="['danmaku-item-content', typeClass]"
+    class="danmaku-item-content" :class="[typeClass]"
     :data-disappear="item.disappearAt"
   >
     <!-- 根据设置选择显示风格 -->
diff --git a/src/client/ClientDanmakuWindow.vue b/src/client/ClientDanmakuWindow.vue
index 2343549..085c07a 100644
--- a/src/client/ClientDanmakuWindow.vue
+++ b/src/client/ClientDanmakuWindow.vue
@@ -1,214 +1,216 @@
 <script setup lang="ts">
-  import { EventDataTypes, EventModel } from '@/api/api-models';
-  import { NSpin } from 'naive-ui';
-  import { DANMAKU_WINDOW_BROADCAST_CHANNEL, DanmakuWindowBCData, DanmakuWindowSettings } from './store/useDanmakuWindow';
-  import { nanoid } from 'nanoid';
-  import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
-  import ClientDanmakuItem from './ClientDanmakuItem.vue';
-  import { TransitionGroup } from 'vue'; // 添加TransitionGroup导入
+import type { DanmakuWindowBCData, DanmakuWindowSettings } from './store/useDanmakuWindow'
+import type { EventModel } from '@/api/api-models'
+import { NSpin } from 'naive-ui'
+import { nanoid } from 'nanoid'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { EventDataTypes } from '@/api/api-models'
+import ClientDanmakuItem from './ClientDanmakuItem.vue'
+import { DANMAKU_WINDOW_BROADCAST_CHANNEL } from './store/useDanmakuWindow'
+// 添加TransitionGroup导入
 
-  type TempDanmakuType = EventModel & {
-    randomId: string;
-    disappearAt?: number; // 消失时间戳
-    timestamp?: number; // 添加：记录插入时间戳
-  };
+type TempDanmakuType = EventModel & {
+  randomId: string
+  disappearAt?: number // 消失时间戳
+  timestamp?: number // 添加：记录插入时间戳
+}
 
-  let bc: BroadcastChannel | undefined = undefined;
-  const setting = ref<DanmakuWindowSettings>();
-  const danmakuList = ref<TempDanmakuType[]>([]);
-  const pendingDanmakuQueue = ref<TempDanmakuType[]>([]); // 新增：待处理弹幕队列
-  const isUpdateScheduled = ref(false); // 新增：是否已安排更新
-  const maxItems = computed(() => setting.value?.maxDanmakuCount || 50);
-  const hasItems = computed(() => danmakuList.value.length > 0);
-  const isInBatchUpdate = ref(false); // 添加批量更新状态标志
-  const pendingRemovalItems = ref<string[]>([]); // 待移除的弹幕ID
+let bc: BroadcastChannel | undefined
+const setting = ref<DanmakuWindowSettings>()
+const danmakuList = ref<TempDanmakuType[]>([])
+const pendingDanmakuQueue = ref<TempDanmakuType[]>([]) // 新增：待处理弹幕队列
+const isUpdateScheduled = ref(false) // 新增：是否已安排更新
+const maxItems = computed(() => setting.value?.maxDanmakuCount || 50)
+const hasItems = computed(() => danmakuList.value.length > 0)
+const isInBatchUpdate = ref(false) // 添加批量更新状态标志
+const pendingRemovalItems = ref<string[]>([]) // 待移除的弹幕ID
 
-  // 动态设置CSS变量
-  function updateCssVariables() {
-    if (!setting.value) return;
+// 动态设置CSS变量
+function updateCssVariables() {
+  if (!setting.value) return
 
-    const root = document.documentElement;
-    root.style.setProperty('--dw-direction', setting.value.reverseOrder ? 'column-reverse' : 'column');
+  const root = document.documentElement
+  root.style.setProperty('--dw-direction', setting.value.reverseOrder ? 'column-reverse' : 'column')
 
-    // 背景和文字颜色
-    root.style.setProperty('--dw-bg-color', setting.value.backgroundColor || 'rgba(0,0,0,0.6)');
-    root.style.setProperty('--dw-text-color', setting.value.textColor || '#ffffff');
+  // 背景和文字颜色
+  root.style.setProperty('--dw-bg-color', setting.value.backgroundColor || 'rgba(0,0,0,0.6)')
+  root.style.setProperty('--dw-text-color', setting.value.textColor || '#ffffff')
 
-    // 尺寸相关
-    root.style.setProperty('--dw-border-radius', `${setting.value.borderRadius || 0}px`);
-    root.style.setProperty('--dw-opacity', `${setting.value.opacity || 1}`);
-    root.style.setProperty('--dw-font-size', `${setting.value.fontSize || 14}px`);
-    root.style.setProperty('--dw-avatar-size', `${(setting.value.fontSize || 14) + 6}px`);
-    root.style.setProperty('--dw-emoji-size', `${(setting.value.fontSize || 14) + 10}px`);
-    root.style.setProperty('--dw-item-spacing', `${setting.value.itemSpacing || 5}px`);
+  // 尺寸相关
+  root.style.setProperty('--dw-border-radius', `${setting.value.borderRadius || 0}px`)
+  root.style.setProperty('--dw-opacity', `${setting.value.opacity || 1}`)
+  root.style.setProperty('--dw-font-size', `${setting.value.fontSize || 14}px`)
+  root.style.setProperty('--dw-avatar-size', `${(setting.value.fontSize || 14) + 6}px`)
+  root.style.setProperty('--dw-emoji-size', `${(setting.value.fontSize || 14) + 10}px`)
+  root.style.setProperty('--dw-item-spacing', `${setting.value.itemSpacing || 5}px`)
 
-    // 动画和阴影
-    root.style.setProperty('--dw-animation-duration', `${setting.value.animationDuration || 300}ms`);
-    root.style.setProperty('--dw-shadow', setting.value.enableShadow ? `0 0 10px ${setting.value.shadowColor}` : 'none');
+  // 动画和阴影
+  root.style.setProperty('--dw-animation-duration', `${setting.value.animationDuration || 300}ms`)
+  root.style.setProperty('--dw-shadow', setting.value.enableShadow ? `0 0 10px ${setting.value.shadowColor}` : 'none')
 
-    // 根据 enableAnimation 设置 data-animation-disabled 属性
-    if (setting.value.enableAnimation) {
-      root.removeAttribute('data-animation-disabled');
-    } else {
-      root.setAttribute('data-animation-disabled', 'true');
+  // 根据 enableAnimation 设置 data-animation-disabled 属性
+  if (setting.value.enableAnimation) {
+    root.removeAttribute('data-animation-disabled')
+  } else {
+    root.setAttribute('data-animation-disabled', 'true')
+  }
+}
+
+// 新增：处理批量更新
+function processBatchUpdate() {
+  if (pendingDanmakuQueue.value.length === 0) {
+    isUpdateScheduled.value = false
+    return
+  }
+
+  isInBatchUpdate.value = true // 开始批量更新
+
+  const itemsToAdd = pendingDanmakuQueue.value.slice() // 复制队列
+  pendingDanmakuQueue.value = [] // 清空队列
+
+  // 将新弹幕添加到列表开头
+  danmakuList.value.unshift(...itemsToAdd)
+
+  // 优化超出长度的弹幕处理
+  if (danmakuList.value.length > maxItems.value) {
+    danmakuList.value.splice(maxItems.value, danmakuList.value.length - maxItems.value)
+  }
+
+  isUpdateScheduled.value = false
+
+  // 在下一帧 DOM 更新后结束批量更新状态
+  nextTick(() => {
+    isInBatchUpdate.value = false
+  })
+}
+
+// 新增：安排批量更新
+function scheduleBatchUpdate() {
+  if (!isUpdateScheduled.value) {
+    isUpdateScheduled.value = true
+    requestAnimationFrame(processBatchUpdate)
+  }
+}
+
+function addDanmaku(data: EventModel) {
+  if (!setting.value) return
+
+  // Map EventDataTypes enum values to the string values used in filterTypes
+  const typeToStringMap: { [key in EventDataTypes]?: string } = {
+    [EventDataTypes.Message]: 'Message',
+    [EventDataTypes.Gift]: 'Gift',
+    [EventDataTypes.SC]: 'SC',
+    [EventDataTypes.Guard]: 'Guard',
+    [EventDataTypes.Enter]: 'Enter',
+  }
+
+  const typeStr = typeToStringMap[data.type]
+
+  // Check if the type should be filtered out
+  if (!typeStr || !setting.value.filterTypes.includes(typeStr)) {
+    return // Don't add if filtered
+  }
+
+  // 计算消失时间
+  let disappearAt: number | undefined
+  if (setting.value.autoDisappearTime > 0) {
+    disappearAt = Date.now() + setting.value.autoDisappearTime * 1000
+  }
+
+  // 为传入的弹幕对象添加一个随机ID和时间戳
+  const dataWithId: TempDanmakuType = {
+    ...data,
+    randomId: nanoid(),
+    disappearAt,
+    timestamp: Date.now(),
+  }
+
+  // 将弹幕添加到待处理队列，并安排批量更新
+  pendingDanmakuQueue.value.push(dataWithId)
+  scheduleBatchUpdate()
+
+  // console.log('[DanmakuWindow] 添加弹幕到队列:', dataWithId);
+}
+
+// 检查和移除过期弹幕 - 优化为 filter
+function checkAndRemoveExpiredDanmaku() {
+  if (!setting.value || setting.value.autoDisappearTime <= 0 || danmakuList.value.length === 0) return
+
+  const now = Date.now()
+  const originalLength = danmakuList.value.length
+
+  danmakuList.value = danmakuList.value.filter((item) => {
+    // 如果没有 disappearAt 或 disappearAt 在未来，则保留
+    return !item.disappearAt || item.disappearAt > now
+  })
+
+  // 如果有弹幕被移除，可以考虑触发一次批量状态（可选，取决于是否需要移除动画也加速）
+  // if (danmakuList.value.length < originalLength) {
+  //   isInBatchUpdate.value = true;
+  //   nextTick(() => {
+  //     isInBatchUpdate.value = false;
+  //   });
+  // }
+}
+
+// 为弹幕项生成自定义属性值
+function getSCColorAttribute(price: number): string {
+  if (price === 0) return `sc-0`
+  if (price > 0 && price < 50) return `sc-50`
+  if (price >= 50 && price < 100) return `sc-100`
+  if (price >= 100 && price < 500) return `sc-500`
+  if (price >= 500 && price < 1000) return `sc-1000`
+  if (price >= 1000 && price < 2000) return `sc-2000`
+  if (price >= 2000) return `sc-max`
+  return ''
+}
+
+onMounted(() => {
+  bc = new BroadcastChannel(DANMAKU_WINDOW_BROADCAST_CHANNEL)
+  console.log(`[DanmakuWindow] BroadcastChannel 已创建: ${DANMAKU_WINDOW_BROADCAST_CHANNEL}`)
+  bc.postMessage({
+    type: 'window-ready',
+  })
+  bc.onmessage = (event) => {
+    const data = event.data as DanmakuWindowBCData
+    switch (data.type) {
+      case 'danmaku':
+        addDanmaku(data.data)
+        break
+      case 'test-danmaku': // 处理测试弹幕
+        addDanmaku(data.data)
+        break
+      case 'update-setting':
+        setting.value = data.data
+        updateCssVariables()
+        console.log('[DanmakuWindow] 设置已更新:', data.data)
+        break
+      case 'clear-danmaku': // 处理清空弹幕
+        danmakuList.value = []
+        console.log('[DanmakuWindow] 弹幕已清空')
+        break
     }
   }
 
-  // 新增：处理批量更新
-  function processBatchUpdate() {
-    if (pendingDanmakuQueue.value.length === 0) {
-      isUpdateScheduled.value = false;
-      return;
+  // 初始化CSS变量
+  updateCssVariables()
+
+  // 启动定时器，定期检查过期弹幕
+  const checkInterval = setInterval(checkAndRemoveExpiredDanmaku, 1000)
+
+  onUnmounted(() => {
+    if (bc) {
+      bc.close()
+      bc = undefined
     }
+    clearInterval(checkInterval)
+  })
+})
 
-    isInBatchUpdate.value = true; // 开始批量更新
-
-    const itemsToAdd = pendingDanmakuQueue.value.slice(); // 复制队列
-    pendingDanmakuQueue.value = []; // 清空队列
-
-    // 将新弹幕添加到列表开头
-    danmakuList.value.unshift(...itemsToAdd);
-
-    // 优化超出长度的弹幕处理
-    if (danmakuList.value.length > maxItems.value) {
-      danmakuList.value.splice(maxItems.value, danmakuList.value.length - maxItems.value);
-    }
-
-    isUpdateScheduled.value = false;
-
-    // 在下一帧 DOM 更新后结束批量更新状态
-    nextTick(() => {
-        isInBatchUpdate.value = false;
-    });
-  }
-
-  // 新增：安排批量更新
-  function scheduleBatchUpdate() {
-    if (!isUpdateScheduled.value) {
-      isUpdateScheduled.value = true;
-      requestAnimationFrame(processBatchUpdate);
-    }
-  }
-
-  function addDanmaku(data: EventModel) {
-    if (!setting.value) return;
-
-    // Map EventDataTypes enum values to the string values used in filterTypes
-    const typeToStringMap: { [key in EventDataTypes]?: string } = {
-      [EventDataTypes.Message]: "Message",
-      [EventDataTypes.Gift]: "Gift",
-      [EventDataTypes.SC]: "SC",
-      [EventDataTypes.Guard]: "Guard",
-      [EventDataTypes.Enter]: "Enter"
-    };
-
-    const typeStr = typeToStringMap[data.type];
-
-    // Check if the type should be filtered out
-    if (!typeStr || !setting.value.filterTypes.includes(typeStr)) {
-      return; // Don't add if filtered
-    }
-
-    // 计算消失时间
-    let disappearAt: number | undefined = undefined;
-    if (setting.value.autoDisappearTime > 0) {
-      disappearAt = Date.now() + setting.value.autoDisappearTime * 1000;
-    }
-
-    // 为传入的弹幕对象添加一个随机ID和时间戳
-    const dataWithId: TempDanmakuType = {
-      ...data,
-      randomId: nanoid(),
-      disappearAt,
-      timestamp: Date.now(),
-    };
-
-    // 将弹幕添加到待处理队列，并安排批量更新
-    pendingDanmakuQueue.value.push(dataWithId);
-    scheduleBatchUpdate();
-
-    //console.log('[DanmakuWindow] 添加弹幕到队列:', dataWithId);
-  }
-
-  // 检查和移除过期弹幕 - 优化为 filter
-  function checkAndRemoveExpiredDanmaku() {
-    if (!setting.value || setting.value.autoDisappearTime <= 0 || danmakuList.value.length === 0) return;
-
-    const now = Date.now();
-    const originalLength = danmakuList.value.length;
-
-    danmakuList.value = danmakuList.value.filter(item => {
-      // 如果没有 disappearAt 或 disappearAt 在未来，则保留
-      return !item.disappearAt || item.disappearAt > now;
-    });
-
-    // 如果有弹幕被移除，可以考虑触发一次批量状态（可选，取决于是否需要移除动画也加速）
-    // if (danmakuList.value.length < originalLength) {
-    //   isInBatchUpdate.value = true;
-    //   nextTick(() => {
-    //     isInBatchUpdate.value = false;
-    //   });
-    // }
-  }
-
-  // 为弹幕项生成自定义属性值
-  function getSCColorAttribute(price: number): string {
-    if (price === 0) return `sc-0`;
-    if (price > 0 && price < 50) return `sc-50`;
-    if (price >= 50 && price < 100) return `sc-100`;
-    if (price >= 100 && price < 500) return `sc-500`;
-    if (price >= 500 && price < 1000) return `sc-1000`;
-    if (price >= 1000 && price < 2000) return `sc-2000`;
-    if (price >= 2000) return `sc-max`;
-    return '';
-  }
-
-  onMounted(() => {
-    bc = new BroadcastChannel(DANMAKU_WINDOW_BROADCAST_CHANNEL);
-    console.log(`[DanmakuWindow] BroadcastChannel 已创建: ${DANMAKU_WINDOW_BROADCAST_CHANNEL}`);
-    bc.postMessage({
-      type: 'window-ready',
-    });
-    bc.onmessage = (event) => {
-      const data = event.data as DanmakuWindowBCData;
-      switch (data.type) {
-        case 'danmaku':
-          addDanmaku(data.data);
-          break;
-        case 'test-danmaku': // 处理测试弹幕
-          addDanmaku(data.data);
-          break;
-        case 'update-setting':
-          setting.value = data.data;
-          updateCssVariables();
-          console.log('[DanmakuWindow] 设置已更新:', data.data);
-          break;
-        case 'clear-danmaku': // 处理清空弹幕
-          danmakuList.value = [];
-          console.log('[DanmakuWindow] 弹幕已清空');
-          break;
-      }
-    };
-
-    // 初始化CSS变量
-    updateCssVariables();
-
-    // 启动定时器，定期检查过期弹幕
-    const checkInterval = setInterval(checkAndRemoveExpiredDanmaku, 1000);
-
-    onUnmounted(() => {
-      if (bc) {
-        bc.close();
-        bc = undefined;
-      }
-      clearInterval(checkInterval);
-    });
-  });
-
-  // 监听设置变化
-  watch(() => setting.value, () => {
-    updateCssVariables();
-  }, { deep: true });
+// 监听设置变化
+watch(() => setting.value, () => {
+  updateCssVariables()
+}, { deep: true })
 </script>
 
 <template>
@@ -246,8 +248,7 @@
 </template>
 
 <style>
-
-  html,
+html,
   body {
     background: transparent;
     overflow: hidden;
@@ -387,4 +388,4 @@
     /* 添加 will-change 提示浏览器进行优化 */
     will-change: transform, opacity;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/ClientFetcher.vue b/src/client/ClientFetcher.vue
index d8764e5..faf4e05 100644
--- a/src/client/ClientFetcher.vue
+++ b/src/client/ClientFetcher.vue
@@ -1,468 +1,555 @@
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted, watch, nextTick, shallowRef } from 'vue';
+import type { FetcherStatisticData } from './data/models'
 
+import type { CookieCloudConfig } from './store/useBiliCookie'
+import { invoke } from '@tauri-apps/api/core'
+import { error as logError, info as logInfo } from '@tauri-apps/plugin-log'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
-  // ECharts
-  import { use } from 'echarts/core';
-  import { CanvasRenderer } from 'echarts/renderers';
-  import { LineChart, BarChart, PieChart, GaugeChart } from 'echarts/charts';
-  import {
-    TitleComponent, TooltipComponent, GridComponent, LegendComponent,
-    ToolboxComponent, MarkLineComponent, MarkPointComponent, DataZoomComponent
-  } from 'echarts/components';
-  import VChart, { THEME_KEY } from 'vue-echarts';
+// Tauri APIs (Optional - Remove if not using Tauri)
+import { platform, type, version } from '@tauri-apps/plugin-os'
+import {
+  AlertCircleOutline,
+  BarChartOutline,
+  CheckmarkCircleOutline,
+  CloseCircleOutline,
+  HardwareChipOutline,
+  HelpCircle,
+  LogInOutline,
+  LogOutOutline,
+  PeopleOutline,
+  PersonCircleOutline,
+  TimeOutline,
+  TimerOutline,
+  TrendingUpOutline,
+  TvOutline,
+  WifiOutline,
+} from '@vicons/ionicons5'
 
-  // Naive UI & Icons
-  import {
-    NCard, NFlex, NTag, NText, NStatistic, NSpin, NGrid, NGi, NEmpty,
-    NScrollbar, NDescriptions, NDescriptionsItem, NEllipsis, NIcon, NButton,
-    NRadioGroup, NRadioButton, NTooltip, NAlert, NQrCode, NInput, NDivider, NSpace, useMessage,
-    NInputGroup,
-    NInputGroupLabel,
-    NTabs,
-    NTabPane
-  } from 'naive-ui';
-  import {
-    CheckmarkCircleOutline, CloseCircleOutline, AlertCircleOutline, WifiOutline, TimeOutline, BarChartOutline, PieChartOutline, HardwareChipOutline, CodeSlashOutline, InformationCircleOutline, PersonCircleOutline, LogInOutline, LogOutOutline, TvOutline, PeopleOutline, LinkOutline, CloudOutline, ServerOutline, FlashOutline, DownloadOutline, TimerOutline, HelpCircle, TrendingUpOutline
-  } from '@vicons/ionicons5';
+// Date & Formatters
+import { formatDistanceToNow, intervalToDuration } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
 
-  // Date & Formatters
-  import { formatDistanceToNow, intervalToDuration, format } from 'date-fns';
-  import { zhCN } from 'date-fns/locale';
+import { BarChart, GaugeChart, LineChart, PieChart } from 'echarts/charts'
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+} from 'echarts/components'
+// ECharts
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+// Naive UI & Icons
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NDescriptions,
+  NDescriptionsItem,
+  NDivider,
+  NEllipsis,
+  NEmpty,
+  NFlex,
+  NGi,
+  NGrid,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NQrCode,
+  NRadioButton,
+  NRadioGroup,
+  NScrollbar,
+  NSpin,
+  NStatistic,
+  NTabPane,
+  NTabs,
+  NTag,
+  NText,
+  NTooltip,
+  useMessage,
+} from 'naive-ui'
+import { computed, nextTick, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useAccount } from '@/api/account'
+import { useWebFetcher } from '@/store/useWebFetcher'
+import { getLoginInfoAsync, getLoginUrlDataAsync } from './data/biliLogin'
+import { currentStatistic, getHistoricalStatistics, streamingInfo } from './data/info'
+import { callStartDanmakuClient } from './data/initialize'
+import { COOKIE_CLOUD_KEY, useBiliCookie } from './store/useBiliCookie'
+import { useSettings } from './store/useSettings'
+import { useTauriStore } from './store/useTauriStore'
 
-  // Tauri APIs (Optional - Remove if not using Tauri)
-  import { platform, OsType, type, version } from '@tauri-apps/plugin-os';
-  import { fetch as tauriFetch } from '@tauri-apps/plugin-http';
-  import { openUrl } from '@tauri-apps/plugin-opener';
-  import { info as logInfo, error as logError } from '@tauri-apps/plugin-log';
-  import { useWebFetcher } from '@/store/useWebFetcher';
-  import { COOKIE_CLOUD_KEY, CookieCloudConfig, useBiliCookie } from './store/useBiliCookie';
-  import { useSettings } from './store/useSettings';
-  import { FetcherStatisticData } from './data/models';
-  import { currentStatistic, getHistoricalStatistics, streamingInfo } from './data/info';
-  import { invoke } from '@tauri-apps/api/core';
-  import { getLoginInfoAsync, getLoginUrlDataAsync } from './data/biliLogin';
-  import { QueryBiliAPI } from './data/utils';
-  import { useAccount } from '@/api/account';
-  import { useTauriStore } from './store/useTauriStore';
-  import { callStartDanmakuClient } from './data/initialize';
+// --- ECharts Setup ---
+use([
+  CanvasRenderer,
+  LineChart,
+  BarChart,
+  PieChart,
+  GaugeChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  ToolboxComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  DataZoomComponent,
+])
 
-  // --- ECharts Setup ---
-  use([
-    CanvasRenderer, LineChart, BarChart, PieChart, GaugeChart, TitleComponent,
-    TooltipComponent, GridComponent, LegendComponent, ToolboxComponent,
-    MarkLineComponent, MarkPointComponent, DataZoomComponent
-  ]);
+// --- Store Access ---
+const webfetcher = useWebFetcher()
+const biliCookie = useBiliCookie()
+const settings = useSettings()
+const message = useMessage()
+const accountInfo = useAccount()
+// currentStatistic and streamingInfo are directly imported refs
 
-  // --- Store Access ---
-  const webfetcher = useWebFetcher();
-  const biliCookie = useBiliCookie();
-  const settings = useSettings();
-  const message = useMessage();
-  const accountInfo = useAccount();
-  // currentStatistic and streamingInfo are directly imported refs
+// --- Component State ---
+const uptime = ref<string>('N/A')
+const eventsPerSecond = ref<number>(0)
+const historicalData = ref<FetcherStatisticData[]>([])
+const isLoadingHistory = ref(false)
+const showCharts = ref(false) // Delay rendering charts until connected
 
-  // --- Component State ---
-  const uptime = ref<string>('N/A');
-  const eventsPerSecond = ref<number>(0);
-  const historicalData = ref<FetcherStatisticData[]>([]);
-  const isLoadingHistory = ref(false);
-  const showCharts = ref(false); // Delay rendering charts until connected
+// 添加图表实例引用
+const gaugeChart = shallowRef()
+const historyChart = shallowRef()
+const typeDistributionChart = shallowRef()
 
-  // 添加图表实例引用
-  const gaugeChart = shallowRef();
-  const historyChart = shallowRef();
-  const typeDistributionChart = shallowRef();
+// Chart Options
+const gaugeOption = ref({})
+const historyOption = ref({})
+const typeDistributionOption = ref({})
 
-  // Chart Options
-  const gaugeOption = ref({});
-  const historyOption = ref({});
-  const typeDistributionOption = ref({});
+// System & Network Info (Tauri / Browser Fallback)
+const osInfo = ref<string>('未知')
+const memoryInfo = ref<{ total?: number, free?: number, used?: number }>({}) // More detailed for Tauri
+const networkStatus = ref<'online' | 'offline'>('online')
 
-  // System & Network Info (Tauri / Browser Fallback)
-  const osInfo = ref<string>('未知');
-  const memoryInfo = ref<{ total?: number, free?: number, used?: number; }>({}); // More detailed for Tauri
-  const networkStatus = ref<'online' | 'offline'>('online');
+// Login State (Copied from original snippet)
+const isQRCodeLogining = ref(false)
+const loginUrl = ref('')
+const loginKey = ref('')
+const cookie = ref<string>() // Local ref for display
+const timer = ref(0)
+const expiredTimer = ref(0)
+const countdownTimer = ref(0)
+const countdownKey = ref(0)
+const loginStatus = ref<'expired' | 'unknown' | 'scanned' | 'waiting' | 'confirmed'>()
+const startAt = ref(Date.now())
 
-  // Login State (Copied from original snippet)
-  const isQRCodeLogining = ref(false);
-  const loginUrl = ref('');
-  const loginKey = ref('');
-  const cookie = ref<string>(); // Local ref for display
-  const timer = ref(0);
-  const expiredTimer = ref(0);
-  const countdownTimer = ref(0);
-  const countdownKey = ref(0);
-  const loginStatus = ref<'expired' | 'unknown' | 'scanned' | 'waiting' | 'confirmed'>();
-  const startAt = ref(Date.now());
+const cookieCloud = useTauriStore().getTarget<CookieCloudConfig>(COOKIE_CLOUD_KEY, {
+  host: 'https://cookie.vtsuru.live',
+  key: '',
+  password: '',
+})
+// 新增 Cookie Cloud 配置字段
+const cookieCloudData = ref((await cookieCloud.get())!)
+const isLoadingCookiecloud = ref(false)
 
+async function setCookieCloud() {
+  try {
+    isLoadingCookiecloud.value = true
+    await biliCookie.setCookieCloudConfig(cookieCloudData.value)
+    message.success('Cookie Cloud 配置已保存')
+  } catch (err: any) {
+    message.error(err.message)
+  } finally {
+    isLoadingCookiecloud.value = false
+  }
+}
 
-  const cookieCloud = useTauriStore().getTarget<CookieCloudConfig>(COOKIE_CLOUD_KEY, {
-    host: 'https://cookie.vtsuru.live',
-    key: '',
-    password: ''
-  });
-  // 新增 Cookie Cloud 配置字段
-  const cookieCloudData = ref((await cookieCloud.get())!);
-  const isLoadingCookiecloud = ref(false);
+// --- Timers ---
+let uptimeTimer: number | undefined
+let epsTimer: number | undefined
+let lastEventCount = 0
+let networkPollTimer: number | undefined
 
-  async function setCookieCloud() {
-    try {
-      isLoadingCookiecloud.value = true;
-      await biliCookie.setCookieCloudConfig(cookieCloudData.value);
-      message.success("Cookie Cloud 配置已保存");
-    } catch (err: any) {
-      message.error(err.message);
-    } finally {
-      isLoadingCookiecloud.value = false;
-    }
+// --- Computed Properties ---
+const isConnected = computed(() => webfetcher.state === 'connected')
+const connectionStatusType = computed(() => {
+  switch (webfetcher.state) {
+    case 'connected': return 'success'
+    case 'connecting': return 'info'
+    case 'disconnected': return 'error'
+    default: return 'default'
+  }
+})
+const connectionStatusText = computed(() => {
+  switch (webfetcher.state) {
+    case 'connected': return '运行中'
+    case 'connecting': return '连接中'
+    case 'disconnected': return '已停止'
+    default: return '未知'
+  }
+})
+const formattedStartedAt = computed(() => {
+  return webfetcher.startedAt ? new Date(webfetcher.startedAt).toLocaleString() : 'N/A'
+})
+
+const danmakuClientStateText = computed(() => {
+  // Assuming webfetcher exposes danmakuClient.state as danmakuClientState
+  switch (webfetcher.danmakuClientState) { // Replace with actual exposed state
+    case 'connected': return '已连接'
+    case 'connecting': return '连接中'
+    case 'stopped': return '已停止'
+    default: return '未知'
+  }
+})
+const danmakuClientStateType = computed(() => {
+  switch (webfetcher.danmakuClientState) { // Replace with actual exposed state
+    case 'connected': return 'success'
+    case 'connecting': 'info'
+    case 'stopped': 'error'
+    default: return 'default'
+  }
+})
+
+const signalRStateText = computed(() => {
+  // Assuming webfetcher exposes signalRClient.state (it likely does via webfetcher.state)
+  switch (webfetcher.state) {
+    case 'connected': return '已连接'
+    case 'connecting': return '连接中'
+    case 'disconnected': return '已断开'
+    default: return '未知'
+  }
+})
+const signalRStateType = computed(() => connectionStatusType.value) // Same as overall
+
+const isStreaming = computed(() => streamingInfo.value?.status === 'streaming')
+const streamingDuration = computed(() => {
+  if (isStreaming.value && streamingInfo.value?.streamAt) {
+    // Assuming live_time is a Unix timestamp (seconds)
+    return formatDistanceToNow(streamingInfo.value.streamAt, { locale: zhCN, addSuffix: true })
+  }
+  return '未开播'
+})
+
+const sortedTodayTypes = computed(() => {
+  // ... same as before ...
+  if (!currentStatistic.value || !currentStatistic.value.eventTypeCounts) return []
+  return Object.entries(currentStatistic.value.eventTypeCounts)
+    .sort(([, countA], [, countB]) => countB - countA)
+})
+
+// Login Status (Computed from original snippet)
+const loginStatusString = computed(() => {
+  switch (loginStatus.value) {
+    case 'expired': return '过期'
+    case 'unknown': return '未知'
+    case 'scanned': return '已扫描, 等待确认'
+    case 'waiting': return '等待扫描'
+    case 'confirmed': return '已登录'
+    default: return undefined
+  }
+})
+
+// --- Functions ---
+
+// Chart Updates (Keep existing: updateGaugeChart, updateHistoryChart, updateTypeDistributionChart)
+function updateGaugeChart() {
+  const option = {
+    tooltip: { formatter: '{a} <br/>{b} : {c}/s' },
+    series: [{
+      name: '实时速率',
+      type: 'gauge',
+      min: 0,
+      max: 20,
+      splitNumber: 5,
+      progress: { show: true, width: 12 },
+      axisLine: { lineStyle: { width: 12 } },
+      axisTick: { show: false },
+      splitLine: { length: 8, lineStyle: { width: 2, color: '#999' } },
+      axisLabel: { distance: 15, color: '#999', fontSize: 12 },
+      anchor: { show: true, showAbove: true, size: 15, itemStyle: { borderWidth: 8 } },
+      title: { show: false },
+      detail: { valueAnimation: true, fontSize: 24, offsetCenter: [0, '60%'], formatter: '{value}/s' },
+      data: [{ value: eventsPerSecond.value, name: '事件/秒' }],
+    }],
+  }
+  gaugeOption.value ??= option // 保留原始option用于初始化
+  if (gaugeChart.value) {
+    gaugeChart.value.setOption(option, false)
+  }
+}
+
+function updateHistoryChart() {
+  const option = {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    grid: { left: '3%', right: '5%', bottom: '10%', containLabel: true }, // Adjust grid
+    xAxis: [{ type: 'category', data: historicalData.value.map(d => d.date.substring(5)), axisTick: { alignWithLabel: true } }],
+    yAxis: [{ type: 'value', name: '事件总数' }],
+    dataZoom: [{ type: 'inside', start: 0, end: 100 }, { type: 'slider', start: 0, end: 100, bottom: 5 }], // Add zoom
+    series: [{
+      name: '每日事件数',
+      type: 'bar',
+      barWidth: '60%',
+      data: historicalData.value.map(d => d.count),
+      itemStyle: { borderRadius: [4, 4, 0, 0] },
+      emphasis: { focus: 'series' },
+      markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }] },
+      markLine: { data: [{ type: 'average', name: '平均值' }] },
+    }],
+  }
+  historyOption.value ??= option // 保留原始option用于初始化
+  if (historyChart.value) {
+    historyChart.value.setOption(option, false)
+  }
+}
+
+function updateTypeDistributionChart() {
+  const typeData = Object.entries(webfetcher.sessionEventTypeCounts || {})
+    .map(([name, value]) => ({ name, value }))
+    .sort((a, b) => b.value - a.value)
+  const option = {
+    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: typeData.map(d => d.name) }, // Scrollable legend
+    series: [{
+      name: '事件类型分布 (本次)',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      center: ['40%', '50%'], // Adjust center for legend
+      avoidLabelOverlap: true,
+      itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 1 },
+      label: { show: false, position: 'center' },
+      emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' } },
+      labelLine: { show: false },
+      data: typeData,
+    }],
+  }
+  typeDistributionOption.value ??= option // 保留原始option用于初始化
+  if (typeDistributionChart.value) {
+    typeDistributionChart.value.setOption(option, false)
+  }
+}
+
+// Data Fetching
+async function loadHistoricalData() { /* ... same as before ... */
+  isLoadingHistory.value = true
+  try {
+    historicalData.value = await getHistoricalStatistics(30) // Fetch more days?
+    updateHistoryChart()
+  } catch (error) {
+    console.error('Failed to load historical statistics:', error)
+  } finally {
+    isLoadingHistory.value = false
+  }
+}
+
+async function fetchSystemInfo() {
+  // Tauri specific (replace with browser fallbacks if needed)
+  try {
+    const os = type()
+    const plat = platform()
+    const ver = version()
+    osInfo.value = `${os} (${plat} ${ver})`
+  } catch (e) {
+    logError(`Failed to get OS info: ${e}`)
+    // Fallback (Browser)
+    osInfo.value = navigator.userAgent // Less specific
   }
 
-  // --- Timers ---
-  let uptimeTimer: number | undefined;
-  let epsTimer: number | undefined;
-  let lastEventCount = 0;
-  let networkPollTimer: number | undefined;
-
-  // --- Computed Properties ---
-  const isConnected = computed(() => webfetcher.state === 'connected');
-  const connectionStatusType = computed(() => {
-    switch (webfetcher.state) {
-      case 'connected': return 'success';
-      case 'connecting': return 'info';
-      case 'disconnected': return 'error';
-      default: return 'default';
+  try {
+    // Assumes a Tauri plugin or command `get_memory_info` returning { total: number, free: number } in KB/MB/GB
+    // Adjust the command name and response structure as needed
+    const mem: { total: number, free: number } = await invoke('get_memory_info') // Example command
+    memoryInfo.value = {
+      total: mem.total,
+      free: mem.free,
+      used: mem.total - mem.free,
     }
-  });
-  const connectionStatusText = computed(() => {
-    switch (webfetcher.state) {
-      case 'connected': return '运行中';
-      case 'connecting': return '连接中';
-      case 'disconnected': return '已停止';
-      default: return '未知';
-    }
-  });
-  const formattedStartedAt = computed(() => {
-    return webfetcher.startedAt ? new Date(webfetcher.startedAt).toLocaleString() : 'N/A';
-  });
-
-  const danmakuClientStateText = computed(() => {
-    // Assuming webfetcher exposes danmakuClient.state as danmakuClientState
-    switch (webfetcher.danmakuClientState) { // Replace with actual exposed state
-      case 'connected': return '已连接';
-      case 'connecting': return '连接中';
-      case 'stopped': return '已停止';
-      default: return '未知';
-    }
-  });
-  const danmakuClientStateType = computed(() => {
-    switch (webfetcher.danmakuClientState) { // Replace with actual exposed state
-      case 'connected': return 'success';
-      case 'connecting': 'info';
-      case 'stopped': 'error';
-      default: return 'default';
-    }
-  });
-
-  const signalRStateText = computed(() => {
-    // Assuming webfetcher exposes signalRClient.state (it likely does via webfetcher.state)
-    switch (webfetcher.state) {
-      case 'connected': return '已连接';
-      case 'connecting': return '连接中';
-      case 'disconnected': return '已断开';
-      default: return '未知';
-    }
-  });
-  const signalRStateType = computed(() => connectionStatusType.value); // Same as overall
-
-  const isStreaming = computed(() => streamingInfo.value?.status === 'streaming');
-  const streamingDuration = computed(() => {
-    if (isStreaming.value && streamingInfo.value?.streamAt) {
-      // Assuming live_time is a Unix timestamp (seconds)
-      return formatDistanceToNow(streamingInfo.value.streamAt, { locale: zhCN, addSuffix: true });
-    }
-    return '未开播';
-  });
-
-  const sortedTodayTypes = computed(() => {
-    // ... same as before ...
-    if (!currentStatistic.value || !currentStatistic.value.eventTypeCounts) return [];
-    return Object.entries(currentStatistic.value.eventTypeCounts)
-      .sort(([, countA], [, countB]) => countB - countA);
-  });
-
-  // Login Status (Computed from original snippet)
-  const loginStatusString = computed(() => {
-    switch (loginStatus.value) {
-      case 'expired': return '过期';
-      case 'unknown': return '未知';
-      case 'scanned': return '已扫描, 等待确认';
-      case 'waiting': return '等待扫描';
-      case 'confirmed': return '已登录';
-      default: return undefined;
-    }
-  });
-
-  // --- Functions ---
-
-  // Chart Updates (Keep existing: updateGaugeChart, updateHistoryChart, updateTypeDistributionChart)
-  function updateGaugeChart() {
-    const option = {
-      tooltip: { formatter: '{a} <br/>{b} : {c}/s' },
-      series: [{
-        name: '实时速率', type: 'gauge', min: 0, max: 20, splitNumber: 5,
-        progress: { show: true, width: 12 }, axisLine: { lineStyle: { width: 12 } },
-        axisTick: { show: false }, splitLine: { length: 8, lineStyle: { width: 2, color: '#999' } },
-        axisLabel: { distance: 15, color: '#999', fontSize: 12 },
-        anchor: { show: true, showAbove: true, size: 15, itemStyle: { borderWidth: 8 } },
-        title: { show: false }, detail: { valueAnimation: true, fontSize: 24, offsetCenter: [0, '60%'], formatter: '{value}/s' },
-        data: [{ value: eventsPerSecond.value, name: '事件/秒' }]
-      }]
-    };
-    gaugeOption.value ??= option; // 保留原始option用于初始化
-    if (gaugeChart.value) {
-      gaugeChart.value.setOption(option, false);
+  } catch (e) {
+    logError(`Failed to get Memory info: ${e}`)
+    // Fallback (Browser - Limited)
+    if ('memory' in performance && (performance as any).memory.totalJSHeapSize) {
+      memoryInfo.value = { total: (performance as any).memory.totalJSHeapSize } // Only JS Heap
     }
   }
+}
 
-  function updateHistoryChart() {
-    const option = {
-      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-      grid: { left: '3%', right: '5%', bottom: '10%', containLabel: true }, // Adjust grid
-      xAxis: [{ type: 'category', data: historicalData.value.map(d => d.date.substring(5)), axisTick: { alignWithLabel: true } }],
-      yAxis: [{ type: 'value', name: '事件总数' }],
-      dataZoom: [{ type: 'inside', start: 0, end: 100 }, { type: 'slider', start: 0, end: 100, bottom: 5 }], // Add zoom
-      series: [{
-        name: '每日事件数', type: 'bar', barWidth: '60%', data: historicalData.value.map(d => d.count),
-        itemStyle: { borderRadius: [4, 4, 0, 0] }, emphasis: { focus: 'series' },
-        markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }] },
-        markLine: { data: [{ type: 'average', name: '平均值' }] }
-      }]
-    };
-    historyOption.value ??= option; // 保留原始option用于初始化
-    if (historyChart.value) {
-      historyChart.value.setOption(option, false);
-    }
+// Uptime & EPS (Keep existing: updateUptime, calculateEPS)
+function updateUptime() { /* ... same logic ... */
+  if (webfetcher.startedAt) {
+    uptime.value = formatDistanceToNow(new Date(webfetcher.startedAt), { addSuffix: true, locale: zhCN })
+  } else {
+    uptime.value = 'N/A'; clearInterval(uptimeTimer); uptimeTimer = undefined
   }
+}
+function calculateEPS() { /* ... same logic ... */
+  const currentCount = webfetcher.sessionEventCount
+  eventsPerSecond.value = currentCount - lastEventCount
+  lastEventCount = currentCount
+}
 
-  function updateTypeDistributionChart() {
-    const typeData = Object.entries(webfetcher.sessionEventTypeCounts || {})
-      .map(([name, value]) => ({ name, value }))
-      .sort((a, b) => b.value - a.value);
-    const option = {
-      tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
-      legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: typeData.map(d => d.name) }, // Scrollable legend
-      series: [{
-        name: '事件类型分布 (本次)', type: 'pie', radius: ['40%', '70%'], center: ['40%', '50%'], // Adjust center for legend
-        avoidLabelOverlap: true, itemStyle: { borderRadius: 5, borderColor: '#fff', borderWidth: 1 },
-        label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' } },
-        labelLine: { show: false }, data: typeData
-      }]
-    };
-    typeDistributionOption.value ??= option; // 保留原始option用于初始化
-    if (typeDistributionChart.value) {
-      typeDistributionChart.value.setOption(option, false);
-    }
+async function startLogin() { /* ... same logic ... */
+  if (isQRCodeLogining.value) return
+  isQRCodeLogining.value = true
+  try {
+    const data = await getLoginUrlDataAsync() // Assumes this function exists
+    loginUrl.value = data.url
+    loginKey.value = data.qrcode_key
+    loginStatus.value = 'waiting'
+    startAt.value = Date.now()
+    expiredTimer.value = window.setTimeout(() => {
+      loginStatus.value = 'expired'; clearInterval(timer.value)
+    }, 3 * 60 * 1000)
+    countdownTimer.value = window.setInterval(() => {
+      countdownKey.value++
+    }, 500)
+    timer.value = window.setInterval(async () => {
+      const login = await getLoginInfoAsync(loginKey.value) // Assumes this exists
+      loginStatus.value = login.status
+      if (login.status === 'confirmed') {
+        biliCookie.setBiliCookie(login.cookie, login.refresh_token)
+        cookie.value = login.cookie // Update local display ref
+        logInfo(`扫码登录成功`)
+        message.success('登录成功')
+        finishLogin()
+        await biliCookie.check()
+      } else if (login.status === 'expired') {
+        finishLogin(); message.error('二维码已过期')
+      } else { /* console.log(`Scan status: ${login.status}`) */ }
+    }, 2000)
+  } catch (err: any) {
+    logError(err.toString()); message.error('获取登录二维码失败')
+    isQRCodeLogining.value = false; loginStatus.value = undefined
   }
-
-  // Data Fetching
-  async function loadHistoricalData() { /* ... same as before ... */
-    isLoadingHistory.value = true;
-    try {
-      historicalData.value = await getHistoricalStatistics(30); // Fetch more days?
-      updateHistoryChart();
-    } catch (error) { console.error("Failed to load historical statistics:", error); }
-    finally { isLoadingHistory.value = false; }
+}
+function finishLogin() { /* ... same logic ... */
+  clearInterval(timer.value); clearTimeout(expiredTimer.value); clearInterval(countdownTimer.value)
+  isQRCodeLogining.value = false; loginStatus.value = undefined
+  loginUrl.value = ''; loginKey.value = ''; cookie.value = '' // Clear local display ref
+}
+function formatTimeDifference(startUnix: number, endUnix: number) { /* ... same logic ... */
+  const duration = intervalToDuration({ start: new Date(startUnix), end: new Date(endUnix) })
+  const minutes = duration.minutes || 0; const seconds = duration.seconds || 0
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}
+async function onSwitchDanmakuClientMode(type: 'openlive' | 'direct', force: boolean = false) {
+  if (webfetcher.webfetcherType === type && !force) {
+    message.info('当前已是该模式'); return
   }
-
-  async function fetchSystemInfo() {
-    // Tauri specific (replace with browser fallbacks if needed)
-    try {
-      const os = type();
-      const plat = platform();
-      const ver = version();
-      osInfo.value = `${os} (${plat} ${ver})`;
-    } catch (e) {
-      logError("Failed to get OS info: " + e);
-      // Fallback (Browser)
-      osInfo.value = navigator.userAgent; // Less specific
-    }
-
-    try {
-      // Assumes a Tauri plugin or command `get_memory_info` returning { total: number, free: number } in KB/MB/GB
-      // Adjust the command name and response structure as needed
-      const mem: { total: number, free: number; } = await invoke('get_memory_info'); // Example command
-      memoryInfo.value = {
-        total: mem.total,
-        free: mem.free,
-        used: mem.total - mem.free
-      };
-    } catch (e) {
-      logError("Failed to get Memory info: " + e);
-      // Fallback (Browser - Limited)
-      if ('memory' in performance && (performance as any).memory.totalJSHeapSize) {
-        memoryInfo.value = { total: (performance as any).memory.totalJSHeapSize }; // Only JS Heap
-      }
-    }
-  }
-
-  // Uptime & EPS (Keep existing: updateUptime, calculateEPS)
-  function updateUptime() { /* ... same logic ... */
-    if (webfetcher.startedAt) { uptime.value = formatDistanceToNow(new Date(webfetcher.startedAt), { addSuffix: true, locale: zhCN }); }
-    else { uptime.value = 'N/A'; clearInterval(uptimeTimer); uptimeTimer = undefined; }
-  }
-  function calculateEPS() { /* ... same logic ... */
-    const currentCount = webfetcher.sessionEventCount;
-    eventsPerSecond.value = currentCount - lastEventCount;
-    lastEventCount = currentCount;
-  }
-
-  async function startLogin() { /* ... same logic ... */
-    if (isQRCodeLogining.value) return;
-    isQRCodeLogining.value = true;
-    try {
-      const data = await getLoginUrlDataAsync(); // Assumes this function exists
-      loginUrl.value = data.url;
-      loginKey.value = data.qrcode_key;
-      loginStatus.value = 'waiting';
-      startAt.value = Date.now();
-      expiredTimer.value = window.setTimeout(() => { loginStatus.value = 'expired'; clearInterval(timer.value); }, 3 * 60 * 1000);
-      countdownTimer.value = window.setInterval(() => { countdownKey.value++; }, 500);
-      timer.value = window.setInterval(async () => {
-        const login = await getLoginInfoAsync(loginKey.value); // Assumes this exists
-        loginStatus.value = login.status;
-        if (login.status === 'confirmed') {
-          biliCookie.setBiliCookie(login.cookie, login.refresh_token);
-          cookie.value = login.cookie; // Update local display ref
-          logInfo(`扫码登录成功`);
-          message.success('登录成功');
-          finishLogin();
-          await biliCookie.check();
-        } else if (login.status === 'expired') {
-          finishLogin(); message.error('二维码已过期');
-        } else { /* console.log(`Scan status: ${login.status}`) */ }
-      }, 2000);
-    } catch (err: any) {
-      logError(err.toString()); message.error('获取登录二维码失败');
-      isQRCodeLogining.value = false; loginStatus.value = undefined;
-    }
-  }
-  function finishLogin() { /* ... same logic ... */
-    clearInterval(timer.value); clearTimeout(expiredTimer.value); clearInterval(countdownTimer.value);
-    isQRCodeLogining.value = false; loginStatus.value = undefined;
-    loginUrl.value = ''; loginKey.value = ''; cookie.value = ''; // Clear local display ref
-  }
-  function formatTimeDifference(startUnix: number, endUnix: number) { /* ... same logic ... */
-    const duration = intervalToDuration({ start: new Date(startUnix), end: new Date(endUnix) });
-    const minutes = duration.minutes || 0; const seconds = duration.seconds || 0;
-    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-  }
-  async function onSwitchDanmakuClientMode(type: 'openlive' | 'direct', force: boolean = false) {
-    if (webfetcher.webfetcherType === type && !force) {
-      message.info('当前已是该模式'); return;
-    }
-    const noticeRef = window.$notification.info({
+  const noticeRef = window.$notification.info({
+    title: 'WebEventFetcher',
+    content: '正在关闭弹幕服务器...',
+    closable: false,
+  })
+  settings.settings.useDanmakuClientType = type
+  settings.save()
+  webfetcher.Stop()
+  noticeRef.content = '正在连接弹幕服务器...'
+  const result = await callStartDanmakuClient()
+  noticeRef.destroy()
+  if (result.success) {
+    window.$notification.success({
       title: 'WebEventFetcher',
-      content: '正在关闭弹幕服务器...',
-      closable: false,
-    });
-    settings.settings.useDanmakuClientType = type;
-    settings.save();
-    webfetcher.Stop();
-    noticeRef.content = '正在连接弹幕服务器...';
-    const result = await callStartDanmakuClient();
-    noticeRef.destroy();
-    if (result.success) {
-      window.$notification.success({
-        title: 'WebEventFetcher',
-        content: webfetcher.webfetcherType + ' 弹幕客户端连接成功',
-        closable: true,
-        duration: 3000,
-      });
-    } else {
-      window.$notification.error({
-        title: 'WebEventFetcher',
-        content: '弹幕服务器连接失败: ' + result.message,
-        closable: true,
-      });
-    }
+      content: `${webfetcher.webfetcherType} 弹幕客户端连接成功`,
+      closable: true,
+      duration: 3000,
+    })
+  } else {
+    window.$notification.error({
+      title: 'WebEventFetcher',
+      content: `弹幕服务器连接失败: ${result.message}`,
+      closable: true,
+    })
   }
-  async function logout() {
-    await biliCookie.logout();
-    message.info('已退出登录');
+}
+async function logout() {
+  await biliCookie.logout()
+  message.info('已退出登录')
+}
+
+// --- Watchers ---
+watch(() => webfetcher.state, (newState) => {
+  if (newState === 'connected') {
+    if (!uptimeTimer) {
+      updateUptime(); uptimeTimer = window.setInterval(updateUptime, 60 * 1000)
+    }
+    if (!epsTimer) {
+      lastEventCount = webfetcher.sessionEventCount; epsTimer = window.setInterval(() => {
+        calculateEPS(); updateGaugeChart()
+      }, 1000)
+    }
+    loadHistoricalData() // Load history on connect
+    showCharts.value = true
+    fetchSystemInfo() // Fetch system info on connect
+    nextTick(() => {
+      updateGaugeChart(); updateTypeDistributionChart()
+    })
+  } else {
+    clearInterval(uptimeTimer); clearInterval(epsTimer)
+    uptimeTimer = undefined; epsTimer = undefined
+    uptime.value = 'N/A'; eventsPerSecond.value = 0
+    showCharts.value = false
+  }
+})
+
+watch(() => webfetcher.sessionEventTypeCounts, () => {
+  if (isConnected.value) {
+    updateTypeDistributionChart()
+  }
+}, { deep: true })
+
+watch(currentStatistic, (newDailyStat) => {
+  if (newDailyStat && historicalData.value.length > 0) {
+    const todayIndex = historicalData.value.findIndex(d => d.date === newDailyStat.date)
+    if (todayIndex !== -1) {
+      historicalData.value[todayIndex].count = newDailyStat.count
+      // Maybe debounce history chart update if daily stats update frequently
+      updateHistoryChart()
+    } else {
+      // Add today if missing (e.g., after midnight)
+      historicalData.value.push(JSON.parse(JSON.stringify(newDailyStat))) // Add copy
+      historicalData.value.sort((a, b) => a.date.localeCompare(b.date)) // Keep sorted
+      updateHistoryChart()
+    }
+  } else if (newDailyStat && historicalData.value.length === 0) {
+    // Handle first data point case
+    historicalData.value = [JSON.parse(JSON.stringify(newDailyStat))]
+    updateHistoryChart()
+  }
+}, { deep: true })
+
+// --- Lifecycle Hooks ---
+onMounted(async () => {
+  // Initial setup based on current state
+  if (webfetcher.state === 'connected') {
+    updateUptime()
+    uptimeTimer = window.setInterval(updateUptime, 60 * 1000)
+    lastEventCount = webfetcher.sessionEventCount; epsTimer = window.setInterval(() => {
+      calculateEPS(); updateGaugeChart()
+    }, 1000)
+    loadHistoricalData(); showCharts.value = true
+    fetchSystemInfo()
+    nextTick(() => {
+      updateGaugeChart(); updateTypeDistributionChart()
+    })
   }
 
-  // --- Watchers ---
-  watch(() => webfetcher.state, (newState) => {
-    if (newState === 'connected') {
-      if (!uptimeTimer) { updateUptime(); uptimeTimer = window.setInterval(updateUptime, 60 * 1000); }
-      if (!epsTimer) { lastEventCount = webfetcher.sessionEventCount; epsTimer = window.setInterval(() => { calculateEPS(); updateGaugeChart(); }, 1000); }
-      loadHistoricalData(); // Load history on connect
-      showCharts.value = true;
-      fetchSystemInfo(); // Fetch system info on connect
-      nextTick(() => { updateGaugeChart(); updateTypeDistributionChart(); });
-    } else {
-      clearInterval(uptimeTimer); clearInterval(epsTimer);
-      uptimeTimer = undefined; epsTimer = undefined;
-      uptime.value = 'N/A'; eventsPerSecond.value = 0;
-      showCharts.value = false;
-    }
-  });
+  // Fetch initial Bili cookie for display
+  cookie.value = await biliCookie.getBiliCookie()
+  // Initial Bili user info fetch handled by watcher
 
-  watch(() => webfetcher.sessionEventTypeCounts, () => {
-    if (isConnected.value) { updateTypeDistributionChart(); }
-  }, { deep: true });
-
-  watch(currentStatistic, (newDailyStat) => {
-    if (newDailyStat && historicalData.value.length > 0) {
-      const todayIndex = historicalData.value.findIndex(d => d.date === newDailyStat.date);
-      if (todayIndex !== -1) {
-        historicalData.value[todayIndex].count = newDailyStat.count;
-        // Maybe debounce history chart update if daily stats update frequently
-        updateHistoryChart();
-      } else {
-        // Add today if missing (e.g., after midnight)
-        historicalData.value.push(JSON.parse(JSON.stringify(newDailyStat))); // Add copy
-        historicalData.value.sort((a, b) => a.date.localeCompare(b.date)); // Keep sorted
-        updateHistoryChart();
-      }
-    } else if (newDailyStat && historicalData.value.length === 0) {
-      // Handle first data point case
-      historicalData.value = [JSON.parse(JSON.stringify(newDailyStat))];
-      updateHistoryChart();
-    }
-  }, { deep: true });
-
-  // --- Lifecycle Hooks ---
-  onMounted(async () => {
-    // Initial setup based on current state
-    if (webfetcher.state === 'connected') {
-      updateUptime();
-      uptimeTimer = window.setInterval(updateUptime, 60 * 1000);
-      lastEventCount = webfetcher.sessionEventCount; epsTimer = window.setInterval(() => { calculateEPS(); updateGaugeChart(); }, 1000);
-      loadHistoricalData(); showCharts.value = true;
-      fetchSystemInfo();
-      nextTick(() => { updateGaugeChart(); updateTypeDistributionChart(); });
-    }
-
-    // Fetch initial Bili cookie for display
-    cookie.value = await biliCookie.getBiliCookie();
-    // Initial Bili user info fetch handled by watcher
-
-    // Initialize statistics logic (ensure it runs)
-    // initInfo(); // Assuming this is called elsewhere or on app startup
-  });
-
-  onUnmounted(() => {
-    clearInterval(uptimeTimer);
-    clearInterval(epsTimer);
-    clearInterval(networkPollTimer);
-    // Clean up login timers if component unmounts during login
-    clearInterval(timer.value);
-    clearTimeout(expiredTimer.value);
-    clearInterval(countdownTimer.value);
-  });
+  // Initialize statistics logic (ensure it runs)
+  // initInfo(); // Assuming this is called elsewhere or on app startup
+})
 
+onUnmounted(() => {
+  clearInterval(uptimeTimer)
+  clearInterval(epsTimer)
+  clearInterval(networkPollTimer)
+  // Clean up login timers if component unmounts during login
+  clearInterval(timer.value)
+  clearTimeout(expiredTimer.value)
+  clearInterval(countdownTimer.value)
+})
 </script>
 
 <template>
@@ -1129,4 +1216,4 @@
       </NDescriptions>
     </NCard>
   </NFlex>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/ClientIndex.vue b/src/client/ClientIndex.vue
index 93abf77..4d0281f 100644
--- a/src/client/ClientIndex.vue
+++ b/src/client/ClientIndex.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-  import { cookie, useAccount } from '@/api/account';
-  import { useWebFetcher } from '@/store/useWebFetcher';
-  import { openUrl } from '@tauri-apps/plugin-opener';
-  import { useElementSize } from '@vueuse/core';
-  import { roomInfo, streamingInfo } from './data/info';
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { useElementSize } from '@vueuse/core'
+import { cookie, useAccount } from '@/api/account'
+import { useWebFetcher } from '@/store/useWebFetcher'
+import { roomInfo } from './data/info'
 
-  const accountInfo = useAccount();
+const accountInfo = useAccount()
 
-  const webfetcher = useWebFetcher();
+const webfetcher = useWebFetcher()
 
-  const coverRef = ref();
-  const isHover = ref(false);
-  const roomCover = computed(() => {
-    return isHover.value ? roomInfo.value?.keyframe : roomInfo.value?.user_cover;
-  });
-  const { width, height } = useElementSize(coverRef);
+const coverRef = ref()
+const isHover = ref(false)
+const roomCover = computed(() => {
+  return isHover.value ? roomInfo.value?.keyframe : roomInfo.value?.user_cover
+})
+const { width, height } = useElementSize(coverRef)
 
-  function logout() {
-    cookie.value = undefined;
-    window.location.reload();
-  }
+function logout() {
+  cookie.value = undefined
+  window.location.reload()
+}
 </script>
 
 <template>
@@ -141,4 +141,4 @@
       </template>
     </NCard>
   </NFlex>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/ClientLayout.vue b/src/client/ClientLayout.vue
index 92adfc3..7c05da7 100644
--- a/src/client/ClientLayout.vue
+++ b/src/client/ClientLayout.vue
@@ -1,134 +1,134 @@
 <script setup lang="ts">
-  import { ref, h, computed } from 'vue'; // 引入 ref, h, computed
-  import { RouterLink, RouterView } from 'vue-router'; // 引入 Vue Router 组件
+// 引入 Naive UI 组件 和 图标
+import type { MenuOption } from 'naive-ui'
+// 引入 Tauri 插件
+import { openUrl } from '@tauri-apps/plugin-opener'
 
-  // 引入 Naive UI 组件 和 图标
-  import { NA, NButton, NCard, NInput, NLayout, NLayoutSider, NLayoutContent, NMenu, NSpace, NSpin, NText, NTooltip, MenuOption } from 'naive-ui';
-  import { CheckmarkCircle, CloseCircle, Home } from '@vicons/ionicons5';
+import { Chat24Filled, CloudArchive24Filled, FlashAuto24Filled, Settings24Filled } from '@vicons/fluent'
+import { CheckmarkCircle, CloseCircle, Home } from '@vicons/ionicons5'
+import { NA, NButton, NCard, NInput, NLayout, NLayoutContent, NLayoutSider, NMenu, NSpace, NSpin, NText, NTooltip } from 'naive-ui'
 
-  // 引入 Tauri 插件
-  import { openUrl } from '@tauri-apps/plugin-opener';
+import { computed, h, ref } from 'vue' // 引入 ref, h, computed
 
-  // 引入自定义 API 和状态管理
-  import { ACCOUNT, GetSelfAccount, isLoadingAccount, isLoggedIn, useAccount } from '@/api/account';
-  import { useWebFetcher } from '@/store/useWebFetcher';
+import { RouterLink, RouterView } from 'vue-router' // 引入 Vue Router 组件
+// 引入自定义 API 和状态管理
+import { ACCOUNT, GetSelfAccount, isLoadingAccount, isLoggedIn } from '@/api/account'
 
-  // 引入子组件
-  import WindowBar from './WindowBar.vue';
-  import { initAll, OnClientUnmounted } from './data/initialize';
-  import { Chat24Filled, CloudArchive24Filled, FlashAuto24Filled, Settings24Filled } from '@vicons/fluent';
-  import { isTauri } from '@/data/constants';
-import { useDanmakuWindow } from './store/useDanmakuWindow';
+import { useWebFetcher } from '@/store/useWebFetcher'
+import { initAll, OnClientUnmounted } from './data/initialize'
+import { useDanmakuWindow } from './store/useDanmakuWindow'
+// 引入子组件
+import WindowBar from './WindowBar.vue'
 
-  // --- 响应式状态 ---
+// --- 响应式状态 ---
 
-  // 获取 webfetcher 状态管理的实例
-  const webfetcher = useWebFetcher();
-  const danmakuWindow = useDanmakuWindow();
-  // 用于存储用户输入的 Token
-  const token = ref('');
+// 获取 webfetcher 状态管理的实例
+const webfetcher = useWebFetcher()
+const danmakuWindow = useDanmakuWindow()
+// 用于存储用户输入的 Token
+const token = ref('')
 
-  // --- 计算属性 ---
-  // (这里没有显式的计算属性，但 isLoggedIn 本身可能是一个来自 account 模块的计算属性)
+// --- 计算属性 ---
+// (这里没有显式的计算属性，但 isLoggedIn 本身可能是一个来自 account 模块的计算属性)
 
-  // --- 方法 ---
+// --- 方法 ---
 
-  /**
-   * @description 处理用户登录逻辑
-   */
-  async function login() {
-    // 校验 Token 是否为空
-    if (!token.value.trim()) {
-      window.$message.error('请输入 Token'); // 使用全局消息提示
-      return;
-    }
-
-    isLoadingAccount.value = true; // 开始加载状态
-    try {
-      // 调用 API 获取账户信息
-      const result = await GetSelfAccount(token.value.trim());
-
-      // 处理 API 返回结果
-      if (!result) {
-        // 登录失败：无效 Token
-        window.$notification.error({ // 使用全局通知
-          title: '登陆失败',
-          content: '无效的Token',
-          duration: 3000
-        });
-      } else {
-        // 检查 B站主播码是否绑定
-        if (!result.isBiliAuthed) {
-          window.$notification.error({
-            title: '登陆失败',
-            content: 'B站主播码未绑定, 请先在网站管理页进行绑定',
-            duration: 3000
-          });
-        } else {
-          // 登录成功
-          window.$message.success('登陆成功');
-          ACCOUNT.value = result; // 更新全局账户信息
-          // isLoadingAccount.value = false; // 状态在 finally 中统一处理
-          //initAll(false); // 初始化 WebFetcher
-        }
-      }
-    } catch (error) {
-      // 处理请求过程中的意外错误
-      console.error("Login failed:", error);
-      window.$notification.error({
-        title: '登陆出错',
-        content: '发生未知错误，请稍后再试或联系管理员。',
-        duration: 3000
-      });
-    } finally {
-      // 无论成功或失败，最终都结束加载状态
-      isLoadingAccount.value = false;
-    }
+/**
+ * @description 处理用户登录逻辑
+ */
+async function login() {
+  // 校验 Token 是否为空
+  if (!token.value.trim()) {
+    window.$message.error('请输入 Token') // 使用全局消息提示
+    return
   }
 
-  // --- 导航菜单配置 ---
-  // 将菜单项定义为常量，使模板更清晰
-  const menuOptions = computed(() => {
-    return [
-      {
-        label: () =>
-          h(RouterLink, { to: { name: 'client-index' } }, () => '主页'), // 使用 h 函数渲染 RouterLink
-        key: 'go-back-home',
-        icon: () => h(Home)
-      },
-      {
-        label: () =>
-          h(RouterLink, { to: { name: 'client-fetcher' } }, () => 'EventFetcher'),
-        key: 'fetcher',
-        icon: () => h(CloudArchive24Filled)
-      },
-      {
-        label: () =>
-          h(RouterLink, { to: { name: 'client-danmaku-window-manage' } }, () => '弹幕机'),
-        key: 'danmaku-window-manage',
-        icon: () => h(Chat24Filled),
-        show: danmakuWindow.danmakuWindow != undefined
-      },
-      {
-        label: () =>
-          h(RouterLink, { to: { name: 'client-auto-action-manage' } }, () => '自动操作'),
-        key: 'danmaku-auto-action-manage',
-        icon: () => h(FlashAuto24Filled),
-      },
-      {
-        label: () =>
-          h(RouterLink, { to: { name: 'client-settings' } }, () => '设置'),
-        key: 'settings',
-        icon: () => h(Settings24Filled)
-      },
-    ] as MenuOption[];
-  });
+  isLoadingAccount.value = true // 开始加载状态
+  try {
+    // 调用 API 获取账户信息
+    const result = await GetSelfAccount(token.value.trim())
 
-  onMounted(() => {
-    window.addEventListener('beforeunload', (event) => {
-      OnClientUnmounted(); // 调用清理函数
-    });
-  });
+    // 处理 API 返回结果
+    if (!result) {
+      // 登录失败：无效 Token
+      window.$notification.error({ // 使用全局通知
+        title: '登陆失败',
+        content: '无效的Token',
+        duration: 3000,
+      })
+    } else {
+      // 检查 B站主播码是否绑定
+      if (!result.isBiliAuthed) {
+        window.$notification.error({
+          title: '登陆失败',
+          content: 'B站主播码未绑定, 请先在网站管理页进行绑定',
+          duration: 3000,
+        })
+      } else {
+        // 登录成功
+        window.$message.success('登陆成功')
+        ACCOUNT.value = result // 更新全局账户信息
+        // isLoadingAccount.value = false; // 状态在 finally 中统一处理
+        // initAll(false); // 初始化 WebFetcher
+      }
+    }
+  } catch (error) {
+    // 处理请求过程中的意外错误
+    console.error('Login failed:', error)
+    window.$notification.error({
+      title: '登陆出错',
+      content: '发生未知错误，请稍后再试或联系管理员。',
+      duration: 3000,
+    })
+  } finally {
+    // 无论成功或失败，最终都结束加载状态
+    isLoadingAccount.value = false
+  }
+}
+
+// --- 导航菜单配置 ---
+// 将菜单项定义为常量，使模板更清晰
+const menuOptions = computed(() => {
+  return [
+    {
+      label: () =>
+        h(RouterLink, { to: { name: 'client-index' } }, () => '主页'), // 使用 h 函数渲染 RouterLink
+      key: 'go-back-home',
+      icon: () => h(Home),
+    },
+    {
+      label: () =>
+        h(RouterLink, { to: { name: 'client-fetcher' } }, () => 'EventFetcher'),
+      key: 'fetcher',
+      icon: () => h(CloudArchive24Filled),
+    },
+    {
+      label: () =>
+        h(RouterLink, { to: { name: 'client-danmaku-window-manage' } }, () => '弹幕机'),
+      key: 'danmaku-window-manage',
+      icon: () => h(Chat24Filled),
+      show: danmakuWindow.danmakuWindow != undefined,
+    },
+    {
+      label: () =>
+        h(RouterLink, { to: { name: 'client-auto-action-manage' } }, () => '自动操作'),
+      key: 'danmaku-auto-action-manage',
+      icon: () => h(FlashAuto24Filled),
+    },
+    {
+      label: () =>
+        h(RouterLink, { to: { name: 'client-settings' } }, () => '设置'),
+      key: 'settings',
+      icon: () => h(Settings24Filled),
+    },
+  ] as MenuOption[]
+})
+
+onMounted(() => {
+  window.addEventListener('beforeunload', (event) => {
+    OnClientUnmounted() // 调用清理函数
+  })
+})
 </script>
 
 <template>
@@ -251,7 +251,7 @@ import { useDanmakuWindow } from './store/useDanmakuWindow';
 
         <NMenu
           :options="menuOptions"
-          :default-value="'go-back-home'"
+          default-value="go-back-home"
           class="sider-menu"
         />
       </div>
@@ -261,7 +261,7 @@ import { useDanmakuWindow } from './store/useDanmakuWindow';
       class="main-layout-content"
       :native-scrollbar="false"
       :scrollbar-props="{
-        trigger: 'none'
+        trigger: 'none',
       }"
     >
       <div style="padding: 12px; padding-right: 15px;">
@@ -289,8 +289,7 @@ import { useDanmakuWindow } from './store/useDanmakuWindow';
 </template>
 
 <style scoped>
-
-  /* 登录容器样式 */
+/* 登录容器样式 */
   .login-container {
     display: flex;
     align-items: center;
@@ -371,7 +370,6 @@ import { useDanmakuWindow } from './store/useDanmakuWindow';
     height: 100%;
   }
 
-
   /* 侧边栏头部样式 */
   .sider-header {
     height: 60px;
@@ -450,4 +448,4 @@ import { useDanmakuWindow } from './store/useDanmakuWindow';
     opacity: 0;
     transform: translateX(20px);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/ClientSettings.vue b/src/client/ClientSettings.vue
index 6d06e6b..eac1d6c 100644
--- a/src/client/ClientSettings.vue
+++ b/src/client/ClientSettings.vue
@@ -1,122 +1,123 @@
 <script setup lang="ts">
-  import { useColorMode } from '@vueuse/core';
-  import { disable, enable, isEnabled } from "@tauri-apps/plugin-autostart";
-  import { ref, watch, onMounted } from 'vue';
-  import {
-    NGrid,
-    NGridItem,
-    NMenu,
-    NRadio,
-    NRadioGroup,
-    NSwitch,
-    NSpace,
-    NCard,
-    NSpin,
-    NFormItem,
-    NAlert,
-    NCheckboxGroup,
-    NCheckbox,
-    NDivider,
-  } from 'naive-ui';
-  import type { MenuOption } from 'naive-ui';
-  import { ThemeType } from '@/api/api-models';
-  import { NotificationType, useSettings } from './store/useSettings';
-  import { getVersion } from '@tauri-apps/api/app';
-import { invoke } from '@tauri-apps/api/core';
+import type { MenuOption } from 'naive-ui'
+import type { NotificationType } from './store/useSettings'
+import { getVersion } from '@tauri-apps/api/app'
+import { invoke } from '@tauri-apps/api/core'
+import { disable, enable, isEnabled } from '@tauri-apps/plugin-autostart'
+import {
+  NAlert,
+  NCard,
+  NCheckbox,
+  NDivider,
+  NFormItem,
+  NGrid,
+  NGridItem,
+  NMenu,
+  NRadio,
+  NRadioGroup,
+  NSpace,
+  NSpin,
+  NSwitch,
+} from 'naive-ui'
+import { onMounted, ref, watch } from 'vue'
+import { ThemeType } from '@/api/api-models'
+import { useSettings } from './store/useSettings'
 
-  // --- State ---
+// --- State ---
 
-  const currentTab = ref('general');
-  const isLoading = ref(true);
-  const errorMsg = ref<string | null>(null);
-  const titleClickCount = ref(0); // 添加计数器状态变量
-  let resetTimeout: number | null = null; // 用于重置计数器的超时ID
+const currentTab = ref('general')
+const isLoading = ref(true)
+const errorMsg = ref<string | null>(null)
+const titleClickCount = ref(0) // 添加计数器状态变量
+let resetTimeout: number | null = null // 用于重置计数器的超时ID
 
-  const setting = useSettings();
-  const currentVersion = await getVersion();
+const setting = useSettings()
+const currentVersion = await getVersion()
 
-  // Navigation
-  const navOptions: MenuOption[] = [
-    { label: '常规', key: 'general' },
-    { label: '通知', key: 'notification' },
-    { label: '其他', key: 'other' },
-    { label: '关于', key: 'about' },
-  ];
+// Navigation
+const navOptions: MenuOption[] = [
+  { label: '常规', key: 'general' },
+  { label: '通知', key: 'notification' },
+  { label: '其他', key: 'other' },
+  { label: '关于', key: 'about' },
+]
 
-  // Theme
+// Theme
 
-  const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 
-  // Autostart Settings
-  const isStartOnBoot = ref(false);
-  const minimizeOnStart = ref(false);
+// Autostart Settings
+const isStartOnBoot = ref(false)
+const minimizeOnStart = ref(false)
 
-  // --- Lifecycle Hooks ---
+// --- Lifecycle Hooks ---
 
-  onMounted(async () => {
-    isLoading.value = true;
-    errorMsg.value = null;
-    try {
-      isStartOnBoot.value = await isEnabled();
-    } catch (err) {
-      console.error("Failed to fetch autostart status:", err);
-      errorMsg.value = "无法获取开机启动状态，请稍后重试。";
-    } finally {
-      isLoading.value = false;
+onMounted(async () => {
+  isLoading.value = true
+  errorMsg.value = null
+  try {
+    isStartOnBoot.value = await isEnabled()
+  } catch (err) {
+    console.error('Failed to fetch autostart status:', err)
+    errorMsg.value = '无法获取开机启动状态，请稍后重试。'
+  } finally {
+    isLoading.value = false
+  }
+})
+
+// --- Watchers for Side Effects ---
+
+watch(isStartOnBoot, async (newValue, oldValue) => {
+  if (isLoading.value || newValue === oldValue) return
+
+  errorMsg.value = null
+  try {
+    if (newValue) {
+      await enable()
+    } else {
+      await disable()
     }
-  });
+  } catch (err) {
+    console.error('Failed to update autostart status:', err)
+    errorMsg.value = `设置开机启动失败: ${err instanceof Error ? err.message : '未知错误'}`
+    isStartOnBoot.value = oldValue
+    window.$message.error('设置开机启动失败')
+  }
+})
 
-  // --- Watchers for Side Effects ---
-
-  watch(isStartOnBoot, async (newValue, oldValue) => {
-    if (isLoading.value || newValue === oldValue) return;
-
-    errorMsg.value = null;
-    try {
-      if (newValue) {
-        await enable();
-      } else {
-        await disable();
-      }
-    } catch (err) {
-      console.error("Failed to update autostart status:", err);
-      errorMsg.value = `设置开机启动失败: ${err instanceof Error ? err.message : '未知错误'}`;
-      isStartOnBoot.value = oldValue;
-      window.$message.error('设置开机启动失败');
-    }
-  });
-
-  const renderNotifidactionEnable = (name: NotificationType) => h(NCheckbox, {
+function renderNotifidactionEnable(name: NotificationType) {
+  return h(NCheckbox, {
     checked: setting.settings.notificationSettings?.enableTypes.includes(name),
     onUpdateChecked: (value) => {
-      setting.settings.notificationSettings.enableTypes ??= [];
+      setting.settings.notificationSettings.enableTypes ??= []
       if (value) {
-        setting.settings.notificationSettings.enableTypes.push(name);
+        setting.settings.notificationSettings.enableTypes.push(name)
       } else {
-        setting.settings.notificationSettings.enableTypes = setting.settings.notificationSettings.enableTypes.filter(type => type !== name);
+        setting.settings.notificationSettings.enableTypes = setting.settings.notificationSettings.enableTypes.filter(type => type !== name)
       }
     },
-  }, () => '启用');
+  }, () => '启用')
+}
 
-  // --- 隐藏功能处理函数 ---
-  const handleTitleClick = () => {
-    titleClickCount.value++;
+// --- 隐藏功能处理函数 ---
+function handleTitleClick() {
+  titleClickCount.value++
 
-    if (resetTimeout !== null) {
-      clearTimeout(resetTimeout);
-    }
+  if (resetTimeout !== null) {
+    clearTimeout(resetTimeout)
+  }
 
-    resetTimeout = setTimeout(() => {
-      titleClickCount.value = 0;
-    }, 3000) as unknown as number;
+  resetTimeout = setTimeout(() => {
+    titleClickCount.value = 0
+  }, 3000) as unknown as number
 
-    if (titleClickCount.value === 10) {
-      invoke('open_dev_tools')
-        .then(() => {
-          window.$message.success('已打开 Dev Tools');
-        })
-    }
-  };
+  if (titleClickCount.value === 10) {
+    invoke('open_dev_tools')
+      .then(() => {
+        window.$message.success('已打开 Dev Tools')
+      })
+  }
+}
 </script>
 
 <template>
@@ -375,8 +376,7 @@ import { invoke } from '@tauri-apps/api/core';
 </template>
 
 <style scoped>
-
-  .fade-enter-active,
+.fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.2s ease;
   }
@@ -389,4 +389,4 @@ import { invoke } from '@tauri-apps/api/core';
   .label-item {
     height: 20px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/ClientTest.vue b/src/client/ClientTest.vue
index 16df4d3..5b74a33 100644
--- a/src/client/ClientTest.vue
+++ b/src/client/ClientTest.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { isPermissionGranted, onAction, sendNotification } from '@tauri-apps/plugin-notification';
-  import { NSwitch } from 'naive-ui';
-import { useSettings } from './store/useSettings';
-import { onReceivedQuestion } from './data/notification';
-import { QAInfo } from '@/api/api-models';
+import type { QAInfo } from '@/api/api-models'
+import { NSwitch } from 'naive-ui'
+import { onReceivedQuestion } from './data/notification'
+import { useSettings } from './store/useSettings'
 
-  const setting = useSettings()
+const setting = useSettings()
 async function testNotification() {
   onReceivedQuestion({
     id: 1,
@@ -15,7 +14,7 @@ async function testNotification() {
     tag: '测试标签',
     sender: { name: '测试用户', id: 1, isBiliAuthed: false },
     isPublic: true,
-  } as QAInfo);
+  } as QAInfo)
 }
 </script>
 
@@ -30,9 +29,9 @@ async function testNotification() {
       </NButton>
       <NButton
         type="primary"
-        @click="$router.push({ name: 'client-danmaku-window-manage'})"
+        @click="$router.push({ name: 'client-danmaku-window-manage' })"
       >
-      弹幕机
+        弹幕机
       </NButton>
       <LabelItem label="关闭弹幕客户端">
         <NSwitch
@@ -42,4 +41,4 @@ async function testNotification() {
       </LabelItem>
     </NFlex>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/DanmakuWindowManager.vue b/src/client/DanmakuWindowManager.vue
index 4e0391f..ad28013 100644
--- a/src/client/DanmakuWindowManager.vue
+++ b/src/client/DanmakuWindowManager.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { NAlert, NButton, NCard, NCheckbox, NCheckboxGroup, NColorPicker, NDivider, NFlex, NForm, NFormItem, NGi, NGrid, NIcon, NInputNumber, NRadioButton, NRadioGroup, NSelect, NSlider, NSpace, NSwitch, NTabPane, NTabs, NText, useMessage } from 'naive-ui';
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useDanmakuWindow } from './store/useDanmakuWindow';
-
 import {
-  ResizeTable24Filled
-} from '@vicons/fluent';
+  ResizeTable24Filled,
+} from '@vicons/fluent'
+import { NAlert, NButton, NCard, NCheckbox, NCheckboxGroup, NColorPicker, NDivider, NFlex, NForm, NFormItem, NGi, NGrid, NIcon, NInputNumber, NRadioButton, NRadioGroup, NSelect, NSlider, NSpace, NSwitch, NTabPane, NTabs, NText, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
-const danmakuWindow = useDanmakuWindow();
-const message = useMessage();
-const route = useRoute();
+import { useDanmakuWindow } from './store/useDanmakuWindow'
 
-const isSettingPositionMode = ref(false);
-const isLoading = ref(false);
+const danmakuWindow = useDanmakuWindow()
+const message = useMessage()
+const route = useRoute()
+
+const isSettingPositionMode = ref(false)
+const isLoading = ref(false)
 
 // 计算属性，类型映射
 const filterTypeOptions = [
@@ -21,27 +21,27 @@ const filterTypeOptions = [
   { label: '礼物', value: 'Gift' },
   { label: 'SC', value: 'SC' },
   { label: '舰长', value: 'Guard' },
-  { label: '进场', value: 'Enter' }
-];
+  { label: '进场', value: 'Enter' },
+]
 
 // 分组预设
 const presets = {
   dark: {
     backgroundColor: 'rgba(0,0,0,0.8)',
     textColor: '#ffffff',
-    shadowColor: 'rgba(0,0,0,0.7)'
+    shadowColor: 'rgba(0,0,0,0.7)',
   },
   light: {
     backgroundColor: 'rgba(255,255,255,0.8)',
     textColor: '#333333',
-    shadowColor: 'rgba(0,0,0,0.2)'
+    shadowColor: 'rgba(0,0,0,0.2)',
   },
   transparent: {
     backgroundColor: 'rgba(0,0,0,0.3)',
     textColor: '#ffffff',
-    shadowColor: 'rgba(0,0,0,0.0)'
-  }
-};
+    shadowColor: 'rgba(0,0,0,0.0)',
+  },
+}
 
 // 自动消失时间选项
 const autoDisappearOptions = [
@@ -51,29 +51,29 @@ const autoDisappearOptions = [
   { label: '1分钟', value: 60 },
   { label: '3分钟', value: 180 },
   { label: '5分钟', value: 300 },
-];
+]
 
 // 应用预设
 function applyPreset(preset: 'dark' | 'light' | 'transparent') {
-  const presetData = presets[preset];
-  danmakuWindow.danmakuWindowSetting.backgroundColor = presetData.backgroundColor;
-  danmakuWindow.danmakuWindowSetting.textColor = presetData.textColor;
-  danmakuWindow.danmakuWindowSetting.shadowColor = presetData.shadowColor;
-  message.success(`已应用${preset === 'dark' ? '暗黑' : preset === 'light' ? '明亮' : '透明'}主题预设`);
+  const presetData = presets[preset]
+  danmakuWindow.danmakuWindowSetting.backgroundColor = presetData.backgroundColor
+  danmakuWindow.danmakuWindowSetting.textColor = presetData.textColor
+  danmakuWindow.danmakuWindowSetting.shadowColor = presetData.shadowColor
+  message.success(`已应用${preset === 'dark' ? '暗黑' : preset === 'light' ? '明亮' : '透明'}主题预设`)
 }
 
 // 重置位置到屏幕中央
-  async function resetPosition() {
+async function resetPosition() {
   console.log(danmakuWindow.danmakuWindowSetting.height)
-  danmakuWindow.setDanmakuWindowPosition(0, 0);
-  message.success('窗口位置已重置');
+  danmakuWindow.setDanmakuWindowPosition(0, 0)
+  message.success('窗口位置已重置')
 }
 
 // 新增：弹幕展示风格选项
 const displayStyleOptions = [
   { label: '卡片风格', value: 'card' },
-  { label: '纯文本风格', value: 'text' }
-];
+  { label: '纯文本风格', value: 'text' },
+]
 
 // 新增：分隔符选项
 const separatorOptions = [
@@ -83,7 +83,7 @@ const separatorOptions = [
   { label: '| ', value: '| ' },
   { label: '- ', value: '- ' },
   { label: '→ ', value: '→ ' },
-];
+]
 </script>
 
 <template>
@@ -452,7 +452,7 @@ const separatorOptions = [
                     :marks="{
                       0: '不消失',
                       60: '1分钟',
-                      300: '5分钟'
+                      300: '5分钟',
                     }"
                   />
                   <NSpace justify="space-between">
diff --git a/src/client/WindowBar.vue b/src/client/WindowBar.vue
index ee25b7b..35a294b 100644
--- a/src/client/WindowBar.vue
+++ b/src/client/WindowBar.vue
@@ -1,50 +1,50 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import { Maximize24Filled, SquareMultiple24Regular } from '@vicons/fluent'; // Maximize 和 Restore 图标
-import { Close, RemoveOutline as Minus } from '@vicons/ionicons5'; // Close 和 Minimize 图标
-import { NFlex, NButton } from 'naive-ui'; // 显式导入 Naive UI 组件（好习惯）
-import { UnlistenFn } from '@tauri-apps/api/event';
+import type { UnlistenFn } from '@tauri-apps/api/event'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { Maximize24Filled, SquareMultiple24Regular } from '@vicons/fluent' // Maximize 和 Restore 图标
+import { Close, RemoveOutline as Minus } from '@vicons/ionicons5' // Close 和 Minimize 图标
+import { NButton, NFlex } from 'naive-ui' // 显式导入 Naive UI 组件（好习惯）
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const appWindow = getCurrentWindow();
-const isMaximized = ref(false);
-let unlisten: UnlistenFn | null = null;
+const appWindow = getCurrentWindow()
+const isMaximized = ref(false)
+let unlisten: UnlistenFn | null = null
 
 // --- Window State Handling ---
 
 // 更新最大化状态的函数
-const updateMaximizedState = async () => {
-  isMaximized.value = await appWindow.isMaximized();
-};
+async function updateMaximizedState() {
+  isMaximized.value = await appWindow.isMaximized()
+}
 
 // --- Event Handlers ---
 
 // 处理标题栏的鼠标按下事件 (拖动/双击最大化)
-const handleTitlebarMouseDown = (event: MouseEvent) => {
+function handleTitlebarMouseDown(event: MouseEvent) {
   // 确保是鼠标左键按下
   if (event.buttons === 1) {
     // event.detail 在 mousedown 事件中可以用来检测点击次数
     if (event.detail === 2) {
       // 双击：切换最大化
-      appWindow.toggleMaximize();
+      appWindow.toggleMaximize()
     } else {
       // 单击：开始拖动
-      appWindow.startDragging();
+      appWindow.startDragging()
     }
   }
-};
+}
 
 // --- Lifecycle Hooks ---
 
 onMounted(async () => {
   // 1. 组件挂载时，获取并设置初始的最大化状态
-  await updateMaximizedState();
+  await updateMaximizedState()
 
   // 2. 监听窗口大小变化事件，当窗口状态改变时（包括最大化/恢复）更新状态
   //    Tauri v1 使用 'tauri://resize'， Tauri v2 可能有更具体的事件，但 resize 通常会触发
   unlisten = await appWindow.onResized(() => {
-    updateMaximizedState();
-  });
+    updateMaximizedState()
+  })
 
   // 注意：某些情况下 (如 Linux 上的某些窗口管理器)，
   // toggleMaximize 可能不会立即触发 onResized。
@@ -55,20 +55,19 @@ onMounted(async () => {
   //   setTimeout(updateMaximizedState, 100); // 略微延迟更新
   // }
   // 然后在 maximize 按钮上使用 @click="handleToggleMaximize"
-});
+})
 
 onUnmounted(() => {
   // 组件卸载时，移除事件监听器，防止内存泄漏
   if (unlisten) {
-    unlisten();
+    unlisten()
   }
-});
+})
 
 // --- Window Control Functions ---
-const minimizeWindow = () => appWindow.minimize();
-const toggleMaximizeWindow = () => appWindow.toggleMaximize();
-const closeWindow = () => appWindow.hide();
-
+const minimizeWindow = () => appWindow.minimize()
+const toggleMaximizeWindow = () => appWindow.toggleMaximize()
+const closeWindow = () => appWindow.hide()
 </script>
 
 <template>
@@ -151,4 +150,4 @@ const closeWindow = () => appWindow.hide();
   width: 16px; /* 统一设置图标大小 */
   height: 16px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/components/autoaction/ActionHistoryViewer.vue b/src/client/components/autoaction/ActionHistoryViewer.vue
index da2c120..304cd50 100644
--- a/src/client/components/autoaction/ActionHistoryViewer.vue
+++ b/src/client/components/autoaction/ActionHistoryViewer.vue
@@ -1,32 +1,43 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, h } from 'vue';
+import type { HistoryItem } from '../../store/autoAction/utils/historyLogger'
+import { ArrowClockwise16Filled, CheckmarkCircle16Filled, Delete16Filled, DismissCircle16Filled } from '@vicons/fluent'
 import {
-  NSpace, NSelect, NButton, NDataTable, NPopconfirm,
-  NCard, NEmpty, NTag, NTabPane, NTabs, NTime,
-  useMessage, NIcon, NTooltip, NSpin
-} from 'naive-ui';
-import { ArrowClockwise16Filled, Delete16Filled, CheckmarkCircle16Filled, DismissCircle16Filled } from '@vicons/fluent';
-import { HistoryType, HistoryItem, getHistoryByType, clearHistory, clearAllHistory } from '../../store/autoAction/utils/historyLogger';
+  NButton,
+  NDataTable,
+  NEmpty,
+  NIcon,
+  NPopconfirm,
+  NSpace,
+  NSpin,
+  NTabPane,
+  NTabs,
+  NTag,
+  NTime,
+  NTooltip,
+  useMessage,
+} from 'naive-ui'
+import { h, onMounted, onUnmounted, ref } from 'vue'
+import { clearAllHistory, clearHistory, getHistoryByType, HistoryType } from '../../store/autoAction/utils/historyLogger'
 
-const message = useMessage();
-const loading = ref(true);
-const activeTab = ref(HistoryType.DANMAKU);
+const message = useMessage()
+const loading = ref(true)
+const activeTab = ref(HistoryType.DANMAKU)
 const historyData = ref<Record<HistoryType, HistoryItem[]>>({
   [HistoryType.DANMAKU]: [],
   [HistoryType.PRIVATE_MSG]: [],
-  [HistoryType.COMMAND]: []
-});
+  [HistoryType.COMMAND]: [],
+})
 
 // 类型名称映射
 const typeNameMap = {
   [HistoryType.DANMAKU]: '弹幕发送',
   [HistoryType.PRIVATE_MSG]: '私信发送',
-  [HistoryType.COMMAND]: '命令执行'
-};
+  [HistoryType.COMMAND]: '命令执行',
+}
 
 // 刷新间隔（毫秒）
-const refreshInterval = 10000;
-let refreshTimer: number | null = null;
+const refreshInterval = 10000
+let refreshTimer: number | null = null
 
 // 列定义
 const columns = [
@@ -40,28 +51,28 @@ const columns = [
       }, {
         trigger: () => h(NTime, {
           time: row.timestamp,
-          type: 'relative'
+          type: 'relative',
         }),
-        default: () => new Date(row.timestamp).toLocaleString()
-      });
+        default: () => new Date(row.timestamp).toLocaleString(),
+      })
     },
   },
   {
     title: '操作名称',
     key: 'actionName',
-    width: 160
+    width: 160,
   },
   {
     title: '内容',
     key: 'content',
     ellipsis: {
-      tooltip: true
-    }
+      tooltip: true,
+    },
   },
   {
     title: '目标',
     key: 'target',
-    width: 120
+    width: 120,
   },
   {
     title: '状态',
@@ -76,11 +87,11 @@ const columns = [
             trigger: () => h(
               NTag,
               { type: 'success', size: 'small', round: true },
-              { default: () => '成功', icon: () => h(NIcon, { component: CheckmarkCircle16Filled }) }
+              { default: () => '成功', icon: () => h(NIcon, { component: CheckmarkCircle16Filled }) },
             ),
-            default: () => '执行成功'
-          }
-        );
+            default: () => '执行成功',
+          },
+        )
       } else {
         return h(
           NTooltip,
@@ -89,90 +100,90 @@ const columns = [
             trigger: () => h(
               NTag,
               { type: 'error', size: 'small', round: true },
-              { default: () => '失败', icon: () => h(NIcon, { component: DismissCircle16Filled }) }
+              { default: () => '失败', icon: () => h(NIcon, { component: DismissCircle16Filled }) },
             ),
-            default: () => row.error || '执行失败'
-          }
-        );
+            default: () => row.error || '执行失败',
+          },
+        )
       }
-    }
+    },
   },
-];
+]
 
 // 加载历史数据
 async function loadHistory() {
-  loading.value = true;
+  loading.value = true
   try {
     // 并行加载所有类型的历史
     const [danmakuHistory, privateMsgHistory, commandHistory] = await Promise.all([
       getHistoryByType(HistoryType.DANMAKU),
       getHistoryByType(HistoryType.PRIVATE_MSG),
-      getHistoryByType(HistoryType.COMMAND)
-    ]);
+      getHistoryByType(HistoryType.COMMAND),
+    ])
 
     historyData.value = {
       [HistoryType.DANMAKU]: danmakuHistory.sort((a, b) => b.timestamp - a.timestamp),
       [HistoryType.PRIVATE_MSG]: privateMsgHistory.sort((a, b) => b.timestamp - a.timestamp),
-      [HistoryType.COMMAND]: commandHistory.sort((a, b) => b.timestamp - a.timestamp)
-    };
+      [HistoryType.COMMAND]: commandHistory.sort((a, b) => b.timestamp - a.timestamp),
+    }
   } catch (error) {
-    console.error('加载历史数据失败:', error);
-    message.error('加载历史数据失败');
+    console.error('加载历史数据失败:', error)
+    message.error('加载历史数据失败')
   } finally {
-    loading.value = false;
+    loading.value = false
   }
 }
 
 // 清除历史
 async function handleClearHistory(type: HistoryType) {
   try {
-    await clearHistory(type);
-    historyData.value[type] = [];
-    message.success(`已清空${typeNameMap[type]}历史`);
+    await clearHistory(type)
+    historyData.value[type] = []
+    message.success(`已清空${typeNameMap[type]}历史`)
   } catch (error) {
-    console.error('清除历史失败:', error);
-    message.error('清除历史失败');
+    console.error('清除历史失败:', error)
+    message.error('清除历史失败')
   }
 }
 
 // 清除所有历史
 async function handleClearAllHistory() {
   try {
-    await clearAllHistory();
+    await clearAllHistory()
     Object.keys(historyData.value).forEach((type) => {
-      historyData.value[type as HistoryType] = [];
-    });
-    message.success('已清空所有历史记录');
+      historyData.value[type as HistoryType] = []
+    })
+    message.success('已清空所有历史记录')
   } catch (error) {
-    console.error('清除所有历史失败:', error);
-    message.error('清除所有历史失败');
+    console.error('清除所有历史失败:', error)
+    message.error('清除所有历史失败')
   }
 }
 
 // 开始定时刷新
 function startRefreshTimer() {
-  stopRefreshTimer();
+  stopRefreshTimer()
   refreshTimer = window.setInterval(() => {
-    loadHistory();
-  }, refreshInterval);
+    loadHistory()
+  }, refreshInterval)
 }
 
 // 停止定时刷新
 function stopRefreshTimer() {
   if (refreshTimer !== null) {
-    clearInterval(refreshTimer);
-    refreshTimer = null;
+    clearInterval(refreshTimer)
+    refreshTimer = null
   }
 }
 
 onMounted(() => {
-  loadHistory();
-  startRefreshTimer();
-});
+  loadHistory()
+  startRefreshTimer()
+})
 
 onUnmounted(() => {
-  stopRefreshTimer();
-});
+  stopRefreshTimer()
+})
 </script>
 
 <template>
@@ -281,4 +292,4 @@ onUnmounted(() => {
   font-size: 16px;
   font-weight: 500;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/components/autoaction/AutoActionEditor.vue b/src/client/components/autoaction/AutoActionEditor.vue
index 58a5732..9be0fae 100644
--- a/src/client/components/autoaction/AutoActionEditor.vue
+++ b/src/client/components/autoaction/AutoActionEditor.vue
@@ -1,61 +1,62 @@
 <script setup lang="ts">
-import { NCard, NSpace, NCollapse, NDivider } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NCollapse, NDivider, NSpace } from 'naive-ui'
+import { TriggerType } from '@/client/store/useAutoAction'
 
+import AdvancedSettings from './settings/AdvancedSettings.vue'
 // 引入拆分的子组件
-import BasicSettings from './settings/BasicSettings.vue';
-import AdvancedSettings from './settings/AdvancedSettings.vue';
-import DanmakuSettings from './settings/DanmakuSettings.vue';
-import GiftSettings from './settings/GiftSettings.vue';
-import GuardSettings from './settings/GuardSettings.vue';
-import ScheduledSettings from './settings/ScheduledSettings.vue';
-import TemplateSettings from './settings/TemplateSettings.vue';
-import FollowSettings from './settings/FollowSettings.vue';
-import EnterSettings from './settings/EnterSettings.vue';
-import SuperChatSettings from './settings/SuperChatSettings.vue';
+import BasicSettings from './settings/BasicSettings.vue'
+import DanmakuSettings from './settings/DanmakuSettings.vue'
+import EnterSettings from './settings/EnterSettings.vue'
+import FollowSettings from './settings/FollowSettings.vue'
+import GiftSettings from './settings/GiftSettings.vue'
+import GuardSettings from './settings/GuardSettings.vue'
+import ScheduledSettings from './settings/ScheduledSettings.vue'
+import SuperChatSettings from './settings/SuperChatSettings.vue'
+import TemplateSettings from './settings/TemplateSettings.vue'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
+    required: true,
   },
   hideName: {
     type: Boolean,
-    default: false
+    default: false,
   },
   hideEnabled: {
     type: Boolean,
-    default: false
+    default: false,
   },
   customTestContext: {
     type: Object,
-    default: undefined
-  }
-});
+    default: undefined,
+  },
+})
 
 // 根据触发类型获取对应的设置组件
-const getTriggerSettings = () => {
+function getTriggerSettings() {
   switch (props.action.triggerType) {
     case TriggerType.DANMAKU:
-      return DanmakuSettings;
+      return DanmakuSettings
     case TriggerType.GIFT:
-      return GiftSettings;
+      return GiftSettings
     case TriggerType.GUARD:
-      return GuardSettings;
+      return GuardSettings
     case TriggerType.FOLLOW:
-      return FollowSettings;
+      return FollowSettings
     case TriggerType.ENTER:
-      return EnterSettings;
+      return EnterSettings
     case TriggerType.SCHEDULED:
-      return ScheduledSettings;
+      return ScheduledSettings
     case TriggerType.SUPER_CHAT:
-      return SuperChatSettings;
+      return SuperChatSettings
     default:
-      return null;
+      return null
   }
-};
+}
 
-const TriggerSettings = getTriggerSettings();
+const TriggerSettings = getTriggerSettings()
 </script>
 
 <template>
diff --git a/src/client/components/autoaction/DataManager.vue b/src/client/components/autoaction/DataManager.vue
index 73acb28..bdc243b 100644
--- a/src/client/components/autoaction/DataManager.vue
+++ b/src/client/components/autoaction/DataManager.vue
@@ -1,213 +1,226 @@
 <script setup lang="ts">
-import { ref, onMounted, h, reactive } from 'vue';
-import { keys as idbKeys, get as idbGet, del as idbDel, clear as idbClear, createStore } from 'idb-keyval';
-import { NCard, NDataTable, NButton, NSpace, NPopconfirm, NEmpty, NAlert, NSpin, NTag, useMessage, NText, DataTableColumns, NDivider } from 'naive-ui';
+import type { DataTableColumns } from 'naive-ui'
+import { createStore, clear as idbClear, del as idbDel, get as idbGet, keys as idbKeys } from 'idb-keyval'
+import { NAlert, NButton, NCard, NDataTable, NDivider, NEmpty, NPopconfirm, NSpace, NSpin, NTag, NText, useMessage } from 'naive-ui'
+import { h, onMounted, ref } from 'vue'
 
 // --- 定义用户持久化数据的自定义存储区 (与 utils.ts 中保持一致) ---
-const USER_DATA_DB_NAME = 'AutoActionUserDataDB';
-const USER_DATA_STORE_NAME = 'userData';
-const userDataStore = createStore(USER_DATA_DB_NAME, USER_DATA_STORE_NAME);
+const USER_DATA_DB_NAME = 'AutoActionUserDataDB'
+const USER_DATA_STORE_NAME = 'userData'
+const userDataStore = createStore(USER_DATA_DB_NAME, USER_DATA_STORE_NAME)
 // ------------------------------------------------------------
 
 // --- 运行时数据配置 (SessionStorage) ---
-const RUNTIME_STORAGE_PREFIX = 'autoaction_runtime_';
+const RUNTIME_STORAGE_PREFIX = 'autoaction_runtime_'
 // ------------------------------------
 
 interface DataItem {
-  key: string; // Key 统一为 string
-  value: any;
-  valueDisplay: string;
-  type: string;
+  key: string // Key 统一为 string
+  value: any
+  valueDisplay: string
+  type: string
 }
 
 // --- 持久化数据 (IndexedDB) 相关状态和函数 ---
-const persistentData = ref<DataItem[]>([]);
-const persistentLoading = ref(true);
-const message = useMessage();
+const persistentData = ref<DataItem[]>([])
+const persistentLoading = ref(true)
+const message = useMessage()
 
 async function fetchPersistentData() {
-  persistentLoading.value = true;
+  persistentLoading.value = true
   try {
-    const keys = await idbKeys(userDataStore);
-    const fetchedData: DataItem[] = [];
+    const keys = await idbKeys(userDataStore)
+    const fetchedData: DataItem[] = []
     for (const key of keys) {
       try {
-        const value = await idbGet(key, userDataStore);
-        let valueDisplay = '';
-        let type: string = typeof value;
+        const value = await idbGet(key, userDataStore)
+        let valueDisplay = ''
+        let type: string = typeof value
 
         if (value === null) {
-          valueDisplay = 'null';
-          type = 'null';
+          valueDisplay = 'null'
+          type = 'null'
         } else if (value === undefined) {
-           valueDisplay = 'undefined';
-           type = 'undefined';
+          valueDisplay = 'undefined'
+          type = 'undefined'
         } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-          valueDisplay = String(value);
+          valueDisplay = String(value)
         } else if (Array.isArray(value)) {
-            valueDisplay = `[Array (${value.length})]`;
-            type = 'array';
+          valueDisplay = `[Array (${value.length})]`
+          type = 'array'
         } else if (typeof value === 'object') {
           try {
-            valueDisplay = JSON.stringify(value, null, 2); //尝试格式化
+            valueDisplay = JSON.stringify(value, null, 2) // 尝试格式化
             if (valueDisplay.length > 200) {
-                 valueDisplay = `[Object]`; // 太长则简化
+              valueDisplay = `[Object]` // 太长则简化
             }
           } catch (e) {
-            valueDisplay = '[Object]'; // 不可序列化对象
+            valueDisplay = '[Object]' // 不可序列化对象
           }
-          type = 'object';
+          type = 'object'
         } else {
-            valueDisplay = `[${typeof value}]`; // 其他类型
+          valueDisplay = `[${typeof value}]` // 其他类型
         }
 
-        fetchedData.push({ key: String(key), value, valueDisplay, type });
+        fetchedData.push({ key: String(key), value, valueDisplay, type })
       } catch (getValueError) {
-         console.error(`[UserData IDB Manager] Error getting value for key ${String(key)}:`, getValueError);
-         fetchedData.push({ key: String(key), value: undefined, valueDisplay: '[Error Reading Value]', type: 'error' });
+        console.error(`[UserData IDB Manager] Error getting value for key ${String(key)}:`, getValueError)
+        fetchedData.push({ key: String(key), value: undefined, valueDisplay: '[Error Reading Value]', type: 'error' })
       }
     }
-    persistentData.value = fetchedData;
+    persistentData.value = fetchedData
   } catch (error) {
-    console.error('[UserData IDB Manager] Error fetching keys:', error);
-    message.error('无法加载用户持久化数据');
-    persistentData.value = [];
+    console.error('[UserData IDB Manager] Error fetching keys:', error)
+    message.error('无法加载用户持久化数据')
+    persistentData.value = []
   } finally {
-    persistentLoading.value = false;
+    persistentLoading.value = false
   }
 }
 
 async function deletePersistentItem(key: string) {
   try {
-    await idbDel(key, userDataStore);
-    message.success(`已删除持久化键: ${key}`);
-    await fetchPersistentData();
+    await idbDel(key, userDataStore)
+    message.success(`已删除持久化键: ${key}`)
+    await fetchPersistentData()
   } catch (error) {
-    console.error(`[UserData IDB Manager] Error deleting key ${String(key)}:`, error);
-    message.error(`删除键 ${String(key)} 时出错`);
+    console.error(`[UserData IDB Manager] Error deleting key ${String(key)}:`, error)
+    message.error(`删除键 ${String(key)} 时出错`)
   }
 }
 
 async function clearPersistentData() {
   try {
-    await idbClear(userDataStore);
-    message.success('已清除所有用户持久化数据');
-    await fetchPersistentData();
+    await idbClear(userDataStore)
+    message.success('已清除所有用户持久化数据')
+    await fetchPersistentData()
   } catch (error) {
-    console.error('[UserData IDB Manager] Error clearing data:', error);
-    message.error('清除用户数据时出错');
+    console.error('[UserData IDB Manager] Error clearing data:', error)
+    message.error('清除用户数据时出错')
   }
 }
 
 // --- 运行时数据 (SessionStorage) 相关状态和函数 ---
-const runtimeData = ref<DataItem[]>([]);
-const runtimeLoading = ref(true);
+const runtimeData = ref<DataItem[]>([])
+const runtimeLoading = ref(true)
 
 function fetchRuntimeData() {
-  runtimeLoading.value = true;
+  runtimeLoading.value = true
   try {
-    const fetchedData: DataItem[] = [];
+    const fetchedData: DataItem[] = []
     for (let i = 0; i < sessionStorage.length; i++) {
-      const prefixedKey = sessionStorage.key(i);
+      const prefixedKey = sessionStorage.key(i)
       if (prefixedKey && prefixedKey.startsWith(RUNTIME_STORAGE_PREFIX)) {
-        const key = prefixedKey.substring(RUNTIME_STORAGE_PREFIX.length);
+        const key = prefixedKey.substring(RUNTIME_STORAGE_PREFIX.length)
         try {
-          const storedValue = sessionStorage.getItem(prefixedKey);
-          let value: any;
-          let valueDisplay = '';
-          let type: string = 'unknown';
+          const storedValue = sessionStorage.getItem(prefixedKey)
+          let value: any
+          let valueDisplay = ''
+          let type: string = 'unknown'
 
           if (storedValue !== null) {
             try {
-              value = JSON.parse(storedValue);
-              type = typeof value;
-              if (value === null) { valueDisplay = 'null'; type = 'null'; }
-              else if (value === undefined) { valueDisplay = 'undefined'; type = 'undefined'; }
-              else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { valueDisplay = String(value); }
-              else if (Array.isArray(value)) { valueDisplay = `[Array (${value.length})]`; type = 'array'; }
-              else if (typeof value === 'object') {
-                try { valueDisplay = JSON.stringify(value, null, 2); if (valueDisplay.length > 200) { valueDisplay = `[Object]`; } } catch (e) { valueDisplay = '[Object]'; }
-                type = 'object';
-              } else { valueDisplay = `[${typeof value}]`; }
+              value = JSON.parse(storedValue)
+              type = typeof value
+              if (value === null) {
+                valueDisplay = 'null'; type = 'null'
+              } else if (value === undefined) {
+                valueDisplay = 'undefined'; type = 'undefined'
+              } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+                valueDisplay = String(value)
+              } else if (Array.isArray(value)) {
+                valueDisplay = `[Array (${value.length})]`; type = 'array'
+              } else if (typeof value === 'object') {
+                try {
+                  valueDisplay = JSON.stringify(value, null, 2); if (valueDisplay.length > 200) {
+                    valueDisplay = `[Object]`
+                  }
+                } catch (e) {
+                  valueDisplay = '[Object]'
+                }
+                type = 'object'
+              } else {
+                valueDisplay = `[${typeof value}]`
+              }
             } catch (parseError) {
-              console.error(`[Runtime SessionStorage Manager] Error parsing key '${key}':`, parseError);
-              value = storedValue; // 解析失败则显示原始字符串
-              valueDisplay = `[Parse Error] ${storedValue}`;
-              type = 'parse-error';
+              console.error(`[Runtime SessionStorage Manager] Error parsing key '${key}':`, parseError)
+              value = storedValue // 解析失败则显示原始字符串
+              valueDisplay = `[Parse Error] ${storedValue}`
+              type = 'parse-error'
             }
           } else {
             // 理论上不应该发生，因为 getItem(key(i)) 应该有值
-            valueDisplay = '[Error Reading Value]';
-            type = 'error';
+            valueDisplay = '[Error Reading Value]'
+            type = 'error'
           }
-          fetchedData.push({ key, value, valueDisplay, type });
+          fetchedData.push({ key, value, valueDisplay, type })
         } catch (error) {
-          console.error(`[Runtime SessionStorage Manager] Error processing key '${key}':`, error);
-          fetchedData.push({ key, value: undefined, valueDisplay: '[Error Processing Key]', type: 'error' });
+          console.error(`[Runtime SessionStorage Manager] Error processing key '${key}':`, error)
+          fetchedData.push({ key, value: undefined, valueDisplay: '[Error Processing Key]', type: 'error' })
         }
       }
     }
-    runtimeData.value = fetchedData;
+    runtimeData.value = fetchedData
   } catch (error) {
-    console.error('[Runtime SessionStorage Manager] Error fetching keys:', error);
-    message.error('无法加载运行时数据');
-    runtimeData.value = [];
+    console.error('[Runtime SessionStorage Manager] Error fetching keys:', error)
+    message.error('无法加载运行时数据')
+    runtimeData.value = []
   } finally {
-    runtimeLoading.value = false;
+    runtimeLoading.value = false
   }
 }
 
 function deleteRuntimeItem(key: string) {
   try {
-    sessionStorage.removeItem(RUNTIME_STORAGE_PREFIX + key);
-    message.success(`已删除运行时键: ${key}`);
-    fetchRuntimeData();
+    sessionStorage.removeItem(RUNTIME_STORAGE_PREFIX + key)
+    message.success(`已删除运行时键: ${key}`)
+    fetchRuntimeData()
   } catch (error) {
-    console.error(`[Runtime SessionStorage Manager] Error deleting key ${String(key)}:`, error);
-    message.error(`删除键 ${String(key)} 时出错`);
+    console.error(`[Runtime SessionStorage Manager] Error deleting key ${String(key)}:`, error)
+    message.error(`删除键 ${String(key)} 时出错`)
   }
 }
 
 function clearRuntimeData() {
   try {
-    let keysToRemove: string[] = [];
+    const keysToRemove: string[] = []
     for (let i = 0; i < sessionStorage.length; i++) {
-      const key = sessionStorage.key(i);
+      const key = sessionStorage.key(i)
       if (key && key.startsWith(RUNTIME_STORAGE_PREFIX)) {
-        keysToRemove.push(key);
+        keysToRemove.push(key)
       }
     }
-    keysToRemove.forEach(key => sessionStorage.removeItem(key));
-    message.success('已清除所有运行时数据');
-    fetchRuntimeData();
+    keysToRemove.forEach(key => sessionStorage.removeItem(key))
+    message.success('已清除所有运行时数据')
+    fetchRuntimeData()
   } catch (error) {
-    console.error('[Runtime SessionStorage Manager] Error clearing data:', error);
-    message.error('清除运行时数据时出错');
+    console.error('[Runtime SessionStorage Manager] Error clearing data:', error)
+    message.error('清除运行时数据时出错')
   }
 }
 
 // --- 表格列定义 (复用) ---
 const commonColumns: DataTableColumns<DataItem> = [
-  { title: '键 (Key)', key: 'key', resizable: true, render: (row) => h(NText, { code: true }, { default: () => row.key }) },
-  { title: '类型 (Type)', key: 'type', width: 120, render: (row) => h(NTag, { size: 'small', type: (row.type === 'error' || row.type === 'parse-error') ? 'error' : 'default', bordered: false }, { default: () => row.type }) },
-  { title: '值 (Value)', key: 'valueDisplay', resizable: true, ellipsis: { tooltip: true }, render: (row) => h('pre', { style: 'white-space: pre-wrap; word-break: break-all; margin: 0; font-family: inherit; font-size: inherit;' }, row.valueDisplay) },
-];
+  { title: '键 (Key)', key: 'key', resizable: true, render: row => h(NText, { code: true }, { default: () => row.key }) },
+  { title: '类型 (Type)', key: 'type', width: 120, render: row => h(NTag, { size: 'small', type: (row.type === 'error' || row.type === 'parse-error') ? 'error' : 'default', bordered: false }, { default: () => row.type }) },
+  { title: '值 (Value)', key: 'valueDisplay', resizable: true, ellipsis: { tooltip: true }, render: row => h('pre', { style: 'white-space: pre-wrap; word-break: break-all; margin: 0; font-family: inherit; font-size: inherit;' }, row.valueDisplay) },
+]
 
 const persistentColumns: DataTableColumns<DataItem> = [
-    ...commonColumns,
-    { title: '操作', key: 'actions', width: 100, render: (row) => h(NPopconfirm, { onPositiveClick: () => deletePersistentItem(row.key), positiveText: '确认删除', negativeText: '取消' }, { trigger: () => h(NButton, { size: 'small', type: 'error', ghost: true }, { default: () => '删除' }), default: () => `删除持久化键 "${row.key}"?` }) },
-];
+  ...commonColumns,
+  { title: '操作', key: 'actions', width: 100, render: row => h(NPopconfirm, { onPositiveClick: () => deletePersistentItem(row.key), positiveText: '确认删除', negativeText: '取消' }, { trigger: () => h(NButton, { size: 'small', type: 'error', ghost: true }, { default: () => '删除' }), default: () => `删除持久化键 "${row.key}"?` }) },
+]
 
 const runtimeColumns: DataTableColumns<DataItem> = [
-    ...commonColumns,
-    { title: '操作', key: 'actions', width: 100, render: (row) => h(NPopconfirm, { onPositiveClick: () => deleteRuntimeItem(row.key), positiveText: '确认删除', negativeText: '取消' }, { trigger: () => h(NButton, { size: 'small', type: 'error', ghost: true }, { default: () => '删除' }), default: () => `删除运行时键 "${row.key}"?` }) },
-];
+  ...commonColumns,
+  { title: '操作', key: 'actions', width: 100, render: row => h(NPopconfirm, { onPositiveClick: () => deleteRuntimeItem(row.key), positiveText: '确认删除', negativeText: '取消' }, { trigger: () => h(NButton, { size: 'small', type: 'error', ghost: true }, { default: () => '删除' }), default: () => `删除运行时键 "${row.key}"?` }) },
+]
 
 // --- 组件挂载时加载数据 ---
 onMounted(() => {
-    fetchPersistentData();
-    fetchRuntimeData();
-});
+  fetchPersistentData()
+  fetchRuntimeData()
+})
 </script>
 
 <template>
@@ -349,4 +362,4 @@ code {
   font-family: monospace;
   font-size: 13px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/components/autoaction/SingleTemplateEditor.vue b/src/client/components/autoaction/SingleTemplateEditor.vue
index 1600322..6485730 100644
--- a/src/client/components/autoaction/SingleTemplateEditor.vue
+++ b/src/client/components/autoaction/SingleTemplateEditor.vue
@@ -1,32 +1,30 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-import TemplateEditor from './TemplateEditor.vue';
-import { AutoActionItem } from '@/client/store/autoAction/types';
+import type { AutoActionItem } from '@/client/store/autoAction/types'
+import TemplateEditor from './TemplateEditor.vue'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
+    required: true,
   },
   title: {
     type: String,
-    default: '回复模板'
+    default: '回复模板',
   },
   description: {
     type: String,
-    default: '在这里编辑自动回复的模板，支持变量和JavaScript表达式'
-  }
-});
+    default: '在这里编辑自动回复的模板，支持变量和JavaScript表达式',
+  },
+})
 
 // Handle the update event from TemplateEditor
 function handleTemplateUpdate(payload: { index: number, value: string }) {
   // This component edits the first template (index 0)
   // Assuming props.action.templates should be a single string based on type error
   if (payload.index === 0) {
-    props.action.template = payload.value;
+    props.action.template = payload.value
   }
 }
-
 </script>
 
 <template>
@@ -37,4 +35,4 @@ function handleTemplateUpdate(payload: { index: number, value: string }) {
     :description="description"
     @update:template="handleTemplateUpdate"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/components/autoaction/TemplateEditor.vue b/src/client/components/autoaction/TemplateEditor.vue
index 60f778a..68d050c 100644
--- a/src/client/components/autoaction/TemplateEditor.vue
+++ b/src/client/components/autoaction/TemplateEditor.vue
@@ -1,38 +1,39 @@
 <script setup lang="ts">
-import { NButton, NCard, NDivider, NHighlight, NInput, NScrollbar, NSpace, NModal, useMessage, NTabs, NTabPane, NFlex, NAlert, NIcon, NCollapse, NCollapseItem, NBadge, NText } from 'naive-ui';
-import { computed, ref, watch } from 'vue';
-import TemplateHelper from './TemplateHelper.vue';
-import { containsJsExpression, convertToJsExpressions, evaluateTemplateExpressions, extractJsExpressions, JS_EXPRESSION_REGEX } from '@/client/store/autoAction/expressionEvaluator';
-import { buildExecutionContext } from '@/client/store/autoAction/utils';
-import { AutoActionItem, TriggerType } from '@/client/store/autoAction/types';
-import { Info24Filled, Code24Regular, LiveOff24Regular } from '@vicons/fluent';
-import { EventDataTypes, EventModel } from '@/api/api-models';
-import GraphemeSplitter from 'grapheme-splitter';
+import type { AutoActionItem } from '@/client/store/autoAction/types'
+import { Code24Regular, Info24Filled, LiveOff24Regular } from '@vicons/fluent'
+import GraphemeSplitter from 'grapheme-splitter'
+import { NAlert, NBadge, NButton, NCard, NCollapse, NCollapseItem, NDivider, NFlex, NHighlight, NIcon, NInput, NModal, NScrollbar, NTabPane, NTabs, NText, useMessage } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { EventDataTypes } from '@/api/api-models'
+import { containsJsExpression, convertToJsExpressions, evaluateTemplateExpressions, extractJsExpressions } from '@/client/store/autoAction/expressionEvaluator'
+import { TriggerType } from '@/client/store/autoAction/types'
+import { buildExecutionContext } from '@/client/store/autoAction/utils'
+import TemplateHelper from './TemplateHelper.vue'
 
 const props = defineProps({
   template: {
     type: Object as () => AutoActionItem,
-    required: true
+    required: true,
   },
   title: {
     type: String,
-    default: '模板编辑'
+    default: '模板编辑',
   },
   description: {
     type: String,
-    default: ''
+    default: '',
   },
   checkLength: {
     type: Boolean,
-    default: true
+    default: true,
   },
   customTestContext: {
     type: Object,
-    default: undefined
-  }
-});
+    default: undefined,
+  },
+})
 
-const emit = defineEmits(['update:template']);
+const emit = defineEmits(['update:template'])
 
 const mergedPlaceholders = computed(() => {
   const basePlaceholders = [
@@ -50,62 +51,62 @@ const mergedPlaceholders = computed(() => {
     { name: '{{date.minute}}', description: '当前分钟' },
     { name: '{{date.second}}', description: '当前秒数' },
     { name: '{{timeOfDay}}', description: '当前时段 (凌晨/早上/上午/中午/下午/晚上/深夜)' },
-    { name: '{{event}}', description: '原始事件对象 (高级用法)' }
-  ];
+    { name: '{{event}}', description: '原始事件对象 (高级用法)' },
+  ]
 
-  const specificPlaceholders: { name: string, description: string }[] = [];
+  const specificPlaceholders: { name: string, description: string }[] = []
 
   switch (props.template.triggerType) {
     case TriggerType.DANMAKU:
       specificPlaceholders.push(
         { name: '{{message}}', description: '弹幕内容' },
-        { name: '{{danmaku}}', description: '弹幕事件对象' }
-      );
-      break;
+        { name: '{{danmaku}}', description: '弹幕事件对象' },
+      )
+      break
     case TriggerType.GIFT:
       specificPlaceholders.push(
         { name: '{{gift.name}}', description: '礼物名称' },
         { name: '{{gift.count}}', description: '礼物数量' },
         { name: '{{gift.price}}', description: '礼物单价(元)' },
         { name: '{{gift.totalPrice}}', description: '礼物总价值(元)' },
-        { name: '{{gift.summary}}', description: '礼物概要 (例如: 5个小心心)' }
-      );
-      break;
+        { name: '{{gift.summary}}', description: '礼物概要 (例如: 5个小心心)' },
+      )
+      break
     case TriggerType.GUARD:
       specificPlaceholders.push(
         { name: '{{guard.level}}', description: '开通的舰队等级 (1:总督, 2:提督, 3:舰长)' },
         { name: '{{guard.levelName}}', description: '开通的舰队等级名称' },
-        { name: '{{guard.giftCode}}', description: '舰长礼物代码 (预留字段)' }
-      );
-      break;
+        { name: '{{guard.giftCode}}', description: '舰长礼物代码 (预留字段)' },
+      )
+      break
     case TriggerType.SUPER_CHAT:
       specificPlaceholders.push(
         { name: '{{sc.message}}', description: 'SC留言内容' },
-        { name: '{{sc.price}}', description: 'SC金额(元)' }
-      );
-      break;
+        { name: '{{sc.price}}', description: 'SC金额(元)' },
+      )
+      break
   }
 
-  const finalPlaceholders = [...specificPlaceholders, ...basePlaceholders];
-  return Array.from(new Map(finalPlaceholders.map(item => [item.name, item])).values());
-});
+  const finalPlaceholders = [...specificPlaceholders, ...basePlaceholders]
+  return Array.from(new Map(finalPlaceholders.map(item => [item.name, item])).values())
+})
 
 // 深度合并两个对象的辅助函数
 function deepMerge(target: any, source: any): any {
-  if (!source) return target;
-  if (!target) return source;
+  if (!source) return target
+  if (!target) return source
 
-  const result = { ...target };
+  const result = { ...target }
 
-  Object.keys(source).forEach(key => {
+  Object.keys(source).forEach((key) => {
     if (typeof source[key] === 'object' && source[key] !== null && typeof target[key] === 'object' && target[key] !== null) {
-      result[key] = deepMerge(target[key], source[key]);
+      result[key] = deepMerge(target[key], source[key])
     } else if (source[key] !== undefined) {
-      result[key] = source[key];
+      result[key] = source[key]
     }
-  });
+  })
 
-  return result;
+  return result
 }
 
 const testContext = computed(() => {
@@ -127,115 +128,115 @@ const testContext = computed(() => {
     fans_medal_wearing_status: true,
     guard_level_name: '测试舰队',
     guard_level_price: 100,
-  }, undefined, props.template.triggerType);
+  }, undefined, props.template.triggerType)
 
   // 如果有自定义上下文，将其与默认上下文合并
   if (props.customTestContext) {
-    return deepMerge(defaultContext, props.customTestContext);
+    return deepMerge(defaultContext, props.customTestContext)
   }
 
-  return defaultContext;
-});
+  return defaultContext
+})
 
-const message = useMessage();
-const activeTab = ref('editor');
-const showLivePreview = ref(true);
-const splitter = new GraphemeSplitter();
-const showSyntaxModal = ref(false);
+const message = useMessage()
+const activeTab = ref('editor')
+const showLivePreview = ref(true)
+const splitter = new GraphemeSplitter()
+const showSyntaxModal = ref(false)
 
 function countGraphemes(value: string) {
-  return splitter.countGraphemes(value);
+  return splitter.countGraphemes(value)
 }
 
 function convertPlaceholders() {
   if (!props.template.template) {
-    message.warning('请先输入模板内容');
-    return;
+    message.warning('请先输入模板内容')
+    return
   }
-  const converted = convertToJsExpressions(props.template.template, mergedPlaceholders.value);
+  const converted = convertToJsExpressions(props.template.template, mergedPlaceholders.value)
   if (converted !== props.template.template) {
-    props.template.template = converted;
-    message.success('已转换占位符为表达式格式');
+    props.template.template = converted
+    message.success('已转换占位符为表达式格式')
   } else {
-    message.info('模板中没有需要转换的占位符');
+    message.info('模板中没有需要转换的占位符')
   }
 }
 
 function hasJsExpression(template: string): boolean {
-  return containsJsExpression(template);
+  return containsJsExpression(template)
 }
 
 const highlightPatterns = computed(() => {
-  const simplePlaceholders = mergedPlaceholders.value.map(p => p.name);
-  const jsExpressionsInTemplate = extractJsExpressions(props.template.template || '');
-  const allPatterns = [...new Set([...simplePlaceholders, ...jsExpressionsInTemplate])];
-  return allPatterns;
-});
+  const simplePlaceholders = mergedPlaceholders.value.map(p => p.name)
+  const jsExpressionsInTemplate = extractJsExpressions(props.template.template || '')
+  const allPatterns = [...new Set([...simplePlaceholders, ...jsExpressionsInTemplate])]
+  return allPatterns
+})
 
-const MAX_LENGTH = 20;
-const WARNING_THRESHOLD = 16;
+const MAX_LENGTH = 20
+const WARNING_THRESHOLD = 16
 
 function evaluateTemplateForUI(template: string): string {
   // 深度合并默认上下文和自定义上下文
-  const executionContext = buildExecutionContext(testContext.value.event, undefined, props.template.triggerType);
+  const executionContext = buildExecutionContext(testContext.value.event, undefined, props.template.triggerType)
 
   // 如果有自定义上下文，将其深度合并到执行上下文中
   if (props.customTestContext) {
-    Object.keys(props.customTestContext).forEach(key => {
+    Object.keys(props.customTestContext).forEach((key) => {
       if (typeof props.customTestContext?.[key] === 'object' && props.customTestContext[key] !== null) {
-        executionContext.variables[key] = deepMerge(executionContext.variables[key] || {}, props.customTestContext[key]);
+        executionContext.variables[key] = deepMerge(executionContext.variables[key] || {}, props.customTestContext[key])
       } else {
-        executionContext.variables[key] = props.customTestContext?.[key];
+        executionContext.variables[key] = props.customTestContext?.[key]
       }
-    });
+    })
   }
 
   try {
-    return evaluateTemplateExpressions(template, executionContext);
+    return evaluateTemplateExpressions(template, executionContext)
   } catch (error) {
-    console.error("Preview evaluation error:", error);
-    return `[预览错误: ${(error as Error).message}]`;
+    console.error('Preview evaluation error:', error)
+    return `[预览错误: ${(error as Error).message}]`
   }
 }
 
 const evaluatedTemplateResult = computed(() => {
-  if (!props.template.template || !showLivePreview.value) return '';
-  return evaluateTemplateForUI(props.template.template);
-});
+  if (!props.template.template || !showLivePreview.value) return ''
+  return evaluateTemplateForUI(props.template.template)
+})
 
 const previewResult = computed(() => {
-  return evaluatedTemplateResult.value;
-});
+  return evaluatedTemplateResult.value
+})
 
 const lengthStatus = computed(() => {
   if (!props.template.template || !props.checkLength || !showLivePreview.value) {
-    return { status: 'normal' as const, message: '' };
+    return { status: 'normal' as const, message: '' }
   }
   try {
-    const formattedText = evaluatedTemplateResult.value;
+    const formattedText = evaluatedTemplateResult.value
     if (formattedText.startsWith('[预览错误:')) {
-      return { status: 'normal' as const, message: '' };
+      return { status: 'normal' as const, message: '' }
     }
 
-    const formattedLength = countGraphemes(formattedText);
+    const formattedLength = countGraphemes(formattedText)
     if (formattedLength > MAX_LENGTH) {
-      return { status: 'error' as const, message: `格式化后长度超出限制（${formattedLength}/${MAX_LENGTH}字）` };
+      return { status: 'error' as const, message: `格式化后长度超出限制（${formattedLength}/${MAX_LENGTH}字）` }
     } else if (formattedLength >= WARNING_THRESHOLD) {
-      return { status: 'warning' as const, message: `格式化后长度接近限制（${formattedLength}/${MAX_LENGTH}字）` };
+      return { status: 'warning' as const, message: `格式化后长度接近限制（${formattedLength}/${MAX_LENGTH}字）` }
     }
-    return { status: 'normal' as const, message: '' };
+    return { status: 'normal' as const, message: '' }
   } catch (error) {
-    return { status: 'normal' as const, message: '' };
+    return { status: 'normal' as const, message: '' }
   }
-});
+})
 
 const templateExamples = [
   {
     title: '基础变量',
     examples: [
       { label: '用户名', template: '你好 {{user.name}}！' },
-      { label: '条件回复', template: '{{js: user.guardLevel > 0 ? "欢迎舰长" : "欢迎"}} {{user.name}}！' }
-    ]
+      { label: '条件回复', template: '{{js: user.guardLevel > 0 ? "欢迎舰长" : "欢迎"}} {{user.name}}！' },
+    ],
   },
   {
     title: '高级用法',
@@ -245,34 +246,34 @@ const templateExamples = [
       { label: '日期时间', template: '{{js: new Date().toLocaleTimeString()}}，{{timeOfDay}}好！' },
       {
         label: '运行时计数',
-        template: '{{js+: const count = (getData(\'messageCount\') || 0) + 1; setData(\'messageCount\', count); return `这是你本次对话的第 ${count} 条消息。`; }}'
+        template: '{{js+: const count = (getData(\'messageCount\') || 0) + 1; setData(\'messageCount\', count); return `这是你本次对话的第 ${count} 条消息。`; }}',
       },
       {
         label: '运行时频率检查',
-        template: '{{js+: const warns = (getData(\'warnings\') || 0) + 1; setData(\'warnings\', warns); return warns > 3 ? "发言太频繁啦！" : "收到你的消息~"; }}'
+        template: '{{js+: const warns = (getData(\'warnings\') || 0) + 1; setData(\'warnings\', warns); return warns > 3 ? "发言太频繁啦！" : "收到你的消息~"; }}',
       },
       {
         label: '触发持久化计数 (异步)',
-        template: '{{js+: const key = `user:${user.uid}:totalMessages`; getStorageData(key, 0).then(c => setStorageData(key, (c || 0) + 1)); return `正在为你累计总发言数...`; }}'
+        template: '{{js+: const key = `user:${user.uid}:totalMessages`; getStorageData(key, 0).then(c => setStorageData(key, (c || 0) + 1)); return `正在为你累计总发言数...`; }}',
       },
       {
         label: '问候一次 (持久化)',
-        template: '{{js+: const key = `greeted:${user.uid}`; hasStorageData(key).then(exists => { if (!exists) { setStorageData(key, true); /* 这里可以接发送欢迎消息的逻辑 */ } }); return \'检查问候状态...\'; }}'
-      }
-    ]
+        template: '{{js+: const key = `greeted:${user.uid}`; hasStorageData(key).then(exists => { if (!exists) { setStorageData(key, true); /* 这里可以接发送欢迎消息的逻辑 */ } }); return \'检查问候状态...\'; }}',
+      },
+    ],
   },
   {
     title: '弹幕功能',
     examples: [
       { label: '提取内容', template: '你说的是 "{{js: message.substring(0, 5)}}{{js: message.length > 5 ? "..." : ""}}" 吗？' },
-      { label: '回复问候', template: '{{js: message.includes("早上好") ? "早安" : "你好"}}，{{user.name}}！' }
-    ]
-  }
-];
+      { label: '回复问候', template: '{{js: message.includes("早上好") ? "早安" : "你好"}}，{{user.name}}！' },
+    ],
+  },
+]
 
 function insertExample(template: string) {
-  props.template.template = template;
-  message.success('已插入示例模板');
+  props.template.template = template
+  message.success('已插入示例模板')
 }
 </script>
 
@@ -661,4 +662,3 @@ function insertExample(template: string) {
   padding: 0;
 }
 </style>
-
diff --git a/src/client/components/autoaction/TemplateHelper.vue b/src/client/components/autoaction/TemplateHelper.vue
index d876244..f2e8ecc 100644
--- a/src/client/components/autoaction/TemplateHelper.vue
+++ b/src/client/components/autoaction/TemplateHelper.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { NSpace, NTag, NTooltip, useMessage } from 'naive-ui'
+
+const props = defineProps({
+  placeholders: {
+    type: Array as () => { name: string, description: string }[],
+    required: true,
+  },
+})
+
+const message = useMessage()
+
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text)
+    .then(() => {
+      message.success('已复制到剪贴板')
+    })
+    .catch(() => {
+      message.error('复制失败')
+    })
+}
+</script>
+
 <template>
   <div class="template-helper">
     <NSpace vertical>
@@ -30,30 +53,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { Info24Filled } from '@vicons/fluent';
-import { NSpace, NTag, NAlert, NTooltip, NIcon, useMessage, NDivider } from 'naive-ui';
-
-const props = defineProps({
-  placeholders: {
-    type: Array as () => { name: string; description: string }[],
-    required: true
-  }
-});
-
-const message = useMessage();
-
-function copyToClipboard(text: string) {
-  navigator.clipboard.writeText(text)
-    .then(() => {
-      message.success('已复制到剪贴板');
-    })
-    .catch(() => {
-      message.error('复制失败');
-    });
-}
-</script>
-
 <style scoped>
 .template-helper {
   margin-bottom: 16px;
@@ -71,4 +70,4 @@ code {
   border-radius: 4px;
   font-family: monospace;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/components/autoaction/TimerCountdown.vue b/src/client/components/autoaction/TimerCountdown.vue
index e71f229..efc7a6c 100644
--- a/src/client/components/autoaction/TimerCountdown.vue
+++ b/src/client/components/autoaction/TimerCountdown.vue
@@ -1,90 +1,91 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
-import { useAutoAction, TriggerType } from '@/client/store/useAutoAction'; // 确保导入 TriggerType
-import { NText } from 'naive-ui';
-// import { formatDuration } from '@/utils/time'; // 移除不存在的导入
-
-// 在组件内部实现简单的格式化函数
-const formatDuration = (totalSeconds: number): string => {
-  if (isNaN(totalSeconds) || totalSeconds < 0) {
-    return '00:00';
-  }
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = Math.floor(totalSeconds % 60);
-  const paddedMinutes = String(minutes).padStart(2, '0');
-  const paddedSeconds = String(seconds).padStart(2, '0');
-  return `${paddedMinutes}:${paddedSeconds}`;
-};
-
+import { NText } from 'naive-ui'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { TriggerType, useAutoAction } from '@/client/store/useAutoAction'
+// 确保导入 TriggerType
 const props = defineProps({
   actionId: {
     type: String,
-    required: true
+    required: true,
+  },
+})
+
+// import { formatDuration } from '@/utils/time'; // 移除不存在的导入
+
+// 在组件内部实现简单的格式化函数
+function formatDuration(totalSeconds: number): string {
+  if (isNaN(totalSeconds) || totalSeconds < 0) {
+    return '00:00'
   }
-});
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+  const paddedMinutes = String(minutes).padStart(2, '0')
+  const paddedSeconds = String(seconds).padStart(2, '0')
+  return `${paddedMinutes}:${paddedSeconds}`
+}
 
-const autoActionStore = useAutoAction();
+const autoActionStore = useAutoAction()
 
-const remainingSecondsDisplay = ref<string>('...'); // 用于显示格式化后的剩余时间
-const intervalId = ref<any | null>(null);
+const remainingSecondsDisplay = ref<string>('...') // 用于显示格式化后的剩余时间
+const intervalId = ref<any | null>(null)
 
 // 获取目标 action 的基本信息，用于判断是否是有效的定时任务
-const targetAction = computed(() => autoActionStore.autoActions.find(a => a.id === props.actionId));
+const targetAction = computed(() => autoActionStore.autoActions.find(a => a.id === props.actionId))
 
 // 获取当前计时器信息
-const getTimerInfo = () => {
-  return autoActionStore.getScheduledTimerInfo(props.actionId);
-};
+function getTimerInfo() {
+  return autoActionStore.getScheduledTimerInfo(props.actionId)
+}
 
 // 更新显示的函数
-const updateDisplay = () => {
-  const timerInfo = getTimerInfo();
+function updateDisplay() {
+  const timerInfo = getTimerInfo()
   if (timerInfo && timerInfo.remainingMs > 0) {
-    remainingSecondsDisplay.value = formatDuration(timerInfo.remainingMs / 1000); // 使用内部的 formatDuration
+    remainingSecondsDisplay.value = formatDuration(timerInfo.remainingMs / 1000) // 使用内部的 formatDuration
   } else {
     // 如果没有计时器信息或时间已到，显示默认文本并停止更新
-    remainingSecondsDisplay.value = targetAction.value?.triggerConfig.useGlobalTimer ? '全局' : '独立';
+    remainingSecondsDisplay.value = targetAction.value?.triggerConfig.useGlobalTimer ? '全局' : '独立'
     if (intervalId.value) {
-      clearInterval(intervalId.value);
-      intervalId.value = null;
+      clearInterval(intervalId.value)
+      intervalId.value = null
     }
   }
-};
+}
 
 // 启动定时更新
-const startInterval = () => {
-  stopInterval(); // 先清除旧的定时器
-  const timerInfo = getTimerInfo();
+function startInterval() {
+  stopInterval() // 先清除旧的定时器
+  const timerInfo = getTimerInfo()
   // 只有在获取到有效的计时器信息时才启动
   if (timerInfo && timerInfo.remainingMs > 0) {
-    updateDisplay(); // 先立即更新一次
-    intervalId.value = setInterval(updateDisplay, 1000); // 每秒更新
+    updateDisplay() // 先立即更新一次
+    intervalId.value = setInterval(updateDisplay, 1000) // 每秒更新
   } else {
     // 如果初始状态就无效，直接显示默认文本
-    updateDisplay();
+    updateDisplay()
   }
-};
+}
 
 // 停止定时更新
-const stopInterval = () => {
+function stopInterval() {
   if (intervalId.value) {
-    clearInterval(intervalId.value);
-    intervalId.value = null;
+    clearInterval(intervalId.value)
+    intervalId.value = null
   }
-};
+}
 
 onMounted(() => {
   // 仅当 action 是 SCHEDULED 类型时才尝试启动计时器
   if (targetAction.value?.triggerType === TriggerType.SCHEDULED) {
-    startInterval();
+    startInterval()
   } else {
-    remainingSecondsDisplay.value = '非定时';
+    remainingSecondsDisplay.value = '非定时'
   }
-});
+})
 
 onUnmounted(() => {
-  stopInterval(); // 组件卸载时清除定时器
-});
+  stopInterval() // 组件卸载时清除定时器
+})
 
 // 监听计时器状态变化（例如从独立切换到全局，或者反之，以及全局定时器的启动/停止）
 // 一个简化的方法是监听 getScheduledTimerInfo 的返回值，但这可能频繁触发
@@ -96,30 +97,30 @@ watch(
     // autoActionStore.runtimeState.globalTimerStartTime, // 监听全局启动时间
     // autoActionStore.runtimeState.timerStartTimes[props.actionId] // 监听独立启动时间
     // 监听 getTimerInfo 返回的对象的引用可能更稳定，仅当对象本身改变时触发
-    autoActionStore.getScheduledTimerInfo(props.actionId)
+    autoActionStore.getScheduledTimerInfo(props.actionId),
   ],
   (newValues, oldValues) => {
     // 只有 action 是 SCHEDULED 类型时才处理
     if (targetAction.value?.triggerType !== TriggerType.SCHEDULED) {
-      stopInterval();
-      remainingSecondsDisplay.value = '非定时';
-      return;
+      stopInterval()
+      remainingSecondsDisplay.value = '非定时'
+      return
     }
 
-    const newTimerInfo = newValues[2] as ReturnType<typeof getTimerInfo>; // 获取新的 timerInfo
-    const oldTimerInfo = oldValues ? oldValues[2] as ReturnType<typeof getTimerInfo> : null;
+    const newTimerInfo = newValues[2] as ReturnType<typeof getTimerInfo> // 获取新的 timerInfo
+    const oldTimerInfo = oldValues ? oldValues[2] as ReturnType<typeof getTimerInfo> : null
 
     // 检查计时器状态是否实际改变 (从有到无，从无到有，或者时间重置)
-    const isActiveNow = newTimerInfo !== null && newTimerInfo.remainingMs > 0;
-    const wasActiveBefore = oldTimerInfo !== null && oldTimerInfo.remainingMs > 0;
+    const isActiveNow = newTimerInfo !== null && newTimerInfo.remainingMs > 0
+    const wasActiveBefore = oldTimerInfo !== null && oldTimerInfo.remainingMs > 0
 
     if (isActiveNow && !wasActiveBefore) {
       // 从不活动变为活动 -> 启动计时器
-      startInterval();
+      startInterval()
     } else if (!isActiveNow && wasActiveBefore) {
       // 从活动变为不活动 -> 停止计时器并更新显示
-      stopInterval();
-      updateDisplay(); // 显示 "全局" 或 "独立"
+      stopInterval()
+      updateDisplay() // 显示 "全局" 或 "独立"
     } else if (isActiveNow && wasActiveBefore) {
       // 如果一直活动，但 timerInfo 对象改变了 (可能意味着时间重置了)，也重启一下 interval 确保时间准确
       // 简单的判断：如果 startTime 变了 (需要 getScheduledTimerInfo 返回 startTime)
@@ -127,25 +128,24 @@ watch(
       // 但由于 getScheduledTimerInfo 每次计算 remainingMs，可能导致不必要的重启
       // 优化：如果 remainingMs 突然大幅增加 (意味着重置)，可以重启
       if (newTimerInfo && oldTimerInfo && newTimerInfo.remainingMs > oldTimerInfo.remainingMs + 1500) { // 增加超过1.5秒，认为是重置
-        startInterval();
+        startInterval()
       } else {
         // 否则，让现有的 interval 继续运行更新就好
         // 但为了保险，可以考虑在启用状态或定时器类型切换时强制重启
         if (newValues[0] !== oldValues?.[0] || newValues[1] !== oldValues?.[1]) {
-          startInterval();
+          startInterval()
         }
       }
     } else {
       // 都不是活动状态，确保停止
-      stopInterval();
-      updateDisplay();
+      stopInterval()
+      updateDisplay()
     }
   },
-  { deep: true } // 使用 deep watch 可能性能消耗稍大，但能更好地捕捉嵌套变化
-);
-
+  { deep: true }, // 使用 deep watch 可能性能消耗稍大，但能更好地捕捉嵌套变化
+)
 </script>
 
 <template>
   <NText>{{ remainingSecondsDisplay }}</NText>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/components/autoaction/settings/AdvancedSettings.vue b/src/client/components/autoaction/settings/AdvancedSettings.vue
index 53f916e..c23c505 100644
--- a/src/client/components/autoaction/settings/AdvancedSettings.vue
+++ b/src/client/components/autoaction/settings/AdvancedSettings.vue
@@ -1,68 +1,69 @@
 <script setup lang="ts">
-import { NSpace, NSwitch, NInputNumber, NInput, NCollapseItem, NCollapse } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
-import { computed } from 'vue';
-import { createDefaultAutoAction } from '@/client/store/autoAction/utils';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NCollapse, NCollapseItem, NInput, NInputNumber, NSpace, NSwitch } from 'naive-ui'
+import { computed } from 'vue'
+import { createDefaultAutoAction } from '@/client/store/autoAction/utils'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
 // 根据触发类型判断是否显示用户过滤选项
 const showUserFilter = computed(() => {
-  return ![TriggerType.SCHEDULED].includes(props.action.triggerType);
-});
+  return ![TriggerType.SCHEDULED].includes(props.action.triggerType)
+})
 
 // 获取默认配置作为比较基准
-const defaultAction = computed(() => createDefaultAutoAction(props.action.triggerType));
+const defaultAction = computed(() => createDefaultAutoAction(props.action.triggerType))
 
 // 检查设置项是否被修改
-const isModified = (path: string, value: any) => {
-  const pathParts = path.split('.');
-  let defaultValue: any = defaultAction.value;
-  let currentValue: any = props.action;
+function isModified(path: string, value: any) {
+  const pathParts = path.split('.')
+  let defaultValue: any = defaultAction.value
+  let currentValue: any = props.action
 
   // 遍历路径获取值
   for (const part of pathParts) {
-    defaultValue = defaultValue && typeof defaultValue === 'object' ? defaultValue[part as keyof typeof defaultValue] : undefined;
-    currentValue = currentValue && typeof currentValue === 'object' ? currentValue[part as keyof typeof currentValue] : undefined;
+    defaultValue = defaultValue && typeof defaultValue === 'object' ? defaultValue[part as keyof typeof defaultValue] : undefined
+    currentValue = currentValue && typeof currentValue === 'object' ? currentValue[part as keyof typeof currentValue] : undefined
   }
 
   // 处理特殊情况，如果指定了具体值进行比较
   if (value !== undefined) {
-    return value !== defaultValue;
+    return value !== defaultValue
   }
 
-  return currentValue !== defaultValue;
-};
+  return currentValue !== defaultValue
+}
 
 // 检查用户过滤区域是否有修改
 const userFilterModified = computed(() => {
-  if (!showUserFilter.value) return false;
-  return isModified('triggerConfig.userFilterEnabled', props.action.triggerConfig.userFilterEnabled) ||
-         isModified('triggerConfig.requireMedal', props.action.triggerConfig.requireMedal) ||
-         isModified('triggerConfig.requireCaptain', props.action.triggerConfig.requireCaptain);
-});
+  if (!showUserFilter.value) return false
+  return isModified('triggerConfig.userFilterEnabled', props.action.triggerConfig.userFilterEnabled)
+    || isModified('triggerConfig.requireMedal', props.action.triggerConfig.requireMedal)
+    || isModified('triggerConfig.requireCaptain', props.action.triggerConfig.requireCaptain)
+})
 
 // 检查冷却控制区域是否有修改
 const cooldownModified = computed(() => {
-  return isModified('ignoreCooldown', props.action.ignoreCooldown) ||
-         isModified('actionConfig.delaySeconds', props.action.actionConfig.delaySeconds) ||
-         isModified('actionConfig.cooldownSeconds', props.action.actionConfig.cooldownSeconds);
-});
+  return isModified('ignoreCooldown', props.action.ignoreCooldown)
+    || isModified('actionConfig.delaySeconds', props.action.actionConfig.delaySeconds)
+    || isModified('actionConfig.cooldownSeconds', props.action.actionConfig.cooldownSeconds)
+})
 
 // 检查逻辑表达式是否有修改
 const logicalExpressionModified = computed(() => {
-  return isModified('logicalExpression', props.action.logicalExpression);
-});
+  return isModified('logicalExpression', props.action.logicalExpression)
+})
 
 // 检查自定义JS是否有修改
 const customJsModified = computed(() => {
-  return isModified('executeCommand', props.action.executeCommand);
-});
+  return isModified('executeCommand', props.action.executeCommand)
+})
 </script>
 
 <template>
@@ -73,7 +74,7 @@ const customJsModified = computed(() => {
       :title="userFilterModified ? '用户过滤 *' : '用户过滤'"
       :title-extra="userFilterModified ? '已修改' : ''"
       class="settings-section"
-      :class="{'section-modified': userFilterModified}"
+      :class="{ 'section-modified': userFilterModified }"
     >
       <div>
         <NSpace
@@ -85,7 +86,7 @@ const customJsModified = computed(() => {
             align="center"
             justify="space-between"
             style="width: 100%"
-            :class="['setting-item', {'setting-modified': isModified('triggerConfig.userFilterEnabled', action.triggerConfig.userFilterEnabled)}]"
+            class="setting-item" :class="[{ 'setting-modified': isModified('triggerConfig.userFilterEnabled', action.triggerConfig.userFilterEnabled) }]"
           >
             <span>启用用户过滤:</span>
             <NSwitch v-model:value="action.triggerConfig.userFilterEnabled" />
@@ -97,7 +98,7 @@ const customJsModified = computed(() => {
               align="center"
               justify="space-between"
               style="width: 100%"
-              :class="['setting-item', {'setting-modified': isModified('triggerConfig.requireMedal', action.triggerConfig.requireMedal)}]"
+              class="setting-item" :class="[{ 'setting-modified': isModified('triggerConfig.requireMedal', action.triggerConfig.requireMedal) }]"
             >
               <span>要求本房间勋章:</span>
               <NSwitch v-model:value="action.triggerConfig.requireMedal" />
@@ -108,7 +109,7 @@ const customJsModified = computed(() => {
               align="center"
               justify="space-between"
               style="width: 100%"
-              :class="['setting-item', {'setting-modified': isModified('triggerConfig.requireCaptain', action.triggerConfig.requireCaptain)}]"
+              class="setting-item" :class="[{ 'setting-modified': isModified('triggerConfig.requireCaptain', action.triggerConfig.requireCaptain) }]"
             >
               <span>要求任意舰长:</span>
               <NSwitch v-model:value="action.triggerConfig.requireCaptain" />
@@ -123,7 +124,7 @@ const customJsModified = computed(() => {
       :title="cooldownModified ? '冷却控制 *' : '冷却控制'"
       :title-extra="cooldownModified ? '已修改' : ''"
       class="settings-section"
-      :class="{'section-modified': cooldownModified}"
+      :class="{ 'section-modified': cooldownModified }"
     >
       <div>
         <NSpace
@@ -131,7 +132,7 @@ const customJsModified = computed(() => {
           align="center"
           justify="space-between"
           style="width: 100%"
-          :class="['setting-item', {'setting-modified': isModified('ignoreCooldown', action.ignoreCooldown)}]"
+          class="setting-item" :class="[{ 'setting-modified': isModified('ignoreCooldown', action.ignoreCooldown) }]"
         >
           <span>忽略全局冷却:</span>
           <NSwitch v-model:value="action.ignoreCooldown" />
@@ -142,7 +143,7 @@ const customJsModified = computed(() => {
           align="center"
           justify="space-between"
           style="width: 100%"
-          :class="['setting-item', {'setting-modified': isModified('actionConfig.delaySeconds', action.actionConfig.delaySeconds)}]"
+          class="setting-item" :class="[{ 'setting-modified': isModified('actionConfig.delaySeconds', action.actionConfig.delaySeconds) }]"
         >
           <span>延迟执行(秒):</span>
           <NInputNumber
@@ -158,7 +159,7 @@ const customJsModified = computed(() => {
           align="center"
           justify="space-between"
           style="width: 100%"
-          :class="['setting-item', {'setting-modified': isModified('actionConfig.cooldownSeconds', action.actionConfig.cooldownSeconds)}]"
+          class="setting-item" :class="[{ 'setting-modified': isModified('actionConfig.cooldownSeconds', action.actionConfig.cooldownSeconds) }]"
         >
           <span>冷却时间(秒):</span>
           <NInputNumber
@@ -176,7 +177,7 @@ const customJsModified = computed(() => {
       :title="logicalExpressionModified ? '逻辑条件表达式 *' : '逻辑条件表达式'"
       :title-extra="logicalExpressionModified ? '已修改' : ''"
       class="settings-section"
-      :class="{'section-modified': logicalExpressionModified}"
+      :class="{ 'section-modified': logicalExpressionModified }"
     >
       <div>
         <NSpace vertical>
@@ -188,7 +189,7 @@ const customJsModified = computed(() => {
             type="textarea"
             placeholder="输入表达式，留空则始终为真"
             :autosize="{ minRows: 2, maxRows: 5 }"
-            :class="{'input-modified': isModified('logicalExpression', action.logicalExpression)}"
+            :class="{ 'input-modified': isModified('logicalExpression', action.logicalExpression) }"
           />
         </NSpace>
       </div>
@@ -199,7 +200,7 @@ const customJsModified = computed(() => {
       :title="customJsModified ? '自定义JS执行 *' : '自定义JS执行'"
       :title-extra="customJsModified ? '已修改' : ''"
       class="settings-section"
-      :class="{'section-modified': customJsModified}"
+      :class="{ 'section-modified': customJsModified }"
     >
       <div>
         <NSpace vertical>
@@ -211,7 +212,7 @@ const customJsModified = computed(() => {
             type="textarea"
             placeholder="输入要执行的JS代码"
             :autosize="{ minRows: 3, maxRows: 8 }"
-            :class="{'input-modified': isModified('executeCommand', action.executeCommand)}"
+            :class="{ 'input-modified': isModified('executeCommand', action.executeCommand) }"
           />
         </NSpace>
       </div>
diff --git a/src/client/components/autoaction/settings/BasicSettings.vue b/src/client/components/autoaction/settings/BasicSettings.vue
index aafd2b2..eb5b199 100644
--- a/src/client/components/autoaction/settings/BasicSettings.vue
+++ b/src/client/components/autoaction/settings/BasicSettings.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import { NSpace, NInput, NSwitch, NSelect } from 'naive-ui';
-import { AutoActionItem, TriggerType, ActionType, Priority } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NInput, NSelect, NSpace, NSwitch } from 'naive-ui'
+import { ActionType, Priority, TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
+    required: true,
   },
   hideName: {
     type: Boolean,
-    default: false
+    default: false,
   },
   hideEnabled: {
     type: Boolean,
-    default: false
-  }
-});
+    default: false,
+  },
+})
 
 // 触发类型选项
 const triggerTypeOptions = [
@@ -26,14 +27,14 @@ const triggerTypeOptions = [
   { label: '入场欢迎', value: TriggerType.ENTER },
   { label: '定时发送', value: TriggerType.SCHEDULED },
   { label: 'SC感谢', value: TriggerType.SUPER_CHAT },
-];
+]
 
 // 操作类型选项
 const actionTypeOptions = [
   { label: '发送弹幕', value: ActionType.SEND_DANMAKU },
   { label: '发送私信', value: ActionType.SEND_PRIVATE_MSG },
   { label: '执行命令', value: ActionType.EXECUTE_COMMAND },
-];
+]
 
 // 优先级选项
 const priorityOptions = [
@@ -42,7 +43,7 @@ const priorityOptions = [
   { label: '普通', value: Priority.NORMAL },
   { label: '低', value: Priority.LOW },
   { label: '最低', value: Priority.LOWEST },
-];
+]
 </script>
 
 <template>
diff --git a/src/client/components/autoaction/settings/CheckInSettings.vue b/src/client/components/autoaction/settings/CheckInSettings.vue
index c46f7b6..d8497c8 100644
--- a/src/client/components/autoaction/settings/CheckInSettings.vue
+++ b/src/client/components/autoaction/settings/CheckInSettings.vue
@@ -1,3 +1,425 @@
+<script lang="ts" setup>
+import type { DataTableColumns } from 'naive-ui'
+import type { CheckInRankingInfo, CheckInResult } from '@/api/api-models'
+import { Info24Filled } from '@vicons/fluent'
+import { NAlert, NButton, NCard, NDataTable, NDivider, NForm, NFormItem, NIcon, NInput, NInputGroup, NInputNumber, NPopconfirm, NSelect, NSpace, NSpin, NSwitch, NTabPane, NTabs, NText, NTime, NTooltip } from 'naive-ui'
+import { computed, h, onMounted, ref } from 'vue'
+import { SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account'
+import { FunctionTypes } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { useAutoAction } from '@/client/store/useAutoAction'
+import { CHECKIN_API_URL } from '@/data/constants'
+import AutoActionEditor from '../AutoActionEditor.vue'
+import TemplateHelper from '../TemplateHelper.vue'
+
+interface LiveInfo {
+  roomId?: number
+}
+
+const autoActionStore = useAutoAction()
+const config = autoActionStore.checkInModule.checkInConfig
+const accountInfo = useAccount()
+const isLoading = ref(false)
+
+const customTestContext = ref({
+  checkin: {
+    points: 0,
+    consecutiveDays: 0,
+    todayRank: 0,
+    time: new Date(),
+  },
+})
+
+// 签到模板的特定占位符
+const checkInPlaceholders = [
+  { name: '{{checkin.points}}', description: '获得的总积分' },
+  { name: '{{checkin.consecutiveDays}}', description: '连续签到天数' },
+  { name: '{{checkin.todayRank}}', description: '今日签到排名' },
+  { name: '{{checkin.time}}', description: '签到时间对象' },
+]
+
+// 服务端签到设置
+const serverSetting = computed(() => {
+  return accountInfo.value?.settings?.point || {}
+})
+
+// 是否可以编辑设置
+const canEdit = computed(() => {
+  return accountInfo.value && accountInfo.value.settings && accountInfo.value.settings.point
+})
+
+// 更新所有设置
+async function updateSettings() {
+  // 先保存服务端设置
+  const serverSaved = await updateServerSettings()
+
+  if (serverSaved) {
+    window.$notification.success({
+      title: '设置已保存',
+      duration: 3000,
+    })
+  }
+
+  return serverSaved
+}
+
+// 更新服务端签到设置
+async function updateServerSettings() {
+  if (!canEdit.value) {
+    return false
+  }
+
+  isLoading.value = true
+
+  try {
+    const msg = await SaveSetting('Point', accountInfo.value.settings.point)
+    if (msg) {
+      return true
+    } else {
+      window.$notification.error({
+        title: '保存失败',
+        content: msg,
+        duration: 5000,
+      })
+    }
+  } catch (err) {
+    window.$notification.error({
+      title: '保存失败',
+      content: String(err),
+      duration: 5000,
+    })
+    console.error('保存签到设置失败:', err)
+  } finally {
+    isLoading.value = false
+  }
+
+  return false
+}
+
+// 排行榜数据
+const rankingData = ref<CheckInRankingInfo[]>([])
+const isLoadingRanking = ref(false)
+const timeRange = ref<string>('all')
+const userFilter = ref<string>('')
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+})
+
+// 时间段选项
+const timeRangeOptions = [
+  { label: '全部时间', value: 'all' },
+  { label: '今日', value: 'today' },
+  { label: '本周', value: 'week' },
+  { label: '本月', value: 'month' },
+  { label: '上个月', value: 'lastMonth' },
+]
+
+// 过滤后的排行榜数据
+const filteredRankingData = computed(() => {
+  let filtered = rankingData.value
+
+  // 按时间范围筛选
+  if (timeRange.value !== 'all') {
+    const now = new Date()
+    let startTime: Date
+
+    if (timeRange.value === 'today') {
+      // 今天凌晨
+      startTime = new Date(now)
+      startTime.setHours(0, 0, 0, 0)
+    } else if (timeRange.value === 'week') {
+      // 本周一
+      const dayOfWeek = now.getDay() || 7 // 把周日作为7处理
+      startTime = new Date(now)
+      startTime.setDate(now.getDate() - (dayOfWeek - 1))
+      startTime.setHours(0, 0, 0, 0)
+    } else if (timeRange.value === 'month') {
+      // 本月1号
+      startTime = new Date(now.getFullYear(), now.getMonth(), 1)
+    } else if (timeRange.value === 'lastMonth') {
+      // 上月1号
+      startTime = new Date(now.getFullYear(), now.getMonth() - 1, 1)
+      // 本月1号作为结束时间
+      const endTime = new Date(now.getFullYear(), now.getMonth(), 1)
+      filtered = filtered.filter((user) => {
+        const checkInTime = new Date(user.lastCheckInTime)
+        return checkInTime >= startTime && checkInTime < endTime
+      })
+      // 已经筛选完成，不需要再次筛选
+      startTime = new Date(0)
+    }
+
+    // 如果不是上个月，用通用筛选逻辑
+    if (timeRange.value !== 'lastMonth') {
+      filtered = filtered.filter((user) => {
+        const checkInTime = new Date(user.lastCheckInTime)
+        return checkInTime >= startTime
+      })
+    }
+  }
+
+  // 按用户名筛选
+  if (userFilter.value) {
+    const keyword = userFilter.value.toLowerCase()
+    filtered = filtered.filter(user =>
+      user.name.toLowerCase().includes(keyword),
+    )
+  }
+
+  return filtered
+})
+
+// 排行榜列定义
+const rankingColumns: DataTableColumns<CheckInRankingInfo> = [
+  {
+    title: '排名',
+    key: 'rank',
+    render: (row: CheckInRankingInfo, index: number) => h('span', {}, index + 1),
+  },
+  {
+    title: '用户名',
+    key: 'name',
+  },
+  {
+    title: '连续签到天数',
+    key: 'consecutiveDays',
+    sorter: 'default',
+  },
+  {
+    title: '积分',
+    key: 'points',
+    sorter: 'default',
+  },
+  {
+    title: '最近签到时间',
+    key: 'lastCheckInTime',
+    render(row: CheckInRankingInfo) {
+      return h(NTooltip, {
+      }, {
+        trigger: () => h(NTime, {
+          time: row.lastCheckInTime,
+          type: 'relative',
+        }),
+        default: () => new Date(row.lastCheckInTime).toLocaleString(),
+      })
+    },
+    sorter: 'default',
+  },
+  {
+    title: '已认证',
+    key: 'isAuthed',
+    render(row: CheckInRankingInfo) {
+      return h('span', {}, row.isAuthed ? '是' : '否')
+    },
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    render(row: CheckInRankingInfo) {
+      return h(
+        NPopconfirm,
+        {
+          onPositiveClick: () => resetUserCheckInByGuid(row.ouId),
+        },
+        {
+          trigger: () => h(
+            NButton,
+            {
+              size: 'small',
+              type: 'warning',
+              disabled: isResetting.value,
+              loading: isResetting.value && resetTargetId.value === row.ouId,
+              onClick: e => e.stopPropagation(),
+            },
+            { default: () => '重置签到' },
+          ),
+          default: () => '确定要重置该用户的所有签到数据吗？此操作不可撤销。',
+        },
+      )
+    },
+  },
+]
+
+// 加载签到排行榜数据
+async function loadCheckInRanking() {
+  if (isLoadingRanking.value) return
+
+  isLoadingRanking.value = true
+  try {
+    // 获取所有用户数据，不再根据时间范围过滤
+    const response = await QueryGetAPI<CheckInRankingInfo[]>(`${CHECKIN_API_URL}admin/users`)
+
+    if (response.code == 200) {
+      rankingData.value = response.data
+      pagination.value.page = 1 // 重置为第一页
+    } else {
+      rankingData.value = []
+      window.$message.error(`获取签到排行榜失败: ${response.message}`)
+    }
+  } catch (error) {
+    console.error('加载签到排行榜失败:', error)
+    window.$notification.error({
+      title: '加载失败',
+      content: '无法加载签到排行榜数据',
+      duration: 5000,
+    })
+    rankingData.value = []
+  } finally {
+    isLoadingRanking.value = false
+  }
+}
+
+// 重置签到数据相关
+const isResetting = ref(false)
+const resetTargetId = ref<string>()
+
+// 重置单个用户签到数据
+async function resetUserCheckInByGuid(ouId: string) {
+  if (!ouId || isResetting.value) return
+
+  isResetting.value = true
+  resetTargetId.value = ouId
+
+  try {
+    const response = await QueryGetAPI(`${CHECKIN_API_URL}admin/reset`, {
+      ouId,
+    })
+
+    if (response && response.code === 200) {
+      window.$notification.success({
+        title: '重置成功',
+        content: '用户签到数据已重置',
+        duration: 3000,
+      })
+
+      // 重置成功后重新加载排行榜
+      await loadCheckInRanking()
+    } else {
+      window.$notification.error({
+        title: '重置失败',
+        content: response?.message || '无法重置用户签到数据',
+        duration: 5000,
+      })
+    }
+  } catch (error) {
+    console.error('重置用户签到数据失败:', error)
+    window.$notification.error({
+      title: '重置失败',
+      content: '重置用户签到数据时发生错误',
+      duration: 5000,
+    })
+  } finally {
+    isResetting.value = false
+    resetTargetId.value = undefined
+  }
+}
+
+// 重置所有用户签到数据
+async function resetAllCheckIn() {
+  if (isResetting.value) return
+
+  isResetting.value = true
+  try {
+    const response = await QueryGetAPI(`${CHECKIN_API_URL}admin/reset`, {})
+
+    if (response && response.code === 200) {
+      window.$notification.success({
+        title: '重置成功',
+        content: '所有用户的签到数据已重置',
+        duration: 3000,
+      })
+
+      // 重置成功后重新加载排行榜
+      await loadCheckInRanking()
+    } else {
+      window.$notification.error({
+        title: '重置失败',
+        content: response?.message || '无法重置所有用户签到数据',
+        duration: 5000,
+      })
+    }
+  } catch (error) {
+    console.error('重置所有用户签到数据失败:', error)
+    window.$notification.error({
+      title: '重置失败',
+      content: '重置所有用户签到数据时发生错误',
+      duration: 5000,
+    })
+  } finally {
+    isResetting.value = false
+  }
+}
+
+// 测试签到功能
+const testUid = ref<number>()
+const testUsername = ref<string>('测试用户')
+const testResult = ref<{ success: boolean, message: string }>()
+
+// 处理测试签到
+async function handleTestCheckIn() {
+  if (!testUid.value || !serverSetting.value.enableCheckIn) {
+    testResult.value = {
+      success: false,
+      message: '请输入有效的UID或确保签到功能已启用',
+    }
+    return
+  }
+
+  try {
+    // 直接调用服务端签到API
+    const response = await QueryGetAPI<CheckInResult>(`${CHECKIN_API_URL}check-in-for`, {
+      uId: testUid.value,
+      name: testUsername.value || '测试用户',
+    })
+
+    if (response.code === 200 && response.data) {
+      const result = response.data
+
+      testResult.value = {
+        success: result.success,
+        message: result.success
+          ? `签到成功！用户 ${testUsername.value || '测试用户'} 获得 ${result.points} 积分，连续签到 ${result.consecutiveDays} 天`
+          : result.message || '签到失败，可能今天已经签到过了',
+      }
+
+      // 显示通知
+      window.$notification[result.success ? 'success' : 'info']({
+        title: result.success ? '测试签到成功' : '测试签到失败',
+        content: testResult.value.message,
+        duration: 3000,
+      })
+    } else {
+      testResult.value = {
+        success: false,
+        message: `API返回错误: ${response.message || '未知错误'}`,
+      }
+    }
+  } catch (error) {
+    testResult.value = {
+      success: false,
+      message: `签到操作失败: ${error instanceof Error ? error.message : String(error)}`,
+    }
+
+    // 显示错误通知
+    window.$notification.error({
+      title: '测试签到失败',
+      content: testResult.value.message,
+      duration: 5000,
+    })
+  }
+}
+function updateCheckInRanking(value: boolean) {
+  accountInfo.value.settings.enableFunctions = value ? [...accountInfo.value.settings.enableFunctions, FunctionTypes.CheckInRanking] : accountInfo.value.settings.enableFunctions.filter(f => f !== FunctionTypes.CheckInRanking)
+  SaveEnableFunctions(accountInfo.value.settings.enableFunctions)
+}
+
+// 组件挂载时加载排行榜
+onMounted(() => {
+  loadCheckInRanking()
+})
+</script>
+
 <template>
   <NCard
     v-if="config"
@@ -24,7 +446,7 @@
             label-placement="left"
             :label-width="120"
             :style="{
-              maxWidth: '650px'
+              maxWidth: '650px',
             }"
           >
             <!-- 服务端签到设置 -->
@@ -272,7 +694,7 @@
                 showSizePicker: true,
                 pageSizes: [10, 20, 50, 100],
                 onChange: (page: number) => pagination.page = page,
-                onUpdatePageSize: (pageSize: number) => pagination.pageSize = pageSize
+                onUpdatePageSize: (pageSize: number) => pagination.pageSize = pageSize,
               }"
               :bordered="false"
               :loading="isLoadingRanking"
@@ -380,428 +802,6 @@
   </NCard>
 </template>
 
-<script lang="ts" setup>
-import { SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account';
-import { CheckInRankingInfo, CheckInResult, FunctionTypes } from '@/api/api-models';
-import { QueryGetAPI } from '@/api/query';
-import { useAutoAction } from '@/client/store/useAutoAction';
-import { CHECKIN_API_URL } from '@/data/constants';
-import { GuidUtils } from '@/Utils';
-import { Info24Filled } from '@vicons/fluent';
-import type { DataTableColumns } from 'naive-ui';
-import { NAlert, NButton, NCard, NDataTable, NDivider, NEmpty, NForm, NFormItem, NIcon, NInput, NInputGroup, NInputNumber, NPopconfirm, NSelect, NSpace, NSpin, NSwitch, NTabPane, NTabs, NText, NTime, NTooltip } from 'naive-ui';
-import { computed, h, onMounted, ref, watch } from 'vue';
-import AutoActionEditor from '../AutoActionEditor.vue';
-import TemplateHelper from '../TemplateHelper.vue';
-
-interface LiveInfo {
-  roomId?: number;
-}
-
-const autoActionStore = useAutoAction();
-const config = autoActionStore.checkInModule.checkInConfig;
-const accountInfo = useAccount();
-const isLoading = ref(false);
-
-const customTestContext = ref({
-  checkin: {
-    points: 0,
-    consecutiveDays: 0,
-    todayRank: 0,
-    time: new Date()
-  }
-});
-
-// 签到模板的特定占位符
-const checkInPlaceholders = [
-  { name: '{{checkin.points}}', description: '获得的总积分' },
-  { name: '{{checkin.consecutiveDays}}', description: '连续签到天数' },
-  { name: '{{checkin.todayRank}}', description: '今日签到排名' },
-  { name: '{{checkin.time}}', description: '签到时间对象' }
-];
-
-// 服务端签到设置
-const serverSetting = computed(() => {
-  return accountInfo.value?.settings?.point || {};
-});
-
-// 是否可以编辑设置
-const canEdit = computed(() => {
-  return accountInfo.value && accountInfo.value.settings && accountInfo.value.settings.point;
-});
-
-// 更新所有设置
-async function updateSettings() {
-  // 先保存服务端设置
-  const serverSaved = await updateServerSettings();
-
-  if (serverSaved) {
-    window.$notification.success({
-      title: '设置已保存',
-      duration: 3000
-    });
-  }
-
-  return serverSaved;
-}
-
-// 更新服务端签到设置
-async function updateServerSettings() {
-  if (!canEdit.value) {
-    return false;
-  }
-
-  isLoading.value = true;
-
-  try {
-    const msg = await SaveSetting('Point', accountInfo.value.settings.point);
-    if (msg) {
-      return true;
-    } else {
-      window.$notification.error({
-        title: '保存失败',
-        content: msg,
-        duration: 5000
-      });
-    }
-  } catch (err) {
-    window.$notification.error({
-      title: '保存失败',
-      content: String(err),
-      duration: 5000
-    });
-    console.error('保存签到设置失败:', err);
-  } finally {
-    isLoading.value = false;
-  }
-
-  return false;
-}
-
-// 排行榜数据
-const rankingData = ref<CheckInRankingInfo[]>([]);
-const isLoadingRanking = ref(false);
-const timeRange = ref<string>('all');
-const userFilter = ref<string>('');
-const pagination = ref({
-  page: 1,
-  pageSize: 10
-});
-
-// 时间段选项
-const timeRangeOptions = [
-  { label: '全部时间', value: 'all' },
-  { label: '今日', value: 'today' },
-  { label: '本周', value: 'week' },
-  { label: '本月', value: 'month' },
-  { label: '上个月', value: 'lastMonth' },
-];
-
-// 过滤后的排行榜数据
-const filteredRankingData = computed(() => {
-  let filtered = rankingData.value;
-
-  // 按时间范围筛选
-  if (timeRange.value !== 'all') {
-    const now = new Date();
-    let startTime: Date;
-
-    if (timeRange.value === 'today') {
-      // 今天凌晨
-      startTime = new Date(now);
-      startTime.setHours(0, 0, 0, 0);
-    } else if (timeRange.value === 'week') {
-      // 本周一
-      const dayOfWeek = now.getDay() || 7; // 把周日作为7处理
-      startTime = new Date(now);
-      startTime.setDate(now.getDate() - (dayOfWeek - 1));
-      startTime.setHours(0, 0, 0, 0);
-    } else if (timeRange.value === 'month') {
-      // 本月1号
-      startTime = new Date(now.getFullYear(), now.getMonth(), 1);
-    } else if (timeRange.value === 'lastMonth') {
-      // 上月1号
-      startTime = new Date(now.getFullYear(), now.getMonth() - 1, 1);
-      // 本月1号作为结束时间
-      const endTime = new Date(now.getFullYear(), now.getMonth(), 1);
-      filtered = filtered.filter(user => {
-        const checkInTime = new Date(user.lastCheckInTime);
-        return checkInTime >= startTime && checkInTime < endTime;
-      });
-      // 已经筛选完成，不需要再次筛选
-      startTime = new Date(0);
-    }
-
-    // 如果不是上个月，用通用筛选逻辑
-    if (timeRange.value !== 'lastMonth') {
-      filtered = filtered.filter(user => {
-        const checkInTime = new Date(user.lastCheckInTime);
-        return checkInTime >= startTime;
-      });
-    }
-  }
-
-  // 按用户名筛选
-  if (userFilter.value) {
-    const keyword = userFilter.value.toLowerCase();
-    filtered = filtered.filter(user =>
-      user.name.toLowerCase().includes(keyword)
-    );
-  }
-
-  return filtered;
-});
-
-// 排行榜列定义
-const rankingColumns: DataTableColumns<CheckInRankingInfo> = [
-  {
-    title: '排名',
-    key: 'rank',
-    render: (row: CheckInRankingInfo, index: number) => h('span', {}, index + 1)
-  },
-  {
-    title: '用户名',
-    key: 'name'
-  },
-  {
-    title: '连续签到天数',
-    key: 'consecutiveDays',
-    sorter: 'default'
-  },
-  {
-    title: '积分',
-    key: 'points',
-    sorter: 'default'
-  },
-  {
-    title: '最近签到时间',
-    key: 'lastCheckInTime',
-    render(row: CheckInRankingInfo) {
-      return h(NTooltip, {
-      }, {
-        trigger: () => h(NTime, {
-          time: row.lastCheckInTime,
-          type: 'relative'
-        }),
-        default: () => new Date(row.lastCheckInTime).toLocaleString()
-      });
-    },
-    sorter: 'default'
-  },
-  {
-    title: '已认证',
-    key: 'isAuthed',
-    render(row: CheckInRankingInfo) {
-      return h('span', {}, row.isAuthed ? '是' : '否');
-    }
-  },
-  {
-    title: '操作',
-    key: 'actions',
-    render(row: CheckInRankingInfo) {
-      return h(
-        NPopconfirm,
-        {
-          onPositiveClick: () => resetUserCheckInByGuid(row.ouId)
-        },
-        {
-          trigger: () => h(
-            NButton,
-            {
-              size: 'small',
-              type: 'warning',
-              disabled: isResetting.value,
-              loading: isResetting.value && resetTargetId.value === row.ouId,
-              onClick: (e) => e.stopPropagation()
-            },
-            { default: () => '重置签到' }
-          ),
-          default: () => '确定要重置该用户的所有签到数据吗？此操作不可撤销。'
-        }
-      );
-    }
-  }
-];
-
-// 加载签到排行榜数据
-async function loadCheckInRanking() {
-  if (isLoadingRanking.value) return;
-
-  isLoadingRanking.value = true;
-  try {
-    // 获取所有用户数据，不再根据时间范围过滤
-    const response = await QueryGetAPI<CheckInRankingInfo[]>(`${CHECKIN_API_URL}admin/users`);
-
-    if (response.code == 200) {
-      rankingData.value = response.data;
-      pagination.value.page = 1; // 重置为第一页
-    } else {
-      rankingData.value = [];
-      window.$message.error(`获取签到排行榜失败: ${response.message}`);
-    }
-  } catch (error) {
-    console.error('加载签到排行榜失败:', error);
-    window.$notification.error({
-      title: '加载失败',
-      content: '无法加载签到排行榜数据',
-      duration: 5000
-    });
-    rankingData.value = [];
-  } finally {
-    isLoadingRanking.value = false;
-  }
-}
-
-// 重置签到数据相关
-const isResetting = ref(false);
-const resetTargetId = ref<string>();
-
-// 重置单个用户签到数据
-async function resetUserCheckInByGuid(ouId: string) {
-  if (!ouId || isResetting.value) return;
-
-  isResetting.value = true;
-  resetTargetId.value = ouId;
-
-  try {
-    const response = await QueryGetAPI(`${CHECKIN_API_URL}admin/reset`, {
-      ouId: ouId
-    });
-
-    if (response && response.code === 200) {
-      window.$notification.success({
-        title: '重置成功',
-        content: '用户签到数据已重置',
-        duration: 3000
-      });
-
-      // 重置成功后重新加载排行榜
-      await loadCheckInRanking();
-    } else {
-      window.$notification.error({
-        title: '重置失败',
-        content: response?.message || '无法重置用户签到数据',
-        duration: 5000
-      });
-    }
-  } catch (error) {
-    console.error('重置用户签到数据失败:', error);
-    window.$notification.error({
-      title: '重置失败',
-      content: '重置用户签到数据时发生错误',
-      duration: 5000
-    });
-  } finally {
-    isResetting.value = false;
-    resetTargetId.value = undefined;
-  }
-}
-
-// 重置所有用户签到数据
-async function resetAllCheckIn() {
-  if (isResetting.value) return;
-
-  isResetting.value = true;
-  try {
-    const response = await QueryGetAPI(`${CHECKIN_API_URL}admin/reset`, {});
-
-    if (response && response.code === 200) {
-      window.$notification.success({
-        title: '重置成功',
-        content: '所有用户的签到数据已重置',
-        duration: 3000
-      });
-
-      // 重置成功后重新加载排行榜
-      await loadCheckInRanking();
-    } else {
-      window.$notification.error({
-        title: '重置失败',
-        content: response?.message || '无法重置所有用户签到数据',
-        duration: 5000
-      });
-    }
-  } catch (error) {
-    console.error('重置所有用户签到数据失败:', error);
-    window.$notification.error({
-      title: '重置失败',
-      content: '重置所有用户签到数据时发生错误',
-      duration: 5000
-    });
-  } finally {
-    isResetting.value = false;
-  }
-}
-
-// 测试签到功能
-const testUid = ref<number>();
-const testUsername = ref<string>('测试用户');
-const testResult = ref<{ success: boolean; message: string }>();
-
-// 处理测试签到
-async function handleTestCheckIn() {
-  if (!testUid.value || !serverSetting.value.enableCheckIn) {
-    testResult.value = {
-      success: false,
-      message: '请输入有效的UID或确保签到功能已启用'
-    };
-    return;
-  }
-
-  try {
-    // 直接调用服务端签到API
-    const response = await QueryGetAPI<CheckInResult>(`${CHECKIN_API_URL}check-in-for`, {
-      uId: testUid.value,
-      name: testUsername.value || '测试用户'
-    });
-
-    if (response.code === 200 && response.data) {
-      const result = response.data;
-
-      testResult.value = {
-        success: result.success,
-        message: result.success
-          ? `签到成功！用户 ${testUsername.value || '测试用户'} 获得 ${result.points} 积分，连续签到 ${result.consecutiveDays} 天`
-          : result.message || '签到失败，可能今天已经签到过了'
-      };
-
-      // 显示通知
-      window.$notification[result.success ? 'success' : 'info']({
-        title: result.success ? '测试签到成功' : '测试签到失败',
-        content: testResult.value.message,
-        duration: 3000
-      });
-    } else {
-      testResult.value = {
-        success: false,
-        message: `API返回错误: ${response.message || '未知错误'}`
-      };
-    }
-  } catch (error) {
-    testResult.value = {
-      success: false,
-      message: `签到操作失败: ${error instanceof Error ? error.message : String(error)}`
-    };
-
-    // 显示错误通知
-    window.$notification.error({
-      title: '测试签到失败',
-      content: testResult.value.message,
-      duration: 5000
-    });
-  }
-}
-function updateCheckInRanking(value: boolean) {
-  accountInfo.value.settings.enableFunctions = value ? [...accountInfo.value.settings.enableFunctions, FunctionTypes.CheckInRanking] : accountInfo.value.settings.enableFunctions.filter(f => f !== FunctionTypes.CheckInRanking);
-  SaveEnableFunctions(accountInfo.value.settings.enableFunctions);
-}
-
-// 组件挂载时加载排行榜
-onMounted(() => {
-  loadCheckInRanking();
-});
-</script>
-
 <style scoped>
 .settings-section {
   margin: 8px 0;
@@ -810,4 +810,4 @@ onMounted(() => {
 .ranking-filter {
   margin: 10px 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/components/autoaction/settings/DanmakuSettings.vue b/src/client/components/autoaction/settings/DanmakuSettings.vue
index 40ea432..80cdf72 100644
--- a/src/client/components/autoaction/settings/DanmakuSettings.vue
+++ b/src/client/components/autoaction/settings/DanmakuSettings.vue
@@ -1,75 +1,75 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { NSpace, NInput, NButton, NTag, NDivider, NCollapseItem, useMessage, NRadioGroup, NRadioButton } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
-import { KeywordMatchType } from '@/client/store/autoAction/types';
-import SingleTemplateEditor from '../SingleTemplateEditor.vue';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NButton, NCollapseItem, NDivider, NInput, NRadioButton, NRadioGroup, NSpace, NTag, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { KeywordMatchType } from '@/client/store/autoAction/types'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
-const message = useMessage();
+const message = useMessage()
 
 // 弹幕关键词相关
-const tempKeyword = ref('');
-const tempBlockword = ref('');
+const tempKeyword = ref('')
+const tempBlockword = ref('')
 
 // 初始化匹配类型配置
 if (!props.action.triggerConfig.keywordMatchType) {
-  props.action.triggerConfig.keywordMatchType = KeywordMatchType.Contains;
+  props.action.triggerConfig.keywordMatchType = KeywordMatchType.Contains
 }
 
 if (!props.action.triggerConfig.blockwordMatchType) {
-  props.action.triggerConfig.blockwordMatchType = KeywordMatchType.Contains;
+  props.action.triggerConfig.blockwordMatchType = KeywordMatchType.Contains
 }
 
 // 添加关键词
 function addKeyword() {
-  if (!tempKeyword.value.trim()) return;
+  if (!tempKeyword.value.trim()) return
 
   if (!props.action.triggerConfig.keywords) {
-    props.action.triggerConfig.keywords = [];
+    props.action.triggerConfig.keywords = []
   }
 
   if (!props.action.triggerConfig.keywords.includes(tempKeyword.value.trim())) {
-    props.action.triggerConfig.keywords.push(tempKeyword.value.trim());
-    tempKeyword.value = '';
+    props.action.triggerConfig.keywords.push(tempKeyword.value.trim())
+    tempKeyword.value = ''
   } else {
-    message.warning('此关键词已存在');
+    message.warning('此关键词已存在')
   }
 }
 
 // 移除关键词
 function removeKeyword(index: number) {
   if (props.action.triggerConfig.keywords) {
-    props.action.triggerConfig.keywords.splice(index, 1);
+    props.action.triggerConfig.keywords.splice(index, 1)
   }
 }
 
 // 添加屏蔽词
 function addBlockword() {
-  if (!tempBlockword.value.trim()) return;
+  if (!tempBlockword.value.trim()) return
 
   if (!props.action.triggerConfig.blockwords) {
-    props.action.triggerConfig.blockwords = [];
+    props.action.triggerConfig.blockwords = []
   }
 
   if (!props.action.triggerConfig.blockwords.includes(tempBlockword.value.trim())) {
-    props.action.triggerConfig.blockwords.push(tempBlockword.value.trim());
-    tempBlockword.value = '';
+    props.action.triggerConfig.blockwords.push(tempBlockword.value.trim())
+    tempBlockword.value = ''
   } else {
-    message.warning('此屏蔽词已存在');
+    message.warning('此屏蔽词已存在')
   }
 }
 
 // 移除屏蔽词
 function removeBlockword(index: number) {
   if (props.action.triggerConfig.blockwords) {
-    props.action.triggerConfig.blockwords.splice(index, 1);
+    props.action.triggerConfig.blockwords.splice(index, 1)
   }
 }
 
@@ -82,7 +82,7 @@ const danmakuPlaceholders = [
   { name: '{{user.medalName}}', description: '粉丝勋章名称' },
   { name: '{{message}}', description: '弹幕内容' },
   { name: '{{js: message.substring(0, 10)}}', description: '弹幕内容的前10个字符' },
-];
+]
 </script>
 
 <template>
diff --git a/src/client/components/autoaction/settings/EnterSettings.vue b/src/client/components/autoaction/settings/EnterSettings.vue
index 83d2085..5aef85d 100644
--- a/src/client/components/autoaction/settings/EnterSettings.vue
+++ b/src/client/components/autoaction/settings/EnterSettings.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { NSpace, NSwitch, NInputNumber, NSelect, NCollapseItem } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NCollapseItem, NInputNumber, NSelect, NSpace, NSwitch } from 'naive-ui'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
 // 入场过滤模式选项
 const enterFilterModeOptions = [
@@ -15,8 +16,8 @@ const enterFilterModeOptions = [
   { label: '用户黑名单', value: 'blacklist' },
   { label: '用户白名单', value: 'whitelist' },
   { label: '仅舰长', value: 'guard' },
-  { label: '仅勋章', value: 'medal' }
-];
+  { label: '仅勋章', value: 'medal' },
+]
 </script>
 
 <template>
@@ -62,4 +63,4 @@ const enterFilterModeOptions = [
       </NSpace>
     </NSpace>
   </NCollapseItem>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/components/autoaction/settings/FollowSettings.vue b/src/client/components/autoaction/settings/FollowSettings.vue
index 63242b7..4110555 100644
--- a/src/client/components/autoaction/settings/FollowSettings.vue
+++ b/src/client/components/autoaction/settings/FollowSettings.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { NSpace, NSwitch, NInputNumber, NCollapseItem } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NCollapseItem, NInputNumber, NSpace, NSwitch } from 'naive-ui'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 </script>
 
 <template>
@@ -40,4 +41,4 @@ const props = defineProps({
       </NSpace>
     </NSpace>
   </NCollapseItem>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/components/autoaction/settings/GiftSettings.vue b/src/client/components/autoaction/settings/GiftSettings.vue
index 6acea68..b558439 100644
--- a/src/client/components/autoaction/settings/GiftSettings.vue
+++ b/src/client/components/autoaction/settings/GiftSettings.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { NSpace, NInput, NButton, NTag, NSelect, NInputNumber, NSwitch, NCollapseItem, useMessage } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NButton, NCollapseItem, NInput, NInputNumber, NSelect, NSpace, NSwitch, NTag, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
-const message = useMessage();
+const message = useMessage()
 
 // 礼物过滤模式选项
 const giftFilterModeOptions = [
@@ -18,32 +19,32 @@ const giftFilterModeOptions = [
   { label: '礼物黑名单', value: 'blacklist' },
   { label: '礼物白名单', value: 'whitelist' },
   { label: '最低价值', value: 'value' },
-  { label: '过滤免费礼物', value: 'free' }
-];
+  { label: '过滤免费礼物', value: 'free' },
+]
 
 // 礼物名称相关
-const tempGiftName = ref('');
+const tempGiftName = ref('')
 
 // 添加礼物名称到过滤列表
 function addGiftName() {
-  if (!tempGiftName.value.trim()) return;
+  if (!tempGiftName.value.trim()) return
 
   if (!props.action.triggerConfig.filterGiftNames) {
-    props.action.triggerConfig.filterGiftNames = [];
+    props.action.triggerConfig.filterGiftNames = []
   }
 
   if (!props.action.triggerConfig.filterGiftNames.includes(tempGiftName.value.trim())) {
-    props.action.triggerConfig.filterGiftNames.push(tempGiftName.value.trim());
-    tempGiftName.value = '';
+    props.action.triggerConfig.filterGiftNames.push(tempGiftName.value.trim())
+    tempGiftName.value = ''
   } else {
-    message.warning('此礼物名称已存在');
+    message.warning('此礼物名称已存在')
   }
 }
 
 // 移除礼物名称
 function removeGiftName(index: number) {
   if (props.action.triggerConfig.filterGiftNames) {
-    props.action.triggerConfig.filterGiftNames.splice(index, 1);
+    props.action.triggerConfig.filterGiftNames.splice(index, 1)
   }
 }
 </script>
diff --git a/src/client/components/autoaction/settings/GlobalScheduledSettings.vue b/src/client/components/autoaction/settings/GlobalScheduledSettings.vue
index da8b551..da8d6df 100644
--- a/src/client/components/autoaction/settings/GlobalScheduledSettings.vue
+++ b/src/client/components/autoaction/settings/GlobalScheduledSettings.vue
@@ -1,29 +1,28 @@
 <script setup lang="ts">
 import {
   NCard,
-  NSpace,
+  NDivider,
   NInputNumber,
-  NRadioGroup,
   NRadio,
+  NRadioGroup,
+  NSpace,
   NText,
-  NDivider
-} from 'naive-ui';
-import { useAutoAction } from '@/client/store/useAutoAction';
-import { watch } from 'vue';
+} from 'naive-ui'
+import { watch } from 'vue'
+import { useAutoAction } from '@/client/store/useAutoAction'
 
-const autoActionStore = useAutoAction();
+const autoActionStore = useAutoAction()
 
 // 定时模式选项
 const schedulingModeOptions = [
   { label: '随机模式', value: 'random' },
-  { label: '顺序模式', value: 'sequential' }
-];
+  { label: '顺序模式', value: 'sequential' },
+]
 
 // 监听变化，触发定时器重启（如果间隔改变）
 watch(() => autoActionStore.globalIntervalSeconds, () => {
-  autoActionStore.restartGlobalTimer(); // 确保间隔改变时定时器更新
-});
-
+  autoActionStore.restartGlobalTimer() // 确保间隔改变时定时器更新
+})
 </script>
 
 <template>
@@ -82,4 +81,4 @@ watch(() => autoActionStore.globalIntervalSeconds, () => {
 
 <style scoped>
 /* 可以添加一些特定样式 */
-</style>
\ No newline at end of file
+</style>
diff --git a/src/client/components/autoaction/settings/GuardSettings.vue b/src/client/components/autoaction/settings/GuardSettings.vue
index 5f4ea76..0c5ebd4 100644
--- a/src/client/components/autoaction/settings/GuardSettings.vue
+++ b/src/client/components/autoaction/settings/GuardSettings.vue
@@ -1,57 +1,58 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { NSpace, NInput, NButton, NTag, NSelect, NSwitch, NDivider, NCollapseItem, useMessage } from 'naive-ui';
-import { AutoActionItem, TriggerType, ActionType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NButton, NCollapseItem, NDivider, NInput, NSelect, NSpace, NSwitch, NTag, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { ActionType, TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
-const message = useMessage();
+const message = useMessage()
 
 // 舰长礼品码相关
-const tempGiftCodeLevel = ref(3); // 默认为舰长等级
-const tempGiftCode = ref('');
+const tempGiftCodeLevel = ref(3) // 默认为舰长等级
+const tempGiftCode = ref('')
 
 // 添加礼品码
 function addGiftCode() {
-  if (!tempGiftCode.value.trim()) return;
+  if (!tempGiftCode.value.trim()) return
 
   if (!props.action.triggerConfig.giftCodes) {
-    props.action.triggerConfig.giftCodes = [];
+    props.action.triggerConfig.giftCodes = []
   }
 
   // 查找对应等级的礼品码数组
-  let levelCodes = props.action.triggerConfig.giftCodes.find(gc => gc.level === tempGiftCodeLevel.value);
+  let levelCodes = props.action.triggerConfig.giftCodes.find(gc => gc.level === tempGiftCodeLevel.value)
 
   if (!levelCodes) {
     // 如果没有此等级的礼品码数组，创建一个
-    levelCodes = { level: tempGiftCodeLevel.value, codes: [] };
-    props.action.triggerConfig.giftCodes.push(levelCodes);
+    levelCodes = { level: tempGiftCodeLevel.value, codes: [] }
+    props.action.triggerConfig.giftCodes.push(levelCodes)
   }
 
   // 添加礼品码
   if (!levelCodes.codes.includes(tempGiftCode.value.trim())) {
-    levelCodes.codes.push(tempGiftCode.value.trim());
-    tempGiftCode.value = '';
+    levelCodes.codes.push(tempGiftCode.value.trim())
+    tempGiftCode.value = ''
   } else {
-    message.warning('此礼品码已存在');
+    message.warning('此礼品码已存在')
   }
 }
 
 // 移除礼品码
 function removeGiftCode(levelIndex: number, codeIndex: number) {
-  if (props.action.triggerConfig.giftCodes &&
-      props.action.triggerConfig.giftCodes[levelIndex] &&
-      props.action.triggerConfig.giftCodes[levelIndex].codes) {
-    props.action.triggerConfig.giftCodes[levelIndex].codes.splice(codeIndex, 1);
+  if (props.action.triggerConfig.giftCodes
+    && props.action.triggerConfig.giftCodes[levelIndex]
+    && props.action.triggerConfig.giftCodes[levelIndex].codes) {
+    props.action.triggerConfig.giftCodes[levelIndex].codes.splice(codeIndex, 1)
 
     // 如果该等级没有礼品码了，移除这个等级
     if (props.action.triggerConfig.giftCodes[levelIndex].codes.length === 0) {
-      props.action.triggerConfig.giftCodes.splice(levelIndex, 1);
+      props.action.triggerConfig.giftCodes.splice(levelIndex, 1)
     }
   }
 }
@@ -59,10 +60,10 @@ function removeGiftCode(levelIndex: number, codeIndex: number) {
 // 舰长等级名称映射
 function getGuardLevelName(level: number): string {
   switch (level) {
-    case 1: return '总督';
-    case 2: return '提督';
-    case 3: return '舰长';
-    default: return '通用';
+    case 1: return '总督'
+    case 2: return '提督'
+    case 3: return '舰长'
+    default: return '通用'
   }
 }
 </script>
@@ -95,7 +96,7 @@ function getGuardLevelName(level: number): string {
               { label: '总督', value: 1 },
               { label: '提督', value: 2 },
               { label: '舰长', value: 3 },
-              { label: '通用', value: 0 }
+              { label: '通用', value: 0 },
             ]"
           />
           <NInput
diff --git a/src/client/components/autoaction/settings/ScheduledSettings.vue b/src/client/components/autoaction/settings/ScheduledSettings.vue
index 3d2152e..a447ae8 100644
--- a/src/client/components/autoaction/settings/ScheduledSettings.vue
+++ b/src/client/components/autoaction/settings/ScheduledSettings.vue
@@ -1,48 +1,48 @@
 <script setup lang="ts">
+import type { AutoActionItem } from '@/client/store/useAutoAction'
 import {
-  NSpace,
-  NInputNumber,
-  NRadioGroup,
-  NRadio,
   NCollapseItem,
-  NSwitch,
   NDivider,
-  NText
-} from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
-import { computed, ref, watch } from 'vue';
+  NInputNumber,
+  NRadio,
+  NRadioGroup,
+  NSpace,
+  NSwitch,
+  NText,
+} from 'naive-ui'
+import { ref, watch } from 'vue'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
 // 初始化配置项
 if (props.action.triggerConfig.useGlobalTimer === undefined) {
-  props.action.triggerConfig.useGlobalTimer = false; // 默认不使用全局定时器
+  props.action.triggerConfig.useGlobalTimer = false // 默认不使用全局定时器
 }
 if (props.action.triggerConfig.schedulingMode === undefined) {
-  props.action.triggerConfig.schedulingMode = 'random'; // 默认随机模式
+  props.action.triggerConfig.schedulingMode = 'random' // 默认随机模式
 }
 if (props.action.triggerConfig.intervalSeconds === undefined) {
-  props.action.triggerConfig.intervalSeconds = 300; // 默认5分钟
+  props.action.triggerConfig.intervalSeconds = 300 // 默认5分钟
 }
 
-const useGlobalTimer = ref(props.action.triggerConfig.useGlobalTimer);
+const useGlobalTimer = ref(props.action.triggerConfig.useGlobalTimer)
 
 // 同步到 action
 watch(useGlobalTimer, (value) => {
-  props.action.triggerConfig.useGlobalTimer = value;
-});
+  props.action.triggerConfig.useGlobalTimer = value
+})
 
 // 定时模式选项
 const schedulingModeOptions = [
   { label: '随机模式', value: 'random' },
-  { label: '顺序模式', value: 'sequential' }
-];
-
+  { label: '顺序模式', value: 'sequential' },
+]
 </script>
 
 <template>
diff --git a/src/client/components/autoaction/settings/SuperChatSettings.vue b/src/client/components/autoaction/settings/SuperChatSettings.vue
index 706cbbf..da32a5d 100644
--- a/src/client/components/autoaction/settings/SuperChatSettings.vue
+++ b/src/client/components/autoaction/settings/SuperChatSettings.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import { NSpace, NSwitch, NInputNumber, NSelect, NCollapseItem } from 'naive-ui';
-import { AutoActionItem, TriggerType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { NCollapseItem, NInputNumber, NSelect, NSpace, NSwitch } from 'naive-ui'
+import { TriggerType } from '@/client/store/useAutoAction'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
-  }
-});
+    required: true,
+  },
+})
 
 // SC过滤模式选项
 const scFilterModeOptions = [
   { label: '不过滤', value: 'none' },
-  { label: '最低价格', value: 'price' }
-];
+  { label: '最低价格', value: 'price' },
+]
 </script>
 
 <template>
@@ -74,4 +75,4 @@ const scFilterModeOptions = [
       </NSpace>
     </NSpace>
   </NCollapseItem>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/client/components/autoaction/settings/TemplateSettings.vue b/src/client/components/autoaction/settings/TemplateSettings.vue
index 97df7f3..f0448ca 100644
--- a/src/client/components/autoaction/settings/TemplateSettings.vue
+++ b/src/client/components/autoaction/settings/TemplateSettings.vue
@@ -1,54 +1,54 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { NDivider } from 'naive-ui';
-import TemplateEditor from '../TemplateEditor.vue';
-import { AutoActionItem, TriggerType, ActionType } from '@/client/store/useAutoAction';
+import type { AutoActionItem } from '@/client/store/useAutoAction'
+import { computed } from 'vue'
+import { ActionType } from '@/client/store/useAutoAction'
+import TemplateEditor from '../TemplateEditor.vue'
 
 const props = defineProps({
   action: {
     type: Object as () => AutoActionItem,
-    required: true
+    required: true,
   },
   customTestContext: {
     type: Object,
-    default: undefined
-  }
-});
+    default: undefined,
+  },
+})
 
 // 根据操作类型获取模板标题
 const templateTitle = computed(() => {
   switch (props.action.actionType) {
     case ActionType.SEND_DANMAKU:
-      return '弹幕模板';
+      return '弹幕模板'
     case ActionType.SEND_PRIVATE_MSG:
-      return '私信模板';
+      return '私信模板'
     case ActionType.EXECUTE_COMMAND:
-      return '命令模板';
+      return '命令模板'
     default:
-      return '消息模板';
+      return '消息模板'
   }
-});
+})
 
 // 根据操作类型获取模板描述
 const templateDescription = computed(() => {
   switch (props.action.actionType) {
     case ActionType.SEND_DANMAKU:
-      return '发送到直播间的弹幕内容';
+      return '发送到直播间的弹幕内容'
     case ActionType.SEND_PRIVATE_MSG:
-      return '发送给用户的私信内容';
+      return '发送给用户的私信内容'
     case ActionType.EXECUTE_COMMAND:
-      return '执行的命令模板';
+      return '执行的命令模板'
     default:
-      return '消息内容模板';
+      return '消息内容模板'
   }
-});
+})
 
 // Handle template updates from TemplateEditor
 function handleTemplateUpdate(payload: { index: number, value: string }) {
   // Assuming index will always be 0 here as we only render one editor
   // And assuming action.templates is a string based on previous findings
   if (payload.index === 0) {
-    props.action.template = payload.value;
+    props.action.template = payload.value
   }
 }
 </script>
diff --git a/src/client/components/danmaku/CardStyleDanmakuItem.vue b/src/client/components/danmaku/CardStyleDanmakuItem.vue
index 9f67dca..a3bab98 100644
--- a/src/client/components/danmaku/CardStyleDanmakuItem.vue
+++ b/src/client/components/danmaku/CardStyleDanmakuItem.vue
@@ -1,27 +1,28 @@
 <script setup lang="ts">
-  import { EventDataTypes } from '@/api/api-models';
-  import { AVATAR_URL } from '@/data/constants';
-  import { BaseDanmakuItemProps, useDanmakuUtils } from './danmakuUtils';
-  import { useDanmakuWindow } from '../../store/useDanmakuWindow';
-import { VehicleShip24Filled } from '@vicons/fluent';
+import type { BaseDanmakuItemProps } from './danmakuUtils'
+import { VehicleShip24Filled } from '@vicons/fluent'
+import { EventDataTypes } from '@/api/api-models'
+import { AVATAR_URL } from '@/data/constants'
+import { useDanmakuWindow } from '../../store/useDanmakuWindow'
+import { useDanmakuUtils } from './danmakuUtils'
 
-  // 继承基础属性
-  const props = defineProps<BaseDanmakuItemProps>();
+// 继承基础属性
+const props = defineProps<BaseDanmakuItemProps>()
 
-  // 使用工具函数获取所有计算属性
-  const emojiData = useDanmakuWindow().emojiData;
-  const danmakuUtils = useDanmakuUtils(props, emojiData);
+// 使用工具函数获取所有计算属性
+const emojiData = useDanmakuWindow().emojiData
+const danmakuUtils = useDanmakuUtils(props, emojiData)
 
-  // 直接从工具函数获取计算属性，不再需要getBaseProp方法
-  const {
-    typeClass,
-    guardLevelClass,
-    showAvatar,
-    guardColor,
-    scColorClass,
-    parsedMessage,
-    medalColor
-  } = danmakuUtils;
+// 直接从工具函数获取计算属性，不再需要getBaseProp方法
+const {
+  typeClass,
+  guardLevelClass,
+  showAvatar,
+  guardColor,
+  scColorClass,
+  parsedMessage,
+  medalColor,
+} = danmakuUtils
 </script>
 
 <template>
@@ -148,7 +149,7 @@ import { VehicleShip24Filled } from '@vicons/fluent';
             <span v-if="segment.type === 'text'">{{ segment.content }}</span>
             <img
               v-else-if="segment.type === 'emoji'"
-              :src="segment.url + '@64w'"
+              :src="`${segment.url}@64w`"
               :alt="segment.name"
               class="inline-emoji"
               referrerpolicy="no-referrer"
@@ -160,7 +161,7 @@ import { VehicleShip24Filled } from '@vicons/fluent';
           class="message-text"
         >
           <img
-            :src="item.emoji + '@64w'"
+            :src="`${item.emoji}@64w`"
             alt="emoji"
             class="emoji-image"
             referrerpolicy="no-referrer"
@@ -176,8 +177,7 @@ import { VehicleShip24Filled } from '@vicons/fluent';
 </template>
 
 <style scoped>
-
-  /* 头像 */
+/* 头像 */
   .avatar {
     flex-shrink: 0;
     border-radius: 50%;
diff --git a/src/client/components/danmaku/TextStyleDanmakuItem.vue b/src/client/components/danmaku/TextStyleDanmakuItem.vue
index 03595e4..682b12b 100644
--- a/src/client/components/danmaku/TextStyleDanmakuItem.vue
+++ b/src/client/components/danmaku/TextStyleDanmakuItem.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { AVATAR_URL } from '@/data/constants';
-import { BaseDanmakuItemProps, useDanmakuUtils } from './danmakuUtils';
-import { useDanmakuWindow } from '../../store/useDanmakuWindow';
+import type { BaseDanmakuItemProps } from './danmakuUtils'
+import { AVATAR_URL } from '@/data/constants'
+import { useDanmakuWindow } from '../../store/useDanmakuWindow'
+import { useDanmakuUtils } from './danmakuUtils'
 
 // 继承基础属性
-const props = defineProps<BaseDanmakuItemProps>();
+const props = defineProps<BaseDanmakuItemProps>()
 
 // 使用工具函数获取所有计算属性
-const emojiData = useDanmakuWindow().emojiData;
-const danmakuUtils = useDanmakuUtils(props, emojiData);
+const emojiData = useDanmakuWindow().emojiData
+const danmakuUtils = useDanmakuUtils(props, emojiData)
 
 // 直接从工具函数获取计算属性，不再需要getBaseProp方法
 const {
@@ -19,14 +20,14 @@ const {
   displayContent,
   priceText,
   textModeColor,
-  parsedMessage
-} = danmakuUtils;
+  parsedMessage,
+} = danmakuUtils
 </script>
 
 <template>
   <div
     class="danmaku-text-mode"
-    :class="{ 'compact': setting.textStyleCompact }"
+    :class="{ compact: setting.textStyleCompact }"
   >
     <!-- 头像 -->
     <img
@@ -84,7 +85,7 @@ const {
           <span v-if="segment.type === 'text'">{{ segment.content }}</span>
           <img
             v-else-if="segment.type === 'emoji'"
-            :src="segment.url + '@64w'"
+            :src="`${segment.url}@64w`"
             :alt="segment.name"
             class="inline-emoji-text-mode"
             referrerpolicy="no-referrer"
@@ -96,7 +97,7 @@ const {
         class="content-text-mode"
       >
         <img
-          :src="item.emoji + '@64w'"
+          :src="`${item.emoji}@64w`"
           alt="emoji"
           class="emoji-image-text-mode"
           referrerpolicy="no-referrer"
diff --git a/src/client/components/danmaku/danmakuUtils.ts b/src/client/components/danmaku/danmakuUtils.ts
index 67d9e6d..9a7d3dc 100644
--- a/src/client/components/danmaku/danmakuUtils.ts
+++ b/src/client/components/danmaku/danmakuUtils.ts
@@ -1,201 +1,233 @@
-import { EventDataTypes, EventModel } from '@/api/api-models';
-import { DanmakuWindowSettings } from '../../store/useDanmakuWindow';
-import { computed, ComputedRef } from 'vue';
-import { GetGuardColor } from '@/Utils';
+import type { ComputedRef } from 'vue'
+import type { DanmakuWindowSettings } from '../../store/useDanmakuWindow'
+import type { EventModel } from '@/api/api-models'
+import { computed } from 'vue'
+import { EventDataTypes } from '@/api/api-models'
+import { GetGuardColor } from '@/Utils'
 
 // 粉丝勋章等级对应的颜色
 export const MEDAL_LEVEL_COLORS: { [key: number]: string } = {
-  1: '#68a49a', 2: '#5b9a8f', 3: '#539288', 4: '#4e8a80',
-  5: '#607ea0', 6: '#54708f', 7: '#4e6887', 8: '#49617e',
-  9: '#8d7a9b', 10: '#816d8f', 11: '#776385', 12: '#6e5a7c',
-  13: '#c06d80', 14: '#b66174', 15: '#ac586a', 16: '#a34f61',
-  17: '#caa44a', 18: '#bf973e', 19: '#b68c35', 20: '#ae812f',
-  21: '#347368', 22: '#2e685e', 23: '#285e55', 24: '#25564e',
-  25: '#354b86', 26: '#2e4179', 27: '#293a6f', 28: '#243466',
-  29: '#624180', 30: '#573873', 31: '#4f3168', 32: '#482b5f',
-  33: '#a23e54', 34: '#92364a', 35: '#843042', 36: '#772a3b',
-  37: '#f38b3c', 38: '#e87b2e', 39: '#de6e23', 40: '#d5621a'
-};
+  1: '#68a49a',
+  2: '#5b9a8f',
+  3: '#539288',
+  4: '#4e8a80',
+  5: '#607ea0',
+  6: '#54708f',
+  7: '#4e6887',
+  8: '#49617e',
+  9: '#8d7a9b',
+  10: '#816d8f',
+  11: '#776385',
+  12: '#6e5a7c',
+  13: '#c06d80',
+  14: '#b66174',
+  15: '#ac586a',
+  16: '#a34f61',
+  17: '#caa44a',
+  18: '#bf973e',
+  19: '#b68c35',
+  20: '#ae812f',
+  21: '#347368',
+  22: '#2e685e',
+  23: '#285e55',
+  24: '#25564e',
+  25: '#354b86',
+  26: '#2e4179',
+  27: '#293a6f',
+  28: '#243466',
+  29: '#624180',
+  30: '#573873',
+  31: '#4f3168',
+  32: '#482b5f',
+  33: '#a23e54',
+  34: '#92364a',
+  35: '#843042',
+  36: '#772a3b',
+  37: '#f38b3c',
+  38: '#e87b2e',
+  39: '#de6e23',
+  40: '#d5621a',
+}
 
 // 获取粉丝勋章颜色
 export function getMedalColor(level: number): string {
   // 处理超过40级的情况，颜色循环使用
   if (level > 40) {
-    level = 40;
+    level = 40
   }
 
   // 如果找不到对应等级颜色或者等级小于1，返回默认颜色
-  return MEDAL_LEVEL_COLORS[level] || '#999999';
+  return MEDAL_LEVEL_COLORS[level] || '#999999'
 }
 
 export interface BaseDanmakuItemProps {
-  item: EventModel & { randomId: string; isNew?: boolean; disappearAt?: number; };
-  setting: DanmakuWindowSettings;
+  item: EventModel & { randomId: string, isNew?: boolean, disappearAt?: number }
+  setting: DanmakuWindowSettings
 }
 
 export function useDanmakuUtils(
   props: BaseDanmakuItemProps,
-  emojiData: { data: { inline: { [key: string]: string }; plain: { [key: string]: string } } }
+  emojiData: { data: { inline: { [key: string]: string }, plain: { [key: string]: string } } },
 ) {
   // 计算SC弹幕的颜色类
   const scColorClass = computed(() => {
     if (props.item.type === EventDataTypes.SC) {
-      const price = props.item?.price || 0;
-      if (price === 0) return 'sc-0';
-      if (price > 0 && price < 50) return 'sc-50';
-      if (price >= 50 && price < 100) return 'sc-100';
-      if (price >= 100 && price < 500) return 'sc-500';
-      if (price >= 500 && price < 1000) return 'sc-1000';
-      if (price >= 1000 && price < 2000) return 'sc-2000';
-      if (price >= 2000) return 'sc-max';
+      const price = props.item?.price || 0
+      if (price === 0) return 'sc-0'
+      if (price > 0 && price < 50) return 'sc-50'
+      if (price >= 50 && price < 100) return 'sc-100'
+      if (price >= 100 && price < 500) return 'sc-500'
+      if (price >= 500 && price < 1000) return 'sc-1000'
+      if (price >= 1000 && price < 2000) return 'sc-2000'
+      if (price >= 2000) return 'sc-max'
     }
-    return '';
-  });
+    return ''
+  })
 
   // 根据类型计算样式
   const typeClass = computed(() => {
     switch (props.item.type) {
-      case EventDataTypes.Message: return 'message-item';
-      case EventDataTypes.Gift: return 'gift-item';
-      case EventDataTypes.SC: return `sc-item ${scColorClass.value}`;
-      case EventDataTypes.Guard: return 'guard-item';
-      case EventDataTypes.Enter: return 'enter-item';
-      default: return '';
+      case EventDataTypes.Message: return 'message-item'
+      case EventDataTypes.Gift: return 'gift-item'
+      case EventDataTypes.SC: return `sc-item ${scColorClass.value}`
+      case EventDataTypes.Guard: return 'guard-item'
+      case EventDataTypes.Enter: return 'enter-item'
+      default: return ''
     }
-  });
+  })
 
   // 获取舰长颜色
-  const guardColor = computed(() => GetGuardColor(props.item.guard_level));
+  const guardColor = computed(() => GetGuardColor(props.item.guard_level))
 
   // 舰长样式类
   const guardLevelClass = computed(() => {
     if (props.item.type === EventDataTypes.Guard) {
-      return `guard-level-${props.item.guard_level || 0}`;
+      return `guard-level-${props.item.guard_level || 0}`
     }
-    return '';
-  });
+    return ''
+  })
 
   // 检查是否需要显示头像
-  const showAvatar = computed(() => props.setting.showAvatar);
+  const showAvatar = computed(() => props.setting.showAvatar)
 
   // 解析包含内联表情的消息
-  const parsedMessage = computed<{ type: 'text' | 'emoji'; content?: string; url?: string; name?: string; }[]>(() => {
+  const parsedMessage = computed<{ type: 'text' | 'emoji', content?: string, url?: string, name?: string }[]>(() => {
     // 仅处理非纯表情的普通消息
     if (props.item.type !== EventDataTypes.Message || props.item.emoji || !props.item.msg) {
-      return [];
+      return []
     }
 
-    const segments: { type: 'text' | 'emoji'; content?: string; url?: string; name?: string; }[] = [];
-    let lastIndex = 0;
-    const regex = /\[([^\]]+)\]/g; // 匹配 [表情名]
-    let match;
+    const segments: { type: 'text' | 'emoji', content?: string, url?: string, name?: string }[] = []
+    let lastIndex = 0
+    const regex = /\[([^\]]+)\]/g // 匹配 [表情名]
+    let match
 
     try {
-      const availableEmojis = emojiData.data || {}; // 确保 emojiData 已加载
+      const availableEmojis = emojiData.data || {} // 确保 emojiData 已加载
 
       while ((match = regex.exec(props.item.msg)) !== null) {
         // 添加表情前的文本部分
         if (match.index > lastIndex) {
-          segments.push({ type: 'text', content: props.item.msg.substring(lastIndex, match.index) });
+          segments.push({ type: 'text', content: props.item.msg.substring(lastIndex, match.index) })
         }
 
-        const emojiFullName = match[0]; // 完整匹配，例如 "[哈哈]"
-        const emojiInfo = availableEmojis.inline[emojiFullName] || availableEmojis.plain[emojiFullName];
+        const emojiFullName = match[0] // 完整匹配，例如 "[哈哈]"
+        const emojiInfo = availableEmojis.inline[emojiFullName] || availableEmojis.plain[emojiFullName]
 
         if (emojiInfo) {
           // 找到了表情
-          segments.push({ type: 'emoji', url: emojiInfo, name: emojiFullName });
+          segments.push({ type: 'emoji', url: emojiInfo, name: emojiFullName })
         } else {
           // 未找到表情，当作普通文本处理
-          segments.push({ type: 'text', content: emojiFullName });
+          segments.push({ type: 'text', content: emojiFullName })
         }
 
-        lastIndex = regex.lastIndex;
+        lastIndex = regex.lastIndex
       }
 
       // 添加最后一个表情后的文本部分
       if (lastIndex < props.item.msg.length) {
-        segments.push({ type: 'text', content: props.item.msg.substring(lastIndex) });
+        segments.push({ type: 'text', content: props.item.msg.substring(lastIndex) })
       }
     } catch (error) {
-      console.error("Error parsing message for emojis:", error);
+      console.error('Error parsing message for emojis:', error)
       // 解析出错时，返回原始文本
-      return [{ type: 'text', content: props.item.msg }];
+      return [{ type: 'text', content: props.item.msg }]
     }
 
     // 如果解析后为空（例如，消息只包含无法识别的[]），则返回原始文本
     if (segments.length === 0 && props.item.msg) {
-      return [{ type: 'text', content: props.item.msg }];
+      return [{ type: 'text', content: props.item.msg }]
     }
 
-    return segments;
-  });
+    return segments
+  })
 
   // 获取不同类型消息的显示标签
   const typeLabel = computed(() => {
     switch (props.item.type) {
-      case EventDataTypes.Message: return '';  // 普通消息不需要标签
-      case EventDataTypes.Gift: return '【礼物】';
-      case EventDataTypes.SC: return '【SC】';
-      case EventDataTypes.Guard: return '【舰长】';
-      case EventDataTypes.Enter: return '【进场】';
-      default: return '';
+      case EventDataTypes.Message: return '' // 普通消息不需要标签
+      case EventDataTypes.Gift: return '【礼物】'
+      case EventDataTypes.SC: return '【SC】'
+      case EventDataTypes.Guard: return '【舰长】'
+      case EventDataTypes.Enter: return '【进场】'
+      default: return ''
     }
-  });
+  })
 
   // 获取礼物或SC的价格文本
   const priceText = computed(() => {
-    if (props.item.type === EventDataTypes.SC ||
-        (props.item.type === EventDataTypes.Gift && props.item.price > 0)) {
-      return `￥${props.item.price || 0}`;
+    if (props.item.type === EventDataTypes.SC
+      || (props.item.type === EventDataTypes.Gift && props.item.price > 0)) {
+      return `￥${props.item.price || 0}`
     }
-    return '';
-  });
+    return ''
+  })
 
   // 获取用户名显示
   const displayName = computed(() => {
-    return props.item.uname || '匿名用户';
-  });
+    return props.item.uname || '匿名用户'
+  })
 
   // 获取消息显示内容
   const displayContent = computed(() => {
     switch (props.item.type) {
       case EventDataTypes.Message:
-        return props.item.msg || '';
+        return props.item.msg || ''
       case EventDataTypes.Gift:
-        return `${props.item.num || 1} × ${props.item.msg}`;
+        return `${props.item.num || 1} × ${props.item.msg}`
       case EventDataTypes.SC:
-        return props.item.msg || '';
+        return props.item.msg || ''
       case EventDataTypes.Guard:
-        return props.item.msg || '开通了舰长';
+        return props.item.msg || '开通了舰长'
       case EventDataTypes.Enter:
-        return '进入了直播间';
+        return '进入了直播间'
       default:
-        return '';
+        return ''
     }
-  });
+  })
 
   // 根据风格及类型获取文本颜色
   const textModeColor = computed(() => {
     if (props.item.type === EventDataTypes.SC) {
-      return '#FFD700'; // SC消息金色
+      return '#FFD700' // SC消息金色
     } else if (props.item.type === EventDataTypes.Gift) {
-      return '#FF69B4'; // 礼物消息粉色
+      return '#FF69B4' // 礼物消息粉色
     } else if (props.item.type === EventDataTypes.Guard) {
-      return guardColor.value; // 舰长消息使用舰长颜色
+      return guardColor.value // 舰长消息使用舰长颜色
     } else if (props.item.type === EventDataTypes.Enter) {
-      return '#67C23A'; // 入场消息绿色
+      return '#67C23A' // 入场消息绿色
     }
-    return undefined; // 普通消息使用默认颜色
-  });
+    return undefined // 普通消息使用默认颜色
+  })
 
   // 计算粉丝勋章颜色
   const medalColor = computed(() => {
     if (props.item.fans_medal_level && props.item.fans_medal_level > 0) {
-      return getMedalColor(props.item.fans_medal_level);
+      return getMedalColor(props.item.fans_medal_level)
     }
-    return '#999999'; // 默认颜色
-  });
+    return '#999999' // 默认颜色
+  })
 
   return {
     scColorClass,
@@ -209,14 +241,14 @@ export function useDanmakuUtils(
     displayName,
     displayContent,
     textModeColor,
-    medalColor // 添加粉丝勋章颜色计算属性
-  };
+    medalColor, // 添加粉丝勋章颜色计算属性
+  }
 }
 
 // 返回类型定义，便于TypeScript类型推断
-export type DanmakuUtils = ReturnType<typeof useDanmakuUtils>;
+export type DanmakuUtils = ReturnType<typeof useDanmakuUtils>
 
 // 类型别名，用于清晰表达每个计算属性的类型
 export type ComputedDanmakuUtils = {
   [K in keyof DanmakuUtils]: ComputedRef<any>
-};
+}
diff --git a/src/client/data/biliLogin.ts b/src/client/data/biliLogin.ts
index f88dad1..6e4a612 100644
--- a/src/client/data/biliLogin.ts
+++ b/src/client/data/biliLogin.ts
@@ -1,92 +1,92 @@
-import { fetch } from '@tauri-apps/plugin-http';
+import { fetch } from '@tauri-apps/plugin-http'
 import { error } from '@tauri-apps/plugin-log'
-import { QueryBiliAPI } from './utils';
+import { QueryBiliAPI } from './utils'
 
 export async function checkLoginStatusAsync(): Promise<boolean> {
-  const url = 'https://api.bilibili.com/x/web-interface/nav/stat';
-  const response = await fetch(url);
-  const json = await response.json();
+  const url = 'https://api.bilibili.com/x/web-interface/nav/stat'
+  const response = await fetch(url)
+  const json = await response.json()
 
-  return json.code === 0;
+  return json.code === 0
 }
 
 export async function getUidAsync(): Promise<number> {
-  const url = 'https://api.live.bilibili.com/xlive/web-ucenter/user/get_user_info';
-  const response = await fetch(url);
-  const json = await response.json();
+  const url = 'https://api.live.bilibili.com/xlive/web-ucenter/user/get_user_info'
+  const response = await fetch(url)
+  const json = await response.json()
 
   if (json.data && json.data.uid) {
-    return json.data.uid;
+    return json.data.uid
   }
 
-  return 0;
+  return 0
 }
 // 二维码地址及扫码密钥
 export async function getLoginUrlAsync(): Promise<any> {
-  const url = 'https://passport.bilibili.com/x/passport-login/web/qrcode/generate';
+  const url = 'https://passport.bilibili.com/x/passport-login/web/qrcode/generate'
   const response = await QueryBiliAPI(url, 'GET')
   if (!response.ok) {
-    const result = await response.text();
-    error('无法获取B站登陆二维码: ' + result);
-    throw new Error('获取二维码地址失败');
+    const result = await response.text()
+    error(`无法获取B站登陆二维码: ${result}`)
+    throw new Error('获取二维码地址失败')
   }
-  return await response.json();
+  return response.json()
 }
 
 export async function getLoginUrlDataAsync(): Promise<{
-  url: string;
-  qrcode_key: string;
+  url: string
+  qrcode_key: string
 }> {
-  const message = await getLoginUrlAsync();
+  const message = await getLoginUrlAsync()
   if (message.code !== 0) {
-    throw new Error('获取二维码地址失败');
+    throw new Error('获取二维码地址失败')
   }
   return message.data as {
-    url: string;
-    qrcode_key: string;
-  };
+    url: string
+    qrcode_key: string
+  }
 }
-type QRCodeLoginInfo =
-  | { status: 'expired' }
-  | { status: 'unknown' }
-  | { status: 'scanned' }
-  | { status: 'waiting' }
-  | { status: 'confirmed'; cookie: string; refresh_token: string };
+type QRCodeLoginInfo
+  = | { status: 'expired' }
+    | { status: 'unknown' }
+    | { status: 'scanned' }
+    | { status: 'waiting' }
+    | { status: 'confirmed', cookie: string, refresh_token: string }
 export async function getLoginInfoAsync(qrcodeKey: string): Promise<QRCodeLoginInfo> {
-  const url = `https://passport.bilibili.com/x/passport-login/web/qrcode/poll?qrcode_key=${qrcodeKey}&source=main-fe-header`;
-  const response = await QueryBiliAPI(url);
-  const message = await response.json();
+  const url = `https://passport.bilibili.com/x/passport-login/web/qrcode/poll?qrcode_key=${qrcodeKey}&source=main-fe-header`
+  const response = await QueryBiliAPI(url)
+  const message = await response.json()
 
   if (!message.data) {
-    throw new Error('获取登录信息失败');
+    throw new Error('获取登录信息失败')
   }
 
   if (message.data.code !== 0) {
     switch (message.data.code) {
       case 86038:
-        return { status: 'expired' };
+        return { status: 'expired' }
       case 86090:
-        return { status: 'scanned' };
+        return { status: 'scanned' }
       case 86101:
-        return { status: 'waiting' };
+        return { status: 'waiting' }
       default:
-        return { status: 'unknown' };
+        return { status: 'unknown' }
     }
   }
 
-  const cookies = response.headers.get('set-cookie');
+  const cookies = response.headers.get('set-cookie')
   if (!cookies) {
-    throw new Error('无法获取 Cookie');
+    throw new Error('无法获取 Cookie')
   }
 
-  return { status: 'confirmed', cookie: extractCookie(cookies), refresh_token: message.data.refresh_token };
+  return { status: 'confirmed', cookie: extractCookie(cookies), refresh_token: message.data.refresh_token }
 }
 
 function extractCookie(cookies: string): string {
   const cookieArray = cookies
     .split(',')
-    .map((cookie) => cookie.split(';')[0].trim())
-    .filter(Boolean);
-  const cookieSet = new Set(cookieArray);
-  return Array.from(cookieSet).join('; ');
+    .map(cookie => cookie.split(';')[0].trim())
+    .filter(Boolean)
+  const cookieSet = new Set(cookieArray)
+  return Array.from(cookieSet).join('; ')
 }
diff --git a/src/client/data/info.ts b/src/client/data/info.ts
index 98dd856..ab80801 100644
--- a/src/client/data/info.ts
+++ b/src/client/data/info.ts
@@ -1,88 +1,88 @@
-import { ref } from 'vue';
-import { format } from 'date-fns';
-import { info, error } from '@tauri-apps/plugin-log';
-import { QueryBiliAPI } from './utils'; // 假设 Bili API 工具路径
-import { BiliRoomInfo, BiliStreamingInfo, FetcherStatisticData } from './models'; // 假设模型路径
-import { useTauriStore } from '../store/useTauriStore';
-import { useAccount } from '@/api/account';
+import type { BiliRoomInfo, BiliStreamingInfo, FetcherStatisticData } from './models' // 假设模型路径
+import { error, info } from '@tauri-apps/plugin-log'
+import { format } from 'date-fns'
+import { ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { useTauriStore } from '../store/useTauriStore'
+import { QueryBiliAPI } from './utils' // 假设 Bili API 工具路径
 // import { useAccount } from '@/api/account'; // 如果需要账户信息
 
 // const accountInfo = useAccount(); // 如果需要
 
-export const STATISTIC_STORE_KEY = 'webfetcher.statistics';
+export const STATISTIC_STORE_KEY = 'webfetcher.statistics'
 
 /**
  * 当前日期 (YYYY-MM-DD) 的统计数据 (会被持久化)
  */
-export const currentStatistic = ref<FetcherStatisticData>();
+export const currentStatistic = ref<FetcherStatisticData>()
 /**
  * 标记当前统计数据是否已更新且需要保存
  */
-export const shouldUpdateStatistic = ref(false);
+export const shouldUpdateStatistic = ref(false)
 
 /**
  * 直播流信息 (从B站API获取)
  */
 export const streamingInfo = ref<BiliStreamingInfo>({
   status: 'prepare', // 初始状态
-} as BiliStreamingInfo);
+} as BiliStreamingInfo)
 
 /**
  * 房间基本信息 (从B站API获取)
  */
-export const roomInfo = ref<BiliRoomInfo>(); // 可以添加房间信息
+export const roomInfo = ref<BiliRoomInfo>() // 可以添加房间信息
 
 // --- Bili API 更新相关 ---
-const updateCount = ref(0); // 用于控制API调用频率的计数器
+const updateCount = ref(0) // 用于控制API调用频率的计数器
 
 /**
  * 初始化统计和信息获取逻辑
  */
 export function initInfo() {
   // 立即执行一次以加载或初始化当天数据
-  updateCallback();
+  updateCallback()
   // 设置定时器，定期检查和保存统计数据，并更新直播间信息
   setInterval(() => {
-    updateCallback();
-  }, 5000); // 每 5 秒检查一次统计数据保存和更新直播信息
+    updateCallback()
+  }, 5000) // 每 5 秒检查一次统计数据保存和更新直播信息
 }
 
 /**
  * 定时回调函数: 处理统计数据持久化和B站信息更新
  */
 async function updateCallback() {
-  const store = useTauriStore();
-  const currentDate = format(new Date(), 'yyyy-MM-dd');
-  const key = `${STATISTIC_STORE_KEY}.${currentDate}`;
+  const store = useTauriStore()
+  const currentDate = format(new Date(), 'yyyy-MM-dd')
+  const key = `${STATISTIC_STORE_KEY}.${currentDate}`
 
   // --- 统计数据管理 ---
   // 检查是否需要加载或初始化当天的统计数据
   if (!currentStatistic.value || currentStatistic.value.date !== currentDate) {
-    const loadedData = await store.get<FetcherStatisticData>(key);
+    const loadedData = await store.get<FetcherStatisticData>(key)
     if (loadedData && loadedData.date === currentDate) {
-      currentStatistic.value = loadedData;
+      currentStatistic.value = loadedData
       // 确保 eventTypeCounts 存在
       if (!currentStatistic.value.eventTypeCounts) {
-        currentStatistic.value.eventTypeCounts = {};
+        currentStatistic.value.eventTypeCounts = {}
       }
       // info(`Loaded statistics for ${currentDate}`); // 日志保持不变
     } else {
-      info(`Initializing statistics for new day: ${currentDate}`);
+      info(`Initializing statistics for new day: ${currentDate}`)
       currentStatistic.value = {
         date: currentDate,
         count: 0,
         eventTypeCounts: {}, // 初始化类型计数
-      };
-      await store.set(key, currentStatistic.value); // 立即保存新一天的初始结构
-      shouldUpdateStatistic.value = false; // 重置保存标记
+      }
+      await store.set(key, currentStatistic.value) // 立即保存新一天的初始结构
+      shouldUpdateStatistic.value = false // 重置保存标记
 
       // 清理旧数据逻辑 (保持不变)
-      const allKeys = (await store.store.keys()).filter((k) => k.startsWith(STATISTIC_STORE_KEY));
+      const allKeys = (await store.store.keys()).filter(k => k.startsWith(STATISTIC_STORE_KEY))
       if (allKeys.length > 30) { // 例如，只保留最近30天的数据
-        allKeys.sort(); // 按日期字符串升序排序
-        const oldestKey = allKeys[0];
-        await store.store.delete(oldestKey);
-        info('清理过期统计数据: ' + oldestKey);
+        allKeys.sort() // 按日期字符串升序排序
+        const oldestKey = allKeys[0]
+        await store.store.delete(oldestKey)
+        info(`清理过期统计数据: ${oldestKey}`)
       }
     }
   }
@@ -90,23 +90,23 @@ async function updateCallback() {
   // 如果数据有更新，则保存
   if (shouldUpdateStatistic.value && currentStatistic.value) {
     try {
-      await store.set(key, currentStatistic.value);
-      shouldUpdateStatistic.value = false; // 保存后重置标记
+      await store.set(key, currentStatistic.value)
+      shouldUpdateStatistic.value = false // 保存后重置标记
     } catch (err) {
-      error("Failed to save statistics: " + err);
+      error(`Failed to save statistics: ${err}`)
     }
   }
 
   // --- B站信息更新 ---
-  let updateDelay = 30; // 默认30秒更新一次房间信息
+  let updateDelay = 30 // 默认30秒更新一次房间信息
   if (streamingInfo.value.status === 'streaming' && !import.meta.env.DEV) {
-    updateDelay = 15; // 直播中15秒更新一次 (可以适当调整)
+    updateDelay = 15 // 直播中15秒更新一次 (可以适当调整)
   }
   // 使用取模运算控制调用频率
   if (updateCount.value % (updateDelay / 5) === 0) { // 因为主循环是5秒一次
-    updateRoomAndStreamingInfo();
+    updateRoomAndStreamingInfo()
   }
-  updateCount.value++;
+  updateCount.value++
 }
 
 /**
@@ -114,28 +114,28 @@ async function updateCallback() {
  * @param eventType 事件类型字符串 (例如 "DANMU_MSG")
  */
 export function recordEvent(eventType: string) {
-  const currentDate = format(new Date(), 'yyyy-MM-dd');
+  const currentDate = format(new Date(), 'yyyy-MM-dd')
 
   // 确保 currentStatistic 已为当天初始化
   if (!currentStatistic.value || currentStatistic.value.date !== currentDate) {
     // 理论上 updateCallback 会先执行初始化，这里加个警告以防万一
-    console.warn("recordEvent called before currentStatistic was initialized for today.");
+    console.warn('recordEvent called before currentStatistic was initialized for today.')
     // 可以选择在这里强制调用一次 updateCallback 来初始化，但这可能是异步的
     // await updateCallback(); // 可能会引入复杂性
-    return; // 或者直接返回，丢失这个事件计数
+    return // 或者直接返回，丢失这个事件计数
   }
 
   // 增加总数
-  currentStatistic.value.count++;
+  currentStatistic.value.count++
 
   // 增加对应类型的计数
   if (!currentStatistic.value.eventTypeCounts) {
-    currentStatistic.value.eventTypeCounts = {}; // 防御性初始化
+    currentStatistic.value.eventTypeCounts = {} // 防御性初始化
   }
-  currentStatistic.value.eventTypeCounts[eventType] = (currentStatistic.value.eventTypeCounts[eventType] || 0) + 1;
+  currentStatistic.value.eventTypeCounts[eventType] = (currentStatistic.value.eventTypeCounts[eventType] || 0) + 1
 
   // 标记需要保存
-  shouldUpdateStatistic.value = true;
+  shouldUpdateStatistic.value = true
 }
 
 /**
@@ -145,21 +145,21 @@ export function recordEvent(eventType: string) {
 export function getEventType(command: any): string {
   if (typeof command === 'string') {
     try {
-      command = JSON.parse(command);
+      command = JSON.parse(command)
     } catch (e) {
-      return 'UNKNOWN_FORMAT';
+      return 'UNKNOWN_FORMAT'
     }
   }
 
   if (command && typeof command === 'object') {
     // 优先使用 'cmd' 字段 (常见于 Web 或 OpenLive)
-    if (command.cmd) return command.cmd;
+    if (command.cmd) return command.cmd
     // 备选 'command' 字段
-    if (command.command) return command.command;
+    if (command.command) return command.command
     // 备选 'type' 字段
-    if (command.type) return command.type;
+    if (command.type) return command.type
   }
-  return 'UNKNOWN'; // 未知类型
+  return 'UNKNOWN' // 未知类型
 }
 
 /**
@@ -167,69 +167,68 @@ export function getEventType(command: any): string {
  * @param days 要获取的天数，默认为 7
  */
 export async function getHistoricalStatistics(days: number = 7): Promise<FetcherStatisticData[]> {
-  const store = useTauriStore();
+  const store = useTauriStore()
   const keys = (await store.store.keys())
     .filter(key => key.startsWith(STATISTIC_STORE_KEY))
-    .sort((a, b) => b.localeCompare(a)); // 按日期降序排序
+    .sort((a, b) => b.localeCompare(a)) // 按日期降序排序
 
-  const historicalData: FetcherStatisticData[] = [];
+  const historicalData: FetcherStatisticData[] = []
   for (let i = 0; i < Math.min(days, keys.length); i++) {
-    const data = await store.get<FetcherStatisticData>(keys[i]);
+    const data = await store.get<FetcherStatisticData>(keys[i])
     if (data) {
-      historicalData.push(data);
+      historicalData.push(data)
     }
   }
-  return historicalData.reverse(); // 返回按日期升序排列的结果
+  return historicalData.reverse() // 返回按日期升序排列的结果
 }
 
 /**
  * 更新房间和直播流信息
  */
 async function updateRoomAndStreamingInfo() {
-  const account = useAccount();
+  const account = useAccount()
   if (!account.value.biliRoomId) {
     // error("无法获取房间ID以更新直播信息");
-    return;
+    return
   }
 
   try {
     // 查询房间基本信息
     const roomRes = await QueryBiliAPI(
-      `https://api.live.bilibili.com/room/v1/Room/get_info?room_id=${account.value.biliRoomId}`
-    );
-    const json = await roomRes.json();
+      `https://api.live.bilibili.com/room/v1/Room/get_info?room_id=${account.value.biliRoomId}`,
+    )
+    const json = await roomRes.json()
     if (json.code === 0) {
-      roomInfo.value = json.data;
+      roomInfo.value = json.data
     } else {
-      error(`Failed to fetch Bili room info: ${json.message}`);
+      error(`Failed to fetch Bili room info: ${json.message}`)
     }
     // 查询直播流信息 (开放平台或Web接口)
     // 注意：这里可能需要根据所选模式（openlive/direct）调用不同的API
     // 以下是Web接口示例
     const streamRes = await QueryBiliAPI(
-      `https://api.live.bilibili.com/room/v1/Room/get_status_info_by_uids?uids[]=${roomInfo.value?.uid}` // 通过 UID 查询
+      `https://api.live.bilibili.com/room/v1/Room/get_status_info_by_uids?uids[]=${roomInfo.value?.uid}`, // 通过 UID 查询
       // 或者使用 `https://api.live.bilibili.com/xlive/web-room/v1/index/getRoomBaseInfo?room_ids=${roomId}&req_biz=web_room_componet`
-    );
-    const streamJson = await streamRes.json();
+    )
+    const streamJson = await streamRes.json()
     if (streamJson.code === 0 && streamJson.data && roomInfo.value?.uid) {
       // Web API 返回的是一个以 UID 为 key 的对象
-      const uidData = streamJson.data[roomInfo.value.uid.toString()];
+      const uidData = streamJson.data[roomInfo.value.uid.toString()]
       if (uidData) {
         streamingInfo.value = {
           ...uidData, // 合并获取到的数据
           status: uidData.live_status === 1 ? 'streaming' : uidData.live_status === 2 ? 'rotating' : 'prepare',
-        };
+        }
       } else {
         // 如果没有对应UID的数据，可能表示未开播或接口变更
-        //streamingInfo.value = { status: 'prepare', ...streamingInfo.value }; // 保留旧数据，状态设为prepare
+        // streamingInfo.value = { status: 'prepare', ...streamingInfo.value }; // 保留旧数据，状态设为prepare
       }
     } else if (streamJson.code !== 0) {
-      error(`Failed to fetch Bili streaming info: ${streamJson.message}`);
+      error(`Failed to fetch Bili streaming info: ${streamJson.message}`)
       // 可选：如果获取失败，将状态设为未知或准备
       // streamingInfo.value = { status: 'prepare', ...streamingInfo.value };
     }
-
   } catch (err) {
-    error("Error updating room/streaming info: " + err);
+    error(`Error updating room/streaming info: ${err}`)
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/data/initialize.ts b/src/client/data/initialize.ts
index b173916..64ee7f6 100644
--- a/src/client/data/initialize.ts
+++ b/src/client/data/initialize.ts
@@ -1,90 +1,91 @@
-import { isLoggedIn, useAccount } from "@/api/account";
-import { attachConsole, info, warn } from "@tauri-apps/plugin-log";
-import { useSettings } from "../store/useSettings";
-import { useWebFetcher } from "@/store/useWebFetcher";
-import { useBiliCookie } from "../store/useBiliCookie";
-import { getBuvid, getRoomKey } from "./utils";
-import { initInfo } from "./info";
-import { TrayIcon, TrayIconOptions } from '@tauri-apps/api/tray';
-import { Menu } from "@tauri-apps/api/menu";
-import { getCurrentWindow, PhysicalSize } from "@tauri-apps/api/window";
+import type { TrayIconOptions } from '@tauri-apps/api/tray'
+import { invoke } from '@tauri-apps/api/core'
+import { Menu } from '@tauri-apps/api/menu'
+import { TrayIcon } from '@tauri-apps/api/tray'
+import { getAllWebviewWindows } from '@tauri-apps/api/webviewWindow'
+import { getCurrentWindow, PhysicalSize } from '@tauri-apps/api/window'
+import { attachConsole, info, warn } from '@tauri-apps/plugin-log'
 import {
   isPermissionGranted,
   onAction,
   requestPermission,
   sendNotification,
-} from '@tauri-apps/plugin-notification';
-import { openUrl } from "@tauri-apps/plugin-opener";
-import { CN_HOST, isDev } from "@/data/constants";
-import { invoke } from "@tauri-apps/api/core";
-import { check } from '@tauri-apps/plugin-updater';
-import { relaunch } from '@tauri-apps/plugin-process';
-import { useDanmakuWindow } from "../store/useDanmakuWindow";
-import { getAllWebviewWindows } from "@tauri-apps/api/webviewWindow";
-import { useAutoAction } from "../store/useAutoAction";
-import { useBiliFunction } from "../store/useBiliFunction";
+} from '@tauri-apps/plugin-notification'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { relaunch } from '@tauri-apps/plugin-process'
+import { check } from '@tauri-apps/plugin-updater'
+import { isLoggedIn, useAccount } from '@/api/account'
+import { CN_HOST, isDev } from '@/data/constants'
+import { useWebFetcher } from '@/store/useWebFetcher'
+import { useAutoAction } from '../store/useAutoAction'
+import { useBiliCookie } from '../store/useBiliCookie'
+import { useBiliFunction } from '../store/useBiliFunction'
+import { useDanmakuWindow } from '../store/useDanmakuWindow'
+import { useSettings } from '../store/useSettings'
+import { initInfo } from './info'
+import { getBuvid, getRoomKey } from './utils'
 
-const accountInfo = useAccount();
+const accountInfo = useAccount()
 
-export const clientInited = ref(false);
-let tray: TrayIcon;
+export const clientInited = ref(false)
+let tray: TrayIcon
 export async function initAll(isOnBoot: boolean) {
-  const setting = useSettings();
+  const setting = useSettings()
   if (clientInited.value) {
-    return;
+    return
   }
-  checkUpdate();
-  const appWindow = getCurrentWindow();
-  let permissionGranted = await isPermissionGranted();
+  checkUpdate()
+  const appWindow = getCurrentWindow()
+  let permissionGranted = await isPermissionGranted()
 
   // If not we need to request it
   if (!permissionGranted) {
-    const permission = await requestPermission();
-    permissionGranted = permission === 'granted';
+    const permission = await requestPermission()
+    permissionGranted = permission === 'granted'
     if (permissionGranted) {
-      info('Notification permission granted');
+      info('Notification permission granted')
     }
   }
 
   if (isOnBoot) {
     if (setting.settings.bootAsMinimized && !isDev && await appWindow.isVisible()) {
-      appWindow.hide();
+      appWindow.hide()
       sendNotification({
-        title: "VTsuru.Client",
-        body: '已启动并最小化到托盘'
-      });
+        title: 'VTsuru.Client',
+        body: '已启动并最小化到托盘',
+      })
     }
   }
-  initNotificationHandler();
-  const detach = await attachConsole();
-  const settings = useSettings();
-  const biliCookie = useBiliCookie();
-  await settings.init();
-  info('[init] 已加载账户信息');
-  biliCookie.init();
-  info('[init] 已加载bilibili cookie');
-  initInfo();
-  info('[init] 开始更新数据');
+  initNotificationHandler()
+  const detach = await attachConsole()
+  const settings = useSettings()
+  const biliCookie = useBiliCookie()
+  await settings.init()
+  info('[init] 已加载账户信息')
+  biliCookie.init()
+  info('[init] 已加载bilibili cookie')
+  initInfo()
+  info('[init] 开始更新数据')
 
   if (isLoggedIn.value && accountInfo.value.isBiliVerified && !setting.settings.dev_disableDanmakuClient) {
     const danmakuInitNoticeRef = window.$notification.info({
       title: '正在初始化弹幕客户端...',
-      closable: false
-    });
-    const result = await initDanmakuClient();
-    danmakuInitNoticeRef.destroy();
+      closable: false,
+    })
+    const result = await initDanmakuClient()
+    danmakuInitNoticeRef.destroy()
     if (result.success) {
       window.$notification.success({
         title: '弹幕客户端初始化完成',
-        duration: 3000
-      });
+        duration: 3000,
+      })
     } else {
       window.$notification.error({
-        title: '弹幕客户端初始化失败: ' + result.message,
-      });
+        title: `弹幕客户端初始化失败: ${result.message}`,
+      })
     }
   }
-  info('[init] 已加载弹幕客户端');
+  info('[init] 已加载弹幕客户端')
   // 初始化系统托盘图标和菜单
   const menu = await Menu.new({
     items: [
@@ -92,206 +93,207 @@ export async function initAll(isOnBoot: boolean) {
         id: 'quit',
         text: '退出',
         action: () => {
-          invoke('quit_app');
+          invoke('quit_app')
         },
       },
     ],
-  });
-  const iconData = await (await fetch('https://oss.suki.club/vtsuru/icon.ico')).arrayBuffer();
+  })
+  const iconData = await (await fetch('https://oss.suki.club/vtsuru/icon.ico')).arrayBuffer()
   const options: TrayIconOptions = {
     // here you can add a tray menu, title, tooltip, event handler, etc
-    menu: menu,
+    menu,
     title: 'VTsuru.Client',
     tooltip: 'VTsuru 事件收集器',
     icon: iconData,
     action: (event) => {
-
       switch (event.type) {
         case 'DoubleClick':
-          appWindow.show();
-          break;
+          appWindow.show()
+          break
         case 'Click':
-          appWindow.show();
-          break;
+          appWindow.show()
+          break
       }
-    }
-  };
-  tray = await TrayIcon.new(options);
+    },
+  }
+  tray = await TrayIcon.new(options)
 
-  appWindow.setMinSize(new PhysicalSize(720, 480));
+  appWindow.setMinSize(new PhysicalSize(720, 480))
 
   getAllWebviewWindows().then(async (windows) => {
-    const w = windows.find((win) => win.label === 'danmaku-window')
+    const w = windows.find(win => win.label === 'danmaku-window')
     if (w) {
-      const useWindow = useDanmakuWindow();
-      useWindow.init();
+      const useWindow = useDanmakuWindow()
+      useWindow.init()
 
       if ((useWindow.emojiData?.updateAt ?? 0) < Date.now() - 1000 * 60 * 60 * 24) {
-        await useWindow.getEmojiData();
+        await useWindow.getEmojiData()
       }
       if (await w.isVisible()) {
-        useWindow.isDanmakuWindowOpen = true;
+        useWindow.isDanmakuWindowOpen = true
 
-        console.log('弹幕窗口已打开');
+        console.log('弹幕窗口已打开')
       }
     }
-  });
+  })
 
   // 监听f12事件
   if (!isDev) {
     window.addEventListener('keydown', (event) => {
       if (event.key === 'F12') {
-        event.preventDefault();
-        event.stopPropagation();
+        event.preventDefault()
+        event.stopPropagation()
       }
-    });
+    })
   }
 
-  useAutoAction().init();
-  useBiliFunction().init();
+  useAutoAction().init()
+  useBiliFunction().init()
 
-  clientInited.value = true;
+  clientInited.value = true
 }
 export function OnClientUnmounted() {
   if (clientInited.value) {
-    clientInited.value = false;
+    clientInited.value = false
   }
 
-  tray.close();
-  //useDanmakuWindow().closeWindow();
+  tray.close()
+  // useDanmakuWindow().closeWindow();
 }
 
 async function checkUpdate() {
-  const update = await check();
-  console.log(update);
+  const update = await check()
+  console.log(update)
   if (update) {
     console.log(
-      `found update ${update.version} from ${update.date} with notes ${update.body}`
-    );
-    let downloaded = 0;
-    let contentLength = 0;
+      `found update ${update.version} from ${update.date} with notes ${update.body}`,
+    )
+    let downloaded = 0
+    let contentLength = 0
     // alternatively we could also call update.download() and update.install() separately
     await update.downloadAndInstall((event) => {
       switch (event.event) {
         case 'Started':
-          contentLength = event.data.contentLength || 0;
-          console.log(`started downloading ${event.data.contentLength} bytes`);
-          break;
+          contentLength = event.data.contentLength || 0
+          console.log(`started downloading ${event.data.contentLength} bytes`)
+          break
         case 'Progress':
-          downloaded += event.data.chunkLength;
-          console.log(`downloaded ${downloaded} from ${contentLength}`);
-          break;
+          downloaded += event.data.chunkLength
+          console.log(`downloaded ${downloaded} from ${contentLength}`)
+          break
         case 'Finished':
-          console.log('download finished');
-          break;
+          console.log('download finished')
+          break
       }
-    });
+    })
 
-    console.log('update installed');
-    await relaunch();
+    console.log('update installed')
+    await relaunch()
   }
 }
 
-export const isInitedDanmakuClient = ref(false);
-export const isInitingDanmakuClient = ref(false);
+export const isInitedDanmakuClient = ref(false)
+export const isInitingDanmakuClient = ref(false)
 export async function initDanmakuClient() {
-  const biliCookie = useBiliCookie();
-  const settings = useSettings();
+  const biliCookie = useBiliCookie()
+  const settings = useSettings()
   if (isInitedDanmakuClient.value || isInitingDanmakuClient.value) {
-    info('弹幕客户端已初始化, 跳过初始化');
-    return { success: true, message: '' };
+    info('弹幕客户端已初始化, 跳过初始化')
+    return { success: true, message: '' }
   }
-  isInitingDanmakuClient.value = true;
-  console.log(settings.settings);
-  let result = { success: false, message: '' };
+  isInitingDanmakuClient.value = true
+  console.log(settings.settings)
+  let result = { success: false, message: '' }
   try {
     if (isLoggedIn) {
       if (settings.settings.useDanmakuClientType === 'openlive') {
-        result = await initOpenLive();
+        result = await initOpenLive()
       } else {
-        const cookie = await biliCookie.getBiliCookie();
+        const cookie = await biliCookie.getBiliCookie()
         if (!cookie) {
           if (settings.settings.fallbackToOpenLive) {
-            settings.settings.useDanmakuClientType = 'openlive';
-            settings.save();
-            info('未设置bilibili cookie, 根据设置切换为openlive');
-            result = await initOpenLive();
+            settings.settings.useDanmakuClientType = 'openlive'
+            settings.save()
+            info('未设置bilibili cookie, 根据设置切换为openlive')
+            result = await initOpenLive()
           } else {
-            info('未设置bilibili cookie, 跳过弹幕客户端初始化');
+            info('未设置bilibili cookie, 跳过弹幕客户端初始化')
             window.$notification.warning({
               title: '未设置bilibili cookie, 跳过弹幕客户端初始化',
               duration: 5,
-            });
-            result = { success: false, message: '未设置bilibili cookie' };
+            })
+            result = { success: false, message: '未设置bilibili cookie' }
           }
         } else {
-          const resp = await callStartDanmakuClient();
+          const resp = await callStartDanmakuClient()
           if (!resp?.success) {
-            warn('加载弹幕客户端失败: ' + resp?.message);
-            result = { success: false, message: resp?.message };
+            warn(`加载弹幕客户端失败: ${resp?.message}`)
+            result = { success: false, message: resp?.message }
           } else {
-            info('已加载弹幕客户端');
-            result = { success: true, message: '' };
+            info('已加载弹幕客户端')
+            result = { success: true, message: '' }
           }
         }
       }
     } else {
-      info('未登录, 跳过弹幕客户端初始化');
-      result = { success: true, message: '' };
+      info('未登录, 跳过弹幕客户端初始化')
+      result = { success: true, message: '' }
     }
-    return result;
+    return result
   } catch (err) {
-    warn('加载弹幕客户端失败: ' + err);
-    return { success: false, message: '加载弹幕客户端失败' };
+    warn(`加载弹幕客户端失败: ${err}`)
+    return { success: false, message: '加载弹幕客户端失败' }
   } finally {
     if (result) {
-      isInitedDanmakuClient.value = true;
+      isInitedDanmakuClient.value = true
     }
-    isInitingDanmakuClient.value = false;
+    isInitingDanmakuClient.value = false
   }
 }
 export async function initOpenLive() {
-  const reuslt = await callStartDanmakuClient();
+  const reuslt = await callStartDanmakuClient()
   if (reuslt?.success == true) {
-    info('已加载弹幕客户端 [openlive]');
+    info('已加载弹幕客户端 [openlive]')
   } else {
-    warn('加载弹幕客户端失败 [openlive]: ' + reuslt?.message);
+    warn(`加载弹幕客户端失败 [openlive]: ${reuslt?.message}`)
   }
-  return reuslt;
+  return reuslt
 }
 function initNotificationHandler() {
   onAction((event) => {
     if (event.extra?.type === 'question-box') {
-      openUrl(CN_HOST + '/manage/question-box');
+      openUrl(`${CN_HOST}/manage/question-box`)
     }
-  });
+  })
 }
 
 export async function callStartDanmakuClient() {
-  const biliCookie = useBiliCookie();
-  const settings = useSettings();
-  const webFetcher = useWebFetcher();
+  const biliCookie = useBiliCookie()
+  const settings = useSettings()
+  const webFetcher = useWebFetcher()
   if (settings.settings.useDanmakuClientType === 'direct') {
-    info('开始初始化弹幕客户端 [direct]');
+    info('开始初始化弹幕客户端 [direct]')
     const key = await getRoomKey(
-      accountInfo.value.biliRoomId!, await biliCookie.getBiliCookie() || '');
+      accountInfo.value.biliRoomId!,
+      await biliCookie.getBiliCookie() || '',
+    )
     if (!key) {
-      warn('获取房间密钥失败, 无法连接弹幕客户端');
-      return { success: false, message: '无法获取房间密钥' };
+      warn('获取房间密钥失败, 无法连接弹幕客户端')
+      return { success: false, message: '无法获取房间密钥' }
     }
-    const buvid = await getBuvid();
+    const buvid = await getBuvid()
     if (!buvid) {
-      warn('获取buvid失败, 无法连接弹幕客户端');
-      return { success: false, message: '无法获取buvid' };
+      warn('获取buvid失败, 无法连接弹幕客户端')
+      return { success: false, message: '无法获取buvid' }
     }
-    return await webFetcher.Start('direct', {
+    return webFetcher.Start('direct', {
       roomId: accountInfo.value.biliRoomId!,
       buvid: buvid.data,
       token: key,
       tokenUserId: biliCookie.uId!,
-    }, true);
+    }, true)
   } else {
-    info('开始初始化弹幕客户端 [openlive]');
-    return await webFetcher.Start('openlive', undefined, true);
+    info('开始初始化弹幕客户端 [openlive]')
+    return webFetcher.Start('openlive', undefined, true)
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/data/models.ts b/src/client/data/models.ts
index a6a29cb..3d9b77c 100644
--- a/src/client/data/models.ts
+++ b/src/client/data/models.ts
@@ -1,10 +1,10 @@
 export interface EventFetcherStateModel {
-  online: boolean;
-  status: { [errorCode: string]: string };
-  version?: string;
-  todayReceive: number;
-  useCookie: boolean;
-  type: EventFetcherType;
+  online: boolean
+  status: { [errorCode: string]: string }
+  version?: string
+  todayReceive: number
+  useCookie: boolean
+  type: EventFetcherType
 }
 
 export enum EventFetcherType {
@@ -14,269 +14,269 @@ export enum EventFetcherType {
   Tauri,
 }
 
-export type BiliRoomInfo = {
-  uid: number;
-  room_id: number;
-  short_id: number;
-  attention: number;
-  online: number;
-  is_portrait: boolean;
-  description: string;
-  live_status: number;
-  area_id: number;
-  parent_area_id: number;
-  parent_area_name: string;
-  old_area_id: number;
-  background: string;
-  title: string;
-  user_cover: string;
-  keyframe: string;
-  is_strict_room: boolean;
-  live_time: string;
-  tags: string;
-  is_anchor: number;
-  room_silent_type: string;
-  room_silent_level: number;
-  room_silent_second: number;
-  area_name: string;
-  pendants: string;
-  area_pendants: string;
-  hot_words: string[];
-  hot_words_status: number;
-  verify: string;
+export interface BiliRoomInfo {
+  uid: number
+  room_id: number
+  short_id: number
+  attention: number
+  online: number
+  is_portrait: boolean
+  description: string
+  live_status: number
+  area_id: number
+  parent_area_id: number
+  parent_area_name: string
+  old_area_id: number
+  background: string
+  title: string
+  user_cover: string
+  keyframe: string
+  is_strict_room: boolean
+  live_time: string
+  tags: string
+  is_anchor: number
+  room_silent_type: string
+  room_silent_level: number
+  room_silent_second: number
+  area_name: string
+  pendants: string
+  area_pendants: string
+  hot_words: string[]
+  hot_words_status: number
+  verify: string
   new_pendants: {
     frame: {
-      name: string;
-      value: string;
-      position: number;
-      desc: string;
-      area: number;
-      area_old: number;
-      bg_color: string;
-      bg_pic: string;
-      use_old_area: boolean;
-    };
-    badge: unknown; // null in the example, adjust to proper type if known
+      name: string
+      value: string
+      position: number
+      desc: string
+      area: number
+      area_old: number
+      bg_color: string
+      bg_pic: string
+      use_old_area: boolean
+    }
+    badge: unknown // null in the example, adjust to proper type if known
     mobile_frame: {
-      name: string;
-      value: string;
-      position: number;
-      desc: string;
-      area: number;
-      area_old: number;
-      bg_color: string;
-      bg_pic: string;
-      use_old_area: boolean;
-    };
-    mobile_badge: unknown; // null in the example, adjust to proper type if known
-  };
-  up_session: string;
-  pk_status: number;
-  pk_id: number;
-  battle_id: number;
-  allow_change_area_time: number;
-  allow_upload_cover_time: number;
+      name: string
+      value: string
+      position: number
+      desc: string
+      area: number
+      area_old: number
+      bg_color: string
+      bg_pic: string
+      use_old_area: boolean
+    }
+    mobile_badge: unknown // null in the example, adjust to proper type if known
+  }
+  up_session: string
+  pk_status: number
+  pk_id: number
+  battle_id: number
+  allow_change_area_time: number
+  allow_upload_cover_time: number
   studio_info: {
-    status: number;
-    master_list: any[]; // empty array in the example, adjust to proper type if known
-  };
+    status: number
+    master_list: any[] // empty array in the example, adjust to proper type if known
+  }
 }
 
-export type FetcherStatisticData = {
-  date: string;
-  count: number;
-  eventTypeCounts: { [eventType: string]: number };
-};
-export type BiliStreamingInfo = {
-  status: 'prepare' | 'streaming' | 'cycle';
-  streamAt: Date;
-  roomId: number;
-  title: string;
-  coverUrl: string;
-  frameUrl: string;
-  areaName: string;
-  parentAreaName: string;
-  online: number;
-  attention: number;
-};
+export interface FetcherStatisticData {
+  date: string
+  count: number
+  eventTypeCounts: { [eventType: string]: number }
+}
+export interface BiliStreamingInfo {
+  status: 'prepare' | 'streaming' | 'cycle'
+  streamAt: Date
+  roomId: number
+  title: string
+  coverUrl: string
+  frameUrl: string
+  areaName: string
+  parentAreaName: string
+  online: number
+  attention: number
+}
 
 // Nested type for Vip Label
 interface VipLabel {
-  path: string;
-  text: string;
-  label_theme: string;
-  text_color: string;
-  bg_style: number;
-  bg_color: string;
-  border_color: string;
-  use_img_label: boolean;
-  img_label_uri_hans: string;
-  img_label_uri_hant: string;
-  img_label_uri_hans_static: string;
-  img_label_uri_hant_static: string;
+  path: string
+  text: string
+  label_theme: string
+  text_color: string
+  bg_style: number
+  bg_color: string
+  border_color: string
+  use_img_label: boolean
+  img_label_uri_hans: string
+  img_label_uri_hant: string
+  img_label_uri_hans_static: string
+  img_label_uri_hant_static: string
 }
 
 // Nested type for Avatar Icon
 interface AvatarIcon {
-  icon_type: number;
+  icon_type: number
   // Assuming icon_resource could contain arbitrary data or be empty
-  icon_resource: Record<string, unknown> | {};
+  icon_resource: Record<string, unknown> | {}
 }
 
 // Nested type for Vip Info
 interface VipInfo {
-  type: number;
-  status: number;
-  due_date: number; // Likely a Unix timestamp in milliseconds
-  vip_pay_type: number;
-  theme_type: number;
-  label: VipLabel;
-  avatar_subscript: number;
-  nickname_color: string;
-  role: number;
-  avatar_subscript_url: string;
-  tv_vip_status: number;
-  tv_vip_pay_type: number;
-  tv_due_date: number; // Likely a Unix timestamp in milliseconds or 0
-  avatar_icon: AvatarIcon;
+  type: number
+  status: number
+  due_date: number // Likely a Unix timestamp in milliseconds
+  vip_pay_type: number
+  theme_type: number
+  label: VipLabel
+  avatar_subscript: number
+  nickname_color: string
+  role: number
+  avatar_subscript_url: string
+  tv_vip_status: number
+  tv_vip_pay_type: number
+  tv_due_date: number // Likely a Unix timestamp in milliseconds or 0
+  avatar_icon: AvatarIcon
 }
 
 // Nested type for Pendant Info
 interface PendantInfo {
-  pid: number;
-  name: string;
-  image: string; // URL
-  expire: number; // Likely a timestamp or duration
-  image_enhance: string; // URL
-  image_enhance_frame: string; // URL or empty string
-  n_pid: number;
+  pid: number
+  name: string
+  image: string // URL
+  expire: number // Likely a timestamp or duration
+  image_enhance: string // URL
+  image_enhance_frame: string // URL or empty string
+  n_pid: number
 }
 
 // Nested type for Nameplate Info
 interface NameplateInfo {
-  nid: number;
-  name: string;
-  image: string; // URL
-  image_small: string; // URL
-  level: string;
-  condition: string;
+  nid: number
+  name: string
+  image: string // URL
+  image_small: string // URL
+  level: string
+  condition: string
 }
 
 // Nested type for Official Info
 interface OfficialInfo {
-  role: number;
-  title: string;
-  desc: string;
-  type: number;
+  role: number
+  title: string
+  desc: string
+  type: number
 }
 
 // Nested type for Profession Info
 interface ProfessionInfo {
-  id: number;
-  name: string;
-  show_name: string;
-  is_show: number; // Likely 0 or 1
-  category_one: string;
-  realname: string;
-  title: string;
-  department: string;
-  certificate_no: string;
-  certificate_show: boolean;
+  id: number
+  name: string
+  show_name: string
+  is_show: number // Likely 0 or 1
+  category_one: string
+  realname: string
+  title: string
+  department: string
+  certificate_no: string
+  certificate_show: boolean
 }
 
 // Nested type for Honours Colour
 interface HonoursColour {
-  dark: string; // Hex color code
-  normal: string; // Hex color code
+  dark: string // Hex color code
+  normal: string // Hex color code
 }
 
 // Nested type for Honours Info
 interface HonoursInfo {
-  mid: number;
-  colour: HonoursColour;
+  mid: number
+  colour: HonoursColour
   // Assuming tags could be an array of strings if not null
-  tags: string[] | null;
-  is_latest_100honour: number; // Likely 0 or 1
+  tags: string[] | null
+  is_latest_100honour: number // Likely 0 or 1
 }
 
 // Nested type for Attestation Common Info
 interface CommonAttestationInfo {
-    title: string;
-    prefix: string;
-    prefix_title: string;
+  title: string
+  prefix: string
+  prefix_title: string
 }
 
 // Nested type for Attestation Splice Info
 interface SpliceAttestationInfo {
-    title: string;
+  title: string
 }
 
 // Nested type for Attestation Info
 interface AttestationInfo {
-    type: number;
-    common_info: CommonAttestationInfo;
-    splice_info: SpliceAttestationInfo;
-    icon: string;
-    desc: string;
+  type: number
+  common_info: CommonAttestationInfo
+  splice_info: SpliceAttestationInfo
+  icon: string
+  desc: string
 }
 
 // Nested type for Expert Info
 interface ExpertInfo {
-    title: string;
-    state: number;
-    type: number;
-    desc: string;
+  title: string
+  state: number
+  type: number
+  desc: string
 }
 
 // Nested type for Level Exp Info
 interface LevelExpInfo {
-  current_level: number;
-  current_min: number;
-  current_exp: number;
-  next_exp: number; // -1 might indicate max level or data not applicable
-  level_up: number; // Likely a Unix timestamp
+  current_level: number
+  current_min: number
+  current_exp: number
+  next_exp: number // -1 might indicate max level or data not applicable
+  level_up: number // Likely a Unix timestamp
 }
 
 // Main User Profile Type
-export type BiliUserProfile = {
-  mid: number;
-  name: string;
-  sex: string; // Could be more specific like '男' | '女' | '保密' if desired
-  face: string; // URL
-  sign: string;
-  rank: number;
-  level: number;
-  jointime: number; // Likely a Unix timestamp or 0
-  moral: number;
-  silence: number; // Likely 0 or 1
-  email_status: number; // Likely 0 or 1
-  tel_status: number; // Likely 0 or 1
-  identification: number; // Likely 0 or 1
-  vip: VipInfo;
-  pendant: PendantInfo;
-  nameplate: NameplateInfo;
-  official: OfficialInfo;
-  birthday: number; // Likely a Unix timestamp
-  is_tourist: number; // Likely 0 or 1
-  is_fake_account: number; // Likely 0 or 1
-  pin_prompting: number; // Likely 0 or 1
-  is_deleted: number; // Likely 0 or 1
-  in_reg_audit: number; // Likely 0 or 1
-  is_rip_user: boolean;
-  profession: ProfessionInfo;
-  face_nft: number;
-  face_nft_new: number;
-  is_senior_member: number; // Likely 0 or 1
-  honours: HonoursInfo;
-  digital_id: string;
-  digital_type: number;
-  attestation: AttestationInfo;
-  expert_info: ExpertInfo;
+export interface BiliUserProfile {
+  mid: number
+  name: string
+  sex: string // Could be more specific like '男' | '女' | '保密' if desired
+  face: string // URL
+  sign: string
+  rank: number
+  level: number
+  jointime: number // Likely a Unix timestamp or 0
+  moral: number
+  silence: number // Likely 0 or 1
+  email_status: number // Likely 0 or 1
+  tel_status: number // Likely 0 or 1
+  identification: number // Likely 0 or 1
+  vip: VipInfo
+  pendant: PendantInfo
+  nameplate: NameplateInfo
+  official: OfficialInfo
+  birthday: number // Likely a Unix timestamp
+  is_tourist: number // Likely 0 or 1
+  is_fake_account: number // Likely 0 or 1
+  pin_prompting: number // Likely 0 or 1
+  is_deleted: number // Likely 0 or 1
+  in_reg_audit: number // Likely 0 or 1
+  is_rip_user: boolean
+  profession: ProfessionInfo
+  face_nft: number
+  face_nft_new: number
+  is_senior_member: number // Likely 0 or 1
+  honours: HonoursInfo
+  digital_id: string
+  digital_type: number
+  attestation: AttestationInfo
+  expert_info: ExpertInfo
   // Assuming name_render could be various types or null
-  name_render: any | null;
-  country_code: string;
-  level_exp: LevelExpInfo;
-  coins: number; // Can be float
-  following: number;
-  follower: number;
-};
\ No newline at end of file
+  name_render: any | null
+  country_code: string
+  level_exp: LevelExpInfo
+  coins: number // Can be float
+  following: number
+  follower: number
+}
diff --git a/src/client/data/notification.ts b/src/client/data/notification.ts
index 105ee40..aa5569f 100644
--- a/src/client/data/notification.ts
+++ b/src/client/data/notification.ts
@@ -1,106 +1,113 @@
-import { QAInfo, ResponsePointGoodModel, ResponsePointOrder2OwnerModel } from "@/api/api-models";
-import { useSettings } from "../store/useSettings";
-import { isPermissionGranted, onAction, Options, sendNotification } from "@tauri-apps/plugin-notification";
-import { openUrl } from "@tauri-apps/plugin-opener";
-import { CN_HOST } from "@/data/constants";
-import { NButton, NFlex } from "naive-ui";
-import QuestionItem from "@/components/QuestionItem.vue";
+import type { Options } from '@tauri-apps/plugin-notification'
+import type { QAInfo, ResponsePointGoodModel, ResponsePointOrder2OwnerModel } from '@/api/api-models'
+import { isPermissionGranted, sendNotification } from '@tauri-apps/plugin-notification'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { NButton, NFlex } from 'naive-ui'
+import QuestionItem from '@/components/QuestionItem.vue'
+import { CN_HOST } from '@/data/constants'
+import { useSettings } from '../store/useSettings'
 
 export async function trySendNotification(option: Options) {
-  let permissionGranted = await isPermissionGranted();
-    if (permissionGranted) {
-      sendNotification(option);
-    }
+  const permissionGranted = await isPermissionGranted()
+  if (permissionGranted) {
+    sendNotification(option)
+  }
 }
 
 export function onReceivedNotification(type: string, json: string) {
-  console.log(`接收到通知: ${type}`, json);
-  const data = JSON.parse(json);
+  console.log(`接收到通知: ${type}`, json)
+  const data = JSON.parse(json)
   switch (type) {
     case 'question-box':
-      onReceivedQuestion(data);
-      break;
+      onReceivedQuestion(data)
+      break
     case 'goods-buy':
-      onGoodsBuy(data);
-      break;
+      onGoodsBuy(data)
+      break
     default:
-      console.warn(`Unhandled notification type: ${type}`);
+      console.warn(`Unhandled notification type: ${type}`)
   }
 }
 
 export async function onReceivedQuestion(question: QAInfo) {
-  const setting = useSettings();
-  if (setting.settings.notificationSettings.enableTypes.includes("question-box")) {
+  const setting = useSettings()
+  if (setting.settings.notificationSettings.enableTypes.includes('question-box')) {
     window.$notification.info({
-      title: "提问箱",
-      description: '收到来自 [' + (question.sender.name || '匿名用户') + '] 的提问',
+      title: '提问箱',
+      description: `收到来自 [${question.sender.name || '匿名用户'}] 的提问`,
       duration: 0,
       action: () => h(NFlex, {}, () => [
         h(NButton, {
-          text: true, type: 'info', onClick: () => {
+          text: true,
+          type: 'info',
+          onClick: () => {
             window.$modal.create({
               title: '快速查看',
               preset: 'card',
               style: { maxWidth: '80vw' },
               content: () => h(QuestionItem, { item: question }),
-            });
-          }
+            })
+          },
         }, () => '快速查看'),
         h(NButton, {
-          text: true, type: 'primary', onClick: () => {
-            openUrl(`${CN_HOST}manage/question-box`);
-          }
+          text: true,
+          type: 'primary',
+          onClick: () => {
+            openUrl(`${CN_HOST}manage/question-box`)
+          },
         }, () => '查看详情'),
-      ])
-    });
+      ]),
+    })
     trySendNotification({
-      title: "提问箱",
-      body: '收到来自 [' + (question.sender.name || '匿名用户') + '] 的提问',
+      title: '提问箱',
+      body: `收到来自 [${question.sender.name || '匿名用户'}] 的提问`,
       extra: { type: 'question-box' },
-    });
+    })
   }
 }
 
 export function onGoodsBuy(info: {
-  data: ResponsePointOrder2OwnerModel,
+  data: ResponsePointOrder2OwnerModel
   goods: ResponsePointGoodModel
 }) {
-  const setting = useSettings();
-  const order = info.data;
-  const goods = info.goods;
-  if (setting.settings.notificationSettings.enableTypes.includes("goods-buy")) {
+  const setting = useSettings()
+  const order = info.data
+  const goods = info.goods
+  if (setting.settings.notificationSettings.enableTypes.includes('goods-buy')) {
     window.$notification.info({
-      title: "礼物兑换",
+      title: '礼物兑换',
       description: `${order.customer.name} 兑换了你的 [${goods.name}]，数量: ${order.count}，总价: ${order.point} 元`,
       duration: 0,
       action: () => h(NButton, {
-        text: true, type: 'primary', onClick: () => {
-          openUrl(`${CN_HOST}manage/goods-buy`);
-        }
+        text: true,
+        type: 'primary',
+        onClick: () => {
+          openUrl(`${CN_HOST}manage/goods-buy`)
+        },
       }, () => '查看详情'),
-    });
+    })
     trySendNotification({
-      title: "礼物兑换",
+      title: '礼物兑换',
       body: `${order.customer.name} 兑换了你的 [${goods.name}]，数量: ${order.count}，总价: ${order.point} 元`,
       extra: { type: 'goods-buy' },
-    });
+    })
   }
 }
 
 // 私信发送失败通知
 export function onSendPrivateMessageFailed(receiverId: number, message: string, error: any) {
-  const setting = useSettings();
-  if (setting.settings.notificationSettings.enableTypes.includes("message-failed")) {
-    const errorMsg = error instanceof Error ? error.message : String(error);
+  const setting = useSettings()
+  if (setting.settings.notificationSettings.enableTypes.includes('message-failed')) {
+    const errorMsg = error instanceof Error ? error.message : String(error)
     window.$notification.error({
-      title: "私信发送失败",
+      title: '私信发送失败',
       description: `向用户 ${receiverId} 发送私信失败: ${errorMsg}`,
       duration: 8000,
-    });
+    })
     trySendNotification({
-      title: "私信发送失败",
+      title: '私信发送失败',
       body: `向用户 ${receiverId} 发送私信失败`,
       extra: { type: 'message-failed' },
-    });
+    })
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/data/utils.ts b/src/client/data/utils.ts
index d3f6081..636d91b 100644
--- a/src/client/data/utils.ts
+++ b/src/client/data/utils.ts
@@ -1,90 +1,91 @@
-import { fetch } from '@tauri-apps/plugin-http';
-import { useBiliCookie } from '../store/useBiliCookie';
-import { QueryPostAPI } from '@/api/query';
-import { OPEN_LIVE_API_URL } from '@/data/constants';
-import { error } from '@tauri-apps/plugin-log';
-import { useBiliFunction } from '../store/useBiliFunction';
+import { fetch } from '@tauri-apps/plugin-http'
+import { error } from '@tauri-apps/plugin-log'
+import { QueryPostAPI } from '@/api/query'
+import { OPEN_LIVE_API_URL } from '@/data/constants'
+import { useBiliCookie } from '../store/useBiliCookie'
+import { useBiliFunction } from '../store/useBiliFunction'
 
 export async function QueryBiliAPI(url: string, method: string = 'GET', cookie: string = '', useCookie: boolean = true) {
-  const u = new URL(url);
-  console.log(`调用bilibili api: ${url}`);
+  const u = new URL(url)
+  console.log(`调用bilibili api: ${url}`)
   const userAgents = [
     'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
     'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0',
     'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15',
-    'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
-  ];
-  const randomUserAgent = userAgents[Math.floor(Math.random() * userAgents.length)];
+    'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+  ]
+  const randomUserAgent = userAgents[Math.floor(Math.random() * userAgents.length)]
 
   return fetch(url, {
-    method: method,
+    method,
     headers: {
       'User-Agent': randomUserAgent,
-      Origin: 'https://www.bilibili.com',
-      Cookie: useCookie ? (cookie || (await useBiliCookie().getBiliCookie()) || '') : ''
+      'Origin': 'https://www.bilibili.com',
+      'Cookie': useCookie ? (cookie || (await useBiliCookie().getBiliCookie()) || '') : '',
     },
-  });
+  })
 }
 
 export async function getRoomKey(roomId: number, cookie: string) {
   try {
     const wbiKeys = await useBiliFunction().encWbi({
       id: roomId,
-      type: 0
-    });
+      type: 0,
+    })
     const result = await QueryBiliAPI(
-      'https://api.live.bilibili.com/xlive/web-room/v1/index/getDanmuInfo?' + wbiKeys
-    );
-    const json = await result.json();
-    if (json.code === 0) return json.data.token;
-    else {
-      error(`无法获取直播间key: ${json.message}`);
+      `https://api.live.bilibili.com/xlive/web-room/v1/index/getDanmuInfo?${wbiKeys}`,
+    )
+    const json = await result.json()
+    if (json.code === 0) {
+      return json.data.token
+    } else {
+      error(`无法获取直播间key: ${json.message}`)
     }
   } catch (err) {
-    error(`无法获取直播间key: ${err}`);
+    error(`无法获取直播间key: ${err}`)
   }
 }
 export async function getBuvid() {
   try {
-    const result = await QueryBiliAPI('https://api.bilibili.com/x/web-frontend/getbuvid');
+    const result = await QueryBiliAPI('https://api.bilibili.com/x/web-frontend/getbuvid')
     if (result.ok) {
-      const json = await result.json();
-      if (json.code === 0) return json.data.buvid;
-      else {
-        error(`无法获取buvid: ${json.message}`);
+      const json = await result.json()
+      if (json.code === 0) {
+        return json.data.buvid
+      } else {
+        error(`无法获取buvid: ${json.message}`)
       }
     } else {
-      error(`无法获取buvid: ${result.statusText}`);
+      error(`无法获取buvid: ${result.statusText}`)
     }
   } catch (err) {
-    error(`无法获取buvid: ${err}`);
+    error(`无法获取buvid: ${err}`)
   }
 }
 
 export async function getAuthInfo(): Promise<{
-  data: any;
-  message: string;
+  data: any
+  message: string
 }> {
   try {
-    const data = await QueryPostAPI<any>(OPEN_LIVE_API_URL + 'start');
+    const data = await QueryPostAPI<any>(`${OPEN_LIVE_API_URL}start`)
     if (data.code == 200) {
-      console.log(`[open-live] 已获取认证信息`);
+      console.log(`[open-live] 已获取认证信息`)
       return {
         data: data.data,
         message: '',
-      };
+      }
     } else {
       return {
         data: null,
         message: data.message,
-      };
+      }
     }
   } catch (err) {
     return {
       data: null,
       message: err?.toString() || '未知错误',
-    };
+    }
   }
 }
-
diff --git a/src/client/store/autoAction/actionUtils.ts b/src/client/store/autoAction/actionUtils.ts
index c66555c..e46c5dd 100644
--- a/src/client/store/autoAction/actionUtils.ts
+++ b/src/client/store/autoAction/actionUtils.ts
@@ -1,17 +1,18 @@
-import { Ref } from 'vue';
-import { EventModel } from '@/api/api-models';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
-  TriggerType,
+  ExecutionContext,
   RuntimeState,
+  TriggerType,
+} from './types'
+import type { EventModel } from '@/api/api-models'
+import { useBiliCookie } from '../useBiliCookie'
+import { evaluateTemplateExpressions } from './expressionEvaluator'
+import {
   ActionType,
-  ExecutionContext
-} from './types';
-import { buildExecutionContext, getRandomTemplate } from './utils';
-import { evaluateTemplateExpressions } from './expressionEvaluator';
-import { evaluateExpression } from './utils';
-import { useBiliCookie } from '../useBiliCookie';
-import { logDanmakuHistory, logPrivateMsgHistory, logCommandHistory } from './utils/historyLogger';
+} from './types'
+import { buildExecutionContext, evaluateExpression, getRandomTemplate } from './utils'
+import { logCommandHistory, logDanmakuHistory, logPrivateMsgHistory } from './utils/historyLogger'
 
 /**
  * 过滤有效的自动操作项
@@ -28,44 +29,44 @@ export function filterValidActions(
   isLive: Ref<boolean>,
   isTianXuanActive?: Ref<boolean>,
   options?: {
-    actionType?: ActionType; // 特定操作类型
-    customFilter?: (action: AutoActionItem) => boolean; // 自定义过滤器
+    actionType?: ActionType // 特定操作类型
+    customFilter?: (action: AutoActionItem) => boolean // 自定义过滤器
     enabledTriggerTypes?: Ref<Record<TriggerType, boolean>> // 触发类型启用状态
-  }
+  },
 ): AutoActionItem[] {
-  return actions.filter(action => {
+  return actions.filter((action) => {
     // 基本过滤条件
     if (action.triggerType !== triggerType || !action.enabled) {
-      return false;
+      return false
     }
 
     // 检查触发类型是否启用
     if (options?.enabledTriggerTypes && !options.enabledTriggerTypes.value[triggerType]) {
-      return false;
+      return false
     }
 
     // 直播状态过滤
     if (action.triggerConfig.onlyDuringLive && !isLive.value) {
-      return false;
+      return false
     }
 
     // 天选时刻过滤
     if (isTianXuanActive && action.triggerConfig.ignoreTianXuan && isTianXuanActive.value) {
-      return false;
+      return false
     }
 
     // 操作类型过滤
     if (options?.actionType && action.actionType !== options.actionType) {
-      return false;
+      return false
     }
 
     // 自定义过滤器
     if (options?.customFilter && !options.customFilter(action)) {
-      return false;
+      return false
     }
 
-    return true;
-  });
+    return true
+  })
 }
 
 /**
@@ -76,18 +77,18 @@ export function filterValidActions(
  */
 export function checkUserFilters(action: AutoActionItem, event: EventModel): boolean {
   if (!action.triggerConfig.userFilterEnabled) {
-    return true;
+    return true
   }
 
   if (action.triggerConfig.requireMedal && !event.fans_medal_wearing_status) {
-    return false;
+    return false
   }
 
   if (action.triggerConfig.requireCaptain && !event.guard_level) {
-    return false;
+    return false
   }
 
-  return true;
+  return true
 }
 
 /**
@@ -98,14 +99,14 @@ export function checkUserFilters(action: AutoActionItem, event: EventModel): boo
  */
 export function checkCooldown(action: AutoActionItem, runtimeState: RuntimeState): boolean {
   if (action.ignoreCooldown) {
-    return true;
+    return true
   }
 
-  const now = Date.now();
-  const lastExecTime = runtimeState.lastExecutionTime[action.id] || 0;
-  const cooldownMs = (action.actionConfig.cooldownSeconds || 0) * 1000;
+  const now = Date.now()
+  const lastExecTime = runtimeState.lastExecutionTime[action.id] || 0
+  const cooldownMs = (action.actionConfig.cooldownSeconds || 0) * 1000
 
-  return now - lastExecTime >= cooldownMs;
+  return now - lastExecTime >= cooldownMs
 }
 
 /**
@@ -119,36 +120,36 @@ export function processTemplate(
   action: AutoActionItem,
   context: ExecutionContext,
   options?: {
-    useRandomTemplate?: boolean; // 是否随机选择模板，默认true
-    defaultValue?: string; // 如果模板为空或格式化失败时的默认值
-  }
+    useRandomTemplate?: boolean // 是否随机选择模板，默认true
+    defaultValue?: string // 如果模板为空或格式化失败时的默认值
+  },
 ): string | null {
   if (!action.template || action.template.trim() === '') {
-    console.warn(`跳过操作 "${action.name || '未命名'}"：未设置有效模板`);
-    return options?.defaultValue || null;
+    console.warn(`跳过操作 "${action.name || '未命名'}"：未设置有效模板`)
+    return options?.defaultValue || null
   }
 
   try {
     // 获取模板内容
-    let template: string;
+    let template: string
     if (options?.useRandomTemplate !== false) {
       // 使用随机模板 (默认行为)
-      const randomTemplate = getRandomTemplate(action.template);
+      const randomTemplate = getRandomTemplate(action.template)
       if (!randomTemplate) {
-        return options?.defaultValue || null;
+        return options?.defaultValue || null
       }
-      template = randomTemplate;
+      template = randomTemplate
     } else {
       // 使用整个模板字符串
-      template = action.template;
+      template = action.template
     }
 
     // 格式化模板
-    const formattedContent = evaluateTemplateExpressions(template, context);
-    return formattedContent;
+    const formattedContent = evaluateTemplateExpressions(template, context)
+    return formattedContent
   } catch (error) {
-    console.error(`模板处理错误 (${action.name || action.id}):`, error);
-    return options?.defaultValue || null;
+    console.error(`模板处理错误 (${action.name || action.id}):`, error)
+    return options?.defaultValue || null
   }
 }
 
@@ -157,30 +158,30 @@ async function sendAndLogDanmaku(
   sendHandler: (roomId: number, message: string) => Promise<boolean>,
   action: AutoActionItem,
   roomId: number,
-  message: string
+  message: string,
 ): Promise<boolean> {
   try {
-    const success = await sendHandler(roomId, message);
+    const success = await sendHandler(roomId, message)
     logDanmakuHistory(
       action.id,
       action.name || '未命名操作',
       message,
       roomId,
       success,
-      success ? undefined : '发送失败'
-    ).catch(err => console.error('记录弹幕历史失败:', err));
-    return success;
+      success ? undefined : '发送失败',
+    ).catch(err => console.error('记录弹幕历史失败:', err))
+    return success
   } catch (err) {
-    console.error(`[AutoAction] 发送弹幕失败 (${action.name || action.id}):`, err);
+    console.error(`[AutoAction] 发送弹幕失败 (${action.name || action.id}):`, err)
     logDanmakuHistory(
       action.id,
       action.name || '未命名操作',
       message,
       roomId,
       false,
-      err instanceof Error ? err.toString() : String(err) // 确保err是字符串
-    ).catch(e => console.error('记录弹幕历史失败:', e));
-    return false;
+      err instanceof Error ? err.toString() : String(err), // 确保err是字符串
+    ).catch(e => console.error('记录弹幕历史失败:', e))
+    return false
   }
 }
 
@@ -201,91 +202,91 @@ export function executeActions(
   roomId: number,
   runtimeState: RuntimeState,
   handlers: {
-    sendLiveDanmaku?: (roomId: number, message: string) => Promise<boolean>;
-    sendPrivateMessage?: (userId: number, message: string) => Promise<boolean>;
+    sendLiveDanmaku?: (roomId: number, message: string) => Promise<boolean>
+    sendPrivateMessage?: (userId: number, message: string) => Promise<boolean>
     // 可以扩展其他类型的发送处理器
   },
   options?: {
-    customContextBuilder?: (event: EventModel | null, roomId: number, triggerType: TriggerType) => ExecutionContext;
-    customFilters?: Array<(action: AutoActionItem, context: ExecutionContext) => boolean>;
-    skipUserFilters?: boolean;
-    skipCooldownCheck?: boolean;
-    onSuccess?: (action: AutoActionItem, context: ExecutionContext) => void;
-  }
+    customContextBuilder?: (event: EventModel | null, roomId: number, triggerType: TriggerType) => ExecutionContext
+    customFilters?: Array<(action: AutoActionItem, context: ExecutionContext) => boolean>
+    skipUserFilters?: boolean
+    skipCooldownCheck?: boolean
+    onSuccess?: (action: AutoActionItem, context: ExecutionContext) => void
+  },
 ) {
-  if (!roomId || actions.length === 0) return;
+  if (!roomId || actions.length === 0) return
   const biliCookie = useBiliCookie()
   // 对每个操作进行处理
   for (const action of actions) {
     // 构建执行上下文
     const context = options?.customContextBuilder
       ? options.customContextBuilder(event, roomId, triggerType)
-      : buildExecutionContext(event, roomId, triggerType);
+      : buildExecutionContext(event, roomId, triggerType)
 
     // 应用自定义过滤器
     if (options?.customFilters) {
-      const passesAllFilters = options.customFilters.every(filter => filter(action, context));
-      if (!passesAllFilters) continue;
+      const passesAllFilters = options.customFilters.every(filter => filter(action, context))
+      if (!passesAllFilters) continue
     }
 
     // 检查用户过滤条件
     if (!options?.skipUserFilters && event && !checkUserFilters(action, event)) {
-      continue;
+      continue
     }
 
     // 检查逻辑表达式
     if (action.logicalExpression && event) {
       if (!evaluateExpression(action.logicalExpression, context)) {
-        continue;
+        continue
       }
     }
 
     // 检查冷却时间
     if (!options?.skipCooldownCheck && !checkCooldown(action, runtimeState)) {
-      continue;
+      continue
     }
 
     // 根据操作类型执行不同的处理逻辑
     switch (action.actionType) {
       case ActionType.SEND_DANMAKU:
         if (!biliCookie.isCookieValid) {
-          continue; // 如果未登录，则跳过
+          continue // 如果未登录，则跳过
         }
         if (handlers.sendLiveDanmaku) {
           // 处理弹幕发送
-          const message = processTemplate(action, context);
+          const message = processTemplate(action, context)
           if (message) {
             // 更新冷却时间
-            runtimeState.lastExecutionTime[action.id] = Date.now();
+            runtimeState.lastExecutionTime[action.id] = Date.now()
 
-            const sendAction = () => sendAndLogDanmaku(handlers.sendLiveDanmaku!, action, roomId, message);
+            const sendAction = async () => sendAndLogDanmaku(handlers.sendLiveDanmaku!, action, roomId, message)
 
             // 延迟发送
             if (action.actionConfig.delaySeconds && action.actionConfig.delaySeconds > 0) {
-              setTimeout(sendAction, action.actionConfig.delaySeconds * 1000);
+              setTimeout(sendAction, action.actionConfig.delaySeconds * 1000)
             } else {
-              sendAction();
+              sendAction()
             }
           }
         } else {
-          console.warn(`[AutoAction] 未提供弹幕发送处理器，无法执行操作: ${action.name || action.id}`);
+          console.warn(`[AutoAction] 未提供弹幕发送处理器，无法执行操作: ${action.name || action.id}`)
         }
-        break;
+        break
 
       case ActionType.SEND_PRIVATE_MSG:
         if (!biliCookie.isCookieValid) {
-          continue; // 如果未登录，则跳过
+          continue // 如果未登录，则跳过
         }
         if (handlers.sendPrivateMessage && event && event.uid) {
           // 处理私信发送
-          const message = processTemplate(action, context);
+          const message = processTemplate(action, context)
           if (message) {
             // 更新冷却时间（私信也可以有冷却时间）
-            runtimeState.lastExecutionTime[action.id] = Date.now();
+            runtimeState.lastExecutionTime[action.id] = Date.now()
 
-            const sendPmPromise = (uid: number, msg: string) => {
+            const sendPmPromise = async (uid: number, msg: string) => {
               return handlers.sendPrivateMessage!(uid, msg)
-                .then(success => {
+                .then((success) => {
                   // 记录私信发送历史
                   logPrivateMsgHistory(
                     action.id,
@@ -293,17 +294,17 @@ export function executeActions(
                     msg,
                     uid,
                     success,
-                    success ? undefined : '发送失败'
-                  ).catch(err => console.error('记录私信历史失败:', err));
+                    success ? undefined : '发送失败',
+                  ).catch(err => console.error('记录私信历史失败:', err))
 
                   if (success && options?.onSuccess) {
                     // 发送成功后调用 onSuccess 回调
-                    options.onSuccess(action, context);
+                    options.onSuccess(action, context)
                   }
-                  return success;
+                  return success
                 })
-                .catch(err => {
-                  console.error(`[AutoAction] 发送私信失败 (${action.name || action.id}):`, err);
+                .catch((err) => {
+                  console.error(`[AutoAction] 发送私信失败 (${action.name || action.id}):`, err)
                   // 记录失败的发送
                   logPrivateMsgHistory(
                     action.id,
@@ -311,47 +312,47 @@ export function executeActions(
                     msg,
                     uid,
                     false,
-                    err instanceof Error ? err.toString() : String(err) // 确保err是字符串
-                  ).catch(e => console.error('记录私信历史失败:', e));
-                  return false; // 明确返回 false 表示失败
-                });
-            };
+                    err instanceof Error ? err.toString() : String(err), // 确保err是字符串
+                  ).catch(e => console.error('记录私信历史失败:', e))
+                  return false // 明确返回 false 表示失败
+                })
+            }
 
             // 私信通常不需要延迟，但我们也可以支持
             if (action.actionConfig.delaySeconds && action.actionConfig.delaySeconds > 0) {
               setTimeout(() => {
-                sendPmPromise(event.uid, message);
-              }, action.actionConfig.delaySeconds * 1000);
+                sendPmPromise(event.uid, message)
+              }, action.actionConfig.delaySeconds * 1000)
             } else {
-              sendPmPromise(event.uid, message);
+              sendPmPromise(event.uid, message)
             }
           }
         } else {
-          console.warn(`[AutoAction] 未提供私信发送处理器或事件缺少UID，无法执行操作: ${action.name || action.id}`);
+          console.warn(`[AutoAction] 未提供私信发送处理器或事件缺少UID，无法执行操作: ${action.name || action.id}`)
         }
-        break;
+        break
 
       case ActionType.EXECUTE_COMMAND:
         // 执行自定义命令
-        const command = processTemplate(action, context);
+        const command = processTemplate(action, context)
         if (command) {
           // 更新冷却时间
-          runtimeState.lastExecutionTime[action.id] = Date.now();
+          runtimeState.lastExecutionTime[action.id] = Date.now()
 
           // 目前只记录执行历史，具体实现可在未来扩展
           logCommandHistory(
             action.id,
             action.name || '未命名操作',
             command,
-            true
-          ).catch(err => console.error('记录命令执行历史失败:', err));
+            true,
+          ).catch(err => console.error('记录命令执行历史失败:', err))
 
-          console.warn(`[AutoAction] 暂不支持执行自定义命令: ${action.name || action.id}`);
+          console.warn(`[AutoAction] 暂不支持执行自定义命令: ${action.name || action.id}`)
         }
-        break;
+        break
 
       default:
-        console.warn(`[AutoAction] 未知的操作类型: ${action.actionType}`);
+        console.warn(`[AutoAction] 未知的操作类型: ${action.actionType}`)
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/client/store/autoAction/expressionEvaluator.ts b/src/client/store/autoAction/expressionEvaluator.ts
index 288dd45..46ff718 100644
--- a/src/client/store/autoAction/expressionEvaluator.ts
+++ b/src/client/store/autoAction/expressionEvaluator.ts
@@ -3,13 +3,13 @@
  */
 
 // 导入ExecutionContext类型
-import { ExecutionContext } from './types';
+import type { ExecutionContext } from './types'
 
 // 表达式模式匹配
 // {{js: expression}} - 简单的JavaScript表达式 (隐式return)
 // {{js+: code block}} - JavaScript代码块 (需要显式return)
 // {{js-run: code block}} - JavaScript代码块 (需要显式return)
-export const JS_EXPRESSION_REGEX = /\{\{\s*(js(?:\+|\-run)?):\s*(.*?)\s*\}\}/gs; // 使用 s 标志允许多行匹配
+export const JS_EXPRESSION_REGEX = /\{\{\s*(js(?:\+|-run)?):\s*(.*?)\s*\}\}/gs // 使用 s 标志允许多行匹配
 
 /**
  * 处理模板中的表达式
@@ -20,14 +20,14 @@ export const JS_EXPRESSION_REGEX = /\{\{\s*(js(?:\+|\-run)?):\s*(.*?)\s*\}\}/gs;
 export function evaluateTemplateExpressions(template: string, context: ExecutionContext): string {
   // 增加严格的类型检查
   if (typeof template !== 'string') {
-    console.error('[evaluateTemplateExpressions] Error: Expected template to be a string, but received:', typeof template, template);
-    return ""; // 或者抛出错误，或者返回一个默认值
+    console.error('[evaluateTemplateExpressions] Error: Expected template to be a string, but received:', typeof template, template)
+    return '' // 或者抛出错误，或者返回一个默认值
   }
 
-  if (!template) return "";
+  if (!template) return ''
 
   // 获取基础变量和数据管理函数
-  const variables = context.variables;
+  const variables = context.variables
   const dataFunctions = {
     getData: context.getData,
     setData: context.setData,
@@ -38,72 +38,71 @@ export function evaluateTemplateExpressions(template: string, context: Execution
     hasStorageData: context.hasStorageData,
     removeStorageData: context.removeStorageData,
     clearStorageData: context.clearStorageData,
-  };
+  }
 
   // 合并基础变量和数据管理函数的作用域
-  const scopeVariables = { ...variables, ...dataFunctions };
-  const scopeKeys = Object.keys(scopeVariables);
-  const scopeValues = Object.values(scopeVariables);
+  const scopeVariables = { ...variables, ...dataFunctions }
+  const scopeKeys = Object.keys(scopeVariables)
+  const scopeValues = Object.values(scopeVariables)
 
   // 第一步：处理简单的文本替换 {{variable.path}}
-  let result = template.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
+  const result = template.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
     if (path.trim().startsWith('js:') || path.trim().startsWith('js+:') || path.trim().startsWith('js-run:')) {
-      return match; // 跳过所有JS变体，留给下一步
+      return match // 跳过所有JS变体，留给下一步
     }
 
     try {
       // 解析路径
-      const parts = path.trim().split('.');
-      let value: any = scopeVariables;
+      const parts = path.trim().split('.')
+      let value: any = scopeVariables
 
       // 递归获取嵌套属性
       for (const part of parts) {
-        if (value === undefined || value === null) return match;
+        if (value === undefined || value === null) return match
         if (dataFunctions.hasOwnProperty(part) && parts.length === 1) {
-          value = value[part]; // 不要调用顶层函数
+          value = value[part] // 不要调用顶层函数
         } else if (typeof value[part] === 'function') {
-          value = value[part]();
+          value = value[part]()
         } else {
-          value = value[part];
+          value = value[part]
         }
-        if (typeof value === 'function' && !dataFunctions.hasOwnProperty(part)) value = value();
+        if (typeof value === 'function' && !dataFunctions.hasOwnProperty(part)) value = value()
       }
 
-      return value !== undefined && value !== null ? String(value) : match;
+      return value !== undefined && value !== null ? String(value) : match
     } catch (error) {
-      console.error('模板格式化错误:', error);
-      return match; // 出错时返回原始匹配项
+      console.error('模板格式化错误:', error)
+      return match // 出错时返回原始匹配项
     }
-  });
+  })
 
   // 第二步：处理 JS 表达式和代码块 {{js: ...}}, {{js+: ...}}, {{js-run: ...}}
   return result.replace(JS_EXPRESSION_REGEX, (match, type, code) => {
     try {
-      let functionBody: string;
+      let functionBody: string
 
       if (type === 'js') {
         // 简单表达式: 隐式 return
-        functionBody = `try { return (${code}); } catch (e) { console.error("表达式[js:]执行错误:", e, "代码:", ${JSON.stringify(code)}); return \"[表达式错误: \" + e.message + \"]\"; }`;
+        functionBody = `try { return (${code}); } catch (e) { console.error("表达式[js:]执行错误:", e, "代码:", ${JSON.stringify(code)}); return "[表达式错误: " + e.message + "]"; }`
       } else { // js+ 或 js-run
         // 代码块: 需要显式 return
-        functionBody = `try { ${code} } catch (e) { console.error("代码块[js+/js-run:]执行错误:", e, "代码:", ${JSON.stringify(code)}); return \"[代码块错误: \" + e.message + \"]\"; }`;
+        functionBody = `try { ${code} } catch (e) { console.error("代码块[js+/js-run:]执行错误:", e, "代码:", ${JSON.stringify(code)}); return "[代码块错误: " + e.message + "]"; }`
       }
 
-      const evalInContext = new Function(...scopeKeys, functionBody);
+      const evalInContext = new Function(...scopeKeys, functionBody)
 
-      const evalResult = evalInContext(...scopeValues);
+      const evalResult = evalInContext(...scopeValues)
 
       // 对结果进行处理，将 undefined/null 转换为空字符串，除非是错误消息
       return typeof evalResult === 'string' && (evalResult.startsWith('[表达式错误:') || evalResult.startsWith('[代码块错误:'))
         ? evalResult
-        : String(evalResult ?? '');
-
+        : String(evalResult ?? '')
     } catch (error) {
       // 捕获 Function 构造或顶层执行错误
-      console.error("JS占位符处理错误:", error, "类型:", type, "代码:", code);
-      return `[处理错误: ${(error as Error).message}]`;
+      console.error('JS占位符处理错误:', error, '类型:', type, '代码:', code)
+      return `[处理错误: ${(error as Error).message}]`
     }
-  });
+  })
 }
 
 /**
@@ -112,7 +111,7 @@ export function evaluateTemplateExpressions(template: string, context: Execution
  * @returns 是否包含表达式
  */
 export function containsJsExpression(template: string): boolean {
-  return JS_EXPRESSION_REGEX.test(template);
+  return JS_EXPRESSION_REGEX.test(template)
 }
 
 /**
@@ -121,7 +120,7 @@ export function containsJsExpression(template: string): boolean {
  * @returns 转义后的字符串
  */
 export function escapeRegExp(string: string): string {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
 /**
@@ -132,16 +131,16 @@ export function escapeRegExp(string: string): string {
  * @returns 转换后的模板
  */
 export function convertToJsExpressions(template: string, placeholders: { name: string, description: string }[]): string {
-  let result = template;
+  let result = template
 
-  placeholders.forEach(p => {
-    const placeholder = p.name;
-    const path = placeholder.replace(/\{\{|\}\}/g, '').trim();
-    const regex = new RegExp(escapeRegExp(placeholder), 'g');
-    result = result.replace(regex, `{{js: ${path}}}`);
-  });
+  placeholders.forEach((p) => {
+    const placeholder = p.name
+    const path = placeholder.replace(/\{\{|\}\}/g, '').trim()
+    const regex = new RegExp(escapeRegExp(placeholder), 'g')
+    result = result.replace(regex, `{{js: ${path}}}`)
+  })
 
-  return result;
+  return result
 }
 
 /**
@@ -153,11 +152,11 @@ export function convertToJsExpressions(template: string, placeholders: { name: s
  */
 export function extractJsExpressions(template: string): string[] {
   if (!template) {
-    return [];
+    return []
   }
   // 使用全局匹配来查找所有出现
-  const matches = template.match(JS_EXPRESSION_REGEX);
-  return matches || []; // match 返回 null 或字符串数组
+  const matches = template.match(JS_EXPRESSION_REGEX)
+  return matches || [] // match 返回 null 或字符串数组
 }
 
 /**
@@ -166,8 +165,7 @@ export function extractJsExpressions(template: string): string[] {
  * @param gift 礼物信息
  * @returns 上下文对象
  */
-export function createGiftThankContext(user: { uid: number; name: string },
-  gift: { name: string; count: number; price: number }): Record<string, any> {
+export function createGiftThankContext(user: { uid: number, name: string }, gift: { name: string, count: number, price: number }): Record<string, any> {
   return {
     user: {
       uid: user.uid,
@@ -182,7 +180,7 @@ export function createGiftThankContext(user: { uid: number; name: string },
       totalPrice: gift.count * gift.price,
       // 工具方法
       summary: `${gift.count}个${gift.name}`,
-      isExpensive: gift.price >= 50
+      isExpensive: gift.price >= 50,
     },
     // 工具函数
     format: {
@@ -193,7 +191,7 @@ export function createGiftThankContext(user: { uid: number; name: string },
     date: {
       now: new Date(),
       timestamp: Date.now(),
-      formatted: new Intl.DateTimeFormat('zh-CN').format(new Date())
-    }
-  };
-}
\ No newline at end of file
+      formatted: new Intl.DateTimeFormat('zh-CN').format(new Date()),
+    },
+  }
+}
diff --git a/src/client/store/autoAction/modules/autoReply.ts b/src/client/store/autoAction/modules/autoReply.ts
index d14aabe..6f76422 100644
--- a/src/client/store/autoAction/modules/autoReply.ts
+++ b/src/client/store/autoAction/modules/autoReply.ts
@@ -1,18 +1,21 @@
-import { ref, Ref } from 'vue';
-import { EventModel } from '@/api/api-models';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
-  TriggerType,
   RuntimeState,
-  KeywordMatchType
-} from '../types';
-import {
-  buildExecutionContext
-} from '../utils';
+} from '../types'
+import type { EventModel } from '@/api/api-models'
+import { ref } from 'vue'
 import {
+  executeActions,
   filterValidActions,
-  executeActions
-} from '../actionUtils';
+} from '../actionUtils'
+import {
+  KeywordMatchType,
+  TriggerType,
+} from '../types'
+import {
+  buildExecutionContext,
+} from '../utils'
 
 /**
  * 自动回复模块
@@ -23,10 +26,10 @@ import {
 export function useAutoReply(
   isLive: Ref<boolean>,
   roomId: Ref<number | undefined>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
   // 运行时数据 - 记录特定关键词的最后回复时间
-  const lastReplyTimestamps = ref<{ [keyword: string]: number; }>({});
+  const lastReplyTimestamps = ref<{ [keyword: string]: number }>({})
 
   /**
    * 检查关键词匹配
@@ -38,19 +41,19 @@ export function useAutoReply(
   function isKeywordMatch(text: string, keyword: string, matchType: KeywordMatchType = KeywordMatchType.Contains): boolean {
     switch (matchType) {
       case KeywordMatchType.Full:
-        return text === keyword;
+        return text === keyword
       case KeywordMatchType.Contains:
-        return text.includes(keyword);
+        return text.includes(keyword)
       case KeywordMatchType.Regex:
         try {
-          const regex = new RegExp(keyword);
-          return regex.test(text);
+          const regex = new RegExp(keyword)
+          return regex.test(text)
         } catch (e) {
-          console.warn('无效的正则表达式:', keyword, e);
-          return false;
+          console.warn('无效的正则表达式:', keyword, e)
+          return false
         }
       default:
-        return text.includes(keyword); // 默认使用包含匹配
+        return text.includes(keyword) // 默认使用包含匹配
     }
   }
 
@@ -63,15 +66,15 @@ export function useAutoReply(
   function onDanmaku(
     event: EventModel,
     actions: AutoActionItem[],
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤有效的自动回复操作
-    const replyActions = filterValidActions(actions, TriggerType.DANMAKU, isLive);
+    const replyActions = filterValidActions(actions, TriggerType.DANMAKU, isLive)
 
     if (replyActions.length > 0 && roomId.value) {
-      const message = event.msg;
+      const message = event.msg
 
       executeActions(
         replyActions,
@@ -84,56 +87,56 @@ export function useAutoReply(
           customFilters: [
             // 关键词和屏蔽词检查
             (action, context) => {
-              const keywordMatchType = action.triggerConfig.keywordMatchType || KeywordMatchType.Contains;
+              const keywordMatchType = action.triggerConfig.keywordMatchType || KeywordMatchType.Contains
               const keywordMatch = action.triggerConfig.keywords?.some(kw =>
-                isKeywordMatch(message, kw, keywordMatchType)
-              );
-              if (!keywordMatch) return false;
+                isKeywordMatch(message, kw, keywordMatchType),
+              )
+              if (!keywordMatch) return false
 
-              const blockwordMatchType = action.triggerConfig.blockwordMatchType || KeywordMatchType.Contains;
+              const blockwordMatchType = action.triggerConfig.blockwordMatchType || KeywordMatchType.Contains
               const blockwordMatch = action.triggerConfig.blockwords?.some(bw =>
-                isKeywordMatch(message, bw, blockwordMatchType)
-              );
-              return !blockwordMatch; // 如果匹配屏蔽词返回false，否则返回true
-            }
+                isKeywordMatch(message, bw, blockwordMatchType),
+              )
+              return !blockwordMatch // 如果匹配屏蔽词返回false，否则返回true
+            },
           ],
           // 附加选项：只处理第一个匹配的自动回复
           customContextBuilder: (event, roomId, triggerType) => {
-            const now = Date.now();
-            const context = buildExecutionContext(event, roomId, triggerType);
+            const now = Date.now()
+            const context = buildExecutionContext(event, roomId, triggerType)
 
             // 添加时间段判断变量
             context.variables.timeOfDay = () => {
-              const hour = new Date().getHours();
-              if (hour < 6) return '凌晨';
-              if (hour < 9) return '早上';
-              if (hour < 12) return '上午';
-              if (hour < 14) return '中午';
-              if (hour < 18) return '下午';
-              if (hour < 22) return '晚上';
-              return '深夜';
-            };
+              const hour = new Date().getHours()
+              if (hour < 6) return '凌晨'
+              if (hour < 9) return '早上'
+              if (hour < 12) return '上午'
+              if (hour < 14) return '中午'
+              if (hour < 18) return '下午'
+              if (hour < 22) return '晚上'
+              return '深夜'
+            }
 
-            return context;
-          }
-        }
-      );
+            return context
+          },
+        },
+      )
     }
   }
 
   // 重置冷却时间 (用于测试)
   function resetCooldowns(runtimeState: RuntimeState, actionId?: string) {
     if (actionId) {
-      delete runtimeState.lastExecutionTime[actionId];
+      delete runtimeState.lastExecutionTime[actionId]
     } else {
-      Object.keys(runtimeState.lastExecutionTime).forEach(id => {
-        delete runtimeState.lastExecutionTime[id];
-      });
+      Object.keys(runtimeState.lastExecutionTime).forEach((id) => {
+        delete runtimeState.lastExecutionTime[id]
+      })
     }
   }
 
   return {
     onDanmaku,
-    resetCooldowns
-  };
-}
\ No newline at end of file
+    resetCooldowns,
+  }
+}
diff --git a/src/client/store/autoAction/modules/checkin.ts b/src/client/store/autoAction/modules/checkin.ts
index 60d6397..18525eb 100644
--- a/src/client/store/autoAction/modules/checkin.ts
+++ b/src/client/store/autoAction/modules/checkin.ts
@@ -1,38 +1,40 @@
-import { CheckInResult, EventDataTypes, EventModel } from '@/api/api-models';
-import { QueryGetAPI } from '@/api/query';
-import { CHECKIN_API_URL } from '@/data/constants';
-import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval';
-import { v4 as uuidv4 } from 'uuid';
-import { Ref } from 'vue';
-import { executeActions } from '../actionUtils';
-import { ActionType, AutoActionItem, KeywordMatchType, Priority, RuntimeState, TriggerType } from '../types';
-import { buildExecutionContext, createDefaultAutoAction } from '../utils';
-import { useAccount } from '@/api/account';
+import type { Ref } from 'vue'
+import type { AutoActionItem, RuntimeState } from '../types'
+import type { CheckInResult, EventModel } from '@/api/api-models'
+import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
+import { v4 as uuidv4 } from 'uuid'
+import { useAccount } from '@/api/account'
+import { EventDataTypes } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { CHECKIN_API_URL } from '@/data/constants'
+import { executeActions } from '../actionUtils'
+import { ActionType, KeywordMatchType, Priority, TriggerType } from '../types'
+import { buildExecutionContext, createDefaultAutoAction } from '../utils'
 
 // 签到配置接口
 export interface CheckInConfig {
-  sendReply: boolean; // 是否发送签到回复消息
-  successAction: AutoActionItem;  // 使用 AutoActionItem 替代字符串
-  cooldownAction: AutoActionItem; // 使用 AutoActionItem 替代字符串
+  sendReply: boolean // 是否发送签到回复消息
+  successAction: AutoActionItem // 使用 AutoActionItem 替代字符串
+  cooldownAction: AutoActionItem // 使用 AutoActionItem 替代字符串
   earlyBird: {
-    enabled: boolean;
-    successAction: AutoActionItem; // 使用 AutoActionItem 替代字符串
-  };
+    enabled: boolean
+    successAction: AutoActionItem // 使用 AutoActionItem 替代字符串
+  }
 }
 
 // 创建默认配置
 function createDefaultCheckInConfig(): CheckInConfig {
-  const successAction = createDefaultAutoAction(TriggerType.DANMAKU);
-  successAction.name = '签到成功回复';
-  successAction.template = '@{{user.name}} 签到成功，获得 {{checkin.points}} 积分，连续签到 {{checkin.consecutiveDays}} 天';
+  const successAction = createDefaultAutoAction(TriggerType.DANMAKU)
+  successAction.name = '签到成功回复'
+  successAction.template = '@{{user.name}} 签到成功，获得 {{checkin.points}} 积分，连续签到 {{checkin.consecutiveDays}} 天'
 
-  const cooldownAction = createDefaultAutoAction(TriggerType.DANMAKU);
-  cooldownAction.name = '签到冷却回复';
-  cooldownAction.template = '{{user.name}} 你今天已经签到过了，明天再来吧~';
+  const cooldownAction = createDefaultAutoAction(TriggerType.DANMAKU)
+  cooldownAction.name = '签到冷却回复'
+  cooldownAction.template = '{{user.name}} 你今天已经签到过了，明天再来吧~'
 
-  const earlyBirdAction = createDefaultAutoAction(TriggerType.DANMAKU);
-  earlyBirdAction.name = '早鸟签到回复';
-  earlyBirdAction.template = '恭喜 {{user.name}} 完成早鸟签到！获得 {{checkin.points}} 积分，连续签到 {{checkin.consecutiveDays}} 天！';
+  const earlyBirdAction = createDefaultAutoAction(TriggerType.DANMAKU)
+  earlyBirdAction.name = '早鸟签到回复'
+  earlyBirdAction.template = '恭喜 {{user.name}} 完成早鸟签到！获得 {{checkin.points}} 积分，连续签到 {{checkin.consecutiveDays}} 天！'
 
   return {
     sendReply: true, // 默认发送回复消息
@@ -40,9 +42,9 @@ function createDefaultCheckInConfig(): CheckInConfig {
     cooldownAction,
     earlyBird: {
       enabled: false,
-      successAction: earlyBirdAction
-    }
-  };
+      successAction: earlyBirdAction,
+    },
+  }
 }
 
 /**
@@ -53,7 +55,7 @@ export function useCheckIn(
   roomId: Ref<number | undefined>,
   liveStartTime: Ref<number | null>,
   isTianXuanActive: Ref<boolean>,
-  sendDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
   // 使用 IndexedDB 持久化存储签到配置
   const { data: checkInConfig, isFinished: isConfigLoaded } = useIDBKeyval<CheckInConfig>(
@@ -61,59 +63,61 @@ export function useCheckIn(
     createDefaultCheckInConfig(),
     {
       onError: (err) => {
-        console.error('[CheckIn] IDB 错误 (配置):', err);
-      }
-    }
-  );
-  const accountInfo = useAccount();
+        console.error('[CheckIn] IDB 错误 (配置):', err)
+      },
+    },
+  )
+  const accountInfo = useAccount()
 
   // 处理签到弹幕 - 调用服务端API
   async function processCheckIn(
     event: EventModel,
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
     // 确保配置已加载
     if (!isConfigLoaded.value) {
-      console.log('[CheckIn] 配置尚未加载完成，跳过处理');
-      return;
+      console.log('[CheckIn] 配置尚未加载完成，跳过处理')
+      return
     }
 
     if (!accountInfo.value.settings.point.enableCheckIn) {
-      return;
+      return
     }
 
     // 跳过非弹幕事件
     if (event.type !== EventDataTypes.Message) {
-      return;
+      return
     }
 
     // 检查弹幕内容是否匹配签到指令
     if (event.msg?.trim() !== accountInfo.value.settings.point.checkInKeyword.trim()) {
-      return;
+      return
     }
 
-    const username = event.uname || event.uid || event.open_id || '用户';
+    const username = event.uname || event.uid || event.open_id || '用户'
 
     try {
       // 调用服务端API进行签到
-      const apiUrl = `${CHECKIN_API_URL}check-in-for`;
+      const apiUrl = `${CHECKIN_API_URL}check-in-for`
 
       // 使用query.ts中的QueryGetAPI替代fetch
-      const response = await QueryGetAPI<CheckInResult>(apiUrl, event.uid ? {
-        uid: event.uid,
-        name: username
-      } : {
-        oId: event.ouid,
-        name: username
-      });
+      const response = await QueryGetAPI<CheckInResult>(apiUrl, event.uid
+        ? {
+            uid: event.uid,
+            name: username,
+          }
+        : {
+            oId: event.ouid,
+            name: username,
+          })
 
-      const checkInResult = response.data;
+      const checkInResult = response.data
 
       if (checkInResult) {
         if (checkInResult.success) {
           // 签到成功
           if (roomId.value && checkInConfig.value.sendReply) {
-            const isEarlyBird = liveStartTime.value && (Date.now() - liveStartTime.value < 30 * 60 * 1000);
+            const isEarlyBird = liveStartTime.value && (Date.now() - liveStartTime.value < 30 * 60 * 1000)
 
             // 构建签到数据上下文
             const checkInData = {
@@ -121,15 +125,15 @@ export function useCheckIn(
                 points: checkInResult.points,
                 consecutiveDays: checkInResult.consecutiveDays,
                 todayRank: checkInResult.todayRank,
-                time: new Date()
-              }
-            };
+                time: new Date(),
+              },
+            }
 
             // 执行回复动作
-            const successContext = buildExecutionContext(event, roomId.value, TriggerType.DANMAKU, checkInData);
+            const successContext = buildExecutionContext(event, roomId.value, TriggerType.DANMAKU, checkInData)
             const action = isEarlyBird && checkInConfig.value.earlyBird.enabled
               ? checkInConfig.value.earlyBird.successAction
-              : checkInConfig.value.successAction;
+              : checkInConfig.value.successAction
 
             executeActions(
               [action],
@@ -139,21 +143,21 @@ export function useCheckIn(
               runtimeState,
               { sendLiveDanmaku: sendDanmaku },
               {
-                customContextBuilder: () => successContext
-              }
-            );
+                customContextBuilder: () => successContext,
+              },
+            )
           }
 
           // 显示签到成功通知
           window.$notification.success({
             title: '签到成功',
             description: `${username} 完成签到, 获得 ${checkInResult.points} 积分, 连续签到 ${checkInResult.consecutiveDays} 天`,
-            duration: 5000
-          });
+            duration: 5000,
+          })
         } else {
           // 签到失败 - 今天已经签到过
           if (roomId.value && checkInConfig.value.sendReply) {
-            const cooldownContext = buildExecutionContext(event, roomId.value, TriggerType.DANMAKU);
+            const cooldownContext = buildExecutionContext(event, roomId.value, TriggerType.DANMAKU)
 
             executeActions(
               [checkInConfig.value.cooldownAction],
@@ -163,33 +167,33 @@ export function useCheckIn(
               runtimeState,
               { sendLiveDanmaku: sendDanmaku },
               {
-                customContextBuilder: () => cooldownContext
-              }
-            );
+                customContextBuilder: () => cooldownContext,
+              },
+            )
           }
 
           // 显示签到失败通知
           window.$notification.info({
             title: '签到提示',
             description: checkInResult.message || `${username} 重复签到, 已忽略`,
-            duration: 5000
-          });
+            duration: 5000,
+          })
         }
       }
     } catch (error) {
-      console.error('[CheckIn] 处理签到失败:', error);
+      console.error('[CheckIn] 处理签到失败:', error)
       window.$notification.error({
         title: '签到错误',
         description: `签到请求失败：${error instanceof Error ? error.message : String(error)}`,
-        duration: 5000
-      });
+        duration: 5000,
+      })
     }
   }
 
   return {
     checkInConfig,
-    processCheckIn
-  };
+    processCheckIn,
+  }
 }
 
 /**
@@ -212,11 +216,11 @@ export function createCheckInAutoActions(): AutoActionItem[] {
       executeCommand: '',
       triggerConfig: {
         keywords: ['签到'],
-        keywordMatchType: KeywordMatchType.Full
+        keywordMatchType: KeywordMatchType.Full,
       },
       actionConfig: {
-        cooldownSeconds: 86400 // 24小时，确保每天只能签到一次
-      }
+        cooldownSeconds: 86400, // 24小时，确保每天只能签到一次
+      },
     },
     // 早鸟签到成功响应
     {
@@ -232,11 +236,11 @@ export function createCheckInAutoActions(): AutoActionItem[] {
       executeCommand: '',
       triggerConfig: {
         keywords: ['签到'],
-        keywordMatchType: KeywordMatchType.Full
+        keywordMatchType: KeywordMatchType.Full,
       },
       actionConfig: {
-        cooldownSeconds: 86400 // 24小时
-      }
+        cooldownSeconds: 86400, // 24小时
+      },
     },
     // 签到冷却期提示
     {
@@ -252,9 +256,9 @@ export function createCheckInAutoActions(): AutoActionItem[] {
       executeCommand: '',
       triggerConfig: {
         keywords: ['签到'],
-        keywordMatchType: KeywordMatchType.Full
+        keywordMatchType: KeywordMatchType.Full,
       },
-      actionConfig: {}
-    }
-  ];
-}
\ No newline at end of file
+      actionConfig: {},
+    },
+  ]
+}
diff --git a/src/client/store/autoAction/modules/entryWelcome.ts b/src/client/store/autoAction/modules/entryWelcome.ts
index 01b64a8..1f68038 100644
--- a/src/client/store/autoAction/modules/entryWelcome.ts
+++ b/src/client/store/autoAction/modules/entryWelcome.ts
@@ -1,14 +1,17 @@
-import { EventModel } from '@/api/api-models';
-import { ref, Ref } from 'vue';
-import {
-  executeActions,
-  filterValidActions
-} from '../actionUtils';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
   RuntimeState,
-  TriggerType
-} from '../types';
+} from '../types'
+import type { EventModel } from '@/api/api-models'
+import { ref } from 'vue'
+import {
+  executeActions,
+  filterValidActions,
+} from '../actionUtils'
+import {
+  TriggerType,
+} from '../types'
 
 /**
  * 入场欢迎模块
@@ -21,10 +24,10 @@ export function useEntryWelcome(
   isLive: Ref<boolean>,
   roomId: Ref<number | undefined>,
   isTianXuanActive: Ref<boolean>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
   // 运行时数据
-  const timer = ref<any | null>(null);
+  const timer = ref<any | null>(null)
 
   /**
    * 处理入场事件 - 支持新的AutoActionItem结构
@@ -35,12 +38,12 @@ export function useEntryWelcome(
   function processEnter(
     event: EventModel,
     actions: AutoActionItem[],
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤有效的入场欢迎操作
-    const enterActions = filterValidActions(actions, TriggerType.ENTER, isLive, isTianXuanActive);
+    const enterActions = filterValidActions(actions, TriggerType.ENTER, isLive, isTianXuanActive)
 
     // 使用通用执行函数处理入场事件
     if (enterActions.length > 0 && roomId.value) {
@@ -55,15 +58,15 @@ export function useEntryWelcome(
           customFilters: [
             // 检查入场过滤条件
             (action, context) => {
-              if (action.triggerConfig.filterMode === 'blacklist' &&
-                  action.triggerConfig.filterGiftNames?.includes(event.uname)) {
-                return false;
+              if (action.triggerConfig.filterMode === 'blacklist'
+                && action.triggerConfig.filterGiftNames?.includes(event.uname)) {
+                return false
               }
-              return true;
-            }
-          ]
-        }
-      );
+              return true
+            },
+          ],
+        },
+      )
     }
   }
 
@@ -72,13 +75,13 @@ export function useEntryWelcome(
    */
   function clearTimer() {
     if (timer.value) {
-      clearTimeout(timer.value);
-      timer.value = null;
+      clearTimeout(timer.value)
+      timer.value = null
     }
   }
 
   return {
     processEnter,
-    clearTimer
-  };
-}
\ No newline at end of file
+    clearTimer,
+  }
+}
diff --git a/src/client/store/autoAction/modules/followThank.ts b/src/client/store/autoAction/modules/followThank.ts
index 7bbdce0..83f8123 100644
--- a/src/client/store/autoAction/modules/followThank.ts
+++ b/src/client/store/autoAction/modules/followThank.ts
@@ -1,17 +1,18 @@
-import { ref, Ref } from 'vue';
-import { EventModel } from '@/api/api-models';
-import {
-  buildExecutionContext
-} from '../utils';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
-  TriggerType,
-  RuntimeState
-} from '../types';
+  RuntimeState,
+} from '../types'
+import type { EventModel } from '@/api/api-models'
+
+import { ref } from 'vue'
 import {
+  executeActions,
   filterValidActions,
-  executeActions
-} from '../actionUtils';
+} from '../actionUtils'
+import {
+  TriggerType,
+} from '../types'
 
 /**
  * 关注感谢模块
@@ -24,11 +25,11 @@ export function useFollowThank(
   isLive: Ref<boolean>,
   roomId: Ref<number | undefined>,
   isTianXuanActive: Ref<boolean>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
   // 运行时数据
-  const aggregatedFollows = ref<{uid: number, name: string, timestamp: number}[]>([]);
-  const timer = ref<any | null>(null);
+  const aggregatedFollows = ref<{ uid: number, name: string, timestamp: number }[]>([])
+  const timer = ref<any | null>(null)
 
   /**
    * 处理关注事件 - 支持新的AutoActionItem结构
@@ -39,12 +40,12 @@ export function useFollowThank(
   function processFollow(
     event: EventModel,
     actions: AutoActionItem[],
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤有效的关注感谢操作
-    const followActions = filterValidActions(actions, TriggerType.FOLLOW, isLive, isTianXuanActive);
+    const followActions = filterValidActions(actions, TriggerType.FOLLOW, isLive, isTianXuanActive)
 
     // 使用通用执行函数处理关注事件
     if (followActions.length > 0 && roomId.value) {
@@ -54,8 +55,8 @@ export function useFollowThank(
         TriggerType.FOLLOW,
         roomId.value,
         runtimeState,
-        { sendLiveDanmaku }
-      );
+        { sendLiveDanmaku },
+      )
     }
   }
 
@@ -64,13 +65,13 @@ export function useFollowThank(
    */
   function clearTimer() {
     if (timer.value) {
-      clearTimeout(timer.value);
-      timer.value = null;
+      clearTimeout(timer.value)
+      timer.value = null
     }
   }
 
   return {
     processFollow,
-    clearTimer
-  };
-}
\ No newline at end of file
+    clearTimer,
+  }
+}
diff --git a/src/client/store/autoAction/modules/giftThank.ts b/src/client/store/autoAction/modules/giftThank.ts
index b2e8507..4cd70ac 100644
--- a/src/client/store/autoAction/modules/giftThank.ts
+++ b/src/client/store/autoAction/modules/giftThank.ts
@@ -1,19 +1,17 @@
-import { ref, Ref } from 'vue';
-import { EventModel, EventDataTypes } from '@/api/api-models';
-import {
-  getRandomTemplate,
-  buildExecutionContext
-} from '../utils';
-import { evaluateTemplateExpressions } from '../expressionEvaluator';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
-  TriggerType,
-  RuntimeState
-} from '../types';
+  RuntimeState,
+} from '../types'
+import type { EventModel } from '@/api/api-models'
+
 import {
+  executeActions,
   filterValidActions,
-  executeActions
-} from '../actionUtils';
+} from '../actionUtils'
+import {
+  TriggerType,
+} from '../types'
 
 /**
  * 礼物感谢模块
@@ -26,9 +24,8 @@ export function useGiftThank(
   isLive: Ref<boolean>,
   roomId: Ref<number | undefined>,
   isTianXuanActive: Ref<boolean>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
-
   /**
    * 处理礼物事件
    * @param event 礼物事件
@@ -38,18 +35,18 @@ export function useGiftThank(
   function processGift(
     event: EventModel,
     actions: AutoActionItem[],
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤有效的礼物感谢操作
-    const giftActions = filterValidActions(actions, TriggerType.GIFT, isLive, isTianXuanActive);
+    const giftActions = filterValidActions(actions, TriggerType.GIFT, isLive, isTianXuanActive)
 
     // 使用通用执行函数处理礼物事件
     if (giftActions.length > 0 && roomId.value) {
       // 礼物基本信息
-      const giftName = event.msg;
-      const giftPrice = event.price / 1000;
+      const giftName = event.msg
+      const giftPrice = event.price / 1000
 
       executeActions(
         giftActions,
@@ -63,31 +60,31 @@ export function useGiftThank(
             // 礼物过滤逻辑
             (action, context) => {
               // 黑名单模式
-              if (action.triggerConfig.filterMode === 'blacklist' &&
-                  action.triggerConfig.filterGiftNames?.includes(giftName)) {
-                return false;
+              if (action.triggerConfig.filterMode === 'blacklist'
+                && action.triggerConfig.filterGiftNames?.includes(giftName)) {
+                return false
               }
 
               // 白名单模式
-              if (action.triggerConfig.filterMode === 'whitelist' &&
-                  !action.triggerConfig.filterGiftNames?.includes(giftName)) {
-                return false;
+              if (action.triggerConfig.filterMode === 'whitelist'
+                && !action.triggerConfig.filterGiftNames?.includes(giftName)) {
+                return false
               }
 
               // 礼物价值过滤
               if (action.triggerConfig.minValue && giftPrice < action.triggerConfig.minValue) {
-                return false;
+                return false
               }
 
-              return true;
-            }
-          ]
-        }
-      );
+              return true
+            },
+          ],
+        },
+      )
     }
   }
 
   return {
     processGift,
-  };
-}
\ No newline at end of file
+  }
+}
diff --git a/src/client/store/autoAction/modules/guardPm.ts b/src/client/store/autoAction/modules/guardPm.ts
index 956ec06..c4e0ced 100644
--- a/src/client/store/autoAction/modules/guardPm.ts
+++ b/src/client/store/autoAction/modules/guardPm.ts
@@ -1,17 +1,19 @@
-import { computed, Ref } from 'vue';
-import { GuardLevel, EventModel } from '@/api/api-models';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
-  TriggerType,
-  RuntimeState,
   ExecutionContext,
-  ActionType
-} from '../types';
+  RuntimeState,
+} from '../types'
+import { computed } from 'vue'
 import {
+  executeActions,
   filterValidActions,
-  executeActions
-} from '../actionUtils';
-import { buildExecutionContext } from '../utils';
+} from '../actionUtils'
+import {
+  ActionType,
+  TriggerType,
+} from '../types'
+import { buildExecutionContext } from '../utils'
 
 /**
  * 舰长私信模块
@@ -22,7 +24,7 @@ import { buildExecutionContext } from '../utils';
 export function useGuardPm(
   roomId: Ref<number | undefined>,
   sendPrivateMessage: (uid: number, message: string) => Promise<boolean>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
   /**
    * 处理舰长购买事件
@@ -33,13 +35,13 @@ export function useGuardPm(
   function handleGuardBuy(
     actions: AutoActionItem[],
     event: any,
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤舰长事件的操作
-    const isLiveRef = computed(() => true);
-    const guardActions = filterValidActions(actions, TriggerType.GUARD, isLiveRef);
+    const isLiveRef = computed(() => true)
+    const guardActions = filterValidActions(actions, TriggerType.GUARD, isLiveRef)
 
     // 使用通用执行函数处理舰长事件
     if (guardActions.length > 0 && roomId.value) {
@@ -56,99 +58,99 @@ export function useGuardPm(
             (action, context) => {
               if (action.triggerConfig.preventRepeat && event && event.uid) {
                 // 确保 uid 是数字类型
-                const uid = typeof event.uid === 'number' ? event.uid : parseInt(event.uid, 10);
+                const uid = typeof event.uid === 'number' ? event.uid : Number.parseInt(event.uid, 10)
 
                 // 检查是否已经发送过
                 if (runtimeState.sentGuardPms.has(uid)) {
-                  return false;
+                  return false
                 }
 
                 // 添加到已发送集合
-                runtimeState.sentGuardPms.add(uid);
+                runtimeState.sentGuardPms.add(uid)
               }
-              return true;
-            }
+              return true
+            },
           ],
           customContextBuilder: (eventData, roomId, triggerType): ExecutionContext => {
             // 使用标准上下文构建方法
-            const context = buildExecutionContext(eventData, roomId, triggerType);
+            const context = buildExecutionContext(eventData, roomId, triggerType)
 
             // 如果是舰长事件且有事件数据，处理礼品码
             if (triggerType === TriggerType.GUARD && eventData && eventData.guard_level !== undefined) {
-              const guardLevel = eventData.guard_level;
+              const guardLevel = eventData.guard_level
 
               // 查找包含礼品码的操作
-              guardActions.forEach(action => {
+              guardActions.forEach((action) => {
                 // 找到对应等级的礼品码
                 if (action.triggerConfig.giftCodes && action.triggerConfig.giftCodes.length > 0) {
                   // 优先查找特定等级的礼品码
-                  let levelCodesEntry = action.triggerConfig.giftCodes.find(gc => gc.level === guardLevel);
+                  let levelCodesEntry = action.triggerConfig.giftCodes.find(gc => gc.level === guardLevel)
 
                   // 如果没有找到特定等级的礼品码，尝试查找通用礼品码（level为0）
                   if (!levelCodesEntry) {
-                    levelCodesEntry = action.triggerConfig.giftCodes.find(gc => gc.level === 0);
+                    levelCodesEntry = action.triggerConfig.giftCodes.find(gc => gc.level === 0)
                   }
 
                   if (levelCodesEntry && levelCodesEntry.codes && levelCodesEntry.codes.length > 0) {
                     // 随机选择一个礼品码
-                    const randomIndex = Math.floor(Math.random() * levelCodesEntry.codes.length);
-                    const randomCode = levelCodesEntry.codes[randomIndex];
+                    const randomIndex = Math.floor(Math.random() * levelCodesEntry.codes.length)
+                    const randomCode = levelCodesEntry.codes[randomIndex]
                     // 确保guard变量存在并设置礼品码
                     if (context.variables.guard) {
-                      context.variables.guard.giftCode = randomCode;
+                      context.variables.guard.giftCode = randomCode
                       // 在上下文中存储选中的礼品码信息以供后续消耗
                       context.variables.guard.selectedGiftCode = {
                         code: randomCode,
-                        level: levelCodesEntry.level
-                      };
+                        level: levelCodesEntry.level,
+                      }
                     }
                   }
                 }
-              });
+              })
             }
 
-            return context;
+            return context
           },
           onSuccess: (action: AutoActionItem, context: ExecutionContext) => {
             // 检查是否需要消耗礼品码
             if (
-              action.actionType === ActionType.SEND_PRIVATE_MSG &&
-              action.triggerConfig.consumeGiftCode &&
-              context.variables.guard?.selectedGiftCode
+              action.actionType === ActionType.SEND_PRIVATE_MSG
+              && action.triggerConfig.consumeGiftCode
+              && context.variables.guard?.selectedGiftCode
             ) {
-              const { code: selectedCode, level: selectedLevel } = context.variables.guard.selectedGiftCode;
+              const { code: selectedCode, level: selectedLevel } = context.variables.guard.selectedGiftCode
 
-              console.log(`[AutoAction] 尝试消耗礼品码: ActionID=${action.id}, Level=${selectedLevel}, Code=${selectedCode}`);
+              console.log(`[AutoAction] 尝试消耗礼品码: ActionID=${action.id}, Level=${selectedLevel}, Code=${selectedCode}`)
 
               // 确保 giftCodes 存在且为数组
               if (Array.isArray(action.triggerConfig.giftCodes)) {
                 // 找到对应等级的礼品码条目
-                const levelCodesEntry = action.triggerConfig.giftCodes.find(gc => gc.level === selectedLevel);
+                const levelCodesEntry = action.triggerConfig.giftCodes.find(gc => gc.level === selectedLevel)
 
                 if (levelCodesEntry && Array.isArray(levelCodesEntry.codes)) {
                   // 找到要删除的礼品码的索引
-                  const codeIndex = levelCodesEntry.codes.indexOf(selectedCode);
+                  const codeIndex = levelCodesEntry.codes.indexOf(selectedCode)
 
                   if (codeIndex > -1) {
                     // 从数组中移除礼品码
-                    levelCodesEntry.codes.splice(codeIndex, 1);
-                    console.log(`[AutoAction] 成功消耗礼品码: ActionID=${action.id}, Level=${selectedLevel}, Code=${selectedCode}. 剩余 ${levelCodesEntry.codes.length} 个。`);
+                    levelCodesEntry.codes.splice(codeIndex, 1)
+                    console.log(`[AutoAction] 成功消耗礼品码: ActionID=${action.id}, Level=${selectedLevel}, Code=${selectedCode}. 剩余 ${levelCodesEntry.codes.length} 个。`)
                     // !!! 重要提示: 此处直接修改了 action 对象。
                     // !!! 请确保你的状态管理允许这种修改，或者调用 store action 来持久化更新。
                     // 例如: store.updateActionGiftCodes(action.id, selectedLevel, levelCodesEntry.codes);
                   } else {
-                    console.warn(`[AutoAction] 未能在等级 ${selectedLevel} 中找到要消耗的礼品码: ${selectedCode}, ActionID=${action.id}`);
+                    console.warn(`[AutoAction] 未能在等级 ${selectedLevel} 中找到要消耗的礼品码: ${selectedCode}, ActionID=${action.id}`)
                   }
                 } else {
-                  console.warn(`[AutoAction] 未找到等级 ${selectedLevel} 的礼品码列表或列表格式不正确, ActionID=${action.id}`);
+                  console.warn(`[AutoAction] 未找到等级 ${selectedLevel} 的礼品码列表或列表格式不正确, ActionID=${action.id}`)
                 }
               } else {
-                console.warn(`[AutoAction] Action ${action.id} 的 giftCodes 配置不存在或不是数组。`);
+                console.warn(`[AutoAction] Action ${action.id} 的 giftCodes 配置不存在或不是数组。`)
               }
             }
-          }
-        }
-      );
+          },
+        },
+      )
     }
   }
 
@@ -159,14 +161,14 @@ export function useGuardPm(
    */
   function getGuardLevelName(level: number): string {
     switch (level) {
-      case 1: return '总督';
-      case 2: return '提督';
-      case 3: return '舰长';
-      default: return '未知等级';
+      case 1: return '总督'
+      case 2: return '提督'
+      case 3: return '舰长'
+      default: return '未知等级'
     }
   }
 
   return {
-    handleGuardBuy
-  };
-}
\ No newline at end of file
+    handleGuardBuy,
+  }
+}
diff --git a/src/client/store/autoAction/modules/scheduledDanmaku.ts b/src/client/store/autoAction/modules/scheduledDanmaku.ts
index db53740..5592988 100644
--- a/src/client/store/autoAction/modules/scheduledDanmaku.ts
+++ b/src/client/store/autoAction/modules/scheduledDanmaku.ts
@@ -1,18 +1,16 @@
-import { ref, watch, Ref, computed } from 'vue';
-import { useStorage } from '@vueuse/core';
-import {
-  buildExecutionContext
-} from '../utils';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
-  TriggerType,
   RuntimeState,
-  ExecutionContext
-} from '../types';
+} from '../types'
+import { computed, ref } from 'vue'
 import {
+  executeActions,
   filterValidActions,
-  executeActions
-} from '../actionUtils';
+} from '../actionUtils'
+import {
+  TriggerType,
+} from '../types'
 
 /**
  * 定时弹幕模块
@@ -23,12 +21,12 @@ import {
 export function useScheduledDanmaku(
   isLive: Ref<boolean>,
   roomId: Ref<number | undefined>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
   // 运行时数据
-  const timer = ref<any | null>(null);
-  const remainingSeconds = ref(0); // 倒计时剩余秒数
-  const countdownTimer = ref<any | null>(null); // 倒计时定时器
+  const timer = ref<any | null>(null)
+  const remainingSeconds = ref(0) // 倒计时剩余秒数
+  const countdownTimer = ref<any | null>(null) // 倒计时定时器
 
   /**
    * 处理定时任务 - 使用新的AutoActionItem结构
@@ -37,19 +35,19 @@ export function useScheduledDanmaku(
    */
   function processScheduledActions(
     actions: AutoActionItem[],
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤有效的定时弹幕操作
-    const scheduledActions = filterValidActions(actions, TriggerType.SCHEDULED, isLive);
+    const scheduledActions = filterValidActions(actions, TriggerType.SCHEDULED, isLive)
 
     // 为每个定时操作设置定时器
-    scheduledActions.forEach(action => {
+    scheduledActions.forEach((action) => {
       // 检查是否已有定时器
-      if (runtimeState.scheduledTimers[action.id]) return;
+      if (runtimeState.scheduledTimers[action.id]) return
 
-      const intervalSeconds = action.triggerConfig.intervalSeconds || 300; // 默认5分钟
+      const intervalSeconds = action.triggerConfig.intervalSeconds || 300 // 默认5分钟
 
       // 创建定时器函数
       const timerFn = () => {
@@ -64,42 +62,42 @@ export function useScheduledDanmaku(
             { sendLiveDanmaku },
             {
               skipUserFilters: true, // 定时任务不需要用户过滤
-              skipCooldownCheck: false // 可以保留冷却检查
-            }
-          );
+              skipCooldownCheck: false, // 可以保留冷却检查
+            },
+          )
         }
 
         // 设置下一次定时
-        runtimeState.scheduledTimers[action.id] = setTimeout(timerFn, intervalSeconds * 1000);
-        runtimeState.timerStartTimes[action.id] = Date.now(); // 更新定时器启动时间
-      };
+        runtimeState.scheduledTimers[action.id] = setTimeout(timerFn, intervalSeconds * 1000)
+        runtimeState.timerStartTimes[action.id] = Date.now() // 更新定时器启动时间
+      }
 
       // 首次启动定时器
-      runtimeState.scheduledTimers[action.id] = setTimeout(timerFn, intervalSeconds * 1000);
-      runtimeState.timerStartTimes[action.id] = Date.now(); // 记录定时器启动时间
-    });
+      runtimeState.scheduledTimers[action.id] = setTimeout(timerFn, intervalSeconds * 1000)
+      runtimeState.timerStartTimes[action.id] = Date.now() // 记录定时器启动时间
+    })
   }
 
   /**
    * 格式化剩余时间为分:秒格式
    */
   const formattedRemainingTime = computed(() => {
-    const minutes = Math.floor(remainingSeconds.value / 60);
-    const seconds = remainingSeconds.value % 60;
-    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-  });
+    const minutes = Math.floor(remainingSeconds.value / 60)
+    const seconds = remainingSeconds.value % 60
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+  })
 
   /**
    * 清理计时器
    */
   function clearTimer() {
     if (timer.value) {
-      clearTimeout(timer.value);
-      timer.value = null;
+      clearTimeout(timer.value)
+      timer.value = null
     }
     if (countdownTimer.value) {
-      clearInterval(countdownTimer.value);
-      countdownTimer.value = null;
+      clearInterval(countdownTimer.value)
+      countdownTimer.value = null
     }
   }
 
@@ -107,6 +105,6 @@ export function useScheduledDanmaku(
     processScheduledActions,
     clearTimer,
     remainingSeconds,
-    formattedRemainingTime
-  };
-}
\ No newline at end of file
+    formattedRemainingTime,
+  }
+}
diff --git a/src/client/store/autoAction/modules/superChatThank.ts b/src/client/store/autoAction/modules/superChatThank.ts
index ccb13cd..625ab2e 100644
--- a/src/client/store/autoAction/modules/superChatThank.ts
+++ b/src/client/store/autoAction/modules/superChatThank.ts
@@ -1,14 +1,16 @@
-import { EventModel } from '@/api/api-models';
-import { Ref } from 'vue';
-import {
-  executeActions,
-  filterValidActions
-} from '../actionUtils';
-import {
+import type { Ref } from 'vue'
+import type {
   AutoActionItem,
   RuntimeState,
-  TriggerType
-} from '../types';
+} from '../types'
+import type { EventModel } from '@/api/api-models'
+import {
+  executeActions,
+  filterValidActions,
+} from '../actionUtils'
+import {
+  TriggerType,
+} from '../types'
 
 /**
  * 醒目留言感谢模块
@@ -21,9 +23,8 @@ export function useSuperChatThank(
   isLive: Ref<boolean>,
   roomId: Ref<number | undefined>,
   isTianXuanActive: Ref<boolean>,
-  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>
+  sendLiveDanmaku: (roomId: number, message: string) => Promise<boolean>,
 ) {
-
   /**
    * 处理醒目留言事件
    * @param event 醒目留言事件
@@ -33,12 +34,12 @@ export function useSuperChatThank(
   function processSuperChat(
     event: EventModel,
     actions: AutoActionItem[],
-    runtimeState: RuntimeState
+    runtimeState: RuntimeState,
   ) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 使用通用函数过滤有效的SC感谢操作
-    const scActions = filterValidActions(actions, TriggerType.SUPER_CHAT, isLive, isTianXuanActive);
+    const scActions = filterValidActions(actions, TriggerType.SUPER_CHAT, isLive, isTianXuanActive)
 
     // 使用通用执行函数处理SC事件
     if (scActions.length > 0 && roomId.value) {
@@ -55,25 +56,25 @@ export function useSuperChatThank(
             (action, context) => {
               // 如果未设置SC过滤或选择了不过滤模式
               if (!action.triggerConfig.scFilterMode || action.triggerConfig.scFilterMode === 'none') {
-                return true;
+                return true
               }
 
               // 价格过滤模式
-              if (action.triggerConfig.scFilterMode === 'price' &&
-                  action.triggerConfig.scMinPrice &&
-                  event.price < action.triggerConfig.scMinPrice * 1000) {
-                return false;
+              if (action.triggerConfig.scFilterMode === 'price'
+                && action.triggerConfig.scMinPrice
+                && event.price < action.triggerConfig.scMinPrice * 1000) {
+                return false
               }
 
-              return true;
-            }
-          ]
-        }
-      );
+              return true
+            },
+          ],
+        },
+      )
     }
   }
 
   return {
     processSuperChat,
-  };
-}
\ No newline at end of file
+  }
+}
diff --git a/src/client/store/autoAction/types.ts b/src/client/store/autoAction/types.ts
index 0486927..4f46027 100644
--- a/src/client/store/autoAction/types.ts
+++ b/src/client/store/autoAction/types.ts
@@ -1,30 +1,30 @@
 // 统一的自动操作类型定义
 
-import { EventModel, GuardLevel } from '@/api/api-models';
+import type { EventModel, GuardLevel } from '@/api/api-models'
 
 // 触发条件类型
 export enum TriggerType {
-  DANMAKU = 'danmaku',   // 弹幕
-  GIFT = 'gift',         // 礼物
-  GUARD = 'guard',       // 上舰
-  FOLLOW = 'follow',     // 关注
-  ENTER = 'enter',       // 进入直播间
+  DANMAKU = 'danmaku', // 弹幕
+  GIFT = 'gift', // 礼物
+  GUARD = 'guard', // 上舰
+  FOLLOW = 'follow', // 关注
+  ENTER = 'enter', // 进入直播间
   SCHEDULED = 'scheduled', // 定时触发
   SUPER_CHAT = 'super_chat', // SC
 }
 
 // 操作类型
 export enum ActionType {
-  SEND_DANMAKU = 'send_danmaku',       // 发送弹幕
+  SEND_DANMAKU = 'send_danmaku', // 发送弹幕
   SEND_PRIVATE_MSG = 'send_private_msg', // 发送私信
-  EXECUTE_COMMAND = 'execute_command',  // 执行命令
+  EXECUTE_COMMAND = 'execute_command', // 执行命令
 }
 
 // 关键词匹配类型
 export enum KeywordMatchType {
-  Full = 'full',         // 完全匹配
+  Full = 'full', // 完全匹配
   Contains = 'contains', // 包含匹配
-  Regex = 'regex',       // 正则匹配
+  Regex = 'regex', // 正则匹配
 }
 
 // 优先级
@@ -37,110 +37,110 @@ export enum Priority {
 }
 
 // 统一的自动操作定义
-export type AutoActionItem = {
-  id: string;            // 唯一ID
-  name: string;          // 操作名称
-  enabled: boolean;      // 是否启用
-  triggerType: TriggerType; // 触发类型
-  actionType: ActionType;   // 操作类型
-  template: string;      // 模板
-  priority: Priority;       // 优先级
+export interface AutoActionItem {
+  id: string // 唯一ID
+  name: string // 操作名称
+  enabled: boolean // 是否启用
+  triggerType: TriggerType // 触发类型
+  actionType: ActionType // 操作类型
+  template: string // 模板
+  priority: Priority // 优先级
 
   // 高级配置
-  logicalExpression: string; // 逻辑表达式，为真时才执行此操作
-  ignoreCooldown: boolean;   // 是否忽略冷却时间
-  executeCommand: string;    // 要执行的JS代码
+  logicalExpression: string // 逻辑表达式，为真时才执行此操作
+  ignoreCooldown: boolean // 是否忽略冷却时间
+  executeCommand: string // 要执行的JS代码
 
   // 触发器特定配置
-  triggerConfig: TriggerConfig;
+  triggerConfig: TriggerConfig
 
   // 动作特定配置
   actionConfig: {
-    delaySeconds?: number;       // 延迟执行秒数
-    maxUsersPerMsg?: number;     // 每条消息最大用户数
-    maxItemsPerUser?: number;    // 每用户最大项目数 (礼物等)
-    cooldownSeconds?: number;    // 冷却时间(秒)
-  };
+    delaySeconds?: number // 延迟执行秒数
+    maxUsersPerMsg?: number // 每条消息最大用户数
+    maxItemsPerUser?: number // 每用户最大项目数 (礼物等)
+    cooldownSeconds?: number // 冷却时间(秒)
+  }
 }
 
 // 执行上下文，包含事件信息和可用变量
 export interface ExecutionContext {
-  event?: EventModel;            // 触发事件
-  roomId?: number;               // 直播间ID
-  variables: Record<string, any>; // 额外变量
-  timestamp: number;             // 时间戳
+  event?: EventModel // 触发事件
+  roomId?: number // 直播间ID
+  variables: Record<string, any> // 额外变量
+  timestamp: number // 时间戳
 
   // --- 新增运行时数据管理函数 ---
   /** 获取运行时数据 */
-  getData: <T>(key: string, defaultValue?: T) => T | undefined;
+  getData: <T>(key: string, defaultValue?: T) => T | undefined
   /** 设置运行时数据 */
-  setData: <T>(key: string, value: T) => void;
+  setData: <T>(key: string, value: T) => void
   /** 检查运行时数据是否存在 */
-  containsData: (key: string) => boolean;
+  containsData: (key: string) => boolean
   /** 移除运行时数据 */
-  removeData: (key: string) => void;
+  removeData: (key: string) => void
 
   // --- 新增持久化数据管理函数 ---
   /** 获取持久化存储的数据 */
-  getStorageData: <T>(key: string, defaultValue?: T) => Promise<T | undefined>;
+  getStorageData: <T>(key: string, defaultValue?: T) => Promise<T | undefined>
   /** 设置持久化存储的数据 */
-  setStorageData: <T>(key: string, value: T) => Promise<void>;
+  setStorageData: <T>(key: string, value: T) => Promise<void>
   /** 检查持久化存储中是否存在指定的键 */
-  hasStorageData: (key: string) => Promise<boolean>;
+  hasStorageData: (key: string) => Promise<boolean>
   /** 从持久化存储中删除数据 */
-  removeStorageData: (key: string) => Promise<void>;
+  removeStorageData: (key: string) => Promise<void>
   /** 清除所有持久化存储的数据 */
-  clearStorageData: () => Promise<void>;
+  clearStorageData: () => Promise<void>
 }
 
 // 运行状态接口
 export interface RuntimeState {
-  lastExecutionTime: Record<string, number>; // 上次执行时间
-  aggregatedEvents: Record<string, any[]>;   // 聚合的事件
-  scheduledTimers: Record<string, any | null>; // 定时器 ID
-  timerStartTimes: Record<string, number>; // <--- 新增：独立定时器启动时间戳
-  globalTimerStartTime: number | null;     // <--- 新增：全局定时器启动时间戳
-  sentGuardPms: Set<number>;                // 已发送的舰长私信
+  lastExecutionTime: Record<string, number> // 上次执行时间
+  aggregatedEvents: Record<string, any[]> // 聚合的事件
+  scheduledTimers: Record<string, any | null> // 定时器 ID
+  timerStartTimes: Record<string, number> // <--- 新增：独立定时器启动时间戳
+  globalTimerStartTime: number | null // <--- 新增：全局定时器启动时间戳
+  sentGuardPms: Set<number> // 已发送的舰长私信
 }
 
 export interface TriggerConfig {
   // User filters
-  userFilterEnabled?: boolean;
-  requireMedal?: boolean;
-  requireCaptain?: boolean;
+  userFilterEnabled?: boolean
+  requireMedal?: boolean
+  requireCaptain?: boolean
 
   // Common conditions
-  onlyDuringLive?: boolean;
-  ignoreTianXuan?: boolean;
+  onlyDuringLive?: boolean
+  ignoreTianXuan?: boolean
 
   // Keywords for autoReply
-  keywords?: string[];
-  keywordMatchType?: KeywordMatchType;
-  blockwords?: string[];
-  blockwordMatchType?: KeywordMatchType;
+  keywords?: string[]
+  keywordMatchType?: KeywordMatchType
+  blockwords?: string[]
+  blockwordMatchType?: KeywordMatchType
 
   // Gift filters
-  filterMode?: 'blacklist' | 'whitelist' | 'value' | 'none' | 'free';
-  filterGiftNames?: string[];
-  minValue?: number; // For gift and SC minimum value (元)
-  includeQuantity?: boolean; // 是否包含礼物数量
+  filterMode?: 'blacklist' | 'whitelist' | 'value' | 'none' | 'free'
+  filterGiftNames?: string[]
+  minValue?: number // For gift and SC minimum value (元)
+  includeQuantity?: boolean // 是否包含礼物数量
 
   // SC相关配置
-  scFilterMode?: 'none' | 'price'; // SC过滤模式
-  scMinPrice?: number; // SC最低价格(元)
+  scFilterMode?: 'none' | 'price' // SC过滤模式
+  scMinPrice?: number // SC最低价格(元)
 
   // Scheduled options
-  useGlobalTimer?: boolean;
-  intervalSeconds?: number;
-  schedulingMode?: 'random' | 'sequential';
+  useGlobalTimer?: boolean
+  intervalSeconds?: number
+  schedulingMode?: 'random' | 'sequential'
 
   // Guard related
-  guardLevels?: GuardLevel[];
-  preventRepeat?: boolean;
-  giftCodes?: { level: number; codes: string[] }[];
-  consumeGiftCode?: boolean; // 是否消耗礼品码
+  guardLevels?: GuardLevel[]
+  preventRepeat?: boolean
+  giftCodes?: { level: number, codes: string[] }[]
+  consumeGiftCode?: boolean // 是否消耗礼品码
 
   // Confirm message options
-  sendDanmakuConfirm?: boolean; // 是否发送弹幕确认
-  isConfirmMessage?: boolean; // 标记这是一个确认消息
-}
\ No newline at end of file
+  sendDanmakuConfirm?: boolean // 是否发送弹幕确认
+  isConfirmMessage?: boolean // 标记这是一个确认消息
+}
diff --git a/src/client/store/autoAction/utils.ts b/src/client/store/autoAction/utils.ts
index a624fab..5d0de0f 100644
--- a/src/client/store/autoAction/utils.ts
+++ b/src/client/store/autoAction/utils.ts
@@ -1,22 +1,24 @@
-import { nanoid } from 'nanoid';
-import {
+import type {
   AutoActionItem,
-  TriggerType,
+  ExecutionContext,
+  RuntimeState,
+} from './types'
+import { clear, createStore, del, get, set } from 'idb-keyval' // 导入 useIDBKeyval
+import { nanoid } from 'nanoid'
+import {
   ActionType,
   Priority,
-  RuntimeState,
-  ExecutionContext
-} from './types';
-import { get, set, del, clear, keys as idbKeys, createStore } from 'idb-keyval'; // 导入 useIDBKeyval
+  TriggerType,
+} from './types'
 
 // --- 定义用户持久化数据的自定义存储区 ---
-const USER_DATA_DB_NAME = 'AutoActionUserDataDB';
-const USER_DATA_STORE_NAME = 'userData';
-const userDataStore = createStore(USER_DATA_DB_NAME, USER_DATA_STORE_NAME);
+const USER_DATA_DB_NAME = 'AutoActionUserDataDB'
+const USER_DATA_STORE_NAME = 'userData'
+const userDataStore = createStore(USER_DATA_DB_NAME, USER_DATA_STORE_NAME)
 // ----------------------------------------
 
 // --- 定义运行时数据的前缀 (避免与页面其他 sessionStorage 冲突) ---
-const RUNTIME_STORAGE_PREFIX = 'autoaction_runtime_';
+const RUNTIME_STORAGE_PREFIX = 'autoaction_runtime_'
 
 /**
  * 创建默认的运行时状态
@@ -28,8 +30,8 @@ export function createDefaultRuntimeState(): RuntimeState {
     timerStartTimes: {},
     globalTimerStartTime: null,
     sentGuardPms: new Set(),
-    aggregatedEvents: {}
-  };
+    aggregatedEvents: {},
+  }
 }
 
 /**
@@ -37,7 +39,7 @@ export function createDefaultRuntimeState(): RuntimeState {
  * @param triggerType 触发类型
  */
 export function createDefaultAutoAction(triggerType: TriggerType): AutoActionItem {
-  const id = `auto-action-${nanoid(8)}`;
+  const id = `auto-action-${nanoid(8)}`
 
   // 根据不同触发类型设置默认模板
   const defaultTemplates: Record<TriggerType, string> = {
@@ -48,7 +50,7 @@ export function createDefaultAutoAction(triggerType: TriggerType): AutoActionIte
     [TriggerType.ENTER]: '欢迎 {{user.name}} 进入直播间',
     [TriggerType.SCHEDULED]: '这是一条定时消息，当前时间: {{date.formatted}}',
     [TriggerType.SUPER_CHAT]: '感谢 {{user.name}} 的SC!',
-  };
+  }
 
   // 根据不同触发类型设置默认名称
   const defaultNames: Record<TriggerType, string> = {
@@ -59,7 +61,7 @@ export function createDefaultAutoAction(triggerType: TriggerType): AutoActionIte
     [TriggerType.ENTER]: '入场欢迎',
     [TriggerType.SCHEDULED]: '定时消息',
     [TriggerType.SUPER_CHAT]: 'SC感谢',
-  };
+  }
 
   return {
     id,
@@ -85,9 +87,9 @@ export function createDefaultAutoAction(triggerType: TriggerType): AutoActionIte
       delaySeconds: 0,
       cooldownSeconds: 5,
       maxUsersPerMsg: 5,
-      maxItemsPerUser: 3
-    }
-  };
+      maxItemsPerUser: 3,
+    },
+  }
 }
 
 /**
@@ -95,8 +97,8 @@ export function createDefaultAutoAction(triggerType: TriggerType): AutoActionIte
  * @param template 模板字符串
  */
 export function getRandomTemplate(template: string): string | null {
-  if (!template) return null;
-  return template;
+  if (!template) return null
+  return template
 }
 
 /**
@@ -105,42 +107,42 @@ export function getRandomTemplate(template: string): string | null {
  * @param context 执行上下文
  */
 export function formatTemplate(template: string, context: ExecutionContext): string {
-  if (!template) return '';
+  if (!template) return ''
 
   // 简单的模板替换
-  return template.replace(/{([^}]+)}/g, (match, path) => {
+  return template.replace(/\{([^}]+)\}/g, (match, path) => {
     try {
       // 解析路径
-      const parts = path.trim().split('.');
-      let value: any = context;
+      const parts = path.trim().split('.')
+      let value: any = context
 
       // 特殊处理函数类型
       if (parts[0] === 'timeOfDay' && typeof context.variables.timeOfDay === 'function') {
-        return context.variables.timeOfDay();
+        return context.variables.timeOfDay()
       }
 
       // 特殊处理event直接访问
       if (parts[0] === 'event') {
-        value = context.event;
-        parts.shift();
+        value = context.event
+        parts.shift()
       } else {
         // 否则从variables中获取
-        value = context.variables;
+        value = context.variables
       }
 
       // 递归获取嵌套属性
       for (const part of parts) {
-        if (value === undefined || value === null) return match;
-        value = value[part];
-        if (typeof value === 'function') value = value();
+        if (value === undefined || value === null) return match
+        value = value[part]
+        if (typeof value === 'function') value = value()
       }
 
-      return value !== undefined && value !== null ? String(value) : match;
+      return value !== undefined && value !== null ? String(value) : match
     } catch (error) {
-      console.error('模板格式化错误:', error);
-      return match; // 出错时返回原始匹配项
+      console.error('模板格式化错误:', error)
+      return match // 出错时返回原始匹配项
     }
-  });
+  })
 }
 
 /**
@@ -149,21 +151,21 @@ export function formatTemplate(template: string, context: ExecutionContext): str
  * @param context 执行上下文
  */
 export function evaluateExpression(expression: string, context: ExecutionContext): boolean {
-  if (!expression || expression.trim() === '') return true; // 空表达式默认为true
+  if (!expression || expression.trim() === '') return true // 空表达式默认为true
 
   try {
     // 预定义函数和变量
     const utils = {
       // 事件相关
       inDanmaku: (keyword: string) => {
-        if (!context.event?.msg) return false;
-        return context.event.msg.includes(keyword);
+        if (!context.event?.msg) return false
+        return context.event.msg.includes(keyword)
       },
 
       // 礼物相关
       giftValue: () => {
-        if (!context.event) return 0;
-        return (context.event.price || 0) * (context.event.num || 1) / 1000;
+        if (!context.event) return 0
+        return (context.event.price || 0) * (context.event.num || 1) / 1000
       },
 
       giftName: () => context.event?.msg || '',
@@ -177,16 +179,16 @@ export function evaluateExpression(expression: string, context: ExecutionContext
       // 时间相关
       time: {
         hour: new Date().getHours(),
-        minute: new Date().getMinutes()
+        minute: new Date().getMinutes(),
       },
 
       // 字符串处理
       str: {
         includes: (str: string, search: string) => str.includes(search),
         startsWith: (str: string, search: string) => str.startsWith(search),
-        endsWith: (str: string, search: string) => str.endsWith(search)
-      }
-    };
+        endsWith: (str: string, search: string) => str.endsWith(search),
+      },
+    }
 
     // 创建安全的eval环境
     const evalFunc = new Function(
@@ -200,14 +202,14 @@ export function evaluateExpression(expression: string, context: ExecutionContext
       } catch(e) {
         console.error('表达式评估错误:', e);
         return false;
-      }`
-    );
+      }`,
+    )
 
     // 执行表达式
-    return Boolean(evalFunc(context, context.event, utils));
+    return Boolean(evalFunc(context, context.event, utils))
   } catch (error) {
-    console.error('表达式评估错误:', error);
-    return false; // 出错时返回false
+    console.error('表达式评估错误:', error)
+    return false // 出错时返回false
   }
 }
 
@@ -217,28 +219,28 @@ export function evaluateExpression(expression: string, context: ExecutionContext
  * @param params 参数对象
  */
 export function formatMessage(template: string, params: Record<string, any>): string {
-  if (!template) return '';
+  if (!template) return ''
 
   // 简单的模板替换
-  return template.replace(/{{([^}]+)}}/g, (match, path) => {
+  return template.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
     try {
       // 解析路径
-      const parts = path.trim().split('.');
-      let value: any = params;
+      const parts = path.trim().split('.')
+      let value: any = params
 
       // 递归获取嵌套属性
       for (const part of parts) {
-        if (value === undefined || value === null) return match;
-        value = value[part];
-        if (typeof value === 'function') value = value();
+        if (value === undefined || value === null) return match
+        value = value[part]
+        if (typeof value === 'function') value = value()
       }
 
-      return value !== undefined && value !== null ? String(value) : match;
+      return value !== undefined && value !== null ? String(value) : match
     } catch (error) {
-      console.error('模板格式化错误:', error);
-      return match; // 出错时返回原始匹配项
+      console.error('模板格式化错误:', error)
+      return match // 出错时返回原始匹配项
     }
-  });
+  })
 }
 
 /**
@@ -246,10 +248,10 @@ export function formatMessage(template: string, params: Record<string, any>): st
  * @param config 配置对象，需要包含enabled和onlyDuringLive属性
  * @param isLive 当前是否为直播状态
  */
-export function shouldProcess(config: { enabled: boolean; onlyDuringLive: boolean }, isLive: boolean): boolean {
-  if (!config.enabled) return false;
-  if (config.onlyDuringLive && !isLive) return false;
-  return true;
+export function shouldProcess(config: { enabled: boolean, onlyDuringLive: boolean }, isLive: boolean): boolean {
+  if (!config.enabled) return false
+  if (config.onlyDuringLive && !isLive) return false
+  return true
 }
 
 /**
@@ -257,11 +259,11 @@ export function shouldProcess(config: { enabled: boolean; onlyDuringLive: boolea
  * @param config 配置对象，需要包含userFilterEnabled、requireMedal和requireCaptain属性
  * @param event 事件对象
  */
-export function checkUserFilter(config: { userFilterEnabled: boolean; requireMedal: boolean; requireCaptain: boolean }, event: { fans_medal_wearing_status?: boolean; guard_level?: number }): boolean {
-  if (!config.userFilterEnabled) return true;
-  if (config.requireMedal && !event.fans_medal_wearing_status) return false;
-  if (config.requireCaptain && (!event.guard_level || event.guard_level === 0)) return false;
-  return true;
+export function checkUserFilter(config: { userFilterEnabled: boolean, requireMedal: boolean, requireCaptain: boolean }, event: { fans_medal_wearing_status?: boolean, guard_level?: number }): boolean {
+  if (!config.userFilterEnabled) return true
+  if (config.requireMedal && !event.fans_medal_wearing_status) return false
+  if (config.requireCaptain && (!event.guard_level || event.guard_level === 0)) return false
+  return true
 }
 
 /**
@@ -276,10 +278,10 @@ export function buildExecutionContext(
   event: any,
   roomId: number | undefined,
   triggerType?: TriggerType,
-  additionalContext?: Record<string, any>
+  additionalContext?: Record<string, any>,
 ): ExecutionContext {
-  const now = Date.now();
-  const dateObj = new Date(now);
+  const now = Date.now()
+  const dateObj = new Date(now)
 
   const context: ExecutionContext = {
     event,
@@ -294,103 +296,103 @@ export function buildExecutionContext(
         day: dateObj.getDate(),
         hour: dateObj.getHours(),
         minute: dateObj.getMinutes(),
-        second: dateObj.getSeconds()
+        second: dateObj.getSeconds(),
       },
       // 时段函数
       timeOfDay: () => {
-        const hour = dateObj.getHours();
-        if (hour < 6) return '凌晨';
-        if (hour < 9) return '早上';
-        if (hour < 12) return '上午';
-        if (hour < 14) return '中午';
-        if (hour < 18) return '下午';
-        if (hour < 22) return '晚上';
-        return '深夜';
-      }
+        const hour = dateObj.getHours()
+        if (hour < 6) return '凌晨'
+        if (hour < 9) return '早上'
+        if (hour < 12) return '上午'
+        if (hour < 14) return '中午'
+        if (hour < 18) return '下午'
+        if (hour < 22) return '晚上'
+        return '深夜'
+      },
     },
     // --- 实现运行时数据管理函数 (使用 sessionStorage) ---
     getData: <T>(key: string, defaultValue?: T): T | undefined => {
-      const prefixedKey = RUNTIME_STORAGE_PREFIX + key;
+      const prefixedKey = RUNTIME_STORAGE_PREFIX + key
       try {
-        const storedValue = sessionStorage.getItem(prefixedKey);
+        const storedValue = sessionStorage.getItem(prefixedKey)
         if (storedValue === null) {
-          return defaultValue;
+          return defaultValue
         }
-        return JSON.parse(storedValue) as T;
+        return JSON.parse(storedValue) as T
       } catch (error) {
-        console.error(`[Runtime SessionStorage] Error getting/parsing key '${key}':`, error);
-        return defaultValue;
+        console.error(`[Runtime SessionStorage] Error getting/parsing key '${key}':`, error)
+        return defaultValue
       }
     },
     setData: <T>(key: string, value: T): void => {
-      const prefixedKey = RUNTIME_STORAGE_PREFIX + key;
+      const prefixedKey = RUNTIME_STORAGE_PREFIX + key
       try {
         // 不存储 undefined
         if (value === undefined) {
-          sessionStorage.removeItem(prefixedKey);
-          return;
+          sessionStorage.removeItem(prefixedKey)
+          return
         }
-        sessionStorage.setItem(prefixedKey, JSON.stringify(value));
+        sessionStorage.setItem(prefixedKey, JSON.stringify(value))
       } catch (error) {
-        console.error(`[Runtime SessionStorage] Error setting key '${key}':`, error);
+        console.error(`[Runtime SessionStorage] Error setting key '${key}':`, error)
         // 如果序列化失败，可以选择移除旧键或保留
-        sessionStorage.removeItem(prefixedKey);
+        sessionStorage.removeItem(prefixedKey)
       }
     },
     containsData: (key: string): boolean => {
-      const prefixedKey = RUNTIME_STORAGE_PREFIX + key;
-      return sessionStorage.getItem(prefixedKey) !== null;
+      const prefixedKey = RUNTIME_STORAGE_PREFIX + key
+      return sessionStorage.getItem(prefixedKey) !== null
     },
     removeData: (key: string): void => {
-      const prefixedKey = RUNTIME_STORAGE_PREFIX + key;
-      sessionStorage.removeItem(prefixedKey);
+      const prefixedKey = RUNTIME_STORAGE_PREFIX + key
+      sessionStorage.removeItem(prefixedKey)
     },
     // --- 持久化数据管理函数 (不变，继续使用 userDataStore) ---
     getStorageData: async <T>(key: string, defaultValue?: T): Promise<T | undefined> => {
       try {
         // 使用 userDataStore
-        const value = await get<T>(key, userDataStore);
-        return value === undefined ? defaultValue : value;
+        const value = await get<T>(key, userDataStore)
+        return value === undefined ? defaultValue : value
       } catch (error) {
-        console.error(`[UserData IDB] getStorageData error for key '${key}':`, error);
-        return defaultValue;
+        console.error(`[UserData IDB] getStorageData error for key '${key}':`, error)
+        return defaultValue
       }
     },
     setStorageData: async <T>(key: string, value: T): Promise<void> => {
       try {
         // 使用 userDataStore
-        await set(key, value, userDataStore);
+        await set(key, value, userDataStore)
       } catch (error) {
-        console.error(`[UserData IDB] setStorageData error for key '${key}':`, error);
+        console.error(`[UserData IDB] setStorageData error for key '${key}':`, error)
       }
     },
     hasStorageData: async (key: string): Promise<boolean> => {
       try {
         // 使用 userDataStore
-        const value = await get(key, userDataStore);
-        return value !== undefined;
+        const value = await get(key, userDataStore)
+        return value !== undefined
       } catch (error) {
-        console.error(`[UserData IDB] hasStorageData error for key '${key}':`, error);
-        return false;
+        console.error(`[UserData IDB] hasStorageData error for key '${key}':`, error)
+        return false
       }
     },
     removeStorageData: async (key: string): Promise<void> => {
       try {
         // 使用 userDataStore
-        await del(key, userDataStore);
+        await del(key, userDataStore)
       } catch (error) {
-        console.error(`[UserData IDB] removeStorageData error for key '${key}':`, error);
+        console.error(`[UserData IDB] removeStorageData error for key '${key}':`, error)
       }
     },
     clearStorageData: async (): Promise<void> => {
       try {
         // 使用 userDataStore
-        await clear(userDataStore);
+        await clear(userDataStore)
       } catch (error) {
-        console.error('[UserData IDB] clearStorageData error:', error);
+        console.error('[UserData IDB] clearStorageData error:', error)
       }
-    }
-  };
+    },
+  }
 
   // 如果有事件对象，添加用户信息
   if (event) {
@@ -400,10 +402,10 @@ export function buildExecutionContext(
       guardLevel: event.guard_level,
       hasMedal: event.fans_medal_wearing_status,
       medalLevel: event.fans_medal_level,
-      medalName: event.fans_medal_name
-    };
-    context.variables.danmaku = event;
-    context.variables.message = event.msg;
+      medalName: event.fans_medal_name,
+    }
+    context.variables.danmaku = event
+    context.variables.message = event.msg
 
     // 根据不同触发类型添加特定变量
     if (triggerType === TriggerType.GIFT) {
@@ -412,25 +414,25 @@ export function buildExecutionContext(
         count: event.num,
         price: (event.price || 0) / 1000, // B站价格单位通常是 1/1000 元
         totalPrice: ((event.price || 0) / 1000) * (event.num || 1),
-        summary: `${event.num || 1}个${event.msg || '礼物'}`
-      };
+        summary: `${event.num || 1}个${event.msg || '礼物'}`,
+      }
     } else if (triggerType === TriggerType.GUARD) {
       const guardLevelMap: Record<number, string> = {
         1: '总督',
         2: '提督',
         3: '舰长',
-        0: '无舰长'
-      };
+        0: '无舰长',
+      }
       context.variables.guard = {
         level: event.guard_level || 0,
         levelName: guardLevelMap[event.guard_level || 0] || '未知舰长等级',
-        giftCode: ''
-      };
+        giftCode: '',
+      }
     } else if (triggerType === TriggerType.SUPER_CHAT) {
       context.variables.sc = {
         message: event.msg,
-        price: (event.price || 0) / 1000
-      };
+        price: (event.price || 0) / 1000,
+      }
     }
   }
 
@@ -438,9 +440,9 @@ export function buildExecutionContext(
   if (additionalContext) {
     context.variables = {
       ...context.variables,
-      ...additionalContext
-    };
+      ...additionalContext,
+    }
   }
 
-  return context;
+  return context
 }
diff --git a/src/client/store/autoAction/utils/historyLogger.ts b/src/client/store/autoAction/utils/historyLogger.ts
index 756bb9c..895b663 100644
--- a/src/client/store/autoAction/utils/historyLogger.ts
+++ b/src/client/store/autoAction/utils/historyLogger.ts
@@ -1,5 +1,5 @@
-import { get, set, del, update } from 'idb-keyval';
-import { ActionType } from '../types';
+import { del, get, update } from 'idb-keyval'
+import { ActionType } from '../types'
 
 // 历史记录类型常量
 export enum HistoryType {
@@ -10,39 +10,39 @@ export enum HistoryType {
 
 // 历史记录项结构
 export interface HistoryItem {
-  id: string; // 唯一ID
-  actionId: string; // 操作ID
-  actionName: string; // 操作名称
-  actionType: ActionType; // 操作类型
-  timestamp: number; // 执行时间戳
-  content: string; // 发送的内容
-  target?: string; // 目标（如UID或房间ID）
-  success: boolean; // 是否成功
-  error?: string; // 错误信息（如果有）
+  id: string // 唯一ID
+  actionId: string // 操作ID
+  actionName: string // 操作名称
+  actionType: ActionType // 操作类型
+  timestamp: number // 执行时间戳
+  content: string // 发送的内容
+  target?: string // 目标（如UID或房间ID）
+  success: boolean // 是否成功
+  error?: string // 错误信息（如果有）
 }
 
 // 每种类型的历史记录容量
-const HISTORY_CAPACITY = 1000;
+const HISTORY_CAPACITY = 1000
 
 // 使用IDB存储的键名
 const HISTORY_KEYS = {
   [HistoryType.DANMAKU]: 'autoAction_history_danmaku',
   [HistoryType.PRIVATE_MSG]: 'autoAction_history_privateMsg',
   [HistoryType.COMMAND]: 'autoAction_history_command',
-};
+}
 
 // 环形队列添加记录
 async function addToCircularQueue(key: string, item: HistoryItem, capacity: number): Promise<void> {
   await update<HistoryItem[]>(key, (history = []) => {
     // 添加到队列末尾
-    history.push(item);
+    history.push(item)
 
     // 如果超出容量，移除最旧的记录
     if (history.length > capacity) {
-      history.splice(0, history.length - capacity);
+      history.splice(0, history.length - capacity)
     }
-    return history;
-  });
+    return history
+  })
 }
 
 /**
@@ -54,7 +54,7 @@ export async function logDanmakuHistory(
   content: string,
   roomId: number,
   success: boolean,
-  error?: string
+  error?: string,
 ): Promise<void> {
   const historyItem: HistoryItem = {
     id: `d_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
@@ -65,10 +65,10 @@ export async function logDanmakuHistory(
     content,
     target: roomId.toString(),
     success,
-    error
-  };
+    error,
+  }
 
-  await addToCircularQueue(HISTORY_KEYS[HistoryType.DANMAKU], historyItem, HISTORY_CAPACITY);
+  await addToCircularQueue(HISTORY_KEYS[HistoryType.DANMAKU], historyItem, HISTORY_CAPACITY)
 }
 
 /**
@@ -80,7 +80,7 @@ export async function logPrivateMsgHistory(
   content: string,
   userId: number,
   success: boolean,
-  error?: string
+  error?: string,
 ): Promise<void> {
   const historyItem: HistoryItem = {
     id: `p_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
@@ -91,10 +91,10 @@ export async function logPrivateMsgHistory(
     content,
     target: userId.toString(),
     success,
-    error
-  };
+    error,
+  }
 
-  await addToCircularQueue(HISTORY_KEYS[HistoryType.PRIVATE_MSG], historyItem, HISTORY_CAPACITY);
+  await addToCircularQueue(HISTORY_KEYS[HistoryType.PRIVATE_MSG], historyItem, HISTORY_CAPACITY)
 }
 
 /**
@@ -105,7 +105,7 @@ export async function logCommandHistory(
   actionName: string,
   content: string,
   success: boolean,
-  error?: string
+  error?: string,
 ): Promise<void> {
   const historyItem: HistoryItem = {
     id: `c_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
@@ -115,24 +115,24 @@ export async function logCommandHistory(
     timestamp: Date.now(),
     content,
     success,
-    error
-  };
+    error,
+  }
 
-  await addToCircularQueue(HISTORY_KEYS[HistoryType.COMMAND], historyItem, HISTORY_CAPACITY);
+  await addToCircularQueue(HISTORY_KEYS[HistoryType.COMMAND], historyItem, HISTORY_CAPACITY)
 }
 
 /**
  * 获取历史记录
  */
 export async function getHistoryByType(type: HistoryType): Promise<HistoryItem[]> {
-  return await get<HistoryItem[]>(HISTORY_KEYS[type]) || [];
+  return await get<HistoryItem[]>(HISTORY_KEYS[type]) || []
 }
 
 /**
  * 清除历史记录
  */
 export async function clearHistory(type: HistoryType): Promise<void> {
-  await del(HISTORY_KEYS[type]);
+  await del(HISTORY_KEYS[type])
 }
 
 /**
@@ -140,6 +140,6 @@ export async function clearHistory(type: HistoryType): Promise<void> {
  */
 export async function clearAllHistory(): Promise<void> {
   await Promise.all(
-    Object.values(HistoryType).map(type => clearHistory(type as HistoryType))
-  );
-}
\ No newline at end of file
+    Object.values(HistoryType).map(async type => clearHistory(type as HistoryType)),
+  )
+}
diff --git a/src/client/store/useAutoAction.ts b/src/client/store/useAutoAction.ts
index 0640f8d..281c28a 100644
--- a/src/client/store/useAutoAction.ts
+++ b/src/client/store/useAutoAction.ts
@@ -1,59 +1,62 @@
-import { acceptHMRUpdate, defineStore } from 'pinia';
-import { computed, ref, watch } from 'vue';
-import { useAccount } from '@/api/account.js';
-import { EventDataTypes, EventModel } from '@/api/api-models.js';
-import { useDanmakuClient } from '@/store/useDanmakuClient.js';
-import { useBiliFunction } from './useBiliFunction.js';
-import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval';
-import { evaluateTemplateExpressions } from './autoAction/expressionEvaluator';
+import type {
+  AutoActionItem,
+  RuntimeState
+} from './autoAction/types.js'
+import type { EventModel } from '@/api/api-models.js'
+import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+import { useAccount } from '@/api/account.js'
+import { EventDataTypes } from '@/api/api-models.js'
+import { isDev } from '@/data/constants.js'
+import { useDanmakuClient } from '@/store/useDanmakuClient.js'
+import { usePointStore } from '@/store/usePointStore'
+import { evaluateTemplateExpressions } from './autoAction/expressionEvaluator'
+
+import { useAutoReply } from './autoAction/modules/autoReply'
+import { useCheckIn } from './autoAction/modules/checkin'
+import { useEntryWelcome } from './autoAction/modules/entryWelcome'
+import { useFollowThank } from './autoAction/modules/followThank'
+import { useGiftThank } from './autoAction/modules/giftThank'
+import { useGuardPm } from './autoAction/modules/guardPm'
+import { useScheduledDanmaku } from './autoAction/modules/scheduledDanmaku'
+import { useSuperChatThank } from './autoAction/modules/superChatThank'
 import {
   ActionType,
+
   KeywordMatchType,
   Priority,
-  RuntimeState,
   TriggerType,
-  type AutoActionItem
-} from './autoAction/types.js';
+} from './autoAction/types.js'
 import {
   buildExecutionContext,
   createDefaultAutoAction,
   createDefaultRuntimeState,
-  getRandomTemplate
-} from './autoAction/utils';
-import { isDev } from '@/data/constants.js';
-
-import { usePointStore } from '@/store/usePointStore';
-import { useAutoReply } from './autoAction/modules/autoReply';
-import { useEntryWelcome } from './autoAction/modules/entryWelcome';
-import { useFollowThank } from './autoAction/modules/followThank';
-import { useGiftThank } from './autoAction/modules/giftThank';
-import { useGuardPm } from './autoAction/modules/guardPm';
-import { useScheduledDanmaku } from './autoAction/modules/scheduledDanmaku';
-import { useSuperChatThank } from './autoAction/modules/superChatThank';
-import { useCheckIn } from './autoAction/modules/checkin';
-
+  getRandomTemplate,
+} from './autoAction/utils'
+import { useBiliFunction } from './useBiliFunction.js'
 
 export const useAutoAction = defineStore('autoAction', () => {
-  const danmakuClient = useDanmakuClient();
-  const biliFunc = useBiliFunction();
-  const account = useAccount();
-  const pointStore = usePointStore();
+  const danmakuClient = useDanmakuClient()
+  const biliFunc = useBiliFunction()
+  const account = useAccount()
+  const pointStore = usePointStore()
 
   // 共享状态
-  const isLive = computed(() => account.value.streamerInfo?.isStreaming ?? false);
-  const roomId = computed(() => isDev ? 1294406 : account.value.streamerInfo?.roomId);
-  const isTianXuanActive = ref(false);
-  const liveStartTime = ref<number | null>(null);
+  const isLive = computed(() => account.value.streamerInfo?.isStreaming ?? false)
+  const roomId = computed(() => isDev ? 1294406 : account.value.streamerInfo?.roomId)
+  const isTianXuanActive = ref(false)
+  const liveStartTime = ref<number | null>(null)
 
   // 存储自动操作项
   const { data: autoActions, isFinished: isActionsLoaded } = useIDBKeyval<AutoActionItem[]>('autoAction.items', [], {
     onError: (err) => {
-      console.error('[AutoAction] IDB 错误 (项目):', err);
-    }
-  });
+      console.error('[AutoAction] IDB 错误 (项目):', err)
+    },
+  })
 
   // 运行时状态
-  const runtimeState = ref<RuntimeState>(createDefaultRuntimeState());
+  const runtimeState = ref<RuntimeState>(createDefaultRuntimeState())
 
   // 触发类型启用状态
   const { data: enabledTriggerTypes, isFinished: isTriggersLoaded } = useIDBKeyval<Record<TriggerType, boolean>>('autoAction.enabledTriggers', {
@@ -63,24 +66,24 @@ export const useAutoAction = defineStore('autoAction', () => {
     [TriggerType.FOLLOW]: true,
     [TriggerType.ENTER]: true,
     [TriggerType.SCHEDULED]: true,
-    [TriggerType.SUPER_CHAT]: true
+    [TriggerType.SUPER_CHAT]: true,
   }, {
-    onError: (err) => console.error('[AutoAction] IDB 错误 (触发类型):', err)
-  });
+    onError: err => console.error('[AutoAction] IDB 错误 (触发类型):', err),
+  })
 
   /**
    * 设置触发类型启用状态
    */
   function setTriggerTypeEnabled(triggerType: TriggerType, enabled: boolean) {
     if (enabledTriggerTypes.value) {
-      enabledTriggerTypes.value[triggerType] = enabled;
+      enabledTriggerTypes.value[triggerType] = enabled
 
       if (triggerType === TriggerType.SCHEDULED) {
         if (enabled) {
-          startIndividualScheduledActions();
-          startGlobalTimer();
+          startIndividualScheduledActions()
+          startGlobalTimer()
         } else {
-          stopAllIndividualScheduledActions();
+          stopAllIndividualScheduledActions()
         }
       }
     }
@@ -88,76 +91,76 @@ export const useAutoAction = defineStore('autoAction', () => {
 
   // 全局定时器设置
   const { data: globalIntervalSeconds, isFinished: isIntervalLoaded } = useIDBKeyval<number>('autoAction.globalInterval', 300, {
-    onError: (err) => console.error('[AutoAction] IDB 错误 (间隔):', err)
-  });
+    onError: err => console.error('[AutoAction] IDB 错误 (间隔):', err),
+  })
   const { data: globalSchedulingMode, isFinished: isModeLoaded } = useIDBKeyval<'random' | 'sequential'>('autoAction.globalMode', 'random', {
-    onError: (err) => console.error('[AutoAction] IDB 错误 (模式):', err)
-  });
+    onError: err => console.error('[AutoAction] IDB 错误 (模式):', err),
+  })
   const { data: lastGlobalActionIndex, isFinished: isIndexLoaded } = useIDBKeyval<number>('autoAction.lastGlobalIndex', -1, {
-    onError: (err) => console.error('[AutoAction] IDB 错误 (上次索引):', err)
-  });
+    onError: err => console.error('[AutoAction] IDB 错误 (上次索引):', err),
+  })
 
-  const globalTimer = ref<any | null>(null);
+  const globalTimer = ref<any | null>(null)
 
   /**
    * 全局定时器触发处理函数
    */
   function handleGlobalTimerTick() {
     if (!roomId.value || !isActionsLoaded.value) {
-      console.warn('[AutoAction] 全局定时器触发跳过: 房间ID或操作项未就绪.');
-      return;
+      console.warn('[AutoAction] 全局定时器触发跳过: 房间ID或操作项未就绪.')
+      return
     }
     if (!enabledTriggerTypes.value || !enabledTriggerTypes.value[TriggerType.SCHEDULED]) {
-      console.log('[AutoAction] 全局定时器触发跳过: 定时任务类型已禁用.');
-      return;
+      console.log('[AutoAction] 全局定时器触发跳过: 定时任务类型已禁用.')
+      return
     }
 
     const eligibleActions = autoActions.value.filter(action =>
-      action.triggerType === TriggerType.SCHEDULED &&
-      action.enabled &&
-      action.triggerConfig.useGlobalTimer &&
-      (!action.triggerConfig.onlyDuringLive || isLive.value) &&
-      (!action.triggerConfig.ignoreTianXuan || !isTianXuanActive.value)
-    );
+      action.triggerType === TriggerType.SCHEDULED
+      && action.enabled
+      && action.triggerConfig.useGlobalTimer
+      && (!action.triggerConfig.onlyDuringLive || isLive.value)
+      && (!action.triggerConfig.ignoreTianXuan || !isTianXuanActive.value),
+    )
 
     if (eligibleActions.length > 0) {
-      let actionToExecute: AutoActionItem | null = null;
+      let actionToExecute: AutoActionItem | null = null
       if (globalSchedulingMode.value === 'random') {
-        const randomIndex = Math.floor(Math.random() * eligibleActions.length);
-        actionToExecute = eligibleActions[randomIndex];
+        const randomIndex = Math.floor(Math.random() * eligibleActions.length)
+        actionToExecute = eligibleActions[randomIndex]
       } else {
-        lastGlobalActionIndex.value = (lastGlobalActionIndex.value + 1) % eligibleActions.length;
-        actionToExecute = eligibleActions[lastGlobalActionIndex.value];
+        lastGlobalActionIndex.value = (lastGlobalActionIndex.value + 1) % eligibleActions.length
+        actionToExecute = eligibleActions[lastGlobalActionIndex.value]
       }
 
       if (actionToExecute) {
-        const context = buildExecutionContext(null, roomId.value, TriggerType.SCHEDULED);
-        const template = getRandomTemplate(actionToExecute.template);
+        const context = buildExecutionContext(null, roomId.value, TriggerType.SCHEDULED)
+        const template = getRandomTemplate(actionToExecute.template)
         if (template && roomId.value) {
-          const formattedContent = evaluateTemplateExpressions(template, context);
-          runtimeState.value.lastExecutionTime[actionToExecute.id] = Date.now();
+          const formattedContent = evaluateTemplateExpressions(template, context)
+          runtimeState.value.lastExecutionTime[actionToExecute.id] = Date.now()
           if (actionToExecute.actionConfig.delaySeconds && actionToExecute.actionConfig.delaySeconds > 0) {
             setTimeout(() => {
-              biliFunc.sendLiveDanmaku(roomId.value!, formattedContent).catch(err => console.error("[AutoAction] 发送弹幕失败:", err));
-            }, actionToExecute.actionConfig.delaySeconds * 1000);
+              biliFunc.sendLiveDanmaku(roomId.value!, formattedContent).catch(err => console.error('[AutoAction] 发送弹幕失败:', err))
+            }, actionToExecute.actionConfig.delaySeconds * 1000)
           } else {
-            biliFunc.sendLiveDanmaku(roomId.value, formattedContent).catch(err => console.error("[AutoAction] 发送弹幕失败:", err));
+            biliFunc.sendLiveDanmaku(roomId.value, formattedContent).catch(err => console.error('[AutoAction] 发送弹幕失败:', err))
           }
         }
       }
     } else {
-      console.log('[AutoAction] 当前没有符合条件的全局定时任务可执行，跳过本次执行。');
+      console.log('[AutoAction] 当前没有符合条件的全局定时任务可执行，跳过本次执行。')
     }
 
-    const intervalMs = globalIntervalSeconds.value * 1000;
+    const intervalMs = globalIntervalSeconds.value * 1000
     if (intervalMs > 0) {
       if (globalTimer.value) {
-        clearTimeout(globalTimer.value);
+        clearTimeout(globalTimer.value)
       }
-      globalTimer.value = setTimeout(handleGlobalTimerTick, intervalMs);
-      runtimeState.value.globalTimerStartTime = Date.now();
+      globalTimer.value = setTimeout(handleGlobalTimerTick, intervalMs)
+      runtimeState.value.globalTimerStartTime = Date.now()
     } else {
-      console.warn('[AutoAction] 全局定时器间隔无效，无法安排下一次触发。');
+      console.warn('[AutoAction] 全局定时器间隔无效，无法安排下一次触发。')
     }
   }
 
@@ -165,21 +168,21 @@ export const useAutoAction = defineStore('autoAction', () => {
    * 启动全局定时器
    */
   function startGlobalTimer() {
-    if (globalTimer.value || !isActionsLoaded.value) return;
-    if (!enabledTriggerTypes.value || !enabledTriggerTypes.value[TriggerType.SCHEDULED]) return;
+    if (globalTimer.value || !isActionsLoaded.value) return
+    if (!enabledTriggerTypes.value || !enabledTriggerTypes.value[TriggerType.SCHEDULED]) return
 
     const needsGlobalTimer = autoActions.value.some(action =>
-      action.triggerType === TriggerType.SCHEDULED &&
-      action.triggerConfig.useGlobalTimer
-    );
+      action.triggerType === TriggerType.SCHEDULED
+      && action.triggerConfig.useGlobalTimer,
+    )
 
     if (needsGlobalTimer && globalIntervalSeconds.value > 0) {
-      const intervalMs = globalIntervalSeconds.value * 1000;
-      if (globalTimer.value) clearTimeout(globalTimer.value);
-      globalTimer.value = setTimeout(handleGlobalTimerTick, intervalMs);
-      runtimeState.value.globalTimerStartTime = Date.now();
+      const intervalMs = globalIntervalSeconds.value * 1000
+      if (globalTimer.value) clearTimeout(globalTimer.value)
+      globalTimer.value = setTimeout(handleGlobalTimerTick, intervalMs)
+      runtimeState.value.globalTimerStartTime = Date.now()
     } else {
-      stopGlobalTimer();
+      stopGlobalTimer()
     }
   }
 
@@ -188,11 +191,11 @@ export const useAutoAction = defineStore('autoAction', () => {
    */
   function stopGlobalTimer() {
     if (globalTimer.value) {
-      console.log('[AutoAction] 停止全局定时器.');
-      clearTimeout(globalTimer.value);
-      globalTimer.value = null;
-      lastGlobalActionIndex.value = -1;
-      runtimeState.value.globalTimerStartTime = null;
+      console.log('[AutoAction] 停止全局定时器.')
+      clearTimeout(globalTimer.value)
+      globalTimer.value = null
+      lastGlobalActionIndex.value = -1
+      runtimeState.value.globalTimerStartTime = null
     }
   }
 
@@ -200,9 +203,9 @@ export const useAutoAction = defineStore('autoAction', () => {
    * 重启全局定时器
    */
   function restartGlobalTimer() {
-    stopGlobalTimer();
+    stopGlobalTimer()
     if (isActionsLoaded.value) {
-      startGlobalTimer();
+      startGlobalTimer()
     }
   }
 
@@ -210,11 +213,11 @@ export const useAutoAction = defineStore('autoAction', () => {
    * 停止指定的独立定时器
    */
   function stopIndividualTimer(actionId: string) {
-    const timer = runtimeState.value.scheduledTimers[actionId];
+    const timer = runtimeState.value.scheduledTimers[actionId]
     if (timer) {
-      clearTimeout(timer);
-      delete runtimeState.value.scheduledTimers[actionId];
-      delete runtimeState.value.timerStartTimes[actionId];
+      clearTimeout(timer)
+      delete runtimeState.value.scheduledTimers[actionId]
+      delete runtimeState.value.timerStartTimes[actionId]
     }
   }
 
@@ -222,73 +225,73 @@ export const useAutoAction = defineStore('autoAction', () => {
    * 为指定的独立定时任务启动定时器
    */
   function startIndividualTimer(action: AutoActionItem) {
-    if (runtimeState.value.scheduledTimers[action.id] || !action.enabled || action.triggerConfig.useGlobalTimer) return;
+    if (runtimeState.value.scheduledTimers[action.id] || !action.enabled || action.triggerConfig.useGlobalTimer) return
 
-    const intervalSeconds = action.triggerConfig.intervalSeconds || 300;
-    if (intervalSeconds <= 0) return;
+    const intervalSeconds = action.triggerConfig.intervalSeconds || 300
+    if (intervalSeconds <= 0) return
 
-    const intervalMs = intervalSeconds * 1000;
+    const intervalMs = intervalSeconds * 1000
 
     const timerFunc = () => {
-      const currentAction = autoActions.value.find(a => a.id === action.id);
+      const currentAction = autoActions.value.find(a => a.id === action.id)
       if (!currentAction) {
-        stopIndividualTimer(action.id);
-        return;
+        stopIndividualTimer(action.id)
+        return
       }
-      const shouldExecute = currentAction.enabled &&
-        !currentAction.triggerConfig.useGlobalTimer &&
-        (!currentAction.triggerConfig.onlyDuringLive || isLive.value) &&
-        (!currentAction.triggerConfig.ignoreTianXuan || !isTianXuanActive.value);
+      const shouldExecute = currentAction.enabled
+        && !currentAction.triggerConfig.useGlobalTimer
+        && (!currentAction.triggerConfig.onlyDuringLive || isLive.value)
+        && (!currentAction.triggerConfig.ignoreTianXuan || !isTianXuanActive.value)
 
       if (shouldExecute) {
-        const context = buildExecutionContext(null, roomId.value, TriggerType.SCHEDULED);
-        const template = getRandomTemplate(currentAction.template);
+        const context = buildExecutionContext(null, roomId.value, TriggerType.SCHEDULED)
+        const template = getRandomTemplate(currentAction.template)
         if (template && roomId.value) {
-          const formattedContent = evaluateTemplateExpressions(template, context);
-          runtimeState.value.lastExecutionTime[currentAction.id] = Date.now();
+          const formattedContent = evaluateTemplateExpressions(template, context)
+          runtimeState.value.lastExecutionTime[currentAction.id] = Date.now()
           if (currentAction.actionConfig.delaySeconds && currentAction.actionConfig.delaySeconds > 0) {
             setTimeout(() => {
-              biliFunc.sendLiveDanmaku(roomId.value!, formattedContent).catch(err => console.error("[AutoAction] 发送弹幕失败:", err));
-            }, currentAction.actionConfig.delaySeconds * 1000);
+              biliFunc.sendLiveDanmaku(roomId.value!, formattedContent).catch(err => console.error('[AutoAction] 发送弹幕失败:', err))
+            }, currentAction.actionConfig.delaySeconds * 1000)
           } else {
-            biliFunc.sendLiveDanmaku(roomId.value, formattedContent).catch(err => console.error("[AutoAction] 发送弹幕失败:", err));
+            biliFunc.sendLiveDanmaku(roomId.value, formattedContent).catch(err => console.error('[AutoAction] 发送弹幕失败:', err))
           }
         }
       }
 
       if (currentAction.enabled && !currentAction.triggerConfig.useGlobalTimer) {
-        const rescheduleIntervalMs = (currentAction.triggerConfig.intervalSeconds || 300) * 1000;
-        runtimeState.value.scheduledTimers[action.id] = setTimeout(timerFunc, rescheduleIntervalMs);
-        runtimeState.value.timerStartTimes[action.id] = Date.now();
+        const rescheduleIntervalMs = (currentAction.triggerConfig.intervalSeconds || 300) * 1000
+        runtimeState.value.scheduledTimers[action.id] = setTimeout(timerFunc, rescheduleIntervalMs)
+        runtimeState.value.timerStartTimes[action.id] = Date.now()
       } else {
-        stopIndividualTimer(action.id);
+        stopIndividualTimer(action.id)
       }
-    };
-    runtimeState.value.scheduledTimers[action.id] = setTimeout(timerFunc, intervalMs);
-    runtimeState.value.timerStartTimes[action.id] = Date.now();
+    }
+    runtimeState.value.scheduledTimers[action.id] = setTimeout(timerFunc, intervalMs)
+    runtimeState.value.timerStartTimes[action.id] = Date.now()
   }
 
   /**
    * 启动所有已启用的独立定时任务
    */
   function startIndividualScheduledActions() {
-    if (!roomId.value || !autoActions.value) return;
-    if (!enabledTriggerTypes.value[TriggerType.SCHEDULED]) return;
+    if (!roomId.value || !autoActions.value) return
+    if (!enabledTriggerTypes.value[TriggerType.SCHEDULED]) return
 
     const individualActions = autoActions.value.filter(action =>
-      action.triggerType === TriggerType.SCHEDULED &&
-      action.enabled &&
-      !action.triggerConfig.useGlobalTimer
-    );
-    individualActions.forEach(action => startIndividualTimer(action));
+      action.triggerType === TriggerType.SCHEDULED
+      && action.enabled
+      && !action.triggerConfig.useGlobalTimer,
+    )
+    individualActions.forEach(action => startIndividualTimer(action))
   }
 
   /**
    * 停止所有独立定时任务的定时器
    */
   function stopAllIndividualScheduledActions() {
-    console.log('[AutoAction] 停止所有独立定时器.');
-    Object.keys(runtimeState.value.scheduledTimers).forEach(stopIndividualTimer);
+    console.log('[AutoAction] 停止所有独立定时器.')
+    Object.keys(runtimeState.value.scheduledTimers).forEach(stopIndividualTimer)
   }
 
   // 初始化与事件监听
@@ -298,74 +301,73 @@ export const useAutoAction = defineStore('autoAction', () => {
    */
   function init() {
     if (isInited) {
-      return;
+      return
     }
-    isInited = true;
-    const allLoaded = computed(() => isActionsLoaded.value && isIntervalLoaded.value && isModeLoaded.value && isIndexLoaded.value && isTriggersLoaded.value);
+    isInited = true
+    const allLoaded = computed(() => isActionsLoaded.value && isIntervalLoaded.value && isModeLoaded.value && isIndexLoaded.value && isTriggersLoaded.value)
 
     watch(allLoaded, (loaded) => {
       if (loaded) {
-        console.log('[AutoAction] 所有设置已从 IDB 加载.');
-        autoActions.value.forEach(action => {
-          if (!action.triggerConfig) action.triggerConfig = {};
+        console.log('[AutoAction] 所有设置已从 IDB 加载.')
+        autoActions.value.forEach((action) => {
+          if (!action.triggerConfig) action.triggerConfig = {}
           if (action.triggerType === TriggerType.SCHEDULED) {
-            if (action.triggerConfig.useGlobalTimer === undefined) action.triggerConfig.useGlobalTimer = false;
-            if (action.triggerConfig.intervalSeconds === undefined) action.triggerConfig.intervalSeconds = 300;
-            if (action.triggerConfig.schedulingMode === undefined) action.triggerConfig.schedulingMode = 'random';
+            if (action.triggerConfig.useGlobalTimer === undefined) action.triggerConfig.useGlobalTimer = false
+            if (action.triggerConfig.intervalSeconds === undefined) action.triggerConfig.intervalSeconds = 300
+            if (action.triggerConfig.schedulingMode === undefined) action.triggerConfig.schedulingMode = 'random'
           }
-        });
+        })
 
-        startGlobalTimer();
-        startIndividualScheduledActions();
+        startGlobalTimer()
+        startIndividualScheduledActions()
       }
-    }, { immediate: true });
+    }, { immediate: true })
 
     // 监听直播状态变化
     watch(isLive, (currentState, prevState) => {
       if (currentState && !prevState) {
-        console.log('[AutoAction] 检测到直播开始，更新签到模块状态');
-        //checkInModule.onLiveStart();
+        console.log('[AutoAction] 检测到直播开始，更新签到模块状态')
+        // checkInModule.onLiveStart();
+      } else if (!currentState && prevState) {
+        console.log('[AutoAction] 检测到直播结束，更新签到模块状态')
+        // checkInModule.onLiveEnd();
       }
-      else if (!currentState && prevState) {
-        console.log('[AutoAction] 检测到直播结束，更新签到模块状态');
-        //checkInModule.onLiveEnd();
-      }
-    }, { immediate: true });
+    }, { immediate: true })
 
-    registerEventListeners();
+    registerEventListeners()
   }
 
   // 初始化模块
-  const giftThankModule = useGiftThank(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku);
+  const giftThankModule = useGiftThank(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku)
   const guardPmModule = useGuardPm(
     roomId,
-    (userId: number, message: string) => biliFunc.sendPrivateMessage(userId, message),
-    biliFunc.sendLiveDanmaku
-  );
-  const followThankModule = useFollowThank(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku);
-  const entryWelcomeModule = useEntryWelcome(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku);
-  const autoReplyModule = useAutoReply(isLive, roomId, biliFunc.sendLiveDanmaku);
-  const scheduledDanmakuModule = useScheduledDanmaku(isLive, roomId, biliFunc.sendLiveDanmaku);
-  const superChatThankModule = useSuperChatThank(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku);
-  const checkInModule = useCheckIn(isLive, roomId, liveStartTime, isTianXuanActive, biliFunc.sendLiveDanmaku);
+    async (userId: number, message: string) => biliFunc.sendPrivateMessage(userId, message),
+    biliFunc.sendLiveDanmaku,
+  )
+  const followThankModule = useFollowThank(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku)
+  const entryWelcomeModule = useEntryWelcome(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku)
+  const autoReplyModule = useAutoReply(isLive, roomId, biliFunc.sendLiveDanmaku)
+  const scheduledDanmakuModule = useScheduledDanmaku(isLive, roomId, biliFunc.sendLiveDanmaku)
+  const superChatThankModule = useSuperChatThank(isLive, roomId, isTianXuanActive, biliFunc.sendLiveDanmaku)
+  const checkInModule = useCheckIn(isLive, roomId, liveStartTime, isTianXuanActive, biliFunc.sendLiveDanmaku)
 
   /**
    * 向弹幕客户端注册事件监听器
    */
   function registerEventListeners() {
     if (danmakuClient.state !== 'connected') {
-      console.warn('[AutoAction] 弹幕客户端未就绪, 延迟注册监听器.');
+      console.warn('[AutoAction] 弹幕客户端未就绪, 延迟注册监听器.')
     }
     try {
-      danmakuClient.onEvent('danmaku', (event) => processEvent(event, TriggerType.DANMAKU));
-      danmakuClient.onEvent('gift', (event) => processEvent(event, TriggerType.GIFT));
-      danmakuClient.onEvent('guard', (event) => processEvent(event, TriggerType.GUARD));
-      danmakuClient.onEvent('sc', (event) => processEvent(event, TriggerType.SUPER_CHAT));
-      danmakuClient.onEvent('enter', (event) => processEvent(event, TriggerType.ENTER));
-      danmakuClient.onEvent('follow', (event) => processEvent(event, TriggerType.FOLLOW));
-      console.log('[AutoAction] 事件监听器已注册.');
+      danmakuClient.onEvent('danmaku', event => processEvent(event, TriggerType.DANMAKU))
+      danmakuClient.onEvent('gift', event => processEvent(event, TriggerType.GIFT))
+      danmakuClient.onEvent('guard', event => processEvent(event, TriggerType.GUARD))
+      danmakuClient.onEvent('sc', event => processEvent(event, TriggerType.SUPER_CHAT))
+      danmakuClient.onEvent('enter', event => processEvent(event, TriggerType.ENTER))
+      danmakuClient.onEvent('follow', event => processEvent(event, TriggerType.FOLLOW))
+      console.log('[AutoAction] 事件监听器已注册.')
     } catch (err) {
-      console.error('[AutoAction] 注册事件监听器时出错:', err);
+      console.error('[AutoAction] 注册事件监听器时出错:', err)
     }
   }
 
@@ -373,36 +375,36 @@ export const useAutoAction = defineStore('autoAction', () => {
    * 添加一个新的自动操作项
    */
   function addAutoAction(triggerType: TriggerType): AutoActionItem {
-    const newAction = createDefaultAutoAction(triggerType);
-    autoActions.value.push(newAction);
+    const newAction = createDefaultAutoAction(triggerType)
+    autoActions.value.push(newAction)
     if (triggerType === TriggerType.SCHEDULED) {
       if (newAction.triggerConfig.useGlobalTimer) {
-        restartGlobalTimer();
+        restartGlobalTimer()
       } else {
-        startIndividualTimer(newAction);
+        startIndividualTimer(newAction)
       }
     }
-    return newAction;
+    return newAction
   }
 
   /**
    * 移除一个自动操作项
    */
   function removeAutoAction(id: string) {
-    const index = autoActions.value.findIndex(action => action.id === id);
+    const index = autoActions.value.findIndex(action => action.id === id)
     if (index !== -1) {
-      const removedAction = autoActions.value[index];
-      let needsGlobalTimerAfterRemoval = false;
-      let wasGlobalTimerAction = false;
+      const removedAction = autoActions.value[index]
+      const needsGlobalTimerAfterRemoval = false
+      const wasGlobalTimerAction = false
 
       if (removedAction.triggerType === TriggerType.SCHEDULED) {
-        stopIndividualTimer(id);
+        stopIndividualTimer(id)
       }
 
-      autoActions.value.splice(index, 1);
+      autoActions.value.splice(index, 1)
 
       if (wasGlobalTimerAction && needsGlobalTimerAfterRemoval) {
-        restartGlobalTimer();
+        restartGlobalTimer()
       }
     }
   }
@@ -411,18 +413,18 @@ export const useAutoAction = defineStore('autoAction', () => {
    * 切换自动操作项的启用/禁用状态
    */
   function toggleAutoAction(id: string, enabled: boolean) {
-    const action = autoActions.value.find(action => action.id === id);
+    const action = autoActions.value.find(action => action.id === id)
     if (action) {
-      action.enabled = enabled;
+      action.enabled = enabled
 
       if (action.triggerType === TriggerType.SCHEDULED) {
         if (action.triggerConfig.useGlobalTimer) {
-          restartGlobalTimer();
+          restartGlobalTimer()
         } else {
           if (enabled) {
-            startIndividualTimer(action);
+            startIndividualTimer(action)
           } else {
-            stopIndividualTimer(id);
+            stopIndividualTimer(id)
           }
         }
       }
@@ -433,108 +435,108 @@ export const useAutoAction = defineStore('autoAction', () => {
   function checkTianXuanStatus() {
     // TODO: 实现检查天选时刻状态的逻辑
   }
-  const tianXuanTimer = setInterval(checkTianXuanStatus, 5 * 60 * 1000);
+  const tianXuanTimer = setInterval(checkTianXuanStatus, 5 * 60 * 1000)
 
   /**
    * 处理接收到的事件
    */
   function processEvent(event: EventModel, triggerType: TriggerType) {
-    if (!roomId.value) return;
+    if (!roomId.value) return
 
     // 处理签到功能（独立于触发类型启用状态）
     if (triggerType === TriggerType.DANMAKU) {
-      checkInModule.processCheckIn(event, runtimeState.value);
+      checkInModule.processCheckIn(event, runtimeState.value)
     }
 
     // 其他功能依赖触发类型启用状态
-    if (!enabledTriggerTypes.value[triggerType]) return;
+    if (!enabledTriggerTypes.value[triggerType]) return
     switch (triggerType) {
       case TriggerType.DANMAKU:
-        autoReplyModule.onDanmaku(event, autoActions.value, runtimeState.value);
-        break;
+        autoReplyModule.onDanmaku(event, autoActions.value, runtimeState.value)
+        break
       case TriggerType.GIFT:
-        giftThankModule.processGift(event, autoActions.value, runtimeState.value);
-        break;
+        giftThankModule.processGift(event, autoActions.value, runtimeState.value)
+        break
       case TriggerType.GUARD:
-        guardPmModule.handleGuardBuy(autoActions.value, event, runtimeState.value);
-        break;
+        guardPmModule.handleGuardBuy(autoActions.value, event, runtimeState.value)
+        break
       case TriggerType.FOLLOW:
-        followThankModule.processFollow(event, autoActions.value, runtimeState.value);
-        break;
+        followThankModule.processFollow(event, autoActions.value, runtimeState.value)
+        break
       case TriggerType.ENTER:
-        entryWelcomeModule.processEnter(event, autoActions.value, runtimeState.value);
-        break;
+        entryWelcomeModule.processEnter(event, autoActions.value, runtimeState.value)
+        break
       case TriggerType.SUPER_CHAT:
-        superChatThankModule.processSuperChat(event, autoActions.value, runtimeState.value);
-        break;
+        superChatThankModule.processSuperChat(event, autoActions.value, runtimeState.value)
+        break
       default:
-        console.warn(`[AutoAction] 未知触发类型: ${triggerType}`);
+        console.warn(`[AutoAction] 未知触发类型: ${triggerType}`)
     }
   }
 
   /**
    * 获取定时任务的计时器信息
    */
-  function getScheduledTimerInfo(actionId: string): { actionId: string; intervalMs: number; remainingMs: number } | null {
-    const action = autoActions.value.find(a => a.id === actionId);
+  function getScheduledTimerInfo(actionId: string): { actionId: string, intervalMs: number, remainingMs: number } | null {
+    const action = autoActions.value.find(a => a.id === actionId)
     if (!action || action.triggerType !== TriggerType.SCHEDULED || !action.enabled) {
-      return null;
+      return null
     }
 
-    const usingGlobal = action.triggerConfig.useGlobalTimer ?? false;
-    let intervalSeconds: number;
-    let isActive = false;
-    let startTime: number | null = null;
+    const usingGlobal = action.triggerConfig.useGlobalTimer ?? false
+    let intervalSeconds: number
+    let isActive = false
+    let startTime: number | null = null
 
     if (usingGlobal) {
-      intervalSeconds = globalIntervalSeconds.value;
-      isActive = globalTimer.value !== null;
-      startTime = runtimeState.value.globalTimerStartTime;
+      intervalSeconds = globalIntervalSeconds.value
+      isActive = globalTimer.value !== null
+      startTime = runtimeState.value.globalTimerStartTime
     } else {
-      intervalSeconds = action.triggerConfig.intervalSeconds || 300;
-      isActive = !!runtimeState.value.scheduledTimers[actionId];
-      startTime = runtimeState.value.timerStartTimes[actionId] ?? null;
+      intervalSeconds = action.triggerConfig.intervalSeconds || 300
+      isActive = !!runtimeState.value.scheduledTimers[actionId]
+      startTime = runtimeState.value.timerStartTimes[actionId] ?? null
     }
 
     if (!isActive || intervalSeconds <= 0 || startTime === null) {
-      return null;
+      return null
     }
 
-    const intervalMs = intervalSeconds * 1000;
-    const now = Date.now();
-    const remainingMs = Math.max(0, startTime + intervalMs - now);
+    const intervalMs = intervalSeconds * 1000
+    const now = Date.now()
+    const remainingMs = Math.max(0, startTime + intervalMs - now)
 
     return {
       actionId,
       intervalMs,
-      remainingMs
-    };
+      remainingMs,
+    }
   }
 
   /**
    * 在列表中向上或向下移动一个操作项
    */
   function moveAction(id: string, direction: 'up' | 'down') {
-    const index = autoActions.value.findIndex(action => action.id === id);
+    const index = autoActions.value.findIndex(action => action.id === id)
     if (index === -1) {
-      console.warn(`[AutoAction] 无法移动操作: 未找到 ID ${id}.`);
-      return;
+      console.warn(`[AutoAction] 无法移动操作: 未找到 ID ${id}.`)
+      return
     }
 
-    const actionToMove = autoActions.value[index];
+    const actionToMove = autoActions.value[index]
 
-    let newIndex = index;
+    let newIndex = index
     if (direction === 'up' && index > 0) {
-      newIndex = index - 1;
+      newIndex = index - 1
     } else if (direction === 'down' && index < autoActions.value.length - 1) {
-      newIndex = index + 1;
+      newIndex = index + 1
     }
 
     if (newIndex !== index) {
-      autoActions.value.splice(index, 1);
-      autoActions.value.splice(newIndex, 0, actionToMove);
+      autoActions.value.splice(index, 1)
+      autoActions.value.splice(newIndex, 0, actionToMove)
       if (actionToMove.triggerType === TriggerType.SCHEDULED && actionToMove.triggerConfig.useGlobalTimer) {
-        lastGlobalActionIndex.value = -1;
+        lastGlobalActionIndex.value = -1
       }
     }
   }
@@ -542,86 +544,86 @@ export const useAutoAction = defineStore('autoAction', () => {
   // 监听全局间隔设置的变化
   watch(globalIntervalSeconds, (newInterval, oldInterval) => {
     if (newInterval !== oldInterval && newInterval > 0) {
-      console.log('[AutoAction] 全局间隔已更改, 重启全局定时器.');
-      restartGlobalTimer();
+      console.log('[AutoAction] 全局间隔已更改, 重启全局定时器.')
+      restartGlobalTimer()
     }
-  });
+  })
 
   /**
    * 获取下一个将在全局顺序模式下执行的操作
    */
   const nextScheduledAction = computed<AutoActionItem | null>(() => {
     if (globalSchedulingMode.value !== 'sequential' || !autoActions.value) {
-      return null;
+      return null
     }
 
     const eligibleActions = autoActions.value.filter(action =>
-      action.triggerType === TriggerType.SCHEDULED &&
-      action.enabled &&
-      action.triggerConfig.useGlobalTimer &&
-      (!action.triggerConfig.onlyDuringLive || isLive.value) &&
-      (!action.triggerConfig.ignoreTianXuan || !isTianXuanActive.value)
-    );
+      action.triggerType === TriggerType.SCHEDULED
+      && action.enabled
+      && action.triggerConfig.useGlobalTimer
+      && (!action.triggerConfig.onlyDuringLive || isLive.value)
+      && (!action.triggerConfig.ignoreTianXuan || !isTianXuanActive.value),
+    )
 
     if (eligibleActions.length === 0) {
-      return null;
+      return null
     }
 
-    const nextIndex = (lastGlobalActionIndex.value + 1) % eligibleActions.length;
-    return eligibleActions[nextIndex];
-  });
+    const nextIndex = (lastGlobalActionIndex.value + 1) % eligibleActions.length
+    return eligibleActions[nextIndex]
+  })
 
   /**
    * 手动设置下一个在全局顺序模式下执行的操作
    */
   function setNextGlobalAction(actionId: string) {
-    const targetAction = autoActions.value.find(a => a.id === actionId);
+    const targetAction = autoActions.value.find(a => a.id === actionId)
     if (!targetAction || targetAction.triggerType !== TriggerType.SCHEDULED || !targetAction.triggerConfig.useGlobalTimer) {
-      console.warn(`[AutoAction] setNextGlobalAction: 无法设置 ID 为 ${actionId} 的操作为下一个全局操作 (不存在、类型错误或未使用全局定时器)`);
-      return;
+      console.warn(`[AutoAction] setNextGlobalAction: 无法设置 ID 为 ${actionId} 的操作为下一个全局操作 (不存在、类型错误或未使用全局定时器)`)
+      return
     }
     if (globalSchedulingMode.value !== 'sequential') {
-      console.warn(`[AutoAction] setNextGlobalAction: 只有在顺序模式下才能手动指定下一个操作。当前模式: ${globalSchedulingMode.value}`);
-      return;
+      console.warn(`[AutoAction] setNextGlobalAction: 只有在顺序模式下才能手动指定下一个操作。当前模式: ${globalSchedulingMode.value}`)
+      return
     }
 
     const eligibleActions = autoActions.value.filter(action =>
-      action.triggerType === TriggerType.SCHEDULED &&
-      action.enabled &&
-      action.triggerConfig.useGlobalTimer &&
-      (!action.triggerConfig.onlyDuringLive || isLive.value) &&
-      (!action.triggerConfig.ignoreTianXuan || !isTianXuanActive.value)
-    );
+      action.triggerType === TriggerType.SCHEDULED
+      && action.enabled
+      && action.triggerConfig.useGlobalTimer
+      && (!action.triggerConfig.onlyDuringLive || isLive.value)
+      && (!action.triggerConfig.ignoreTianXuan || !isTianXuanActive.value),
+    )
 
-    const targetIndex = eligibleActions.findIndex(a => a.id === actionId);
+    const targetIndex = eligibleActions.findIndex(a => a.id === actionId)
 
     if (targetIndex === -1) {
-      console.warn(`[AutoAction] setNextGlobalAction: 指定的操作 ID ${actionId} 当前不符合执行条件，无法设置为下一个。`);
-      return;
+      console.warn(`[AutoAction] setNextGlobalAction: 指定的操作 ID ${actionId} 当前不符合执行条件，无法设置为下一个。`)
+      return
     }
 
-    lastGlobalActionIndex.value = (targetIndex - 1 + eligibleActions.length) % eligibleActions.length;
-    restartGlobalTimer();
+    lastGlobalActionIndex.value = (targetIndex - 1 + eligibleActions.length) % eligibleActions.length
+    restartGlobalTimer()
   }
 
   /**
    * 手动触发指定类型的测试逻辑
    */
   function triggerTestActionByType(triggerType: TriggerType, testUid?: number) {
-    console.log(`[AutoAction Test] 准备测试类型: ${triggerType}`);
+    console.log(`[AutoAction Test] 准备测试类型: ${triggerType}`)
 
     const actionsToTest = autoActions.value.filter(a =>
-      a.triggerType === triggerType &&
-      a.enabled &&
-      enabledTriggerTypes.value[triggerType]
-    );
+      a.triggerType === triggerType
+      && a.enabled
+      && enabledTriggerTypes.value[triggerType],
+    )
 
     if (actionsToTest.length === 0) {
-      console.warn(`[AutoAction Test] 没有找到启用的 ${triggerType} 类型的操作可供测试。`);
+      console.warn(`[AutoAction Test] 没有找到启用的 ${triggerType} 类型的操作可供测试。`)
       if (!enabledTriggerTypes.value[triggerType]) {
-        console.warn(`[AutoAction Test] 触发类型 ${triggerType} 本身已被禁用。`);
+        console.warn(`[AutoAction Test] 触发类型 ${triggerType} 本身已被禁用。`)
       }
-      return;
+      return
     }
 
     const baseTestEvent: Partial<EventModel> = {
@@ -636,10 +638,10 @@ export const useAutoAction = defineStore('autoAction', () => {
       guard_level: Math.floor(Math.random() * 3) + 1,
       fans_medal_wearing_status: true,
       fans_medal_name: '测试牌子',
-      fans_medal_level: Math.floor(Math.random() * 30) + 1
-    };
+      fans_medal_level: Math.floor(Math.random() * 30) + 1,
+    }
 
-    let testEvent: EventModel;
+    let testEvent: EventModel
 
     switch (triggerType) {
       case TriggerType.DANMAKU:
@@ -647,79 +649,79 @@ export const useAutoAction = defineStore('autoAction', () => {
           ...baseTestEvent,
           type: EventDataTypes.Message,
           msg: '测试弹幕消息',
-        } as EventModel;
-        break;
+        } as EventModel
+        break
       case TriggerType.GIFT:
         testEvent = {
           ...baseTestEvent,
           type: EventDataTypes.Gift,
           msg: '测试礼物',
           price: 100,
-          num: 5
-        } as EventModel;
-        break;
+          num: 5,
+        } as EventModel
+        break
       case TriggerType.GUARD:
-        const level = Math.floor(Math.random() * 3) + 1;
+        const level = Math.floor(Math.random() * 3) + 1
         testEvent = {
           ...baseTestEvent,
           type: EventDataTypes.Guard,
           msg: '舰长',
           price: level === 1 ? 19998 : level === 2 ? 1998 : 198,
           guard_level: level,
-        } as EventModel;
-        break;
+        } as EventModel
+        break
       case TriggerType.FOLLOW:
         testEvent = {
           ...baseTestEvent,
           type: EventDataTypes.Follow,
-        } as EventModel;
-        break;
+        } as EventModel
+        break
       case TriggerType.ENTER:
         testEvent = {
           ...baseTestEvent,
           type: EventDataTypes.Enter,
-        } as EventModel;
-        break;
+        } as EventModel
+        break
       case TriggerType.SUPER_CHAT:
         testEvent = {
           ...baseTestEvent,
           type: EventDataTypes.SC,
           msg: '这是一条测试SC消息',
           price: Math.floor(Math.random() * 1000) + 10,
-        } as EventModel;
-        break;
+        } as EventModel
+        break
       case TriggerType.SCHEDULED:
         if (actionsToTest.length > 0) {
-          const action = actionsToTest[0];
-          const context = buildExecutionContext(null, roomId.value, TriggerType.SCHEDULED);
-          const template = getRandomTemplate(action.template);
+          const action = actionsToTest[0]
+          const context = buildExecutionContext(null, roomId.value, TriggerType.SCHEDULED)
+          const template = getRandomTemplate(action.template)
 
           if (template && roomId.value) {
-            const formattedContent = evaluateTemplateExpressions(template, context);
-            runtimeState.value.lastExecutionTime[action.id] = Date.now();
+            const formattedContent = evaluateTemplateExpressions(template, context)
+            runtimeState.value.lastExecutionTime[action.id] = Date.now()
 
-            console.log(`[定时任务测试] 正在测试定时任务: ${action.name}, 内容: ${formattedContent}`);
+            console.log(`[定时任务测试] 正在测试定时任务: ${action.name}, 内容: ${formattedContent}`)
 
             if (action.actionConfig.delaySeconds && action.actionConfig.delaySeconds > 0) {
-              console.log(`[定时任务测试] 将在 ${action.actionConfig.delaySeconds} 秒后发送弹幕`);
+              console.log(`[定时任务测试] 将在 ${action.actionConfig.delaySeconds} 秒后发送弹幕`)
               setTimeout(() => {
                 biliFunc.sendLiveDanmaku(roomId.value!, formattedContent)
-                  .catch(err => console.error("[AutoAction] 发送弹幕失败:", err));
-              }, action.actionConfig.delaySeconds * 1000);
+                  .catch(err => console.error('[AutoAction] 发送弹幕失败:', err))
+              }, action.actionConfig.delaySeconds * 1000)
             } else {
               biliFunc.sendLiveDanmaku(roomId.value, formattedContent)
-                .catch(err => console.error("[AutoAction] 发送弹幕失败:", err));
+                .catch(err => console.error('[AutoAction] 发送弹幕失败:', err))
             }
           }
         }
-        return;
+        return
       default:
-        console.warn(`[AutoAction Test] 未知的触发类型: ${triggerType}`);
-        return;
+        console.warn(`[AutoAction Test] 未知的触发类型: ${triggerType}`)
+        return
     }
 
-    console.log(`[AutoAction Test] 创建测试事件:`, testEvent);
-    processEvent(testEvent, triggerType);
+    console.log(`[AutoAction Test] 创建测试事件:`, testEvent)
+    processEvent(testEvent, triggerType)
   }
 
   return {
@@ -746,12 +748,11 @@ export const useAutoAction = defineStore('autoAction', () => {
     stopAllIndividualScheduledActions,
     startIndividualScheduledActions,
     triggerTestActionByType,
-  };
-});
+  }
+})
 
 if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useAutoAction, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useAutoAction, import.meta.hot))
 }
 
-export { ActionType, AutoActionItem, KeywordMatchType, Priority, TriggerType };
-
+export { ActionType, AutoActionItem, KeywordMatchType, Priority, TriggerType }
diff --git a/src/client/store/useBiliCookie.ts b/src/client/store/useBiliCookie.ts
index cbb8614..280fee7 100644
--- a/src/client/store/useBiliCookie.ts
+++ b/src/client/store/useBiliCookie.ts
@@ -1,72 +1,71 @@
-import { fetch as tauriFetch } from '@tauri-apps/plugin-http';
-import { useTauriStore } from './useTauriStore';
-import { error, info, warn, debug } from '@tauri-apps/plugin-log';
-import { AES, enc, MD5 } from 'crypto-js';
-import { QueryBiliAPI } from '../data/utils';
-import { BiliUserProfile } from '../data/models';
-import { defineStore, acceptHMRUpdate } from 'pinia';
-import { ref, computed, shallowRef } from 'vue';
-import { StorageSerializers } from '@vueuse/core';
+import type { BiliUserProfile } from '../data/models'
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http'
+import { debug, error, info, warn } from '@tauri-apps/plugin-log'
+import { AES, enc, MD5 } from 'crypto-js'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { computed, ref, shallowRef } from 'vue'
+import { QueryBiliAPI } from '../data/utils'
+import { useTauriStore } from './useTauriStore'
 
 // --- 常量定义 ---
 // Tauri Store 存储键名
-export const BILI_COOKIE_KEY = 'user.bilibili.cookie';
-export const COOKIE_CLOUD_KEY = 'user.bilibili.cookie_cloud';
-export const USER_INFO_CACHE_KEY = 'cache.bilibili.userInfo';
+export const BILI_COOKIE_KEY = 'user.bilibili.cookie'
+export const COOKIE_CLOUD_KEY = 'user.bilibili.cookie_cloud'
+export const USER_INFO_CACHE_KEY = 'cache.bilibili.userInfo'
 
 // 检查周期 (毫秒)
-const REGULAR_CHECK_INTERVAL = 60 * 1000; // 每分钟检查一次 Cookie 有效性
-const CLOUD_SYNC_INTERVAL_CHECKS = 30; // 每 30 次常规检查后 (约 30 分钟) 同步一次 CookieCloud
+const REGULAR_CHECK_INTERVAL = 60 * 1000 // 每分钟检查一次 Cookie 有效性
+const CLOUD_SYNC_INTERVAL_CHECKS = 30 // 每 30 次常规检查后 (约 30 分钟) 同步一次 CookieCloud
 
 // 用户信息缓存有效期 (毫秒)
-const USER_INFO_CACHE_DURATION = 5 * 60 * 1000; // 缓存 5 分钟
+const USER_INFO_CACHE_DURATION = 5 * 60 * 1000 // 缓存 5 分钟
 
 // --- 类型定义 ---
 
 // Bilibili Cookie 存储数据结构
-type BiliCookieStoreData = {
-  cookie: string;
-  refreshToken?: string; // refreshToken 似乎未使用，设为可选
-  lastRefresh?: Date; // 上次刷新时间，似乎未使用，设为可选
-};
+interface BiliCookieStoreData {
+  cookie: string
+  refreshToken?: string // refreshToken 似乎未使用，设为可选
+  lastRefresh?: Date // 上次刷新时间，似乎未使用，设为可选
+}
 
 // Cookie Cloud 配置数据结构
-export type CookieCloudConfig = {
-  key: string;
-  password: string;
-  host?: string; // CookieCloud 服务地址，可选，有默认值
-};
+export interface CookieCloudConfig {
+  key: string
+  password: string
+  host?: string // CookieCloud 服务地址，可选，有默认值
+}
 
 // CookieCloud 导出的 Cookie 单项结构
 export interface CookieCloudCookie {
-  domain: string;
-  expirationDate: number;
-  hostOnly: boolean;
-  httpOnly: boolean;
-  name: string;
-  path: string;
-  sameSite: string;
-  secure: boolean;
-  session: boolean;
-  storeId: string;
-  value: string;
+  domain: string
+  expirationDate: number
+  hostOnly: boolean
+  httpOnly: boolean
+  name: string
+  path: string
+  sameSite: string
+  secure: boolean
+  session: boolean
+  storeId: string
+  value: string
 }
 
 // CookieCloud 导出的完整数据结构
 interface CookieCloudExportData {
-  cookie_data: Record<string, CookieCloudCookie[]>; // 按域名分组的 Cookie 数组
-  local_storage_data?: Record<string, any>; // 本地存储数据 (可选)
-  update_time: string; // 更新时间 ISO 8601 字符串
+  cookie_data: Record<string, CookieCloudCookie[]> // 按域名分组的 Cookie 数组
+  local_storage_data?: Record<string, any> // 本地存储数据 (可选)
+  update_time: string // 更新时间 ISO 8601 字符串
 }
 
 // 用户信息缓存结构
-type UserInfoCache = {
-  userInfo: BiliUserProfile;
-  accessedAt: number; // 使用时间戳 (Date.now()) 以方便比较
-};
+interface UserInfoCache {
+  userInfo: BiliUserProfile
+  accessedAt: number // 使用时间戳 (Date.now()) 以方便比较
+}
 
 // CookieCloud 状态类型
-type CookieCloudState = 'unset' | 'valid' | 'invalid' | 'syncing';
+type CookieCloudState = 'unset' | 'valid' | 'invalid' | 'syncing'
 
 // --- Store 定义 ---
 
@@ -77,30 +76,30 @@ export const useBiliCookie = defineStore('biliCookie', () => {
     cookie: '',
     refreshToken: undefined, // 可选，未使用
     lastRefresh: new Date(0), // 默认值
-  }); // 为保持响应性
-  const cookieCloudStore = useTauriStore().getTarget<CookieCloudConfig>(COOKIE_CLOUD_KEY);
-  const userInfoCacheStore = useTauriStore().getTarget<UserInfoCache>(USER_INFO_CACHE_KEY);
+  }) // 为保持响应性
+  const cookieCloudStore = useTauriStore().getTarget<CookieCloudConfig>(COOKIE_CLOUD_KEY)
+  const userInfoCacheStore = useTauriStore().getTarget<UserInfoCache>(USER_INFO_CACHE_KEY)
 
   // --- 核心状态 ---
   // 使用 shallowRef 存储用户信息对象，避免不必要的深度侦听，提高性能
-  const _cachedUserInfo = shallowRef<UserInfoCache | undefined>();
+  const _cachedUserInfo = shallowRef<UserInfoCache | undefined>()
   // 是否已从存储加载了 Cookie (不代表有效)
-  const hasBiliCookie = ref(false);
+  const hasBiliCookie = ref(false)
   // 当前 Cookie 是否通过 Bilibili API 验证有效
-  const isCookieValid = ref(false);
+  const isCookieValid = ref(false)
   // CookieCloud 配置及同步状态
-  const cookieCloudState = ref<CookieCloudState>('unset');
+  const cookieCloudState = ref<CookieCloudState>('unset')
   // Bilibili 用户 ID
-  const uId = ref<number | undefined>();
+  const uId = ref<number | undefined>()
 
   // --- 计算属性 ---
   // 公开的用户信息，只读
-  const userInfo = computed(() => _cachedUserInfo.value?.userInfo);
+  const userInfo = computed(() => _cachedUserInfo.value?.userInfo)
 
   // --- 内部状态和变量 ---
-  let _isInitialized = false; // 初始化标志，防止重复执行
-  let _checkIntervalId: ReturnType<typeof setInterval> | null = null; // 定时检查器 ID
-  let _checkCounter = 0; // 常规检查计数器，用于触发 CookieCloud 同步
+  let _isInitialized = false // 初始化标志，防止重复执行
+  let _checkIntervalId: ReturnType<typeof setInterval> | null = null // 定时检查器 ID
+  let _checkCounter = 0 // 常规检查计数器，用于触发 CookieCloud 同步
 
   // --- 私有辅助函数 ---
 
@@ -109,30 +108,30 @@ export const useBiliCookie = defineStore('biliCookie', () => {
    * @param data Bilibili 用户信息
    */
   const _updateUserInfoCache = async (data: BiliUserProfile): Promise<void> => {
-    const cacheData: UserInfoCache = { userInfo: data, accessedAt: Date.now() };
-    _cachedUserInfo.value = cacheData; // 更新内存缓存
-    uId.value = data.mid; // 更新 uId
+    const cacheData: UserInfoCache = { userInfo: data, accessedAt: Date.now() }
+    _cachedUserInfo.value = cacheData // 更新内存缓存
+    uId.value = data.mid // 更新 uId
     try {
-      await userInfoCacheStore.set(cacheData); // 持久化缓存
-      debug('[BiliCookie] 用户信息缓存已更新并持久化');
+      await userInfoCacheStore.set(cacheData) // 持久化缓存
+      debug('[BiliCookie] 用户信息缓存已更新并持久化')
     } catch (err) {
-      error('[BiliCookie] 持久化用户信息缓存失败: ' + String(err));
+      error(`[BiliCookie] 持久化用户信息缓存失败: ${String(err)}`)
     }
-  };
+  }
 
   /**
    * @description 清除用户信息缓存 (内存和持久化)
    */
   const _clearUserInfoCache = async (): Promise<void> => {
-    _cachedUserInfo.value = undefined; // 清除内存缓存
-    uId.value = undefined; // 清除 uId
+    _cachedUserInfo.value = undefined // 清除内存缓存
+    uId.value = undefined // 清除 uId
     try {
-      await userInfoCacheStore.delete(); // 删除持久化缓存
-      debug('[BiliCookie] 用户信息缓存已清除');
+      await userInfoCacheStore.delete() // 删除持久化缓存
+      debug('[BiliCookie] 用户信息缓存已清除')
     } catch (err) {
-      error('[BiliCookie] 清除持久化用户信息缓存失败: ' + String(err));
+      error(`[BiliCookie] 清除持久化用户信息缓存失败: ${String(err)}`)
     }
-  };
+  }
 
   /**
    * @description 更新 Cookie 存在状态和有效状态
@@ -140,45 +139,44 @@ export const useBiliCookie = defineStore('biliCookie', () => {
    * @param isValid Cookie 是否有效
    */
   const _updateCookieState = (hasCookie: boolean, isValid: boolean): void => {
-    hasBiliCookie.value = hasCookie;
-    isCookieValid.value = isValid;
+    hasBiliCookie.value = hasCookie
+    isCookieValid.value = isValid
     if (!hasCookie || !isValid) {
       // 如果 Cookie 不存在或无效，清除可能过时的用户信息缓存
       // 注意：这里采取了更严格的策略，无效则清除缓存，避免显示旧信息
       // _clearUserInfoCache(); // 考虑是否在无效时立即清除缓存
-      debug(`[BiliCookie] Cookie 状态更新: hasCookie=${hasCookie}, isValid=${isValid}`);
+      debug(`[BiliCookie] Cookie 状态更新: hasCookie=${hasCookie}, isValid=${isValid}`)
     }
-  };
+  }
 
   /**
    * @description 检查提供的 Bilibili Cookie 是否有效
    * @param cookie 要验证的 Cookie 字符串
    * @returns Promise<{ valid: boolean; data?: BiliUserProfile }> 验证结果和用户信息 (如果有效)
    */
-  const _checkCookieValidity = async (cookie: string): Promise<{ valid: boolean; data?: BiliUserProfile; }> => {
+  const _checkCookieValidity = async (cookie: string): Promise<{ valid: boolean, data?: BiliUserProfile }> => {
     if (!cookie) {
-      return { valid: false };
+      return { valid: false }
     }
     try {
       // 使用传入的 cookie 调用 Bilibili API
-      const resp = await QueryBiliAPI('https://api.bilibili.com/x/space/myinfo', 'GET', cookie);
+      const resp = await QueryBiliAPI('https://api.bilibili.com/x/space/myinfo', 'GET', cookie)
 
-      const json = await resp.json();
+      const json = await resp.json()
       if (json.code === 0 && json.data) {
-        debug('[BiliCookie] Cookie 验证成功, 用户:', json.data.name);
+        debug('[BiliCookie] Cookie 验证成功, 用户:', json.data.name)
         // 验证成功，更新用户信息缓存
-        await _updateUserInfoCache(json.data);
-        return { valid: true, data: json.data };
+        await _updateUserInfoCache(json.data)
+        return { valid: true, data: json.data }
       } else {
-        warn(`[BiliCookie] Cookie 验证失败 (API 返回): ${json.message || `code: ${json.code}`}`);
-        return { valid: false };
+        warn(`[BiliCookie] Cookie 验证失败 (API 返回): ${json.message || `code: ${json.code}`}`)
+        return { valid: false }
       }
     } catch (err) {
-      error('[BiliCookie] 验证 Cookie 时请求 Bilibili API 出错: ' + String(err));
-      return { valid: false };
+      error(`[BiliCookie] 验证 Cookie 时请求 Bilibili API 出错: ${String(err)}`)
+      return { valid: false }
     }
-  };
-
+  }
 
   /**
    * @description 从 CookieCloud 服务获取并解密 Bilibili Cookie
@@ -187,17 +185,17 @@ export const useBiliCookie = defineStore('biliCookie', () => {
    * @throws 如果配置缺失、网络请求失败、解密失败或未找到 Bilibili Cookie，则抛出错误
    */
   const _fetchAndDecryptFromCloud = async (config?: CookieCloudConfig): Promise<string> => {
-    const cloudConfig = config ?? await cookieCloudStore.get(); // 获取配置
+    const cloudConfig = config ?? await cookieCloudStore.get() // 获取配置
 
     if (!cloudConfig?.key || !cloudConfig?.password) {
-      throw new Error("CookieCloud 配置不完整 (缺少 Key 或 Password)");
+      throw new Error('CookieCloud 配置不完整 (缺少 Key 或 Password)')
     }
 
-    const host = cloudConfig.host || "https://cookie.vtsuru.live"; // 默认 Host
-    const url = new URL(host);
-    url.pathname = `/get/${cloudConfig.key}`;
+    const host = cloudConfig.host || 'https://cookie.vtsuru.live' // 默认 Host
+    const url = new URL(host)
+    url.pathname = `/get/${cloudConfig.key}`
 
-    info(`[BiliCookie] 正在从 CookieCloud (${url.hostname}) 获取 Cookie...`);
+    info(`[BiliCookie] 正在从 CookieCloud (${url.hostname}) 获取 Cookie...`)
 
     try {
       // 注意: 浏览器环境通常无法直接设置 User-Agent
@@ -205,114 +203,111 @@ export const useBiliCookie = defineStore('biliCookie', () => {
       const response = await tauriFetch(url.toString(), {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/json' // 根据 CookieCloud API 要求可能需要调整
-        }
-      });
+          'Content-Type': 'application/json', // 根据 CookieCloud API 要求可能需要调整
+        },
+      })
 
       if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`CookieCloud 请求失败: ${response.status} ${response.statusText}. ${errorText}`);
+        const errorText = await response.text()
+        throw new Error(`CookieCloud 请求失败: ${response.status} ${response.statusText}. ${errorText}`)
       }
 
-      const json = await response.json() as any; // 类型断言需要谨慎
+      const json = await response.json() // 类型断言需要谨慎
 
       if (json.encrypted) {
         // 执行解密
         try {
-          const keyMaterial = MD5(cloudConfig.key + '-' + cloudConfig.password).toString();
-          const decryptionKey = keyMaterial.substring(0, 16); // 取前16位作为 AES 密钥
-          const decrypted = AES.decrypt(json.encrypted, decryptionKey).toString(enc.Utf8);
+          const keyMaterial = MD5(`${cloudConfig.key}-${cloudConfig.password}`).toString()
+          const decryptionKey = keyMaterial.substring(0, 16) // 取前16位作为 AES 密钥
+          const decrypted = AES.decrypt(json.encrypted, decryptionKey).toString(enc.Utf8)
 
           if (!decrypted) {
-            throw new Error("解密结果为空，可能是密钥不匹配");
+            throw new Error('解密结果为空，可能是密钥不匹配')
           }
 
-          const cookieData = JSON.parse(decrypted) as CookieCloudExportData;
+          const cookieData = JSON.parse(decrypted) as CookieCloudExportData
 
           // 提取 bilibili.com 的 Cookie
-          const biliCookies = cookieData.cookie_data?.['bilibili.com'];
+          const biliCookies = cookieData.cookie_data?.['bilibili.com']
           if (!biliCookies || biliCookies.length === 0) {
-            throw new Error("在 CookieCloud 数据中未找到 'bilibili.com' 的 Cookie");
+            throw new Error('在 CookieCloud 数据中未找到 \'bilibili.com\' 的 Cookie')
           }
 
           // 拼接 Cookie 字符串
           const cookieString = biliCookies
             .map(c => `${c.name}=${c.value}`)
-            .join('; ');
-
-          info('[BiliCookie] CookieCloud Cookie 获取并解密成功');
-          return cookieString;
+            .join('; ')
 
+          info('[BiliCookie] CookieCloud Cookie 获取并解密成功')
+          return cookieString
         } catch (decryptErr) {
-          error('[BiliCookie] CookieCloud Cookie 解密失败: ' + String(decryptErr));
-          throw new Error(`Cookie 解密失败: ${decryptErr instanceof Error ? decryptErr.message : String(decryptErr)}`);
+          error(`[BiliCookie] CookieCloud Cookie 解密失败: ${String(decryptErr)}`)
+          throw new Error(`Cookie 解密失败: ${decryptErr instanceof Error ? decryptErr.message : String(decryptErr)}`)
         }
       } else if (json.cookie_data) {
         // 处理未加密的情况 (如果 CookieCloud 支持)
-        warn('[BiliCookie] 从 CookieCloud 收到未加密的 Cookie 数据');
-        const biliCookies = (json as CookieCloudExportData).cookie_data?.['bilibili.com'];
+        warn('[BiliCookie] 从 CookieCloud 收到未加密的 Cookie 数据')
+        const biliCookies = (json as CookieCloudExportData).cookie_data?.['bilibili.com']
         if (!biliCookies || biliCookies.length === 0) {
-          throw new Error("在 CookieCloud 数据中未找到 'bilibili.com' 的 Cookie");
+          throw new Error('在 CookieCloud 数据中未找到 \'bilibili.com\' 的 Cookie')
         }
         const cookieString = biliCookies
           .map(c => `${c.name}=${c.value}`)
-          .join('; ');
-        return cookieString;
-      }
-      else {
+          .join('; ')
+        return cookieString
+      } else {
         // API 返回了非预期的数据结构
-        throw new Error(json.message || "从 CookieCloud 获取 Cookie 失败，响应格式不正确");
+        throw new Error(json.message || '从 CookieCloud 获取 Cookie 失败，响应格式不正确')
       }
     } catch (networkErr) {
-      error('[BiliCookie] 请求 CookieCloud 时出错: ' + String(networkErr));
-      throw new Error(`请求 CookieCloud 时出错: ${networkErr instanceof Error ? networkErr.message : String(networkErr)}`);
+      error(`[BiliCookie] 请求 CookieCloud 时出错: ${String(networkErr)}`)
+      throw new Error(`请求 CookieCloud 时出错: ${networkErr instanceof Error ? networkErr.message : String(networkErr)}`)
     }
-  };
+  }
 
   /**
    * @description 从已配置的 CookieCloud 同步 Cookie，并更新本地状态
    * @returns Promise<boolean> 是否同步并验证成功
    */
   const _syncFromCookieCloud = async (): Promise<boolean> => {
-    const config = await cookieCloudStore.get();
+    const config = await cookieCloudStore.get()
     if (!config?.key) {
-      debug('[BiliCookie] 未配置 CookieCloud 或缺少 key，跳过同步');
+      debug('[BiliCookie] 未配置 CookieCloud 或缺少 key，跳过同步')
       // 如果从未设置过，保持 unset；如果之前设置过但现在无效，标记为 invalid
       if (cookieCloudState.value !== 'unset') {
-        cookieCloudState.value = 'invalid'; // 假设配置被清空意味着无效
+        cookieCloudState.value = 'invalid' // 假设配置被清空意味着无效
       }
-      return false;
+      return false
     }
 
-    cookieCloudState.value = 'syncing'; // 标记为同步中
+    cookieCloudState.value = 'syncing' // 标记为同步中
     try {
-      const cookieString = await _fetchAndDecryptFromCloud(config);
+      const cookieString = await _fetchAndDecryptFromCloud(config)
       // 验证从 Cloud 获取的 Cookie
-      const validationResult = await _checkCookieValidity(cookieString);
+      const validationResult = await _checkCookieValidity(cookieString)
 
       if (validationResult.valid) {
         // 验证成功，保存 Cookie
-        await setBiliCookie(cookieString); // setBiliCookie 内部会处理状态更新和持久化
-        cookieCloudState.value = 'valid'; // 标记为有效
-        info('[BiliCookie] 从 CookieCloud 同步并验证 Cookie 成功');
-        return true;
+        await setBiliCookie(cookieString) // setBiliCookie 内部会处理状态更新和持久化
+        cookieCloudState.value = 'valid' // 标记为有效
+        info('[BiliCookie] 从 CookieCloud 同步并验证 Cookie 成功')
+        return true
       } else {
         // 从 Cloud 获取的 Cookie 无效
-        warn('[BiliCookie] 从 CookieCloud 获取的 Cookie 无效');
-        cookieCloudState.value = 'invalid'; // 标记为无效
+        warn('[BiliCookie] 从 CookieCloud 获取的 Cookie 无效')
+        cookieCloudState.value = 'invalid' // 标记为无效
         // 不更新本地 Cookie，保留当前有效的或无效的状态
-        _updateCookieState(hasBiliCookie.value, false); // 显式标记当前cookie状态可能因云端无效而变为无效
-        return false;
+        _updateCookieState(hasBiliCookie.value, false) // 显式标记当前cookie状态可能因云端无效而变为无效
+        return false
       }
     } catch (err) {
-      error('[BiliCookie] CookieCloud 同步失败: ' + String(err));
-      cookieCloudState.value = 'invalid'; // 同步出错，标记为无效
+      error(`[BiliCookie] CookieCloud 同步失败: ${String(err)}`)
+      cookieCloudState.value = 'invalid' // 同步出错，标记为无效
       // 同步失败不应影响当前的 isCookieValid 状态，除非需要强制失效
       // _updateCookieState(hasBiliCookie.value, false); // 可选：同步失败时强制本地cookie失效
-      return false;
+      return false
     }
-  };
-
+  }
 
   // --- 公开方法 ---
 
@@ -325,117 +320,115 @@ export const useBiliCookie = defineStore('biliCookie', () => {
    */
   const init = async (): Promise<void> => {
     if (_isInitialized) {
-      debug('[BiliCookie] Store 已初始化，跳过');
-      return;
+      debug('[BiliCookie] Store 已初始化，跳过')
+      return
     }
-    _isInitialized = true;
-    info('[BiliCookie] Store 初始化开始...');
+    _isInitialized = true
+    info('[BiliCookie] Store 初始化开始...')
 
     // 1. 加载持久化数据
     const [storedCookieData, storedCloudConfig, storedUserInfo] = await Promise.all([
       biliCookieStore.value,
       cookieCloudStore.get(),
       userInfoCacheStore.get(),
-    ]);
+    ])
 
     // 2. 处理 CookieCloud 配置
     if (storedCloudConfig?.key && storedCloudConfig?.password) {
       // 这里仅设置初始状态，有效性将在后续检查或同步中确认
-      cookieCloudState.value = 'valid'; // 假设配置存在即可能有效，待验证
-      info('[BiliCookie] 检测到已配置 CookieCloud');
+      cookieCloudState.value = 'valid' // 假设配置存在即可能有效，待验证
+      info('[BiliCookie] 检测到已配置 CookieCloud')
     } else {
-      cookieCloudState.value = 'unset';
-      info('[BiliCookie] 未配置 CookieCloud');
+      cookieCloudState.value = 'unset'
+      info('[BiliCookie] 未配置 CookieCloud')
     }
 
     // 3. 处理用户信息缓存
     if (storedUserInfo && (Date.now() - storedUserInfo.accessedAt < USER_INFO_CACHE_DURATION)) {
-      _cachedUserInfo.value = storedUserInfo;
-      uId.value = storedUserInfo.userInfo.mid;
-      info(`[BiliCookie] 从缓存加载有效用户信息: UID=${uId.value}`);
+      _cachedUserInfo.value = storedUserInfo
+      uId.value = storedUserInfo.userInfo.mid
+      info(`[BiliCookie] 从缓存加载有效用户信息: UID=${uId.value}`)
       // 如果缓存有效，可以初步认为 Cookie 是有效的 (至少在缓存有效期内是)
-      _updateCookieState(!!storedCookieData?.cookie, true);
+      _updateCookieState(!!storedCookieData?.cookie, true)
     } else {
-      info('[BiliCookie] 无有效用户信息缓存');
-      _updateCookieState(!!storedCookieData?.cookie, false); // 默认无效，待检查
+      info('[BiliCookie] 无有效用户信息缓存')
+      _updateCookieState(!!storedCookieData?.cookie, false) // 默认无效，待检查
       if (storedUserInfo) {
         // 如果有缓存但已过期，清除它
-        await _clearUserInfoCache();
+        await _clearUserInfoCache()
       }
     }
 
-
     // 4. 处理 Bilibili Cookie
     if (storedCookieData?.cookie) {
-      hasBiliCookie.value = true; // 标记存在 Cookie
-      info('[BiliCookie] 检测到已存储的 Bilibili Cookie');
+      hasBiliCookie.value = true // 标记存在 Cookie
+      info('[BiliCookie] 检测到已存储的 Bilibili Cookie')
       // 检查 Cookie 有效性，除非用户信息缓存有效且未过期
       if (!_cachedUserInfo.value) { // 只有在没有有效缓存时才立即检查
-        info('[BiliCookie] 无有效缓存，立即检查 Cookie 有效性...');
-        const { valid } = await _checkCookieValidity(storedCookieData.cookie);
-        _updateCookieState(true, valid); // 更新状态
+        info('[BiliCookie] 无有效缓存，立即检查 Cookie 有效性...')
+        const { valid } = await _checkCookieValidity(storedCookieData.cookie)
+        _updateCookieState(true, valid) // 更新状态
       }
     } else {
-      _updateCookieState(false, false); // 没有 Cookie，自然无效
-      info('[BiliCookie] 未找到存储的 Bilibili Cookie');
+      _updateCookieState(false, false) // 没有 Cookie，自然无效
+      info('[BiliCookie] 未找到存储的 Bilibili Cookie')
     }
 
-
     // 5. 启动定时检查器
     if (_checkIntervalId) {
-      clearInterval(_checkIntervalId); // 清除旧的定时器 (理论上不应存在)
+      clearInterval(_checkIntervalId) // 清除旧的定时器 (理论上不应存在)
     }
-    _checkIntervalId = setInterval(check, REGULAR_CHECK_INTERVAL);
-    info(`[BiliCookie] 定时检查已启动，周期: ${REGULAR_CHECK_INTERVAL / 1000} 秒`);
+    _checkIntervalId = setInterval(check, REGULAR_CHECK_INTERVAL)
+    info(`[BiliCookie] 定时检查已启动，周期: ${REGULAR_CHECK_INTERVAL / 1000} 秒`)
 
-    info('[BiliCookie] Store 初始化完成');
-  };
+    info('[BiliCookie] Store 初始化完成')
+  }
 
   /**
    * @description 定期检查 Cookie 有效性，并按需从 CookieCloud 同步
    * @param forceCheckCloud 是否强制立即尝试从 CookieCloud 同步 (通常由 init 调用)
    */
   const check = async (forceCheckCloud: boolean = false): Promise<void> => {
-    debug('[BiliCookie] 开始周期性检查...');
-    _checkCounter++;
+    debug('[BiliCookie] 开始周期性检查...')
+    _checkCounter++
 
-    let cloudSyncAttempted = false;
-    let cloudSyncSuccess = false;
+    let cloudSyncAttempted = false
+    let cloudSyncSuccess = false
 
     // 检查是否需要从 CookieCloud 同步
-    const shouldSyncCloud = forceCheckCloud || (_checkCounter % CLOUD_SYNC_INTERVAL_CHECKS === 0);
+    const shouldSyncCloud = forceCheckCloud || (_checkCounter % CLOUD_SYNC_INTERVAL_CHECKS === 0)
 
     if (shouldSyncCloud && cookieCloudState.value !== 'unset' && cookieCloudState.value !== 'syncing') {
-      info(`[BiliCookie] 触发 CookieCloud 同步 (计数: ${_checkCounter}, 强制: ${forceCheckCloud})`);
-      cloudSyncAttempted = true;
-      cloudSyncSuccess = await _syncFromCookieCloud();
+      info(`[BiliCookie] 触发 CookieCloud 同步 (计数: ${_checkCounter}, 强制: ${forceCheckCloud})`)
+      cloudSyncAttempted = true
+      cloudSyncSuccess = await _syncFromCookieCloud()
       // 同步后重置计数器，避免连续同步
-      _checkCounter = 0;
+      _checkCounter = 0
     }
 
     // 如果没有尝试云同步，或者云同步失败，则检查本地 Cookie
     if (!cloudSyncAttempted || !cloudSyncSuccess) {
-      debug('[BiliCookie] 检查本地存储的 Cookie 有效性...');
-      const storedCookie = biliCookieStore.value?.cookie;
+      debug('[BiliCookie] 检查本地存储的 Cookie 有效性...')
+      const storedCookie = biliCookieStore.value?.cookie
       if (storedCookie) {
-        const { valid } = await _checkCookieValidity(storedCookie);
+        const { valid } = await _checkCookieValidity(storedCookie)
         // 只有在云同步未成功时才更新状态，避免覆盖云同步设置的状态
         if (!cloudSyncSuccess) {
-          _updateCookieState(true, valid);
+          _updateCookieState(true, valid)
         }
       } else {
         // 本地没有 Cookie
-        _updateCookieState(false, false);
+        _updateCookieState(false, false)
         // 如果本地没 cookie 但 cookieCloud 配置存在且非 syncing, 尝试一次同步
         if (!cloudSyncAttempted && cookieCloudState.value !== 'unset' && cookieCloudState.value !== 'syncing') {
-          info('[BiliCookie] 本地无 Cookie，尝试从 CookieCloud 获取...');
-          await _syncFromCookieCloud(); // 尝试获取一次
-          _checkCounter = 0; // 同步后重置计数器
+          info('[BiliCookie] 本地无 Cookie，尝试从 CookieCloud 获取...')
+          await _syncFromCookieCloud() // 尝试获取一次
+          _checkCounter = 0 // 同步后重置计数器
         }
       }
     }
-    debug('[BiliCookie] 周期性检查结束');
-  };
+    debug('[BiliCookie] 周期性检查结束')
+  }
 
   /**
    * @description 设置新的 Bilibili Cookie
@@ -443,69 +436,69 @@ export const useBiliCookie = defineStore('biliCookie', () => {
    * @param refreshToken (可选) Bilibili refresh token
    */
   const setBiliCookie = async (cookie: string, refreshToken?: string): Promise<void> => {
-    info('[BiliCookie] 正在设置新的 Bilibili Cookie...');
+    info('[BiliCookie] 正在设置新的 Bilibili Cookie...')
     // 1. 验证新 Cookie 的有效性
-    const { valid } = await _checkCookieValidity(cookie);
+    const { valid } = await _checkCookieValidity(cookie)
 
     if (valid) {
       // 2. 如果有效，则持久化存储
       const dataToStore: BiliCookieStoreData = {
         cookie,
         ...(refreshToken && { refreshToken }), // 仅在提供时添加 refreshToken
-        lastRefresh: new Date() // 更新刷新时间戳
-      };
+        lastRefresh: new Date(), // 更新刷新时间戳
+      }
       try {
-        biliCookieStore.value = dataToStore; // 使用响应式存储
-        info('[BiliCookie] 新 Bilibili Cookie 已验证并保存');
-        _updateCookieState(true, true); // 更新状态为存在且有效
+        biliCookieStore.value = dataToStore // 使用响应式存储
+        info('[BiliCookie] 新 Bilibili Cookie 已验证并保存')
+        _updateCookieState(true, true) // 更新状态为存在且有效
       } catch (err) {
-        error('[BiliCookie] 保存 Bilibili Cookie 失败: ' + String(err));
+        error(`[BiliCookie] 保存 Bilibili Cookie 失败: ${String(err)}`)
         // 保存失败，状态回滚或标记为错误？暂时保持验证结果
-        _updateCookieState(true, false); // Cookie 存在但保存失败，标记无效可能更安全
-        throw new Error("保存 Bilibili Cookie 失败"); // 向上抛出错误
+        _updateCookieState(true, false) // Cookie 存在但保存失败，标记无效可能更安全
+        throw new Error('保存 Bilibili Cookie 失败') // 向上抛出错误
       }
     } else {
       // 新 Cookie 无效，不保存，并标记状态
-      _updateCookieState(hasBiliCookie.value, false); // 保持 hasBiliCookie 原样或设为 false？取决于策略
-      warn('[BiliCookie] 尝试设置的 Bilibili Cookie 无效，未保存');
+      _updateCookieState(hasBiliCookie.value, false) // 保持 hasBiliCookie 原样或设为 false？取决于策略
+      warn('[BiliCookie] 尝试设置的 Bilibili Cookie 无效，未保存')
       // 可以选择抛出错误，让调用者知道设置失败
       // throw new Error("设置的 Bilibili Cookie 无效");
     }
-  };
+  }
 
   /**
    * @description 获取当前存储的 Bilibili Cookie (不保证有效性)
    * @returns Promise<string | undefined> Cookie 字符串或 undefined
    */
   const getBiliCookie = async (): Promise<string | undefined> => {
-    const data = biliCookieStore.value;
-    return data?.cookie;
-  };
+    const data = biliCookieStore.value
+    return data?.cookie
+  }
 
   /**
    * @description 退出登录，清除 Bilibili Cookie 及相关状态和缓存
    */
   const logout = async (): Promise<void> => {
-    info('[BiliCookie] 用户请求退出登录...');
+    info('[BiliCookie] 用户请求退出登录...')
     // 停止定时检查器
     if (_checkIntervalId) {
-      clearInterval(_checkIntervalId);
-      _checkIntervalId = null;
-      debug('[BiliCookie] 定时检查已停止');
+      clearInterval(_checkIntervalId)
+      _checkIntervalId = null
+      debug('[BiliCookie] 定时检查已停止')
     }
     // 清除 Cookie 存储
-    biliCookieStore.value = undefined; // 清除持久化存储
+    biliCookieStore.value = undefined // 清除持久化存储
     // 清除用户信息缓存
-    await _clearUserInfoCache();
+    await _clearUserInfoCache()
     // 重置状态变量
-    _updateCookieState(false, false);
+    _updateCookieState(false, false)
     // Cookie Cloud 状态是否重置？取决于产品逻辑，暂时保留
     // cookieCloudState.value = 'unset';
     // 重置初始化标志，允许重新 init
-    _isInitialized = false;
-    _checkCounter = 0; // 重置计数器
-    info('[BiliCookie] 退出登录完成，状态已重置');
-  };
+    _isInitialized = false
+    _checkCounter = 0 // 重置计数器
+    info('[BiliCookie] 退出登录完成，状态已重置')
+  }
 
   /**
    * @description 设置并验证 CookieCloud 配置
@@ -513,46 +506,46 @@ export const useBiliCookie = defineStore('biliCookie', () => {
    * @throws 如果配置无效或从 CookieCloud 获取/验证 Cookie 失败
    */
   const setCookieCloudConfig = async (config: CookieCloudConfig): Promise<void> => {
-    info('[BiliCookie] 正在设置新的 CookieCloud 配置...');
-    cookieCloudState.value = 'syncing'; // 标记为尝试同步/验证中
+    info('[BiliCookie] 正在设置新的 CookieCloud 配置...')
+    cookieCloudState.value = 'syncing' // 标记为尝试同步/验证中
 
     try {
       // 1. 使用新配置尝试从 Cloud 获取 Cookie
-      const cookieString = await _fetchAndDecryptFromCloud(config);
+      const cookieString = await _fetchAndDecryptFromCloud(config)
       // 2. 验证获取到的 Cookie
-      const validationResult = await _checkCookieValidity(cookieString);
+      const validationResult = await _checkCookieValidity(cookieString)
 
       if (validationResult.valid && validationResult.data) {
         // 3. 如果验证成功，保存 CookieCloud 配置
-        await cookieCloudStore.set(config);
-        info('[BiliCookie] CookieCloud 配置验证成功并已保存. 用户:' + validationResult.data.name);
-        cookieCloudState.value = 'valid'; // 标记为有效
+        await cookieCloudStore.set(config)
+        info(`[BiliCookie] CookieCloud 配置验证成功并已保存. 用户:${validationResult.data.name}`)
+        cookieCloudState.value = 'valid' // 标记为有效
 
         // 4. 使用从 Cloud 获取的有效 Cookie 更新本地 Cookie
         // 注意：这里直接调用 setBiliCookie 会再次进行验证，但确保状态一致性
-        await setBiliCookie(cookieString);
+        await setBiliCookie(cookieString)
         // 重置检查计数器，以便下次正常检查
-        _checkCounter = 0;
+        _checkCounter = 0
       } else {
         // 从 Cloud 获取的 Cookie 无效
-        cookieCloudState.value = 'invalid';
-        warn('[BiliCookie] 使用新 CookieCloud 配置获取的 Cookie 无效');
-        throw new Error('CookieCloud 配置无效：获取到的 Bilibili Cookie 无法通过验证');
+        cookieCloudState.value = 'invalid'
+        warn('[BiliCookie] 使用新 CookieCloud 配置获取的 Cookie 无效')
+        throw new Error('CookieCloud 配置无效：获取到的 Bilibili Cookie 无法通过验证')
       }
     } catch (err) {
-      error('[BiliCookie] 设置 CookieCloud 配置失败: ' + String(err));
-      cookieCloudState.value = 'invalid'; // 出错则标记为无效
+      error(`[BiliCookie] 设置 CookieCloud 配置失败: ${String(err)}`)
+      cookieCloudState.value = 'invalid' // 出错则标记为无效
       // 向上抛出错误，通知调用者失败
-      throw err; // err 已经是 Error 类型或被包装过
+      throw err // err 已经是 Error 类型或被包装过
     }
-  };
+  }
   async function clearCookieCloudConfig() {
-    info('[BiliCookie] 清除 CookieCloud 配置...');
-    cookieCloudState.value = 'unset';
+    info('[BiliCookie] 清除 CookieCloud 配置...')
+    cookieCloudState.value = 'unset'
     // 清除持久化存储
-    await cookieCloudStore.delete().catch(err => {
-      error('[BiliCookie] 清除 CookieCloud 配置失败: ' + String(err));
-    });
+    await cookieCloudStore.delete().catch((err) => {
+      error(`[BiliCookie] 清除 CookieCloud 配置失败: ${String(err)}`)
+    })
   }
 
   // --- 返回 Store 的公开接口 ---
@@ -575,10 +568,10 @@ export const useBiliCookie = defineStore('biliCookie', () => {
     setCookieCloudConfig,
     clearCookieCloudConfig,
     // 注意：不再直接暴露 fetchBiliCookieFromCloud，其逻辑已整合到内部同步和设置流程中
-  };
-});
+  }
+})
 
 // --- HMR 支持 ---
 if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useBiliCookie, import.meta.hot));
-}
\ No newline at end of file
+  import.meta.hot.accept(acceptHMRUpdate(useBiliCookie, import.meta.hot))
+}
diff --git a/src/client/store/useBiliFunction.ts b/src/client/store/useBiliFunction.ts
index bd1ac57..cb2cb34 100644
--- a/src/client/store/useBiliFunction.ts
+++ b/src/client/store/useBiliFunction.ts
@@ -1,95 +1,156 @@
-import { useAccount } from "@/api/account";
-import { useBiliCookie } from "./useBiliCookie";
-import { fetch as tauriFetch } from "@tauri-apps/plugin-http"; // 引入 Body
-import { defineStore, acceptHMRUpdate } from 'pinia';
-import { computed, ref, onUnmounted, h } from 'vue';
-import md5 from 'md5';
-import { QueryBiliAPI } from "../data/utils";
-import { onSendPrivateMessageFailed } from "../data/notification";
-import { useSettings } from "./useSettings";
-import { isDev } from "@/data/constants";
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http' // 引入 Body
+import md5 from 'md5'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { computed, h, onUnmounted, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { isDev } from '@/data/constants'
+import { onSendPrivateMessageFailed } from '../data/notification'
+import { QueryBiliAPI } from '../data/utils'
+import { useBiliCookie } from './useBiliCookie'
+import { useSettings } from './useSettings'
 
 // WBI 混合密钥编码表
 const mixinKeyEncTab = [
-  46, 47, 18, 2, 53, 8, 23, 32, 15, 50, 10, 31, 58, 3, 45, 35, 27, 43, 5, 49,
-  33, 9, 42, 19, 29, 28, 14, 39, 12, 38, 41, 13, 37, 48, 7, 16, 24, 55, 40,
-  61, 26, 17, 0, 1, 60, 51, 30, 4, 22, 25, 54, 21, 56, 59, 6, 63, 57, 62, 11,
-  36, 20, 34, 44, 52
-];
+  46,
+  47,
+  18,
+  2,
+  53,
+  8,
+  23,
+  32,
+  15,
+  50,
+  10,
+  31,
+  58,
+  3,
+  45,
+  35,
+  27,
+  43,
+  5,
+  49,
+  33,
+  9,
+  42,
+  19,
+  29,
+  28,
+  14,
+  39,
+  12,
+  38,
+  41,
+  13,
+  37,
+  48,
+  7,
+  16,
+  24,
+  55,
+  40,
+  61,
+  26,
+  17,
+  0,
+  1,
+  60,
+  51,
+  30,
+  4,
+  22,
+  25,
+  54,
+  21,
+  56,
+  59,
+  6,
+  63,
+  57,
+  62,
+  11,
+  36,
+  20,
+  34,
+  44,
+  52,
+]
 
 // 对 imgKey 和 subKey 进行字符顺序打乱编码
-const getMixinKey = (orig: string): string =>
-  mixinKeyEncTab.map(n => orig[n]).join('').slice(0, 32);
+function getMixinKey(orig: string): string {
+  return mixinKeyEncTab.map(n => orig[n]).join('').slice(0, 32)
+}
 
 export const useBiliFunction = defineStore('biliFunction', () => {
-  const biliCookieStore = useBiliCookie();
-  const account = useAccount();
-  const settingsStore = useSettings();
-  const cookie = computed(() => biliCookieStore.cookie);
-  const uid = computed(() => account.value.biliId);
+  const biliCookieStore = useBiliCookie()
+  const account = useAccount()
+  const settingsStore = useSettings()
+  const cookie = computed(() => biliCookieStore.cookie)
+  const uid = computed(() => account.value.biliId)
   // 存储WBI密钥
-  const wbiKeys = ref<{ img_key: string, sub_key: string } | null>(null);
-  const wbiKeysTimestamp = ref<number | null>(null);
+  const wbiKeys = ref<{ img_key: string, sub_key: string } | null>(null)
+  const wbiKeysTimestamp = ref<number | null>(null)
 
   // 队列相关状态
-  const danmakuQueue = ref<{ roomId: number, message: string, color?: string, fontsize?: number, mode?: number }[]>([]);
-  const pmQueue = ref<{ receiverId: number, message: string }[]>([]);
-  const isDanmakuProcessing = ref(false);
-  const isPmProcessing = ref(false);
-  const danmakuTimer = ref<ReturnType<typeof setTimeout> | null>(null);
-  const pmTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+  const danmakuQueue = ref<{ roomId: number, message: string, color?: string, fontsize?: number, mode?: number }[]>([])
+  const pmQueue = ref<{ receiverId: number, message: string }[]>([])
+  const isDanmakuProcessing = ref(false)
+  const isPmProcessing = ref(false)
+  const danmakuTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+  const pmTimer = ref<ReturnType<typeof setTimeout> | null>(null)
 
   // 使用computed获取设置中的间隔值
-  const danmakuInterval = computed(() => settingsStore.settings.danmakuInterval);
-  const pmInterval = computed(() => settingsStore.settings.pmInterval);
+  const danmakuInterval = computed(() => settingsStore.settings.danmakuInterval)
+  const pmInterval = computed(() => settingsStore.settings.pmInterval)
 
   const csrf = computed(() => {
-    if (!cookie.value) return null;
-    const match = cookie.value.match(/bili_jct=([^;]+)/);
-    return match ? match[1] : null;
-  });
+    if (!cookie.value) return null
+    const match = cookie.value.match(/bili_jct=([^;]+)/)
+    return match ? match[1] : null
+  })
 
   // 设置间隔的方法
   async function setDanmakuInterval(interval: number) {
-    settingsStore.settings.danmakuInterval = interval;
-    await settingsStore.save();
+    settingsStore.settings.danmakuInterval = interval
+    await settingsStore.save()
   }
 
   async function setPmInterval(interval: number) {
-    settingsStore.settings.pmInterval = interval;
-    await settingsStore.save();
+    settingsStore.settings.pmInterval = interval
+    await settingsStore.save()
   }
 
   // 处理弹幕队列
   async function processDanmakuQueue() {
-    if (isDanmakuProcessing.value || danmakuQueue.value.length === 0) return;
-    isDanmakuProcessing.value = true;
-    console.log('[BiliFunction] 处理弹幕队列', danmakuQueue.value);
+    if (isDanmakuProcessing.value || danmakuQueue.value.length === 0) return
+    isDanmakuProcessing.value = true
+    console.log('[BiliFunction] 处理弹幕队列', danmakuQueue.value)
     try {
-      const item = danmakuQueue.value[0];
-      await _sendLiveDanmaku(item.roomId, item.message, item.color, item.fontsize, item.mode);
-      danmakuQueue.value.shift();
+      const item = danmakuQueue.value[0]
+      await _sendLiveDanmaku(item.roomId, item.message, item.color, item.fontsize, item.mode)
+      danmakuQueue.value.shift()
     } finally {
-      isDanmakuProcessing.value = false;
+      isDanmakuProcessing.value = false
       if (danmakuQueue.value.length > 0) {
-        danmakuTimer.value = setTimeout(() => processDanmakuQueue(), danmakuInterval.value);
+        danmakuTimer.value = setTimeout(async () => processDanmakuQueue(), danmakuInterval.value)
       }
     }
   }
 
   // 处理私信队列
   async function processPmQueue() {
-    if (isPmProcessing.value || pmQueue.value.length === 0) return;
-    isPmProcessing.value = true;
+    if (isPmProcessing.value || pmQueue.value.length === 0) return
+    isPmProcessing.value = true
 
     try {
-      const item = pmQueue.value[0];
-      await _sendPrivateMessage(item.receiverId, item.message);
-      pmQueue.value.shift();
+      const item = pmQueue.value[0]
+      await _sendPrivateMessage(item.receiverId, item.message)
+      pmQueue.value.shift()
     } finally {
-      isPmProcessing.value = false;
+      isPmProcessing.value = false
       if (pmQueue.value.length > 0) {
-        pmTimer.value = setTimeout(() => processPmQueue(), pmInterval.value);
+        pmTimer.value = setTimeout(async () => processPmQueue(), pmInterval.value)
       }
     }
   }
@@ -97,12 +158,12 @@ export const useBiliFunction = defineStore('biliFunction', () => {
   // 清理定时器
   function clearTimers() {
     if (danmakuTimer.value) {
-      clearTimeout(danmakuTimer.value);
-      danmakuTimer.value = null;
+      clearTimeout(danmakuTimer.value)
+      danmakuTimer.value = null
     }
     if (pmTimer.value) {
-      clearTimeout(pmTimer.value);
-      pmTimer.value = null;
+      clearTimeout(pmTimer.value)
+      pmTimer.value = null
     }
   }
 
@@ -110,71 +171,71 @@ export const useBiliFunction = defineStore('biliFunction', () => {
   async function init() {
     // 确保设置已经初始化
     if (!settingsStore.settings.danmakuInterval) {
-      await settingsStore.init();
+      await settingsStore.init()
     }
     // 启动队列处理
-    processDanmakuQueue();
-    processPmQueue();
-    console.log('[BiliFunction] 队列初始化完成');
+    processDanmakuQueue()
+    processPmQueue()
+    console.log('[BiliFunction] 队列初始化完成')
     // 清理定时器
     onUnmounted(() => {
-      clearTimers();
-    });
+      clearTimers()
+    })
   }
 
   // 原始发送弹幕方法（重命名为_sendLiveDanmaku）
   async function _sendLiveDanmaku(roomId: number, message: string, color: string = 'ffffff', fontsize: number = 25, mode: number = 1): Promise<boolean> {
     if (!csrf.value || !cookie.value) {
-      console.error("发送弹幕失败：缺少 cookie 或 csrf token");
-      return false;
+      console.error('发送弹幕失败：缺少 cookie 或 csrf token')
+      return false
     }
     if (!message || message.trim().length === 0) {
-      console.warn("尝试发送空弹幕，已阻止。");
-      return false;
+      console.warn('尝试发送空弹幕，已阻止。')
+      return false
     }
 
     // 开发环境下只显示通知，不实际发送
     if (isDev) {
-      console.log(`[开发环境] 模拟发送弹幕到房间 ${roomId}: ${message}`);
+      console.log(`[开发环境] 模拟发送弹幕到房间 ${roomId}: ${message}`)
       window.$notification.info({
         title: '开发环境 - 弹幕未实际发送',
         description: `房间: ${roomId}, 内容: ${message}`,
         duration: 10000,
-      });
-      return true;
+      })
+      return true
     }
 
-    const url = "https://api.live.bilibili.com/msg/send";
-    const rnd = Math.floor(Date.now() / 1000);
+    const url = 'https://api.live.bilibili.com/msg/send'
+    const rnd = Math.floor(Date.now() / 1000)
     const data = {
       bubble: '0',
       msg: message,
-      color: parseInt(color, 16).toString(),
+      color: Number.parseInt(color, 16).toString(),
       fontsize: fontsize.toString(),
       mode: mode.toString(),
       roomid: roomId.toString(),
       rnd: rnd.toString(),
       csrf: csrf.value,
       csrf_token: csrf.value,
-    };
+    }
     const params = new URLSearchParams(data)
     try {
       const response = await tauriFetch(url, {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          "Cookie": cookie.value,
-          "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.0.0 Safari/537.36",
-          "Referer": `https://live.bilibili.com/${roomId}`
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Cookie': cookie.value,
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.0.0 Safari/537.36',
+          'Referer': `https://live.bilibili.com/${roomId}`,
         },
         body: params,
-      });
+      })
 
       if (!response.ok) {
-        console.error("发送弹幕网络失败:", response.status, await response.text());
-        return false;
+        console.error('发送弹幕网络失败:', response.status, await response.text())
+        return false
       }
-      const json = await response.json();
+      const json = await response.json()
       if (json.code !== 0) {
         window.$notification.error({
           title: '发送弹幕失败',
@@ -188,16 +249,16 @@ export const useBiliFunction = defineStore('biliFunction', () => {
             },
           }, `错误: ${json.code} - ${json.message || json.msg}`),
           duration: 0,
-        });
-        console.error(`发送弹幕API失败 to: ${roomId} ${uid.value} [${message}] - ${json.code} - ${json.message || json.msg}`);
-        return false;
+        })
+        console.error(`发送弹幕API失败 to: ${roomId} ${uid.value} [${message}] - ${json.code} - ${json.message || json.msg}`)
+        return false
       }
 
-      console.log("发送弹幕成功:", message);
-      return true;
+      console.log('发送弹幕成功:', message)
+      return true
     } catch (error) {
-      console.error("发送弹幕时发生错误:", error);
-      return false;
+      console.error('发送弹幕时发生错误:', error)
+      return false
     }
   }
 
@@ -205,124 +266,124 @@ export const useBiliFunction = defineStore('biliFunction', () => {
   async function encWbi(
     params: { [key: string]: string | number },
   ): Promise<string> {
-    const keys = await getWbiKeys();
-    const { img_key, sub_key } = keys;
-    const mixin_key = getMixinKey(img_key + sub_key);
-    const curr_time = Math.round(Date.now() / 1000);
-    const chr_filter = /[!'()*]/g;
+    const keys = await getWbiKeys()
+    const { img_key, sub_key } = keys
+    const mixin_key = getMixinKey(img_key + sub_key)
+    const curr_time = Math.round(Date.now() / 1000)
+    const chr_filter = /[!'()*]/g
 
-    Object.assign(params, { wts: curr_time.toString() }); // 添加 wts 字段
+    Object.assign(params, { wts: curr_time.toString() }) // 添加 wts 字段
 
     // 按照 key 重排参数
     const query = Object.keys(params)
       .sort()
-      .map(key => {
+      .map((key) => {
         // 过滤 value 中的 "!'()*" 字符
-        const value = params[key].toString().replace(chr_filter, '');
-        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+        const value = params[key].toString().replace(chr_filter, '')
+        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
       })
-      .join('&');
+      .join('&')
 
-    const wbi_sign = md5(query + mixin_key); // 计算 w_rid
-    return query + '&w_rid=' + wbi_sign;
+    const wbi_sign = md5(query + mixin_key) // 计算 w_rid
+    return `${query}&w_rid=${wbi_sign}`
   }
 
   // 获取最新的 img_key 和 sub_key
   async function _fetchWbiKeys(): Promise<{ img_key: string, sub_key: string }> {
     try {
-      const response = await QueryBiliAPI('https://api.bilibili.com/x/web-interface/nav');
+      const response = await QueryBiliAPI('https://api.bilibili.com/x/web-interface/nav')
 
       if (!response.ok) {
-        console.error("获取WBI密钥失败:", response.status);
-        throw new Error("获取WBI密钥失败");
+        console.error('获取WBI密钥失败:', response.status)
+        throw new Error('获取WBI密钥失败')
       }
 
-      const result = await response.json();
-      const { wbi_img } = result.data;
+      const result = await response.json()
+      const { wbi_img } = result.data
 
-      console.log(`获取WBI秘钥: img_key: ${wbi_img.img_url}, sub_key: ${wbi_img.sub_url}`);
+      console.log(`获取WBI秘钥: img_key: ${wbi_img.img_url}, sub_key: ${wbi_img.sub_url}`)
 
       return {
         img_key: wbi_img.img_url.slice(
           wbi_img.img_url.lastIndexOf('/') + 1,
-          wbi_img.img_url.lastIndexOf('.')
+          wbi_img.img_url.lastIndexOf('.'),
         ),
         sub_key: wbi_img.sub_url.slice(
           wbi_img.sub_url.lastIndexOf('/') + 1,
-          wbi_img.sub_url.lastIndexOf('.')
-        )
-      };
+          wbi_img.sub_url.lastIndexOf('.'),
+        ),
+      }
     } catch (error) {
-      console.error("获取WBI密钥时发生错误:", error);
-      throw error;
+      console.error('获取WBI密钥时发生错误:', error)
+      throw error
     }
   }
 
   async function getWbiKeys(): Promise<{ img_key: string, sub_key: string }> {
-    const now = Date.now();
+    const now = Date.now()
     if (wbiKeys.value && wbiKeysTimestamp.value && (now - wbiKeysTimestamp.value < 10 * 60 * 1000)) {
-        console.log("使用缓存的WBI密钥");
-        return wbiKeys.value;
+      console.log('使用缓存的WBI密钥')
+      return wbiKeys.value
     }
 
-    console.log("缓存不存在或已过期，获取新的WBI密钥");
-    const newKeys = await _fetchWbiKeys();
-    wbiKeys.value = newKeys;
-    wbiKeysTimestamp.value = now;
-    return newKeys;
+    console.log('缓存不存在或已过期，获取新的WBI密钥')
+    const newKeys = await _fetchWbiKeys()
+    wbiKeys.value = newKeys
+    wbiKeysTimestamp.value = now
+    return newKeys
   }
 
   // 原始发送私信方法（重命名为_sendPrivateMessage）
   async function _sendPrivateMessage(receiverId: number, message: string): Promise<boolean> {
     if (!csrf.value || !cookie.value || !uid.value) {
-      const error = "发送私信失败：缺少 cookie, csrf token 或 uid";
-      console.error(error);
-      onSendPrivateMessageFailed(receiverId, message, error);
-      return false;
+      const error = '发送私信失败：缺少 cookie, csrf token 或 uid'
+      console.error(error)
+      onSendPrivateMessageFailed(receiverId, message, error)
+      return false
     }
     if (!message || message.trim().length === 0) {
-      const error = "尝试发送空私信，已阻止。";
-      console.warn(error);
+      const error = '尝试发送空私信，已阻止。'
+      console.warn(error)
       window.$notification.error({
         title: '发送私信失败',
         description: `尝试发送空私信给 ${receiverId}, 已阻止`,
         duration: 0,
-      });
-      return false;
+      })
+      return false
     }
 
     // 开发环境下只显示通知，不实际发送
     if (isDev) {
-      console.log(`[开发环境] 模拟发送私信到用户 ${receiverId}: ${message}`);
+      console.log(`[开发环境] 模拟发送私信到用户 ${receiverId}: ${message}`)
       window.$notification.info({
         title: '开发环境 - 私信未实际发送',
         description: `接收者: ${receiverId}, 内容: ${message}`,
         duration: 10000,
-      });
-      return true;
+      })
+      return true
     }
 
     try {
-      const dev_id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-        return v.toString(16).toUpperCase();
-      });
+      const dev_id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = Math.random() * 16 | 0; const v = c == 'x' ? r : (r & 0x3 | 0x8)
+        return v.toString(16).toUpperCase()
+      })
 
-      const timestamp = Math.floor(Date.now() / 1000);
-      const content = JSON.stringify({ content: message });
+      const timestamp = Math.floor(Date.now() / 1000)
+      const content = JSON.stringify({ content: message })
 
       // 准备URL参数(需要WBI签名的参数)
       const urlParams = {
         w_sender_uid: uid.value.toString(),
         w_receiver_id: receiverId.toString(),
         w_dev_id: dev_id,
-      };
+      }
 
       // 生成带WBI签名的URL查询字符串
-      const signedQuery = await encWbi(urlParams);
+      const signedQuery = await encWbi(urlParams)
 
       // 构建最终URL
-      const url = `https://api.vc.bilibili.com/web_im/v1/web_im/send_msg?${signedQuery}`;
+      const url = `https://api.vc.bilibili.com/web_im/v1/web_im/send_msg?${signedQuery}`
 
       // 准备表单数据
       const formData = {
@@ -339,59 +400,59 @@ export const useBiliFunction = defineStore('biliFunction', () => {
         'mobi_app': 'web',
         'csrf': csrf.value,
         'csrf_token': csrf.value,
-      };
+      }
 
-      const params = new URLSearchParams(formData);
+      const params = new URLSearchParams(formData)
       const response = await tauriFetch(url, {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          "Cookie": cookie.value,
-          "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.0.0 Safari/537.36",
-          "Origin": '',
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Cookie': cookie.value,
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.0.0 Safari/537.36',
+          'Origin': '',
         },
         body: params,
-      });
+      })
 
       if (!response.ok) {
-        const error = `发送私信网络失败: ${response.status}`;
-        console.error(error, await response.text());
-        onSendPrivateMessageFailed(receiverId, message, error);
-        return false;
+        const error = `发送私信网络失败: ${response.status}`
+        console.error(error, await response.text())
+        onSendPrivateMessageFailed(receiverId, message, error)
+        return false
       }
 
-      const json = await response.json();
+      const json = await response.json()
       if (json.code !== 0) {
-        const error = `发送私信API失败: ${json.code} - ${json.message}`;
-        console.error(error);
-        onSendPrivateMessageFailed(receiverId, message, error);
-        return false;
+        const error = `发送私信API失败: ${json.code} - ${json.message}`
+        console.error(error)
+        onSendPrivateMessageFailed(receiverId, message, error)
+        return false
       }
 
-      console.log(`发送私信给 ${receiverId} 成功`);
-      return true;
+      console.log(`发送私信给 ${receiverId} 成功`)
+      return true
     } catch (error) {
-      console.error("发送私信时发生错误:", error);
+      console.error('发送私信时发生错误:', error)
       // 如果是WBI密钥问题，清空密钥以便下次重新获取
       if (String(error).includes('WBI')) {
-        wbiKeys.value = null;
+        wbiKeys.value = null
       }
-      onSendPrivateMessageFailed(receiverId, message, error);
-      return false;
+      onSendPrivateMessageFailed(receiverId, message, error)
+      return false
     }
   }
 
   // 新的队列发送方法
   async function sendLiveDanmaku(roomId: number, message: string, color: string = 'ffffff', fontsize: number = 25, mode: number = 1): Promise<boolean> {
-    danmakuQueue.value.push({ roomId, message, color, fontsize, mode });
-    processDanmakuQueue();
-    return true;
+    danmakuQueue.value.push({ roomId, message, color, fontsize, mode })
+    processDanmakuQueue()
+    return true
   }
 
   async function sendPrivateMessage(receiverId: number, message: string): Promise<boolean> {
-    pmQueue.value.push({ receiverId, message });
-    processPmQueue();
-    return true;
+    pmQueue.value.push({ receiverId, message })
+    processPmQueue()
+    return true
   }
 
   /**
@@ -403,46 +464,46 @@ export const useBiliFunction = defineStore('biliFunction', () => {
   async function banLiveUser(roomId: number, userId: number, hours: number = 1) {
     // 使用 csrf.value
     if (!csrf.value || !cookie.value) {
-      console.error("封禁用户失败：缺少 cookie 或 csrf token");
-      return;
+      console.error('封禁用户失败：缺少 cookie 或 csrf token')
+      return
     }
     // 确保 hours 在 1 到 720 之间
-    const validHours = Math.max(1, Math.min(hours, 720));
-    const url = "https://api.live.bilibili.com/banned_service/v2/Silent/add_user";
+    const validHours = Math.max(1, Math.min(hours, 720))
+    const url = 'https://api.live.bilibili.com/banned_service/v2/Silent/add_user'
     const data = {
       room_id: roomId.toString(),
       block_uid: userId.toString(),
       hour: validHours.toString(),
       csrf: csrf.value, // 使用计算属性的值
       csrf_token: csrf.value, // 使用计算属性的值
-      visit_id: "", // 通常可以为空
-    };
+      visit_id: '', // 通常可以为空
+    }
 
     try {
       const params = new URLSearchParams(data)
       const response = await tauriFetch(url, {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          "Cookie": cookie.value, // 使用计算属性的值
-          "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.0.0 Safari/537.36",
-          "Referer": `https://live.bilibili.com/p/html/live-room-setting/#/room-manager/black-list?room_id=${roomId}` // 模拟来源
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'Cookie': cookie.value, // 使用计算属性的值
+          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.0.0 Safari/537.36',
+          'Referer': `https://live.bilibili.com/p/html/live-room-setting/#/room-manager/black-list?room_id=${roomId}`, // 模拟来源
         },
         body: params, // 发送 URLSearchParams 数据
-      });
+      })
       if (!response.ok) {
-        console.error("封禁用户失败:", response.status, await response.text());
-        return response.statusText;
+        console.error('封禁用户失败:', response.status, await response.text())
+        return response.statusText
       }
-      const json = await response.json();
+      const json = await response.json()
       if (json.code !== 0) {
-        console.error("封禁用户API失败:", json.code, json.message || json.msg);
-        return json.data;
+        console.error('封禁用户API失败:', json.code, json.message || json.msg)
+        return json.data
       }
-      console.log("封禁用户成功:", json.data);
-      return json.data;
+      console.log('封禁用户成功:', json.data)
+      return json.data
     } catch (error) {
-      console.error("封禁用户时发生错误:", error);
+      console.error('封禁用户时发生错误:', error)
     }
   }
 
@@ -457,10 +518,10 @@ export const useBiliFunction = defineStore('biliFunction', () => {
     pmInterval,
     setDanmakuInterval,
     setPmInterval,
-    encWbi
-  };
-});
+    encWbi,
+  }
+})
 
 if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useBiliFunction, import.meta.hot));
-}
\ No newline at end of file
+  import.meta.hot.accept(acceptHMRUpdate(useBiliFunction, import.meta.hot))
+}
diff --git a/src/client/store/useDanmakuWindow.ts b/src/client/store/useDanmakuWindow.ts
index 1afaa26..16ea4b1 100644
--- a/src/client/store/useDanmakuWindow.ts
+++ b/src/client/store/useDanmakuWindow.ts
@@ -1,56 +1,58 @@
-import { EventDataTypes, EventModel, GuardLevel } from "@/api/api-models";
-import { QueryGetAPI } from "@/api/query";
-import { VTSURU_API_URL } from "@/data/constants";
-import { useDanmakuClient } from "@/store/useDanmakuClient";
-import { PhysicalPosition, PhysicalSize } from "@tauri-apps/api/dpi";
-import { getAllWebviewWindows, WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import type { WebviewWindow } from '@tauri-apps/api/webviewWindow'
+import type { EventModel } from '@/api/api-models'
+import { PhysicalPosition, PhysicalSize } from '@tauri-apps/api/dpi'
+import { getAllWebviewWindows } from '@tauri-apps/api/webviewWindow'
+import { EventDataTypes, GuardLevel } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { VTSURU_API_URL } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
 
-export type DanmakuWindowSettings = {
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-  opacity: number; // 窗口透明度
-  showAvatar: boolean; // 是否显示头像
-  showUsername: boolean; // 是否显示用户名
-  showFansMedal: boolean; // 是否显示粉丝牌
-  showGuardIcon: boolean; // 是否显示舰长图标
-  fontSize: number; // 弹幕字体大小
-  maxDanmakuCount: number; // 最大显示的弹幕数量
-  reverseOrder: boolean; // 是否倒序显示（从下往上）
-  filterTypes: string[]; // 要显示的弹幕类型
-  animationDuration: number; // 动画持续时间
-  enableAnimation: boolean; // 是否启用动画效果
-  backgroundColor: string; // 背景色
-  textColor: string; // 文字颜色
-  alwaysOnTop: boolean; // 是否总在最前
-  interactive: boolean; // 是否可交互(穿透鼠标点击)
-  borderRadius: number; // 边框圆角
-  itemSpacing: number; // 项目间距
-  enableShadow: boolean; // 是否启用阴影
-  shadowColor: string; // 阴影颜色
-  autoDisappearTime: number; // 单位：秒，0表示不自动消失
-  displayStyle: string; // 新增：显示风格，可选值：'card'（卡片风格）, 'text'（纯文本风格）
-  textStyleCompact: boolean; // 新增：纯文本模式下是否使用紧凑布局
-  textStyleShowType: boolean; // 新增：纯文本模式下是否显示消息类型标签
-  textStyleNameSeparator: string; // 新增：纯文本模式下用户名和消息之间的分隔符
-};
+export interface DanmakuWindowSettings {
+  width: number
+  height: number
+  x: number
+  y: number
+  opacity: number // 窗口透明度
+  showAvatar: boolean // 是否显示头像
+  showUsername: boolean // 是否显示用户名
+  showFansMedal: boolean // 是否显示粉丝牌
+  showGuardIcon: boolean // 是否显示舰长图标
+  fontSize: number // 弹幕字体大小
+  maxDanmakuCount: number // 最大显示的弹幕数量
+  reverseOrder: boolean // 是否倒序显示（从下往上）
+  filterTypes: string[] // 要显示的弹幕类型
+  animationDuration: number // 动画持续时间
+  enableAnimation: boolean // 是否启用动画效果
+  backgroundColor: string // 背景色
+  textColor: string // 文字颜色
+  alwaysOnTop: boolean // 是否总在最前
+  interactive: boolean // 是否可交互(穿透鼠标点击)
+  borderRadius: number // 边框圆角
+  itemSpacing: number // 项目间距
+  enableShadow: boolean // 是否启用阴影
+  shadowColor: string // 阴影颜色
+  autoDisappearTime: number // 单位：秒，0表示不自动消失
+  displayStyle: string // 新增：显示风格，可选值：'card'（卡片风格）, 'text'（纯文本风格）
+  textStyleCompact: boolean // 新增：纯文本模式下是否使用紧凑布局
+  textStyleShowType: boolean // 新增：纯文本模式下是否显示消息类型标签
+  textStyleNameSeparator: string // 新增：纯文本模式下用户名和消息之间的分隔符
+}
 
-export const DANMAKU_WINDOW_BROADCAST_CHANNEL = 'channel.danmaku.window';
+export const DANMAKU_WINDOW_BROADCAST_CHANNEL = 'channel.danmaku.window'
 export type DanmakuWindowBCData = {
-  type: 'danmaku',
-  data: EventModel;
+  type: 'danmaku'
+  data: EventModel
 } | {
-  type: 'update-setting',
-  data: DanmakuWindowSettings;
+  type: 'update-setting'
+  data: DanmakuWindowSettings
 } | {
-  type: 'window-ready';
+  type: 'window-ready'
 } | {
-  type: 'clear-danmaku'; // 新增：清空弹幕消息
+  type: 'clear-danmaku' // 新增：清空弹幕消息
 } | {
-  type: 'test-danmaku', // 新增：测试弹幕消息
-  data: EventModel;
-};
+  type: 'test-danmaku' // 新增：测试弹幕消息
+  data: EventModel
+}
 
 // Helper function to generate random test data
 function generateTestDanmaku(): EventModel {
@@ -60,19 +62,19 @@ function generateTestDanmaku(): EventModel {
     EventDataTypes.SC,
     EventDataTypes.Guard,
     EventDataTypes.Enter,
-  ];
-  const randomType = types[Math.floor(Math.random() * types.length)];
-  const randomUid = Math.floor(Math.random() * 1000000);
-  const randomName = `测试用户${randomUid % 100}`;
-  const randomTime = Date.now();
-  const randomOuid = `oid_${randomUid}`;
+  ]
+  const randomType = types[Math.floor(Math.random() * types.length)]
+  const randomUid = Math.floor(Math.random() * 1000000)
+  const randomName = `测试用户${randomUid % 100}`
+  const randomTime = Date.now()
+  const randomOuid = `oid_${randomUid}`
 
   // 扩展粉丝勋章相关的随机数据
-  const hasMedal = Math.random() > 0.3; // 70% 概率拥有粉丝勋章
-  const isWearingMedal = hasMedal && Math.random() > 0.2; // 佩戴粉丝勋章的概率
-  const medalNames = ['鸽子团', '鲨鱼牌', '椰奶', '饼干', '猫猫头', '南极', '狗妈', '可爱', '团子', '喵'];
-  const randomMedalName = medalNames[Math.floor(Math.random() * medalNames.length)];
-  const randomMedalLevel = isWearingMedal ? Math.floor(Math.random() * 40) + 1 : 0;
+  const hasMedal = Math.random() > 0.3 // 70% 概率拥有粉丝勋章
+  const isWearingMedal = hasMedal && Math.random() > 0.2 // 佩戴粉丝勋章的概率
+  const medalNames = ['鸽子团', '鲨鱼牌', '椰奶', '饼干', '猫猫头', '南极', '狗妈', '可爱', '团子', '喵']
+  const randomMedalName = medalNames[Math.floor(Math.random() * medalNames.length)]
+  const randomMedalLevel = isWearingMedal ? Math.floor(Math.random() * 40) + 1 : 0
 
   const baseEvent: Partial<EventModel> = {
     uname: randomName,
@@ -85,7 +87,7 @@ function generateTestDanmaku(): EventModel {
     fans_medal_name: randomMedalName,
     fans_medal_wearing_status: isWearingMedal,
     ouid: randomOuid,
-  };
+  }
 
   switch (randomType) {
     case EventDataTypes.Message:
@@ -96,36 +98,36 @@ function generateTestDanmaku(): EventModel {
         num: 0, // Not applicable
         price: 0, // Not applicable
         emoji: Math.random() > 0.8 ? '😀' : undefined, // Randomly add emoji
-      } as EventModel;
+      } as EventModel
     case EventDataTypes.Gift:
-      const giftNames = ['小花花', '辣条', '能量饮料', '小星星'];
-      const giftNums = [1, 5, 10];
-      const giftPrices = [100, 1000, 5000]; // Price in copper coins (100 = 0.1 yuan)
+      const giftNames = ['小花花', '辣条', '能量饮料', '小星星']
+      const giftNums = [1, 5, 10]
+      const giftPrices = [100, 1000, 5000] // Price in copper coins (100 = 0.1 yuan)
       return {
         ...baseEvent,
         type: EventDataTypes.Gift,
         msg: giftNames[Math.floor(Math.random() * giftNames.length)],
         num: giftNums[Math.floor(Math.random() * giftNums.length)],
         price: giftPrices[Math.floor(Math.random() * giftPrices.length)],
-      } as EventModel;
+      } as EventModel
     case EventDataTypes.SC:
-      const scPrices = [30, 50, 100, 500, 1000, 2000]; // Price in yuan
+      const scPrices = [30, 50, 100, 500, 1000, 2000] // Price in yuan
       return {
         ...baseEvent,
         type: EventDataTypes.SC,
         msg: `这是一条测试SC消息！感谢老板！`,
         num: 1, // Not applicable
         price: scPrices[Math.floor(Math.random() * scPrices.length)],
-      } as EventModel;
+      } as EventModel
     case EventDataTypes.Guard:
-      const guardLevels = [GuardLevel.Jianzhang, GuardLevel.Tidu, GuardLevel.Zongdu];
+      const guardLevels = [GuardLevel.Jianzhang, GuardLevel.Tidu, GuardLevel.Zongdu]
       const guardPrices = {
         [GuardLevel.Jianzhang]: 198,
         [GuardLevel.Tidu]: 1998,
         [GuardLevel.Zongdu]: 19998,
         [GuardLevel.None]: 0, // Add missing GuardLevel.None case
-      };
-      const selectedGuardLevel = guardLevels[Math.floor(Math.random() * guardLevels.length)];
+      }
+      const selectedGuardLevel = guardLevels[Math.floor(Math.random() * guardLevels.length)]
       return {
         ...baseEvent,
         type: EventDataTypes.Guard,
@@ -133,7 +135,7 @@ function generateTestDanmaku(): EventModel {
         num: 1, // Represents 1 month usually
         price: guardPrices[selectedGuardLevel],
         guard_level: selectedGuardLevel, // Ensure guard level matches
-      } as EventModel;
+      } as EventModel
     case EventDataTypes.Enter:
       return {
         ...baseEvent,
@@ -141,7 +143,7 @@ function generateTestDanmaku(): EventModel {
         msg: '进入了直播间',
         num: 0, // Not applicable
         price: 0, // Not applicable
-      } as EventModel;
+      } as EventModel
     default: // Fallback to Message
       return {
         ...baseEvent,
@@ -149,12 +151,12 @@ function generateTestDanmaku(): EventModel {
         msg: `默认测试弹幕`,
         num: 0,
         price: 0,
-      } as EventModel;
+      } as EventModel
   }
 }
 
 export const useDanmakuWindow = defineStore('danmakuWindow', () => {
-  const danmakuWindow = ref<WebviewWindow>();
+  const danmakuWindow = ref<WebviewWindow>()
   const danmakuWindowSetting = useStorage<DanmakuWindowSettings>('Setting.DanmakuWindow', {
     width: 400,
     height: 600,
@@ -168,7 +170,7 @@ export const useDanmakuWindow = defineStore('danmakuWindow', () => {
     fontSize: 14,
     maxDanmakuCount: 30,
     reverseOrder: false,
-    filterTypes: ["Message", "Gift", "SC", "Guard"],
+    filterTypes: ['Message', 'Gift', 'SC', 'Guard'],
     animationDuration: 300,
     backgroundColor: 'rgba(0,0,0,0.6)',
     textColor: '#ffffff',
@@ -184,91 +186,91 @@ export const useDanmakuWindow = defineStore('danmakuWindow', () => {
     textStyleShowType: true, // 新增：默认显示消息类型标签
     textStyleNameSeparator: ': ', // 新增：默认用户名和消息之间的分隔符为冒号+空格
     enableAnimation: true, // 新增：默认启用动画效果
-  });
+  })
   const emojiData = useStorage<{
-    updateAt: number,
+    updateAt: number
     data: {
-      inline: { [key: string]: string; },
-      plain: { [key: string]: string; },
-    };
+      inline: { [key: string]: string }
+      plain: { [key: string]: string }
+    }
   }>('Data.Emoji', {
     updateAt: 0,
     data: {
       inline: {},
       plain: {},
-    }
-  });
-  const danmakuClient = useDanmakuClient();
-  const isWindowOpened = ref(false);
-  let bc: BroadcastChannel | undefined = undefined;
+    },
+  })
+  const danmakuClient = useDanmakuClient()
+  const isWindowOpened = ref(false)
+  let bc: BroadcastChannel | undefined
 
   function closeWindow() {
-    danmakuWindow.value?.hide();
-    isWindowOpened.value = false;
+    danmakuWindow.value?.hide()
+    isWindowOpened.value = false
   }
   function openWindow() {
     if (!isInited) {
-      init();
+      init()
     }
-    checkAndUseSetting(danmakuWindowSetting.value);
-    danmakuWindow.value?.show();
-    isWindowOpened.value = true;
+    checkAndUseSetting(danmakuWindowSetting.value)
+    danmakuWindow.value?.show()
+    isWindowOpened.value = true
   }
 
   function setDanmakuWindowSize(width: number, height: number) {
-    danmakuWindowSetting.value.width = width;
-    danmakuWindowSetting.value.height = height;
-    danmakuWindow.value?.setSize(new PhysicalSize(width, height));
+    danmakuWindowSetting.value.width = width
+    danmakuWindowSetting.value.height = height
+    danmakuWindow.value?.setSize(new PhysicalSize(width, height))
   }
 
   function setDanmakuWindowPosition(x: number, y: number) {
-    danmakuWindowSetting.value.x = x;
-    danmakuWindowSetting.value.y = y;
-    danmakuWindow.value?.setPosition(new PhysicalPosition(x, y));
+    danmakuWindowSetting.value.x = x
+    danmakuWindowSetting.value.y = y
+    danmakuWindow.value?.setPosition(new PhysicalPosition(x, y))
   }
   function updateWindowPosition() {
-    danmakuWindow.value?.setPosition(new PhysicalPosition(danmakuWindowSetting.value.x, danmakuWindowSetting.value.y));
+    danmakuWindow.value?.setPosition(new PhysicalPosition(danmakuWindowSetting.value.x, danmakuWindowSetting.value.y))
   }
-  let isInited = false;
+  let isInited = false
 
   async function init() {
-    if (isInited) return;
-    danmakuWindow.value = (await getAllWebviewWindows()).find((win) => win.label === 'danmaku-window');
+    if (isInited) return
+    danmakuWindow.value = (await getAllWebviewWindows()).find(win => win.label === 'danmaku-window')
     if (!danmakuWindow.value) {
-      window.$message.error('弹幕窗口不存在，请先打开弹幕窗口。');
-      return;
+      window.$message.error('弹幕窗口不存在，请先打开弹幕窗口。')
+      return
     }
-    console.log('打开弹幕窗口', danmakuWindow.value.label, danmakuWindowSetting.value);
+    console.log('打开弹幕窗口', danmakuWindow.value.label, danmakuWindowSetting.value)
 
     danmakuWindow.value.onCloseRequested((event) => {
-      event.preventDefault(); // 阻止默认关闭行为
-      closeWindow();
-      console.log('弹幕窗口关闭');
-    });
+      event.preventDefault() // 阻止默认关闭行为
+      closeWindow()
+      console.log('弹幕窗口关闭')
+    })
     danmakuWindow.value.onMoved(({
-      payload: position
+      payload: position,
     }) => {
-      danmakuWindowSetting.value.x = position.x;
-      danmakuWindowSetting.value.y = position.y;
-    });
+      danmakuWindowSetting.value.x = position.x
+      danmakuWindowSetting.value.y = position.y
+    })
 
-    bc = new BroadcastChannel(DANMAKU_WINDOW_BROADCAST_CHANNEL);
+    bc = new BroadcastChannel(DANMAKU_WINDOW_BROADCAST_CHANNEL)
     bc.onmessage = (event: MessageEvent<DanmakuWindowBCData>) => {
       if (event.data.type === 'window-ready') {
-        console.log(`[danmaku-window] 窗口已就绪`);
+        console.log(`[danmaku-window] 窗口已就绪`)
         bc?.postMessage({
           type: 'update-setting',
           data: toRaw(danmakuWindowSetting.value),
-        });
+        })
       }
-    };
+    }
     bc.postMessage({
       type: 'window-ready',
-    });
+    })
     bc.postMessage({
       type: 'update-setting',
       data: toRaw(danmakuWindowSetting.value),
-    });
+    })
 
     bc?.postMessage({
       type: 'danmaku',
@@ -276,96 +278,94 @@ export const useDanmakuWindow = defineStore('danmakuWindow', () => {
         type: EventDataTypes.Message,
         msg: '弹幕窗口已打开',
       } as Partial<EventModel>,
-    });
+    })
 
-    danmakuClient.onEvent('danmaku', (event) => onGetDanmakus(event));
-    danmakuClient.onEvent('gift', (event) => onGetDanmakus(event));
-    danmakuClient.onEvent('sc', (event) => onGetDanmakus(event));
-    danmakuClient.onEvent('guard', (event) => onGetDanmakus(event));
-    danmakuClient.onEvent('enter', (event) => onGetDanmakus(event));
-    danmakuClient.onEvent('scDel', (event) => onGetDanmakus(event));
+    danmakuClient.onEvent('danmaku', event => onGetDanmakus(event))
+    danmakuClient.onEvent('gift', event => onGetDanmakus(event))
+    danmakuClient.onEvent('sc', event => onGetDanmakus(event))
+    danmakuClient.onEvent('guard', event => onGetDanmakus(event))
+    danmakuClient.onEvent('enter', event => onGetDanmakus(event))
+    danmakuClient.onEvent('scDel', event => onGetDanmakus(event))
 
     watch(() => danmakuWindowSetting, async (newValue) => {
       if (danmakuWindow.value) {
         bc?.postMessage({
           type: 'update-setting',
           data: toRaw(newValue.value),
-        });
-        await checkAndUseSetting(newValue.value);
+        })
+        await checkAndUseSetting(newValue.value)
       }
-    }, { deep: true });
+    }, { deep: true })
 
-    console.log('[danmaku-window] 初始化完成');
+    console.log('[danmaku-window] 初始化完成')
 
-    isInited = true;
+    isInited = true
   }
   async function checkAndUseSetting(setting: DanmakuWindowSettings) {
     if (setting.alwaysOnTop) {
-      await danmakuWindow.value?.setAlwaysOnTop(true);
-    }
-    else {
-      await danmakuWindow.value?.setAlwaysOnTop(false);
+      await danmakuWindow.value?.setAlwaysOnTop(true)
+    } else {
+      await danmakuWindow.value?.setAlwaysOnTop(false)
     }
     if (setting.interactive) {
-      await danmakuWindow.value?.setIgnoreCursorEvents(true);
+      await danmakuWindow.value?.setIgnoreCursorEvents(true)
     } else {
-      await danmakuWindow.value?.setIgnoreCursorEvents(false);
+      await danmakuWindow.value?.setIgnoreCursorEvents(false)
     }
   }
 
   async function getEmojiData() {
     try {
       const resp = await QueryGetAPI<{
-        inline: { [key: string]: string; },
-        plain: { [key: string]: string; },
-      }>(VTSURU_API_URL + 'client/live-emoji');
+        inline: { [key: string]: string }
+        plain: { [key: string]: string }
+      }>(`${VTSURU_API_URL}client/live-emoji`)
       if (resp.code == 200) {
         emojiData.value = {
           updateAt: Date.now(),
           data: resp.data,
-        };
-        console.log(`已获取表情数据, 共 ${Object.keys(resp.data.inline).length + Object.keys(resp.data.plain).length} 条`, resp.data);
-      }
-      else {
-        console.error('获取表情数据失败:', resp.message);
+        }
+        console.log(`已获取表情数据, 共 ${Object.keys(resp.data.inline).length + Object.keys(resp.data.plain).length} 条`, resp.data)
+      } else {
+        console.error('获取表情数据失败:', resp.message)
       }
     } catch (error) {
-      console.error('无法获取表情数据:', error);
+      console.error('无法获取表情数据:', error)
     }
   }
 
   function onGetDanmakus(data: EventModel) {
-    if (!isWindowOpened.value || !bc) return;
+    if (!isWindowOpened.value || !bc) return
     bc.postMessage({
       type: 'danmaku',
       data,
-    });
+    })
   }
 
   // 新增：清空弹幕函数
   function clearAllDanmaku() {
     if (!isWindowOpened.value || !bc) {
-      console.warn('[danmaku-window] 窗口未打开或 BC 未初始化，无法清空弹幕');
-      return;
+      console.warn('[danmaku-window] 窗口未打开或 BC 未初始化，无法清空弹幕')
+      return
     }
     bc.postMessage({
       type: 'clear-danmaku',
-    });
-    console.log('[danmaku-window] 发送清空弹幕指令');
+    })
+    console.log('[danmaku-window] 发送清空弹幕指令')
   }
 
   // 新增：发送测试弹幕函数
   function sendTestDanmaku() {
     if (!isWindowOpened.value || !bc) {
-      console.warn('[danmaku-window] 窗口未打开或 BroadcastChannel 未初始化，无法发送测试弹幕');
-      return;
+      console.warn('[danmaku-window] 窗口未打开或 BroadcastChannel 未初始化，无法发送测试弹幕')
+      return
     }
-    const testData = generateTestDanmaku();
+    const testData = generateTestDanmaku()
     bc.postMessage({
       type: 'test-danmaku',
       data: testData,
-    });
-    console.log('[danmaku-window] 发送测试弹幕指令:', testData);
+    })
+    console.log('[danmaku-window] 发送测试弹幕指令:', testData)
   }
 
   return {
@@ -382,9 +382,9 @@ export const useDanmakuWindow = defineStore('danmakuWindow', () => {
     init,
     clearAllDanmaku, // 导出新函数
     sendTestDanmaku, // 导出新函数
-  };
-});
+  }
+})
 
 if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useDanmakuWindow, import.meta.hot));
-}
\ No newline at end of file
+  import.meta.hot.accept(acceptHMRUpdate(useDanmakuWindow, import.meta.hot))
+}
diff --git a/src/client/store/useSettings.ts b/src/client/store/useSettings.ts
index 96dcae1..2d8fd40 100644
--- a/src/client/store/useSettings.ts
+++ b/src/client/store/useSettings.ts
@@ -1,29 +1,29 @@
-import { useTauriStore } from './useTauriStore';
+import { useTauriStore } from './useTauriStore'
 
-export type NotificationType = 'question-box' | 'danmaku' | 'goods-buy' | 'message-failed' | 'live-danmaku-failed';
-export type NotificationSettings = {
-  enableTypes: NotificationType[];
-};
-export type VTsuruClientSettings = {
-  useDanmakuClientType: 'openlive' | 'direct';
-  fallbackToOpenLive: boolean;
-  bootAsMinimized: boolean;
+export type NotificationType = 'question-box' | 'danmaku' | 'goods-buy' | 'message-failed' | 'live-danmaku-failed'
+export interface NotificationSettings {
+  enableTypes: NotificationType[]
+}
+export interface VTsuruClientSettings {
+  useDanmakuClientType: 'openlive' | 'direct'
+  fallbackToOpenLive: boolean
+  bootAsMinimized: boolean
 
-  danmakuHistorySize: number;
+  danmakuHistorySize: number
   loginType: 'qrcode' | 'cookiecloud'
 
-  enableNotification: boolean;
-  notificationSettings: NotificationSettings;
+  enableNotification: boolean
+  notificationSettings: NotificationSettings
 
   // 消息队列间隔设置
-  danmakuInterval: number;
-  pmInterval: number;
+  danmakuInterval: number
+  pmInterval: number
 
-  dev_disableDanmakuClient: boolean;
-};
+  dev_disableDanmakuClient: boolean
+}
 
 export const useSettings = defineStore('settings', () => {
-  const store = useTauriStore().getTarget<VTsuruClientSettings>('settings');
+  const store = useTauriStore().getTarget<VTsuruClientSettings>('settings')
   const defaultSettings: VTsuruClientSettings = {
     useDanmakuClientType: 'openlive',
     fallbackToOpenLive: true,
@@ -41,22 +41,22 @@ export const useSettings = defineStore('settings', () => {
     pmInterval: 2000,
 
     dev_disableDanmakuClient: false,
-  };
-  const settings = ref<VTsuruClientSettings>(Object.assign({}, defaultSettings));
+  }
+  const settings = ref<VTsuruClientSettings>(Object.assign({}, defaultSettings))
 
   async function init() {
-    settings.value = (await store.get()) || Object.assign({}, defaultSettings);
-    settings.value.notificationSettings ??= defaultSettings.notificationSettings;
-    settings.value.notificationSettings.enableTypes ??= [ 'question-box', 'danmaku', 'message-failed' ];
+    settings.value = (await store.get()) || Object.assign({}, defaultSettings)
+    settings.value.notificationSettings ??= defaultSettings.notificationSettings
+    settings.value.notificationSettings.enableTypes ??= ['question-box', 'danmaku', 'message-failed']
     // 初始化消息队列间隔设置
-    settings.value.danmakuInterval ??= defaultSettings.danmakuInterval;
-    settings.value.pmInterval ??= defaultSettings.pmInterval;
+    settings.value.danmakuInterval ??= defaultSettings.danmakuInterval
+    settings.value.pmInterval ??= defaultSettings.pmInterval
   }
   async function save() {
-    await store.set(settings.value);
+    await store.set(settings.value)
   }
 
-  return { init, save, settings };
-});
+  return { init, save, settings }
+})
 
-if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(useSettings, import.meta.hot));
+if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(useSettings, import.meta.hot))
diff --git a/src/client/store/useTauriStore.ts b/src/client/store/useTauriStore.ts
index ee3f3f3..eaa1a72 100644
--- a/src/client/store/useTauriStore.ts
+++ b/src/client/store/useTauriStore.ts
@@ -1,53 +1,60 @@
-import { LazyStore } from '@tauri-apps/plugin-store';
+import { LazyStore } from '@tauri-apps/plugin-store'
+import { acceptHMRUpdate, defineStore } from 'pinia'
 
 export class StoreTarget<T> {
   constructor(key: string, target: LazyStore, defaultValue?: T) {
-    this.target = target;
-    this.key = key;
-    this.defaultValue = defaultValue;
+    this.target = target
+    this.key = key
+    this.defaultValue = defaultValue
   }
-  protected target: LazyStore;
-  protected defaultValue: T | undefined;
 
-  protected key: string;
+  protected target: LazyStore
+  protected defaultValue: T | undefined
 
+  protected key: string
   async set(value: T) {
-    return await this.target.set(this.key, value);
+    return this.target.set(this.key, value)
   }
+
   async get(): Promise<T | undefined> {
-    const result = await this.target.get<T>(this.key);
+    const result = await this.target.get<T>(this.key)
 
     if (result === undefined && this.defaultValue !== undefined) {
-      await this.set(this.defaultValue);
-      return this.defaultValue as T;
+      await this.set(this.defaultValue)
+      return this.defaultValue as T
     }
-    return result;
+    return result
   }
 
   async delete() {
-    return await this.target.delete(this.key);
+    return this.target.delete(this.key)
   }
 }
 
 export const useTauriStore = defineStore('tauri', () => {
   const store = new LazyStore('vtsuru.data.json', {
     autoSave: true,
-  });
-  async function set(key: string, value: any) {
-    await store.set(key, value);
+    defaults: {},
+  })
+
+  async function set(key: string, value: unknown) {
+    await store.set(key, value)
   }
+
   async function get<T>(key: string) {
-    return await store.get<T>(key);
+    return store.get<T>(key)
   }
+
   function getTarget<T>(key: string, defaultValue?: T) {
-    return new StoreTarget<T>(key, store, defaultValue);
+    return new StoreTarget<T>(key, store, defaultValue)
   }
+
   return {
     store,
     set,
     get,
     getTarget,
-  };
-});
+  }
+})
 
-if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(useTauriStore, import.meta.hot));
+if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(useTauriStore, import.meta.hot))
diff --git a/src/components.d.ts b/src/components.d.ts
index 2860afd..b6af09e 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,7 +19,6 @@ declare module 'vue' {
     LiveInfoContainer: typeof import('./components/LiveInfoContainer.vue')['default']
     MonacoEditorComponent: typeof import('./components/MonacoEditorComponent.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
-    NCard: typeof import('naive-ui')['NCard']
     NFlex: typeof import('naive-ui')['NFlex']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGridItem: typeof import('naive-ui')['NGridItem']
diff --git a/src/components/DanmakuContainer.vue b/src/components/DanmakuContainer.vue
index 120fba8..6293db6 100644
--- a/src/components/DanmakuContainer.vue
+++ b/src/components/DanmakuContainer.vue
@@ -1,10 +1,6 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { DanmakuModel, EventDataTypes, ResponseLiveInfoModel } from '@/api/api-models'
-import DanmakuItem from '@/components/DanmakuItem.vue'
-import { GetString } from '@/data/DanmakuExport'
-import router from '@/router'
+import type { DanmakuModel, ResponseLiveInfoModel } from '@/api/api-models'
 import { Info12Filled, Money20Regular, Money24Regular, Search24Filled, Wrench24Filled } from '@vicons/fluent'
 import { useDebounceFn, useLocalStorage, useWindowSize } from '@vueuse/core'
 import { saveAs } from 'file-saver'
@@ -36,6 +32,11 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useAccount } from '@/api/account'
+import { EventDataTypes } from '@/api/api-models'
+import DanmakuItem from '@/components/DanmakuItem.vue'
+import { GetString } from '@/data/DanmakuExport'
+import router from '@/router'
 import LiveInfoContainer from './LiveInfoContainer.vue'
 import SimpleVirtualList from './SimpleVirtualList.vue'
 
@@ -51,6 +52,32 @@ interface RankInfo {
   Index: number
 }
 
+const {
+  currentDanmakus,
+  currentLive,
+  defaultFilterSelected = [EventDataTypes.Gift, EventDataTypes.Guard, EventDataTypes.Message, EventDataTypes.SC],
+  height = 1000,
+  itemHeight = 30,
+  showLiveInfo = true,
+  showLiver = false,
+  // to = ClickNameTo.UserHistory,
+  isInModal = false,
+  showName = true,
+  showBorder = true,
+  showTools = true,
+  showStatistic = true,
+  animeNum = true,
+  showRank = false,
+  bordered = true,
+  toolsVisiable = true,
+  itemRange = 30,
+  to = 'space',
+} = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'onClickName', uId: number, ouId: string): boolean
+}>()
+
 const accountInfo = useAccount()
 
 const debouncedFn = useDebounceFn(() => {
@@ -72,7 +99,7 @@ interface Props {
   showLiver?: boolean
   showLiveInfo?: boolean
   showName?: boolean
-  //to?: ClickNameTo;
+  // to?: ClickNameTo;
   isInModal?: boolean
   showRank?: boolean
   showBorder?: boolean
@@ -85,30 +112,6 @@ interface Props {
   to: 'userDanmakus' | 'space'
 }
 
-const {
-  currentDanmakus,
-  currentLive,
-  defaultFilterSelected = [EventDataTypes.Gift, EventDataTypes.Guard, EventDataTypes.Message, EventDataTypes.SC],
-  height = 1000,
-  itemHeight = 30,
-  showLiveInfo = true,
-  showLiver = false,
-  //to = ClickNameTo.UserHistory,
-  isInModal = false,
-  showName = true,
-  showBorder = true,
-  showTools = true,
-  showStatistic = true,
-  animeNum = true,
-  showRank = false,
-  bordered = true,
-  toolsVisiable = true,
-  itemRange = 30,
-  to = 'space',
-} = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'onClickName', uId: number, ouId: string): boolean
-}>()
 defineExpose({
   InsertDanmakus,
 })
@@ -120,7 +123,7 @@ watch(
   },
 )
 const danmakuRef = computed(() => {
-  //不知道为啥不能直接watch
+  // 不知道为啥不能直接watch
   return currentDanmakus
 })
 watch(danmakuRef, (newValue) => {
@@ -156,7 +159,7 @@ function OnNameClick(uId: number, ouId: string) {
   }
   switch (to) {
     case 'userDanmakus': {
-      userDanmakus.value = currentDanmakus.filter((d) => (d.uId ? d.uId == uId : d.ouId == ouId))
+      userDanmakus.value = currentDanmakus.filter(d => (d.uId ? d.uId == uId : d.ouId == ouId))
       showModal.value = true
       break
     }
@@ -167,7 +170,7 @@ function OnNameClick(uId: number, ouId: string) {
       }
       showModal.value = false
       nextTick(() => {
-        window.open('https://space.bilibili.com/' + uId, '_blank')
+        window.open(`https://space.bilibili.com/${uId}`, '_blank')
       })
       break
     }
@@ -185,8 +188,9 @@ function ToUserSpace(uId: number) {
   })
 }
 function ChangePrice(p: number) {
-  if (p == price.value) price.value = undefined
-  else {
+  if (p == price.value) {
+    price.value = undefined
+  } else {
     price.value = p
   }
   UpdateDanmakus()
@@ -199,7 +203,7 @@ function UpdateDanmakus() {
       danmakus.value = GetFilteredDanmakus()
       setTimeout(() => {
         canInsert = true
-      }, 1000) //立马就能的话会莫名key重复
+      }, 1000) // 立马就能的话会莫名key重复
       processing.value = false
     }, 50)
   })
@@ -209,7 +213,7 @@ function OnRank(isRank: boolean) {
 }
 function OnRankDirect(type: RankType, refresh: boolean, orderByDescending = true) {
   if (refresh) {
-    var rank = {} as {
+    const rank = {} as {
       [ouId: string]: RankInfo
     }
     currentDanmakus.forEach((danmaku) => {
@@ -218,7 +222,7 @@ function OnRankDirect(type: RankType, refresh: boolean, orderByDescending = true
         rank[danmaku.ouId].Paid += danmaku.price ?? 0
       } else {
         rank[danmaku.ouId] = {
-          //uId: danmaku.uId,
+          // uId: danmaku.uId,
           ouId: danmaku.ouId,
           uName: danmaku.uName,
           Paid: danmaku.price ?? 0,
@@ -229,20 +233,20 @@ function OnRankDirect(type: RankType, refresh: boolean, orderByDescending = true
     })
     rankInfo.value = new List(Object.entries(rank)).Select(([uId, user]) => user).ToArray()
   }
-  var ienum = {} as List<RankInfo>
+  let ienum = {} as List<RankInfo>
   switch (rankType.value) {
     case RankType.Danmaku: {
-      ienum = new List(rankInfo.value).OrderByDescending((user) => user.Danmakus)
+      ienum = new List(rankInfo.value).OrderByDescending(user => user.Danmakus)
       break
     }
     case RankType.Paid: {
-      ienum = new List(rankInfo.value).Where((user) => (user?.Paid ?? 0) > 0).OrderByDescending((user) => user.Paid)
+      ienum = new List(rankInfo.value).Where(user => (user?.Paid ?? 0) > 0).OrderByDescending(user => user.Paid)
       break
     }
   }
   if (!orderByDescending) ienum = ienum.Reverse()
   currentRankInfo.value = ienum.Take(100).ToArray()
-  var index = 1
+  let index = 1
   currentRankInfo.value.forEach((info) => {
     info.Index = index
     index++
@@ -283,7 +287,7 @@ function InsertDanmakus(targetDanmakus: DanmakuModel[]) {
   if (processing.value || !canInsert) {
     return
   }
-  var data = GetFilteredDanmakus(targetDanmakus)
+  const data = GetFilteredDanmakus(targetDanmakus)
   if (orderDecreasing.value) {
     danmakus.value.unshift(...data)
     currentDanmakus.unshift(...data)
@@ -294,36 +298,34 @@ function InsertDanmakus(targetDanmakus: DanmakuModel[]) {
 }
 function GetFilteredDanmakus(targetDanmakus?: DanmakuModel[]) {
   if (!targetDanmakus) targetDanmakus = currentDanmakus
-  var tempDanmakus = targetDanmakus.filter((d) => filterSelected.value.includes(d.type))
+  let tempDanmakus = targetDanmakus.filter(d => filterSelected.value.includes(d.type))
   if (hideEmoji.value) {
-    tempDanmakus = tempDanmakus.filter((d) => d.type != EventDataTypes.Message || !d.isEmoji)
+    tempDanmakus = tempDanmakus.filter(d => d.type != EventDataTypes.Message || !d.isEmoji)
   }
   if (orderByPrice.value) {
     tempDanmakus = tempDanmakus
-      .filter((d) => d.type != EventDataTypes.Message)
+      .filter(d => d.type != EventDataTypes.Message)
       .sort((a, b) => (a.price ?? 0) - (b.price ?? 0))
   } else {
     tempDanmakus = tempDanmakus.sort((a, b) => a.time - b.time)
   }
 
   if (keyword.value && keyword.value != '') {
-    tempDanmakus = tempDanmakus.filter((d) => (deselect.value ? !CheckKeyword(d) : CheckKeyword(d)))
+    tempDanmakus = tempDanmakus.filter(d => (deselect.value ? !CheckKeyword(d) : CheckKeyword(d)))
   }
   function CheckKeyword(d: DanmakuModel) {
     if (d.uId.toString() == keyword.value || d.uName == keyword.value) {
       return true
     }
     return enableRegex.value
-      ? d.msg?.match(keyword.value)
-        ? true
-        : false
+      ? !!d.msg?.match(keyword.value)
       : d.msg?.toLowerCase().includes(keyword.value.toLowerCase()) == true
   }
   if (price.value && price.value > 0) {
-    tempDanmakus = tempDanmakus.filter((d) => (d.price ?? 0) >= (price.value ?? 0))
+    tempDanmakus = tempDanmakus.filter(d => (d.price ?? 0) >= (price.value ?? 0))
   }
   if (orderDecreasing.value) tempDanmakus = tempDanmakus.reverse()
-  var index = 0
+  let index = 0
   tempDanmakus.forEach((d) => {
     d.id = `${d.ouId}_${d.time}_${index}`
     index++
@@ -340,8 +342,8 @@ function RoundNumber(num: number) {
 
 onMounted(() => {
   danmakus.value = GetFilteredDanmakus()
-  existEnterMessage.value = danmakus.value.some((d) => d.type == EventDataTypes.Message)
-  //defaultFilterSelected.push(EventDataTypes.Enter)
+  existEnterMessage.value = danmakus.value.some(d => d.type == EventDataTypes.Message)
+  // defaultFilterSelected.push(EventDataTypes.Enter)
 })
 </script>
 
@@ -354,7 +356,7 @@ onMounted(() => {
     <NModal
       v-model:show="showModal"
       preset="card"
-      :style="'width: 600px;max-width: 90vw;max-height: 90vh;'"
+      style="width: 600px;max-width: 90vw;max-height: 90vh;"
       content-style="overflow-y: auto"
       @after-leave="userDanmakus = undefined"
     >
diff --git a/src/components/DanmakuItem.vue b/src/components/DanmakuItem.vue
index a4b97a0..6994013 100644
--- a/src/components/DanmakuItem.vue
+++ b/src/components/DanmakuItem.vue
@@ -1,9 +1,26 @@
 <script setup lang="ts">
-import { AccountInfo, DanmakuModel, EventDataTypes } from '@/api/api-models'
+import type { AccountInfo, DanmakuModel } from '@/api/api-models'
 import { Money24Regular, VehicleShip24Filled } from '@vicons/fluent'
 import { format } from 'date-fns'
 import { NButton, NCard, NDivider, NIcon, NTag, NTooltip } from 'naive-ui'
+import { EventDataTypes } from '@/api/api-models'
 
+const {
+  danmaku,
+  accountInfo,
+  height = 30,
+  showName = true,
+  showAvatar = true,
+} = defineProps<{
+  danmaku: DanmakuModel
+  accountInfo: AccountInfo | undefined
+  showName?: boolean
+  showAvatar?: boolean
+  height?: number
+}>()
+defineEmits<{
+  (e: 'onClickName', uId: number, ouId: string): void
+}>()
 function GetSCColor(price: number): string {
   if (price === 0) return `#2a60b2`
   if (price > 0 && price < 30) return `#2a60b2`
@@ -24,23 +41,6 @@ function GetGuardColor(price: number | null | undefined): string {
   }
   return ''
 }
-
-const {
-  danmaku,
-  accountInfo,
-  height = 30,
-  showName = true,
-  showAvatar = true,
-} = defineProps<{
-  danmaku: DanmakuModel
-  accountInfo: AccountInfo | undefined
-  showName?: boolean
-  showAvatar?: boolean
-  height?: number
-}>()
-defineEmits<{
-  (e: 'onClickName', uId: number, ouId: string): void
-}>()
 </script>
 
 <template>
@@ -48,7 +48,7 @@ defineEmits<{
     v-if="danmaku.type == EventDataTypes.SC"
     :style="`margin-top: 5px;margin-bottom: 5px;max-width:500px;background-color: ${GetSCColor(danmaku.price ?? 0)};`"
     content-style="border-radius: 3px;padding:5px;min-height:45px;display:flex;align-items:center;"
-    :header-style="`padding:5px;background: rgba(255, 255, 255, 15%);font-size: 14px;`"
+    header-style="padding:5px;background: rgba(255, 255, 255, 15%);font-size: 14px;"
     size="small"
     hoverable
   >
@@ -175,13 +175,13 @@ defineEmits<{
           <NTooltip>
             <template #trigger>
               <img
-                :src="'https://' + danmaku.msg + `@22h`"
+                :src="`https://${danmaku.msg}@22h`"
                 referrerpolicy="no-referrer"
                 :style="`max-height: ${height}px;display:inline-flex;`"
               >
             </template>
             <img
-              :src="'https://' + danmaku.msg"
+              :src="`https://${danmaku.msg}`"
               referrerpolicy="no-referrer"
             >
           </NTooltip>
@@ -192,7 +192,7 @@ defineEmits<{
       </span>
       <span
         v-else-if="danmaku.type == EventDataTypes.Gift"
-        :style="'color:' + ((danmaku.price ?? 0) > 0 ? '#DD2F2F' : '#E9A8A8')"
+        :style="`color:${(danmaku.price ?? 0) > 0 ? '#DD2F2F' : '#E9A8A8'}`"
       >
         <NTag
           v-if="(danmaku.price ?? 0) > 0"
diff --git a/src/components/DynamicForm.vue b/src/components/DynamicForm.vue
index ba81781..944acaa 100644
--- a/src/components/DynamicForm.vue
+++ b/src/components/DynamicForm.vue
@@ -1,438 +1,450 @@
 <script setup lang="ts">
-  import { UploadConfig } from '@/api/account';
-import { UploadFileResponse, UserFileLocation } from '@/api/api-models';
-import { ConfigItemDefinition, DecorativeImageProperties, RGBAColor, rgbaToString } from '@/data/VTsuruConfigTypes';
-import { uploadFiles, UploadStage } from '@/data/fileUpload';
-import { ArrowDown20Filled, ArrowUp20Filled, Delete20Filled, Info24Filled } from '@vicons/fluent';
-import { NButton, NCard, NCheckbox, NColorPicker, NEmpty, NFlex, NForm, NGrid, NIcon, NInput, NInputNumber, NModal, NProgress, NScrollbar, NSelect, NSlider, NSpace, NText, NTooltip, NUpload, SelectOption, UploadFileInfo, useMessage } from 'naive-ui';
-import { computed, h, onMounted, ref } from 'vue';
+import type { SelectOption, UploadFileInfo } from 'naive-ui'
+import type { UploadFileResponse } from '@/api/api-models'
+import type { ConfigItemDefinition, DecorativeImageProperties, RGBAColor } from '@/data/VTsuruConfigTypes'
+import { ArrowDown20Filled, ArrowUp20Filled, Delete20Filled, Info24Filled } from '@vicons/fluent'
+import { NButton, NCard, NCheckbox, NColorPicker, NEmpty, NFlex, NForm, NGrid, NIcon, NInput, NInputNumber, NModal, NProgress, NScrollbar, NSelect, NSlider, NSpace, NText, NTooltip, NUpload, useMessage } from 'naive-ui'
+import { computed, h, onMounted, ref } from 'vue'
+import { UploadConfig } from '@/api/account'
+import { UserFileLocation } from '@/api/api-models'
+import { uploadFiles, UploadStage } from '@/data/fileUpload'
+import { rgbaToString } from '@/data/VTsuruConfigTypes'
 
-  const message = useMessage();
+const props = defineProps<{
+  name?: string
+  configData: any
+  config: ConfigItemDefinition[] | undefined
+}>()
 
-  const props = defineProps<{
-    name?: string;
-    configData: any;
-    config: ConfigItemDefinition[] | undefined;
-  }>();
+const message = useMessage()
 
-  const fileList = ref<{ [key: string]: UploadFileInfo[]; }>({});
-  // 新增实际文件列表，用于存储待上传的文件
-  const pendingFiles = ref<{ [key: string]: File[]; }>({});
-  // 新增装饰图片待上传文件
-  const pendingDecorativeImages = ref<{ [key: string]: File[]; }>({});
+const fileList = ref<{ [key: string]: UploadFileInfo[] }>({})
+// 新增实际文件列表，用于存储待上传的文件
+const pendingFiles = ref<{ [key: string]: File[] }>({})
+// 新增装饰图片待上传文件
+const pendingDecorativeImages = ref<{ [key: string]: File[] }>({})
 
-  // 上传进度相关
-  const showUploadModal = ref(false);
-  const uploadStage = ref('');
-  const uploadProgress = ref(0);
-  const totalFilesToUpload = ref(0);
-  const uploadedFilesCount = ref(0);
+// 上传进度相关
+const showUploadModal = ref(false)
+const uploadStage = ref('')
+const uploadProgress = ref(0)
+const totalFilesToUpload = ref(0)
+const uploadedFilesCount = ref(0)
 
-  const selectedImageId = ref<number | null>(null);
+const selectedImageId = ref<number | null>(null)
 
-  const isUploading = ref(false);
+const isUploading = ref(false)
 
-  // 检查配置项是否应该显示
-  function isItemVisible(item: ConfigItemDefinition): boolean {
-    if (!item.visibleWhen) return true;
-    try {
-      return item.visibleWhen(props.configData);
-    } catch (err) {
-      console.error(`执行条件显示判断出错: ${err}`);
-      return true; // 错误时默认显示
+// 检查配置项是否应该显示
+function isItemVisible(item: ConfigItemDefinition): boolean {
+  if (!item.visibleWhen) return true
+  try {
+    return item.visibleWhen(props.configData)
+  } catch (err) {
+    console.error(`执行条件显示判断出错: ${err}`)
+    return true // 错误时默认显示
+  }
+}
+
+// 计算属性：过滤出应该显示的配置项
+const visibleItems = computed(() => {
+  if (!props.config) return []
+  return props.config.filter(item => isItemVisible(item))
+})
+
+// 获取select组件的选项
+function getSelectOptions(item: ConfigItemDefinition): SelectOption[] {
+  if (item.type !== 'select') return []
+
+  const options = typeof item.options === 'function'
+    ? item.options(props.configData)
+    : item.options
+
+  return options || []
+}
+
+function OnFileListChange(key: string, files: UploadFileInfo[]) {
+  if (files.length == 1) {
+    const file = files[0]
+    if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
+      message.error('文件大小不能超过10MB')
+      fileList.value[key] = []
+      return
+    }
+
+    // 存储文件以便于稍后上传
+    if (file.file) {
+      if (!pendingFiles.value[key]) {
+        pendingFiles.value[key] = []
+      }
+      pendingFiles.value[key].push(file.file)
+    }
+  }
+}
+
+// 更新上传进度的函数
+function updateUploadProgress(stage: string, fileIndex?: number, totalFiles?: number) {
+  uploadStage.value = stage
+
+  if (totalFiles !== undefined) {
+    totalFilesToUpload.value = totalFiles
+  }
+
+  if (fileIndex !== undefined) {
+    uploadedFilesCount.value = fileIndex
+    uploadProgress.value = Math.floor((fileIndex / totalFilesToUpload.value) * 100)
+  }
+}
+
+async function uploadAllFiles() {
+  const allPendingFiles: File[] = []
+
+  // 计算待上传的文件总数
+  for (const key in pendingFiles.value) {
+    if (pendingFiles.value[key]?.length > 0) {
+      allPendingFiles.push(...pendingFiles.value[key])
     }
   }
 
-  // 计算属性：过滤出应该显示的配置项
-  const visibleItems = computed(() => {
-    if (!props.config) return [];
-    return props.config.filter(item => isItemVisible(item));
-  });
-
-  // 获取select组件的选项
-  function getSelectOptions(item: ConfigItemDefinition): SelectOption[] {
-    if (item.type !== 'select') return [];
-
-    const options = typeof item.options === 'function'
-      ? item.options(props.configData)
-      : item.options;
-
-    return options || [];
-  }
-
-  function OnFileListChange(key: string, files: UploadFileInfo[]) {
-    if (files.length == 1) {
-      var file = files[0];
-      if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
-        message.error('文件大小不能超过10MB');
-        fileList.value[key] = [];
-        return;
-      }
-
-      // 存储文件以便于稍后上传
-      if (file.file) {
-        if (!pendingFiles.value[key]) {
-          pendingFiles.value[key] = [];
-        }
-        pendingFiles.value[key].push(file.file);
-      }
+  for (const key in pendingDecorativeImages.value) {
+    if (pendingDecorativeImages.value[key]?.length > 0) {
+      allPendingFiles.push(...pendingDecorativeImages.value[key])
     }
   }
 
-  // 更新上传进度的函数
-  function updateUploadProgress(stage: string, fileIndex?: number, totalFiles?: number) {
-    uploadStage.value = stage;
-
-    if (totalFiles !== undefined) {
-      totalFilesToUpload.value = totalFiles;
-    }
-
-    if (fileIndex !== undefined) {
-      uploadedFilesCount.value = fileIndex;
-      uploadProgress.value = Math.floor((fileIndex / totalFilesToUpload.value) * 100);
-    }
+  // 如果没有文件需要上传，直接返回
+  if (allPendingFiles.length === 0) {
+    return true
   }
 
-  async function uploadAllFiles() {
-    const allPendingFiles: File[] = [];
+  // 显示上传模态框
+  totalFilesToUpload.value = allPendingFiles.length
+  uploadedFilesCount.value = 0
+  uploadProgress.value = 0
+  showUploadModal.value = true
 
-    // 计算待上传的文件总数
-    for (const key in pendingFiles.value) {
-      if (pendingFiles.value[key]?.length > 0) {
-        allPendingFiles.push(...pendingFiles.value[key]);
-      }
-    }
+  const uploadTasks = []
+  let fileCounter = 0
 
-    for (const key in pendingDecorativeImages.value) {
-      if (pendingDecorativeImages.value[key]?.length > 0) {
-        allPendingFiles.push(...pendingDecorativeImages.value[key]);
-      }
-    }
-
-    // 如果没有文件需要上传，直接返回
-    if (allPendingFiles.length === 0) {
-      return true;
-    }
-
-    // 显示上传模态框
-    totalFilesToUpload.value = allPendingFiles.length;
-    uploadedFilesCount.value = 0;
-    uploadProgress.value = 0;
-    showUploadModal.value = true;
-
-    const uploadTasks = [];
-    let fileCounter = 0;
-
-    // 上传普通文件
-    for (const key in pendingFiles.value) {
-      if (pendingFiles.value[key]?.length > 0) {
-        const filesToUpload = pendingFiles.value[key];
-        uploadTasks.push(
-          uploadFiles(
-            filesToUpload,
-            undefined,
-            UserFileLocation.Local,
-            (stage) => {
-              updateUploadProgress(stage, fileCounter + filesToUpload.length, totalFilesToUpload.value);
-              if (stage === UploadStage.Success) {
-                fileCounter += filesToUpload.length;
-              } else if (stage === UploadStage.Failed) {
-                message.error(`${key} 文件上传失败`);
-              }
+  // 上传普通文件
+  for (const key in pendingFiles.value) {
+    if (pendingFiles.value[key]?.length > 0) {
+      const filesToUpload = pendingFiles.value[key]
+      uploadTasks.push(
+        uploadFiles(
+          filesToUpload,
+          undefined,
+          UserFileLocation.Local,
+          (stage) => {
+            updateUploadProgress(stage, fileCounter + filesToUpload.length, totalFilesToUpload.value)
+            if (stage === UploadStage.Success) {
+              fileCounter += filesToUpload.length
+            } else if (stage === UploadStage.Failed) {
+              message.error(`${key} 文件上传失败`)
             }
-          ).then(results => {
-            // 更新配置数据
-            props.configData[key] = results;
-          })
-        );
-      }
+          },
+        ).then((results) => {
+          // 更新配置数据
+          props.configData[key] = results
+        }),
+      )
     }
+  }
 
-    // 上传装饰图片
-    for (const key in pendingDecorativeImages.value) {
-      if (pendingDecorativeImages.value[key]?.length > 0) {
-        const filesToUpload = pendingDecorativeImages.value[key];
-        uploadTasks.push(
-          uploadFiles(
-            filesToUpload,
-            undefined,
-            UserFileLocation.Local,
-            (stage) => {
-              updateUploadProgress(stage, fileCounter + filesToUpload.length, totalFilesToUpload.value);
-              if (stage === UploadStage.Success) {
-                fileCounter += filesToUpload.length;
-              } else if (stage === UploadStage.Failed) {
-                message.error(`装饰图片上传失败`);
-              }
+  // 上传装饰图片
+  for (const key in pendingDecorativeImages.value) {
+    if (pendingDecorativeImages.value[key]?.length > 0) {
+      const filesToUpload = pendingDecorativeImages.value[key]
+      uploadTasks.push(
+        uploadFiles(
+          filesToUpload,
+          undefined,
+          UserFileLocation.Local,
+          (stage) => {
+            updateUploadProgress(stage, fileCounter + filesToUpload.length, totalFilesToUpload.value)
+            if (stage === UploadStage.Success) {
+              fileCounter += filesToUpload.length
+            } else if (stage === UploadStage.Failed) {
+              message.error(`装饰图片上传失败`)
             }
-          ).then(results => {
-            // 创建新的装饰图片对象并添加到现有数组中
-            const newImages: DecorativeImageProperties[] = results.map((result, index) => ({
-              id: Number(result.id),
-              path: result.path,
-              name: result.name,
-              hash: result.hash,
-              src: result.path,
-              x: 10 + index * 5,
-              y: 10 + index * 5,
-              width: 20,
-              rotation: 0,
-              opacity: 1,
-              zIndex: (props.configData[key]?.length ?? 0) + index + 1,
-            }));
+          },
+        ).then((results) => {
+          // 创建新的装饰图片对象并添加到现有数组中
+          const newImages: DecorativeImageProperties[] = results.map((result, index) => ({
+            id: Number(result.id),
+            path: result.path,
+            name: result.name,
+            hash: result.hash,
+            src: result.path,
+            x: 10 + index * 5,
+            y: 10 + index * 5,
+            width: 20,
+            rotation: 0,
+            opacity: 1,
+            zIndex: (props.configData[key]?.length ?? 0) + index + 1,
+          }))
 
-            const currentImages = props.configData[key] as DecorativeImageProperties[] || [];
-            props.configData[key] = [...currentImages, ...newImages];
-          })
-        );
-      }
-    }
-
-    // 等待所有上传任务完成
-    try {
-      await Promise.all(uploadTasks);
-      // 完成上传，关闭模态框
-      updateUploadProgress(UploadStage.Success, totalFilesToUpload.value, totalFilesToUpload.value);
-      setTimeout(() => {
-        showUploadModal.value = false;
-      }, 500); // 给用户一个短暂的视觉反馈，然后关闭模态框
-
-      // 清空待上传文件
-      pendingFiles.value = {};
-      pendingDecorativeImages.value = {};
-      return true;
-    } catch (error) {
-      console.error("文件上传失败:", error);
-      message.error("文件上传失败: " + (error instanceof Error ? error.message : String(error)));
-      updateUploadProgress(UploadStage.Failed);
-      setTimeout(() => {
-        showUploadModal.value = false;
-      }, 2000); // 错误状态多显示一会儿
-      return false;
+          const currentImages = props.configData[key] as DecorativeImageProperties[] || []
+          props.configData[key] = [...currentImages, ...newImages]
+        }),
+      )
     }
   }
 
-  async function onSubmit() {
-    try {
-      isUploading.value = true;
+  // 等待所有上传任务完成
+  try {
+    await Promise.all(uploadTasks)
+    // 完成上传，关闭模态框
+    updateUploadProgress(UploadStage.Success, totalFilesToUpload.value, totalFilesToUpload.value)
+    setTimeout(() => {
+      showUploadModal.value = false
+    }, 500) // 给用户一个短暂的视觉反馈，然后关闭模态框
 
-      // 先上传所有文件
-      const uploadSuccess = await uploadAllFiles();
-      if (!uploadSuccess) {
-        isUploading.value = false;
-        return;
-      }
-
-      const success = await UploadConfig(props.name || '', props.configData, true);
-
-      if (success) {
-        message.success('已保存设置');
-        props.config?.forEach(item => {
-          if (item.type === 'render') {
-            item.onUploaded?.(props.configData[item.key], props.configData);
-          }
-          else {
-            item.onUploaded?.call(item, props.configData[item.key], props.configData);
-          }
-        });
-      } else {
-        message.error('保存失败');
-      }
-    } catch (err) {
-      message.error('保存失败: ' + err);
-    }
-    finally {
-      isUploading.value = false;
-    }
+    // 清空待上传文件
+    pendingFiles.value = {}
+    pendingDecorativeImages.value = {}
+    return true
+  } catch (error) {
+    console.error('文件上传失败:', error)
+    message.error(`文件上传失败: ${error instanceof Error ? error.message : String(error)}`)
+    updateUploadProgress(UploadStage.Failed)
+    setTimeout(() => {
+      showUploadModal.value = false
+    }, 2000) // 错误状态多显示一会儿
+    return false
   }
+}
 
-  // --- 颜色转换辅助函数 ---
-  function stringToRgba(colorString: string | null | undefined): RGBAColor {
-    const defaultColor: RGBAColor = { r: 0, g: 0, b: 0, a: 1 }; // 默认黑色不透明
-    if (!colorString) return defaultColor;
+async function onSubmit() {
+  try {
+    isUploading.value = true
 
-    try {
-      // 尝试匹配 rgba(r, g, b, a)
-      const rgbaMatch = colorString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-      if (rgbaMatch) {
-        return {
-          r: parseInt(rgbaMatch[1], 10),
-          g: parseInt(rgbaMatch[2], 10),
-          b: parseInt(rgbaMatch[3], 10),
-          a: rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1,
-        };
-      }
+    // 先上传所有文件
+    const uploadSuccess = await uploadAllFiles()
+    if (!uploadSuccess) {
+      isUploading.value = false
+      return
+    }
 
-      // 尝试匹配 #RRGGBBAA
-      const hex8Match = colorString.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
-      if (hex8Match) {
-        return {
-            r: parseInt(hex8Match[1], 16),
-            g: parseInt(hex8Match[2], 16),
-            b: parseInt(hex8Match[3], 16),
-            a: parseInt(hex8Match[4], 16) / 255,
-        };
-      }
+    const success = await UploadConfig(props.name || '', props.configData, true)
 
-       // 尝试匹配 #RRGGBB
-      const hex6Match = colorString.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
-      if (hex6Match) {
-          return {
-              r: parseInt(hex6Match[1], 16),
-              g: parseInt(hex6Match[2], 16),
-              b: parseInt(hex6Match[3], 16),
-              a: 1, // Hex6 doesn't have alpha, assume 1
-          };
-      }
-
-      // 尝试匹配 #RGBA
-        const shortHex4Match = colorString.match(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i);
-        if (shortHex4Match) {
-            return {
-                r: parseInt(shortHex4Match[1] + shortHex4Match[1], 16),
-                g: parseInt(shortHex4Match[2] + shortHex4Match[2], 16),
-                b: parseInt(shortHex4Match[3] + shortHex4Match[3], 16),
-                a: parseInt(shortHex4Match[4] + shortHex4Match[4], 16) / 255,
-            };
+    if (success) {
+      message.success('已保存设置')
+      props.config?.forEach((item) => {
+        if (item.type === 'render') {
+          item.onUploaded?.(props.configData[item.key], props.configData)
+        } else {
+          item.onUploaded?.call(item, props.configData[item.key], props.configData)
         }
-
-        // 尝试匹配 #RGB
-        const shortHex3Match = colorString.match(/^#?([a-f\d])([a-f\d])([a-f\d])$/i);
-        if (shortHex3Match) {
-            return {
-                r: parseInt(shortHex3Match[1] + shortHex3Match[1], 16),
-                g: parseInt(shortHex3Match[2] + shortHex3Match[2], 16),
-                b: parseInt(shortHex3Match[3] + shortHex3Match[3], 16),
-                a: 1, // Hex3 doesn't have alpha, assume 1
-            };
-        }
-
-      console.warn(`无法解析颜色字符串: "${colorString}", 已返回默认颜色`);
-      return defaultColor;
-    } catch (e) {
-        console.error(`解析颜色字符串 "${colorString}" 时出错:`, e);
-        return defaultColor;
+      })
+    } else {
+      message.error('保存失败')
     }
+  } catch (err) {
+    message.error(`保存失败: ${err}`)
+  } finally {
+    isUploading.value = false
   }
+}
 
-  // 确保 rgbaToString 也能处理 null/undefined
-  const safeRgbaToString = (color: RGBAColor | null | undefined): string => {
-      return rgbaToString(color ?? { r: 0, g: 0, b: 0, a: 1 }); // 提供默认值以防万一
+// --- 颜色转换辅助函数 ---
+function stringToRgba(colorString: string | null | undefined): RGBAColor {
+  const defaultColor: RGBAColor = { r: 0, g: 0, b: 0, a: 1 } // 默认黑色不透明
+  if (!colorString) return defaultColor
+
+  try {
+    // 尝试匹配 rgba(r, g, b, a)
+    const rgbaMatch = colorString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
+    if (rgbaMatch) {
+      return {
+        r: Number.parseInt(rgbaMatch[1], 10),
+        g: Number.parseInt(rgbaMatch[2], 10),
+        b: Number.parseInt(rgbaMatch[3], 10),
+        a: rgbaMatch[4] !== undefined ? Number.parseFloat(rgbaMatch[4]) : 1,
+      }
+    }
+
+    // 尝试匹配 #RRGGBBAA
+    const hex8Match = colorString.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
+    if (hex8Match) {
+      return {
+        r: Number.parseInt(hex8Match[1], 16),
+        g: Number.parseInt(hex8Match[2], 16),
+        b: Number.parseInt(hex8Match[3], 16),
+        a: Number.parseInt(hex8Match[4], 16) / 255,
+      }
+    }
+
+    // 尝试匹配 #RRGGBB
+    const hex6Match = colorString.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
+    if (hex6Match) {
+      return {
+        r: Number.parseInt(hex6Match[1], 16),
+        g: Number.parseInt(hex6Match[2], 16),
+        b: Number.parseInt(hex6Match[3], 16),
+        a: 1, // Hex6 doesn't have alpha, assume 1
+      }
+    }
+
+    // 尝试匹配 #RGBA
+    const shortHex4Match = colorString.match(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i)
+    if (shortHex4Match) {
+      return {
+        r: Number.parseInt(shortHex4Match[1] + shortHex4Match[1], 16),
+        g: Number.parseInt(shortHex4Match[2] + shortHex4Match[2], 16),
+        b: Number.parseInt(shortHex4Match[3] + shortHex4Match[3], 16),
+        a: Number.parseInt(shortHex4Match[4] + shortHex4Match[4], 16) / 255,
+      }
+    }
+
+    // 尝试匹配 #RGB
+    const shortHex3Match = colorString.match(/^#?([a-f\d])([a-f\d])([a-f\d])$/i)
+    if (shortHex3Match) {
+      return {
+        r: Number.parseInt(shortHex3Match[1] + shortHex3Match[1], 16),
+        g: Number.parseInt(shortHex3Match[2] + shortHex3Match[2], 16),
+        b: Number.parseInt(shortHex3Match[3] + shortHex3Match[3], 16),
+        a: 1, // Hex3 doesn't have alpha, assume 1
+      }
+    }
+
+    console.warn(`无法解析颜色字符串: "${colorString}", 已返回默认颜色`)
+    return defaultColor
+  } catch (e) {
+    console.error(`解析颜色字符串 "${colorString}" 时出错:`, e)
+    return defaultColor
   }
+}
 
-  // 装饰图片功能
-  const updateImageProp = (id: number, prop: keyof DecorativeImageProperties, value: any, key: string) => {
-    const images = props.configData[key] as DecorativeImageProperties[];
-    const index = images.findIndex(img => img.id === id);
-    if (index !== -1) {
-      const updatedImages = [...images];
-      updatedImages[index] = { ...updatedImages[index], [prop]: value };
-      props.configData[key] = updatedImages;
-    }
-  };
+// 确保 rgbaToString 也能处理 null/undefined
+function safeRgbaToString(color: RGBAColor | null | undefined): string {
+  return rgbaToString(color ?? { r: 0, g: 0, b: 0, a: 1 }) // 提供默认值以防万一
+}
 
-  const removeImage = (id: number, key: string) => {
-    const images = props.configData[key] as DecorativeImageProperties[];
-    props.configData[key] = images.filter(img => img.id !== id);
-    if (selectedImageId.value === id) {
-      selectedImageId.value = null;
-    }
-  };
+// 装饰图片功能
+function updateImageProp(id: number, prop: keyof DecorativeImageProperties, value: any, key: string) {
+  const images = props.configData[key] as DecorativeImageProperties[]
+  const index = images.findIndex(img => img.id === id)
+  if (index !== -1) {
+    const updatedImages = [...images]
+    updatedImages[index] = { ...updatedImages[index], [prop]: value }
+    props.configData[key] = updatedImages
+  }
+}
 
-  const changeZIndex = (id: number, direction: 'up' | 'down', key: string) => {
-    const images = props.configData[key] as DecorativeImageProperties[];
-    const index = images.findIndex(img => img.id === id);
-    if (index === -1) return;
-    const newImages = [...images];
-    if (direction === 'up' && index < newImages.length - 1) {
-      [newImages[index], newImages[index + 1]] = [newImages[index + 1], newImages[index]];
-    } else if (direction === 'down' && index > 0) {
-      [newImages[index], newImages[index - 1]] = [newImages[index - 1], newImages[index]];
-    }
-    newImages.forEach((img, i) => img.zIndex = i + 1);
-    props.configData[key] = newImages;
-  };
+function removeImage(id: number, key: string) {
+  const images = props.configData[key] as DecorativeImageProperties[]
+  props.configData[key] = images.filter(img => img.id !== id)
+  if (selectedImageId.value === id) {
+    selectedImageId.value = null
+  }
+}
 
-  const renderDecorativeImages = (key: string) => {
-    return h(NFlex, { vertical: true, size: 'large' }, () => [
-      // 上传按钮
-      h(NUpload, {
-        multiple: true, accept: 'image/*', showFileList: false,
-        'onUpdate:fileList': (fileList: UploadFileInfo[]) => {
-          if (fileList.length > 0) {
-            const filesToUpload = fileList.map(f => f.file).filter((f): f is File => f instanceof File);
-            if (filesToUpload.length > 0) {
-              // 不立即上传，而是存储起来等待提交时上传
-              if (!pendingDecorativeImages.value[key]) {
-                pendingDecorativeImages.value[key] = [];
-              }
-              pendingDecorativeImages.value[key].push(...filesToUpload);
-              message.success(`已选择 ${filesToUpload.length} 个装饰图片，提交时会自动上传`);
+function changeZIndex(id: number, direction: 'up' | 'down', key: string) {
+  const images = props.configData[key] as DecorativeImageProperties[]
+  const index = images.findIndex(img => img.id === id)
+  if (index === -1) return
+  const newImages = [...images]
+  if (direction === 'up' && index < newImages.length - 1) {
+    [newImages[index], newImages[index + 1]] = [newImages[index + 1], newImages[index]]
+  } else if (direction === 'down' && index > 0) {
+    [newImages[index], newImages[index - 1]] = [newImages[index - 1], newImages[index]]
+  }
+  newImages.forEach((img, i) => img.zIndex = i + 1)
+  props.configData[key] = newImages
+}
+
+function renderDecorativeImages(key: string) {
+  return h(NFlex, { vertical: true, size: 'large' }, () => [
+    // 上传按钮
+    h(NUpload, {
+      'multiple': true,
+      'accept': 'image/*',
+      'showFileList': false,
+      'onUpdate:fileList': (fileList: UploadFileInfo[]) => {
+        if (fileList.length > 0) {
+          const filesToUpload = fileList.map(f => f.file).filter((f): f is File => f instanceof File)
+          if (filesToUpload.length > 0) {
+            // 不立即上传，而是存储起来等待提交时上传
+            if (!pendingDecorativeImages.value[key]) {
+              pendingDecorativeImages.value[key] = []
             }
+            pendingDecorativeImages.value[key].push(...filesToUpload)
+            message.success(`已选择 ${filesToUpload.length} 个装饰图片，提交时会自动上传`)
           }
-          return [];
-        },
-      }, { default: () => h(NButton, null, () => '添加装饰图片') }),
+        }
+        return []
+      },
+    }, { default: () => h(NButton, null, () => '添加装饰图片') }),
 
-      // 图片列表
-      h(NScrollbar, { style: { maxHeight: '300px', marginTop: '10px' } }, () => {
-        const images = props.configData[key] as DecorativeImageProperties[] || [];
-        return images.length > 0
-          ? images.map((img: DecorativeImageProperties) => {
-            const isSelected = selectedImageId.value === img.id;
+    // 图片列表
+    h(NScrollbar, { style: { maxHeight: '300px', marginTop: '10px' } }, () => {
+      const images = props.configData[key] as DecorativeImageProperties[] || []
+      return images.length > 0
+        ? images.map((img: DecorativeImageProperties) => {
+            const isSelected = selectedImageId.value === img.id
             return h(NCard, {
-              key: img.id, size: 'small', hoverable: true,
+              key: img.id,
+              size: 'small',
+              hoverable: true,
               style: { marginBottom: '10px', cursor: 'pointer', border: isSelected ? '2px solid var(--primary-color)' : '1px solid #eee' },
-              onClick: () => selectedImageId.value = img.id
+              onClick: () => selectedImageId.value = img.id,
             }, {
               default: () => h(NFlex, { justify: 'space-between', align: 'center' }, () => [
                 h(NFlex, { align: 'center', size: 'small' }, () => [
                   h('img', { src: img.path, style: { width: '40px', height: '40px', objectFit: 'contain', marginRight: '10px', backgroundColor: '#f0f0f0' } }),
-                  h('span', `ID: ${img.id}`)
+                  h('span', `ID: ${img.id}`),
                 ]),
                 h(NSpace, null, () => [
-                  h(NButton, { size: 'tiny', circle: true, secondary: true, title: '上移一层', onClick: (e: Event) => { e.stopPropagation(); changeZIndex(img.id, 'up', key); } }, { icon: () => h(NIcon, { component: ArrowUp20Filled }) }),
-                  h(NButton, { size: 'tiny', circle: true, secondary: true, title: '下移一层', onClick: (e: Event) => { e.stopPropagation(); changeZIndex(img.id, 'down', key); } }, { icon: () => h(NIcon, { component: ArrowDown20Filled }) }),
-                  h(NButton, { size: 'tiny', circle: true, type: 'error', ghost: true, title: '删除', onClick: (e: Event) => { e.stopPropagation(); removeImage(img.id, key); } }, { icon: () => h(NIcon, { component: Delete20Filled }) })
-                ])
+                  h(NButton, { size: 'tiny', circle: true, secondary: true, title: '上移一层', onClick: (e: Event) => {
+                    e.stopPropagation(); changeZIndex(img.id, 'up', key)
+                  } }, { icon: () => h(NIcon, { component: ArrowUp20Filled }) }),
+                  h(NButton, { size: 'tiny', circle: true, secondary: true, title: '下移一层', onClick: (e: Event) => {
+                    e.stopPropagation(); changeZIndex(img.id, 'down', key)
+                  } }, { icon: () => h(NIcon, { component: ArrowDown20Filled }) }),
+                  h(NButton, { size: 'tiny', circle: true, type: 'error', ghost: true, title: '删除', onClick: (e: Event) => {
+                    e.stopPropagation(); removeImage(img.id, key)
+                  } }, { icon: () => h(NIcon, { component: Delete20Filled }) }),
+                ]),
               ]),
-              footer: () => isSelected ? h(NFlex, { vertical: true, size: 'small', style: { marginTop: '10px' } }, () => [
-                h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, 'X (%):'), h(NInputNumber, { value: img.x, size: 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'x', v ?? 0, key), min: 0, max: 100, step: 1 })]),
-                h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, 'Y (%):'), h(NInputNumber, { value: img.y, size: 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'y', v ?? 0, key), min: 0, max: 100, step: 1 })]),
-                h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '宽度(%):'), h(NInputNumber, { value: img.width, size: 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'width', v ?? 1, key), min: 1, step: 1 })]),
-                h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '旋转(°):'), h(NInputNumber, { value: img.rotation, size: 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'rotation', v ?? 0, key), min: -360, max: 360, step: 1 }), h(NSlider, { value: img.rotation, 'onUpdate:value': (v: number | number[]) => updateImageProp(img.id, 'rotation', Array.isArray(v) ? v[0] : v ?? 0, key), min: -180, max: 180, step: 1, style: { marginLeft: '10px', flexGrow: 1 } })]),
-                h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '透明度:'), h(NInputNumber, { value: img.opacity, size: 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'opacity', v ?? 0, key), min: 0, max: 1, step: 0.01 }), h(NSlider, { value: img.opacity, 'onUpdate:value': (v: number | number[]) => updateImageProp(img.id, 'opacity', Array.isArray(v) ? v[0] : v ?? 0, key), min: 0, max: 1, step: 0.01, style: { marginLeft: '10px', flexGrow: 1 } })]),
-                h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '层级:'), h(NInputNumber, { value: img.zIndex, size: 'small', readonly: true })]),
-              ]) : null
-            });
+              footer: () => isSelected
+                ? h(NFlex, { vertical: true, size: 'small', style: { marginTop: '10px' } }, () => [
+                    h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, 'X (%):'), h(NInputNumber, { 'value': img.x, 'size': 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'x', v ?? 0, key), 'min': 0, 'max': 100, 'step': 1 })]),
+                    h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, 'Y (%):'), h(NInputNumber, { 'value': img.y, 'size': 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'y', v ?? 0, key), 'min': 0, 'max': 100, 'step': 1 })]),
+                    h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '宽度(%):'), h(NInputNumber, { 'value': img.width, 'size': 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'width', v ?? 1, key), 'min': 1, 'step': 1 })]),
+                    h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '旋转(°):'), h(NInputNumber, { 'value': img.rotation, 'size': 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'rotation', v ?? 0, key), 'min': -360, 'max': 360, 'step': 1 }), h(NSlider, { 'value': img.rotation, 'onUpdate:value': (v: number | number[]) => updateImageProp(img.id, 'rotation', Array.isArray(v) ? v[0] : v ?? 0, key), 'min': -180, 'max': 180, 'step': 1, 'style': { marginLeft: '10px', flexGrow: 1 } })]),
+                    h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '透明度:'), h(NInputNumber, { 'value': img.opacity, 'size': 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'opacity', v ?? 0, key), 'min': 0, 'max': 1, 'step': 0.01 }), h(NSlider, { 'value': img.opacity, 'onUpdate:value': (v: number | number[]) => updateImageProp(img.id, 'opacity', Array.isArray(v) ? v[0] : v ?? 0, key), 'min': 0, 'max': 1, 'step': 0.01, 'style': { marginLeft: '10px', flexGrow: 1 } })]),
+                    h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '层级:'), h(NInputNumber, { value: img.zIndex, size: 'small', readonly: true })]),
+                  ])
+                : null,
+            })
           })
-          : h(NEmpty, { description: '暂无装饰图片' });
-      }),
-    ]);
-  };
+        : h(NEmpty, { description: '暂无装饰图片' })
+    }),
+  ])
+}
 
-  function getItems() { }
-  onMounted(() => {
-    props.config?.forEach(item => {
-      if (item.default && !(item.key in props.configData)) {
-        props.configData[item.key] = item.default;
+function getItems() { }
+onMounted(() => {
+  props.config?.forEach((item) => {
+    if (item.default && !(item.key in props.configData)) {
+      props.configData[item.key] = item.default
+    }
+    if (item.type == 'file') {
+      const configItem = props.configData[item.key]
+      if (configItem) {
+        fileList.value[item.key] = configItem.map((uploadedFile: UploadFileResponse) => ({
+          id: uploadedFile.id,
+          thumbnailUrl: uploadedFile.path,
+          name: uploadedFile.name || '',
+          status: 'finished',
+        }))
+      } else {
+        fileList.value[item.key] = []
       }
-      if (item.type == 'file') {
-        const configItem = props.configData[item.key];
-        if (configItem) {
-          fileList.value[item.key] = configItem.map((uploadedFile: UploadFileResponse) => ({
-            id: uploadedFile.id,
-            thumbnailUrl: uploadedFile.path,
-            name: uploadedFile.name || '',
-            status: 'finished',
-          }));
-        }
-        else {
-          fileList.value[item.key] = [];
-        }
-      }
-    });
-  });
+    }
+  })
+})
 </script>
 
 <template>
@@ -551,7 +563,7 @@ import { computed, h, onMounted, ref } from 'vue';
         <NProgress
           type="line"
           :percentage="uploadProgress"
-          :indicator-placement="'inside'"
+          indicator-placement="inside"
           :show-indicator="true"
         />
         <NText v-if="totalFilesToUpload > 0">
diff --git a/src/components/EventFetcherAlert.vue b/src/components/EventFetcherAlert.vue
index 92b0b9f..9dcca23 100644
--- a/src/components/EventFetcherAlert.vue
+++ b/src/components/EventFetcherAlert.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
 import { NAlert, NButton } from 'naive-ui'
+import { useAccount } from '@/api/account'
 
 const accountInfo = useAccount()
 </script>
@@ -43,4 +43,4 @@ const accountInfo = useAccount()
       查看部署教程
     </NButton>
   </NAlert>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/EventFetcherStatusCard.vue b/src/components/EventFetcherStatusCard.vue
index 734bc10..b9e71d9 100644
--- a/src/components/EventFetcherStatusCard.vue
+++ b/src/components/EventFetcherStatusCard.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { EventFetcherType } from '@/api/api-models'
 import { FlashCheckmark16Filled, Info24Filled } from '@vicons/fluent'
 import { NAlert, NButton, NDivider, NIcon, NTag, NText, NTooltip } from 'naive-ui'
 import { computed } from 'vue'
+import { useAccount } from '@/api/account'
+import { EventFetcherType } from '@/api/api-models'
 
 const accountInfo = useAccount()
-  const state = accountInfo.value?.eventFetcherState
+const state = accountInfo.value?.eventFetcherState
 
-  const eventFetcherVersionName = computed(() => {
-    if (state?.type == EventFetcherType.OBS) {
-      return 'OBS/网页端'
-    } else if (state?.type == EventFetcherType.Application) {
-      return '控制台应用'
-    } else if (state?.type == EventFetcherType.Server) {
-      return '本站监听 (已删除)'
-    } else if (state?.type == EventFetcherType.Tauri) {
-      return 'Tauri 应用'
-    } else {
-      return state?.version ?? '未知'
-    }
-  })
+const eventFetcherVersionName = computed(() => {
+  if (state?.type == EventFetcherType.OBS) {
+    return 'OBS/网页端'
+  } else if (state?.type == EventFetcherType.Application) {
+    return '控制台应用'
+  } else if (state?.type == EventFetcherType.Server) {
+    return '本站监听 (已删除)'
+  } else if (state?.type == EventFetcherType.Tauri) {
+    return 'Tauri 应用'
+  } else {
+    return state?.version ?? '未知'
+  }
+})
 
 const status = computed(() => {
   if (state.online == true) {
diff --git a/src/components/FeedbackItem.vue b/src/components/FeedbackItem.vue
index a8b8667..ea51d9a 100644
--- a/src/components/FeedbackItem.vue
+++ b/src/components/FeedbackItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { FeedbackStatus, FeedbackType, ResponseFeedbackModel } from '@/api/api-models'
-import { NCard, NTag, NEllipsis, NDivider, NSpin, NText, NSpace, NTooltip, NTime, NFlex } from 'naive-ui'
-import { computed } from 'vue'
+import type { ResponseFeedbackModel } from '@/api/api-models'
+import { NCard, NDivider, NEllipsis, NFlex, NSpace, NSpin, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import { FeedbackStatus, FeedbackType } from '@/api/api-models'
 
 defineProps<{
   item: ResponseFeedbackModel
@@ -139,7 +139,7 @@ defineProps<{
         align="center"
         :wrap="false"
       >
-        <div :style="`border-radius: 4px; background-color: #75c37f; width: 10px; height: 15px`" />
+        <div style="border-radius: 4px; background-color: #75c37f; width: 10px; height: 15px" />
         <NEllipsis :line-clamp="1">
           <NText>
             {{ item.replyMessage }}
diff --git a/src/components/LabelItem.vue b/src/components/LabelItem.vue
index 647a790..f4ee82d 100644
--- a/src/components/LabelItem.vue
+++ b/src/components/LabelItem.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+defineProps<{
+  label: string
+}>()
+</script>
+
 <template>
   <span class="label-item">
     <p>
@@ -7,12 +13,6 @@
   </span>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-  label: string;
-}>();
-</script>
-
 <style scoped>
 .label-item {
   display: flex;
diff --git a/src/components/LiveInfoContainer.vue b/src/components/LiveInfoContainer.vue
index d24a34d..0621670 100644
--- a/src/components/LiveInfoContainer.vue
+++ b/src/components/LiveInfoContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ResponseLiveInfoModel } from '@/api/api-models'
+import type { ResponseLiveInfoModel } from '@/api/api-models'
 import { Info24Filled } from '@vicons/fluent'
 import {
   NButton,
@@ -16,12 +16,11 @@ import {
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-const route = useRoute()
-const router = useRouter()
-
 const { live } = defineProps<{
   live: ResponseLiveInfoModel
 }>()
+const route = useRoute()
+const router = useRouter()
 
 const defaultDanmakusCount = ref(0)
 function OnClickCover() {
@@ -48,7 +47,7 @@ watch(
           referrerpolicy="no-referrer"
           :style="!live.isFinish ? 'animation: animated-border 2.5s infinite;cursor: pointer' : 'cursor: pointer'"
           class="liveCover"
-          :src="live.coverUrl + '@200w'"
+          :src="`${live.coverUrl}@200w`"
           lazy
           preview-disabled
           @click="OnClickCover()"
diff --git a/src/components/MonacoEditorComponent.vue b/src/components/MonacoEditorComponent.vue
index 7e65f81..4adbf93 100644
--- a/src/components/MonacoEditorComponent.vue
+++ b/src/components/MonacoEditorComponent.vue
@@ -1,22 +1,14 @@
-<template>
-  <div
-    ref="editorContainer"
-    :style="`height: ${height}px;`"
-    
-  />
-</template>
-
 <script setup lang="ts">
-import { editor } from 'monaco-editor';	// 全部导入
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
-
-const value = defineModel<string>('value')
+import { editor } from 'monaco-editor'	// 全部导入
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 const { language, height = 400 } = defineProps<{
   language: string
   height?: number
 }>()
 
+const value = defineModel<string>('value')
+
 const editorContainer = ref<HTMLElement>()
 let editorInstance: editor.IStandaloneCodeEditor | null = null
 
@@ -25,12 +17,12 @@ onMounted(() => {
 
   editorInstance = editor.create(editorContainer.value, {
     value: value.value,
-    language: language,
+    language,
     minimap: {
-      enabled: true
+      enabled: true,
     },
     colorDecorators: true,
-    automaticLayout: true
+    automaticLayout: true,
   })
 
   editorInstance.onDidChangeModelContent(() => {
@@ -64,4 +56,11 @@ watch(() => language, (newLang) => {
     }
   }
 })
-</script>
\ No newline at end of file
+</script>
+
+<template>
+  <div
+    ref="editorContainer"
+    :style="`height: ${height}px;`"
+  />
+</template>
diff --git a/src/components/QuestionItem.vue b/src/components/QuestionItem.vue
index c93327f..a19652d 100644
--- a/src/components/QuestionItem.vue
+++ b/src/components/QuestionItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { QAInfo } from '@/api/api-models'
-import { useQuestionBox } from '@/store/useQuestionBox';
-import { NButton, NCard, NDivider, NFlex, NImage, NTag, NText, NTime, NTooltip, NSpace } from 'naive-ui'
-import { ref } from 'vue';
+import type { QAInfo } from '@/api/api-models'
+import { NCard, NDivider, NFlex, NImage, NSpace, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import { ref } from 'vue'
+import { useQuestionBox } from '@/store/useQuestionBox'
 
 const props = defineProps<{
   item: QAInfo
@@ -15,16 +15,16 @@ const showContent = ref(!isViolation)
 // 计算得分颜色的函数
 function getScoreColor(score: number | undefined): string {
   if (score === undefined) {
-    return 'grey'; // 如果没有分数，返回灰色
+    return 'grey' // 如果没有分数，返回灰色
   }
   // 将分数限制在 0 到 100 之间
-  const clampedScore = Math.max(0, Math.min(100, score));
+  const clampedScore = Math.max(0, Math.min(100, score))
   // 插值计算色相: 0 (红色) for score 0, 120 (绿色) for score 100
-  const hue = 120 * (clampedScore / 100); // 反转插值逻辑
+  const hue = 120 * (clampedScore / 100) // 反转插值逻辑
   // 固定饱和度和亮度 (可根据需要调整)
-  const saturation = 50;
-  const lightness = 45; // 稍暗以提高与白色文本的对比度
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  const saturation = 50
+  const lightness = 45 // 稍暗以提高与白色文本的对比度
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`
 }
 </script>
 
@@ -162,7 +162,7 @@ function getScoreColor(score: number | undefined): string {
       :style="{
         filter: isViolation && !showContent ? 'blur(3.7px)' : '',
         cursor: isViolation && !showContent ? 'pointer' : '',
-        whiteSpace: 'pre-wrap'
+        whiteSpace: 'pre-wrap',
       }"
       @click="isViolation ? (showContent = !showContent) : null"
     >
diff --git a/src/components/QuestionItems.vue b/src/components/QuestionItems.vue
index 1623fe3..ad1acf9 100644
--- a/src/components/QuestionItems.vue
+++ b/src/components/QuestionItems.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { QAInfo } from '@/api/api-models'
-import { NCard, NDivider, NFlex, NImage, NList, NListItem, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import type { QAInfo } from '@/api/api-models'
+import { NList, NListItem } from 'naive-ui'
 import QuestionItem from './QuestionItem.vue'
 
 const props = defineProps<{
diff --git a/src/components/RegisterAndLogin.vue b/src/components/RegisterAndLogin.vue
index 6e3d065..01bd42f 100644
--- a/src/components/RegisterAndLogin.vue
+++ b/src/components/RegisterAndLogin.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { cookie } from '@/api/account';
-import { AccountInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
-import { useLocalStorage } from '@vueuse/core'
-import {
+import type {
   FormInst,
   FormItemInst,
   FormItemRule,
   FormRules,
+} from 'naive-ui'
+import type { AccountInfo } from '@/api/api-models'
+import {
   NAlert,
   NButton,
   NCard,
@@ -24,6 +22,9 @@ import {
 } from 'naive-ui'
 import { onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
+import { cookie } from '@/api/account'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
 
 interface RegisterModel {
   username: string
@@ -105,9 +106,9 @@ const loginRules: FormRules = {
 }
 function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
   return (
-    !!registerModel.value.password &&
-    registerModel.value.password.startsWith(value) &&
-    registerModel.value.password.length >= value.length
+    !!registerModel.value.password
+    && registerModel.value.password.startsWith(value)
+    && registerModel.value.password.length >= value.length
   )
 }
 function validatePasswordSame(rule: FormItemRule, value: string): boolean {
@@ -122,7 +123,7 @@ function onRegisterButtonClick() {
   formRef.value?.validate().then(async () => {
     isLoading.value = true
     await QueryPostAPI<string>(
-      ACCOUNT_API_URL + 'register',
+      `${ACCOUNT_API_URL}register`,
       {
         name: registerModel.value.username,
         email: registerModel.value.email,
@@ -135,7 +136,7 @@ function onRegisterButtonClick() {
           message.success(`注册成功`)
           cookie.value = {
             cookie: data.data,
-            refreshDate: Date.now()
+            refreshDate: Date.now(),
           }
           setTimeout(() => {
             location.reload()
@@ -156,7 +157,7 @@ function onLoginButtonClick() {
     await QueryPostAPI<{
       account: AccountInfo
       token: string
-    }>(ACCOUNT_API_URL + 'login', {
+    }>(`${ACCOUNT_API_URL}login`, {
       nameOrEmail: loginModel.value.account,
       password: loginModel.value.password,
     })
@@ -164,7 +165,7 @@ function onLoginButtonClick() {
         if (data.code == 200) {
           cookie.value = {
             cookie: data.data.token,
-            refreshDate: Date.now()
+            refreshDate: Date.now(),
           }
           message.success(`成功登陆为 ${data?.data.account.name}`)
           location.reload()
@@ -182,7 +183,7 @@ function onLoginButtonClick() {
 }
 async function onForgetPassword() {
   canSendForgetPassword.value = false
-  await QueryGetAPI(ACCOUNT_API_URL + 'reset-password', { email: inputForgetPasswordValue.value }, [
+  await QueryGetAPI(`${ACCOUNT_API_URL}reset-password`, { email: inputForgetPasswordValue.value }, [
     ['Turnstile', token.value],
   ])
     .then(async (data) => {
diff --git a/src/components/SaveCompoent.vue b/src/components/SaveCompoent.vue
index 11e8f9d..3ab5cb0 100644
--- a/src/components/SaveCompoent.vue
+++ b/src/components/SaveCompoent.vue
@@ -3,30 +3,31 @@ import { saveAs } from 'file-saver'
 import html2canvas from 'html2canvas'
 import { NButton, useMessage } from 'naive-ui'
 
-const message = useMessage()
-
 const props = defineProps<{
   compoent: any
   fileName: string
   buttonText?: string
 }>()
+
+const message = useMessage()
+
 function saveCompoent() {
   if (!props.compoent) {
     message.error('未找到要保存的组件')
   }
   html2canvas(props.compoent, {
-    width: props.compoent.clientWidth, //dom 原始宽度
+    width: props.compoent.clientWidth, // dom 原始宽度
     height: props.compoent.clientHeight,
     backgroundColor: null,
     scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
     scrollX: 0,
-    useCORS: true, //支持跨域，但好像没什么用
-    allowTaint: true, //允许跨域（默认false）
+    useCORS: true, // 支持跨域，但好像没什么用
+    allowTaint: true, // 允许跨域（默认false）
     scale: window.devicePixelRatio,
   }).then((canvas) => {
     canvas.toBlob(
       (data) => {
-        saveAs(data!, props.fileName + '.png')
+        saveAs(data!, `${props.fileName}.png`)
       },
       'image/png',
       1,
diff --git a/src/components/ScheduleList.vue b/src/components/ScheduleList.vue
index 67da69e..451fcc2 100644
--- a/src/components/ScheduleList.vue
+++ b/src/components/ScheduleList.vue
@@ -1,23 +1,8 @@
 <script setup lang="ts">
-import { ScheduleWeekInfo, ScheduleDayInfo } from '@/api/api-models'
+import type { ScheduleDayInfo, ScheduleWeekInfo } from '@/api/api-models'
+import { Bed20Regular, Clock20Regular } from '@vicons/fluent'
 import { useWindowSize } from '@vueuse/core'
 import { NBadge, NButton, NCard, NEllipsis, NEmpty, NGrid, NGridItem, NIcon, NList, NListItem, NPopconfirm, NSpace, NText, NTime, useThemeVars } from 'naive-ui'
-import { Clock20Regular, Bed20Regular } from '@vicons/fluent'
-import { h } from 'vue'
-
-const { width } = useWindowSize()
-const themeVars = useThemeVars()
-
-const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-function getDateFromWeek(year: number, week: number, dayOfWeek: number): Date {
-  // week starts from 1-52, dayOfWeek starts from 0-6 where 0 is Monday
-  var simple = new Date(year, 0, 1 + (week - 1) * 7)
-  var dow = simple.getDay()
-  var ISOweekStart = simple
-  if (dow <= 4) ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1)
-  else ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay())
-  return new Date(ISOweekStart.getFullYear(), ISOweekStart.getMonth(), ISOweekStart.getDate() + dayOfWeek)
-}
 
 defineProps<{
   schedules: ScheduleWeekInfo[]
@@ -30,6 +15,49 @@ const emit = defineEmits<{
   (e: 'onEditItem', schedule: ScheduleWeekInfo, dayIndex: number, item: ScheduleDayInfo): void
   (e: 'onDeleteItem', schedule: ScheduleWeekInfo, dayIndex: number, item: ScheduleDayInfo): void
 }>()
+const { width } = useWindowSize()
+const themeVars = useThemeVars()
+
+const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+
+function getISOWeek(date: Date) {
+  const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const dayNumber = target.getUTCDay() || 7
+  target.setUTCDate(target.getUTCDate() + 4 - dayNumber)
+  const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
+  const week = Math.ceil(((target.getTime() - yearStart.getTime()) / 86400000 + 1) / 7)
+  return {
+    year: target.getUTCFullYear(),
+    week,
+  }
+}
+
+const currentISOWeek = getISOWeek(new Date())
+
+function isCurrentWeek(year: number, week: number) {
+  return year === currentISOWeek.year && week === currentISOWeek.week
+}
+
+const dateFormatter = new Intl.DateTimeFormat('zh-CN', {
+  month: '2-digit',
+  day: '2-digit',
+})
+
+function getWeekRangeLabel(year: number, week: number) {
+  const weekStart = getDateFromWeek(year, week, 0)
+  const weekEnd = getDateFromWeek(year, week, 6)
+  return `${dateFormatter.format(weekStart)} - ${dateFormatter.format(weekEnd)}`
+}
+
+function getDateFromWeek(year: number, week: number, dayOfWeek: number): Date {
+  // week starts from 1-52, dayOfWeek starts from 0-6 where 0 is Monday
+  const simple = new Date(year, 0, 1 + (week - 1) * 7)
+  const dow = simple.getDay()
+  const ISOweekStart = simple
+  if (dow <= 4) ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1)
+  else ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay())
+  return new Date(ISOweekStart.getFullYear(), ISOweekStart.getMonth(), ISOweekStart.getDate() + dayOfWeek)
+}
 </script>
 
 <template>
@@ -41,15 +69,49 @@ const emit = defineEmits<{
   >
     <NListItem
       v-for="item in schedules"
-      :key="item.year + ' ' + item.week"
+      :key="`${item.year} ${item.week}`"
       style="padding: 0"
     >
       <NCard
         size="small"
         :bordered="false"
+        :style="
+          isCurrentWeek(item.year, item.week)
+            ? {
+                boxShadow: `0 0 0 1px ${themeVars.primaryColorSuppl}99 inset`,
+                borderRadius: '8px',
+                transition: 'box-shadow 0.2s ease',
+              }
+            : undefined
+        "
       >
         <template #header>
-          <NText> {{ item.year }}年第{{ item.week }}周 </NText>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <NText> {{ item.year }}年第{{ item.week }}周 </NText>
+            <NBadge
+              v-if="isCurrentWeek(item.year, item.week)"
+              value="本周"
+              type="success"
+              :style="{
+                backgroundColor: `${themeVars.successColor}1f`,
+                color: themeVars.successColor,
+                borderRadius: '12px',
+                padding: '0 8px',
+                fontSize: '11px',
+                fontWeight: 600,
+              }"
+            />
+            <NText
+              depth="3"
+              :style="{
+                fontSize: '12px',
+                whiteSpace: 'nowrap',
+                fontVariantNumeric: 'tabular-nums',
+              }"
+            >
+              {{ getWeekRangeLabel(item.year, item.week) }}
+            </NText>
+          </div>
         </template>
         <template
           v-if="isSelf"
@@ -93,7 +155,7 @@ const emit = defineEmits<{
             style="display: flex;"
           >
             <div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
-              <div 
+              <div
                 :style="{
                   marginBottom: '6px',
                   padding: '4px 8px',
@@ -114,166 +176,166 @@ const emit = defineEmits<{
                 <NText>{{ weekdays[index] }}</NText>
               </div>
               <div style="flex: 1; display: flex; flex-direction: column; min-height: 65px;">
-              <NCard
-                v-if="daySchedules.length === 0"
-                size="small"
-                :style="{
-                  minHeight: '40px',
-                  background: `linear-gradient(135deg, ${themeVars.cardColor} 0%, ${themeVars.bodyColor} 100%)`,
-                  border: `1px dashed ${themeVars.dividerColor}`,
-                  cursor: isSelf ? 'pointer' : 'default',
-                  transition: 'all 0.2s ease',
-                }"
-                :hoverable="isSelf"
-                content-style="display: flex; align-items: center; justify-content: center; gap: 4px;"
-                @click="isSelf && $emit('onUpdate', item)"
-              >
-                <NIcon :size="14" :component="Bed20Regular" :color="themeVars.textColor3" />
-                <NText
-                  depth="3"
-                  style="font-size: 11px; font-style: italic;"
-                  :style="{ opacity: isSelf ? 0.5 : 0.6 }"
-                >
-                  休息
-                </NText>
-              </NCard>
-              <NSpace
-                v-else
-                vertical
-                :size="4"
-              >
                 <NCard
-                  v-for="(schedule, scheduleIndex) in daySchedules"
-                  :key="schedule.id || `${index}-${scheduleIndex}`"
+                  v-if="daySchedules.length === 0"
                   size="small"
-                  :style="{ 
-                    backgroundColor: schedule.tagColor ? schedule.tagColor + '12' : themeVars.cardColor,
-                    borderLeft: schedule.tagColor ? `3px solid ${schedule.tagColor}` : `3px solid ${themeVars.dividerColor}`,
+                  :style="{
+                    minHeight: '40px',
+                    background: `linear-gradient(135deg, ${themeVars.cardColor} 0%, ${themeVars.bodyColor} 100%)`,
+                    border: `1px dashed ${themeVars.dividerColor}`,
                     cursor: isSelf ? 'pointer' : 'default',
                     transition: 'all 0.2s ease',
-                    padding: '0'
                   }"
-                  :bordered="true"
                   :hoverable="isSelf"
-                  content-style="padding: 3px; padding-left: 5px;padding-bottom: 1px;"
-                  @click="isSelf && $emit('onEditItem', item, index, schedule)"
+                  content-style="display: flex; align-items: center; justify-content: center; gap: 4px;"
+                  @click="isSelf && $emit('onUpdate', item)"
                 >
-                  <div style="padding: 4px 6px;">
-                    <!-- 标签和时间行 (仅当有标签或时间时显示) -->
-                    <div 
-                      v-if="schedule.tag || schedule.time"
-                      style="
-                        display: flex; 
-                        align-items: center; 
-                        gap: 4px; 
+                  <NIcon :size="14" :component="Bed20Regular" :color="themeVars.textColor3" />
+                  <NText
+                    depth="3"
+                    style="font-size: 11px; font-style: italic;"
+                    :style="{ opacity: isSelf ? 0.5 : 0.6 }"
+                  >
+                    休息
+                  </NText>
+                </NCard>
+                <NSpace
+                  v-else
+                  vertical
+                  :size="4"
+                >
+                  <NCard
+                    v-for="(schedule, scheduleIndex) in daySchedules"
+                    :key="schedule.id || `${index}-${scheduleIndex}`"
+                    size="small"
+                    :style="{
+                      backgroundColor: schedule.tagColor ? `${schedule.tagColor}12` : themeVars.cardColor,
+                      borderLeft: schedule.tagColor ? `3px solid ${schedule.tagColor}` : `3px solid ${themeVars.dividerColor}`,
+                      cursor: isSelf ? 'pointer' : 'default',
+                      transition: 'all 0.2s ease',
+                      padding: '0',
+                    }"
+                    :bordered="true"
+                    :hoverable="isSelf"
+                    content-style="padding: 3px; padding-left: 5px;padding-bottom: 1px;"
+                    @click="isSelf && $emit('onEditItem', item, index, schedule)"
+                  >
+                    <div style="padding: 4px 6px;">
+                      <!-- 标签和时间行 (仅当有标签或时间时显示) -->
+                      <div
+                        v-if="schedule.tag || schedule.time"
+                        style="
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
                         margin-bottom: 3px;
                         flex-wrap: nowrap;
                       "
-                    >
-                      <!-- 标签 -->
-                      <div 
-                        v-if="schedule.tag"
-                        :style="{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          gap: '3px',
-                          padding: '1px 5px',
-                          borderRadius: '3px',
-                          backgroundColor: schedule.tagColor ? schedule.tagColor + '22' : themeVars.primaryColorSuppl + '22',
-                          flexShrink: 0
-                        }"
                       >
-                        <NBadge
-                          v-if="schedule.tagColor"
-                          dot
-                          :color="schedule.tagColor"
-                          :style="{ transform: 'scale(0.85)' }"
-                        />
-                        <NText
-                          :style="{ 
-                            color: schedule.tagColor || themeVars.primaryColor, 
-                            fontWeight: '600',
-                            fontSize: '10.5px',
-                            whiteSpace: 'nowrap',
-                            lineHeight: '1.2'
+                        <!-- 标签 -->
+                        <div
+                          v-if="schedule.tag"
+                          :style="{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '3px',
+                            padding: '1px 5px',
+                            borderRadius: '3px',
+                            backgroundColor: schedule.tagColor ? `${schedule.tagColor}22` : `${themeVars.primaryColorSuppl}22`,
+                            flexShrink: 0,
                           }"
                         >
-                          {{ schedule.tag }}
-                        </NText>
+                          <NBadge
+                            v-if="schedule.tagColor"
+                            dot
+                            :color="schedule.tagColor"
+                            :style="{ transform: 'scale(0.85)' }"
+                          />
+                          <NText
+                            :style="{
+                              color: schedule.tagColor || themeVars.primaryColor,
+                              fontWeight: '600',
+                              fontSize: '10.5px',
+                              whiteSpace: 'nowrap',
+                              lineHeight: '1.2',
+                            }"
+                          >
+                            {{ schedule.tag }}
+                          </NText>
+                        </div>
+                        <!-- 时间 -->
+                        <div
+                          v-if="schedule.time"
+                          :style="{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '2px',
+                            flexShrink: 0,
+                          }"
+                        >
+                          <NIcon :size="12" :component="Clock20Regular" :color="themeVars.textColor3" />
+                          <NText
+                            depth="2"
+                            :style="{
+                              fontSize: '10.5px',
+                              fontFamily: 'monospace',
+                              whiteSpace: 'nowrap',
+                              fontWeight: '500',
+                            }"
+                          >
+                            {{ schedule.time }}
+                          </NText>
+                        </div>
+                        <!-- 删除按钮 -->
+                        <NButton
+                          v-if="isSelf"
+                          size="tiny"
+                          type="error"
+                          quaternary
+                          circle
+                          style="margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; padding: 0;"
+                          @click.stop="$emit('onDeleteItem', item, index, schedule)"
+                        >
+                          <template #icon>
+                            <span style="font-size: 14px; line-height: 1;">×</span>
+                          </template>
+                        </NButton>
                       </div>
-                      <!-- 时间 -->
+                      <!-- 内容 -->
+                      <div v-if="schedule?.title">
+                        <NEllipsis :line-clamp="2">
+                          <NText
+                            :style="{
+                              fontSize: '12.5px',
+                              lineHeight: '1.4',
+                              color: themeVars.textColor2,
+                            }"
+                          >
+                            {{ schedule.title }}
+                          </NText>
+                        </NEllipsis>
+                      </div>
+                      <!-- 如果既没有标签也没有时间，但有删除按钮 -->
                       <div
-                        v-if="schedule.time"
-                        :style="{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          gap: '2px',
-                          flexShrink: 0
-                        }"
+                        v-if="!schedule.tag && !schedule.time && isSelf && !schedule?.title"
+                        style="display: flex; justify-content: flex-end;"
                       >
-                        <NIcon :size="12" :component="Clock20Regular" :color="themeVars.textColor3" />
-                        <NText
-                          depth="2"
-                          :style="{
-                            fontSize: '10.5px',
-                            fontFamily: 'monospace',
-                            whiteSpace: 'nowrap',
-                            fontWeight: '500'
-                          }"
+                        <NButton
+                          size="tiny"
+                          type="error"
+                          quaternary
+                          circle
+                          style="width: 18px; height: 18px; padding: 0;"
+                          @click.stop="$emit('onDeleteItem', item, index, schedule)"
                         >
-                          {{ schedule.time }}
-                        </NText>
+                          <template #icon>
+                            <span style="font-size: 14px; line-height: 1;">×</span>
+                          </template>
+                        </NButton>
                       </div>
-                      <!-- 删除按钮 -->
-                      <NButton
-                        v-if="isSelf"
-                        size="tiny"
-                        type="error"
-                        quaternary
-                        circle
-                        style="margin-left: auto; flex-shrink: 0; width: 18px; height: 18px; padding: 0;"
-                        @click.stop="$emit('onDeleteItem', item, index, schedule)"
-                      >
-                        <template #icon>
-                          <span style="font-size: 14px; line-height: 1;">×</span>
-                        </template>
-                      </NButton>
                     </div>
-                    <!-- 内容 -->
-                    <div v-if="schedule?.title">
-                      <NEllipsis :line-clamp="2">
-                        <NText 
-                          :style="{
-                            fontSize: '12.5px',
-                            lineHeight: '1.4',
-                            color: themeVars.textColor2
-                          }"
-                        >
-                          {{ schedule.title }}
-                        </NText>
-                      </NEllipsis>
-                    </div>
-                    <!-- 如果既没有标签也没有时间，但有删除按钮 -->
-                    <div 
-                      v-if="!schedule.tag && !schedule.time && isSelf && !schedule?.title"
-                      style="display: flex; justify-content: flex-end;"
-                    >
-                      <NButton
-                        size="tiny"
-                        type="error"
-                        quaternary
-                        circle
-                        style="width: 18px; height: 18px; padding: 0;"
-                        @click.stop="$emit('onDeleteItem', item, index, schedule)"
-                      >
-                        <template #icon>
-                          <span style="font-size: 14px; line-height: 1;">×</span>
-                        </template>
-                      </NButton>
-                    </div>
-                  </div>
-                </NCard>
-              </NSpace>
+                  </NCard>
+                </NSpace>
               </div>
             </div>
           </NGridItem>
diff --git a/src/components/SimpleVideoCard.vue b/src/components/SimpleVideoCard.vue
index 8e0abc0..b35c52f 100644
--- a/src/components/SimpleVideoCard.vue
+++ b/src/components/SimpleVideoCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { VideoCollectVideo } from '@/api/api-models'
+import type { VideoCollectVideo } from '@/api/api-models'
 import { NCard, NEllipsis, NImage, NText } from 'naive-ui'
 
 const props = defineProps<{
diff --git a/src/components/SimpleVirtualList.vue b/src/components/SimpleVirtualList.vue
index 5f8eab8..4082be5 100644
--- a/src/components/SimpleVirtualList.vue
+++ b/src/components/SimpleVirtualList.vue
@@ -1,32 +1,11 @@
 <script setup lang="ts">
 import type { ScrollbarInst } from 'naive-ui/es/_internal'
-import { NScrollbar } from 'naive-ui/es/_internal'
-import { computed, onMounted, ref, type PropType } from 'vue'
+import type { PropType } from 'vue'
 import type { VirtualListInst } from 'vueuc'
-import { VVirtualList } from 'vueuc'
 import type { ItemData } from 'vueuc/lib/virtual-list/src/type'
-
-const scrollerInstRef = ref<ScrollbarInst | null>(null)
-const vlInstRef = ref<VirtualListInst | null>(null)
-
-function scrollContainer(): HTMLElement | null {
-  const { value } = vlInstRef
-  if (!value) return null
-  const { listElRef } = value
-  return listElRef
-}
-function scrollContent(): HTMLElement | null {
-  const { value } = vlInstRef
-  if (!value) return null
-  const { itemsElRef } = value
-  return itemsElRef
-}
-function syncVLScroller(): void {
-  scrollerInstRef.value?.sync()
-}
-function ScrollTo(to: { position: 'top' | 'bottom'; behavior?: ScrollBehavior; debounce?: boolean }) {
-  scrollerInstRef.value?.scrollTo(to)
-}
+import { NScrollbar } from 'naive-ui/es/_internal'
+import { computed, onMounted, ref } from 'vue'
+import { VVirtualList } from 'vueuc'
 
 const props = defineProps({
   items: {
@@ -45,6 +24,27 @@ const props = defineProps({
     type: Boolean,
   },
 })
+const scrollerInstRef = ref<ScrollbarInst | null>(null)
+const vlInstRef = ref<VirtualListInst | null>(null)
+
+function scrollContainer(): HTMLElement | null {
+  const { value } = vlInstRef
+  if (!value) return null
+  const { listElRef } = value
+  return listElRef
+}
+function scrollContent(): HTMLElement | null {
+  const { value } = vlInstRef
+  if (!value) return null
+  const { itemsElRef } = value
+  return itemsElRef
+}
+function syncVLScroller(): void {
+  scrollerInstRef.value?.sync()
+}
+function ScrollTo(to: { position: 'top' | 'bottom', behavior?: ScrollBehavior, debounce?: boolean }) {
+  scrollerInstRef.value?.scrollTo(to)
+}
 
 onMounted(() => {
   if (props.scrollToEndDefault) {
@@ -59,15 +59,16 @@ const parentHeight = computed(() => {
   return scrollerInstRef.value?.$el.parentElement?.clientHeight ?? 0
 })
 const height = computed(() => {
-  if (typeof props.defaultHeight == 'number') return (props.defaultHeight < 0 ? parentHeight : props.defaultHeight) + 'px'
-  else {
+  if (typeof props.defaultHeight == 'number') {
+    return `${props.defaultHeight < 0 ? parentHeight : props.defaultHeight}px`
+  } else {
     if (props.defaultHeight.endsWith('%')) {
-      return parentHeight.value * (Number(props.defaultHeight.replace('%', '')) / 100) + 'px'
+      return `${parentHeight.value * (Number(props.defaultHeight.replace('%', '')) / 100)}px`
     } else if (props.defaultHeight.endsWith('vh') || props.defaultHeight.endsWith('vw')) {
       return props.defaultHeight
     } else {
       console.log(`[SimpleVirtualList] Invalid height value: ${props.defaultHeight}`)
-      return 0 + 'px'
+      return `${0}px`
     }
   }
 })
@@ -76,7 +77,7 @@ const height = computed(() => {
 <template>
   <NScrollbar
     ref="scrollerInstRef"
-    :style="'height:' + height"
+    :style="`height:${height}`"
     :container="scrollContainer"
     :content="scrollContent"
     trigger="none"
diff --git a/src/components/SongList.vue b/src/components/SongList.vue
index 045a719..6568049 100644
--- a/src/components/SongList.vue
+++ b/src/components/SongList.vue
@@ -1,20 +1,13 @@
 <script setup lang="ts">
-// [导入] 依赖项和类型
-import { SongFrom, SongRequestOption, SongsInfo } from '@/api/api-models'; // API 数据模型
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'; // API 请求方法
-import { SONG_API_URL } from '@/data/constants'; // API 地址常量
-import { GetPlayButton } from '@/Utils'; // 公用方法：获取播放/信息按钮
-import SongPlayer from './SongPlayer.vue'; // 子组件：歌曲播放器
-
 // [导入] UI 组件和图标
 import {
   Delete24Filled,
   Info24Filled,
   NotepadEdit20Filled,
-  Play24Filled
-} from '@vicons/fluent';
-import { useLocalStorage, refDebounced } from '@vueuse/core'; // VueUse 工具函数
-import { List } from 'linqts'; // LINQ for TypeScript
+  Play24Filled,
+} from '@vicons/fluent'
+import { refDebounced, useLocalStorage } from '@vueuse/core' // VueUse 工具函数
+import { List } from 'linqts' // LINQ for TypeScript
 import {
   DataTableBaseColumn,
   DataTableColumns,
@@ -26,7 +19,6 @@ import {
   NCheckbox,
   NDataTable,
   NDivider,
-  NEllipsis,
   NForm,
   NFormItem,
   NIcon,
@@ -38,15 +30,22 @@ import {
   NPopconfirm,
   NSelect,
   NSpace,
+  NSwitch,
   NTabPane,
   NTabs,
   NTag,
   NText,
   NTooltip,
-  NSwitch,
   useMessage, // Naive UI 组件
-} from 'naive-ui';
-import { VNodeChild, computed, h, onMounted, ref, watch } from 'vue'; // Vue 核心 API
+} from 'naive-ui'
+import { computed, h, onMounted, ref, VNodeChild, watch } from 'vue' // Vue 核心 API
+
+// [导入] 依赖项和类型
+import { SongFrom, SongRequestOption, SongsInfo } from '@/api/api-models' // API 数据模型
+import { QueryGetAPI, QueryPostAPI } from '@/api/query' // API 请求方法
+import { SONG_API_URL } from '@/data/constants' // API 地址常量
+import { GetPlayButton } from '@/Utils' // 公用方法：获取播放/信息按钮
+import SongPlayer from './SongPlayer.vue' // 子组件：歌曲播放器
 
 // --- Props 定义 ---
 const props = defineProps<{
@@ -71,7 +70,7 @@ const pageSize = ref(25) // 每页大小
 const searchMusicKeyword = ref('') // 歌曲名称搜索关键词
 const debouncedInput = refDebounced(searchMusicKeyword, 500) // 防抖处理的搜索关键词
 const selectedLanguageFilter = ref<string[]>([]) // 顶部语言筛选器选中值
-const selectedTagFilter = ref<string[]>([])      // 顶部标签筛选器选中值
+const selectedTagFilter = ref<string[]>([]) // 顶部标签筛选器选中值
 const selectedAuthorFilter = ref<string | null>(null) // 顶部作者筛选器选中值 (直接控制列筛选)
 
 // --- 弹窗状态 ---
@@ -92,19 +91,19 @@ const selectedColumn = ref<DataTableRowKey[]>([]) // 表格选中行的 Key 数
 
 // 分页相关
 const currentPage = ref(1) // 当前页码
-const handlePageChange = (page: number) => {
+function handlePageChange(page: number) {
   currentPage.value = page
 }
 
 // 暴露分页方法
-const nextPage = () => {
+function nextPage() {
   const pagination = songsComputed.value.length > 0 ? Math.ceil(songsComputed.value.length / pageSize.value) : 1
   if (currentPage.value < pagination) {
     currentPage.value++
   }
 }
 
-const prevPage = () => {
+function prevPage() {
   if (currentPage.value > 1) {
     currentPage.value--
   }
@@ -114,92 +113,97 @@ const prevPage = () => {
 defineExpose({
   nextPage,
   prevPage,
-  currentPage
+  currentPage,
 })
 
 // --- 计算属性 ---
 
 // 新增：计算是否需要显示试听开关
 const canShowListenSwitch = computed(() => {
-  const audioRegex = /\.(mp3|flac|ogg|wav|m4a)$/i;
-  return songsInternal.value.some(song => song.url && audioRegex.test(song.url));
-});
+  const audioRegex = /\.(mp3|flac|ogg|wav|m4a)$/i
+  return songsInternal.value.some(song => song.url && audioRegex.test(song.url))
+})
 
 // 新增：计算是否需要显示链接开关
 const canShowLinkSwitch = computed(() => {
-  const linkSources = [SongFrom.Netease, SongFrom.FiveSing, SongFrom.Kugou]; // Corrected sources
-  return songsInternal.value.some(song => song.url || (song.from != null && linkSources.includes(song.from))); // Check url OR valid from source
-});
+  const linkSources = [SongFrom.Netease, SongFrom.FiveSing, SongFrom.Kugou] // Corrected sources
+  return songsInternal.value.some(song => song.url || (song.from != null && linkSources.includes(song.from))) // Check url OR valid from source
+})
 
 // 计算操作列的预定义宽度
 const actionColumnWidth = computed(() => {
-  const baseSelfWidth = 80; // 基础宽度 (isSelf=true, 编辑+删除)
-  const basePublicWidth = 40; // 基础宽度 (isSelf=false)
-  const listenButtonWidth = 40;
-  const linkButtonWidth = 50;
-  const extraButtonWidth = 40; // 假设的额外按钮宽度
+  const baseSelfWidth = 80 // 基础宽度 (isSelf=true, 编辑+删除)
+  const basePublicWidth = 40 // 基础宽度 (isSelf=false)
+  const listenButtonWidth = 40
+  const linkButtonWidth = 50
+  const extraButtonWidth = 40 // 假设的额外按钮宽度
 
-  let width = props.isSelf ? baseSelfWidth : basePublicWidth;
+  let width = props.isSelf ? baseSelfWidth : basePublicWidth
 
   if (showListenButton.value && canShowListenSwitch.value) {
-    width += listenButtonWidth;
+    width += listenButtonWidth
   }
   if (showLinkButton.value && canShowLinkSwitch.value) {
-    width += linkButtonWidth;
+    width += linkButtonWidth
   }
   if (props.extraButton) {
-    width += extraButtonWidth;
+    width += extraButtonWidth
   }
 
   // 返回一个合理的宽度值，例如，可以设定几个档位
   // 这里用之前的计算逻辑，但可以替换为固定档位如 80, 120, 160, 200, 240
   // 为了精确，我们还是用计算值，但它是响应式的
-  return width;
-});
+  return width
+})
 
 // 筛选后的歌曲列表
 const songsComputed = computed(() => {
-  let filteredSongs = songsInternal.value;
+  let filteredSongs = songsInternal.value
 
   // 1. 搜索框筛选 (曲名或翻译名，防抖)
-  const searchTerm = debouncedInput.value?.trim().toLowerCase();
+  const searchTerm = debouncedInput.value?.trim().toLowerCase()
   if (searchTerm) {
-    filteredSongs = filteredSongs.filter((s) =>
-      s.name.toLowerCase().includes(searchTerm) ||
-      s.translateName?.toLowerCase().includes(searchTerm) // 同时搜索翻译名称
-    );
+    filteredSongs = filteredSongs.filter(s =>
+      s.name.toLowerCase().includes(searchTerm)
+      || s.translateName?.toLowerCase().includes(searchTerm), // 同时搜索翻译名称
+    )
   }
 
   // 2. 顶部语言筛选
   if (selectedLanguageFilter.value.length > 0) {
-    filteredSongs = filteredSongs.filter((s) =>
-      s.language?.some(lang => selectedLanguageFilter.value.includes(lang))
-    );
+    filteredSongs = filteredSongs.filter(s =>
+      s.language?.some(lang => selectedLanguageFilter.value.includes(lang)),
+    )
   }
 
   // 3. 顶部标签筛选
   if (selectedTagFilter.value.length > 0) {
-    filteredSongs = filteredSongs.filter((s) =>
-      s.tags?.some(tag => selectedTagFilter.value.includes(tag))
-    );
+    filteredSongs = filteredSongs.filter(s =>
+      s.tags?.some(tag => selectedTagFilter.value.includes(tag)),
+    )
   }
 
   // 注意: 作者筛选主要通过列筛选器实现 (由 selectedAuthorFilter 控制)
   // 如果需要整合到这里，需要额外逻辑
 
-  return filteredSongs;
-});
-
+  return filteredSongs
+})
 
 // 语言下拉选项 (包含预设和歌曲数据中存在的)
 const languageSelectOption = computed(() => {
   const languages = new Set<string>([ // 预设一些常用语言
-    '中文', '日语', '英语', '韩语', '法语', '西语', '其他'
+    '中文',
+    '日语',
+    '英语',
+    '韩语',
+    '法语',
+    '西语',
+    '其他'
   ])
   songsInternal.value.forEach((s) => {
-    s.language?.forEach((l) => languages.add(l))
+    s.language?.forEach(l => languages.add(l))
   })
-  return [...languages].sort().map((t) => ({ // 排序增加用户体验
+  return [...languages].sort().map(t => ({ // 排序增加用户体验
     label: t,
     value: t,
   }))
@@ -208,11 +212,11 @@ const languageSelectOption = computed(() => {
 // 标签下拉选项 (从歌曲数据中动态生成)
 const tagsSelectOption = computed(() => {
   return new List(songsInternal.value)
-    .SelectMany((s) => new List(s?.tags ?? [])) // 使用 ?? [] 避免 undefined
+    .SelectMany(s => new List(s?.tags ?? [])) // 使用 ?? [] 避免 undefined
     .Distinct()
     .OrderBy(tag => tag) // 排序
     .ToArray()
-    .map((t) => ({
+    .map(t => ({
       label: t,
       value: t,
     }))
@@ -221,11 +225,11 @@ const tagsSelectOption = computed(() => {
 // 作者下拉选项 (从歌曲数据中动态生成)
 const authorsOptions = computed(() => {
   return new List(songsInternal.value)
-    .SelectMany((s) => new List(s?.author ?? [])) // 使用 ?? [] 避免 undefined
+    .SelectMany(s => new List(s?.author ?? [])) // 使用 ?? [] 避免 undefined
     .Distinct()
     .OrderBy(author => author) // 排序
     .ToArray()
-    .map((t) => ({
+    .map(t => ({
       label: t,
       value: t,
     }))
@@ -239,7 +243,7 @@ const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
   resizable: true,
   // 列筛选函数：检查行的作者数组是否包含筛选值
   filter(value, row) {
-    return row.author?.includes(value.toString()) ?? false;
+    return row.author?.includes(value.toString()) ?? false
   },
   // 列筛选选项：使用计算属性动态生成
   filterOptions: authorsOptions.value, // 初始值
@@ -248,30 +252,30 @@ const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
   render(data) {
     // 渲染作者按钮，点击时更新列筛选状态
     return h(NSpace, { size: 5 }, () =>
-      data.author?.map((a) => // 使用 ?. 防止 author 为空
+      data.author?.map(a => // 使用 ?. 防止 author 为空
         h(NButton, { size: 'tiny', type: 'info', secondary: true, onClick: () => onAuthorClick(a) }, () => a),
-      ) ?? null // 如果 author 为空则不渲染
+      ) ?? null, // 如果 author 为空则不渲染
     )
   },
 })
 
 // 点击作者按钮的处理函数：更新列筛选值
-const onAuthorClick = (author: string) => {
+function onAuthorClick(author: string) {
   if (authorColumn.value.filterOptionValue === author) {
     // 如果当前筛选值就是点击的作者，则清除筛选
-    authorColumn.value.filterOptionValue = null;
-    selectedAuthorFilter.value = null; // 同步更新顶部筛选状态
+    authorColumn.value.filterOptionValue = null
+    selectedAuthorFilter.value = null // 同步更新顶部筛选状态
   } else {
     // 否则，设置筛选值为点击的作者
-    authorColumn.value.filterOptionValue = author;
-    selectedAuthorFilter.value = author; // 同步更新顶部筛选状态
+    authorColumn.value.filterOptionValue = author
+    selectedAuthorFilter.value = author // 同步更新顶部筛选状态
   }
 }
 
 // 监听顶部作者筛选器变化，更新列筛选状态
 watch(selectedAuthorFilter, (newVal) => {
-  authorColumn.value.filterOptionValue = newVal;
-});
+  authorColumn.value.filterOptionValue = newVal
+})
 
 // 创建表格列配置的函数
 function createColumns(): DataTableColumns<SongsInfo> {
@@ -309,14 +313,13 @@ function createColumns(): DataTableColumns<SongsInfo> {
       filterOptions: languageSelectOption.value,
       // 列筛选函数
       filter(value, row) {
-        return row.language?.includes(value.toString()) ?? false;
+        return row.language?.includes(value.toString()) ?? false
       },
       render(data) {
         // 使用 NTag 显示语言
         return data.language?.length // 使用 ?.length 检查
           ? h(NSpace, { size: 5 }, () =>
-            data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a)),
-          )
+              data.language?.map(a => h(NTag, { bordered: false, size: 'small' }, () => a))          )
           : null
       },
     },
@@ -326,8 +329,8 @@ function createColumns(): DataTableColumns<SongsInfo> {
       minWidth: 100, // 增加最小宽度
       resizable: true,
       ellipsis: { // 使用 Naive UI 的省略配置
-        tooltip: true // 鼠标悬浮显示完整内容
-      }
+        tooltip: true, // 鼠标悬浮显示完整内容
+      },
       // render(data) { // 使用 ellipsis 配置后，不再需要手动渲染 NEllipsis
       //   return h(NEllipsis, { tooltip: { placement: 'top'} }, () => data.description)
       // },
@@ -340,7 +343,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
       render(data) {
         // 渲染点歌要求的标签
         const tags: VNodeChild[] = []
-        if (!data.options) return null; // 没有选项直接返回
+        if (!data.options) return null // 没有选项直接返回
 
         if (data.options.needJianzhang) {
           tags.push(h(NTag, { color: { textColor: 'white', color: GetGuardColor(3), borderColor: 'white' }, size: 'small' }, () => '舰长'))
@@ -357,7 +360,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
         if (data.options.fanMedalMinLevel) {
           tags.push(h(NTag, { type: 'info', size: 'small' }, () => `粉丝牌 ≥ ${data.options?.fanMedalMinLevel}`)) // 优化显示
         }
-        return tags.length > 0 ? h(NSpace, { size: 5 }, () => tags) : null;
+        return tags.length > 0 ? h(NSpace, { size: 5 }, () => tags) : null
       },
     },
     {
@@ -369,12 +372,12 @@ function createColumns(): DataTableColumns<SongsInfo> {
       filterOptions: tagsSelectOption.value,
       // 列筛选函数
       filter(value, row) {
-        return row.tags?.includes(value.toString()) ?? false;
+        return row.tags?.includes(value.toString()) ?? false
       },
       render(data) {
         // 使用 NTag 显示标签
         return data.tags?.length
-          ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a)))
+          ? h(NSpace, { size: 5 }, () => data.tags?.map(a => h(NTag, { bordered: false, size: 'small' }, () => a)))
           : null
       },
     },
@@ -383,16 +386,16 @@ function createColumns(): DataTableColumns<SongsInfo> {
       key: 'manage',
       fixed: 'right', // 固定操作列在右侧
       render(data) {
-        const buttons: VNodeChild[] = [];
+        const buttons: VNodeChild[] = []
 
         // 1. 获取播放/信息按钮 (来自 Utils)
         if (showLinkButton.value) { // 添加条件
-          const playButton = GetPlayButton(data);
-          if (playButton) buttons.push(playButton);
+          const playButton = GetPlayButton(data)
+          if (playButton) buttons.push(playButton)
         }
 
         // 2. 试听按钮 (仅对音频文件显示)
-        const isAudio = /\.(mp3|flac|ogg|wav|m4a)$/i.test(data.url ?? ''); // 正则判断音频后缀
+        const isAudio = /\.(mp3|flac|ogg|wav|m4a)$/i.test(data.url ?? '') // 正则判断音频后缀
         if (showListenButton.value && isAudio) { // 添加条件
           buttons.push(
             h(NTooltip, null, {
@@ -404,13 +407,15 @@ function createColumns(): DataTableColumns<SongsInfo> {
                     size: 'small',
                     circle: true,
                     loading: isLrcLoading.value === data.key, // 绑定加载状态
-                    onClick: () => { playingSong.value = data }, // 点击播放
+                    onClick: () => {
+                      playingSong.value = data
+                    }, // 点击播放
                   },
-                  { icon: () => h(NIcon, { component: Play24Filled }) }
+                  { icon: () => h(NIcon, { component: Play24Filled }) },
                 ),
               default: () => '试听',
-            })
-          );
+            }),
+          )
         }
 
         // 3. 编辑和删除按钮 (仅自己的歌单显示)
@@ -426,15 +431,15 @@ function createColumns(): DataTableColumns<SongsInfo> {
                     secondary: true, // 次要按钮样式
                     onClick: () => {
                       // 深拷贝防止修改影响原数据
-                      updateSongModel.value = JSON.parse(JSON.stringify(data));
-                      showModal.value = true; // 打开编辑弹窗
+                      updateSongModel.value = JSON.parse(JSON.stringify(data))
+                      showModal.value = true // 打开编辑弹窗
                     },
                   },
-                  { icon: () => h(NIcon, { component: NotepadEdit20Filled }) }
+                  { icon: () => h(NIcon, { component: NotepadEdit20Filled }) },
                 ),
               default: () => '修改',
-            })
-          );
+            }),
+          )
           buttons.push(
             h(NTooltip, null, {
               trigger: () =>
@@ -446,23 +451,23 @@ function createColumns(): DataTableColumns<SongsInfo> {
                       h(
                         NButton,
                         { type: 'error', size: 'small', circle: true },
-                        { icon: () => h(NIcon, { component: Delete24Filled }) }
+                        { icon: () => h(NIcon, { component: Delete24Filled }) },
                       ),
                     default: () => `确认删除歌曲《${data.name}》？`, // 确认提示语
-                  }
+                  },
                 ),
               default: () => '删除',
-            })
-          );
+            }),
+          )
         }
 
         // 4. 额外的按钮 (通过 props 传入)
         if (props.extraButton) {
-          buttons.push(...props.extraButton(data));
+          buttons.push(...props.extraButton(data))
         }
 
         // 使用 NSpace 渲染所有按钮
-        return h(NSpace, { justify: 'end', size: 8, wrap: false }, () => buttons); // 增加间距，禁止换行
+        return h(NSpace, { justify: 'end', size: 8, wrap: false }, () => buttons) // 增加间距，禁止换行
       },
       width: actionColumnWidth.value, // 使用计算属性
     },
@@ -482,148 +487,148 @@ const updateSongRules: FormRules = {
 watch(
   () => props.songs,
   (newV) => {
-    console.log('Props songs updated, refreshing internal list and columns.'); // 调试信息
-    songsInternal.value = [...newV]; // 使用扩展运算符创建新数组，确保响应性
+    console.log('Props songs updated, refreshing internal list and columns.') // 调试信息
+    songsInternal.value = [...newV] // 使用扩展运算符创建新数组，确保响应性
     // 重新生成列定义 (确保筛选选项等是最新的)
     // 使用 nextTick 替代 setTimeout，确保 DOM 更新后再操作
     // nextTick(() => {
     //   columns.value = createColumns();
     // });
     // 实测 watch 触发时直接更新列定义即可，NaiveUI 会处理
-    columns.value = createColumns();
+    columns.value = createColumns()
   },
-  { deep: true } // 深度监听，如果 songs 数组内部对象变化也触发
+  { deep: true }, // 深度监听，如果 songs 数组内部对象变化也触发
 )
 
 // 监听按钮显示状态变化，重新计算列定义以更新宽度
 watch([showListenButton, showLinkButton], () => {
-  console.log('Button visibility changed, recalculating columns.');
-  columns.value = createColumns();
-});
+  console.log('Button visibility changed, recalculating columns.')
+  columns.value = createColumns()
+})
 
 // 更新单首歌曲信息
 async function updateSong() {
   try {
-    await formRef.value?.validate(); // 触发表单验证
+    await formRef.value?.validate() // 触发表单验证
     // 检查是否存在同名歌曲 (排除当前正在编辑的歌曲)
     if (songsInternal.value.some(s => s.name === updateSongModel.value.name && s.key !== updateSongModel.value.key)) {
-      message.error('已存在相同名称的歌曲');
-      return;
+      message.error('已存在相同名称的歌曲')
+      return
     }
-    isLoading.value = true; // 开始加载
-    const { code, data, message: errMsg } = await QueryPostAPI<SongsInfo>(SONG_API_URL + 'update', {
+    isLoading.value = true // 开始加载
+    const { code, data, message: errMsg } = await QueryPostAPI<SongsInfo>(`${SONG_API_URL }update`, {
       key: updateSongModel.value.key,
       song: updateSongModel.value,
-    });
+    })
     if (code === 200 && data) {
-      const index = songsInternal.value.findIndex((s) => s.key === data.key);
+      const index = songsInternal.value.findIndex(s => s.key === data.key)
       if (index !== -1) {
-        songsInternal.value.splice(index, 1, data); // 更新内部列表数据
+        songsInternal.value.splice(index, 1, data) // 更新内部列表数据
       }
-      message.success('已更新歌曲信息');
-      showModal.value = false; // 关闭弹窗
+      message.success('已更新歌曲信息')
+      showModal.value = false // 关闭弹窗
     } else {
-      message.error(`未能更新歌曲信息: ${errMsg || '未知错误'}`);
+      message.error(`未能更新歌曲信息: ${errMsg || '未知错误'}`)
     }
   } catch (errors) {
     // 表单验证失败
-    console.error('Form validation failed:', errors);
-    message.warning('请检查表单填写是否正确');
+    console.error('Form validation failed:', errors)
+    message.warning('请检查表单填写是否正确')
   } finally {
-    isLoading.value = false; // 结束加载
+    isLoading.value = false // 结束加载
   }
 }
 
 // 删除单首歌曲
 async function delSong(song: SongsInfo) {
-  isLoading.value = true; // 开始加载 (虽然删除很快，但保持一致性)
+  isLoading.value = true // 开始加载 (虽然删除很快，但保持一致性)
   try {
-    const { code, message: errMsg } = await QueryGetAPI<SongsInfo>(SONG_API_URL + 'del', { key: song.key });
+    const { code, message: errMsg } = await QueryGetAPI<SongsInfo>(`${SONG_API_URL }del`, { key: song.key })
     if (code === 200) {
       // 从内部列表中移除
-      songsInternal.value = songsInternal.value.filter((s) => s.key !== song.key);
-      message.success(`已删除歌曲《${song.name}》`);
+      songsInternal.value = songsInternal.value.filter(s => s.key !== song.key)
+      message.success(`已删除歌曲《${song.name}》`)
       // 如果删除的是正在播放的歌曲，停止播放
       if (playingSong.value?.key === song.key) {
-        playingSong.value = undefined;
+        playingSong.value = undefined
       }
       // 如果删除的是选中的歌曲，也从选中列表中移除
-      selectedColumn.value = selectedColumn.value.filter(key => key !== song.key);
+      selectedColumn.value = selectedColumn.value.filter(key => key !== song.key)
     } else {
-      message.error(`未能删除歌曲: ${errMsg || '未知错误'}`);
+      message.error(`未能删除歌曲: ${errMsg || '未知错误'}`)
     }
   } catch (error: any) {
-    message.error(`删除歌曲时出错: ${error.message || error}`);
+    message.error(`删除歌曲时出错: ${error.message || error}`)
   } finally {
-    isLoading.value = false; // 结束加载
+    isLoading.value = false // 结束加载
   }
 }
 
 // 批量删除歌曲
 async function delBatchSong() {
   if (selectedColumn.value.length === 0) {
-    message.warning('请先选择要删除的歌曲');
-    return;
+    message.warning('请先选择要删除的歌曲')
+    return
   }
-  const ids = selectedColumn.value.map((s) => s.toString());
-  isLoading.value = true;
+  const ids = selectedColumn.value.map(s => s.toString())
+  isLoading.value = true
   try {
-    const { code, message: errMsg } = await QueryPostAPI<SongsInfo>(SONG_API_URL + 'del-batch', ids);
+    const { code, message: errMsg } = await QueryPostAPI<SongsInfo>(`${SONG_API_URL }del-batch`, ids)
     if (code === 200) {
-      songsInternal.value = songsInternal.value.filter((s) => !ids.includes(s.key));
-      message.success(`已删除 ${ids.length} 首歌曲`);
-      showBatchModal.value = false; // 关闭批量编辑弹窗
-      selectedColumn.value = []; // 清空选择
+      songsInternal.value = songsInternal.value.filter(s => !ids.includes(s.key))
+      message.success(`已删除 ${ids.length} 首歌曲`)
+      showBatchModal.value = false // 关闭批量编辑弹窗
+      selectedColumn.value = [] // 清空选择
       // 如果删除的歌曲包含正在播放的歌曲，停止播放
       if (playingSong.value && ids.includes(playingSong.value.key)) {
-          playingSong.value = undefined;
+        playingSong.value = undefined
       }
     } else {
-      message.error(`未能批量删除歌曲: ${errMsg || '未知错误'}`);
+      message.error(`未能批量删除歌曲: ${errMsg || '未知错误'}`)
     }
   } catch (error: any) {
-    message.error(`批量删除歌曲时出错: ${error.message || error}`);
+    message.error(`批量删除歌曲时出错: ${error.message || error}`)
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
 }
 
 // --- 批量更新函数 (通用逻辑提取) ---
 async function executeBatchUpdate<T>(
-    endpoint: string,
-    payload: { ids: string[]; data: T },
-    updateField: keyof SongsInfo,
-    successMessage: string
+  endpoint: string,
+  payload: { ids: string[], data: T },
+  updateField: keyof SongsInfo,
+  successMessage: string,
 ) {
   if (selectedColumn.value.length === 0) {
-    message.warning('请先选择要更新的歌曲');
-    return false; // 返回 false 表示未执行
+    message.warning('请先选择要更新的歌曲')
+    return false // 返回 false 表示未执行
   }
-  isLoading.value = true;
+  isLoading.value = true
   try {
-    const { code, message: errMsg } = await QueryPostAPI<SongsInfo[]>(`${SONG_API_URL}${endpoint}`, payload);
+    const { code, message: errMsg } = await QueryPostAPI<SongsInfo[]>(`${SONG_API_URL}${endpoint}`, payload)
     if (code === 200) {
-      message.success(successMessage);
+      message.success(successMessage)
       // 更新本地数据
       songsInternal.value.forEach((song, index) => {
         if (payload.ids.includes(song.key)) {
           // 直接修改会破坏响应性，需要创建新对象或使用 Vue.set (或直接修改 ref 的 value)
           // songsInternal.value[index][updateField] = payload.data; // 这种方式可能不触发视图更新
-          const updatedSong = { ...songsInternal.value[index], [updateField]: payload.data };
-          songsInternal.value.splice(index, 1, updatedSong);
+          const updatedSong = { ...songsInternal.value[index], [updateField]: payload.data }
+          songsInternal.value.splice(index, 1, updatedSong)
         }
-      });
+      })
       // 可能需要清空批量编辑表单的值
-      return true; // 返回 true 表示成功
+      return true // 返回 true 表示成功
     } else {
-      message.error(`未能更新歌曲: ${errMsg || '未知错误'}`);
-      return false;
+      message.error(`未能更新歌曲: ${errMsg || '未知错误'}`)
+      return false
     }
   } catch (err: any) {
-    message.error(`未能更新歌曲: ${err.message || err}`);
-    return false;
+    message.error(`未能更新歌曲: ${err.message || err}`)
+    return false
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
 }
 
@@ -633,9 +638,9 @@ async function batchUpdateAuthor() {
     'update-batch-author',
     { ids: selectedColumn.value.map(String), data: batchUpdate_Author.value },
     'author',
-    `已为 ${selectedColumn.value.length} 首歌曲更新作者`
-  );
-  if (success) batchUpdate_Author.value = []; // 成功后清空输入
+    `已为 ${selectedColumn.value.length} 首歌曲更新作者`,
+  )
+  if (success) batchUpdate_Author.value = [] // 成功后清空输入
 }
 
 // 批量更新标签
@@ -644,9 +649,9 @@ async function batchUpdateTag() {
     'update-batch-tag',
     { ids: selectedColumn.value.map(String), data: batchUpdate_Tag.value },
     'tags',
-    `已为 ${selectedColumn.value.length} 首歌曲更新标签`
-  );
-  if (success) batchUpdate_Tag.value = []; // 成功后清空输入
+    `已为 ${selectedColumn.value.length} 首歌曲更新标签`,
+  )
+  if (success) batchUpdate_Tag.value = [] // 成功后清空输入
 }
 
 // 批量更新语言
@@ -655,9 +660,9 @@ async function batchUpdateLanguage() {
     'update-batch-language',
     { ids: selectedColumn.value.map(String), data: batchUpdate_Language.value },
     'language',
-    `已为 ${selectedColumn.value.length} 首歌曲更新语言`
-  );
-  if (success) batchUpdate_Language.value = []; // 成功后清空输入
+    `已为 ${selectedColumn.value.length} 首歌曲更新语言`,
+  )
+  if (success) batchUpdate_Language.value = [] // 成功后清空输入
 }
 
 // 批量更新点歌选项
@@ -666,43 +671,42 @@ async function batchUpdateOption() {
     'update-batch-option',
     { ids: selectedColumn.value.map(String), data: batchUpdate_Option.value ?? null }, // 如果为 undefined 发送 null
     'options',
-    `已为 ${selectedColumn.value.length} 首歌曲更新点歌选项`
-  );
-   if (success) batchUpdate_Option.value = undefined; // 成功后清空输入
+    `已为 ${selectedColumn.value.length} 首歌曲更新点歌选项`,
+  )
+  if (success) batchUpdate_Option.value = undefined // 成功后清空输入
 }
 
 // --- 辅助函数 ---
 
 // 根据 SC 价格获取颜色
 function GetSCColor(price: number): string {
-  if (price <= 0) return `#2a60b2`; // 默认蓝色 (或根据实际需要调整)
-  if (price < 30) return `#2a60b2`; // 蓝色
-  if (price < 50) return `#2a60b2`; // 蓝色 (合并)
-  if (price < 100) return `#427d9e`; // 青色
-  if (price < 500) return `#c99801`; // 黄色
-  if (price < 1000) return `#e09443`; // 橙色
-  if (price < 2000) return `#e54d4d`; // 红色
-  return `#ab1a32`; // 深红色 (>= 2000)
+  if (price <= 0) return `#2a60b2` // 默认蓝色 (或根据实际需要调整)
+  if (price < 30) return `#2a60b2` // 蓝色
+  if (price < 50) return `#2a60b2` // 蓝色 (合并)
+  if (price < 100) return `#427d9e` // 青色
+  if (price < 500) return `#c99801` // 黄色
+  if (price < 1000) return `#e09443` // 橙色
+  if (price < 2000) return `#e54d4d` // 红色
+  return `#ab1a32` // 深红色 (>= 2000)
 }
 
 // 根据大航海等级获取颜色
 function GetGuardColor(level: number | null | undefined): string {
   switch (level) {
-    case 1: return 'rgb(122, 4, 35)'; // 总督
-    case 2: return 'rgb(157, 155, 255)'; // 提督
-    case 3: return 'rgb(104, 136, 241)'; // 舰长
-    default: return ''; // 默认或无效值
+    case 1: return 'rgb(122, 4, 35)' // 总督
+    case 2: return 'rgb(157, 155, 255)' // 提督
+    case 3: return 'rgb(104, 136, 241)' // 舰长
+    default: return '' // 默认或无效值
   }
 }
 
 // --- 生命周期钩子 ---
 onMounted(() => {
-  //console.log('Component mounted, initializing...'); // 调试信息
-  songsInternal.value = [...props.songs]; // 初始化时复制 props 数据
+  // console.log('Component mounted, initializing...'); // 调试信息
+  songsInternal.value = [...props.songs] // 初始化时复制 props 数据
   // 初始加载列定义
-  columns.value = createColumns();
-});
-
+  columns.value = createColumns()
+})
 </script>
 
 <template>
@@ -841,7 +845,7 @@ onMounted(() => {
       showSizePicker: true,
       showQuickJumper: true,
       page: currentPage,
-      onUpdatePage: handlePageChange
+      onUpdatePage: handlePageChange,
     }"
     :loading="isLoading && songsComputed.length === 0"
     striped
@@ -1336,4 +1340,4 @@ onMounted(() => {
     fill: #00a1d6; /* B站蓝色 */
 }
 /* 可以为其他来源添加类似样式 */
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/SongPlayer.vue b/src/components/SongPlayer.vue
index 60324ff..804ede7 100644
--- a/src/components/SongPlayer.vue
+++ b/src/components/SongPlayer.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { SongFrom, SongsInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { SONG_API_URL } from '@/data/constants'
+import type { SongsInfo } from '@/api/api-models'
 import { NEmpty } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 // @ts-ignore
 import APlayer from 'vue3-aplayer'
+import { SongFrom } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { SONG_API_URL } from '@/data/constants'
 
 const props = defineProps<{
   song: SongsInfo | undefined
@@ -26,12 +27,13 @@ const temp = computed(() => {
 })
 
 watch(temp, (newV) => {
-  if (newV) console.log('开始播放: ' + newV.name)
+  if (newV) console.log(`开始播放: ${newV.name}`)
 })
 
 function OnPlayMusic(song: SongsInfo) {
-  if (song.from == SongFrom.Netease) GetLyric(song)
-  else {
+  if (song.from == SongFrom.Netease) {
+    GetLyric(song)
+  } else {
     aplayerMusic.value = {
       title: song.name,
       artist: song.author?.join('/') ?? '',
@@ -43,11 +45,11 @@ function OnPlayMusic(song: SongsInfo) {
 }
 async function GetLyric(song: SongsInfo) {
   emits('update:isLrcLoading', song.key)
-  QueryGetAPI<{ lyric: string; tlyric: string }>(SONG_API_URL + 'get-netease-lyric', { id: song.id })
+  QueryGetAPI<{ lyric: string, tlyric: string }>(`${SONG_API_URL}get-netease-lyric`, { id: song.id })
     .then((data) => {
       console.log(mergeLyrics(data.data.lyric, data.data.tlyric))
       if (data.code == 200) {
-        //props.song.value.lrc = data.data.tlyric ? mergeLyrics(data.data.lyric, data.data.tlyric) : data.data.lyric
+        // props.song.value.lrc = data.data.tlyric ? mergeLyrics(data.data.lyric, data.data.tlyric) : data.data.lyric
 
         aplayerMusic.value = {
           title: song.name,
@@ -56,7 +58,7 @@ async function GetLyric(song: SongsInfo) {
           pic: '',
           lrc: data.data.tlyric ? mergeLyrics(data.data.lyric, data.data.tlyric) : data.data.lyric,
         }
-        //aplayerMusic.value.lrc = data.data.lyric
+        // aplayerMusic.value.lrc = data.data.lyric
       } else {
         aplayerMusic.value = {
           title: song.name,
@@ -85,7 +87,7 @@ function mergeLyrics(originalLyrics: string, translatedLyrics: string): string {
 
     if (originalTimeMatch) {
       const originalTime = originalTimeMatch[1]
-      const translatedLineIndex = translatedLines.findIndex((line) => line.includes(originalTime))
+      const translatedLineIndex = translatedLines.findIndex(line => line.includes(originalTime))
 
       if (translatedLineIndex !== -1) {
         const translatedLine = translatedLines[translatedLineIndex]
@@ -101,7 +103,7 @@ function mergeLyrics(originalLyrics: string, translatedLyrics: string): string {
       }
     }
     if (!mergedLine.match(/^\[(\d{2}:\d{2}\.\d{2,3})\]$/)) {
-      //不是空行
+      // 不是空行
       mergedLyrics += `${mergedLine}\n`
     }
   }
diff --git a/src/components/TempComponent.vue b/src/components/TempComponent.vue
index c58bddf..9b9ae47 100644
--- a/src/components/TempComponent.vue
+++ b/src/components/TempComponent.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
-import { useLoadingBarStore } from '@/store/useLoadingBarStore'
-import { useStorage } from '@vueuse/core';
 import { NSpin, useLoadingBar, useMessage, useModal } from 'naive-ui'
 import { onMounted } from 'vue'
-import { useRoute } from 'vue-router';
-import { cookie } from '@/api/account';
+import { useRoute } from 'vue-router'
+import { cookie, useAccount } from '@/api/account'
+
+import { useLoadingBarStore } from '@/store/useLoadingBarStore'
 
 const accountInfo = useAccount()
 
diff --git a/src/components/TurnstileVerify.vue b/src/components/TurnstileVerify.vue
index 0833a35..0235054 100644
--- a/src/components/TurnstileVerify.vue
+++ b/src/components/TurnstileVerify.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { TURNSTILE_KEY } from '@/data/constants'
-import { isDarkMode } from '@/Utils';
 import { onUnmounted, ref } from 'vue'
-import { onMounted } from 'vue'
 
 import VueTurnstile from 'vue-turnstile'
+import { TURNSTILE_KEY } from '@/data/constants'
+
+import { isDarkMode } from '@/Utils'
+
 const turnstile = ref()
 
 const token = defineModel<string>('token', {
   default: '',
 })
 
-    // Set theme based on dark mode status
-    const theme = computed(() => {
-      return isDarkMode ? 'dark' : 'light'
-    })
+// Set theme based on dark mode status
+const theme = computed(() => {
+  return isDarkMode ? 'dark' : 'light'
+})
 onUnmounted(() => {
   turnstile.value?.remove()
 })
diff --git a/src/components/UpdateNoteContainer.vue b/src/components/UpdateNoteContainer.vue
index b902435..fc4c092 100644
--- a/src/components/UpdateNoteContainer.vue
+++ b/src/components/UpdateNoteContainer.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { updateNoteItemContentType, updateNotes } from '@/data/UpdateNote';
-import { NDivider, NGrid } from 'naive-ui';
-import { VNode } from 'vue';
+import type { VNode } from 'vue'
+import type { updateNoteItemContentType } from '@/data/UpdateNote'
+import { NDivider, NGrid } from 'naive-ui'
+import { updateNotes } from '@/data/UpdateNote'
 
 function renderContent(content: updateNoteItemContentType): VNode | string | undefined {
   if (Array.isArray(content)) {
@@ -91,4 +92,4 @@ function renderContent(content: updateNoteItemContentType): VNode | string | und
       </div>
     </NFlex>
   </NScrollbar>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/UserBasicInfoCard.vue b/src/components/UserBasicInfoCard.vue
index a531fea..e9bd5ea 100644
--- a/src/components/UserBasicInfoCard.vue
+++ b/src/components/UserBasicInfoCard.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { UserBasicInfo } from '@/api/api-models'
+import type { UserBasicInfo } from '@/api/api-models'
+import { useDebounceFn } from '@vueuse/core'
+import { NAvatar, NCard, NDivider, NEmpty, NFlex, NSpin, NText } from 'naive-ui'
+import { onMounted, ref, watch } from 'vue'
 import { QueryGetAPI } from '@/api/query'
 import { USER_API_URL } from '@/data/constants'
 import { getUserAvatarUrl } from '@/Utils'
-import { useDebounceFn } from '@vueuse/core'
-import { NAvatar, NCard, NDescriptions, NDescriptionsItem, NDivider, NEmpty, NFlex, NSpin, NTag, NText } from 'naive-ui'
-import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   user: string | number
@@ -31,7 +31,7 @@ async function getUserInfo(user: string | number) {
       return
     }
     isLoading.value = true
-    const data = await QueryGetAPI<UserBasicInfo>(USER_API_URL + 'basic/' + user)
+    const data = await QueryGetAPI<UserBasicInfo>(`${USER_API_URL}basic/${user}`)
     if (data.code == 200) {
       currentUser.value = data.data
     } else {
diff --git a/src/components/VEditor.vue b/src/components/VEditor.vue
index fb55b3e..a14847a 100644
--- a/src/components/VEditor.vue
+++ b/src/components/VEditor.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { isDarkMode } from '@/Utils'
-import { APIRoot } from '@/api/api-models'
-import { GetHeaders } from '@/api/query'
-import '@/assets/editorDarkMode.css'
-import { VTSURU_API_URL } from '@/data/constants'
-import { DomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
+import type { IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
+import type { NotificationReactive } from 'naive-ui'
+import type { APIRoot } from '@/api/api-models'
+import { DomEditor } from '@wangeditor/editor'
 // @ts-ignore
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import { NotificationReactive, useMessage } from 'naive-ui'
+import { useMessage } from 'naive-ui'
 import { onBeforeUnmount, ref, shallowRef } from 'vue'
+import { GetHeaders } from '@/api/query'
+import { VTSURU_API_URL } from '@/data/constants'
+import { isDarkMode } from '@/Utils'
+import '@/assets/editorDarkMode.css'
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
 type InsertFnType = (url: string, alt: string, href: string) => void
 
@@ -44,10 +46,10 @@ const editorConfig: Partial<IEditorConfig> = {
       maxFileSize: 10 * 1024 * 1024,
       maxNumberOfFiles: 10,
       async customUpload(file: File, insertFn: InsertFnType) {
-        const formData = new FormData() //创建一个FormData实例。
+        const formData = new FormData() // 创建一个FormData实例。
         message.info('图片上传中')
         formData.append('file', file)
-        const resp = await fetch(VTSURU_API_URL + 'image/upload', {
+        const resp = await fetch(`${VTSURU_API_URL}image/upload`, {
           method: 'POST',
           body: formData,
           headers: GetHeaders(),
@@ -57,10 +59,10 @@ const editorConfig: Partial<IEditorConfig> = {
           if (data.code == 200) {
             insertFn(data.data, '', '')
           } else {
-            message.error('图片上传失败: ' + data.message)
+            message.error(`图片上传失败: ${data.message}`)
           }
         } else {
-          message.error('图片上传失败: ' + resp.statusText)
+          message.error(`图片上传失败: ${resp.statusText}`)
         }
       },
       onProgress(progress: number) {
@@ -82,7 +84,7 @@ onBeforeUnmount(() => {
   editor.destroy()
 })
 onMounted(() => {
-  //editorRef.value?.setHtml(props.defaultValue)
+  // editorRef.value?.setHtml(props.defaultValue)
 })
 function handleCreated(editor: unknown) {
   editorRef.value = editor // 记录 editor 实例，重要！
diff --git a/src/components/VideoCollectInfoCard.vue b/src/components/VideoCollectInfoCard.vue
index 6e9ad14..80ab8b8 100644
--- a/src/components/VideoCollectInfoCard.vue
+++ b/src/components/VideoCollectInfoCard.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { VideoCollectTable } from '@/api/api-models'
-import { CURRENT_HOST } from '@/data/constants';
-import router from '@/router'
+import type {
+  CountdownProps,
+} from 'naive-ui'
+import type { VideoCollectTable } from '@/api/api-models'
 import { Clock24Regular, NumberRow24Regular } from '@vicons/fluent'
 import {
-  CountdownProps,
   NCard,
   NCountdown,
   NDivider,
@@ -16,6 +16,8 @@ import {
   NTime,
   NTooltip,
 } from 'naive-ui'
+import { CURRENT_HOST } from '@/data/constants'
+import router from '@/router'
 
 const props = defineProps<{
   item: VideoCollectTable
@@ -23,13 +25,13 @@ const props = defineProps<{
   from: 'user' | 'owner'
   bordered?: boolean
 }>()
-const renderCountdown: CountdownProps['render'] = (info: { hours: number; minutes: number; seconds: number }) => {
+const renderCountdown: CountdownProps['render'] = (info: { hours: number, minutes: number, seconds: number }) => {
   return `${String(info.hours).padStart(2, '0')}时 ${String(info.minutes).padStart(2, '0')}分 ${String(info.seconds).padStart(2, '0')}秒`
 }
 function onClick() {
   if (props.canClick == true) {
     if (props.from == 'user') {
-      window.open(`${CURRENT_HOST}video-collect/` + props.item.shortId, '_blank')
+      window.open(`${CURRENT_HOST}video-collect/${props.item.shortId}`, '_blank')
     } else {
       router.push({ name: 'manage-videoCollect-Detail', params: { id: props.item.id } })
     }
diff --git a/src/components/manage/AddressDisplay.vue b/src/components/manage/AddressDisplay.vue
index 63cb91b..e13b3ef 100644
--- a/src/components/manage/AddressDisplay.vue
+++ b/src/components/manage/AddressDisplay.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AddressInfo } from '@/api/api-models'
+import type { AddressInfo } from '@/api/api-models'
 import { useElementSize } from '@vueuse/core'
-import { NButton, NFlex, NPopconfirm, NTag, NText } from 'naive-ui'
+import { NFlex, NTag, NText } from 'naive-ui'
 import { ref } from 'vue'
 
 const { size = 'default' } = defineProps<{
diff --git a/src/components/manage/PointGoodsItem.vue b/src/components/manage/PointGoodsItem.vue
index 49e8fc2..e49cf37 100644
--- a/src/components/manage/PointGoodsItem.vue
+++ b/src/components/manage/PointGoodsItem.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-  import { GoodsTypes, ResponsePointGoodModel } from '@/api/api-models';
-import { IMGUR_URL } from '@/data/constants';
-import { Pin16Filled } from '@vicons/fluent';
-import { NCard, NEllipsis, NEmpty, NFlex, NIcon, NImage, NTag, NText } from 'naive-ui';
+import type { ResponsePointGoodModel } from '@/api/api-models'
+import { Pin16Filled } from '@vicons/fluent'
+import { NCard, NEllipsis, NEmpty, NFlex, NIcon, NImage, NTag, NText } from 'naive-ui'
+import { GoodsTypes } from '@/api/api-models'
+import { IMGUR_URL } from '@/data/constants'
 
-  const props = defineProps<{
-    goods: ResponsePointGoodModel | undefined;
-    contentStyle?: string | undefined;
-    size?: 'small' | 'default';
-  }>();
+const props = defineProps<{
+  goods: ResponsePointGoodModel | undefined
+  contentStyle?: string | undefined
+  size?: 'small' | 'default'
+}>()
 
-  // 默认封面图片
-  const emptyCover = IMGUR_URL + 'None.png';
+// 默认封面图片
+const emptyCover = `${IMGUR_URL}None.png`
 </script>
 
 <template>
@@ -63,7 +64,7 @@ import { NCard, NEllipsis, NEmpty, NFlex, NIcon, NImage, NTag, NText } from 'nai
             :style="{
               color: goods.type == GoodsTypes.Physical ? '#006633' : '#0066cc',
               borderColor: goods.type == GoodsTypes.Physical ? '#009966' : '#3399ff',
-              backgroundColor: goods.type == GoodsTypes.Physical ? '#c2e6d290' : '#c2d6eb90'
+              backgroundColor: goods.type == GoodsTypes.Physical ? '#c2e6d290' : '#c2d6eb90',
             }"
           >
             {{ goods.type == GoodsTypes.Physical ? '实物' : '虚拟' }}
diff --git a/src/components/manage/PointHistoryCard.vue b/src/components/manage/PointHistoryCard.vue
index 4d4c933..9e10a03 100644
--- a/src/components/manage/PointHistoryCard.vue
+++ b/src/components/manage/PointHistoryCard.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { EventDataTypes, PointFrom, ResponsePointGoodModel, ResponsePointHisrotyModel } from '@/api/api-models'
-import {
+import type {
   DataTableColumns,
+} from 'naive-ui'
+import type { ResponsePointGoodModel, ResponsePointHisrotyModel } from '@/api/api-models'
+import {
   NButton,
   NDataTable,
   NDivider,
+  NEmpty,
   NFlex,
   NInput,
   NModal,
@@ -12,9 +15,9 @@ import {
   NText,
   NTime,
   NTooltip,
-  NEmpty
 } from 'naive-ui'
 import { h, ref } from 'vue'
+import { EventDataTypes, PointFrom } from '@/api/api-models'
 import PointGoodsItem from './PointGoodsItem.vue'
 
 const props = defineProps<{
@@ -81,16 +84,16 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
               h(NTag, { type: 'info', bordered: false, size: 'small' }, () => '直播间'),
               row.extra?.user
                 ? h(
-                  NButton,
-                  {
-                    tag: 'a',
-                    href: '/@' + row.extra.user?.name,
-                    target: '_blank',
-                    text: true,
-                    type: 'success',
-                  },
-                  () => row.extra.user?.name,
-                )
+                    NButton,
+                    {
+                      tag: 'a',
+                      href: `/@${row.extra.user?.name}`,
+                      target: '_blank',
+                      text: true,
+                      type: 'success',
+                    },
+                    () => row.extra.user?.name,
+                  )
                 : null,
             ])
           case PointFrom.Manual:
@@ -98,14 +101,14 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
               h(
                 NTag,
                 { type: row.point > 0 ? 'success' : 'error', bordered: false, size: 'small' },
-                () => '主播' + (row.point > 0 ? '赠予' : '扣除'),
+                () => `主播${row.point > 0 ? '赠予' : '扣除'}`,
               ),
               row.extra?.user
                 ? h(
                     NButton,
                     {
                       tag: 'a',
-                      href: '/@' + row.extra.user?.name,
+                      href: `/@${row.extra.user?.name}`,
                       target: '_blank',
                       text: true,
                       type: 'info',
@@ -122,7 +125,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
                     NButton,
                     {
                       tag: 'a',
-                      href: '/@' + row.extra.user?.name,
+                      href: `/@${row.extra.user?.name}`,
                       target: '_blank',
                       text: true,
                       type: 'success',
@@ -136,16 +139,16 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
               h(NTag, { type: 'success', bordered: false, size: 'small' }, () => '签到'),
               row.extra?.user
                 ? h(
-                  NButton,
-                  {
-                    tag: 'a',
-                    href: '/@' + row.extra.user?.name,
-                    target: '_blank',
-                    text: true,
-                    type: 'success',
-                  },
-                  () => row.extra.user?.name,
-                )
+                    NButton,
+                    {
+                      tag: 'a',
+                      href: `/@${row.extra.user?.name}`,
+                      target: '_blank',
+                      text: true,
+                      type: 'success',
+                    },
+                    () => row.extra.user?.name,
+                  )
                 : null,
             ])
         }
@@ -172,7 +175,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
                 h(
                   NTag,
                   { type: 'warning', size: 'tiny', style: { margin: '0' }, bordered: false },
-                  () => (row.count ?? 1) + '个',
+                  () => `${row.count ?? 1}个`,
                 ),
               ])
             case EventDataTypes.SC:
@@ -189,7 +192,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
               NButton,
               {
                 tag: 'a',
-                href: '/@' + row.extra.user?.name,
+                href: `/@${row.extra.user?.name}`,
                 target: '_blank',
                 text: true,
                 type: 'info',
@@ -238,7 +241,7 @@ const historyColumn: DataTableColumns<ResponsePointHisrotyModel> = [
       showSizePicker: true,
       pageSizes: [10, 25, 50, 100],
       defaultPageSize: 10,
-      size: 'small'
+      size: 'small',
     }"
   />
 
diff --git a/src/components/manage/PointOrderCard.vue b/src/components/manage/PointOrderCard.vue
index 990fb3c..74616a6 100644
--- a/src/components/manage/PointOrderCard.vue
+++ b/src/components/manage/PointOrderCard.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import {
-  GoodsTypes,
-  PointOrderStatus,
-  ResponsePointOrder2OwnerModel,
-  ResponsePointOrder2UserModel
-} from '@/api/api-models'
-import { QueryPostAPI } from '@/api/query'
-import { POINT_API_URL } from '@/data/constants'
-import { Info24Filled } from '@vicons/fluent'
-import {
+import type {
   DataTableColumns,
   DataTableRowKey,
+} from 'naive-ui'
+import type {
+  ResponsePointOrder2OwnerModel,
+  ResponsePointOrder2UserModel,
+} from '@/api/api-models'
+import { Info24Filled } from '@vicons/fluent'
+import {
   NAlert,
   NAutoComplete,
   NButton,
@@ -37,6 +35,12 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, h, onMounted, ref, watch } from 'vue'
+import {
+  GoodsTypes,
+  PointOrderStatus,
+} from '@/api/api-models'
+import { QueryPostAPI } from '@/api/query'
+import { POINT_API_URL } from '@/data/constants'
 import AddressDisplay from './AddressDisplay.vue'
 import PointGoodsItem from './PointGoodsItem.vue'
 
@@ -48,11 +52,9 @@ const props = defineProps<{
   loading?: boolean
 }>()
 
-
+const emit = defineEmits(['selectedItem'])
 const message = useMessage()
 const dialog = useDialog()
-const emit = defineEmits(['selectedItem'])
-
 // 状态管理
 const isLoading = ref(false)
 const showDetailModal = ref(false)
@@ -81,7 +83,7 @@ const expressOptions = computed(() => {
   const companies = [...new Set(
     orderAsOwner.value
       .map(o => o.expressCompany)
-      .filter(Boolean)
+      .filter(Boolean),
   )]
 
   return companies.map(company => ({
@@ -98,7 +100,7 @@ const statusMap = {
     description: '订单创建完成，等待主播发货',
     action: '发货',
     nextStatusText: '确认发货后，订单状态将变为"已发货"',
-    prevStatusText: ''
+    prevStatusText: '',
   },
   [PointOrderStatus.Shipped]: {
     text: (hasExpress: boolean) => hasExpress ? '已发货 | 已填写单号' : '已发货 | 未填写单号',
@@ -106,7 +108,7 @@ const statusMap = {
     description: '订单已发货，可以添加快递信息',
     action: '完成订单',
     nextStatusText: '确认后将可以进行发货信息填写',
-    prevStatusText: '回退到"等待发货"状态，适用于发货信息填写错误等情况'
+    prevStatusText: '回退到"等待发货"状态，适用于发货信息填写错误等情况',
   },
   [PointOrderStatus.Completed]: {
     text: '已完成',
@@ -114,7 +116,7 @@ const statusMap = {
     description: '订单已完成',
     action: '',
     nextStatusText: '完成后无法再进行状态修改',
-    prevStatusText: '回退到"已发货"状态（仅限实体礼物）'
+    prevStatusText: '回退到"已发货"状态（仅限实体礼物）',
   },
 }
 
@@ -131,8 +133,8 @@ const orderColumn: DataTableColumns<OrderType> = [
         key: 'f2',
         onSelect: (pageData) => {
           selectedItem.value = pageData
-            .filter((row) => row.status === PointOrderStatus.Pending)
-            .map((row) => row.id)
+            .filter(row => row.status === PointOrderStatus.Pending)
+            .map(row => row.id)
         },
       },
     ],
@@ -217,7 +219,7 @@ const orderColumn: DataTableColumns<OrderType> = [
       return h(NTag, {
         size: 'small',
         type: type as any,
-        bordered: false
+        bordered: false,
       }, () => text)
     },
   },
@@ -235,7 +237,7 @@ const orderColumn: DataTableColumns<OrderType> = [
       return h(NTag, {
         type: 'success',
         bordered: false,
-        size: 'small'
+        size: 'small',
       }, () => row.type === GoodsTypes.Physical ? '实体礼物' : '虚拟礼物')
     },
   },
@@ -264,7 +266,7 @@ const orderColumn: DataTableColumns<OrderType> = [
               href: goodsCollectUrl,
               target: '_blank',
               text: true,
-              type: 'info'
+              type: 'info',
             }, () => h(NText, { italic: true }, () => '通过站外链接收集'))
           : h(AddressDisplay, { address: row.address, size: 'small' })
       } else {
@@ -342,8 +344,8 @@ function onChangeStatus(id: number, status: PointOrderStatus) {
   const currentStatusInfo = orderDetail.value ? statusMap[orderDetail.value.status] : null
   const currentStatusText = currentStatusInfo
     ? (typeof currentStatusInfo.text === 'function'
-      ? currentStatusInfo.text(!!orderDetail.value?.expressCompany)
-      : currentStatusInfo.text)
+        ? currentStatusInfo.text(!!orderDetail.value?.expressCompany)
+        : currentStatusInfo.text)
     : '当前状态'
 
   const newStatusText = typeof statusInfo.text === 'function'
@@ -366,7 +368,7 @@ function onChangeStatus(id: number, status: PointOrderStatus) {
     title: '修改订单状态',
     content: () => h('div', null, [
       h('p', null, `确认将订单状态从「${currentStatusText}」修改为「${newStatusText}」吗？`),
-      tipText ? h('p', { style: 'color: #f90; margin-top: 8px;' }, tipText) : null
+      tipText ? h('p', { style: 'color: #f90; margin-top: 8px;' }, tipText) : null,
     ]),
     positiveText: '确认',
     negativeText: '取消',
@@ -381,7 +383,7 @@ async function updateStatus(ids: number[], status: PointOrderStatus) {
 
   try {
     isLoading.value = true
-    const data = await QueryPostAPI(POINT_API_URL + 'update-orders-status', {
+    const data = await QueryPostAPI(`${POINT_API_URL}update-orders-status`, {
       ids,
       status,
     })
@@ -394,10 +396,10 @@ async function updateStatus(ids: number[], status: PointOrderStatus) {
         }
       })
     } else {
-      message.error('操作失败: ' + data.message)
+      message.error(`操作失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('操作失败: ' + err)
+    message.error(`操作失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
@@ -412,7 +414,7 @@ async function updateExpress(item: ResponsePointOrder2OwnerModel) {
 
   try {
     isLoading.value = true
-    const data = await QueryPostAPI(POINT_API_URL + 'update-order-express', {
+    const data = await QueryPostAPI(`${POINT_API_URL}update-order-express`, {
       id: item.id,
       trackingNumber: item.trackingNumber,
       expressCompany: item.expressCompany,
@@ -421,10 +423,10 @@ async function updateExpress(item: ResponsePointOrder2OwnerModel) {
     if (data.code === 200) {
       message.success('操作成功')
     } else {
-      message.error('操作失败: ' + data.message)
+      message.error(`操作失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('操作失败: ' + err)
+    message.error(`操作失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
@@ -451,7 +453,7 @@ onMounted(() => {
         showSizePicker: true,
         pageSizes: [10, 25, 50, 100],
         defaultPageSize: 10,
-        size: 'small'
+        size: 'small',
       }"
       size="small"
       @update:checked-row-keys="keys => emit('selectedItem', keys)"
@@ -524,10 +526,10 @@ onMounted(() => {
             <!-- 实体礼物地址收集 -->
             <template
               v-if="
-                orderDetail.type === GoodsTypes.Physical &&
-                  orderDetail.status === PointOrderStatus.Pending &&
-                  (orderDetail as ResponsePointOrder2UserModel).goods.embedCollectUrl &&
-                  (orderDetail as ResponsePointOrder2UserModel).goods.collectUrl
+                orderDetail.type === GoodsTypes.Physical
+                  && orderDetail.status === PointOrderStatus.Pending
+                  && (orderDetail as ResponsePointOrder2UserModel).goods.embedCollectUrl
+                  && (orderDetail as ResponsePointOrder2UserModel).goods.collectUrl
               "
             >
               <NDivider>填写收货地址</NDivider>
diff --git a/src/composables/useLiveRequest.ts b/src/composables/useLiveRequest.ts
index 7956bab..748ab89 100644
--- a/src/composables/useLiveRequest.ts
+++ b/src/composables/useLiveRequest.ts
@@ -1,27 +1,28 @@
-import { ref, computed, Ref } from 'vue'
+import type {
+  DanmakuUserInfo,
+  EventModel,
+  SongRequestInfo,
+  SongsInfo,
+} from '@/api/api-models'
 import { useStorage } from '@vueuse/core'
 import { List } from 'linqts'
-import { NTime, useMessage, useNotification } from 'naive-ui'
-import { h } from 'vue'
+import { NTime } from 'naive-ui'
 
+import { computed, h, ref } from 'vue'
+import { AddBiliBlackList, useAccount } from '@/api/account'
 import {
-  DanmakuUserInfo,
   EventDataTypes,
-  EventModel,
   FunctionTypes,
   QueueSortType,
   SongRequestFrom,
-  SongRequestInfo,
   SongRequestStatus,
-  SongsInfo
 } from '@/api/api-models'
 import {
   QueryGetAPI,
   QueryPostAPI,
-  QueryPostAPIWithParams
+  QueryPostAPIWithParams,
 } from '@/api/query'
 import { SONG_REQUEST_API_URL } from '@/data/constants'
-import { AddBiliBlackList, useAccount } from '@/api/account'
 
 export const useLiveRequest = defineStore('songRequest', () => {
   const accountInfo = useAccount()
@@ -46,7 +47,7 @@ export const useLiveRequest = defineStore('songRequest', () => {
     return accountInfo.value != null && accountInfo.value?.id !== undefined
   })
 
-  const songs = computed(() => {
+  const songs = computed<SongRequestInfo[]>(() => {
     let result = new List(originSongs.value).Where((s) => {
       if (filterName.value) {
         if (filterNameContains.value) {
@@ -72,21 +73,21 @@ export const useLiveRequest = defineStore('songRequest', () => {
 
     switch (settings.sortType) {
       case QueueSortType.TimeFirst: {
-        result = result.ThenBy((q) => q.createAt)
+        result = result.ThenBy(q => q.createAt)
         break
       }
       case QueueSortType.GuardFirst: {
         result = result
-          .OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
-          .ThenBy((q) => q.createAt)
+          .OrderBy(q => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
+          .ThenBy(q => q.createAt)
         break
       }
       case QueueSortType.PaymentFist: {
-        result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
+        result = result.OrderByDescending(q => q.price ?? 0).ThenBy(q => q.createAt)
         break
       }
       case QueueSortType.FansMedalFirst: {
-        result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
+        result = result.OrderByDescending(q => q.user?.fans_medal_level ?? 0).ThenBy(q => q.createAt)
         break
       }
     }
@@ -124,17 +125,18 @@ export const useLiveRequest = defineStore('songRequest', () => {
   async function getAllSong() {
     if (accountInfo.value?.id) {
       try {
-        const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-all', {
+        const data = await QueryGetAPI<SongRequestInfo[]>(`${SONG_REQUEST_API_URL}get-all`, {
           id: accountInfo.value.id,
         })
         if (data.code == 200) {
           console.log('[SONG-REQUEST] 已获取所有数据')
-          return new List(data.data).OrderByDescending((s) => s.createAt).ToArray()
+          return new List(data.data).OrderByDescending(s => s.createAt).ToArray()
         } else {
-          window.$message.error('无法获取数据: ' + data.message)
+          window.$message.error(`无法获取数据: ${data.message}`)
           return []
         }
-      } catch (err) {
+      } catch (_err) {
+        console.error('[SONG-REQUEST] 无法获取数据', _err)
         window.$message.error('无法获取数据')
       }
       return []
@@ -164,17 +166,17 @@ export const useLiveRequest = defineStore('songRequest', () => {
     }
 
     if (accountInfo.value?.id) {
-      await QueryPostAPI<SongRequestInfo>(SONG_REQUEST_API_URL + 'try-add', danmaku).then((data) => {
+      await QueryPostAPI<SongRequestInfo>(`${SONG_REQUEST_API_URL}try-add`, danmaku).then((data) => {
         if (data.code == 200) {
           window.$message.success(`[${danmaku.uname}] 添加曲目: ${data.data.songName}`)
           if (data.message != 'EventFetcher') originSongs.value.unshift(data.data)
         } else {
           const time = Date.now()
           window.$notification.warning({
-            title: danmaku.uname + ' 点播失败',
+            title: `${danmaku.uname} 点播失败`,
             description: data.message,
             duration: isWarnMessageAutoClose.value ? 3000 : 0,
-            meta: () => h(NTime, { type: 'relative', time: time, key: updateKey.value }),
+            meta: () => h(NTime, { type: 'relative', time, key: updateKey.value }),
           })
           console.log(`[SONG-REQUEST] [${danmaku.uname}] 添加曲目失败: ${data.message}`)
         }
@@ -198,7 +200,7 @@ export const useLiveRequest = defineStore('songRequest', () => {
         } as DanmakuUserInfo,
         createAt: Date.now(),
         isInLocal: true,
-        id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
+        id: songs.value.length == 0 ? 1 : (new List(songs.value).Max(s => s.id) ?? 0) + 1,
       } as SongRequestInfo
 
       localActiveSongs.value.unshift(songData)
@@ -213,7 +215,7 @@ export const useLiveRequest = defineStore('songRequest', () => {
     }
 
     if (accountInfo.value?.id) {
-      await QueryPostAPIWithParams<SongRequestInfo>(SONG_REQUEST_API_URL + 'add', {
+      await QueryPostAPIWithParams<SongRequestInfo>(`${SONG_REQUEST_API_URL}add`, {
         name: newSongName.value,
       }).then((data) => {
         if (data.code == 200) {
@@ -235,7 +237,7 @@ export const useLiveRequest = defineStore('songRequest', () => {
         user: undefined,
         createAt: Date.now(),
         isInLocal: true,
-        id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
+        id: songs.value.length == 0 ? 1 : (new List(songs.value).Max(s => s.id) ?? 0) + 1,
       } as SongRequestInfo
 
       localActiveSongs.value.unshift(songData)
@@ -289,7 +291,7 @@ export const useLiveRequest = defineStore('songRequest', () => {
           window.$message.error(`更新状态失败: ${data.message}`)
         }
       })
-      .catch((err) => {
+      .catch((_err) => {
         window.$message.error(`更新状态失败`)
       })
       .finally(() => {
@@ -302,17 +304,18 @@ export const useLiveRequest = defineStore('songRequest', () => {
 
     try {
       const data = await QueryPostAPI(
-        SONG_REQUEST_API_URL + 'del',
-        values.map((s) => s.id),
+        `${SONG_REQUEST_API_URL}del`,
+        values.map(s => s.id),
       )
 
       if (data.code == 200) {
         window.$message.success('删除成功')
-        originSongs.value = originSongs.value.filter((s) => !values.includes(s))
+        originSongs.value = originSongs.value.filter(s => !values.includes(s))
       } else {
-        window.$message.error('删除失败: ' + data.message)
+        window.$message.error(`删除失败: ${data.message}`)
       }
-    } catch (err) {
+    } catch (_err) {
+      console.error('[SONG-REQUEST] 删除请求失败', _err)
       window.$message.error('删除失败')
     } finally {
       isLoading.value = false
@@ -323,7 +326,7 @@ export const useLiveRequest = defineStore('songRequest', () => {
     isLoading.value = true
 
     try {
-      const data = await QueryGetAPI(SONG_REQUEST_API_URL + 'deactive')
+      const data = await QueryGetAPI(`${SONG_REQUEST_API_URL}deactive`)
 
       if (data.code == 200) {
         window.$message.success('已全部取消')
@@ -333,9 +336,10 @@ export const useLiveRequest = defineStore('songRequest', () => {
           }
         })
       } else {
-        window.$message.error('取消失败: ' + data.message)
+        window.$message.error(`取消失败: ${data.message}`)
       }
-    } catch (err) {
+    } catch (_err) {
+      console.error('[SONG-REQUEST] 取消全部失败', _err)
       window.$message.error('取消失败')
     } finally {
       isLoading.value = false
@@ -346,13 +350,13 @@ export const useLiveRequest = defineStore('songRequest', () => {
     if (!accountInfo.value?.id) return
 
     try {
-      const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-active', {
+      const data = await QueryGetAPI<SongRequestInfo[]>(`${SONG_REQUEST_API_URL}get-active`, {
         id: accountInfo.value?.id,
       })
 
       if (data.code == 200) {
         data.data.forEach((item) => {
-          const song = originSongs.value.find((s) => s.id == item.id)
+          const song = originSongs.value.find(s => s.id == item.id)
           if (song) {
             if (song.status != item.status) song.status = item.status
           } else {
@@ -363,10 +367,10 @@ export const useLiveRequest = defineStore('songRequest', () => {
           }
         })
       } else {
-        window.$message.error('无法获取点播队列: ' + data.message)
+        window.$message.error(`无法获取点播队列: ${data.message}`)
       }
-    } catch (err) {
-      console.error('[SONG-REQUEST] 更新活跃歌曲失败', err)
+    } catch (_err) {
+      console.error('[SONG-REQUEST] 更新活跃歌曲失败', _err)
     }
   }
 
@@ -386,7 +390,8 @@ export const useLiveRequest = defineStore('songRequest', () => {
         } else {
           window.$message.error(data.message)
         }
-      } catch (err) {
+      } catch (_err) {
+        console.error('[SONG-REQUEST] 添加黑名单失败', _err)
         window.$message.error('添加黑名单失败')
       }
     }
@@ -518,6 +523,6 @@ export const useLiveRequest = defineStore('songRequest', () => {
     onGetDanmaku,
     onGetSC,
     getSCColor,
-    getGuardColor
+    getGuardColor,
   }
-})
\ No newline at end of file
+})
diff --git a/src/data/DanmakuClients/BaseDanmakuClient.ts b/src/data/DanmakuClients/BaseDanmakuClient.ts
index 32b2f99..4e1fe59 100644
--- a/src/data/DanmakuClients/BaseDanmakuClient.ts
+++ b/src/data/DanmakuClients/BaseDanmakuClient.ts
@@ -1,53 +1,54 @@
+import type { KeepLiveWS } from 'bilibili-live-ws/browser' // 导入 bilibili-live-ws 库
 // BaseDanmakuClient.ts
-import { EventModel, EventDataTypes } from '@/api/api-models'; // 导入事件模型和类型枚举
-import { KeepLiveWS } from 'bilibili-live-ws/browser'; // 导入 bilibili-live-ws 库
+import type { EventModel } from '@/api/api-models'
+// 导入事件模型和类型枚举
 
 // 定义基础弹幕客户端抽象类
 export default abstract class BaseDanmakuClient {
   constructor() {
-    this.client = null; // 初始化客户端实例为 null
+    this.client = null // 初始化客户端实例为 null
     // 初始化两套事件监听器存储
-    this.eventsAsModel = this.createEmptyEventModelListeners();
-    this.eventsRaw = this.createEmptyRawEventlisteners();
+    this.eventsAsModel = this.createEmptyEventModelListeners()
+    this.eventsRaw = this.createEmptyRawEventlisteners()
   }
 
   // WebSocket 客户端实例
-  public client: KeepLiveWS | null;
+  public client: KeepLiveWS | null
 
   // 客户端连接状态
-  public state: 'padding' | 'connected' | 'connecting' | 'disconnected' =
-    'padding';
+  public state: 'padding' | 'connected' | 'connecting' | 'disconnected'
+    = 'padding'
 
   // 客户端类型 (由子类实现)
-  public abstract type: 'openlive' | 'direct';
+  public abstract type: 'openlive' | 'direct'
   // 目标服务器地址 (由子类实现)
-  public abstract serverUrl: string;
+  public abstract serverUrl: string
 
   // --- 事件系统 1: 使用 EventModel ---
   // 事件监听器集合 (统一使用 EventModel)
   public eventsAsModel: {
-    danmaku: ((arg1: EventModel, arg2?: any) => void)[];
-    gift: ((arg1: EventModel, arg2?: any) => void)[];
-    sc: ((arg1: EventModel, arg2?: any) => void)[];
-    guard: ((arg1: EventModel, arg2?: any) => void)[];
-    enter: ((arg1: EventModel, arg2?: any) => void)[]; // 新增: 用户进入事件
-    scDel: ((arg1: EventModel, arg2?: any) => void)[]; // 新增: SC 删除事件
-    all: ((arg1: any) => void)[]; // 'all' 事件监听器接收原始消息或特定事件包
-    follow: ((arg1: EventModel, arg2?: any) => void)[]; // 新增: 关注事件
-  };
+    danmaku: ((arg1: EventModel, arg2?: any) => void)[]
+    gift: ((arg1: EventModel, arg2?: any) => void)[]
+    sc: ((arg1: EventModel, arg2?: any) => void)[]
+    guard: ((arg1: EventModel, arg2?: any) => void)[]
+    enter: ((arg1: EventModel, arg2?: any) => void)[] // 新增: 用户进入事件
+    scDel: ((arg1: EventModel, arg2?: any) => void)[] // 新增: SC 删除事件
+    all: ((arg1: any) => void)[] // 'all' 事件监听器接收原始消息或特定事件包
+    follow: ((arg1: EventModel, arg2?: any) => void)[] // 新增: 关注事件
+  }
 
   // --- 事件系统 2: 使用原始数据类型 ---
   // 事件监听器集合 (使用原始数据结构, 类型设为 any, 由具体实现和调用者保证)
   public eventsRaw: {
-    danmaku: ((arg1: any, arg2?: any) => void)[];
-    gift: ((arg1: any, arg2?: any) => void)[];
-    sc: ((arg1: any, arg2?: any) => void)[];
-    guard: ((arg1: any, arg2?: any) => void)[];
-    enter: ((arg1: any, arg2?: any) => void)[]; // 新增: 用户进入事件
-    scDel: ((arg1: any, arg2?: any) => void)[]; // 新增: SC 删除事件
-    all: ((arg1: any) => void)[]; // 'all' 事件监听器接收原始消息或特定事件包
-    follow: ((arg1: any, arg2?: any) => void)[]; // 新增: 关注事件
-  };
+    danmaku: ((arg1: any, arg2?: any) => void)[]
+    gift: ((arg1: any, arg2?: any) => void)[]
+    sc: ((arg1: any, arg2?: any) => void)[]
+    guard: ((arg1: any, arg2?: any) => void)[]
+    enter: ((arg1: any, arg2?: any) => void)[] // 新增: 用户进入事件
+    scDel: ((arg1: any, arg2?: any) => void)[] // 新增: SC 删除事件
+    all: ((arg1: any) => void)[] // 'all' 事件监听器接收原始消息或特定事件包
+    follow: ((arg1: any, arg2?: any) => void)[] // 新增: 关注事件
+  }
 
   // 创建空的 EventModel 监听器对象
   public createEmptyEventModelListeners() {
@@ -60,7 +61,7 @@ export default abstract class BaseDanmakuClient {
       scDel: [],
       all: [],
       follow: [], // 初始化 follow 事件
-    };
+    }
   }
 
   // 创建空的 RawEvent 监听器对象
@@ -74,63 +75,65 @@ export default abstract class BaseDanmakuClient {
       scDel: [],
       all: [],
       follow: [], // 初始化 follow 事件
-    };
+    }
   }
 
   /**
    * 启动弹幕客户端连接
    * @returns Promise<{ success: boolean; message: string }> 启动结果
    */
-  public async Start(): Promise<{ success: boolean; message: string; }> {
+  public async Start(): Promise<{ success: boolean, message: string }> {
     // 如果已连接，直接返回成功
     if (this.state === 'connected') {
       return {
         success: true,
         message: '弹幕客户端已启动',
-      };
+      }
     }
     // 如果正在连接中，返回提示
     if (this.state === 'connecting') {
       return {
         success: false,
         message: '弹幕客户端正在启动',
-      };
+      }
     }
     // 设置状态为连接中
-    this.state = 'connecting';
+    this.state = 'connecting'
     try {
       // 确保 client 为 null 才初始化
       if (!this.client) {
-        console.log(`[${this.type}] 正在启动弹幕客户端`);
+        console.log(`[${this.type}] 正在启动弹幕客户端`)
         // 调用子类实现的初始化方法
-        const result = await this.initClient();
+        const result = await this.initClient()
         if (result.success) {
-          this.state = 'connected';
-          console.log(`[${this.type}] 弹幕客户端已完成启动`);
+          this.state = 'connected'
+          console.log(`[${this.type}] 弹幕客户端已完成启动`)
         } else {
-          this.state = 'disconnected';
-          console.error(`[${this.type}] 弹幕客户端启动失败: ${result.message}`);
+          this.state = 'disconnected'
+          console.error(`[${this.type}] 弹幕客户端启动失败: ${result.message}`)
         }
-        return result;
+        return result
       } else {
-        console.warn(`[${this.type}] 客户端实例已存在但状态异常，尝试重置状态`);
-        this.state = 'disconnected';
+        console.warn(`[${this.type}] 客户端实例已存在但状态异常，尝试重置状态`)
+        this.state = 'disconnected'
         return {
           success: false,
           message: '客户端实例状态异常，请尝试重新启动',
-        };
+        }
       }
     } catch (err: any) {
-      console.error(`[${this.type}] 启动过程中发生异常:`, err);
-      this.state = 'disconnected';
+      console.error(`[${this.type}] 启动过程中发生异常:`, err)
+      this.state = 'disconnected'
       if (this.client) {
-        try { this.client.close(); } catch { }
-        this.client = null;
+        try {
+          this.client.close()
+        } catch { }
+        this.client = null
       }
       return {
         success: false,
         message: err?.message || err?.toString() || '未知错误',
-      };
+      }
     }
   }
 
@@ -140,24 +143,24 @@ export default abstract class BaseDanmakuClient {
   public Stop() {
     // 如果已断开，则无需操作
     if (this.state === 'disconnected') {
-      return;
+      return
     }
     // 设置状态为已断开
-    this.state = 'disconnected';
+    this.state = 'disconnected'
     if (this.client) {
-      console.log(`[${this.type}] 正在停止弹幕客户端`);
+      console.log(`[${this.type}] 正在停止弹幕客户端`)
       try {
-        this.client.close(); // 关闭 WebSocket 连接
+        this.client.close() // 关闭 WebSocket 连接
       } catch (err) {
-        console.error(`[${this.type}] 关闭客户端时发生错误:`, err);
+        console.error(`[${this.type}] 关闭客户端时发生错误:`, err)
       }
-      this.client = null; // 将客户端实例置为 null
+      this.client = null // 将客户端实例置为 null
     } else {
-      console.warn(`[${this.type}] 弹幕客户端未被启动, 忽略停止操作`);
+      console.warn(`[${this.type}] 弹幕客户端未被启动, 忽略停止操作`)
     }
     // 注意: 清空所有事件监听器
-    //this.eventsAsModel = this.createEmptyEventModelListeners();
-    //this.eventsRaw = this.createEmptyRawEventlisteners();
+    // this.eventsAsModel = this.createEmptyEventModelListeners();
+    // this.eventsRaw = this.createEmptyRawEventlisteners();
   }
 
   /**
@@ -165,9 +168,9 @@ export default abstract class BaseDanmakuClient {
    * @returns Promise<{ success: boolean; message: string }> 初始化结果
    */
   protected abstract initClient(): Promise<{
-    success: boolean;
-    message: string;
-  }>;
+    success: boolean
+    message: string
+  }>
 
   /**
    * 内部通用的客户端事件绑定和连接状态等待逻辑
@@ -175,66 +178,70 @@ export default abstract class BaseDanmakuClient {
    * @returns Promise<{ success: boolean; message: string }> 连接结果
    */
   protected async initClientInner(
-    chatClient: KeepLiveWS
-  ): Promise<{ success: boolean; message: string; }> {
-    let isConnected = false; // 标记是否连接成功
-    let isError = false; // 标记是否发生错误
-    let errorMsg = ''; // 存储错误信息
+    chatClient: KeepLiveWS,
+  ): Promise<{ success: boolean, message: string }> {
+    let isConnected = false // 标记是否连接成功
+    let isError = false // 标记是否发生错误
+    let errorMsg = '' // 存储错误信息
 
     // 监听错误事件
     chatClient.on('error', (err: any) => {
-      console.error(`[${this.type}] 客户端发生错误:`, err);
-      isError = true;
-      errorMsg = err?.message || err?.toString() || '未知错误';
-    });
+      console.error(`[${this.type}] 客户端发生错误:`, err)
+      isError = true
+      errorMsg = err?.message || err?.toString() || '未知错误'
+    })
 
     // 监听连接成功事件
     chatClient.on('live', () => {
-      console.log(`[${this.type}] 弹幕客户端连接成功`);
-      isConnected = true;
-    });
+      console.log(`[${this.type}] 弹幕客户端连接成功`)
+      isConnected = true
+    })
 
     // 监听连接关闭事件
     chatClient.on('close', () => {
-      console.log(`[${this.type}] 弹幕客户端连接已关闭`);
+      console.log(`[${this.type}] 弹幕客户端连接已关闭`)
       if (this.state !== 'disconnected') {
-        this.state = 'disconnected';
-        this.client = null;
+        this.state = 'disconnected'
+        this.client = null
       }
-      isConnected = false; // 标记为未连接
-    });
+      isConnected = false // 标记为未连接
+    })
 
     // 监听原始消息事件 (通用)
     // 注意: 子类可能也会监听特定事件名, 这里的 'msg' 是备用或处理未被特定监听器捕获的事件
-    chatClient.on('msg', (command: any) => this.onRawMessage(command));
+    chatClient.on('msg', (command: any) => this.onRawMessage(command))
 
-    this.client = chatClient; // 保存客户端实例
+    this.client = chatClient // 保存客户端实例
 
     // 等待连接成功或发生错误
-    const timeout = 30000; // 30 秒超时
-    const startTime = Date.now();
+    const timeout = 30000 // 30 秒超时
+    const startTime = Date.now()
     while (!isConnected && !isError) {
       if (Date.now() - startTime > timeout) {
-        isError = true;
-        errorMsg = '连接超时';
-        console.error(`[${this.type}] ${errorMsg}`);
-        break;
+        isError = true
+        errorMsg = '连接超时'
+        console.error(`[${this.type}] ${errorMsg}`)
+        break
       }
-      await new Promise((resolve) => { setTimeout(resolve, 500); });
+      await new Promise((resolve) => {
+        setTimeout(resolve, 500)
+      })
     }
 
     // 如果连接过程中发生错误，清理客户端实例
     if (isError && this.client) {
-      try { this.client.close(); } catch { }
-      this.client = null;
-      this.state = 'disconnected';
+      try {
+        this.client.close()
+      } catch { }
+      this.client = null
+      this.state = 'disconnected'
     }
 
     // 返回连接结果
     return {
       success: isConnected && !isError,
       message: errorMsg,
-    };
+    }
   }
 
   /**
@@ -244,12 +251,16 @@ export default abstract class BaseDanmakuClient {
   public onRawMessage = (command: any) => {
     // 触发 'all' 事件监听器 (两套系统都触发)
     try {
-      this.eventsAsModel.all?.forEach((listener) => { listener(command); });
-      this.eventsRaw.all?.forEach((listener) => { listener(command); });
+      this.eventsAsModel.all?.forEach((listener) => {
+        listener(command)
+      })
+      this.eventsRaw.all?.forEach((listener) => {
+        listener(command)
+      })
     } catch (err) {
-      console.error(`[${this.type}] 处理 'all' 事件监听器时出错:`, err, command);
+      console.error(`[${this.type}] 处理 'all' 事件监听器时出错:`, err, command)
     }
-  };
+  }
 
   // --- 抽象处理方法 (子类实现) ---
   // 这些方法负责接收原始数据, 触发 RawEvent, 转换数据, 触发 ModelEvent
@@ -259,98 +270,96 @@ export default abstract class BaseDanmakuClient {
    * @param data - 原始消息数据部分 (any 类型)
    * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
    */
-  public abstract onDanmaku(comand: any): void;
+  public abstract onDanmaku(comand: any): void
   /**
    * 处理礼物消息 (子类实现)
    * @param data - 原始消息数据部分 (any 类型)
    * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
    */
-  public abstract onGift(comand: any): void;
+  public abstract onGift(comand: any): void
   /**
    * 处理 Super Chat 消息 (子类实现)
    * @param data - 原始消息数据部分 (any 类型)
    * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
    */
-  public abstract onSC(comand: any): void;
+  public abstract onSC(comand: any): void
   /**
    * 处理上舰/舰队消息 (子类实现)
    * @param data - 原始消息数据部分 (any 类型)
    * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
    */
-  public abstract onGuard(comand: any): void;
+  public abstract onGuard(comand: any): void
   /**
    * 处理用户进入消息 (子类实现)
    * @param data - 原始消息数据部分 (any 类型)
    * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
    */
-  public abstract onEnter(comand: any): void;
+  public abstract onEnter(comand: any): void
   /**
- * 处理 SC 删除消息 (子类实现)
- * @param data - 原始消息数据部分 (any 类型) - 通常可能只包含 message_id
- * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
- */
-  public abstract onScDel(comand: any): void;
-
+   * 处理 SC 删除消息 (子类实现)
+   * @param data - 原始消息数据部分 (any 类型) - 通常可能只包含 message_id
+   * @param rawCommand - 完整的原始消息对象 (可选, any 类型)
+   */
+  public abstract onScDel(comand: any): void
 
   // --- 事件系统 1: on/off (使用 EventModel) ---
-  public onEvent(eventName: 'danmaku', listener: (arg1: EventModel, arg2?: any) => void): this;
-  public onEvent(eventName: 'gift', listener: (arg1: EventModel, arg2?: any) => void): this;
-  public onEvent(eventName: 'sc', listener: (arg1: EventModel, arg2?: any) => void): this;
-  public onEvent(eventName: 'guard', listener: (arg1: EventModel, arg2?: any) => void): this;
-  public onEvent(eventName: 'enter', listener: (arg1: EventModel, arg2?: any) => void): this; // 新增
-  public onEvent(eventName: 'scDel', listener: (arg1: EventModel, arg2?: any) => void): this; // 新增
-  public onEvent(eventName: 'all', listener: (arg1: any) => void): this;
-  public onEvent(eventName: 'follow', listener: (arg1: EventModel, arg2?: any) => void): this; // 新增
+  public onEvent(eventName: 'danmaku', listener: (arg1: EventModel, arg2?: any) => void): this
+  public onEvent(eventName: 'gift', listener: (arg1: EventModel, arg2?: any) => void): this
+  public onEvent(eventName: 'sc', listener: (arg1: EventModel, arg2?: any) => void): this
+  public onEvent(eventName: 'guard', listener: (arg1: EventModel, arg2?: any) => void): this
+  public onEvent(eventName: 'enter', listener: (arg1: EventModel, arg2?: any) => void): this // 新增
+  public onEvent(eventName: 'scDel', listener: (arg1: EventModel, arg2?: any) => void): this // 新增
+  public onEvent(eventName: 'all', listener: (arg1: any) => void): this
+  public onEvent(eventName: 'follow', listener: (arg1: EventModel, arg2?: any) => void): this // 新增
   public onEvent(eventName: keyof BaseDanmakuClient['eventsAsModel'], listener: (...args: any[]) => void): this {
     if (!this.eventsAsModel[eventName]) {
       // @ts-ignore
-      this.eventsAsModel[eventName] = [];
+      this.eventsAsModel[eventName] = []
     }
     // @ts-ignore
-    this.eventsAsModel[eventName].push(listener);
-    return this;
+    this.eventsAsModel[eventName].push(listener)
+    return this
   }
 
   public offEvent(eventName: keyof BaseDanmakuClient['eventsAsModel'], listener: (...args: any[]) => void): this {
     if (this.eventsAsModel[eventName]?.length) {
       // @ts-ignore
-      const index = this.eventsAsModel[eventName].indexOf(listener);
+      const index = this.eventsAsModel[eventName].indexOf(listener)
       if (index > -1) {
-        this.eventsAsModel[eventName].splice(index, 1);
+        this.eventsAsModel[eventName].splice(index, 1)
       }
     }
-    return this;
+    return this
   }
 
-
   // --- 事件系统 2: on/off (使用原始数据) ---
   // 注意: listener 的 arg1 类型为 any, 需要调用者根据 eventName 自行转换或处理
-  public on(eventName: 'danmaku', listener: (arg1: any, arg2?: any) => void): this;
-  public on(eventName: 'gift', listener: (arg1: any, arg2?: any) => void): this;
-  public on(eventName: 'sc', listener: (arg1: any, arg2?: any) => void): this;
-  public on(eventName: 'guard', listener: (arg1: any, arg2?: any) => void): this;
-  public on(eventName: 'enter', listener: (arg1: any, arg2?: any) => void): this; // 新增
-  public on(eventName: 'scDel', listener: (arg1: any, arg2?: any) => void): this; // 新增
-  public on(eventName: 'all', listener: (arg1: any) => void): this;
-  public on(eventName: 'follow', listener: (arg1: any, arg2?: any) => void): this; // 新增
+  public on(eventName: 'danmaku', listener: (arg1: any, arg2?: any) => void): this
+  public on(eventName: 'gift', listener: (arg1: any, arg2?: any) => void): this
+  public on(eventName: 'sc', listener: (arg1: any, arg2?: any) => void): this
+  public on(eventName: 'guard', listener: (arg1: any, arg2?: any) => void): this
+  public on(eventName: 'enter', listener: (arg1: any, arg2?: any) => void): this // 新增
+  public on(eventName: 'scDel', listener: (arg1: any, arg2?: any) => void): this // 新增
+  public on(eventName: 'all', listener: (arg1: any) => void): this
+  public on(eventName: 'follow', listener: (arg1: any, arg2?: any) => void): this // 新增
   public on(eventName: keyof BaseDanmakuClient['eventsRaw'], listener: (...args: any[]) => void): this {
     if (!this.eventsRaw[eventName]) {
       // @ts-ignore
-      this.eventsRaw[eventName] = [];
+      this.eventsRaw[eventName] = []
     }
     // @ts-ignore
-    this.eventsRaw[eventName].push(listener);
-    return this;
+    this.eventsRaw[eventName].push(listener)
+    return this
   }
 
   public off(eventName: keyof BaseDanmakuClient['eventsRaw'], listener: (...args: any[]) => void): this {
     if (this.eventsRaw[eventName]?.length) {
       // @ts-ignore
-      const index = this.eventsRaw[eventName].indexOf(listener);
+      const index = this.eventsRaw[eventName].indexOf(listener)
       if (index > -1) {
-        this.eventsRaw[eventName].splice(index, 1);
+        this.eventsRaw[eventName].splice(index, 1)
       }
     }
-    return this;
+    return this
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/DanmakuClients/DirectClient.ts b/src/data/DanmakuClients/DirectClient.ts
index 4357076..fbca9e5 100644
--- a/src/data/DanmakuClients/DirectClient.ts
+++ b/src/data/DanmakuClients/DirectClient.ts
@@ -1,60 +1,65 @@
-import { KeepLiveWS } from 'bilibili-live-ws/browser';
-import BaseDanmakuClient from './BaseDanmakuClient';
-import { EventDataTypes, GuardLevel } from '@/api/api-models';
-import { getUserAvatarUrl, GuidUtils } from '@/Utils';
-import { AVATAR_URL } from '../constants';
-export type DirectClientAuthInfo = {
-  token: string;
-  roomId: number;
-  tokenUserId: number;
-  buvid: string;
-};
-/** 直播间弹幕客户端, 只能在vtsuru.client环境使用
+import { KeepLiveWS } from 'bilibili-live-ws/browser'
+import { EventDataTypes, GuardLevel } from '@/api/api-models'
+import { GuidUtils } from '@/Utils'
+import { AVATAR_URL } from '../constants'
+import BaseDanmakuClient from './BaseDanmakuClient'
+
+export interface DirectClientAuthInfo {
+  token: string
+  roomId: number
+  tokenUserId: number
+  buvid: string
+}
+/**
+ * 直播间弹幕客户端, 只能在vtsuru.client环境使用
  *
  */
 export default class DirectClient extends BaseDanmakuClient {
-  public serverUrl: string = 'wss://broadcastlv.chat.bilibili.com/sub';
+  public serverUrl: string = 'wss://broadcastlv.chat.bilibili.com/sub'
 
   constructor(auth: DirectClientAuthInfo) {
-    super();
-    this.authInfo = auth;
+    super()
+    this.authInfo = auth
   }
 
-  public type = 'direct' as const;
+  public type = 'direct' as const
 
-  public readonly authInfo: DirectClientAuthInfo;
+  public readonly authInfo: DirectClientAuthInfo
 
-  protected async initClient(): Promise<{ success: boolean; message: string; }> {
+  protected async initClient(): Promise<{ success: boolean, message: string }> {
     if (this.authInfo) {
       const chatClient = new KeepLiveWS(this.authInfo.roomId, {
         key: this.authInfo.token,
         buvid: this.authInfo.buvid,
         uid: this.authInfo.tokenUserId,
-        protover: 3
-      });
+        protover: 3,
+      })
 
       chatClient.on('live', () => {
-        console.log('[direct] 已连接房间: ' + this.authInfo.roomId);
-      });
-      chatClient.on('DANMU_MSG', (data) => this.onDanmaku(data));
-      chatClient.on('SEND_GIFT', (data) => this.onGift(data));
-      chatClient.on('GUARD_BUY', (data) => this.onGuard(data));
-      chatClient.on('SUPER_CHAT_MESSAGE', (data) => this.onSC(data));
-      chatClient.on('INTERACT_WORD', (data) => this.onEnter(data));
-      chatClient.on('SUPER_CHAT_MESSAGE_DELETE', (data) => this.onScDel(data));
+        console.log(`[direct] 已连接房间: ${this.authInfo.roomId}`)
+      })
+      chatClient.on('DANMU_MSG', data => this.onDanmaku(data))
+      chatClient.on('SEND_GIFT', data => this.onGift(data))
+      chatClient.on('GUARD_BUY', data => this.onGuard(data))
+      chatClient.on('SUPER_CHAT_MESSAGE', data => this.onSC(data))
+      chatClient.on('INTERACT_WORD', data => this.onEnter(data))
+      chatClient.on('SUPER_CHAT_MESSAGE_DELETE', data => this.onScDel(data))
 
-      return await super.initClientInner(chatClient);
+      return super.initClientInner(chatClient)
     } else {
-      console.log('[direct] 无法开启场次, 未提供弹幕客户端认证信息');
+      console.log('[direct] 无法开启场次, 未提供弹幕客户端认证信息')
       return {
         success: false,
-        message: '未提供弹幕客户端认证信息'
-      };
+        message: '未提供弹幕客户端认证信息',
+      }
     }
   }
+
   public onDanmaku(command: any): void {
-    const info = command.info;
-    this.eventsRaw?.danmaku?.forEach((d) => { d(info, command); });
+    const info = command.info
+    this.eventsRaw?.danmaku?.forEach((d) => {
+      d(info, command)
+    })
     this.eventsAsModel.danmaku?.forEach((d) => {
       d(
         {
@@ -69,18 +74,21 @@ export default class DirectClient extends BaseDanmakuClient {
           fans_medal_level: info[0][15].user.medal?.level,
           fans_medal_name: info[0][15].user.medal?.name,
           fans_medal_wearing_status: info[0][15].user.medal?.is_light === 1,
-          emoji: info[0]?.[13]?.url?.replace("http://", "https://") || '',
-          uface: info[0][15].user.base.face.replace("http://", "https://"),
+          emoji: info[0]?.[13]?.url?.replace('http://', 'https://') || '',
+          uface: info[0][15].user.base.face.replace('http://', 'https://'),
           open_id: '',
-          ouid: GuidUtils.numToGuid(info[2][0])
+          ouid: GuidUtils.numToGuid(info[2][0]),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onGift(command: any): void {
-    const data = command.data;
-    this.eventsRaw?.gift?.forEach((d) => { d(data, command); });
+    const data = command.data
+    this.eventsRaw?.gift?.forEach((d) => {
+      d(data, command)
+    })
     this.eventsAsModel.gift?.forEach((d) => {
       d(
         {
@@ -95,17 +103,20 @@ export default class DirectClient extends BaseDanmakuClient {
           fans_medal_level: data.medal_info.medal_level,
           fans_medal_name: data.medal_info.medal_name,
           fans_medal_wearing_status: data.medal_info.is_lighted === 1,
-          uface: data.face.replace("http://", "https://"),
+          uface: data.face.replace('http://', 'https://'),
           open_id: '',
-          ouid: GuidUtils.numToGuid(data.uid)
+          ouid: GuidUtils.numToGuid(data.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onSC(command: any): void {
-    const data = command.data;
-    this.eventsRaw?.sc?.forEach((d) => { d(data, command); });
+    const data = command.data
+    this.eventsRaw?.sc?.forEach((d) => {
+      d(data, command)
+    })
     this.eventsAsModel.sc?.forEach((d) => {
       d(
         {
@@ -120,17 +131,20 @@ export default class DirectClient extends BaseDanmakuClient {
           fans_medal_level: data.medal_info.medal_level,
           fans_medal_name: data.medal_info.medal_name,
           fans_medal_wearing_status: data.medal_info.is_lighted === 1,
-          uface: data.user_info.face.replace("http://", "https://"),
+          uface: data.user_info.face.replace('http://', 'https://'),
           open_id: '',
-          ouid: GuidUtils.numToGuid(data.uid)
+          ouid: GuidUtils.numToGuid(data.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onGuard(command: any): void {
-    const data = command.data;
-    this.eventsRaw?.guard?.forEach((d) => { d(data, command); });
+    const data = command.data
+    this.eventsRaw?.guard?.forEach((d) => {
+      d(data, command)
+    })
     this.eventsAsModel.guard?.forEach((d) => {
       d(
         {
@@ -147,18 +161,21 @@ export default class DirectClient extends BaseDanmakuClient {
           fans_medal_wearing_status: false,
           uface: AVATAR_URL + data.uid,
           open_id: '',
-          ouid: GuidUtils.numToGuid(data.uid)
+          ouid: GuidUtils.numToGuid(data.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onEnter(command: any): void {
-    const data = command.data;
-    const msgType = data.msg_type;
+    const data = command.data
+    const msgType = data.msg_type
 
     if (msgType === 1) {
-      this.eventsRaw?.enter?.forEach((d) => { d(data, command); });
+      this.eventsRaw?.enter?.forEach((d) => {
+        d(data, command)
+      })
       this.eventsAsModel.enter?.forEach((d) => {
         d(
           {
@@ -173,16 +190,17 @@ export default class DirectClient extends BaseDanmakuClient {
             fans_medal_level: data.fans_medal?.medal_level || 0,
             fans_medal_name: data.fans_medal?.medal_name || '',
             fans_medal_wearing_status: data.fans_medal?.is_lighted === 1,
-            uface: data.face?.replace("http://", "https://") || (AVATAR_URL + data.uid),
+            uface: data.face?.replace('http://', 'https://') || (AVATAR_URL + data.uid),
             open_id: '',
-            ouid: GuidUtils.numToGuid(data.uid)
+            ouid: GuidUtils.numToGuid(data.uid),
           },
-          command
-        );
-      });
-    }
-    else if (msgType === 2) {
-      this.eventsRaw?.follow?.forEach((d) => { d(data, command); });
+          command,
+        )
+      })
+    } else if (msgType === 2) {
+      this.eventsRaw?.follow?.forEach((d) => {
+        d(data, command)
+      })
       this.eventsAsModel.follow?.forEach((d) => {
         d(
           {
@@ -197,18 +215,21 @@ export default class DirectClient extends BaseDanmakuClient {
             fans_medal_level: data.fans_medal?.medal_level || 0,
             fans_medal_name: data.fans_medal?.medal_name || '',
             fans_medal_wearing_status: data.fans_medal?.is_lighted === 1,
-            uface: data.face?.replace("http://", "https://") || (AVATAR_URL + data.uid),
+            uface: data.face?.replace('http://', 'https://') || (AVATAR_URL + data.uid),
             open_id: '',
-            ouid: GuidUtils.numToGuid(data.uid)
+            ouid: GuidUtils.numToGuid(data.uid),
           },
-          command
-        );
-      });
+          command,
+        )
+      })
     }
   }
+
   public onScDel(command: any): void {
-    const data = command.data;
-    this.eventsRaw?.scDel?.forEach((d) => { d(data, command); });
+    const data = command.data
+    this.eventsRaw?.scDel?.forEach((d) => {
+      d(data, command)
+    })
     this.eventsAsModel.scDel?.forEach((d) => {
       d(
         {
@@ -225,10 +246,10 @@ export default class DirectClient extends BaseDanmakuClient {
           fans_medal_wearing_status: false,
           uface: '',
           open_id: '',
-          ouid: ''
+          ouid: '',
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
 }
diff --git a/src/data/DanmakuClients/OpenLiveClient.ts b/src/data/DanmakuClients/OpenLiveClient.ts
index e3fec5c..afc4610 100644
--- a/src/data/DanmakuClients/OpenLiveClient.ts
+++ b/src/data/DanmakuClients/OpenLiveClient.ts
@@ -1,126 +1,130 @@
-import { EventDataTypes, OpenLiveInfo } from '@/api/api-models';
-import { QueryGetAPI, QueryPostAPI } from '@/api/query';
-import { GuidUtils } from '@/Utils';
-import { KeepLiveWS } from 'bilibili-live-ws/browser';
-import { clearInterval, setInterval } from 'worker-timers';
-import { OPEN_LIVE_API_URL } from '../constants';
-import BaseDanmakuClient from './BaseDanmakuClient';
+import type { OpenLiveInfo } from '@/api/api-models'
+import { KeepLiveWS } from 'bilibili-live-ws/browser'
+import { clearInterval, setInterval } from 'worker-timers'
+import { EventDataTypes } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { GuidUtils } from '@/Utils'
+import { OPEN_LIVE_API_URL } from '../constants'
+import BaseDanmakuClient from './BaseDanmakuClient'
 
 export default class OpenLiveClient extends BaseDanmakuClient {
-  public serverUrl: string = '';
+  public serverUrl: string = ''
   constructor(auth?: AuthInfo) {
-    super();
-    this.authInfo = auth;
+    super()
+    this.authInfo = auth
   }
 
-  public type = 'openlive' as const;
+  public type = 'openlive' as const
 
-  private timer: any | undefined;
+  private timer: any | undefined
 
-  public authInfo: AuthInfo | undefined;
-  public roomAuthInfo: OpenLiveInfo | undefined;
+  public authInfo: AuthInfo | undefined
+  public roomAuthInfo: OpenLiveInfo | undefined
 
-  public async Start(): Promise<{ success: boolean; message: string; }> {
-    const result = await super.Start();
+  public async Start(): Promise<{ success: boolean, message: string }> {
+    const result = await super.Start()
     if (result.success) {
       this.timer ??= setInterval(() => {
-        this.sendHeartbeat();
-      }, 20 * 1000);
+        this.sendHeartbeat()
+      }, 20 * 1000)
     }
-    return result;
-  }
-  public Stop() {
-    super.Stop();
-    clearInterval(this.timer);
-    this.timer = undefined;
-    this.roomAuthInfo = undefined;
+    return result
   }
 
-  protected async initClient(): Promise<{ success: boolean; message: string; }> {
-    const auth = await this.getAuthInfo();
+  public Stop() {
+    super.Stop()
+    clearInterval(this.timer)
+    this.timer = undefined
+    this.roomAuthInfo = undefined
+  }
+
+  protected async initClient(): Promise<{ success: boolean, message: string }> {
+    const auth = await this.getAuthInfo()
     if (auth.data) {
       const chatClient = new KeepLiveWS(auth.data.anchor_info.room_id, {
         authBody: JSON.parse(auth.data.websocket_info.auth_body),
-        address: auth.data.websocket_info.wss_link[0]
-      });
-      chatClient.on('LIVE_OPEN_PLATFORM_DM', (cmd) => this.onDanmaku(cmd));
-      chatClient.on('LIVE_OPEN_PLATFORM_GIFT', (cmd) => this.onGift(cmd));
-      chatClient.on('LIVE_OPEN_PLATFORM_GUARD', (cmd) => this.onGuard(cmd));
-      chatClient.on('LIVE_OPEN_PLATFORM_SC', (cmd) => this.onSC(cmd));
-      chatClient.on('LIVE_OPEN_PLATFORM_LIVE_ROOM_ENTER', (cmd) => this.onEnter(cmd));
-      chatClient.on('LIVE_OPEN_PLATFORM_SUPER_CHAT_DEL', (cmd) => this.onScDel(cmd));
+        address: auth.data.websocket_info.wss_link[0],
+      })
+      chatClient.on('LIVE_OPEN_PLATFORM_DM', cmd => this.onDanmaku(cmd))
+      chatClient.on('LIVE_OPEN_PLATFORM_GIFT', cmd => this.onGift(cmd))
+      chatClient.on('LIVE_OPEN_PLATFORM_GUARD', cmd => this.onGuard(cmd))
+      chatClient.on('LIVE_OPEN_PLATFORM_SC', cmd => this.onSC(cmd))
+      chatClient.on('LIVE_OPEN_PLATFORM_LIVE_ROOM_ENTER', cmd => this.onEnter(cmd))
+      chatClient.on('LIVE_OPEN_PLATFORM_SUPER_CHAT_DEL', cmd => this.onScDel(cmd))
       chatClient.on('live', () => {
         console.log(
-          `[${this.type}] 已连接房间: ${auth.data?.anchor_info.room_id}`
-        );
-      });
+          `[${this.type}] 已连接房间: ${auth.data?.anchor_info.room_id}`,
+        )
+      })
 
-      this.roomAuthInfo = auth.data;
+      this.roomAuthInfo = auth.data
 
-      return await super.initClientInner(chatClient);
+      return super.initClientInner(chatClient)
     } else {
-      console.log(`[${this.type}] 无法开启场次: ` + auth.message);
+      console.log(`[${this.type}] 无法开启场次: ${auth.message}`)
       return {
         success: false,
-        message: auth.message
-      };
+        message: auth.message,
+      }
     }
   }
+
   private async getAuthInfo(): Promise<{
-    data: OpenLiveInfo | null;
-    message: string;
+    data: OpenLiveInfo | null
+    message: string
   }> {
     try {
       const data = await QueryPostAPI<OpenLiveInfo>(
-        OPEN_LIVE_API_URL + 'start',
-        this.authInfo?.Code ? this.authInfo : undefined
-      );
+        `${OPEN_LIVE_API_URL}start`,
+        this.authInfo?.Code ? this.authInfo : undefined,
+      )
       if (data.code == 200) {
-        console.log(`[${this.type}] 已获取场次信息`);
+        console.log(`[${this.type}] 已获取场次信息`)
         return {
           data: data.data,
-          message: ''
-        };
+          message: '',
+        }
       } else {
         return {
           data: null,
-          message: data.message
-        };
+          message: data.message,
+        }
       }
     } catch (err) {
       return {
         data: null,
-        message: err?.toString() || '未知错误'
-      };
+        message: err?.toString() || '未知错误',
+      }
     }
   }
+
   private sendHeartbeat() {
     if (this.state !== 'connected') {
-      clearInterval(this.timer);
-      this.timer = undefined;
-      return;
+      clearInterval(this.timer)
+      this.timer = undefined
+      return
     }
     const query = this.authInfo
       ? QueryPostAPI<OpenLiveInfo>(
-        OPEN_LIVE_API_URL + 'heartbeat',
-        this.authInfo
-      )
-      : QueryGetAPI<OpenLiveInfo>(OPEN_LIVE_API_URL + 'heartbeat-internal');
+          `${OPEN_LIVE_API_URL}heartbeat`,
+          this.authInfo,
+        )
+      : QueryGetAPI<OpenLiveInfo>(`${OPEN_LIVE_API_URL}heartbeat-internal`)
     query.then((data) => {
       if (data.code != 200) {
-        console.error(`[${this.type}] 心跳失败, 将重新连接`);
-        this.client?.close();
-        this.client = null;
-        this.initClient();
+        console.error(`[${this.type}] 心跳失败, 将重新连接`)
+        this.client?.close()
+        this.client = null
+        this.initClient()
       }
-    });
+    })
   }
 
   public onDanmaku(command: any) {
-    const data = command.data as DanmakuInfo;
+    const data = command.data as DanmakuInfo
     this.eventsRaw.danmaku?.forEach((d) => {
-      d(data, command);
-    });
+      d(data, command)
+    })
     this.eventsAsModel.danmaku?.forEach((d) => {
       d(
         {
@@ -138,18 +142,19 @@ export default class OpenLiveClient extends BaseDanmakuClient {
           emoji: data.dm_type == 1 ? data.emoji_img_url : undefined,
           uface: data.uface,
           open_id: data.open_id,
-          ouid: data.open_id ?? GuidUtils.numToGuid(data.uid)
+          ouid: data.open_id ?? GuidUtils.numToGuid(data.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onGift(command: any) {
-    const data = command.data as GiftInfo;
-    const price = (data.price * data.gift_num) / 1000;
+    const data = command.data as GiftInfo
+    const price = (data.price * data.gift_num) / 1000
     this.eventsRaw.gift?.forEach((d) => {
-      d(data, command);
-    });
+      d(data, command)
+    })
     this.eventsAsModel.gift?.forEach((d) => {
       d(
         {
@@ -166,17 +171,18 @@ export default class OpenLiveClient extends BaseDanmakuClient {
           fans_medal_wearing_status: data.fans_medal_wearing_status,
           uface: data.uface,
           open_id: data.open_id,
-          ouid: data.open_id ?? GuidUtils.numToGuid(data.uid)
+          ouid: data.open_id ?? GuidUtils.numToGuid(data.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onSC(command: any) {
-    const data = command.data as SCInfo;
+    const data = command.data as SCInfo
     this.eventsRaw.sc?.forEach((d) => {
-      d(data, command);
-    });
+      d(data, command)
+    })
     this.eventsAsModel.sc?.forEach((d) => {
       d(
         {
@@ -193,17 +199,18 @@ export default class OpenLiveClient extends BaseDanmakuClient {
           fans_medal_wearing_status: data.fans_medal_wearing_status,
           uface: data.uface,
           open_id: data.open_id,
-          ouid: data.open_id ?? GuidUtils.numToGuid(data.uid)
+          ouid: data.open_id ?? GuidUtils.numToGuid(data.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onGuard(command: any) {
-    const data = command.data as GuardInfo;
+    const data = command.data as GuardInfo
     this.eventsRaw.guard?.forEach((d) => {
-      d(data, command);
-    });
+      d(data, command)
+    })
     this.eventsAsModel.guard?.forEach((d) => {
       d(
         {
@@ -228,17 +235,18 @@ export default class OpenLiveClient extends BaseDanmakuClient {
           uface: data.user_info.uface,
           open_id: data.user_info.open_id,
           ouid:
-            data.user_info.open_id ?? GuidUtils.numToGuid(data.user_info.uid)
+            data.user_info.open_id ?? GuidUtils.numToGuid(data.user_info.uid),
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onEnter(command: any): void {
-    const data = command.data as EnterInfo;
+    const data = command.data as EnterInfo
     this.eventsRaw.enter?.forEach((d) => {
-      d(data);
-    });
+      d(data)
+    })
     this.eventsAsModel.enter?.forEach((d) => {
       d(
         {
@@ -255,17 +263,18 @@ export default class OpenLiveClient extends BaseDanmakuClient {
           uface: data.uface,
           open_id: data.open_id,
           uid: 0,
-          ouid: data.open_id
+          ouid: data.open_id,
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
+
   public onScDel(command: any): void {
-    const data = command.data as SCDelInfo;
+    const data = command.data as SCDelInfo
     this.eventsRaw.scDel?.forEach((d) => {
-      d(data, command);
-    });
+      d(data, command)
+    })
     this.eventsAsModel.scDel?.forEach((d) => {
       d(
         {
@@ -282,114 +291,114 @@ export default class OpenLiveClient extends BaseDanmakuClient {
           uface: '',
           open_id: '',
           uid: 0,
-          ouid: ''
+          ouid: '',
         },
-        command
-      );
-    });
+        command,
+      )
+    })
   }
 }
 
 export interface DanmakuInfo {
-  room_id: number;
-  uid: number;
-  open_id: string;
-  uname: string;
-  msg: string;
-  msg_id: string;
-  fans_medal_level: number;
-  fans_medal_name: string;
-  fans_medal_wearing_status: boolean;
-  guard_level: number;
-  timestamp: number;
-  uface: string;
-  emoji_img_url: string;
-  dm_type: number;
+  room_id: number
+  uid: number
+  open_id: string
+  uname: string
+  msg: string
+  msg_id: string
+  fans_medal_level: number
+  fans_medal_name: string
+  fans_medal_wearing_status: boolean
+  guard_level: number
+  timestamp: number
+  uface: string
+  emoji_img_url: string
+  dm_type: number
 }
 export interface GiftInfo {
-  room_id: number;
-  uid: number;
-  open_id: string;
-  uname: string;
-  uface: string;
-  gift_id: number;
-  gift_name: string;
-  gift_num: number;
-  price: number;
-  paid: boolean;
-  fans_medal_level: number;
-  fans_medal_name: string;
-  fans_medal_wearing_status: boolean;
-  guard_level: number;
-  timestamp: number;
-  msg_id: string;
+  room_id: number
+  uid: number
+  open_id: string
+  uname: string
+  uface: string
+  gift_id: number
+  gift_name: string
+  gift_num: number
+  price: number
+  paid: boolean
+  fans_medal_level: number
+  fans_medal_name: string
+  fans_medal_wearing_status: boolean
+  guard_level: number
+  timestamp: number
+  msg_id: string
   anchor_info: {
-    uid: number;
-    uname: string;
-    uface: string;
-  };
-  gift_icon: string;
-  combo_gift: boolean;
+    uid: number
+    uname: string
+    uface: string
+  }
+  gift_icon: string
+  combo_gift: boolean
   combo_info: {
-    combo_base_num: number;
-    combo_count: number;
-    combo_id: string;
-    combo_timeout: number;
-  };
+    combo_base_num: number
+    combo_count: number
+    combo_id: string
+    combo_timeout: number
+  }
 }
 export interface SCInfo {
-  room_id: number; // 直播间id
-  uid: number; // 购买用户UID
-  open_id: string;
-  uname: string; // 购买的用户昵称
-  uface: string; // 购买用户头像
-  message_id: number; // 留言id(风控场景下撤回留言需要)
-  message: string; // 留言内容
-  msg_id: string; // 消息唯一id
-  rmb: number; // 支付金额(元)
-  timestamp: number; // 赠送时间秒级
-  start_time: number; // 生效开始时间
-  end_time: number; // 生效结束时间
-  guard_level: number; // 对应房间大航海登记    (新增)
-  fans_medal_level: number; // 对应房间勋章信息  (新增)
-  fans_medal_name: string; // 对应房间勋章名字  (新增)
-  fans_medal_wearing_status: boolean; // 该房间粉丝勋章佩戴情况   (新增)
+  room_id: number // 直播间id
+  uid: number // 购买用户UID
+  open_id: string
+  uname: string // 购买的用户昵称
+  uface: string // 购买用户头像
+  message_id: number // 留言id(风控场景下撤回留言需要)
+  message: string // 留言内容
+  msg_id: string // 消息唯一id
+  rmb: number // 支付金额(元)
+  timestamp: number // 赠送时间秒级
+  start_time: number // 生效开始时间
+  end_time: number // 生效结束时间
+  guard_level: number // 对应房间大航海登记    (新增)
+  fans_medal_level: number // 对应房间勋章信息  (新增)
+  fans_medal_name: string // 对应房间勋章名字  (新增)
+  fans_medal_wearing_status: boolean // 该房间粉丝勋章佩戴情况   (新增)
 }
 export interface GuardInfo {
   user_info: {
-    uid: number; // 用户uid
-    open_id: string;
-    uname: string; // 用户昵称
-    uface: string; // 用户头像
-  };
-  guard_level: number; // 对应的大航海等级 1总督 2提督 3舰长
-  guard_num: number;
-  price: number; // 购买金额(1000=1元)
-  guard_unit: string; // (个月)
-  fans_medal_level: number; // 粉丝勋章等级
-  fans_medal_name: string; // 粉丝勋章名
-  fans_medal_wearing_status: boolean; // 该房间粉丝勋章佩戴情况
-  timestamp: number;
-  room_id: number;
-  msg_id: string; // 消息唯一id
+    uid: number // 用户uid
+    open_id: string
+    uname: string // 用户昵称
+    uface: string // 用户头像
+  }
+  guard_level: number // 对应的大航海等级 1总督 2提督 3舰长
+  guard_num: number
+  price: number // 购买金额(1000=1元)
+  guard_unit: string // (个月)
+  fans_medal_level: number // 粉丝勋章等级
+  fans_medal_name: string // 粉丝勋章名
+  fans_medal_wearing_status: boolean // 该房间粉丝勋章佩戴情况
+  timestamp: number
+  room_id: number
+  msg_id: string // 消息唯一id
 }
 export interface EnterInfo {
-  open_id: string;
-  uname: string;
-  uface: string;
-  timestamp: number;
-  room_id: number;
+  open_id: string
+  uname: string
+  uface: string
+  timestamp: number
+  room_id: number
 }
 // 假设的 SC 删除事件原始信息结构 (需要根据实际情况调整)
 export interface SCDelInfo {
-  room_id: number;
-  message_ids: number[]; // 被删除的 SC 的 message_id
-  msg_id: string; // 删除操作的消息 ID
+  room_id: number
+  message_ids: number[] // 被删除的 SC 的 message_id
+  msg_id: string // 删除操作的消息 ID
 }
 export interface AuthInfo {
-  Timestamp: string;
-  Code: string;
-  Mid: string;
-  Caller: string;
-  CodeSign: string;
-}
\ No newline at end of file
+  Timestamp: string
+  Code: string
+  Mid: string
+  Caller: string
+  CodeSign: string
+}
diff --git a/src/data/DanmakuExport.ts b/src/data/DanmakuExport.ts
index 9bc5442..4120785 100644
--- a/src/data/DanmakuExport.ts
+++ b/src/data/DanmakuExport.ts
@@ -1,6 +1,7 @@
-import { AccountInfo, DanmakuModel, EventDataTypes, ResponseLiveInfoModel } from '@/api/api-models'
+import type { AccountInfo, DanmakuModel, ResponseLiveInfoModel } from '@/api/api-models'
 import { XMLBuilder } from 'fast-xml-parser'
 import { List } from 'linqts'
+import { EventDataTypes } from '@/api/api-models'
 
 const builder = new XMLBuilder({
   attributeNamePrefix: '@',
@@ -28,7 +29,7 @@ export function GetString(
     })
     .ToArray()
   const obj = {
-    live: live,
+    live,
     danmakus: tempDanmakus,
   }
   switch (type) {
diff --git a/src/data/Initializer.ts b/src/data/Initializer.ts
index a0819d8..73fcce1 100644
--- a/src/data/Initializer.ts
+++ b/src/data/Initializer.ts
@@ -1,13 +1,13 @@
-import { GetSelfAccount, UpdateAccountLoop, useAccount } from "@/api/account";
-import { QueryGetAPI } from "@/api/query";
-import { useBiliAuth } from "@/store/useBiliAuth";
-import { useNotificationStore } from "@/store/useNotificationStore";
-import { h } from "vue";
-import HyperDX from '@hyperdx/browser';
-import EasySpeech from "easy-speech";
-import { createDiscreteApi, NButton, NFlex, NText } from "naive-ui";
-import { apiFail, BASE_API_URL, isTauri } from "./constants";
-import { GetNotifactions } from "./notifactions";
+import HyperDX from '@hyperdx/browser'
+import EasySpeech from 'easy-speech'
+import { createDiscreteApi, NButton, NFlex, NText } from 'naive-ui'
+import { h } from 'vue'
+import { GetSelfAccount, UpdateAccountLoop, useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { useBiliAuth } from '@/store/useBiliAuth'
+import { useNotificationStore } from '@/store/useNotificationStore'
+import { apiFail, BASE_API_URL, isTauri } from './constants'
+import { GetNotifactions } from './notifactions'
 
 let currentVersion: string
 let isHaveNewVersion = false
@@ -16,37 +16,36 @@ const { notification } = createDiscreteApi(['notification'])
 
 export function InitVTsuru() {
   QueryGetAPI<string>(`${BASE_API_URL}vtsuru/version`)
-  .then((version) => {
-    if (version.code == 200) {
-      currentVersion = version.data
-      const savedVersion = localStorage.getItem('Version')
-      localStorage.setItem('Version', currentVersion)
+    .then((version) => {
+      if (version.code == 200) {
+        currentVersion = version.data
+        const savedVersion = localStorage.getItem('Version')
+        localStorage.setItem('Version', currentVersion)
 
-      if (currentVersion && savedVersion && savedVersion !== currentVersion) {
-        setTimeout(() => {
-          location.reload()
-        }, 1000)
-        // alert('发现新的版本更新, 请按 Ctrl+F5 强制刷新页面')
-        notification.info({
-          title: '发现新的版本更新',
-          content: '将自动刷新页面',
-          duration: 5000,
-          meta: () => h(NText, { depth: 3 }, () => currentVersion),
-        })
+        if (currentVersion && savedVersion && savedVersion !== currentVersion) {
+          setTimeout(() => {
+            location.reload()
+          }, 1000)
+          // alert('发现新的版本更新, 请按 Ctrl+F5 强制刷新页面')
+          notification.info({
+            title: '发现新的版本更新',
+            content: '将自动刷新页面',
+            duration: 5000,
+            meta: () => h(NText, { depth: 3 }, () => currentVersion),
+          })
+        } else {
+          InitVersionCheck()
+        }
       }
-      else {
-        InitVersionCheck();
-      }
-    }
-    InitOther();
-  })
-  .catch(() => {
-    apiFail.value = true
-    console.log('默认API调用失败, 切换至故障转移节点')
-  })
-  .finally(async () => {
+      InitOther()
+    })
+    .catch(() => {
+      apiFail.value = true
+      console.log('默认API调用失败, 切换至故障转移节点')
+    })
+    .finally(async () => {
 
-  })
+    })
 }
 
 async function InitOther() {
@@ -55,7 +54,7 @@ async function InitOther() {
       apiKey: '7d1eb66c-24b8-445e-a406-dc2329fa9423',
       service: 'vtsuru.live',
       tracePropagationTargets: [/vtsuru.suki.club/i], // Set to link traces from frontend to backend requests
-      //consoleCapture: true, // Capture console logs (default false)
+      // consoleCapture: true, // Capture console logs (default false)
       advancedNetworkCapture: true, // Capture full HTTP request/response headers and bodies (default false)
       ignoreUrls: [/localhost/i],
     })
@@ -98,8 +97,7 @@ function InitVersionCheck() {
 
           if (window.$route.meta.forceReload || isTauri()) {
             location.reload()
-          }
-          else {
+          } else {
             const n = notification.info({
               title: '发现新的版本更新',
               content: '是否现在刷新?',
@@ -140,12 +138,10 @@ function InitTTS() {
       EasySpeech.init({ maxTimeout: 5000, interval: 250 })
         .then(() => console.log('[SpeechSynthesis] 已加载tts服务'))
         .catch(e => console.error(e))
-    }
-    else {
+    } else {
       console.log('[SpeechSynthesis] 当前浏览器不支持tts服务')
     }
-  }
-  catch (e) {
+  } catch (e) {
     console.log('[SpeechSynthesis] 当前浏览器不支持tts服务')
   }
-}
\ No newline at end of file
+}
diff --git a/src/data/RTCClient.ts b/src/data/RTCClient.ts
index cc8f1d7..605d5c2 100644
--- a/src/data/RTCClient.ts
+++ b/src/data/RTCClient.ts
@@ -1,6 +1,6 @@
-import { useAccount } from '@/api/account'
+import type { DataConnection } from 'peerjs'
+import Peer from 'peerjs'
 import { useVTsuruHub } from '@/store/useVTsuruHub'
-import Peer, { DataConnection } from 'peerjs'
 
 export interface ComponentsEventHubModel {
   IsMaster: boolean
@@ -34,6 +34,9 @@ export abstract class BaseRTCClient {
 
   abstract type: 'master' | 'slave'
 
+  protected abstract connectRTC(): void
+  protected abstract processData(conn: DataConnection, data: RTCData): void
+
   public on(eventName: string, listener: (args: any) => void) {
     eventName = eventName.toLowerCase()
     if (!this.events[eventName]) {
@@ -53,89 +56,35 @@ export abstract class BaseRTCClient {
 
     this.send('VTsuru.RTCEvent.Off', eventName)
   }
+
   public send(eventName: string, data: any) {
-    this.connections.forEach((item) =>
-      item.send({
-        Key: eventName,
-        Data: data
-      })
-    )
+    this.connections.forEach((item) => {
+      if (item && item.open) {
+        item.send({
+          Key: eventName,
+          Data: data,
+        })
+      }
+    })
   }
 
-  protected connectRTC() {
-    //console.log('[Components-Event] 正在连接到 PeerJS 服务器...')
-    this.peer = new Peer({
-      host: 'peer.suki.club',
-      port: 443,
-      key: 'vtsuru',
-      secure: true,
-      config: {
-        iceServers: [
-          { url: 'stun:turn.suki.club' },
-          {
-            url: 'turn:turn.suki.club',
-            username: this.user,
-            credential: this.pass
-          }
-        ]
-      }
-      //debug: 3
-    })
-
-    this.peer?.on('open', async (id) => {
-      console.log('[Components-Event] 已连接到 PeerJS 服务器: ' + id)
-      this.vhub?.send('SetRTCToken', id, this.type == 'master')
-    })
-    this.peer?.on('error', (err) => {
-      console.error(err)
-    })
-    this.peer?.on('close', () => {
-      console.log('[Components-Event] PeerJS 连接已关闭')
-    })
-    this.peer?.on('disconnected', () => {
-      console.log('[Components-Event] PeerJS 连接已断开')
-      this.peer?.reconnect()
-    })
-  }
-  public processData(conn: DataConnection, data: RTCData) {
-    //console.log(data)
-    if (data.Key == 'Heartbeat') {
-      // 心跳
-      return
-    } else if (data.Key == 'VTsuru.RTCEvent.On') {
-      // 添加事件
-      this.handledEvents[conn.peer].push(data.Data)
-    } else if (data.Key == 'VTsuru.RTCEvent.Off') {
-      // 移除事件
-      const i = this.handledEvents[conn.peer].indexOf(data.Data)
-      if (i > -1) {
-        this.handledEvents[conn.peer].splice(i, 1)
-      }
-    } else if (this.events[data.Key.toLowerCase()]) {
-      this.events[data.Key].forEach((item) => item(data.Data))
-    }
-  }
-  public async getAllRTC() {
-    return (
-      (await this.vhub.invoke<ComponentsEventHubModel[]>('GetOnlineRTC')) || []
-    )
-  }
   protected onConnectionClose(id: string) {
-    this.connections = this.connections.filter((item) => item.peer != id)
+    this.connections = this.connections.filter(item => item && item.peer != id)
     delete this.handledEvents[id]
 
     console.log(
-      `[Components-Event] <${this.connections.length}> ${this.type == 'master' ? 'Slave' : 'Master'} 下线: ` +
-        id
+      `[Components-Event] <${this.connections.length}> ${this.type == 'master' ? 'Slave' : 'Master'} 下线: ${
+        id}`,
     )
   }
 
   public async Init() {
     if (!this.isInited) {
       this.isInited = true
-      await this.vhub.on('RTCOffline', (id: string) =>
+      await this.vhub.on('RTCOffline', (...args: unknown[]) => {
+        const id = args[0] as string
         this.onConnectionClose(id)
-      )
+      })
       this.connectRTC()
     }
     return this
@@ -146,21 +95,28 @@ export class SlaveRTCClient extends BaseRTCClient {
   constructor(user: string, pass: string) {
     super(user, pass)
   }
+
   type: 'slave' = 'slave' as const
+
+  protected async getAllRTC(): Promise<ComponentsEventHubModel[]> {
+    return await this.vhub.invoke<ComponentsEventHubModel[]>('GetAllRTC') || []
+  }
+
   public async connectToAllMaster() {
     const masters = (await this.getAllRTC()).filter(
-      (item) =>
-        item.IsMaster &&
-        item.Token != this.peer!.id &&
-        !this.connections.some((conn) => conn.peer == item.Token)
+      (item: ComponentsEventHubModel) =>
+        item.IsMaster
+        && item.Token != this.peer!.id
+        && !this.connections.some(conn => conn.peer == item.Token),
     )
-    masters.forEach((item) => {
+    masters.forEach((item: ComponentsEventHubModel) => {
       this.connectToMaster(item.Token)
-      //console.log('[Components-Event] 正在连接到现有 Master: ' + item.Token)
+      // console.log('[Components-Event] 正在连接到现有 Master: ' + item.Token)
     })
   }
+
   public connectToMaster(id: string) {
-    if (this.connections.some((conn) => conn.peer == id)) return
+    if (this.connections.some(conn => conn.peer == id)) return
     const c = this.peer?.connect(id)
     c?.on('open', () => {
       this.connections.push(c)
@@ -168,17 +124,53 @@ export class SlaveRTCClient extends BaseRTCClient {
       this.handledEvents[id] = []
 
       console.log(
-        `[Components-Event] <${this.connections.length}> ==> Master 连接已建立: ` +
-          id
+        `[Components-Event] <${this.connections.length}> ==> Master 连接已建立: ${
+          id}`,
       )
     })
-    c?.on('error', (err) => console.error(err))
-    c?.on('data', (data) => this.processData(c, data as RTCData))
+    c?.on('error', err => console.error(err))
+    c?.on('data', data => this.processData(c, data as RTCData))
     c?.on('close', () => this.onConnectionClose(c.peer))
   }
+
+  protected connectRTC(): void {
+    this.peer = new Peer()
+    this.peer.on('open', (id) => {
+      console.log('[Components-Event] Slave Peer ID:', id)
+      this.vhub.send('RegisterRTC', false, id)
+    })
+    this.peer.on('error', err => console.error('[Components-Event] Slave Peer Error:', err))
+  }
+
+  protected processData(conn: DataConnection, data: RTCData): void {
+    if (data.Key === 'VTsuru.RTCEvent.On') {
+      if (!this.handledEvents[conn.peer]) {
+        this.handledEvents[conn.peer] = []
+      }
+      if (!this.handledEvents[conn.peer].includes(data.Data)) {
+        this.handledEvents[conn.peer].push(data.Data)
+      }
+    } else if (data.Key === 'VTsuru.RTCEvent.Off') {
+      if (this.handledEvents[conn.peer]) {
+        const index = this.handledEvents[conn.peer].indexOf(data.Data)
+        if (index > -1) {
+          this.handledEvents[conn.peer].splice(index, 1)
+        }
+      }
+    } else {
+      const eventName = data.Key.toLowerCase()
+      if (this.events[eventName]) {
+        this.events[eventName].forEach(listener => listener(data.Data))
+      }
+    }
+  }
+
   public async Init() {
     await super.Init()
-    this.vhub?.on('MasterOnline', (data: string) => this.connectToMaster(data))
+    this.vhub?.on('MasterOnline', (...args: unknown[]) => {
+      const data = args[0] as string
+      this.connectToMaster(data)
+    })
     setTimeout(() => {
       this.connectToAllMaster()
     }, 500)
@@ -193,26 +185,55 @@ export class MasterRTCClient extends BaseRTCClient {
   constructor(user: string, pass: string) {
     super(user, pass)
   }
+
   type: 'master' = 'master' as const
 
-  public connectRTC() {
-    super.connectRTC()
+  protected connectRTC(): void {
     this.peer?.on('connection', (conn) => {
       conn.on('open', () => {
         this.connections.push(conn)
         this.handledEvents[conn.peer] = []
         console.log(
-          `[Components-Event] <${this.connections.length}> Slave 上线: ` +
-            conn.peer
+          `[Components-Event] <${this.connections.length}> Slave 上线: ${
+            conn.peer}`,
         )
       })
-      conn.on('data', (d) => this.processData(conn, d as RTCData))
-      conn.on('error', (err) => console.error(err))
+      conn.on('data', d => this.processData(conn, d as RTCData))
+      conn.on('error', err => console.error(err))
       conn.on('close', () => this.onConnectionClose(conn.peer))
     })
+
+    this.peer = new Peer()
+    this.peer.on('open', (id) => {
+      console.log('[Components-Event] Master Peer ID:', id)
+      this.vhub.send('RegisterRTC', true, id)
+    })
+    this.peer.on('error', err => console.error('[Components-Event] Master Peer Error:', err))
   }
 
-  public Init() {
+  protected processData(conn: DataConnection, data: RTCData): void {
+    if (data.Key === 'VTsuru.RTCEvent.On') {
+      if (!this.handledEvents[conn.peer]) {
+        this.handledEvents[conn.peer] = []
+      }
+      if (!this.handledEvents[conn.peer].includes(data.Data)) {
+        this.handledEvents[conn.peer].push(data.Data)
+      }
+    } else if (data.Key === 'VTsuru.RTCEvent.Off') {
+      if (this.handledEvents[conn.peer]) {
+        const index = this.handledEvents[conn.peer].indexOf(data.Data)
+        if (index > -1) {
+          this.handledEvents[conn.peer].splice(index, 1)
+        }
+      }
+    } else {
+      if (this.handledEvents[conn.peer]?.includes(data.Key.toLowerCase())) {
+        conn.send(data)
+      }
+    }
+  }
+
+  public async Init() {
     return super.Init()
   }
 }
diff --git a/src/data/TemplateTypes.ts b/src/data/TemplateTypes.ts
index 5aeeeb7..b65ab92 100644
--- a/src/data/TemplateTypes.ts
+++ b/src/data/TemplateTypes.ts
@@ -1,9 +1,9 @@
-import {
+import type {
   ScheduleWeekInfo,
   Setting_LiveRequest,
   SongRequestInfo,
   SongsInfo,
-  UserInfo
+  UserInfo,
 } from '@/api/api-models'
 
 export interface SongListConfigType {
diff --git a/src/data/UpdateNote.ts b/src/data/UpdateNote.ts
index c7a2df2..6944c0c 100644
--- a/src/data/UpdateNote.ts
+++ b/src/data/UpdateNote.ts
@@ -1,6 +1,6 @@
-import UpdateNoteContainer from "@/components/UpdateNoteContainer.vue";
-import { NButton, NImage } from "naive-ui";
-import { VNode } from "vue";
+import type { VNode } from 'vue'
+import { NButton, NImage } from 'naive-ui'
+import UpdateNoteContainer from '@/components/UpdateNoteContainer.vue'
 
 export const updateNotes: updateNoteType[] = [
   {
@@ -18,9 +18,9 @@ export const updateNotes: updateNoteType[] = [
             '现在支持为礼物附加key, 可以在兑换礼物之后自动选择一个附加到礼物内容中',
           ],
           [
-            '礼物页面样式优化'
-          ]
-        ]
+            '礼物页面样式优化',
+          ],
+        ],
       },
       {
         type: 'new',
@@ -33,10 +33,10 @@ export const updateNotes: updateNoteType[] = [
           [
             '签到功能增加仅签到功能, 可以只签到不给予积分, 修改设置项',
             () => h(NImage, { src: 'https://files.vtsuru.suki.club/updatelog/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-05-01%20080506.png', width: 300 }),
-          ]
-        ]
-      }
-    ]
+          ],
+        ],
+      },
+    ],
   },
   {
     ver: 6,
@@ -53,9 +53,13 @@ export const updateNotes: updateNoteType[] = [
           [
             '客户端安装方式:',
             () => h(NButton, {
-              text: true, tag: 'a', href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii', target: '_blank', type: 'info'
+              text: true,
+              tag: 'a',
+              href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii',
+              target: '_blank',
+              type: 'info',
             }, () => '查看介绍'),
-          ]
+          ],
         ],
       },
       {
@@ -64,10 +68,10 @@ export const updateNotes: updateNoteType[] = [
         content: [
           [
             '读弹幕现在支持进入直播间消息',
-          ]
-        ]
-      }
-    ]
+          ],
+        ],
+      },
+    ],
   },
   {
     ver: 5,
@@ -83,11 +87,11 @@ export const updateNotes: updateNoteType[] = [
           ],
           [
             '大部分功能都和 blivechat 一致, 不过目前还无法提供本地文件访问, 部分css中需要使用图片等本地资源样式的需要等 EventFetcher 更新相关功能后才能使用\r\n',
-            '配置上传之后会自动同步到obs中'
-          ]
+            '配置上传之后会自动同步到obs中',
+          ],
         ],
       },
-    ]
+    ],
   },
   {
     ver: 4,
@@ -106,12 +110,16 @@ export const updateNotes: updateNoteType[] = [
             '数据持久化存储，各类操作配置和运行状态不会丢失\r\n\r\n',
             '发送弹幕和私信需要客户端扫码登录, 客户端安装方式:',
             () => h(NButton, {
-              text: true, tag: 'a', href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii', target: '_blank', type: 'info'
+              text: true,
+              tag: 'a',
+              href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii',
+              target: '_blank',
+              type: 'info',
             }, () => '查看介绍'),
-          ]
+          ],
         ],
       },
-    ]
+    ],
   },
   {
     ver: 3,
@@ -125,10 +133,10 @@ export const updateNotes: updateNoteType[] = [
             'Tauri 客户端新增弹幕机功能, 可以在自己电脑上显示弹幕礼物等. ',
             '客户端需更新至0.1.2版本, 重启客户端后会自动更新',
             () => h(NImage, { src: 'https://pan.suki.club/d/vtsuru/imgur/81d76a89-96b8-44e9-be79-6caaa5741f64.png', width: 200 }),
-          ]
+          ],
         ],
       },
-    ]
+    ],
   },
   {
     ver: 2,
@@ -142,28 +150,40 @@ export const updateNotes: updateNoteType[] = [
           [
             '安装方式: ',
             () => h(NButton, {
-              text: true, tag: 'a', href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii', target: '_blank', type: 'info'
+              text: true,
+              tag: 'a',
+              href: 'https://www.wolai.com/carN6qvUm3FErze9Xo53ii',
+              target: '_blank',
+              type: 'info',
             }, () => '查看介绍'),
           ],
           [
-            '当前可能存在一些问题, 可以加入秋秋群 873260337 进行反馈, 有功能需求也可以提出'
+            '当前可能存在一些问题, 可以加入秋秋群 873260337 进行反馈, 有功能需求也可以提出',
           ],
           [],
           [
             '源码: ',
             () => h(NButton, {
-              text: true, tag: 'a', href: 'https://github.com/Megghy/vtsuru-fetvher-client', target: '_blank', type: 'info'
+              text: true,
+              tag: 'a',
+              href: 'https://github.com/Megghy/vtsuru-fetvher-client',
+              target: '_blank',
+              type: 'info',
             }, () => ' 客户端 Repo '),
             ' | ',
             () => h(NButton, {
-              text: true, tag: 'a', href: 'https://github.com/Megghy/vtsuru.live/tree/master/src/client', target: '_blank', type: 'info'
+              text: true,
+              tag: 'a',
+              href: 'https://github.com/Megghy/vtsuru.live/tree/master/src/client',
+              target: '_blank',
+              type: 'info',
             }, () => ' UI/逻辑 '),
           ],
           [
             () => h(NImage, { src: 'https://pan.suki.club/d/vtsuru/imgur/01295402D7FBBF192FE5608179A4A7A6.png', width: 200 }),
-          ]
-        ]
-      }
+          ],
+        ],
+      },
     ],
   },
   {
@@ -177,16 +197,16 @@ export const updateNotes: updateNoteType[] = [
           [
             '新增一个歌单样式: 列表',
             () => h(NImage, { src: 'https://pan.suki.club/d/vtsuru/imgur/QQ20250408-134631.png', width: 300, height: 200 }),
-          ]
+          ],
         ],
       },
     ],
   },
-];
+]
 
-export const currentUpdateNoteVer = updateNotes.sort((a, b) => b.ver - a.ver)[0].ver;
-export const currentUpdateNote = updateNotes.sort((a, b) => b.ver - a.ver)[0].items;
-export const savedUpdateNoteVer = useStorage('UpdateNoteVer', 0);
+export const currentUpdateNoteVer = updateNotes.sort((a, b) => b.ver - a.ver)[0].ver
+export const currentUpdateNote = updateNotes.sort((a, b) => b.ver - a.ver)[0].items
+export const savedUpdateNoteVer = useStorage('UpdateNoteVer', 0)
 
 export function checkUpdateNote() {
   if (savedUpdateNoteVer.value < currentUpdateNoteVer) {
@@ -200,24 +220,24 @@ export function checkUpdateNote() {
       negativeText: '确定',
       positiveText: '下次更新前不再提示',
       onPositiveClick: () => {
-        savedUpdateNoteVer.value = currentUpdateNoteVer;
+        savedUpdateNoteVer.value = currentUpdateNoteVer
       },
       onClose: () => {
-        savedUpdateNoteVer.value = currentUpdateNoteVer;
-      }
-    });
+        savedUpdateNoteVer.value = currentUpdateNoteVer
+      },
+    })
   }
 }
 
-export type updateType = 'fix' | 'new' | 'optimize' | 'other';
-export type updateNoteType = {
-  ver: number;
-  date: string;
-  items: updateNoteItemType[];
-};
-export type updateNoteItemType = {
-  title?: string | (() => VNode);
-  type: updateType;
-  content: updateNoteItemContentType[];
-};
-export type updateNoteItemContentType = (() => VNode) | string | updateNoteItemContentType[];
\ No newline at end of file
+export type updateType = 'fix' | 'new' | 'optimize' | 'other'
+export interface updateNoteType {
+  ver: number
+  date: string
+  items: updateNoteItemType[]
+}
+export interface updateNoteItemType {
+  title?: string | (() => VNode)
+  type: updateType
+  content: updateNoteItemContentType[]
+}
+export type updateNoteItemContentType = (() => VNode) | string | updateNoteItemContentType[]
diff --git a/src/data/VTsuruConfigTypes.ts b/src/data/VTsuruConfigTypes.ts
index 0531c3f..54b07dc 100644
--- a/src/data/VTsuruConfigTypes.ts
+++ b/src/data/VTsuruConfigTypes.ts
@@ -1,25 +1,26 @@
-import { UploadFileResponse } from '@/api/api-models';
-import { SelectOption } from 'naive-ui';
-import { VNode, h } from 'vue'; // 导入 Vue 的 VNode 类型和 h 函数（用于示例）
+import type { SelectOption } from 'naive-ui'
+import type { VNode } from 'vue'
+// 导入 Vue 的 VNode 类型和 h 函数（用于示例）
+import type { UploadFileResponse } from '@/api/api-models'
 
 // --- 基础和通用类型 ---
 
 interface TemplateConfigBase {
-  name: string | VNode; // 名称，可以是字符串或 VNode
-  key: string;         // 唯一标识符，用于数据对象的键
+  name: string | VNode // 名称，可以是字符串或 VNode
+  key: string // 唯一标识符，用于数据对象的键
   /**
    * 可选的默认值。
    * 其具体类型在更具体的项类型中被细化。
    * TemplateConfigRenderItem 会使用其是否存在来进行类型推断。
    */
-  default?: any;
+  default?: any
   /**
    * 可选的条件显示属性
    * 根据一个函数决定当前配置项是否可见
    * @param config 整个配置对象
    * @returns 是否显示此配置项
    */
-  visibleWhen?: (config: any) => boolean;
+  visibleWhen?: (config: any) => boolean
 }
 
 // 大多数项类型共享的通用属性 (暂时排除 RenderItem)
@@ -32,43 +33,43 @@ type CommonProps<T = unknown> = TemplateConfigBase & {
   // 通常会是 'unknown' 类型。如果在实现中需要访问
   // 完整配置对象的特定属性，你可能需要进行类型断言
   // (例如：config as MyConfigType)。
-};
+}
 
 // 数据访问器类型
-type DataAccessor<T, V> = {
-  get: (config: T) => V;
-  set: (config: T, value: V) => void;
-};
+interface DataAccessor<T, V> {
+  get: (config: T) => V
+  set: (config: T, value: V) => void
+}
 
 // 添加辅助函数，用于从配置对象中安全获取数据
 export function getConfigValue<T, K extends keyof T>(config: T, key: K): T[K] {
-  return config[key];
+  return config[key]
 }
 
 // 添加辅助函数，用于设置配置对象的数据
 export function setConfigValue<T, K extends keyof T>(config: T, key: K, value: T[K]): void {
-  config[key] = value;
+  config[key] = value
 }
 
 // 创建一个默认的RGBA颜色对象
 export function createDefaultRGBA(r = 0, g = 0, b = 0, a = 1): RGBAColor {
-  return { r, g, b, a };
+  return { r, g, b, a }
 }
 
 // 添加类型守卫函数，用于检查上传文件信息
 export function isUploadFileInfo(obj: any): obj is UploadFileResponse {
   return (
-    obj &&
-    typeof obj === 'object' &&
-    'id' in obj &&
-    typeof obj.id === 'number' &&
-    'path' in obj &&
-    typeof obj.path === 'string' &&
-    'name' in obj &&
-    typeof obj.name === 'string' &&
-    'hash' in obj &&
-    typeof obj.hash === 'string'
-  );
+    obj
+    && typeof obj === 'object'
+    && 'id' in obj
+    && typeof obj.id === 'number'
+    && 'path' in obj
+    && typeof obj.path === 'string'
+    && 'name' in obj
+    && typeof obj.name === 'string'
+    && 'hash' in obj
+    && typeof obj.hash === 'string'
+  )
 }
 
 /**
@@ -77,102 +78,101 @@ export function isUploadFileInfo(obj: any): obj is UploadFileResponse {
  * @template V - 此特定配置项的值的类型。
  */
 export type TemplateConfigItemWithType<T = unknown, V = unknown> = CommonProps<T> & {
-  type: string; // 类型判别属性
-  data?: DataAccessor<T, V>; // 可选的数据访问器
+  type: string // 类型判别属性
+  data?: DataAccessor<T, V> // 可选的数据访问器
   /**
    * @description 可选的上传/更新回调函数。
    * @param data - 当前项更新的数据，类型为 V。
    * @param config - 整个配置数据对象，类型为 T (通常是 unknown)。
    */
-  onUploaded?: (data: V, config: T) => void;
+  onUploaded?: (data: V, config: T) => void
   /**
    * 可选的默认值，约束为类型 V。
    * 覆盖了 TemplateConfigBase 中的 'any' 类型。
    */
-  default?: V;
-};
+  default?: V
+}
 
 // --- Widen 工具类型 (保持不变) ---
 // 递归地将类型拓宽为其基础类型。
-type Widen<T> =
-  T extends string ? string :
-  T extends number ? number :
-  T extends boolean ? boolean :
-  T extends bigint ? bigint :
-  T extends symbol ? symbol :
-  T extends undefined ? undefined :
-  T extends null ? null :
-  T extends Function ? T :
-  T extends Date ? Date :
-  T extends readonly (infer U)[] ? Widen<U>[] :
-  T extends object ? { -readonly [K in keyof T]: Widen<T[K]> } :
-  T;
+type Widen<T>
+  = T extends string ? string
+    : T extends number ? number
+      : T extends boolean ? boolean
+        : T extends bigint ? bigint
+          : T extends symbol ? symbol
+            : T extends undefined ? undefined
+              : T extends null ? null
+                : T extends Function ? T
+                  : T extends Date ? Date
+                    : T extends readonly (infer U)[] ? Widen<U>[]
+                      : T extends object ? { -readonly [K in keyof T]: Widen<T[K]> }
+                        : T
 
 // --- 具体配置项类型定义 ---
 // T 在所有具体类型中默认为 unknown
 
-
 export type TemplateConfigSelectItem<T = unknown> = TemplateConfigItemWithType<T, string> & {
-  type: 'select';
-  options: SelectOption[] | ((config: T) => SelectOption[]); // 选项列表或者返回选项列表的函数
-  placeholder?: string; // 可选的占位符
-  clearable?: boolean;  // 是否可清空
-};
+  type: 'select'
+  options: SelectOption[] | ((config: T) => SelectOption[]) // 选项列表或者返回选项列表的函数
+  placeholder?: string // 可选的占位符
+  clearable?: boolean // 是否可清空
+}
 
 export type TemplateConfigStringItem<T = unknown> = TemplateConfigItemWithType<T, string> & {
-  type: 'string';
-  placeholder?: string; // 可选的占位符
-  inputType?: 'text' | 'password' | 'textarea'; // 可选的输入类型
-};
+  type: 'string'
+  placeholder?: string // 可选的占位符
+  inputType?: 'text' | 'password' | 'textarea' // 可选的输入类型
+}
 
 export type TemplateConfigStringArrayItem<T = unknown> = TemplateConfigItemWithType<T, string[]> & {
-  type: 'stringArray';
-};
+  type: 'stringArray'
+}
 
 export type TemplateConfigNumberItem<T = unknown> = TemplateConfigItemWithType<T, number> & {
-  type: 'number';
-  min?: number;
-  max?: number;
+  type: 'number'
+  min?: number
+  max?: number
 
-};
+}
 
 // RGBA颜色对象接口
 export interface RGBAColor {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
+  r: number
+  g: number
+  b: number
+  a: number
 }
 
 // 修改 TemplateConfigColorItem 以使用 RGBAColor 接口
 export type TemplateConfigColorItem<T = unknown> = TemplateConfigItemWithType<T, RGBAColor> & {
-  type: 'color';
-  showAlpha?: boolean; // 控制是否显示透明度调整
-};
+  type: 'color'
+  showAlpha?: boolean // 控制是否显示透明度调整
+}
 
 export type TemplateConfigSliderNumberItem<T = unknown> = TemplateConfigItemWithType<T, number> & {
-  type: 'sliderNumber';
-  step?: number;
-  min?: number;
-  max?: number;
-};
+  type: 'sliderNumber'
+  step?: number
+  min?: number
+  max?: number
+}
 
 export type TemplateConfigNumberArrayItem<T = unknown> = TemplateConfigItemWithType<T, number[]> & {
-  type: 'numberArray';
-};
+  type: 'numberArray'
+}
 export type TemplateConfigBooleanItem<T = unknown> = TemplateConfigItemWithType<T, boolean> & {
-  type: 'boolean';
-  description?: string; // 可选的描述
-};
+  type: 'boolean'
+  description?: string // 可选的描述
+}
 
 // 将文件类型统一为数组，不再根据fileLimit区分
-export type TemplateConfigFileItem<T = unknown> =
-  TemplateConfigItemWithType<T, UploadFileResponse[]> & {
-    type: 'file';
-    fileLimit?: number; // 变为可选参数，仅用于UI限制，不影响类型
-    fileType?: string[];
-    onUploaded?: (data: UploadFileResponse[], config: T) => void;
-  };
+export type TemplateConfigFileItem<T = unknown>
+  = TemplateConfigItemWithType<T, UploadFileResponse[]> & {
+    type: 'file'
+    fileLimit?: number // 变为可选参数，仅用于UI限制，不影响类型
+    fileType?: string[]
+    onUploaded?: (data: UploadFileResponse[], config: T) => void
+  }
 
 // --- 新增：装饰性图片配置 ---
 
@@ -180,13 +180,13 @@ export type TemplateConfigFileItem<T = unknown> =
  * @description 单个装饰图片的属性接口
  */
 export interface DecorativeImageProperties extends UploadFileResponse {
-  x: number;         // X 坐标 (%)
-  y: number;         // Y 坐标 (%)
-  width: number;     // 宽度 (%)
+  x: number // X 坐标 (%)
+  y: number // Y 坐标 (%)
+  width: number // 宽度 (%)
   // height: number; // 高度通常由宽度和图片比例决定，或设为 auto
-  rotation: number;  // 旋转角度 (deg)
-  opacity: number;   // 透明度 (0-1)
-  zIndex: number;    // 层叠顺序
+  rotation: number // 旋转角度 (deg)
+  opacity: number // 透明度 (0-1)
+  zIndex: number // 层叠顺序
 }
 
 /**
@@ -195,22 +195,22 @@ export interface DecorativeImageProperties extends UploadFileResponse {
  * @template T - 完整配置对象的类型 (默认为 unknown)。
  */
 export interface TemplateConfigDecorativeImagesItem<T = unknown> extends TemplateConfigBase {
-  type: 'decorativeImages'; // 新类型标识符
-  default?: DecorativeImageProperties[]; // 默认值是图片属性数组
+  type: 'decorativeImages' // 新类型标识符
+  default?: DecorativeImageProperties[] // 默认值是图片属性数组
 
   /**
    * @description 渲染此项的自定义 VNode (配置 UI)。
    * @param config 整个配置对象 (类型为 T, 默认为 unknown)。
    * @returns 表示配置 UI 的 VNode。
    */
-  render?(config: T): VNode;
+  render?: (config: T) => VNode
 
   /**
    * @description 当装饰图片数组更新时调用的回调。
    * @param data 更新后的 DecorativeImageProperties 数组。
    * @param config 整个配置对象。
    */
-  onUploaded?(data: DecorativeImageProperties[], config: T): void; // data 类型是数组
+  onUploaded?: (data: DecorativeImageProperties[], config: T) => void // data 类型是数组
 
   // 继承 TemplateConfigBase 的 default?: any
 }
@@ -220,7 +220,7 @@ export interface TemplateConfigDecorativeImagesItem<T = unknown> extends Templat
  * @template T - 完整配置对象的类型 (默认为 unknown)。
  */
 export interface TemplateConfigRenderItem<T = unknown> extends TemplateConfigBase { // 继承基础接口以获取 key, name, default 检查
-  type: 'render';
+  type: 'render'
 
   /**
    * @description 渲染此项的自定义 VNode。
@@ -236,7 +236,7 @@ export interface TemplateConfigRenderItem<T = unknown> extends TemplateConfigBas
    *                 作为第二个参数传递。如果不存在 `default`，则传递 `undefined` 或 `null`。
    *                 示例: `item.render(config, item.default)`
    */
-  render(this: this, config: T): VNode;
+  render: (this: this, config: T) => VNode
 
   /**
    * @description 可选的回调函数，当自定义渲染的组件发出更新信号时调用。
@@ -245,7 +245,7 @@ export interface TemplateConfigRenderItem<T = unknown> extends TemplateConfigBas
    * @param config 整个配置对象 (类型为 T, 默认为 unknown)。
    *               在实现内部可能需要类型断言 (例如 `config as MyConfig`)。
    */
-  onUploaded?(this: this, data: this extends { default: infer D; } ? Widen<D> : unknown, config: T): void;
+  onUploaded?: (this: this, data: this extends { default: infer D } ? Widen<D> : unknown, config: T) => void
 
   // 继承自 TemplateConfigBase 的 'default?: any'，这对于
   // 'this extends { default: infer D }' 类型检查能正确工作至关重要。
@@ -257,51 +257,50 @@ export interface TemplateConfigRenderItem<T = unknown> extends TemplateConfigBas
  * @description 所有可能的配置项定义类型的联合类型。
  * 使用 `<any>` 作为完整配置类型 T 的占位符。
  */
-export type ConfigItemDefinition =
-  | TemplateConfigStringItem<any>
-  | TemplateConfigNumberItem<any>
-  | TemplateConfigStringArrayItem<any>
-  | TemplateConfigNumberArrayItem<any>
-  | TemplateConfigFileItem<any>
-  | TemplateConfigRenderItem<any>
-  | TemplateConfigDecorativeImagesItem<any>
-  | TemplateConfigSliderNumberItem<any>
-  | TemplateConfigBooleanItem<any>
-  | TemplateConfigColorItem<any>
-  | TemplateConfigSelectItem<any>;
+export type ConfigItemDefinition
+  = | TemplateConfigStringItem<any>
+    | TemplateConfigNumberItem<any>
+    | TemplateConfigStringArrayItem<any>
+    | TemplateConfigNumberArrayItem<any>
+    | TemplateConfigFileItem<any>
+    | TemplateConfigRenderItem<any>
+    | TemplateConfigDecorativeImagesItem<any>
+    | TemplateConfigSliderNumberItem<any>
+    | TemplateConfigBooleanItem<any>
+    | TemplateConfigColorItem<any>
+    | TemplateConfigSelectItem<any>
 
 /**
  * @description 从只读的配置项数组中提取最终的数据结构类型。
  * @template Items - 通过 `defineItems([...])` 推断出的只读元组类型。
  */
 export type ExtractConfigData<
-  Items extends readonly ConfigItemDefinition[]
+  Items extends readonly ConfigItemDefinition[],
 > = {
-    // 遍历联合类型 Items[number] 中所有项的 'key' 属性
-    [K in Extract<Items[number], { key: string; }>['key']]:
-    // 找到与当前键 K 匹配的具体项定义
-    Extract<Items[number], { key: K; }> extends infer ItemWithKeyK
+  // 遍历联合类型 Items[number] 中所有项的 'key' 属性
+  [K in Extract<Items[number], { key: string }>['key']]:
+  // 找到与当前键 K 匹配的具体项定义
+  Extract<Items[number], { key: K }> extends infer ItemWithKeyK
     // 检查匹配到的项是否有 'default' 属性
-    ? ItemWithKeyK extends { default: infer DefaultType; }
+    ? ItemWithKeyK extends { default: infer DefaultType }
     // 如果有，使用 default 值的 Widen 处理后的类型
-    ? Widen<DefaultType>
+      ? Widen<DefaultType>
     // 如果没有 default，则根据 'type' 属性确定类型
-    : ItemWithKeyK extends { type: 'string' | 'select'; } ? string
-    : ItemWithKeyK extends { type: 'stringArray'; } ? string[]
-    : ItemWithKeyK extends { type: 'number' | 'sliderNumber' ; } ? number
-    : ItemWithKeyK extends { type: 'numberArray'; } ? number[]
-    // 文件类型统一处理为数组
-    : ItemWithKeyK extends { type: 'file'; } ? UploadFileResponse[]
-    : ItemWithKeyK extends { type: 'boolean'; } ? boolean
-    : ItemWithKeyK extends { type: 'color'; } ? RGBAColor
-    : ItemWithKeyK extends { type: 'decorativeImages'; } ? DecorativeImageProperties[]
-    // *** 优化应用：无 default 的 render 类型回退到 'unknown' ***
-    : ItemWithKeyK extends { type: 'render'; } ? unknown
-    // 其他意外情况的回退类型
-    : unknown
+      : ItemWithKeyK extends { type: 'string' | 'select' } ? string
+        : ItemWithKeyK extends { type: 'stringArray' } ? string[]
+          : ItemWithKeyK extends { type: 'number' | 'sliderNumber' } ? number
+            : ItemWithKeyK extends { type: 'numberArray' } ? number[]
+            // 文件类型统一处理为数组
+              : ItemWithKeyK extends { type: 'file' } ? UploadFileResponse[]
+                : ItemWithKeyK extends { type: 'boolean' } ? boolean
+                  : ItemWithKeyK extends { type: 'color' } ? RGBAColor
+                    : ItemWithKeyK extends { type: 'decorativeImages' } ? DecorativeImageProperties[]
+                    // *** 优化应用：无 default 的 render 类型回退到 'unknown' ***
+                      : ItemWithKeyK extends { type: 'render' } ? unknown
+                      // 其他意外情况的回退类型
+                        : unknown
     : never // 如果 K 正确派生，则不应发生
-  };
-
+}
 
 // --- Key 约束辅助类型 ---
 /**
@@ -310,20 +309,20 @@ export type ExtractConfigData<
  * - 其他type的key禁止以'File'结尾。
  * @template Item - 待检查的配置项定义类型。
  */
-type ConstrainedKeyItem<Item extends ConfigItemDefinition> =
-    // 所有包含UploadFileInfo的类型必须以'File'结尾
-    Item extends { type: 'file' } | { type: 'decorativeImages' }
-        // 强制key以'File'结尾
-        ? Omit<Item, 'key'> & { key: `${string}File` }
-        : Item extends { key: infer K extends string }
-            // 对于其它类型，检查key是否以'File'结尾
-            ? K extends `${string}File`
-                // 如果以'File'结尾，则类型无效(never)，导致TypeScript报错
-                ? never
-                // 如果不以'File'结尾，则类型有效
-                : Item
-            // 如果Item没有key属性(理论上不应发生)，保持原样
-            : Item;
+type ConstrainedKeyItem<Item extends ConfigItemDefinition>
+// 所有包含UploadFileInfo的类型必须以'File'结尾
+  = Item extends { type: 'file' } | { type: 'decorativeImages' }
+  // 强制key以'File'结尾
+    ? Omit<Item, 'key'> & { key: `${string}File` }
+    : Item extends { key: infer K extends string }
+    // 对于其它类型，检查key是否以'File'结尾
+      ? K extends `${string}File`
+      // 如果以'File'结尾，则类型无效(never)，导致TypeScript报错
+        ? never
+      // 如果不以'File'结尾，则类型有效
+        : Item
+    // 如果Item没有key属性(理论上不应发生)，保持原样
+      : Item
 
 /**
  * @description 定义并验证配置项数组。
@@ -334,28 +333,28 @@ type ConstrainedKeyItem<Item extends ConfigItemDefinition> =
  * @returns 类型被保留且经过验证的同一个只读数组。
  */
 export function defineTemplateConfig<
-    // 应用 ConstrainedKeyItem 约束到数组的每个元素
-    const Items extends readonly ConstrainedKeyItem<ConfigItemDefinition>[]
+  // 应用 ConstrainedKeyItem 约束到数组的每个元素
+  const Items extends readonly ConstrainedKeyItem<ConfigItemDefinition>[],
 >(items: Items): Items {
-    // 可选的运行时验证，用于在浏览器控制台提供更友好的错误提示
-    items.forEach(item => {
-      // 类型守卫确保 item 有 key 和 type 属性
-      if ('key' in item && typeof item.key === 'string' && 'type' in item && typeof item.type === 'string') {
-        // 检查是否是需要File后缀的类型
-        const requiresFileSuffix = item.type === 'file' || item.type === 'decorativeImages';
+  // 可选的运行时验证，用于在浏览器控制台提供更友好的错误提示
+  items.forEach((item) => {
+    // 类型守卫确保 item 有 key 和 type 属性
+    if ('key' in item && typeof item.key === 'string' && 'type' in item && typeof item.type === 'string') {
+      // 检查是否是需要File后缀的类型
+      const requiresFileSuffix = item.type === 'file' || item.type === 'decorativeImages'
 
-        if (requiresFileSuffix) {
-            if (!item.key.endsWith('File')) {
-                console.error(`类型错误: 配置项 "${item.key}" 类型为 '${item.type}' 但 key 未以 'File' 结尾。`);
-            }
-        } else {
-            if (item.key.endsWith('File')) {
-                console.error(`类型错误: 配置项 "${item.key}" 类型为 '${item.type}' 但 key 以 'File' 结尾。`);
-            }
+      if (requiresFileSuffix) {
+        if (!item.key.endsWith('File')) {
+          console.error(`类型错误: 配置项 "${item.key}" 类型为 '${item.type}' 但 key 未以 'File' 结尾。`)
+        }
+      } else {
+        if (item.key.endsWith('File')) {
+          console.error(`类型错误: 配置项 "${item.key}" 类型为 '${item.type}' 但 key 以 'File' 结尾。`)
         }
       }
-    });
-    return items;
+    }
+  })
+  return items
 }
 
 // --- 增强型工具类型 ---
@@ -363,27 +362,27 @@ export function defineTemplateConfig<
 /**
  * 确保数值在指定范围内的工具类型
  */
-export type NumericRange<Min extends number, Max extends number> =
-  number extends Min ? number :
-  number extends Max ? number :
-  Min | Max | Exclude<number, Min | Max>;
+export type NumericRange<Min extends number, Max extends number>
+  = number extends Min ? number
+    : number extends Max ? number
+      : Min | Max | Exclude<number, Min | Max>
 
 /**
  * 非空数组工具类型
  */
-export type NonEmptyArray<T> = [T, ...T[]];
+export type NonEmptyArray<T> = [T, ...T[]]
 
 // --- 改进 rgbaToString 函数，添加更严格的类型检查 ---
 export function rgbaToString(color: RGBAColor | undefined | null): string {
-  if (!color) return 'rgba(0,0,0,0)';
+  if (!color) return 'rgba(0,0,0,0)'
 
   // 额外的类型安全检查
-  const r = Math.min(255, Math.max(0, Math.round(color.r)));
-  const g = Math.min(255, Math.max(0, Math.round(color.g)));
-  const b = Math.min(255, Math.max(0, Math.round(color.b)));
-  const a = Math.min(1, Math.max(0, color.a));
+  const r = Math.min(255, Math.max(0, Math.round(color.r)))
+  const g = Math.min(255, Math.max(0, Math.round(color.g)))
+  const b = Math.min(255, Math.max(0, Math.round(color.b)))
+  const a = Math.min(1, Math.max(0, color.a))
 
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
+  return `rgba(${r}, ${g}, ${b}, ${a})`
 }
 
 /**
@@ -392,30 +391,30 @@ export function rgbaToString(color: RGBAColor | undefined | null): string {
  * @returns 创建配置对象的工厂函数
  */
 export function createTemplateConfigFactory<const Items extends readonly ConstrainedKeyItem<ConfigItemDefinition>[]>(
-  items: Items
+  items: Items,
 ) {
   // 返回一个工厂函数，用于创建初始化的配置对象
   return (): ExtractConfigData<Items> => {
-    const config = {} as ExtractConfigData<Items>;
+    const config = {} as ExtractConfigData<Items>
 
     // 使用项定义中的默认值初始化配置对象
     for (const item of items) {
       if ('default' in item && item.default !== undefined) {
         if (typeof config === 'object' && item.key) {
           // @ts-ignore - 动态赋值
-          config[item.key] = item.default;
+          config[item.key] = item.default
         }
       }
     }
 
-    return config;
-  };
+    return config
+  }
 }
 
 /**
  * 模板配置校验函数类型
  */
-export type TemplateConfigValidator<T> = (config: T) => { valid: boolean; message?: string };
+export type TemplateConfigValidator<T> = (config: T) => { valid: boolean, message?: string }
 
 /**
  * 创建配置验证器
@@ -423,7 +422,7 @@ export type TemplateConfigValidator<T> = (config: T) => { valid: boolean; messag
  * @returns 验证器函数
  */
 export function createConfigValidator<T>(validator: TemplateConfigValidator<T>) {
-  return validator;
+  return validator
 }
 
 /**
@@ -431,11 +430,11 @@ export function createConfigValidator<T>(validator: TemplateConfigValidator<T>)
  */
 export function isValidRGBAColor(obj: any): obj is RGBAColor {
   return (
-    obj &&
-    typeof obj === 'object' &&
-    'r' in obj && typeof obj.r === 'number' &&
-    'g' in obj && typeof obj.g === 'number' &&
-    'b' in obj && typeof obj.b === 'number' &&
-    'a' in obj && typeof obj.a === 'number'
-  );
-}
\ No newline at end of file
+    obj
+    && typeof obj === 'object'
+    && 'r' in obj && typeof obj.r === 'number'
+    && 'g' in obj && typeof obj.g === 'number'
+    && 'b' in obj && typeof obj.b === 'number'
+    && 'a' in obj && typeof obj.a === 'number'
+  )
+}
diff --git a/src/data/chat/models.js b/src/data/chat/models.js
index 19877c5..eaecf57 100644
--- a/src/data/chat/models.js
+++ b/src/data/chat/models.js
@@ -1,8 +1,8 @@
-import { getUuid4Hex } from '../../views/obs/blivechat/utils'
 import * as constants from '../../views/obs/blivechat/constants'
+import { getUuid4Hex } from '../../views/obs/blivechat/utils'
 
 export function getDefaultMsgHandler() {
-  let dummyFunc = () => {}
+  const dummyFunc = () => {}
   return {
     onAddText: dummyFunc,
     onAddGift: dummyFunc,
@@ -12,12 +12,12 @@ export function getDefaultMsgHandler() {
     onUpdateTranslation: dummyFunc,
 
     onFatalError: dummyFunc,
-    onDebugMsg: dummyFunc
+    onDebugMsg: dummyFunc,
   }
 }
 
-export const DEFAULT_AVATAR_URL =
-  'https://i0.hdslb.com/bfs/face/member/noface.jpg@64w_64h'
+export const DEFAULT_AVATAR_URL
+  = 'https://i0.hdslb.com/bfs/face/member/noface.jpg@64w_64h'
 
 export class AddTextMsg {
   constructor({
@@ -34,7 +34,7 @@ export class AddTextMsg {
     medalLevel = 0,
     id = getUuid4Hex(),
     translation = '',
-    emoticon = null
+    emoticon = null,
   } = {}) {
     this.avatarUrl = avatarUrl
     this.timestamp = timestamp
@@ -62,7 +62,7 @@ export class AddGiftMsg {
     totalCoin = 0,
     totalFreeCoin = 0,
     giftName = '',
-    num = 1
+    num = 1,
   } = {}) {
     this.id = id
     this.avatarUrl = avatarUrl
@@ -81,7 +81,7 @@ export class AddMemberMsg {
     avatarUrl = DEFAULT_AVATAR_URL,
     timestamp = new Date().getTime() / 1000,
     authorName = '',
-    privilegeType = 1
+    privilegeType = 1,
   } = {}) {
     this.id = id
     this.avatarUrl = avatarUrl
@@ -99,7 +99,7 @@ export class AddSuperChatMsg {
     authorName = '',
     price = 0,
     content = '',
-    translation = ''
+    translation = '',
   } = {}) {
     this.id = id
     this.avatarUrl = avatarUrl
@@ -142,7 +142,7 @@ export class DebugMsg {
 }
 export function processAvatarUrl(avatarUrl) {
   // 去掉协议，兼容HTTP、HTTPS
-  let m = avatarUrl.match(/(?:https?:)?(.*)/)
+  const m = avatarUrl.match(/(?:https?:)?(.*)/)
   if (m) {
     avatarUrl = m[1]
   }
diff --git a/src/data/constants.ts b/src/data/constants.ts
index 756c16f..2e0caf6 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -1,134 +1,134 @@
-import DefaultIndexTemplateVue from '@/views/view/indexTemplate/DefaultIndexTemplate.vue';
-import { defineAsyncComponent, ref, markRaw } from 'vue';
+import { defineAsyncComponent, markRaw, ref } from 'vue'
+import DefaultIndexTemplateVue from '@/views/view/indexTemplate/DefaultIndexTemplate.vue'
 
-const debugAPI =
-  import.meta.env.VITE_API == 'dev'
+const debugAPI
+  = import.meta.env.VITE_API == 'dev'
     ? import.meta.env.VITE_DEBUG_DEV_API
-    : import.meta.env.VITE_DEBUG_RELEASE_API;
-const releseAPI = `https://vtsuru.suki.club/`;
-const failoverAPI = `https://failover-api.vtsuru.suki.club/`;
+    : import.meta.env.VITE_DEBUG_RELEASE_API
+const releseAPI = `https://vtsuru.suki.club/`
+const failoverAPI = `https://failover-api.vtsuru.suki.club/`
 
-export const isBackendUsable = ref(true);
-export const isDev = import.meta.env.MODE === 'development';
+export const isBackendUsable = ref(true)
+export const isDev = import.meta.env.MODE === 'development'
 // @ts-ignore
-export const isTauri = () => window.__TAURI__ !== undefined || window.__TAURI_INTERNAL__ !== undefined || '__TAURI__' in window;
+export const isTauri = () => window.__TAURI__ !== undefined || window.__TAURI_INTERNAL__ !== undefined || '__TAURI__' in window
 
-export const AVATAR_URL = 'https://workers.vrp.moe/api/bilibili/avatar/';
-export const FILE_BASE_URL = 'https://files.vtsuru.suki.club';
-export const IMGUR_URL = FILE_BASE_URL + '/imgur/';
-export const THINGS_URL = FILE_BASE_URL + '/things/';
-export const apiFail = ref(false);
+export const AVATAR_URL = 'https://workers.vrp.moe/api/bilibili/avatar/'
+export const FILE_BASE_URL = 'https://files.vtsuru.suki.club'
+export const IMGUR_URL = `${FILE_BASE_URL}/imgur/`
+export const THINGS_URL = `${FILE_BASE_URL}/things/`
+export const apiFail = ref(false)
 
-export const BASE_URL =
-  process.env.NODE_ENV === 'development'
+export const BASE_URL
+  = process.env.NODE_ENV === 'development'
     ? debugAPI
     : apiFail.value
       ? failoverAPI
-      : releseAPI;
-export const BASE_API_URL = BASE_URL + 'api/';
-export const FETCH_API = 'https://fetch.vtsuru.live/';
-export const BASE_HUB_URL =
-  (process.env.NODE_ENV === 'development'
+      : releseAPI
+export const BASE_API_URL = `${BASE_URL}api/`
+export const FETCH_API = 'https://fetch.vtsuru.live/'
+export const BASE_HUB_URL
+  = `${process.env.NODE_ENV === 'development'
     ? debugAPI
     : apiFail.value
       ? failoverAPI
-      : releseAPI) + 'hub/';
+      : releseAPI}hub/`
 
-export const TURNSTILE_KEY = '0x4AAAAAAAETUSAKbds019h0';
+export const TURNSTILE_KEY = '0x4AAAAAAAETUSAKbds019h0'
 
-export const CURRENT_HOST = `${window.location.protocol}//${isDev ? window.location.host : 'vtsuru.live'}/`;
-export const CN_HOST = 'https://vtsuru.suki.club/';
+export const CURRENT_HOST = `${window.location.protocol}//${isDev ? window.location.host : 'vtsuru.live'}/`
+export const CN_HOST = 'https://vtsuru.suki.club/'
 
-export const USER_API_URL = BASE_API_URL + 'user/';
-export const ACCOUNT_API_URL = BASE_API_URL + 'account/';
-export const BILI_API_URL = BASE_API_URL + 'bili/';
-export const SONG_API_URL = BASE_API_URL + 'song-list/';
-export const NOTIFACTION_API_URL = BASE_API_URL + 'notification/';
-export const QUESTION_API_URL = BASE_API_URL + 'qa/';
-export const LOTTERY_API_URL = BASE_API_URL + 'lottery/';
-export const HISTORY_API_URL = BASE_API_URL + 'history/';
-export const SCHEDULE_API_URL = BASE_API_URL + 'schedule/';
-export const VIDEO_COLLECT_API_URL = BASE_API_URL + 'video-collect/';
-export const OPEN_LIVE_API_URL = BASE_API_URL + 'open-live/';
-export const SONG_REQUEST_API_URL = BASE_API_URL + 'live-request/';
-export const QUEUE_API_URL = BASE_API_URL + 'queue/';
-export const EVENT_API_URL = BASE_API_URL + 'event/';
-export const LIVE_API_URL = BASE_API_URL + 'live/';
-export const FEEDBACK_API_URL = BASE_API_URL + 'feedback/';
-export const MUSIC_REQUEST_API_URL = BASE_API_URL + 'music-request/';
-export const VTSURU_API_URL = BASE_API_URL + 'vtsuru/';
-export const POINT_API_URL = BASE_API_URL + 'point/';
-export const BILI_AUTH_API_URL = BASE_API_URL + 'bili-auth/';
-export const FORUM_API_URL = BASE_API_URL + 'forum/';
-export const USER_INDEX_API_URL = BASE_API_URL + 'user-index/';
-export const ANALYZE_API_URL = BASE_API_URL + 'analyze/';
-export const CHECKIN_API_URL = BASE_API_URL + 'checkin/';
-export const USER_CONFIG_API_URL = BASE_API_URL + 'user-config/';
-export const FILE_API_URL = BASE_API_URL + 'files/';
-export const VOTE_API_URL = BASE_API_URL + 'vote/';
+export const USER_API_URL = `${BASE_API_URL}user/`
+export const ACCOUNT_API_URL = `${BASE_API_URL}account/`
+export const BILI_API_URL = `${BASE_API_URL}bili/`
+export const SONG_API_URL = `${BASE_API_URL}song-list/`
+export const NOTIFACTION_API_URL = `${BASE_API_URL}notification/`
+export const QUESTION_API_URL = `${BASE_API_URL}qa/`
+export const LOTTERY_API_URL = `${BASE_API_URL}lottery/`
+export const HISTORY_API_URL = `${BASE_API_URL}history/`
+export const SCHEDULE_API_URL = `${BASE_API_URL}schedule/`
+export const VIDEO_COLLECT_API_URL = `${BASE_API_URL}video-collect/`
+export const OPEN_LIVE_API_URL = `${BASE_API_URL}open-live/`
+export const SONG_REQUEST_API_URL = `${BASE_API_URL}live-request/`
+export const QUEUE_API_URL = `${BASE_API_URL}queue/`
+export const EVENT_API_URL = `${BASE_API_URL}event/`
+export const LIVE_API_URL = `${BASE_API_URL}live/`
+export const FEEDBACK_API_URL = `${BASE_API_URL}feedback/`
+export const MUSIC_REQUEST_API_URL = `${BASE_API_URL}music-request/`
+export const VTSURU_API_URL = `${BASE_API_URL}vtsuru/`
+export const POINT_API_URL = `${BASE_API_URL}point/`
+export const BILI_AUTH_API_URL = `${BASE_API_URL}bili-auth/`
+export const FORUM_API_URL = `${BASE_API_URL}forum/`
+export const USER_INDEX_API_URL = `${BASE_API_URL}user-index/`
+export const ANALYZE_API_URL = `${BASE_API_URL}analyze/`
+export const CHECKIN_API_URL = `${BASE_API_URL}checkin/`
+export const USER_CONFIG_API_URL = `${BASE_API_URL}user-config/`
+export const FILE_API_URL = `${BASE_API_URL}files/`
+export const VOTE_API_URL = `${BASE_API_URL}vote/`
 
-export type TemplateMapType = {
+export interface TemplateMapType {
   [key: string]: {
-    name: string;
-    settingName?: string;
-    component: any;
-  };
-};
+    name: string
+    settingName?: string
+    component: any
+  }
+}
 export const ScheduleTemplateMap: TemplateMapType = {
   '': {
     name: '默认',
-    //settingName: 'Template.Schedule.Default',
+    // settingName: 'Template.Schedule.Default',
     component: markRaw(defineAsyncComponent(
-      () => import('@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue')
-    ))
+      async () => import('@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue'),
+    )),
   },
-  pinky: {
+  'pinky': {
     name: '粉粉',
-    //settingName: 'Template.Schedule.Pinky',
+    // settingName: 'Template.Schedule.Pinky',
     component: markRaw(defineAsyncComponent(
-      () => import('@/views/view/scheduleTemplate/PinkySchedule.vue')
-    ))
+      async () => import('@/views/view/scheduleTemplate/PinkySchedule.vue'),
+    )),
   },
-  kawaii: {
+  'kawaii': {
     name: '可爱手帐 (未完成',
     settingName: 'Template.Schedule.Kawaii',
     component: markRaw(defineAsyncComponent(
-      () => import('@/views/view/scheduleTemplate/KawaiiSchedule.vue')
-    ))
-  }
-};
+      async () => import('@/views/view/scheduleTemplate/KawaiiSchedule.vue'),
+    )),
+  },
+}
 export const SongListTemplateMap: TemplateMapType = {
   '': {
     name: '默认',
-    //settingName: 'Template.SongList.Default',
+    // settingName: 'Template.SongList.Default',
     component: markRaw(defineAsyncComponent(
-      () => import('@/views/view/songListTemplate/DefaultSongListTemplate.vue')
-    ))
+      async () => import('@/views/view/songListTemplate/DefaultSongListTemplate.vue'),
+    )),
   },
-  traditional: {
+  'traditional': {
     name: '列表 (较推荐',
     settingName: 'Template.SongList.Traditional',
     component: markRaw(defineAsyncComponent(
-      () =>
-        import('@/views/view/songListTemplate/TraditionalSongListTemplate.vue')
-    ))
+      async () =>
+        import('@/views/view/songListTemplate/TraditionalSongListTemplate.vue'),
+    )),
   },
-  simple: {
+  'simple': {
     name: '简单',
-    //settingName: 'Template.SongList.Simple',
+    // settingName: 'Template.SongList.Simple',
     component: markRaw(defineAsyncComponent(
-      () => import('@/views/view/songListTemplate/SimpleSongListTemplate.vue')
-    ))
+      async () => import('@/views/view/songListTemplate/SimpleSongListTemplate.vue'),
+    )),
   },
-};
+}
 
 export const IndexTemplateMap: TemplateMapType = {
   '': {
     name: '默认',
-    //settingName: 'Template.Index.Default',
-    component: markRaw(DefaultIndexTemplateVue)
-  }
-};
+    // settingName: 'Template.Index.Default',
+    component: markRaw(DefaultIndexTemplateVue),
+  },
+}
 
 export const defaultDanmujiCss = `@import url("https://fonts.googleapis.com/css?family=Changa%20One");
 @import url("https://fonts.googleapis.com/css?family=Imprima");
@@ -426,4 +426,4 @@ yt-live-chat-paid-message-renderer {
   animation: anim 0ms;
   animation-fill-mode: both;
 }
-`
\ No newline at end of file
+`
diff --git a/src/data/fileUpload.ts b/src/data/fileUpload.ts
index fa9b5c8..ee9a781 100644
--- a/src/data/fileUpload.ts
+++ b/src/data/fileUpload.ts
@@ -1,15 +1,16 @@
-import { UploadFileResponse, UserFileLocation, UserFileTypes } from '@/api/api-models';
-import { QueryPostAPI } from '@/api/query';
-import { FILE_API_URL } from '@/data/constants';
+import type { UploadFileResponse, UserFileTypes } from '@/api/api-models'
+import { UserFileLocation } from '@/api/api-models'
+import { QueryPostAPI } from '@/api/query'
+import { FILE_API_URL } from '@/data/constants'
 
 /**
  * 文件上传阶段
  */
 export enum UploadStage {
-  Preparing = "准备上传",
-  Uploading = "上传中",
-  Success = "上传成功",
-  Failed = "上传失败"
+  Preparing = '准备上传',
+  Uploading = '上传中',
+  Success = '上传成功',
+  Failed = '上传失败',
 }
 
 /**
@@ -24,43 +25,43 @@ export async function uploadFiles(
   files: File | File[],
   type?: UserFileTypes,
   location: UserFileLocation = UserFileLocation.Local,
-  onProgress?: (stage: string) => void
+  onProgress?: (stage: string) => void,
 ): Promise<UploadFileResponse[]> {
   try {
-    onProgress?.(UploadStage.Preparing);
+    onProgress?.(UploadStage.Preparing)
 
-    const formData = new FormData();
+    const formData = new FormData()
 
     // 支持单个文件或文件数组
     if (Array.isArray(files)) {
-      files.forEach(file => {
-        formData.append('files', file);
-      });
+      files.forEach((file) => {
+        formData.append('files', file)
+      })
     } else {
-      formData.append('files', files);
+      formData.append('files', files)
     }
 
     if (type !== undefined) {
-      formData.append('type', type.toString());
+      formData.append('type', type.toString())
     }
 
-    formData.append('location', location.toString());
+    formData.append('location', location.toString())
 
-    onProgress?.(UploadStage.Uploading);
+    onProgress?.(UploadStage.Uploading)
 
-    const result = await QueryPostAPI<UploadFileResponse[]>(FILE_API_URL + 'upload', formData);
+    const result = await QueryPostAPI<UploadFileResponse[]>(`${FILE_API_URL}upload`, formData)
 
     if (result.code === 200) {
-      onProgress?.(UploadStage.Success);
-      return result.data;
+      onProgress?.(UploadStage.Success)
+      return result.data
     } else {
-      onProgress?.(UploadStage.Failed);
-      throw new Error(result.message || '上传失败');
+      onProgress?.(UploadStage.Failed)
+      throw new Error(result.message || '上传失败')
     }
   } catch (error) {
-    onProgress?.(UploadStage.Failed);
-    console.error('文件上传错误:', error);
-    throw error;
+    onProgress?.(UploadStage.Failed)
+    console.error('文件上传错误:', error)
+    throw error
   }
 }
 
@@ -72,10 +73,10 @@ export async function uploadFile(
   file: File,
   type?: UserFileTypes,
   location: UserFileLocation = UserFileLocation.Local,
-  onProgress?: (stage: string) => void
+  onProgress?: (stage: string) => void,
 ): Promise<UploadFileResponse> {
-  const results = await uploadFiles(file, type, location, onProgress);
-  return results[0]; // 返回第一个结果
+  const results = await uploadFiles(file, type, location, onProgress)
+  return results[0] // 返回第一个结果
 }
 
 /**
@@ -86,7 +87,7 @@ export async function uploadMultipleFiles(
   files: File[],
   type?: UserFileTypes,
   location: UserFileLocation = UserFileLocation.Local,
-  onProgress?: (stage: string) => void
+  onProgress?: (stage: string) => void,
 ): Promise<UploadFileResponse[]> {
-  return uploadFiles(files, type, location, onProgress);
-}
\ No newline at end of file
+  return uploadFiles(files, type, location, onProgress)
+}
diff --git a/src/data/gamepadConfigs.ts b/src/data/gamepadConfigs.ts
index ac05379..18ebe69 100644
--- a/src/data/gamepadConfigs.ts
+++ b/src/data/gamepadConfigs.ts
@@ -1,167 +1,102 @@
-import type StickSvg from '@/assets/controller/Shared/shared-Left Joystick.svg?component';
-import type RightStickSvg from '@/assets/controller/Shared/shared-Right Joystick.svg?component';
-import type StickClickSvg from '@/assets/controller/Shared/shared-Left Stick Click.svg?component';
-import type RightStickClickSvg from '@/assets/controller/Shared/shared-Right Stick Click.svg?component';
+import StickSvgComp from '@/assets/controller/Shared/shared-Left Joystick.svg?component'
+import RightStickSvgComp from '@/assets/controller/Shared/shared-Right Joystick.svg?component'
+import StickClickSvgComp from '@/assets/controller/Shared/shared-Left Stick Click.svg?component'
+import RightStickClickSvgComp from '@/assets/controller/Shared/shared-Right Stick Click.svg?component'
 
-import type XboxBodyBlack from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One Controller VSCView Black.svg?component';
-import type XboxBodyWhite from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One Controller VSCView White.svg?component';
-import type XboxBodyBlue from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One S Controller VSCView Blue.svg?component';
-import type XboxBodyRed from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One S Controller VSCView Red.svg?component';
+import XboxBodyBlackComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One Controller VSCView Black.svg?component'
+import XboxBodyWhiteComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One Controller VSCView White.svg?component'
+import XboxBodyBlueComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One S Controller VSCView Blue.svg?component'
+import XboxBodyRedComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One S Controller VSCView Red.svg?component'
 
-import type PS4BodyBlack from '@/assets/controller/Body/DS4/DS4 VSC SVG.svg?component';
-import type PS4BodyFront from '@/assets/controller/Body/DS4/DS4 VSC Front SVG.svg?component';
-import type PS4V2BodyBlack from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG.svg?component';
-import type PS4V2BodyWhite from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Glacier White.svg?component';
-import type PS4V2BodyRed from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Magma Red.svg?component';
-import type PS4V2BodyBlue from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Midnight Blue.svg?component';
-import type PS4V2BodyGold from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Gold.svg?component';
-import type PS5BodyBlack from '@/assets/controller/Body/DS/DualSense VSC SVG.svg?component';
-import type PS5BodyWhite from '@/assets/controller/Body/DS/DualSense VSC SVG - White.svg?component';
+import PS4BodyBlackComp from '@/assets/controller/Body/DS4/DS4 VSC SVG.svg?component'
+import PS4BodyFrontComp from '@/assets/controller/Body/DS4/DS4 VSC Front SVG.svg?component'
+import PS4V2BodyBlackComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG.svg?component'
+import PS4V2BodyWhiteComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Glacier White.svg?component'
+import PS4V2BodyRedComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Magma Red.svg?component'
+import PS4V2BodyBlueComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Midnight Blue.svg?component'
+import PS4V2BodyGoldComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Gold.svg?component'
+import PS5BodyBlackComp from '@/assets/controller/Body/DS/DualSense VSCView SVG.svg?component'
+import PS5BodyWhiteComp from '@/assets/controller/Body/DS/DualSense VSCView SVG Midnight Black.svg?component'
 
-import type SwitchProBody from '@/assets/controller/Body/SwitchPro/Switch Pro Controller VSCView.svg?component';
+import SwitchProBodyComp from '@/assets/controller/Body/SwitchPro/Switch Pro Controller VSCView.svg?component'
 
-import type XboxASvg from '@/assets/controller/Shared/shared-A.svg?component';
-import type XboxBSvg from '@/assets/controller/Shared/shared-B.svg?component';
-import type XboxXSvg from '@/assets/controller/Shared/shared-X.svg?component';
-import type XboxYSvg from '@/assets/controller/Shared/shared-Y.svg?component';
-import type XboxDpadUpSvg from '@/assets/controller/Shared/shared-D-PAD Up.svg?component';
-import type XboxDpadDownSvg from '@/assets/controller/Shared/shared-D-PA Down.svg?component';
-import type XboxDpadLeftSvg from '@/assets/controller/Shared/shared-D-PAD Left.svg?component';
-import type XboxDpadRightSvg from '@/assets/controller/Shared/shared-D-PAD Right.svg?component';
-import type XboxLBSvg from '@/assets/controller/Shared/shared-L1.svg?component';
-import type XboxRBSvg from '@/assets/controller/Shared/shared-R1.svg?component';
-import type XboxLTSvg from '@/assets/controller/Shared/shared-L2.svg?component';
-import type XboxRTSvg from '@/assets/controller/Shared/shared-R2.svg?component';
-import type XboxViewSvg from '@/assets/controller/Xbox/xbox-View.svg?component';
-import type XboxMenuSvg from '@/assets/controller/Xbox/xbox-Menu.svg?component';
-import type XboxGuideSvg from '@/assets/controller/Xbox/xbox-Guide.svg?component';
+import XboxASvgComp from '@/assets/controller/Shared/shared-A.svg?component'
+import XboxBSvgComp from '@/assets/controller/Shared/shared-B.svg?component'
+import XboxXSvgComp from '@/assets/controller/Shared/shared-X.svg?component'
+import XboxYSvgComp from '@/assets/controller/Shared/shared-Y.svg?component'
+import XboxDpadUpSvgComp from '@/assets/controller/Shared/shared-D-PAD Up.svg?component'
+import XboxDpadDownSvgComp from '@/assets/controller/Shared/shared-D-PA Down.svg?component'
+import XboxDpadLeftSvgComp from '@/assets/controller/Shared/shared-D-PAD Left.svg?component'
+import XboxDpadRightSvgComp from '@/assets/controller/Shared/shared-D-PAD Right.svg?component'
+import XboxLBSvgComp from '@/assets/controller/Shared/shared-L1.svg?component'
+import XboxRBSvgComp from '@/assets/controller/Shared/shared-R1.svg?component'
+import XboxLTSvgComp from '@/assets/controller/Shared/shared-L2.svg?component'
+import XboxRTSvgComp from '@/assets/controller/Shared/shared-R2.svg?component'
+import XboxViewSvgComp from '@/assets/controller/Xbox/xbox-View.svg?component'
+import XboxMenuSvgComp from '@/assets/controller/Xbox/xbox-Menu.svg?component'
+import XboxGuideSvgComp from '@/assets/controller/Xbox/xbox-Guide.svg?component'
 
-import type PsCrossSvg from '@/assets/controller/PlayStation/ps-Cross.svg?component';
-import type PsCircleSvg from '@/assets/controller/PlayStation/ps-Circle.svg?component';
-import type PsSquareSvg from '@/assets/controller/PlayStation/ps-Square.svg?component';
-import type PsTriangleSvg from '@/assets/controller/PlayStation/ps-Triangle.svg?component';
-import type PsTouchpadSvg from '@/assets/controller/PlayStation/ps5-Touchpad.svg?component';
-import type PsL1Svg from '@/assets/controller/PlayStation/ps-D-PAD Left.svg?component';
-import type PsR1Svg from '@/assets/controller/PlayStation/ps-D-PAD Right.svg?component';
-import type PsL2Svg from '@/assets/controller/Shared/shared-L2.svg?component';
-import type PsR2Svg from '@/assets/controller/Shared/shared-R2.svg?component';
-import type PsCreateSvg from '@/assets/controller/PlayStation/ps5-Create.svg?component';
-import type PsOptionsSvg from '@/assets/controller/PlayStation/ps5-Option.svg?component';
-import type PsGuideSvg from '@/assets/controller/PlayStation/ps-Guide.svg?component';
+import PsCrossSvgComp from '@/assets/controller/PlayStation/ps-Cross.svg?component'
+import PsCircleSvgComp from '@/assets/controller/PlayStation/ps-Circle.svg?component'
+import PsSquareSvgComp from '@/assets/controller/PlayStation/ps-Square.svg?component'
+import PsTriangleSvgComp from '@/assets/controller/PlayStation/ps-Triangle.svg?component'
+import PsTouchpadSvgComp from '@/assets/controller/PlayStation/ps5-Touchpad.svg?component'
+import PsL1SvgComp from '@/assets/controller/PlayStation/ps-D-PAD Left.svg?component'
+import PsR1SvgComp from '@/assets/controller/PlayStation/ps-D-PAD Right.svg?component'
+import PsL2SvgComp from '@/assets/controller/Shared/shared-L2.svg?component'
+import PsR2SvgComp from '@/assets/controller/Shared/shared-R2.svg?component'
+import PsCreateSvgComp from '@/assets/controller/PlayStation/ps5-Create.svg?component'
+import PsOptionsSvgComp from '@/assets/controller/PlayStation/ps5-Option.svg?component'
+import PsGuideSvgComp from '@/assets/controller/PlayStation/ps-Guide.svg?component'
 
-import type NintendoASvg from '@/assets/controller/Nintendo/nintendo-positional prompt A.svg?component';
-import type NintendoBSvg from '@/assets/controller/Nintendo/nintendo-positional prompt B.svg?component';
-import type NintendoXSvg from '@/assets/controller/Nintendo/nintendo-positional prompt X.svg?component';
-import type NintendoYSvg from '@/assets/controller/Nintendo/nintendo-positional prompt Y.svg?component';
-import type NintendoCaptureSvg from '@/assets/controller/Nintendo/nintendoswitch-Capture.svg?component';
-import type NintendoLSvg from '@/assets/controller/Nintendo/nintendo-L.svg?component';
-import type NintendoRSvg from '@/assets/controller/Nintendo/nintendo-R.svg?component';
-import type NintendoZLSvg from '@/assets/controller/Nintendo/nintendo-ZL.svg?component';
-import type NintendoZRSvg from '@/assets/controller/Nintendo/nintendo-ZR.svg?component';
-import type NintendoPlusSvg from '@/assets/controller/Nintendo/nintendo-Plus.svg?component';
-import type NintendoMinusSvg from '@/assets/controller/Nintendo/nintendo-Minus.svg?component';
-
-import StickSvgComp from '@/assets/controller/Shared/shared-Left Joystick.svg?component';
-import RightStickSvgComp from '@/assets/controller/Shared/shared-Right Joystick.svg?component';
-import StickClickSvgComp from '@/assets/controller/Shared/shared-Left Stick Click.svg?component';
-import RightStickClickSvgComp from '@/assets/controller/Shared/shared-Right Stick Click.svg?component';
-
-import XboxBodyBlackComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One Controller VSCView Black.svg?component';
-import XboxBodyWhiteComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One Controller VSCView White.svg?component';
-import XboxBodyBlueComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One S Controller VSCView Blue.svg?component';
-import XboxBodyRedComp from '@/assets/controller/Body/Xbox/XboxOneColor/Xbox One S Controller VSCView Red.svg?component';
-
-import PS4BodyBlackComp from '@/assets/controller/Body/DS4/DS4 VSC SVG.svg?component';
-import PS4BodyFrontComp from '@/assets/controller/Body/DS4/DS4 VSC Front SVG.svg?component';
-import PS4V2BodyBlackComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG.svg?component';
-import PS4V2BodyWhiteComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Glacier White.svg?component';
-import PS4V2BodyRedComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Magma Red.svg?component';
-import PS4V2BodyBlueComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Midnight Blue.svg?component';
-import PS4V2BodyGoldComp from '@/assets/controller/Body/DS4/DS4 V2 VSC SVG - Gold.svg?component';
-import PS5BodyBlackComp from '@/assets/controller/Body/DS/DualSense VSCView SVG.svg?component';
-import PS5BodyWhiteComp from '@/assets/controller/Body/DS/DualSense VSCView SVG Midnight Black.svg?component';
-
-import SwitchProBodyComp from '@/assets/controller/Body/SwitchPro/Switch Pro Controller VSCView.svg?component';
-
-import XboxASvgComp from '@/assets/controller/Shared/shared-A.svg?component';
-import XboxBSvgComp from '@/assets/controller/Shared/shared-B.svg?component';
-import XboxXSvgComp from '@/assets/controller/Shared/shared-X.svg?component';
-import XboxYSvgComp from '@/assets/controller/Shared/shared-Y.svg?component';
-import XboxDpadUpSvgComp from '@/assets/controller/Shared/shared-D-PAD Up.svg?component';
-import XboxDpadDownSvgComp from '@/assets/controller/Shared/shared-D-PA Down.svg?component';
-import XboxDpadLeftSvgComp from '@/assets/controller/Shared/shared-D-PAD Left.svg?component';
-import XboxDpadRightSvgComp from '@/assets/controller/Shared/shared-D-PAD Right.svg?component';
-import XboxLBSvgComp from '@/assets/controller/Shared/shared-L1.svg?component';
-import XboxRBSvgComp from '@/assets/controller/Shared/shared-R1.svg?component';
-import XboxLTSvgComp from '@/assets/controller/Shared/shared-L2.svg?component';
-import XboxRTSvgComp from '@/assets/controller/Shared/shared-R2.svg?component';
-import XboxViewSvgComp from '@/assets/controller/Xbox/xbox-View.svg?component';
-import XboxMenuSvgComp from '@/assets/controller/Xbox/xbox-Menu.svg?component';
-import XboxGuideSvgComp from '@/assets/controller/Xbox/xbox-Guide.svg?component';
-
-import PsCrossSvgComp from '@/assets/controller/PlayStation/ps-Cross.svg?component';
-import PsCircleSvgComp from '@/assets/controller/PlayStation/ps-Circle.svg?component';
-import PsSquareSvgComp from '@/assets/controller/PlayStation/ps-Square.svg?component';
-import PsTriangleSvgComp from '@/assets/controller/PlayStation/ps-Triangle.svg?component';
-import PsTouchpadSvgComp from '@/assets/controller/PlayStation/ps5-Touchpad.svg?component';
-import PsL1SvgComp from '@/assets/controller/PlayStation/ps-D-PAD Left.svg?component';
-import PsR1SvgComp from '@/assets/controller/PlayStation/ps-D-PAD Right.svg?component';
-import PsL2SvgComp from '@/assets/controller/Shared/shared-L2.svg?component';
-import PsR2SvgComp from '@/assets/controller/Shared/shared-R2.svg?component';
-import PsCreateSvgComp from '@/assets/controller/PlayStation/ps5-Create.svg?component';
-import PsOptionsSvgComp from '@/assets/controller/PlayStation/ps5-Option.svg?component';
-import PsGuideSvgComp from '@/assets/controller/PlayStation/ps-Guide.svg?component';
-
-import NintendoASvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt A.svg?component';
-import NintendoBSvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt B.svg?component';
-import NintendoXSvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt X.svg?component';
-import NintendoYSvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt Y.svg?component';
-import NintendoCaptureSvgComp from '@/assets/controller/Nintendo/nintendoswitch-Capture.svg?component';
-import NintendoLSvgComp from '@/assets/controller/Nintendo/nintendo-L.svg?component';
-import NintendoRSvgComp from '@/assets/controller/Nintendo/nintendo-R.svg?component';
-import NintendoZLSvgComp from '@/assets/controller/Nintendo/nintendo-ZL.svg?component';
-import NintendoZRSvgComp from '@/assets/controller/Nintendo/nintendo-ZR.svg?component';
-import NintendoPlusSvgComp from '@/assets/controller/Nintendo/nintendo-Plus.svg?component';
-import NintendoMinusSvgComp from '@/assets/controller/Nintendo/nintendo-Minus.svg?component';
-
-import { AllGamepadConfigs, LogicalButton, GamepadType } from '@/types/gamepad';
-import type { Component } from 'vue';
-import { h, markRaw } from 'vue';
+import NintendoASvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt A.svg?component'
+import NintendoBSvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt B.svg?component'
+import NintendoXSvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt X.svg?component'
+import NintendoYSvgComp from '@/assets/controller/Nintendo/nintendo-positional prompt Y.svg?component'
+import NintendoCaptureSvgComp from '@/assets/controller/Nintendo/nintendoswitch-Capture.svg?component'
+import NintendoLSvgComp from '@/assets/controller/Nintendo/nintendo-L.svg?component'
+import NintendoRSvgComp from '@/assets/controller/Nintendo/nintendo-R.svg?component'
+import NintendoZLSvgComp from '@/assets/controller/Nintendo/nintendo-ZL.svg?component'
+import NintendoZRSvgComp from '@/assets/controller/Nintendo/nintendo-ZR.svg?component'
+import NintendoPlusSvgComp from '@/assets/controller/Nintendo/nintendo-Plus.svg?component'
+import NintendoMinusSvgComp from '@/assets/controller/Nintendo/nintendo-Minus.svg?component'
 
+import type { AllGamepadConfigs, GamepadType, LogicalButton } from '@/types/gamepad'
+import type { Component } from 'vue'
+import { markRaw } from 'vue'
 
 export interface BodyOptionConfig {
-  name: string;
-  body: Component;
-  defaultViewBox?: string;
+  name: string
+  body: Component
+  defaultViewBox?: string
 }
 
-const L3 = 'LEFT_STICK_PRESS' as LogicalButton;
-const R3 = 'RIGHT_STICK_PRESS' as LogicalButton;
-const ACTIONDOWN = 'ACTION_DOWN' as LogicalButton;
-const ACTIONRIGHT = 'ACTION_RIGHT' as LogicalButton;
-const ACTIONLEFT = 'ACTION_LEFT' as LogicalButton;
-const ACTIONUP = 'ACTION_UP' as LogicalButton;
-const DPADUP = 'DPAD_UP' as LogicalButton;
-const DPADDOWN = 'DPAD_DOWN' as LogicalButton;
-const DPADLEFT = 'DPAD_LEFT' as LogicalButton;
-const DPADRIGHT = 'DPAD_RIGHT' as LogicalButton;
-const L1 = 'LEFT_SHOULDER_1' as LogicalButton;
-const R1 = 'RIGHT_SHOULDER_1' as LogicalButton;
-const L2 = 'LEFT_SHOULDER_2' as LogicalButton;
-const R2 = 'RIGHT_SHOULDER_2' as LogicalButton;
-const SELECT = 'SELECT' as LogicalButton;
-const START = 'START' as LogicalButton;
-const GUIDE = 'HOME' as LogicalButton;
-const PSTOUCHPAD = 'PS_TOUCHPAD' as LogicalButton;
-const NINTENDOCAPTURE = 'NINTENDO_CAPTURE' as LogicalButton;
-
+const L3 = 'LEFT_STICK_PRESS' as LogicalButton
+const R3 = 'RIGHT_STICK_PRESS' as LogicalButton
+const ACTIONDOWN = 'ACTION_DOWN' as LogicalButton
+const ACTIONRIGHT = 'ACTION_RIGHT' as LogicalButton
+const ACTIONLEFT = 'ACTION_LEFT' as LogicalButton
+const ACTIONUP = 'ACTION_UP' as LogicalButton
+const DPADUP = 'DPAD_UP' as LogicalButton
+const DPADDOWN = 'DPAD_DOWN' as LogicalButton
+const DPADLEFT = 'DPAD_LEFT' as LogicalButton
+const DPADRIGHT = 'DPAD_RIGHT' as LogicalButton
+const L1 = 'LEFT_SHOULDER_1' as LogicalButton
+const R1 = 'RIGHT_SHOULDER_1' as LogicalButton
+const L2 = 'LEFT_SHOULDER_2' as LogicalButton
+const R2 = 'RIGHT_SHOULDER_2' as LogicalButton
+const SELECT = 'SELECT' as LogicalButton
+const START = 'START' as LogicalButton
+const GUIDE = 'HOME' as LogicalButton
+const PSTOUCHPAD = 'PS_TOUCHPAD' as LogicalButton
+const NINTENDOCAPTURE = 'NINTENDO_CAPTURE' as LogicalButton
 
 export const controllerBodies: Record<GamepadType, BodyOptionConfig[]> = {
   xbox: [
     { name: 'Xbox One 黑色', body: markRaw(XboxBodyBlackComp), defaultViewBox: '0 0 1543 956' },
     { name: 'Xbox One 白色', body: markRaw(XboxBodyWhiteComp), defaultViewBox: '0 0 1543 956' },
     { name: 'Xbox One S 蓝色', body: markRaw(XboxBodyBlueComp), defaultViewBox: '0 0 1543 956' },
-    { name: 'Xbox One S 红色', body: markRaw(XboxBodyRedComp), defaultViewBox: '0 0 1543 956' }
+    { name: 'Xbox One S 红色', body: markRaw(XboxBodyRedComp), defaultViewBox: '0 0 1543 956' },
   ],
   ps: [
     { name: 'PS5 DualSense 黑色', body: markRaw(PS5BodyBlackComp), defaultViewBox: '0 0 544.707 302.911' },
@@ -172,31 +107,31 @@ export const controllerBodies: Record<GamepadType, BodyOptionConfig[]> = {
     { name: 'PS4 V2 冰川白', body: markRaw(PS4V2BodyWhiteComp), defaultViewBox: '0 0 544.707 302.911' },
     { name: 'PS4 V2 熔岩红', body: markRaw(PS4V2BodyRedComp), defaultViewBox: '0 0 544.707 302.911' },
     { name: 'PS4 V2 午夜蓝', body: markRaw(PS4V2BodyBlueComp), defaultViewBox: '0 0 544.707 302.911' },
-    { name: 'PS4 V2 金色', body: markRaw(PS4V2BodyGoldComp), defaultViewBox: '0 0 544.707 302.911' }
+    { name: 'PS4 V2 金色', body: markRaw(PS4V2BodyGoldComp), defaultViewBox: '0 0 544.707 302.911' },
   ],
   nintendo: [
-    { name: 'Switch Pro', body: markRaw(SwitchProBodyComp), defaultViewBox: '0 0 1200 780' }
-  ]
-};
+    { name: 'Switch Pro', body: markRaw(SwitchProBodyComp), defaultViewBox: '0 0 1200 780' },
+  ],
+}
 
 function parseAspectRatioToViewBox(aspectRatio: string): string | undefined {
-  const parts = aspectRatio.split('/');
+  const parts = aspectRatio.split('/')
   if (parts.length === 2) {
-    const width = parseFloat(parts[0]);
-    const height = parseFloat(parts[1]);
+    const width = Number.parseFloat(parts[0])
+    const height = Number.parseFloat(parts[1])
     if (!isNaN(width) && !isNaN(height)) {
-      return `0 0 ${width} ${height}`;
+      return `0 0 ${width} ${height}`
     }
   }
-  return undefined;
+  return undefined
 }
 
 export interface ControllerComponentStructure {
-  name: string;
-  path?: string;
-  type: 'button' | 'stick' | 'dpad' | 'trigger' | 'group';
-  logicalButton?: LogicalButton | string;
-  childComponents?: ControllerComponentStructure[];
+  name: string
+  path?: string
+  type: 'button' | 'stick' | 'dpad' | 'trigger' | 'group'
+  logicalButton?: LogicalButton | string
+  childComponents?: ControllerComponentStructure[]
 }
 
 const xboxControllerStructure: ControllerComponentStructure[] = [
@@ -216,8 +151,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         path: 'Left Stick',
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Left Stick Outline' },
-          { name: 'Color', type: 'group', path: 'Left Stick Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Left Stick Color' },
+        ],
       },
       {
         name: '右摇杆',
@@ -226,10 +161,10 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         path: 'Right Stick',
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Right Stick Outline' },
-          { name: 'Color', type: 'group', path: 'Right Stick Color' }
-        ]
-      }
-    ]
+          { name: 'Color', type: 'group', path: 'Right Stick Color' },
+        ],
+      },
+    ],
   },
   {
     name: '中央按钮',
@@ -243,8 +178,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Xbox Guide Button Outline' },
           { name: 'Color', type: 'group', path: 'Xbox Guide Button Color' },
-          { name: 'Icon', type: 'group', path: 'Xbox Icon (OG)' }
-        ]
+          { name: 'Icon', type: 'group', path: 'Xbox Icon (OG)' },
+        ],
       },
       {
         name: 'View按钮',
@@ -254,8 +189,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'View Button Outline' },
           { name: 'Color', type: 'group', path: 'View Button Color' },
-          { name: 'Icon', type: 'group', path: 'View Button Icon' }
-        ]
+          { name: 'Icon', type: 'group', path: 'View Button Icon' },
+        ],
       },
       {
         name: 'Menu按钮',
@@ -265,10 +200,10 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Menu Button Outline' },
           { name: 'Color', type: 'group', path: 'Menu Button Color' },
-          { name: 'Icon', type: 'group', path: 'Menu Button Icon' }
-        ]
-      }
-    ]
+          { name: 'Icon', type: 'group', path: 'Menu Button Icon' },
+        ],
+      },
+    ],
   },
   {
     name: '面部按钮',
@@ -278,7 +213,7 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
       {
         name: '面部按钮点',
         type: 'group',
-        path: 'Face Button Dot'
+        path: 'Face Button Dot',
       },
       {
         name: 'A按钮',
@@ -288,8 +223,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'A Button Outline' },
           { name: 'Color', type: 'group', path: 'A Button Color' },
-          { name: 'Text', type: 'group', path: 'A Button Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'A Button Text' },
+        ],
       },
       {
         name: 'B按钮',
@@ -299,8 +234,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Text', type: 'group', path: 'Text' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Outline', type: 'group', path: 'B Button Outline' }
-        ]
+          { name: 'Outline', type: 'group', path: 'B Button Outline' },
+        ],
       },
       {
         name: 'X按钮',
@@ -310,8 +245,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'X Button Outline' },
           { name: 'Color', type: 'group', path: 'X Button Color' },
-          { name: 'Text', type: 'group', path: 'X Button Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'X Button Text' },
+        ],
       },
       {
         name: 'Y按钮',
@@ -321,10 +256,10 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Y Button Outline' },
           { name: 'Color', type: 'group', path: 'Y Button Color' },
-          { name: 'Text', type: 'group', path: 'Y Button Text' }
-        ]
-      }
-    ]
+          { name: 'Text', type: 'group', path: 'Y Button Text' },
+        ],
+      },
+    ],
   },
   {
     name: '方向键组',
@@ -339,34 +274,34 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
           { name: 'D-PAD正面轮廓', type: 'group', path: 'D-PAD Outline Front' },
           { name: 'D-PAD底部轮廓', type: 'group', path: 'D-PAD Outline Bottom' },
           { name: 'D-PAD相关主体轮廓', type: 'group', path: 'Body Outline' },
-          { name: 'D-PAD颜色', type: 'group', path: 'Color' }
-        ]
+          { name: 'D-PAD颜色', type: 'group', path: 'Color' },
+        ],
       },
       {
         name: '上 (逻辑)',
         type: 'button',
         logicalButton: DPADUP,
-        path: 'D-PAD Up'
+        path: 'D-PAD Up',
       },
       {
         name: '下 (逻辑)',
         type: 'button',
         logicalButton: DPADDOWN,
-        path: 'D-PAD Down'
+        path: 'D-PAD Down',
       },
       {
         name: '左 (逻辑)',
         type: 'button',
         logicalButton: DPADLEFT,
-        path: 'D-PAD Left'
+        path: 'D-PAD Left',
       },
       {
         name: '右 (逻辑)',
         type: 'button',
         logicalButton: DPADRIGHT,
-        path: 'D-PAD Right'
-      }
-    ]
+        path: 'D-PAD Right',
+      },
+    ],
   },
   {
     name: '肩部按钮',
@@ -381,8 +316,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'LB Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'LB Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'LB Text' },
+        ],
       },
       {
         name: '右肩按钮',
@@ -392,18 +327,18 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'RB Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'RB Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'RB Text' },
+        ],
       },
       {
         name: '配对按钮',
         type: 'button',
-        path: 'Pair Button'
+        path: 'Pair Button',
       },
-      { name: 'Xbox One 控制器轮廓 (肩部)', type: 'group', path: 'Xbox One Controller Outline'},
-      { name: 'Xbox One S 控制器轮廓 (肩部)', type: 'group', path: 'Xbox One S Controller Outline'},
-      { name: '肩部整体颜色', type: 'group', path: 'Color'}
-    ]
+      { name: 'Xbox One 控制器轮廓 (肩部)', type: 'group', path: 'Xbox One Controller Outline' },
+      { name: 'Xbox One S 控制器轮廓 (肩部)', type: 'group', path: 'Xbox One S Controller Outline' },
+      { name: '肩部整体颜色', type: 'group', path: 'Color' },
+    ],
   },
   {
     name: '扳机键',
@@ -418,8 +353,8 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'LT Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'LT Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'LT Text' },
+        ],
       },
       {
         name: '右扳机',
@@ -429,12 +364,12 @@ const xboxControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'RT Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'RT Text' }
-        ]
-      }
-    ]
-  }
-];
+          { name: 'Text', type: 'group', path: 'RT Text' },
+        ],
+      },
+    ],
+  },
+]
 
 const psControllerStructure: ControllerComponentStructure[] = [
   {
@@ -450,28 +385,28 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Symbol', type: 'group', path: 'Symbol' },
           { name: 'Outline', type: 'group', path: 'Outline' },
-          { name: 'Color', type: 'group', path: 'Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Color' },
+        ],
       },
       {
         name: 'D-PAD Down',
         type: 'button',
         logicalButton: DPADDOWN,
-        path: 'D-PAD Down'
+        path: 'D-PAD Down',
       },
       {
         name: 'D-PAD Left',
         type: 'button',
         logicalButton: DPADLEFT,
-        path: 'D-PAD Left'
+        path: 'D-PAD Left',
       },
       {
         name: 'D-PAD Up',
         type: 'button',
         logicalButton: DPADUP,
-        path: 'D-PAD Up'
-      }
-    ]
+        path: 'D-PAD Up',
+      },
+    ],
   },
   {
     name: '摇杆',
@@ -484,8 +419,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         path: 'Left Stick',
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Left Stick Outline' },
-          { name: 'Color', type: 'group', path: 'Left Stick Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Left Stick Color' },
+        ],
       },
       {
         name: '右摇杆',
@@ -494,10 +429,10 @@ const psControllerStructure: ControllerComponentStructure[] = [
         path: 'Right Stick',
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Right Stick Outline' },
-          { name: 'Color', type: 'group', path: 'Right Stick Color' }
-        ]
-      }
-    ]
+          { name: 'Color', type: 'group', path: 'Right Stick Color' },
+        ],
+      },
+    ],
   },
   {
     name: '面部按钮',
@@ -506,13 +441,13 @@ const psControllerStructure: ControllerComponentStructure[] = [
       {
         name: 'Face Button',
         type: 'group',
-        path: 'Face Button'
+        path: 'Face Button',
       },
       {
         name: 'Option Button',
         type: 'button',
         logicalButton: START,
-        path: 'Option Button'
+        path: 'Option Button',
       },
       {
         name: 'Create Button',
@@ -522,8 +457,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Symbol', type: 'group', path: 'Symbol' }
-        ]
+          { name: 'Symbol', type: 'group', path: 'Symbol' },
+        ],
       },
       {
         name: '十字按钮',
@@ -532,8 +467,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         logicalButton: ACTIONDOWN,
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Cross Outline' },
-          { name: 'Color', type: 'group', path: 'Cross Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Cross Color' },
+        ],
       },
       {
         name: '圆形按钮',
@@ -542,8 +477,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         logicalButton: ACTIONRIGHT,
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Circle Outline' },
-          { name: 'Color', type: 'group', path: 'Circle Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Circle Color' },
+        ],
       },
       {
         name: '方形按钮',
@@ -552,8 +487,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         logicalButton: ACTIONLEFT,
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Square Outline' },
-          { name: 'Color', type: 'group', path: 'Square Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Square Color' },
+        ],
       },
       {
         name: '三角按钮',
@@ -562,10 +497,10 @@ const psControllerStructure: ControllerComponentStructure[] = [
         logicalButton: ACTIONUP,
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Triangle Outline' },
-          { name: 'Color', type: 'group', path: 'Triangle Color' }
-        ]
-      }
-    ]
+          { name: 'Color', type: 'group', path: 'Triangle Color' },
+        ],
+      },
+    ],
   },
   {
     name: '静音按钮',
@@ -580,10 +515,10 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Mute With LED', type: 'group', path: 'Mute With LED' },
           { name: 'Mute Without LED', type: 'group', path: 'Mute Without LED' },
-          { name: 'Mute Icon', type: 'group', path: 'Mute Icon' }
-        ]
-      }
-    ]
+          { name: 'Mute Icon', type: 'group', path: 'Mute Icon' },
+        ],
+      },
+    ],
   },
   {
     name: 'Misc.',
@@ -592,8 +527,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
     childComponents: [
       { name: 'PS Button', type: 'button', logicalButton: GUIDE, path: 'PS Button' },
       { name: 'Speakers', type: 'group', path: 'Speakers' },
-      { name: 'USB-C Plug', type: 'group', path: 'USB-C Plug' }
-    ]
+      { name: 'USB-C Plug', type: 'group', path: 'USB-C Plug' },
+    ],
   },
   {
     name: '触摸板',
@@ -602,8 +537,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
     path: 'Touchpad',
     childComponents: [
       { name: 'Outline', type: 'group', path: 'Touchpad Outline' },
-      { name: 'Color', type: 'group', path: 'Touchpad Color' }
-    ]
+      { name: 'Color', type: 'group', path: 'Touchpad Color' },
+    ],
   },
   {
     name: '分享按钮',
@@ -612,8 +547,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
     path: 'Create Button',
     childComponents: [
       { name: 'Outline', type: 'group', path: 'Outline' },
-      { name: 'Color', type: 'group', path: 'Color' }
-    ]
+      { name: 'Color', type: 'group', path: 'Color' },
+    ],
   },
   {
     name: '菜单按钮',
@@ -622,10 +557,10 @@ const psControllerStructure: ControllerComponentStructure[] = [
     path: 'Option Button',
     childComponents: [
       { name: 'Outline', type: 'group', path: 'Outline' },
-      { name: 'Color', type: 'group', path: 'Color' }
-    ]
+      { name: 'Color', type: 'group', path: 'Color' },
+    ],
   },
-{
+  {
     name: '肩部按钮',
     type: 'group',
     childComponents: [
@@ -637,8 +572,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'Text' },
+        ],
       },
       {
         name: '右肩按钮',
@@ -648,10 +583,10 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'Text' },
+        ],
       },
-    ]
+    ],
   },
   {
     name: '扳机键',
@@ -665,8 +600,8 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'Text' }
-        ]
+          { name: 'Text', type: 'group', path: 'Text' },
+        ],
       },
       {
         name: '右扳机',
@@ -676,12 +611,12 @@ const psControllerStructure: ControllerComponentStructure[] = [
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Outline' },
           { name: 'Color', type: 'group', path: 'Color' },
-          { name: 'Text', type: 'group', path: 'Text' }
-        ]
-      }
-    ]
-  }
-];
+          { name: 'Text', type: 'group', path: 'Text' },
+        ],
+      },
+    ],
+  },
+]
 
 const nintendoControllerStructure: ControllerComponentStructure[] = [
   {
@@ -694,8 +629,8 @@ const nintendoControllerStructure: ControllerComponentStructure[] = [
         logicalButton: 'LEFT_STICK',
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Left Stick Outline' },
-          { name: 'Color', type: 'group', path: 'Left Stick Color' }
-        ]
+          { name: 'Color', type: 'group', path: 'Left Stick Color' },
+        ],
       },
       {
         name: '右摇杆',
@@ -703,18 +638,18 @@ const nintendoControllerStructure: ControllerComponentStructure[] = [
         logicalButton: 'RIGHT_STICK',
         childComponents: [
           { name: 'Outline', type: 'group', path: 'Right Stick Outline' },
-          { name: 'Color', type: 'group', path: 'Right Stick Color' }
-        ]
-      }
-    ]
-  }
-];
+          { name: 'Color', type: 'group', path: 'Right Stick Color' },
+        ],
+      },
+    ],
+  },
+]
 
 export const controllerStructures: Record<GamepadType, ControllerComponentStructure[]> = {
   xbox: xboxControllerStructure,
   ps: psControllerStructure,
-  nintendo: nintendoControllerStructure
-};
+  nintendo: nintendoControllerStructure,
+}
 
 export const gamepadConfigs: AllGamepadConfigs = {
   xbox: {
@@ -742,7 +677,7 @@ export const gamepadConfigs: AllGamepadConfigs = {
       { type: 'button', logicalButton: SELECT, name: 'View', svg: markRaw(XboxViewSvgComp), position: { top: '35%', left: '52%', width: '6%' } },
       { type: 'button', logicalButton: START, name: 'Menu', svg: markRaw(XboxMenuSvgComp), position: { top: '35%', left: '62%', width: '6%' } },
       { type: 'button', logicalButton: GUIDE, name: 'Guide', svg: markRaw(XboxGuideSvgComp), position: { top: '20%', left: '50%', width: '8%' } },
-    ]
+    ],
   },
   ps: {
     name: 'PlayStation Controller',
@@ -766,7 +701,7 @@ export const gamepadConfigs: AllGamepadConfigs = {
       { type: 'button', logicalButton: SELECT, name: 'Create', svg: markRaw(PsCreateSvgComp), position: { top: '35%', left: '30%', width: '6%' } },
       { type: 'button', logicalButton: START, name: 'Options', svg: markRaw(PsOptionsSvgComp), position: { top: '35%', left: '70%', width: '6%' } },
       { type: 'button', logicalButton: GUIDE, name: 'PS Button', svg: markRaw(PsGuideSvgComp), position: { top: '40%', left: '50%', width: '8%' } },
-    ]
+    ],
   },
   nintendo: {
     name: 'Nintendo Switch Pro Controller',
@@ -789,6 +724,6 @@ export const gamepadConfigs: AllGamepadConfigs = {
       { type: 'button', logicalButton: R2, name: 'ZR', svg: markRaw(NintendoZRSvgComp), position: { top: '10%', left: '65%', width: '10%' } },
       { type: 'button', logicalButton: SELECT, name: '-', svg: markRaw(NintendoMinusSvgComp), position: { top: '35%', left: '35%', width: '5%' } },
       { type: 'button', logicalButton: START, name: '+', svg: markRaw(NintendoPlusSvgComp), position: { top: '35%', left: '65%', width: '5%' } },
-    ]
-  }
-};
\ No newline at end of file
+    ],
+  },
+}
diff --git a/src/data/notifactions.ts b/src/data/notifactions.ts
index 21eba69..ae0e141 100644
--- a/src/data/notifactions.ts
+++ b/src/data/notifactions.ts
@@ -1,16 +1,15 @@
-import { QueryGetAPI } from '@/api/query'
-import { useRequest } from 'vue-request'
-import { NOTIFACTION_API_URL, SONG_REQUEST_API_URL, isBackendUsable } from './constants'
-import { NotifactionInfo } from '@/api/api-models'
-import { useAccount } from '@/api/account'
+import type { NotifactionInfo } from '@/api/api-models'
 import { ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { isBackendUsable, SONG_REQUEST_API_URL } from './constants'
 
 const account = useAccount()
 const n = ref<NotifactionInfo>()
 let isLoading = false
 function get() {
   if (isLoading) return
-  QueryGetAPI<NotifactionInfo>(SONG_REQUEST_API_URL + 'get-active')
+  QueryGetAPI<NotifactionInfo>(`${SONG_REQUEST_API_URL}get-active`)
     .then((data) => {
       if (data.code == 200) {
         n.value = data.data
@@ -26,9 +25,9 @@ function get() {
 }
 
 export const notifactions = () => n
-export const GetNotifactions = () => {
+export function GetNotifactions() {
   if (account) {
-    //setInterval(get, 5000)
-    //暂时不用
+    // setInterval(get, 5000)
+    // 暂时不用
   }
 }
diff --git a/src/data/obsConstants.ts b/src/data/obsConstants.ts
index 1841340..8650a1b 100644
--- a/src/data/obsConstants.ts
+++ b/src/data/obsConstants.ts
@@ -1,18 +1,17 @@
-import { ConfigItemDefinition } from './VTsuruConfigTypes';
-import type { Component, DefineComponent } from 'vue';
+import type { Component, DefineComponent } from 'vue'
 
 /**
  * OBS 组件定义接口
  */
-export type OBSComponentDefinition = {
-  id: string; // 唯一标识符
-  name: string; // 显示名称
-  description: string; // 组件描述
-  component: DefineComponent<{}, {}, any> | Component; // Vue 组件本身 (异步或同步)
-  settingName?: string; // 用于在数据库中存储配置的名称，可选
-  icon?: string; // 组件图标的路径 (可选)
-  version?: string; // 组件版本 (可选)
-  props?: Record<string, any>; // 传递给组件的额外props (可选)
+export interface OBSComponentDefinition {
+  id: string // 唯一标识符
+  name: string // 显示名称
+  description: string // 组件描述
+  component: DefineComponent<{}, {}, any> | Component // Vue 组件本身 (异步或同步)
+  settingName?: string // 用于在数据库中存储配置的名称，可选
+  icon?: string // 组件图标的路径 (可选)
+  version?: string // 组件版本 (可选)
+  props?: Record<string, any> // 传递给组件的额外props (可选)
   // 子组件需要暴露 Config 和 DefaultConfig 才能使用 DynamicForm
   // Config?: ConfigItemDefinition[];
   // DefaultConfig?: any;
@@ -40,14 +39,14 @@ export const OBSComponentMap: Record<string, OBSComponentDefinition> = {
     id: 'Example',
     name: '示例组件',
     description: '一个基础的OBS组件，用于演示和测试功能。',
-    component: defineAsyncComponent(() => import('@/views/obs_store/components/ExampleOBSComponent.vue')),
+    component: defineAsyncComponent(async () => import('@/views/obs_store/components/ExampleOBSComponent.vue')),
     version: '1.0.0',
   },
   Controller: {
     id: 'Controller',
     name: '控制器',
     description: '将用户手柄操作映射到OBS的场景中',
-    component: defineAsyncComponent(() => import('@/views/obs_store/components/gamepads/GamepadViewer.vue')),
+    component: defineAsyncComponent(async () => import('@/views/obs_store/components/gamepads/GamepadViewer.vue')),
     version: '1.0.0',
   },
-};
\ No newline at end of file
+}
diff --git a/src/document/EnableForumAgreement.md b/src/document/EnableForumAgreement.md
index 7c29ab0..1de772f 100644
--- a/src/document/EnableForumAgreement.md
+++ b/src/document/EnableForumAgreement.md
@@ -21,4 +21,3 @@
     本站对涉及讨论区的任何争议和纠纷不承担任何责任。
 
 在进行任何活动之前，确保您理解并遵守这些规则。您确定开始使用我们的随附服务，即表示您已经阅读、理解并同意接受本协议的条款和条件。
-
diff --git a/src/main.ts b/src/main.ts
index 5406b5b..6babcf2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,21 +1,20 @@
-import EasySpeech from 'easy-speech';
-import { createPinia } from 'pinia';
-import { createApp } from 'vue';
-import App from './App.vue';
-import { InitVTsuru } from './data/Initializer';
-import emitter from './mitt';
-import router from './router';
 import { loader } from '@guolao/vue-monaco-editor'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import App from './App.vue'
+import { InitVTsuru } from './data/Initializer'
+import emitter from './mitt'
+import router from './router'
 
 loader.config({
-  paths: {
-    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs'
+  'paths': {
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs',
   },
   'vs/nls': {
     availableLanguages: {
-      '*': 'zh-cn'
-    }
-  }
+      '*': 'zh-cn',
+    },
+  },
 })
 
 const pinia = createPinia()
@@ -24,7 +23,6 @@ export const getPinia = () => pinia
 const app = createApp(App)
 app.use(router).use(pinia).mount('#app')
 
-InitVTsuru();
+InitVTsuru()
 
 window.$mitt = emitter
-
diff --git a/src/mitt.ts b/src/mitt.ts
index f18379d..4bb6462 100644
--- a/src/mitt.ts
+++ b/src/mitt.ts
@@ -1,11 +1,13 @@
-import mitt, { Emitter } from 'mitt'
-import { Music } from './store/useMusicRequest'
+import type { Emitter } from 'mitt'
+import type { Music } from './store/useMusicRequest'
+import mitt from 'mitt'
 
-export declare type MittType<T = any> = {
+export declare interface MittType<T = any> {
   onOpenTemplateSettings: { template: string }
   onMusicRequestPlayerEnded: { music: Music }
   onMusicRequestPlayNextWaitingMusic: never
   onOBSComponentUpdate: never
+  [key: string | symbol]: any
 }
 // 类型
 const emitter: Emitter<MittType> = mitt<MittType>()
diff --git a/src/router/client.ts b/src/router/client.ts
index 923ab60..0e002d8 100644
--- a/src/router/client.ts
+++ b/src/router/client.ts
@@ -5,63 +5,63 @@ export default {
     {
       path: '',
       name: 'client-index',
-      component: () => import('@/client/ClientIndex.vue'),
+      component: async () => import('@/client/ClientIndex.vue'),
       meta: {
         title: '首页',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'fetcher',
       name: 'client-fetcher',
-      component: () => import('@/client/ClientFetcher.vue'),
+      component: async () => import('@/client/ClientFetcher.vue'),
       meta: {
         title: 'EventFetcher',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'settings',
       name: 'client-settings',
-      component: () => import('@/client/ClientSettings.vue'),
+      component: async () => import('@/client/ClientSettings.vue'),
       meta: {
         title: '设置',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'danmaku-window-manage',
       name: 'client-danmaku-window-manage',
-      component: () => import('@/client/DanmakuWindowManager.vue'),
+      component: async () => import('@/client/DanmakuWindowManager.vue'),
       meta: {
         title: '弹幕窗口管理',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'auto-action',
       name: 'client-auto-action-manage',
-      component: () => import('@/client/ClientAutoAction.vue'),
+      component: async () => import('@/client/ClientAutoAction.vue'),
       meta: {
         title: '自动操作管理',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'danmaku-window',
       name: 'client-danmaku-window-redirect',
       redirect: {
-        name: 'client-danmaku-window'
-      }
+        name: 'client-danmaku-window',
+      },
     },
     {
       path: 'test',
       name: 'client-test',
-      component: () => import('@/client/ClientTest.vue'),
+      component: async () => import('@/client/ClientTest.vue'),
       meta: {
         title: '测试',
         forceReload: true,
-      }
+      },
     },
-  ]
+  ],
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index cf134ae..a8782c7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,13 +1,14 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import { useLoadingBarStore } from '@/store/useLoadingBarStore'
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import IndexView from '../views/IndexView.vue'
+import client from './client'
 import manage from './manage'
-import user from './user'
 import obs from './obs'
+import obs_store from './obs_store'
 import open_live from './open_live'
 import singlePage from './singlePage'
-import client from './client';
-import obs_store from './obs_store'
+import user from './user'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -21,7 +22,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/verify',
     name: 'verify',
-    component: () => import('@/views/VerifyView.vue'),
+    component: async () => import('@/views/VerifyView.vue'),
     meta: {
       title: '认证',
     },
@@ -29,7 +30,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/about',
     name: 'about',
-    component: () => import('@/views/AboutView.vue'),
+    component: async () => import('@/views/AboutView.vue'),
     meta: {
       title: '关于',
     },
@@ -37,7 +38,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/reset-password',
     name: 'resetPassword',
-    component: () => import('@/views/ChangePasswordView.vue'),
+    component: async () => import('@/views/ChangePasswordView.vue'),
     meta: {
       title: '重置密码',
     },
@@ -45,7 +46,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/video-collect/:id',
     name: 'video-collect',
-    component: () => import('@/views/VideoCollectPublic.vue'),
+    component: async () => import('@/views/VideoCollectPublic.vue'),
     meta: {
       title: '推荐 · 视频征集',
       keepAlive: true,
@@ -54,7 +55,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/video-collect/list/:id',
     name: 'video-collect-list',
-    component: () => import('@/views/VideoCollectListView.vue'),
+    component: async () => import('@/views/VideoCollectListView.vue'),
     meta: {
       title: '结果 · 视频征集',
       keepAlive: true,
@@ -63,7 +64,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/feedback',
     name: 'feedback',
-    component: () => import('@/views/ViewerFeedbackView.vue'),
+    component: async () => import('@/views/ViewerFeedbackView.vue'),
     meta: {
       title: '反馈',
       keepAlive: true,
@@ -72,7 +73,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/bili-auth',
     name: 'bili-auth',
-    component: () => import('@/views/BiliAuthView.vue'),
+    component: async () => import('@/views/BiliAuthView.vue'),
     meta: {
       title: 'Bilibili 账户认证',
       keepAlive: true,
@@ -81,7 +82,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/bili-user',
     name: 'bili-user',
-    component: () => import('@/views/pointViews/PointUserLayout.vue'),
+    component: async () => import('@/views/pointViews/PointUserLayout.vue'),
     meta: {
       title: 'Bilibili 账户',
       keepAlive: true,
@@ -101,7 +102,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/:pathMatch(.*)*',
     name: 'notfound',
-    component: () => import('@/views/NotfoundView.vue'),
+    component: async () => import('@/views/NotfoundView.vue'),
     meta: {
       title: '页面不存在',
     },
diff --git a/src/router/manage.ts b/src/router/manage.ts
index bc49b4a..b9707e5 100644
--- a/src/router/manage.ts
+++ b/src/router/manage.ts
@@ -1,4 +1,4 @@
-export default //管理页面
+export default // 管理页面
 {
   path: '/manage',
   name: 'manage',
@@ -6,230 +6,230 @@ export default //管理页面
     {
       path: '',
       name: 'manage-index',
-      component: () => import('@/views/manage/DashboardView.vue'),
+      component: async () => import('@/views/manage/DashboardView.vue'),
       meta: {
-        title: '面板'
-      }
+        title: '面板',
+      },
     },
     {
       path: 'song-list',
       name: 'manage-songList',
-      component: () => import('@/views/manage/SongListManageView.vue'),
+      component: async () => import('@/views/manage/SongListManageView.vue'),
       meta: {
         title: '歌单',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'question-box',
       name: 'manage-questionBox',
-      component: () => import('@/views/manage/QuestionBoxManageView.vue'),
+      component: async () => import('@/views/manage/QuestionBoxManageView.vue'),
       meta: {
         title: '提问箱',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'lottery',
       name: 'manage-lottery',
-      component: () => import('@/views/manage/LotteryView.vue'),
+      component: async () => import('@/views/manage/LotteryView.vue'),
       meta: {
         title: '动态抽奖',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'history',
       name: 'manage-history',
-      component: () => import('@/views/manage/HistoryView.vue'),
+      component: async () => import('@/views/manage/HistoryView.vue'),
       meta: {
         title: '数据跟踪',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'schedule',
       name: 'manage-schedule',
-      component: () => import('@/views/manage/ScheduleManageView.vue'),
+      component: async () => import('@/views/manage/ScheduleManageView.vue'),
       meta: {
         title: '日程',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'event',
       name: 'manage-event',
-      component: () => import('@/views/manage/EventView.vue'),
+      component: async () => import('@/views/manage/EventView.vue'),
       meta: {
         title: '事件记录',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'video-collect',
       name: 'manage-videoCollect',
-      component: () => import('@/views/manage/VideoCollectManageView.vue'),
+      component: async () => import('@/views/manage/VideoCollectManageView.vue'),
       meta: {
         title: '视频征集',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'video-collect/:id',
       name: 'manage-videoCollect-Detail',
-      component: () => import('@/views/manage/VideoCollectDetailView.vue'),
+      component: async () => import('@/views/manage/VideoCollectDetailView.vue'),
       meta: {
         title: '详情 · 视频征集',
-        parent: 'manage-videoCollect'
-      }
+        parent: 'manage-videoCollect',
+      },
     },
     {
       path: 'live-lottery',
       name: 'manage-liveLottery',
-      component: () => import('@/views/open_live/OpenLottery.vue'),
+      component: async () => import('@/views/open_live/OpenLottery.vue'),
       meta: {
         title: '直播抽奖',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'obs-store',
       name: 'manage-obsStore',
-      component: () => import('@/views/obs_store/OBSComponentStoreView.vue'),
+      component: async () => import('@/views/obs_store/OBSComponentStoreView.vue'),
       meta: {
         title: 'OBS组件库',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'queue',
       name: 'manage-liveQueue',
-      component: () => import('@/views/open_live/OpenQueue.vue'),
+      component: async () => import('@/views/open_live/OpenQueue.vue'),
       meta: {
         title: '排队',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'speech',
       name: 'manage-speech',
-      component: () => import('@/views/open_live/ReadDanmaku.vue'),
+      component: async () => import('@/views/open_live/ReadDanmaku.vue'),
       meta: {
         title: '读弹幕',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'live-request',
       name: 'manage-liveRequest',
-      component: () => import('@/views/open_live/LiveRequest.vue'),
+      component: async () => import('@/views/open_live/LiveRequest.vue'),
       meta: {
         title: '点播',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'music-request',
       name: 'manage-musicRequest',
-      component: () => import('@/views/open_live/MusicRequest.vue'),
+      component: async () => import('@/views/open_live/MusicRequest.vue'),
       meta: {
         title: '点歌',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'danmuji',
       name: 'manage-danmuji',
-      component: () => import('@/views/manage/DanmujiManageView.vue'),
+      component: async () => import('@/views/manage/DanmujiManageView.vue'),
       meta: {
         title: '弹幕姬',
         keepAlive: true,
         danmaku: true,
-        isNew: true
-      }
+        isNew: true,
+      },
     },
     {
       path: 'vote',
       name: 'manage-danmakuVote',
-      component: () => import('@/views/open_live/DanmakuVote.vue'),
+      component: async () => import('@/views/open_live/DanmakuVote.vue'),
       meta: {
         title: '弹幕投票',
         keepAlive: true,
-        danmaku: true
-      }
+        danmaku: true,
+      },
     },
     {
       path: 'live',
       name: 'manage-live',
-      component: () => import('@/views/manage/LiveManager.vue'),
+      component: async () => import('@/views/manage/LiveManager.vue'),
       meta: {
         title: '直播记录',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'live/:id',
       name: 'manage-liveDetail',
-      component: () => import('@/views/manage/LiveDetailManage.vue'),
+      component: async () => import('@/views/manage/LiveDetailManage.vue'),
       meta: {
-        title: '直播详情'
-      }
+        title: '直播详情',
+      },
     },
     {
       path: 'feedback',
       name: 'manage-feedback',
-      component: () => import('@/views/FeedbackManage.vue'),
+      component: async () => import('@/views/FeedbackManage.vue'),
       meta: {
-        title: '反馈'
-      }
+        title: '反馈',
+      },
     },
     {
       path: 'point',
       name: 'manage-point',
-      component: () => import('@/views/manage/point/PointManage.vue'),
+      component: async () => import('@/views/manage/point/PointManage.vue'),
       meta: {
-        title: '积分'
-      }
+        title: '积分',
+      },
     },
     {
       path: 'forum',
       name: 'manage-forum',
-      component: () => import('@/views/manage/ForumManage.vue'),
+      component: async () => import('@/views/manage/ForumManage.vue'),
       meta: {
-        title: '粉丝讨论区'
-      }
+        title: '粉丝讨论区',
+      },
     },
     {
       path: 'analyze',
       name: 'manage-analyze',
-      component: () => import('@/views/manage/AnalyzeView.vue'),
+      component: async () => import('@/views/manage/AnalyzeView.vue'),
       meta: {
-        title: '数据分析'
-      }
+        title: '数据分析',
+      },
     },
     {
       path: 'tools',
       name: 'manage-tools-dashboard',
-      component: () => import('@/views/manage/ToolsDashboardView.vue'),
+      component: async () => import('@/views/manage/ToolsDashboardView.vue'),
       meta: {
         title: '直播工具箱',
-        keepAlive: true
-      }
+        keepAlive: true,
+      },
     },
     {
       path: 'tools/dynamic-nine-grid',
       name: 'ManageToolDynamicNineGrid',
-      component: () => import('@/views/manage/tools/ToolDynamicNineGrid.vue'),
+      component: async () => import('@/views/manage/tools/ToolDynamicNineGrid.vue'),
       meta: {
         title: '动态九图生成器',
-        parent: 'manage-tools-dashboard' // 指向工具箱仪表盘
-      }
-    }
-  ]
+        parent: 'manage-tools-dashboard', // 指向工具箱仪表盘
+      },
+    },
+  ],
 }
diff --git a/src/router/obs.ts b/src/router/obs.ts
index d37f78f..151e838 100644
--- a/src/router/obs.ts
+++ b/src/router/obs.ts
@@ -5,84 +5,84 @@ export default {
     {
       path: 'live-lottery',
       name: 'obs-live-lottery',
-      component: () => import('@/views/obs/LiveLotteryOBS.vue'),
+      component: async () => import('@/views/obs/LiveLotteryOBS.vue'),
       meta: {
         title: '直播抽奖',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'live-request',
       name: 'obs-live-request',
       alias: 'song-request',
-      component: () => import('@/views/obs/LiveRequestOBS.vue'),
+      component: async () => import('@/views/obs/LiveRequestOBS.vue'),
       meta: {
         title: '弹幕点播',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'live-request-today',
       name: 'obs-live-request-today',
-      component: () => import('@/views/obs/LiveRequestProcessedOBS.vue'),
+      component: async () => import('@/views/obs/LiveRequestProcessedOBS.vue'),
       meta: {
         title: '弹幕点播-今日',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'queue',
       name: 'obs-queue',
-      component: () => import('@/views/obs/QueueOBS.vue'),
+      component: async () => import('@/views/obs/QueueOBS.vue'),
       meta: {
         title: '弹幕排队',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'music-request',
       name: 'obs-music-request',
-      component: () => import('@/views/obs/MusicRequestOBS.vue'),
+      component: async () => import('@/views/obs/MusicRequestOBS.vue'),
       meta: {
         title: '弹幕排队 (播放列表)',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'question-display',
       name: 'obs-question-display',
-      component: () => import('@/views/obs/QuestionDisplayOBS.vue'),
+      component: async () => import('@/views/obs/QuestionDisplayOBS.vue'),
       meta: {
         title: '棉花糖展示',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'web-fetcher',
       name: 'obs-web-fetcher',
-      component: () => import('@/views/obs/WebFetcherOBS.vue'),
+      component: async () => import('@/views/obs/WebFetcherOBS.vue'),
       meta: {
         title: '弹幕收集器 (OBS版)',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'danmuji',
       name: 'obs-danmuji',
-      component: () => import('@/views/obs/DanmujiOBS.vue'),
+      component: async () => import('@/views/obs/DanmujiOBS.vue'),
       meta: {
         title: '弹幕姬',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'danmaku-vote',
       name: 'obs-danmaku-vote',
-      component: () => import('@/views/obs/DanmakuVoteOBS.vue'),
+      component: async () => import('@/views/obs/DanmakuVoteOBS.vue'),
       meta: {
         title: '弹幕投票',
         forceReload: true,
-      }
-    }
-  ]
+      },
+    },
+  ],
 }
diff --git a/src/router/obs_store.ts b/src/router/obs_store.ts
index 82c61a5..2f2648c 100644
--- a/src/router/obs_store.ts
+++ b/src/router/obs_store.ts
@@ -5,20 +5,20 @@ export default {
     {
       path: 'gamepad-manage',
       name: 'obs-store-gamepad-manage',
-      component: () => import('@/views/obs_store/components/gamepads/GamepadViewer.vue'),
+      component: async () => import('@/views/obs_store/components/gamepads/GamepadViewer.vue'),
       meta: {
         title: '游戏手柄',
         forceReload: true,
-      }
+      },
     },
     {
       path: 'gamepad',
       name: 'obs-store-gamepad-display',
-      component: () => import('@/views/obs_store/components/gamepads/GamepadDisplay.vue'),
+      component: async () => import('@/views/obs_store/components/gamepads/GamepadDisplay.vue'),
       meta: {
         title: '手柄显示',
         forceReload: true,
-      }
+      },
     },
-  ]
-}
\ No newline at end of file
+  ],
+}
diff --git a/src/router/open_live.ts b/src/router/open_live.ts
index 0747da8..0072b0e 100644
--- a/src/router/open_live.ts
+++ b/src/router/open_live.ts
@@ -5,7 +5,7 @@ export default {
     {
       path: '',
       name: 'open-live-index',
-      component: () => import('@/views/open_live/OpenLiveIndex.vue'),
+      component: async () => import('@/views/open_live/OpenLiveIndex.vue'),
       meta: {
         title: '开放平台',
       },
@@ -13,7 +13,7 @@ export default {
     {
       path: 'lottery',
       name: 'open-live-lottery',
-      component: () => import('@/views/open_live/OpenLottery.vue'),
+      component: async () => import('@/views/open_live/OpenLottery.vue'),
       meta: {
         title: '直播抽奖',
       },
@@ -21,7 +21,7 @@ export default {
     {
       path: 'live-request',
       name: 'open-live-live-request',
-      component: () => import('@/views/open_live/LiveRequest.vue'),
+      component: async () => import('@/views/open_live/LiveRequest.vue'),
       meta: {
         title: '点歌',
       },
@@ -29,7 +29,7 @@ export default {
     {
       path: 'queue',
       name: 'open-live-queue',
-      component: () => import('@/views/open_live/OpenQueue.vue'),
+      component: async () => import('@/views/open_live/OpenQueue.vue'),
       meta: {
         title: '排队',
       },
@@ -37,7 +37,7 @@ export default {
     {
       path: 'speech',
       name: 'open-live-speech',
-      component: () => import('@/views/open_live/ReadDanmaku.vue'),
+      component: async () => import('@/views/open_live/ReadDanmaku.vue'),
       meta: {
         title: '读弹幕',
       },
diff --git a/src/router/singlePage.ts b/src/router/singlePage.ts
index dd3bc31..7fb0ce7 100644
--- a/src/router/singlePage.ts
+++ b/src/router/singlePage.ts
@@ -2,27 +2,27 @@ export default [
   {
     path: '/question-display',
     name: 'question-display',
-    component: () => import('@/views/single/QuestionDisplay.vue'),
+    component: async () => import('@/views/single/QuestionDisplay.vue'),
     meta: {
-      title: '棉花糖展示页'
-    }
+      title: '棉花糖展示页',
+    },
   },
   {
     path: '/playground/test',
     name: 'test',
-    component: () => import('@/views/TestView.vue'),
+    component: async () => import('@/views/TestView.vue'),
     meta: {
-      title: '测试页'
-    }
+      title: '测试页',
+    },
   },
   {
     path: '/danmaku-window',
     name: 'client-danmaku-window',
-    component: () => import('@/client/ClientDanmakuWindow.vue'),
+    component: async () => import('@/client/ClientDanmakuWindow.vue'),
     meta: {
       title: '弹幕窗口',
       ignoreLogin: true,
       forceReload: true,
-    }
-  }
+    },
+  },
 ]
diff --git a/src/router/user.ts b/src/router/user.ts
index 5f4bf43..62fbc87 100644
--- a/src/router/user.ts
+++ b/src/router/user.ts
@@ -2,7 +2,7 @@ export default [
   {
     path: '',
     name: 'user-index',
-    component: () => import('@/views/view/UserIndexView.vue'),
+    component: async () => import('@/views/view/UserIndexView.vue'),
     meta: {
       title: '主页',
       keepAlive: true,
@@ -11,7 +11,7 @@ export default [
   {
     path: 'song-list',
     name: 'user-songList',
-    component: () => import('@/views/view/SongListView.vue'),
+    component: async () => import('@/views/view/SongListView.vue'),
     meta: {
       title: '歌单',
       keepAlive: true,
@@ -20,7 +20,7 @@ export default [
   {
     path: 'question-box',
     name: 'user-questionBox',
-    component: () => import('@/views/view/QuestionBoxView.vue'),
+    component: async () => import('@/views/view/QuestionBoxView.vue'),
     meta: {
       title: '提问箱',
       keepAlive: true,
@@ -29,7 +29,7 @@ export default [
   {
     path: 'schedule',
     name: 'user-schedule',
-    component: () => import('@/views/view/ScheduleView.vue'),
+    component: async () => import('@/views/view/ScheduleView.vue'),
     meta: {
       title: '日程',
       keepAlive: true,
@@ -38,10 +38,10 @@ export default [
       {
         path: 'ics',
         name: 'user-schedule-ics',
-        component: () => import('@/views/view/ScheduleView.vue'),
+        component: async () => import('@/views/view/ScheduleView.vue'),
         beforeEnter(to: any) {
           // 直接重定向到外部 URL
-          window.location.href = 'https://vtsuru.live/api/schedule/get-ics?id=' + to.query.id
+          window.location.href = `https://vtsuru.live/api/schedule/get-ics?id=${to.query.id}`
         },
       },
     ],
@@ -50,7 +50,7 @@ export default [
     path: 'goods',
     name: 'user-goods',
     alias: 'point',
-    component: () => import('@/views/pointViews/PointGoodsView.vue'),
+    component: async () => import('@/views/pointViews/PointGoodsView.vue'),
     meta: {
       title: '积分兑换',
       keepAlive: true,
@@ -59,7 +59,7 @@ export default [
   {
     path: 'check-in',
     name: 'user-checkin',
-    component: () => import('@/views/view/CheckInRankingView.vue'),
+    component: async () => import('@/views/view/CheckInRankingView.vue'),
     meta: {
       title: '签到排行',
       keepAlive: true,
@@ -68,7 +68,7 @@ export default [
   {
     path: 'video-collect',
     name: 'user-video-collect',
-    component: () => import('@/views/view/VideoCollectView.vue'),
+    component: async () => import('@/views/view/VideoCollectView.vue'),
     meta: {
       title: '视频征集',
       keepAlive: true,
@@ -77,7 +77,7 @@ export default [
   {
     path: 'forum/topic/:topicId',
     name: 'user-forum-topic-detail',
-    component: () => import('@/views/view/forumViews/ForumTopicDetail.vue'),
+    component: async () => import('@/views/view/forumViews/ForumTopicDetail.vue'),
     meta: {
       title: '帖子详情',
       keepAlive: true,
@@ -86,7 +86,7 @@ export default [
   {
     path: 'forum',
     name: 'user-forum',
-    component: () => import('@/views/view/forumViews/ForumView.vue'),
+    component: async () => import('@/views/view/forumViews/ForumView.vue'),
     meta: {
       title: '讨论区',
       keepAlive: true,
diff --git a/src/store/useBiliAuth.ts b/src/store/useBiliAuth.ts
index b6bc02a..87468b1 100644
--- a/src/store/useBiliAuth.ts
+++ b/src/store/useBiliAuth.ts
@@ -1,10 +1,10 @@
-import { BiliAuthModel, ResponsePointGoodModel } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { BILI_AUTH_API_URL, POINT_API_URL } from '@/data/constants'
+import type { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'
+import type { BiliAuthModel, ResponsePointGoodModel } from '@/api/api-models'
 import { useStorage } from '@vueuse/core'
-import { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { BILI_AUTH_API_URL, POINT_API_URL } from '@/data/constants'
 
 export const useBiliAuth = defineStore('BiliAuth', () => {
   const biliAuth = ref<BiliAuthModel>({} as BiliAuthModel)
@@ -36,13 +36,13 @@ export const useBiliAuth = defineStore('BiliAuth', () => {
   async function getAuthInfo() {
     try {
       isLoading.value = true
-      if(!currentToken.value) return
-      await QueryBiliAuthGetAPI<BiliAuthModel>(BILI_AUTH_API_URL + 'info').then((data) => {
+      if (!currentToken.value) return
+      await QueryBiliAuthGetAPI<BiliAuthModel>(`${BILI_AUTH_API_URL}info`).then((data) => {
         if (data.code == 200) {
           biliAuth.value = data.data
           console.log('[bili-auth] 已获取 Bilibili 认证信息')
           // 将token加入到biliTokens
-          const index = biliTokens.value.findIndex((t) => t.id == biliAuth.value.id)
+          const index = biliTokens.value.findIndex(t => t.id == biliAuth.value.id)
           if (index >= 0) {
             biliTokens.value[index] = {
               id: biliAuth.value.id,
@@ -50,7 +50,7 @@ export const useBiliAuth = defineStore('BiliAuth', () => {
               name: biliAuth.value.name,
               uId: biliAuth.value.userId,
             }
-            //console.log('更新已存在的认证账户: ' + biliAuth.value.userId)
+            // console.log('更新已存在的认证账户: ' + biliAuth.value.userId)
           } else {
             biliTokens.value.push({
               id: biliAuth.value.id,
@@ -58,35 +58,35 @@ export const useBiliAuth = defineStore('BiliAuth', () => {
               name: biliAuth.value.name,
               uId: biliAuth.value.userId,
             })
-            console.log('添加新的认证账户: ' + biliAuth.value.userId)
+            console.log(`添加新的认证账户: ${biliAuth.value.userId}`)
           }
           isInvalid.value = false
           return true
         } else {
-          console.error('[bili-auth] 无法获取 Bilibili 认证信息: ' + data.message)
+          console.error(`[bili-auth] 无法获取 Bilibili 认证信息: ${data.message}`)
           isInvalid.value = true
           logout()
-          //message.error('无法获取 Bilibili 认证信息: ' + data.message)
+          // message.error('无法获取 Bilibili 认证信息: ' + data.message)
         }
       })
     } catch (err) {
-      console.error('[bili-auth] 无法获取 Bilibili 认证信息: ' + err)
-      //message.error('无法获取 Bilibili 认证信息: ' + err)
+      console.error(`[bili-auth] 无法获取 Bilibili 认证信息: ${err}`)
+      // message.error('无法获取 Bilibili 认证信息: ' + err)
     } finally {
       isLoading.value = false
     }
     return false
   }
-  function QueryBiliAuthGetAPI<T>(url: string, params?: any, headers?: [string, string][]) {
+  async function QueryBiliAuthGetAPI<T>(url: string, params?: any, headers?: [string, string][]) {
     headers ??= []
-    if (headers.find((h) => h[0] == 'Bili-Auth') == null) {
+    if (headers.find(h => h[0] == 'Bili-Auth') == null) {
       headers.push(['Bili-Auth', currentToken.value ?? ''])
     }
     return QueryGetAPI<T>(url, params, headers)
   }
-  function QueryBiliAuthPostAPI<T>(url: string, body?: unknown, headers?: [string, string][]) {
+  async function QueryBiliAuthPostAPI<T>(url: string, body?: unknown, headers?: [string, string][]) {
     headers ??= []
-    if (headers.find((h) => h[0] == 'Bili-Auth') == null) {
+    if (headers.find(h => h[0] == 'Bili-Auth') == null) {
       headers.push(['Bili-Auth', currentToken.value ?? ''])
     }
     return QueryPostAPI<T>(url, body, headers)
@@ -94,14 +94,14 @@ export const useBiliAuth = defineStore('BiliAuth', () => {
 
   async function GetSpecificPoint(id: number) {
     try {
-      const data = await QueryBiliAuthGetAPI<number>(POINT_API_URL + 'user/get-point', { id: id })
+      const data = await QueryBiliAuthGetAPI<number>(`${POINT_API_URL}user/get-point`, { id })
       if (data.code == 200) {
         return data.data
       } else {
-        console.error('[point] 无法获取在指定直播间拥有的积分: ' + data.message)
+        console.error(`[point] 无法获取在指定直播间拥有的积分: ${data.message}`)
       }
     } catch (err) {
-      console.error('[point] 无法获取在指定直播间拥有的积分: ' + err)
+      console.error(`[point] 无法获取在指定直播间拥有的积分: ${err}`)
     }
     return null
   }
@@ -110,24 +110,24 @@ export const useBiliAuth = defineStore('BiliAuth', () => {
       return []
     }
     try {
-      const resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
-        id: id,
+      const resp = await QueryGetAPI<ResponsePointGoodModel[]>(`${POINT_API_URL}get-goods`, {
+        id,
       })
       if (resp.code == 200) {
         return resp.data
       } else {
-        message?.error('无法获取数据: ' + resp.message)
-        console.error('无法获取数据: ' + resp.message)
+        message?.error(`无法获取数据: ${resp.message}`)
+        console.error(`无法获取数据: ${resp.message}`)
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
-      console.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
+      console.error(`无法获取数据: ${err}`)
     }
     return []
   }
   function logout() {
     biliAuth.value = {} as BiliAuthModel
-    biliTokens.value = biliTokens.value.filter((t) => t.token != currentToken.value)
+    biliTokens.value = biliTokens.value.filter(t => t.token != currentToken.value)
     currentToken.value = ''
     console.log('[bili-auth] 已登出 Bilibili 认证')
   }
diff --git a/src/store/useDanmakuClient.ts b/src/store/useDanmakuClient.ts
index 0e08fd4..a761d55 100644
--- a/src/store/useDanmakuClient.ts
+++ b/src/store/useDanmakuClient.ts
@@ -1,36 +1,38 @@
-import { EventModel, OpenLiveInfo } from '@/api/api-models';
-import BaseDanmakuClient from '@/data/DanmakuClients/BaseDanmakuClient';
-import DirectClient, { DirectClientAuthInfo } from '@/data/DanmakuClients/DirectClient';
-import OpenLiveClient, { AuthInfo } from '@/data/DanmakuClients/OpenLiveClient';
-import { defineStore } from 'pinia';
-import { computed, ref, shallowRef } from 'vue'; // 引入 shallowRef
+import type { EventModel, OpenLiveInfo } from '@/api/api-models'
+import type BaseDanmakuClient from '@/data/DanmakuClients/BaseDanmakuClient'
+import type { DirectClientAuthInfo } from '@/data/DanmakuClients/DirectClient'
+import type { AuthInfo } from '@/data/DanmakuClients/OpenLiveClient'
+import { defineStore } from 'pinia'
+import { computed, ref, shallowRef } from 'vue' // 引入 shallowRef
+import DirectClient from '@/data/DanmakuClients/DirectClient'
+import OpenLiveClient from '@/data/DanmakuClients/OpenLiveClient'
 
 // 定义支持的事件名称类型
-type EventName = 'danmaku' | 'gift' | 'sc' | 'guard' | 'enter' | 'scDel' | 'follow';
-type EventNameWithAll = EventName | 'all';
+type EventName = 'danmaku' | 'gift' | 'sc' | 'guard' | 'enter' | 'scDel' | 'follow'
+type EventNameWithAll = EventName | 'all'
 // 定义监听器函数类型
-type Listener = (arg1: any, arg2: any) => void;
-type EventListener = (arg1: EventModel, arg2: any) => void;
+type Listener = (arg1: any, arg2: any) => void
+type EventListener = (arg1: EventModel, arg2: any) => void
 // --- 修正点: 确保 AllEventListener 定义符合要求 ---
 // AllEventListener 明确只接受一个参数
-type AllEventListener = (arg1: any) => void;
+type AllEventListener = (arg1: any) => void
 
 // --- 修正点: 定义一个统一的监听器类型，用于内部实现签名 ---
-type GenericListener = Listener | AllEventListener;
+type GenericListener = Listener | AllEventListener
 
 export const useDanmakuClient = defineStore('DanmakuClient', () => {
   // 使用 shallowRef 存储 danmakuClient 实例, 性能稍好
-  const danmakuClient = shallowRef<BaseDanmakuClient | undefined>(new OpenLiveClient()); // 默认实例化一个 OpenLiveClient
+  const danmakuClient = shallowRef<BaseDanmakuClient | undefined>(new OpenLiveClient()) // 默认实例化一个 OpenLiveClient
 
   // 连接状态: 'waiting'-等待初始化, 'connecting'-连接中, 'connected'-已连接
-  const state = ref<'waiting' | 'connecting' | 'connected'>('waiting');
+  const state = ref<'waiting' | 'connecting' | 'connected'>('waiting')
   // 计算属性, 判断是否已连接
-  const connected = computed(() => state.value === 'connected');
+  const connected = computed(() => state.value === 'connected')
   // 存储开放平台认证信息 (如果使用 OpenLiveClient)
-  const authInfo = ref<OpenLiveInfo>();
+  const authInfo = ref<OpenLiveInfo>()
 
   // 初始化锁, 防止并发初始化
-  let isInitializing = false;
+  let isInitializing = false
 
   /**
    * @description 注册事件监听器 (特定于 OpenLiveClient 的原始事件 或 调用 onEvent)
@@ -39,23 +41,23 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    * @remarks 对于 OpenLiveClient, 直接操作其内部 events; 对于其他客户端, 调用 onEvent.
    */
   // --- 修正点: 保持重载签名不变 ---
-  function onEvent(eventName: 'all', listener: AllEventListener): void;
-  function onEvent(eventName: EventName, listener: Listener): void;
+  function onEvent(eventName: 'all', listener: AllEventListener): void
+  function onEvent(eventName: EventName, listener: Listener): void
   // --- 修正点: 实现签名使用联合类型，并在内部进行类型断言 ---
   function onEvent(eventName: keyof BaseDanmakuClient['eventsAsModel'], listener: GenericListener): void {
     if (!danmakuClient.value) {
-      console.warn("[DanmakuClient] 尝试在客户端初始化之前调用 'onEvent'。");
-      return;
+      console.warn('[DanmakuClient] 尝试在客户端初始化之前调用 \'onEvent\'。')
+      return
     }
     try {
       if (eventName === 'all') {
         // 对于 'all' 事件, 直接使用 AllEventListener 类型
-        danmakuClient.value.eventsAsModel[eventName].push(listener as AllEventListener);
+        danmakuClient.value.eventsAsModel[eventName].push(listener as AllEventListener)
       } else {
-        danmakuClient.value.eventsAsModel[eventName].push(listener);
+        danmakuClient.value.eventsAsModel[eventName].push(listener)
       }
     } catch (error) {
-      console.error(`[DanmakuClient] 注册事件监听器: ${eventName} 失败: ${error}`);
+      console.error(`[DanmakuClient] 注册事件监听器: ${eventName} 失败: ${error}`)
     }
   }
 
@@ -66,45 +68,44 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    * @remarks 监听器存储在 Store 中, 会在客户端重连后自动重新附加.
    */
   // --- 修正点: 保持重载签名不变 ---
-  function on(eventName: 'all', listener: AllEventListener): void;
-  function on(eventName: EventName, listener: Listener): void;
+  function on(eventName: 'all', listener: AllEventListener): void
+  function on(eventName: EventName, listener: Listener): void
   // --- 修正点: 实现签名使用联合类型，并在内部进行类型断言 ---
   function on(eventName: EventNameWithAll, listener: GenericListener): void {
     if (!danmakuClient.value) {
-      console.warn("[DanmakuClient] 尝试在客户端初始化之前调用 'on'。");
-      return;
+      console.warn('[DanmakuClient] 尝试在客户端初始化之前调用 \'on\'。')
+      return
     }
-    danmakuClient.value.eventsRaw[eventName].push(listener);
+    danmakuClient.value.eventsRaw[eventName].push(listener)
   }
 
-
   /**
    * @description 移除事件监听器 (模型化数据, 从 Store 中移除)
    * @param eventName 事件名称 ('danmaku', 'gift', 'sc', 'guard', 'all')
    * @param listener 要移除的回调函数
    */
   // --- 修正点: 保持重载签名不变 ---
-  function offEvent(eventName: 'all', listener: AllEventListener): void;
-  function offEvent(eventName: EventName, listener: Listener): void;
+  function offEvent(eventName: 'all', listener: AllEventListener): void
+  function offEvent(eventName: EventName, listener: Listener): void
   // --- 修正点: 实现签名使用联合类型，并在内部进行类型断言 ---
   function offEvent(eventName: keyof BaseDanmakuClient['eventsRaw'], listener: GenericListener): void {
     if (!danmakuClient.value) {
-      console.warn("[DanmakuClient] 尝试在客户端初始化之前调用 'offEvent'。");
-      return;
+      console.warn('[DanmakuClient] 尝试在客户端初始化之前调用 \'offEvent\'。')
+      return
     }
     if (eventName === 'all') {
       // 对于 'all' 事件, 直接使用 AllEventListener 类型
-      const modelListeners = danmakuClient.value.eventsAsModel[eventName] as AllEventListener[];
-      const index = modelListeners.indexOf(listener as AllEventListener);
+      const modelListeners = danmakuClient.value.eventsAsModel[eventName] as AllEventListener[]
+      const index = modelListeners.indexOf(listener as AllEventListener)
       if (index > -1) {
-        modelListeners.splice(index, 1);
+        modelListeners.splice(index, 1)
       }
     } else {
-      const index = danmakuClient.value.eventsAsModel[eventName].indexOf(listener);
+      const index = danmakuClient.value.eventsAsModel[eventName].indexOf(listener)
       if (index > -1) {
-        danmakuClient.value.eventsAsModel[eventName].splice(index, 1);
+        danmakuClient.value.eventsAsModel[eventName].splice(index, 1)
       } else {
-        console.warn(`[DanmakuClient] 试图移除未注册的监听器: ${listener}`);
+        console.warn(`[DanmakuClient] 试图移除未注册的监听器: ${listener}`)
       }
     }
   }
@@ -115,17 +116,17 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    * @param listener 要移除的回调函数
    */
   // --- 修正点: 保持重载签名不变 ---
-  function off(eventName: 'all', listener: AllEventListener): void;
-  function off(eventName: EventName, listener: Listener): void;
+  function off(eventName: 'all', listener: AllEventListener): void
+  function off(eventName: EventName, listener: Listener): void
   // --- 修正点: 实现签名使用联合类型，并在内部进行类型断言 ---
   function off(eventName: EventNameWithAll, listener: GenericListener): void {
     if (!danmakuClient.value) {
-      console.warn("[DanmakuClient] 尝试在客户端初始化之前调用 'off'。");
-      return;
+      console.warn('[DanmakuClient] 尝试在客户端初始化之前调用 \'off\'。')
+      return
     }
-    const index = danmakuClient.value.eventsRaw[eventName].indexOf(listener);
+    const index = danmakuClient.value.eventsRaw[eventName].indexOf(listener)
     if (index > -1) {
-      danmakuClient.value.eventsRaw[eventName].splice(index, 1);
+      danmakuClient.value.eventsRaw[eventName].splice(index, 1)
     }
     // 直接从 eventsRaw 中移除监听器
   }
@@ -136,7 +137,7 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    * @returns
    */
   async function initOpenlive(auth?: AuthInfo) {
-    return initClient(new OpenLiveClient(auth));
+    return initClient(new OpenLiveClient(auth))
   }
 
   /**
@@ -145,31 +146,29 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    * @returns
    */
   async function initDirect(auth: DirectClientAuthInfo) {
-    return initClient(new DirectClient(auth));
+    return initClient(new DirectClient(auth))
   }
 
-
   // 辅助函数: 从客户端的 eventsAsModel 移除单个监听器
   // --- 修正点: 修正 detachListenerFromClient 的签名和实现以处理联合类型 ---
   function detachListenerFromClient(client: BaseDanmakuClient, eventName: EventNameWithAll, listener: GenericListener): void {
     if (client.eventsAsModel[eventName]) {
       if (eventName === 'all') {
-        const modelListeners = client.eventsAsModel[eventName] as AllEventListener[];
-        const index = modelListeners.indexOf(listener as AllEventListener);
+        const modelListeners = client.eventsAsModel[eventName] as AllEventListener[]
+        const index = modelListeners.indexOf(listener as AllEventListener)
         if (index > -1) {
-          modelListeners.splice(index, 1);
+          modelListeners.splice(index, 1)
         }
       } else {
-        const modelListeners = client.eventsAsModel[eventName] as Listener[];
-        const index = modelListeners.indexOf(listener as Listener);
+        const modelListeners = client.eventsAsModel[eventName] as Listener[]
+        const index = modelListeners.indexOf(listener as Listener)
         if (index > -1) {
-          modelListeners.splice(index, 1);
+          modelListeners.splice(index, 1)
         }
       }
     }
   }
 
-
   /**
    * @description 通用客户端初始化逻辑
    * @param client 要初始化的客户端实例
@@ -179,122 +178,120 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
     // 防止重复初始化或在非等待状态下初始化
     if (isInitializing) {
       while (isInitializing) {
-        await new Promise((resolve) => setTimeout(resolve, 100)); // 等待初始化完成
+        await new Promise(resolve => setTimeout(resolve, 100)) // 等待初始化完成
       }
-      return useDanmakuClient(); // 如果已连接，则视为“成功”
+      return useDanmakuClient() // 如果已连接，则视为“成功”
     }
     if (state.value === 'connected') {
-      return useDanmakuClient(); // 如果已连接，则视为“成功”
+      return useDanmakuClient() // 如果已连接，则视为“成功”
     }
 
-    isInitializing = true;
-    state.value = 'connecting';
-    console.log('[DanmakuClient] 开始初始化...');
+    isInitializing = true
+    state.value = 'connecting'
+    console.log('[DanmakuClient] 开始初始化...')
 
-
-    let oldEventsAsModel = danmakuClient.value?.eventsAsModel;
-    let oldEventsRaw = danmakuClient.value?.eventsRaw;
+    let oldEventsAsModel = danmakuClient.value?.eventsAsModel
+    let oldEventsRaw = danmakuClient.value?.eventsRaw
     if (!oldEventsAsModel || Object.keys(oldEventsAsModel).length === 0) {
-      oldEventsAsModel = client.createEmptyEventModelListeners();
+      oldEventsAsModel = client.createEmptyEventModelListeners()
     }
     if (!oldEventsRaw || Object.keys(oldEventsRaw).length === 0) {
-      oldEventsRaw = client.createEmptyRawEventlisteners();
+      oldEventsRaw = client.createEmptyRawEventlisteners()
     }
 
     // 先停止并清理旧客户端 (如果存在)
     if (danmakuClient.value) {
-      console.log('[DanmakuClient] 正在处理旧的客户端实例...');
+      console.log('[DanmakuClient] 正在处理旧的客户端实例...')
       if (danmakuClient.value.state === 'connected') {
-        await disposeClientInstance(danmakuClient.value);
+        await disposeClientInstance(danmakuClient.value)
       }
     }
 
     // 设置新的客户端实例
-    danmakuClient.value = client;
+    danmakuClient.value = client
     // 确保新客户端有空的监听器容器 (BaseDanmakuClient 应负责初始化)
-    danmakuClient.value.eventsAsModel = oldEventsAsModel;
-    danmakuClient.value.eventsRaw = oldEventsRaw;
+    danmakuClient.value.eventsAsModel = oldEventsAsModel
+    danmakuClient.value.eventsRaw = oldEventsRaw
     // 通常在 client 实例化或 Start 时处理，或者在 attachListenersToClient 中确保存在
 
-
-    let connectSuccess = false;
-    const maxRetries = 5; // Example: Limit retries
-    let retryCount = 0;
+    let connectSuccess = false
+    const maxRetries = 5 // Example: Limit retries
+    let retryCount = 0
 
     const attemptConnect = async () => {
-      if (!danmakuClient.value) return false; // Guard against client being disposed during wait
+      if (!danmakuClient.value) return false // Guard against client being disposed during wait
       try {
-        console.log(`[DanmakuClient] 尝试连接 (第 ${retryCount + 1} 次)...`);
-        const result = await danmakuClient.value.Start(); // 启动连接
+        console.log(`[DanmakuClient] 尝试连接 (第 ${retryCount + 1} 次)...`)
+        const result = await danmakuClient.value.Start() // 启动连接
         if (result.success) {
           // 连接成功
-          authInfo.value = danmakuClient.value instanceof OpenLiveClient ? danmakuClient.value.roomAuthInfo : undefined;
-          state.value = 'connected';
+          authInfo.value = danmakuClient.value instanceof OpenLiveClient ? danmakuClient.value.roomAuthInfo : undefined
+          state.value = 'connected'
           // 将 Store 中存储的监听器 (来自 onEvent) 附加到新连接的客户端的 eventsAsModel
-          console.log('[DanmakuClient] 初始化成功');
-          connectSuccess = true;
-          return true; // 连接成功, 退出重试循环
+          console.log('[DanmakuClient] 初始化成功')
+          connectSuccess = true
+          return true // 连接成功, 退出重试循环
         } else {
           // 连接失败
-          console.error(`[DanmakuClient] 连接尝试失败: ${result.message}`);
-          return false; // 继续重试
+          console.error(`[DanmakuClient] 连接尝试失败: ${result.message}`)
+          return false // 继续重试
         }
       } catch (error) {
         // 捕获 Start() 可能抛出的异常
-        console.error(`[DanmakuClient] 连接尝试期间发生异常:`, error);
-        return false; // 继续重试
+        console.error(`[DanmakuClient] 连接尝试期间发生异常:`, error)
+        return false // 继续重试
       }
-    };
+    }
 
     // 循环尝试连接, 直到成功或达到重试次数
     while (!connectSuccess && retryCount < maxRetries) {
       if (state.value !== 'connecting') { // 检查状态是否在循环开始时改变
-        console.log('[DanmakuClient] 初始化被外部中止。');
-        isInitializing = false;
-        //return false; // 初始化被中止
-        break;
+        console.log('[DanmakuClient] 初始化被外部中止。')
+        isInitializing = false
+        // return false; // 初始化被中止
+        break
       }
 
       if (!(await attemptConnect())) {
-        retryCount++;
+        retryCount++
         if (retryCount < maxRetries && state.value === 'connecting') {
-          console.log(`[DanmakuClient] 5 秒后重试连接... (${retryCount}/${maxRetries})`);
-          await new Promise((resolve) => setTimeout(resolve, 5000));
+          console.log(`[DanmakuClient] 5 秒后重试连接... (${retryCount}/${maxRetries})`)
+          await new Promise(resolve => setTimeout(resolve, 5000))
           // 再次检查在等待期间状态是否改变
           if (state.value !== 'connecting') {
-            console.log('[DanmakuClient] 在重试等待期间初始化被中止。');
-            isInitializing = false;
-            //return false; // 初始化被中止
-            break;
+            console.log('[DanmakuClient] 在重试等待期间初始化被中止。')
+            isInitializing = false
+            // return false; // 初始化被中止
+            break
           }
         } else if (state.value === 'connecting') {
-          console.error(`[DanmakuClient] 已达到最大连接重试次数 (${maxRetries})。初始化失败。`);
+          console.error(`[DanmakuClient] 已达到最大连接重试次数 (${maxRetries})。初始化失败。`)
           // 连接失败，重置状态
-          await dispose(); // 清理资源
+          await dispose() // 清理资源
           // state.value = 'waiting'; // dispose 会设置状态
           // isInitializing = false; // dispose 会设置
           // return false; // 返回失败状态
-          break;
+          break
         }
       }
     }
 
-    isInitializing = false; // 无论成功失败，初始化过程结束
+    isInitializing = false // 无论成功失败，初始化过程结束
     // 返回最终的连接状态
-    return useDanmakuClient();
+    return useDanmakuClient()
   }
 
   // 封装停止和清理客户端实例的逻辑
   async function disposeClientInstance(client: BaseDanmakuClient) {
     try {
-      console.log('[DanmakuClient] 正在停止客户端实例...');
-      client.Stop(); // 停止客户端连接和内部处理
+      console.log('[DanmakuClient] 正在停止客户端实例...')
+      client.Stop() // 停止客户端连接和内部处理
       // 可能需要添加额外的清理逻辑，例如移除所有监听器
       // client.eventsAsModel = client.createEmptyEventModelListeners(); // 清空监听器
       // client.eventsRaw = client.createEmptyRawEventlisteners(); // 清空监听器
-      console.log('[DanmakuClient] 客户端实例已停止。');
+      console.log('[DanmakuClient] 客户端实例已停止。')
     } catch (error) {
-      console.error('[DanmakuClient] 停止客户端时出错:', error);
+      console.error('[DanmakuClient] 停止客户端时出错:', error)
     }
   }
 
@@ -302,31 +299,31 @@ export const useDanmakuClient = defineStore('DanmakuClient', () => {
    * @description 停止并清理当前客户端连接和资源
    */
   async function dispose() {
-    console.log('[DanmakuClient] 正在停止并清理客户端...');
-    isInitializing = false; // 允许在 dispose 后重新初始化
+    console.log('[DanmakuClient] 正在停止并清理客户端...')
+    isInitializing = false // 允许在 dispose 后重新初始化
 
     if (danmakuClient.value) {
-      await disposeClientInstance(danmakuClient.value);
-      //danmakuClient.value = undefined; // 保留, 用户再次获取event
+      await disposeClientInstance(danmakuClient.value)
+      // danmakuClient.value = undefined; // 保留, 用户再次获取event
     }
-    state.value = 'waiting'; // 重置状态为等待
-    authInfo.value = undefined; // 清理认证信息
+    state.value = 'waiting' // 重置状态为等待
+    authInfo.value = undefined // 清理认证信息
     // isInitializing = false; // 在函数开始处已设置
-    console.log('[DanmakuClient] 已处理。');
+    console.log('[DanmakuClient] 已处理。')
     // 注意: Store 中 listeners.value (来自 onEvent) 默认不清空, 以便重连后恢复
   }
 
   return {
     danmakuClient, // 当前弹幕客户端实例 (shallowRef)
-    state,         // 连接状态 ('waiting', 'connecting', 'connected')
-    authInfo,      // OpenLive 认证信息 (ref)
-    connected,     // 是否已连接 (computed)
-    onEvent,       // 注册事件监听器 (模型化数据, 存储于 Store)
-    offEvent,      // 移除事件监听器 (模型化数据, 从 Store 移除)
-    on,            // 注册事件监听器 (直接操作 client.eventsRaw)
-    off,           // 移除事件监听器 (直接操作 client.eventsRaw 或调用 offEvent)
-    initOpenlive,  // 初始化 OpenLive 客户端
-    initDirect,    // 初始化 Direct 客户端
-    dispose,       // 停止并清理客户端
-  };
-});
\ No newline at end of file
+    state, // 连接状态 ('waiting', 'connecting', 'connected')
+    authInfo, // OpenLive 认证信息 (ref)
+    connected, // 是否已连接 (computed)
+    onEvent, // 注册事件监听器 (模型化数据, 存储于 Store)
+    offEvent, // 移除事件监听器 (模型化数据, 从 Store 移除)
+    on, // 注册事件监听器 (直接操作 client.eventsRaw)
+    off, // 移除事件监听器 (直接操作 client.eventsRaw 或调用 offEvent)
+    initOpenlive, // 初始化 OpenLive 客户端
+    initDirect, // 初始化 Direct 客户端
+    dispose, // 停止并清理客户端
+  }
+})
diff --git a/src/store/useForumStore.ts b/src/store/useForumStore.ts
index 59d5f6e..b21fcff 100644
--- a/src/store/useForumStore.ts
+++ b/src/store/useForumStore.ts
@@ -1,4 +1,5 @@
-import {
+import type { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'
+import type {
   ForumCommentModel,
   ForumCommentSortTypes,
   ForumModel,
@@ -8,12 +9,11 @@ import {
   ForumTopicModel,
   ForumTopicSortTypes,
 } from '@/api/models/forum'
-import { QueryGetAPI, QueryGetPaginationAPI, QueryPostAPI } from '@/api/query'
-import { FORUM_API_URL } from '@/data/constants'
 import { createDiscreteApi } from 'naive-ui'
-import { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { QueryGetAPI, QueryGetPaginationAPI, QueryPostAPI } from '@/api/query'
+import { FORUM_API_URL } from '@/data/constants'
 
 export const useForumStore = defineStore('forum', () => {
   const { message } = createDiscreteApi(['message'])
@@ -28,15 +28,15 @@ export const useForumStore = defineStore('forum', () => {
   async function GetForumInfo(owner: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI<ForumModel>(FORUM_API_URL + 'get-forum', { owner: owner })
+      const data = await QueryGetAPI<ForumModel>(`${FORUM_API_URL}get-forum`, { owner })
       if (data.code == 200) {
         return data.data
       } else if (data.code != 404) {
-        message?.error('无法获取数据: ' + data.message)
+        message?.error(`无法获取数据: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
@@ -45,15 +45,15 @@ export const useForumStore = defineStore('forum', () => {
   async function GetManagedForums() {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI<ForumModel[]>(FORUM_API_URL + 'get-managed-forums')
+      const data = await QueryGetAPI<ForumModel[]>(`${FORUM_API_URL}get-managed-forums`)
       if (data.code == 200) {
         return data.data
       } else {
-        message?.error('无法获取数据: ' + data.message)
+        message?.error(`无法获取数据: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
@@ -69,12 +69,12 @@ export const useForumStore = defineStore('forum', () => {
   ) {
     try {
       isLoading.value = true
-      const data = await QueryGetPaginationAPI<ForumTopicBaseModel[]>(FORUM_API_URL + 'get-topics', {
+      const data = await QueryGetPaginationAPI<ForumTopicBaseModel[]>(`${FORUM_API_URL}get-topics`, {
         owner,
         pageSize: ps,
         page: pn,
         sort,
-        section: section,
+        section,
       })
       if (data.code == 200) {
         return {
@@ -83,13 +83,13 @@ export const useForumStore = defineStore('forum', () => {
           more: data.more,
         }
       } else {
-        message?.error('无法获取数据: ' + data.message)
-        console.error('无法获取数据: ' + data.message)
+        message?.error(`无法获取数据: ${data.message}`)
+        console.error(`无法获取数据: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
-      console.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
+      console.error(`无法获取数据: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
@@ -98,17 +98,17 @@ export const useForumStore = defineStore('forum', () => {
   async function GetTopicDetail(topic: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI<ForumTopicModel>(FORUM_API_URL + 'get-topic', { topic: topic })
+      const data = await QueryGetAPI<ForumTopicModel>(`${FORUM_API_URL}get-topic`, { topic })
       if (data.code == 200) {
         return data.data
       } else {
-        message?.error('无法获取数据: ' + data.message)
-        console.error('无法获取数据: ' + data.message)
+        message?.error(`无法获取数据: ${data.message}`)
+        console.error(`无法获取数据: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
-      console.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
+      console.error(`无法获取数据: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
@@ -117,7 +117,7 @@ export const useForumStore = defineStore('forum', () => {
   async function GetComments(topic: number, pn: number, ps: number, sort: ForumCommentSortTypes) {
     try {
       isLoading.value = true
-      const data = await QueryGetPaginationAPI<ForumCommentModel[]>(FORUM_API_URL + 'get-comments', {
+      const data = await QueryGetPaginationAPI<ForumCommentModel[]>(`${FORUM_API_URL}get-comments`, {
         topic,
         pageSize: ps,
         page: pn,
@@ -126,13 +126,13 @@ export const useForumStore = defineStore('forum', () => {
       if (data.code == 200) {
         return data
       } else {
-        console.error('无法获取数据: ' + data.message)
-        message?.error('无法获取数据: ' + data.message)
+        console.error(`无法获取数据: ${data.message}`)
+        message?.error(`无法获取数据: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      console.error('无法获取数据: ' + err)
-      message?.error('无法获取数据: ' + err)
+      console.error(`无法获取数据: ${err}`)
+      message?.error(`无法获取数据: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
@@ -141,18 +141,18 @@ export const useForumStore = defineStore('forum', () => {
   async function ApplyToForum(owner: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI<ForumModel>(FORUM_API_URL + 'apply', { owner: owner })
+      const data = await QueryGetAPI<ForumModel>(`${FORUM_API_URL}apply`, { owner })
       if (data.code == 200) {
         message?.success('已提交申请, 等待管理员审核')
         return true
       } else {
-        message?.error('无法获取数据: ' + data.message)
-        console.error('无法获取数据: ' + data.message)
+        message?.error(`无法获取数据: ${data.message}`)
+        console.error(`无法获取数据: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
-      console.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
+      console.error(`无法获取数据: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -162,58 +162,58 @@ export const useForumStore = defineStore('forum', () => {
   async function PostTopic(topic: ForumPostTopicModel, token: string) {
     try {
       isLoading.value = true
-      const data = await QueryPostAPI<ForumTopicModel>(FORUM_API_URL + 'post-topic', topic, [['Turnstile', token]])
+      const data = await QueryPostAPI<ForumTopicModel>(`${FORUM_API_URL}post-topic`, topic, [['Turnstile', token]])
       if (data.code == 200) {
         message?.success('发布成功')
         return data.data
       } else {
-        message?.error('发布失败: ' + data.message)
-        console.error('发布失败: ' + data.message)
+        message?.error(`发布失败: ${data.message}`)
+        console.error(`发布失败: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('发布失败: ' + err)
-      console.error('发布失败: ' + err)
+      message?.error(`发布失败: ${err}`)
+      console.error(`发布失败: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
     }
   }
-  async function PostComment(model: { topic: number; content: string }, token: string) {
+  async function PostComment(model: { topic: number, content: string }, token: string) {
     try {
       isLoading.value = true
-      const data = await QueryPostAPI<ForumCommentModel>(FORUM_API_URL + 'post-comment', model, [['Turnstile', token]])
+      const data = await QueryPostAPI<ForumCommentModel>(`${FORUM_API_URL}post-comment`, model, [['Turnstile', token]])
       if (data.code == 200) {
         message?.success('评论成功')
         return data.data
       } else {
-        message?.error('评论失败: ' + data.message)
-        console.error('评论失败: ' + data.message)
+        message?.error(`评论失败: ${data.message}`)
+        console.error(`评论失败: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('评论失败: ' + err)
-      console.error('评论失败: ' + err)
+      message?.error(`评论失败: ${err}`)
+      console.error(`评论失败: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
     }
   }
-  async function PostReply(model: { comment: number; content: string; replyTo?: number }, token: string) {
+  async function PostReply(model: { comment: number, content: string, replyTo?: number }, token: string) {
     try {
       isLoading.value = true
-      const data = await QueryPostAPI<ForumCommentModel>(FORUM_API_URL + 'post-reply', model, [['Turnstile', token]])
+      const data = await QueryPostAPI<ForumCommentModel>(`${FORUM_API_URL}post-reply`, model, [['Turnstile', token]])
       if (data.code == 200) {
         message?.success('评论成功')
         return data.data
       } else {
-        message?.error('评论失败: ' + data.message)
-        console.error('评论失败: ' + data.message)
+        message?.error(`评论失败: ${data.message}`)
+        console.error(`评论失败: ${data.message}`)
         return undefined
       }
     } catch (err) {
-      message?.error('评论失败: ' + err)
-      console.error('评论失败: ' + err)
+      message?.error(`评论失败: ${err}`)
+      console.error(`评论失败: ${err}`)
       return undefined
     } finally {
       isLoading.value = false
@@ -222,18 +222,18 @@ export const useForumStore = defineStore('forum', () => {
   async function LikeTopic(topic: number, like: boolean) {
     try {
       isLikeLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'like-topic', { topic: topic, like: like })
+      const data = await QueryGetAPI(`${FORUM_API_URL}like-topic`, { topic, like })
       if (data.code == 200) {
-        //message?.success('已点赞')
+        // message?.success('已点赞')
         return true
       } else {
-        message?.error('点赞失败: ' + data.message)
-        console.error('点赞失败: ' + data.message)
+        message?.error(`点赞失败: ${data.message}`)
+        console.error(`点赞失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('点赞失败: ' + err)
-      console.error('点赞失败: ' + err)
+      message?.error(`点赞失败: ${err}`)
+      console.error(`点赞失败: ${err}`)
       return false
     } finally {
       isLikeLoading.value = false
@@ -242,18 +242,18 @@ export const useForumStore = defineStore('forum', () => {
   async function LikeComment(comment: number, like: boolean) {
     try {
       isLikeLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'like-comment', { comment: comment, like: like })
+      const data = await QueryGetAPI(`${FORUM_API_URL}like-comment`, { comment, like })
       if (data.code == 200) {
-        //message?.success('已点赞')
+        // message?.success('已点赞')
         return true
       } else {
-        message?.error('点赞失败: ' + data.message)
-        console.error('点赞失败: ' + data.message)
+        message?.error(`点赞失败: ${data.message}`)
+        console.error(`点赞失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('点赞失败: ' + err)
-      console.error('点赞失败: ' + err)
+      message?.error(`点赞失败: ${err}`)
+      console.error(`点赞失败: ${err}`)
       return false
     } finally {
       isLikeLoading.value = false
@@ -277,18 +277,18 @@ export const useForumStore = defineStore('forum', () => {
   async function SetTopicTop(topic: number, top: boolean) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'manage/set-topic-top', { topic: topic, top: top })
+      const data = await QueryGetAPI(`${FORUM_API_URL}manage/set-topic-top`, { topic, top })
       if (data.code == 200) {
         message?.success('完成')
         return true
       } else {
-        message?.error('操作失败: ' + data.message)
-        console.error('操作失败: ' + data.message)
+        message?.error(`操作失败: ${data.message}`)
+        console.error(`操作失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('操作失败: ' + err)
-      console.error('操作失败: ' + err)
+      message?.error(`操作失败: ${err}`)
+      console.error(`操作失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -297,18 +297,18 @@ export const useForumStore = defineStore('forum', () => {
   async function DelTopic(topic: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'manage/delete-topic', { topic: topic })
+      const data = await QueryGetAPI(`${FORUM_API_URL}manage/delete-topic`, { topic })
       if (data.code == 200) {
         message?.success('删除成功')
         return true
       } else {
-        message?.error('删除失败: ' + data.message)
-        console.error('删除失败: ' + data.message)
+        message?.error(`删除失败: ${data.message}`)
+        console.error(`删除失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('删除失败: ' + err)
-      console.error('删除失败: ' + err)
+      message?.error(`删除失败: ${err}`)
+      console.error(`删除失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -317,18 +317,18 @@ export const useForumStore = defineStore('forum', () => {
   async function DelComment(comment: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'delete-comment', { comment: comment })
+      const data = await QueryGetAPI(`${FORUM_API_URL}delete-comment`, { comment })
       if (data.code == 200) {
         message?.success('删除成功')
         return true
       } else {
-        message?.error('删除失败: ' + data.message)
-        console.error('删除失败: ' + data.message)
+        message?.error(`删除失败: ${data.message}`)
+        console.error(`删除失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('删除失败: ' + err)
-      console.error('删除失败: ' + err)
+      message?.error(`删除失败: ${err}`)
+      console.error(`删除失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -337,18 +337,18 @@ export const useForumStore = defineStore('forum', () => {
   async function DelReply(reply: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'manage/delete-reply', { reply: reply })
+      const data = await QueryGetAPI(`${FORUM_API_URL}manage/delete-reply`, { reply })
       if (data.code == 200) {
         message?.success('删除成功')
         return true
       } else {
-        message?.error('删除失败: ' + data.message)
-        console.error('删除失败: ' + data.message)
+        message?.error(`删除失败: ${data.message}`)
+        console.error(`删除失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('删除失败: ' + err)
-      console.error('删除失败: ' + err)
+      message?.error(`删除失败: ${err}`)
+      console.error(`删除失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -357,18 +357,18 @@ export const useForumStore = defineStore('forum', () => {
   async function RestoreComment(comment: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'manage/restore-comment', { comment: comment })
+      const data = await QueryGetAPI(`${FORUM_API_URL}manage/restore-comment`, { comment })
       if (data.code == 200) {
         message?.success('恢复成功')
         return true
       } else {
-        message?.error('恢复失败: ' + data.message)
-        console.error('恢复失败: ' + data.message)
+        message?.error(`恢复失败: ${data.message}`)
+        console.error(`恢复失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('恢复失败: ' + err)
-      console.error('恢复失败: ' + err)
+      message?.error(`恢复失败: ${err}`)
+      console.error(`恢复失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -377,18 +377,18 @@ export const useForumStore = defineStore('forum', () => {
   async function RestoreTopic(topic: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'manage/restore-topic', { topic })
+      const data = await QueryGetAPI(`${FORUM_API_URL}manage/restore-topic`, { topic })
       if (data.code == 200) {
         message?.success('恢复成功')
         return true
       } else {
-        message?.error('恢复失败: ' + data.message)
-        console.error('恢复失败: ' + data.message)
+        message?.error(`恢复失败: ${data.message}`)
+        console.error(`恢复失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('恢复失败: ' + err)
-      console.error('恢复失败: ' + err)
+      message?.error(`恢复失败: ${err}`)
+      console.error(`恢复失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
@@ -397,18 +397,18 @@ export const useForumStore = defineStore('forum', () => {
   async function ConfirmApply(owner: number, id: number) {
     try {
       isLoading.value = true
-      const data = await QueryGetAPI(FORUM_API_URL + 'manage/confirm-apply', { forum: owner, id: id })
+      const data = await QueryGetAPI(`${FORUM_API_URL}manage/confirm-apply`, { forum: owner, id })
       if (data.code == 200) {
         message?.success('已通过申请')
         return true
       } else {
-        message?.error('确认失败: ' + data.message)
-        console.error('确认失败: ' + data.message)
+        message?.error(`确认失败: ${data.message}`)
+        console.error(`确认失败: ${data.message}`)
         return false
       }
     } catch (err) {
-      message?.error('确认失败: ' + err)
-      console.error('确认失败: ' + err)
+      message?.error(`确认失败: ${err}`)
+      console.error(`确认失败: ${err}`)
       return false
     } finally {
       isLoading.value = false
diff --git a/src/store/useGamepadStore.ts b/src/store/useGamepadStore.ts
index 0afbe60..aee8c80 100644
--- a/src/store/useGamepadStore.ts
+++ b/src/store/useGamepadStore.ts
@@ -1,59 +1,57 @@
-// src/composables/useGamepad.ts
-import { ref, onMounted, onUnmounted, reactive, readonly, Ref, DeepReadonly, computed, watch } from 'vue';
-import { defineStore } from 'pinia';
-import { useGamepad } from '@vueuse/core';
 import type {
-  GamepadConnectionInfo,
-  RawGamepadState,
-  NormalizedGamepadState,
-  LogicalButton,
   ButtonInputState,
-  StickInputState
-} from '@/types/gamepad'; // 使用 @ 指向 src 目录
-import { LogicalButtonsList } from '@/types/gamepad';
+  GamepadConnectionInfo,
+  LogicalButton,
+  NormalizedGamepadState,
+} from '@/types/gamepad' // 使用 @ 指向 src 目录
+import { useGamepad } from '@vueuse/core'
+import { defineStore } from 'pinia'
+// src/composables/useGamepad.ts
+import { computed, reactive, readonly, ref, watch } from 'vue'
+import { LogicalButtonsList } from '@/types/gamepad'
 
 // 定义事件处理函数类型
-type GamepadEventHandler = (gamepadInfo: GamepadConnectionInfo, index: number) => void;
+type GamepadEventHandler = (gamepadInfo: GamepadConnectionInfo, index: number) => void
 
 // 标准按钮映射，根据标准布局将gamepad API的按钮索引映射到逻辑按钮
 const standardButtonMap: Partial<Record<number, LogicalButton>> = {
-  0: 'ACTION_DOWN',     // Xbox A / PS Cross / Nintendo B
-  1: 'ACTION_RIGHT',    // Xbox B / PS Circle / Nintendo A
-  2: 'ACTION_LEFT',     // Xbox X / PS Square / Nintendo Y
-  3: 'ACTION_UP',       // Xbox Y / PS Triangle / Nintendo X
+  0: 'ACTION_DOWN', // Xbox A / PS Cross / Nintendo B
+  1: 'ACTION_RIGHT', // Xbox B / PS Circle / Nintendo A
+  2: 'ACTION_LEFT', // Xbox X / PS Square / Nintendo Y
+  3: 'ACTION_UP', // Xbox Y / PS Triangle / Nintendo X
   4: 'LEFT_SHOULDER_1', // LB / L1
   5: 'RIGHT_SHOULDER_1', // RB / R1
-  6: 'LEFT_SHOULDER_2',  // LT / L2 (触发器)
+  6: 'LEFT_SHOULDER_2', // LT / L2 (触发器)
   7: 'RIGHT_SHOULDER_2', // RT / R2 (触发器)
-  8: 'SELECT',           // Xbox View / PS Select / Nintendo -
-  9: 'START',            // Xbox Menu / PS Start / Nintendo +
+  8: 'SELECT', // Xbox View / PS Select / Nintendo -
+  9: 'START', // Xbox Menu / PS Start / Nintendo +
   10: 'LEFT_STICK_PRESS', // 左摇杆按下
   11: 'RIGHT_STICK_PRESS', // 右摇杆按下
-  12: 'DPAD_UP',          // 方向键上
-  13: 'DPAD_DOWN',        // 方向键下
-  14: 'DPAD_LEFT',        // 方向键左
-  15: 'DPAD_RIGHT',       // 方向键右
-  16: 'HOME',             // Xbox Home / PS Home / Nintendo Home
-  17: 'PS_TOUCHPAD',      // PS触摸板按下
+  12: 'DPAD_UP', // 方向键上
+  13: 'DPAD_DOWN', // 方向键下
+  14: 'DPAD_LEFT', // 方向键左
+  15: 'DPAD_RIGHT', // 方向键右
+  16: 'HOME', // Xbox Home / PS Home / Nintendo Home
+  17: 'PS_TOUCHPAD', // PS触摸板按下
   // 18可能对应任天堂的截图按钮
-  18: 'NINTENDO_CAPTURE'
-};
+  18: 'NINTENDO_CAPTURE',
+}
 
 export const useGamepadStore = defineStore('gamepad', () => {
-  const { gamepads, onConnected, onDisconnected } = useGamepad();
+  const { gamepads, onConnected, onDisconnected } = useGamepad()
 
-  const connectedGamepadInfo = ref<GamepadConnectionInfo | null>(null);
-  const activeGamepadIndex = ref<number | null>(null);
+  const connectedGamepadInfo = ref<GamepadConnectionInfo | null>(null)
+  const activeGamepadIndex = ref<number | null>(null)
 
   // 存储自定义事件处理器
-  const connectedHandlers: Set<GamepadEventHandler> = new Set();
-  const disconnectedHandlers: Set<GamepadEventHandler> = new Set();
+  const connectedHandlers: Set<GamepadEventHandler> = new Set()
+  const disconnectedHandlers: Set<GamepadEventHandler> = new Set()
 
   // 初始化所有按钮状态
   const initialButtonStates = LogicalButtonsList.reduce((acc, key) => {
-    acc[key] = { pressed: false, value: 0 };
-    return acc;
-  }, {} as Record<LogicalButton, ButtonInputState>);
+    acc[key] = { pressed: false, value: 0 }
+    return acc
+  }, {} as Record<LogicalButton, ButtonInputState>)
 
   // 手柄状态，包含按钮和摇杆
   const normalizedGamepadState = reactive<NormalizedGamepadState>({
@@ -62,123 +60,123 @@ export const useGamepadStore = defineStore('gamepad', () => {
       LEFT_STICK: { x: 0, y: 0 },
       RIGHT_STICK: { x: 0, y: 0 },
     },
-  });
+  })
 
   // 计算属性：手柄是否已连接
-  const isGamepadConnected = computed(() => activeGamepadIndex.value !== null && !!gamepads.value[activeGamepadIndex.value]?.connected);
+  const isGamepadConnected = computed(() => activeGamepadIndex.value !== null && !!gamepads.value[activeGamepadIndex.value]?.connected)
 
   // 重置手柄状态
   const resetNormalizedState = () => {
-    Object.keys(normalizedGamepadState.buttons).forEach(key => {
-        const buttonKey = key as LogicalButton;
-        if (normalizedGamepadState.buttons[buttonKey]) {
-            normalizedGamepadState.buttons[buttonKey]!.pressed = false;
-            normalizedGamepadState.buttons[buttonKey]!.value = 0;
-        }
-    });
-    normalizedGamepadState.sticks.LEFT_STICK = { x: 0, y: 0 };
-    normalizedGamepadState.sticks.RIGHT_STICK = { x: 0, y: 0 };
-  };
+    Object.keys(normalizedGamepadState.buttons).forEach((key) => {
+      const buttonKey = key as LogicalButton
+      if (normalizedGamepadState.buttons[buttonKey]) {
+        normalizedGamepadState.buttons[buttonKey].pressed = false
+        normalizedGamepadState.buttons[buttonKey].value = 0
+      }
+    })
+    normalizedGamepadState.sticks.LEFT_STICK = { x: 0, y: 0 }
+    normalizedGamepadState.sticks.RIGHT_STICK = { x: 0, y: 0 }
+  }
 
   // 更新手柄状态
   const updateNormalizedState = (gamepad: Gamepad | undefined) => {
     if (!gamepad || !gamepad.connected) {
-      resetNormalizedState();
-      return;
+      resetNormalizedState()
+      return
     }
 
     // 更新按钮状态
     gamepad.buttons.forEach((button, index) => {
-      const logicalKey = standardButtonMap[index];
+      const logicalKey = standardButtonMap[index]
       if (logicalKey && normalizedGamepadState.buttons[logicalKey]) {
-        normalizedGamepadState.buttons[logicalKey]!.pressed = button.pressed;
-        normalizedGamepadState.buttons[logicalKey]!.value = button.value;
+        normalizedGamepadState.buttons[logicalKey].pressed = button.pressed
+        normalizedGamepadState.buttons[logicalKey].value = button.value
       }
-    });
+    })
 
     // 更新摇杆状态
-    normalizedGamepadState.sticks.LEFT_STICK.x = gamepad.axes[0] ?? 0;
-    normalizedGamepadState.sticks.LEFT_STICK.y = gamepad.axes[1] ?? 0;
-    normalizedGamepadState.sticks.RIGHT_STICK.x = gamepad.axes[2] ?? 0;
-    normalizedGamepadState.sticks.RIGHT_STICK.y = gamepad.axes[3] ?? 0;
-  };
+    normalizedGamepadState.sticks.LEFT_STICK.x = gamepad.axes[0] ?? 0
+    normalizedGamepadState.sticks.LEFT_STICK.y = gamepad.axes[1] ?? 0
+    normalizedGamepadState.sticks.RIGHT_STICK.x = gamepad.axes[2] ?? 0
+    normalizedGamepadState.sticks.RIGHT_STICK.y = gamepad.axes[3] ?? 0
+  }
 
   // 手柄连接事件处理
   onConnected((index: number) => {
-    const gamepad = navigator.getGamepads()[index];
-    if (!gamepad) return;
+    const gamepad = navigator.getGamepads()[index]
+    if (!gamepad) return
 
-    console.log('手柄已连接:', gamepad.id, '索引:', index);
+    console.log('手柄已连接:', gamepad.id, '索引:', index)
     // 如果当前没有活动的，或者连接的是同一个，则激活
     if (activeGamepadIndex.value === null || activeGamepadIndex.value === index) {
-      activeGamepadIndex.value = index;
+      activeGamepadIndex.value = index
       connectedGamepadInfo.value = {
         id: gamepad.id,
-        mapping: gamepad.mapping
-      };
+        mapping: gamepad.mapping,
+      }
 
       // 触发外部注册的连接事件处理器
       if (connectedGamepadInfo.value) {
-        connectedHandlers.forEach(handler => {
+        connectedHandlers.forEach((handler) => {
           try {
-            handler(connectedGamepadInfo.value!, index);
+            handler(connectedGamepadInfo.value!, index)
           } catch (err) {
-            console.error('手柄连接事件处理器执行错误:', err);
+            console.error('手柄连接事件处理器执行错误:', err)
           }
-        });
+        })
       }
     } else {
       // 如果已有活动手柄，而新连接的手柄不是当前活动的，则忽略，或按需处理（例如允许切换）
-      console.log(`另一个手柄 (索引: ${activeGamepadIndex.value}) 已经处于活动状态`);
+      console.log(`另一个手柄 (索引: ${activeGamepadIndex.value}) 已经处于活动状态`)
     }
-  });
+  })
 
   // 手柄断开连接事件处理
   onDisconnected((index: number) => {
-    const gamepadCache = gamepads.value[index];
-    if (!gamepadCache) return;
+    const gamepadCache = gamepads.value[index]
+    if (!gamepadCache) return
 
-    console.log('手柄已断开连接:', gamepadCache.id);
+    console.log('手柄已断开连接:', gamepadCache.id)
 
     // 保存断开连接前的信息，用于触发事件
-    const disconnectedInfo = connectedGamepadInfo.value ? { ...connectedGamepadInfo.value } : null;
+    const disconnectedInfo = connectedGamepadInfo.value ? { ...connectedGamepadInfo.value } : null
 
     if (activeGamepadIndex.value === index) {
-      activeGamepadIndex.value = null;
-      connectedGamepadInfo.value = null;
-      resetNormalizedState();
+      activeGamepadIndex.value = null
+      connectedGamepadInfo.value = null
+      resetNormalizedState()
 
       // 触发外部注册的断开连接事件处理器
       if (disconnectedInfo) {
-        disconnectedHandlers.forEach(handler => {
+        disconnectedHandlers.forEach((handler) => {
           try {
-            handler(disconnectedInfo, index);
+            handler(disconnectedInfo, index)
           } catch (err) {
-            console.error('手柄断开连接事件处理器执行错误:', err);
+            console.error('手柄断开连接事件处理器执行错误:', err)
           }
-        });
+        })
       }
 
       // 尝试连接其他已连接的手柄 (VueUse 的 gamepads 数组会自动更新)
-      const nextGamepad = gamepads.value.find(gp => gp && gp.connected);
+      const nextGamepad = gamepads.value.find(gp => gp && gp.connected)
       if (nextGamepad) {
-        activeGamepadIndex.value = nextGamepad.index;
+        activeGamepadIndex.value = nextGamepad.index
         connectedGamepadInfo.value = {
           id: nextGamepad.id,
-          mapping: nextGamepad.mapping
-        };
+          mapping: nextGamepad.mapping,
+        }
 
         // 如果自动切换到其他手柄，也触发连接事件
-        connectedHandlers.forEach(handler => {
+        connectedHandlers.forEach((handler) => {
           try {
-            handler(connectedGamepadInfo.value!, nextGamepad.index);
+            handler(connectedGamepadInfo.value!, nextGamepad.index)
           } catch (err) {
-            console.error('手柄连接事件处理器执行错误:', err);
+            console.error('手柄连接事件处理器执行错误:', err)
           }
-        });
+        })
       }
     }
-  });
+  })
 
   // 监视 VueUse 的 gamepads 数组中的活动手柄
   // VueUse 内部使用 rAF 来更新 gamepads 数组中的状态
@@ -187,38 +185,38 @@ export const useGamepadStore = defineStore('gamepad', () => {
       // 确保 activeGamepadIndex.value 不为 null，并且对应的 gamepad 存在
       return activeGamepadIndex.value !== null && gamepads.value[activeGamepadIndex.value]
         ? gamepads.value[activeGamepadIndex.value]
-        : undefined;
+        : undefined
     },
     (activePad) => {
-      updateNormalizedState(activePad);
+      updateNormalizedState(activePad)
     },
-    { deep: true, immediate: true } // immediate: true 保证初始状态也被处理
-  );
+    { deep: true, immediate: true }, // immediate: true 保证初始状态也被处理
+  )
 
   // 对外提供的连接事件注册方法
   const onGamepadConnected = (handler: GamepadEventHandler) => {
-    connectedHandlers.add(handler);
+    connectedHandlers.add(handler)
 
     // 如果当前已有连接的手柄，立即触发一次事件
     if (isGamepadConnected.value && connectedGamepadInfo.value && activeGamepadIndex.value !== null) {
-      handler(connectedGamepadInfo.value, activeGamepadIndex.value);
+      handler(connectedGamepadInfo.value, activeGamepadIndex.value)
     }
 
     // 返回取消注册的函数
     return () => {
-      connectedHandlers.delete(handler);
-    };
-  };
+      connectedHandlers.delete(handler)
+    }
+  }
 
   // 对外提供的断开连接事件注册方法
   const onGamepadDisconnected = (handler: GamepadEventHandler) => {
-    disconnectedHandlers.add(handler);
+    disconnectedHandlers.add(handler)
 
     // 返回取消注册的函数
     return () => {
-      disconnectedHandlers.delete(handler);
-    };
-  };
+      disconnectedHandlers.delete(handler)
+    }
+  }
 
   return {
     connectedGamepadInfo: readonly(connectedGamepadInfo),
@@ -226,5 +224,5 @@ export const useGamepadStore = defineStore('gamepad', () => {
     isGamepadConnected: readonly(isGamepadConnected),
     onConnected: onGamepadConnected,
     onDisconnected: onGamepadDisconnected,
-  };
-});
+  }
+})
diff --git a/src/store/useLoadingBarStore.ts b/src/store/useLoadingBarStore.ts
index 063123f..0b36722 100644
--- a/src/store/useLoadingBarStore.ts
+++ b/src/store/useLoadingBarStore.ts
@@ -1,5 +1,5 @@
+import type { LoadingBarApi } from 'naive-ui'
 import { defineStore } from 'pinia'
-import { LoadingBarApi } from 'naive-ui'
 import { ref } from 'vue'
 
 export const useLoadingBarStore = defineStore('provider', () => {
diff --git a/src/store/useMusicRequest.ts b/src/store/useMusicRequest.ts
index 0c85f32..f0d7263 100644
--- a/src/store/useMusicRequest.ts
+++ b/src/store/useMusicRequest.ts
@@ -1,15 +1,14 @@
-import { DanmakuUserInfo, SongFrom, SongsInfo } from '@/api/api-models'
-import { createNaiveUIApi, theme } from '@/Utils'
+import type { DanmakuUserInfo, SongsInfo } from '@/api/api-models'
 import { useStorage } from '@vueuse/core'
-import { ConfigProviderProps, createDiscreteApi, zhCN } from 'naive-ui'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
+import { SongFrom } from '@/api/api-models'
 
-export type WaitMusicInfo = {
+export interface WaitMusicInfo {
   from: DanmakuUserInfo
   music: SongsInfo
 }
-export type Music = {
+export interface Music {
   id: number
   title: string
   artist: string
@@ -17,7 +16,7 @@ export type Music = {
   pic: string
   lrc: string
 }
-export type MusicRequestSettings = {
+export interface MusicRequestSettings {
   playMusicWhenFree: boolean
 
   repeat: 'repeat-one' | 'repeat-all' | 'no-repeat'
@@ -37,11 +36,11 @@ export type MusicRequestSettings = {
 export const useMusicRequestProvider = defineStore('MusicRequest', () => {
   const waitingMusics = useStorage<WaitMusicInfo[]>(
     'Setting.MusicRequest.Waiting',
-    []
+    [],
   )
   const originMusics = ref<SongsInfo[]>([])
   const aplayerMusics = computed(() =>
-    originMusics.value.map((m) => songToMusic(m))
+    originMusics.value.map(m => songToMusic(m)),
   )
   const currentMusic = ref<Music>({
     id: -1,
@@ -49,7 +48,7 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
     artist: '',
     src: '',
     pic: '',
-    lrc: ''
+    lrc: '',
   } as Music)
   const currentOriginMusic = ref<WaitMusicInfo>()
   const isPlayingOrderMusic = ref(false)
@@ -66,28 +65,28 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
     orderMusicFirst: true,
     platform: 'netease',
 
-    blacklist: []
+    blacklist: [],
   })
 
-const message = window.$message
+  const message = window.$message
 
   function addWaitingMusic(info: WaitMusicInfo) {
     if (
-      (settings.value.orderMusicFirst && !isPlayingOrderMusic.value) ||
-      aplayerRef.value?.audio.paused == true
+      (settings.value.orderMusicFirst && !isPlayingOrderMusic.value)
+      || aplayerRef.value?.audio.paused == true
     ) {
       playMusic(info.music)
       isPlayingOrderMusic.value = true
       console.log(
-        `正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`
+        `正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`,
       )
       message.success(
-        `正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`
+        `正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`,
       )
     } else {
       waitingMusics.value.push(info)
       message.success(
-        `[${info.from.name}] 点了一首 ${info.music.name} - ${info.music.author?.join('/')}`
+        `[${info.from.name}] 点了一首 ${info.music.name} - ${info.music.author?.join('/')}`,
       )
     }
   }
@@ -128,7 +127,7 @@ const message = window.$message
     }
   }
   function playMusic(music: SongsInfo) {
-    //pauseMusic()
+    // pauseMusic()
     currentMusic.value = songToMusic(music)
     aplayerRef.value?.thenPlay()
   }
@@ -147,16 +146,16 @@ const message = window.$message
           ? `https://music.163.com/song/media/outer/url?id=${s.id}.mp3`
           : s.url,
       pic: s.cover ?? '',
-      lrc: ''
+      lrc: '',
     } as Music
   }
   function setSinkId() {
     try {
       aplayerRef.value?.audio.setSinkId(settings.value.deviceId ?? 'default')
-      console.log('设置音频输出设备为 ' + (settings.value.deviceId ?? '默认'))
+      console.log(`设置音频输出设备为 ${settings.value.deviceId ?? '默认'}`)
     } catch (err) {
       console.error(err)
-      message.error('设置音频输出设备失败: ' + err)
+      message.error(`设置音频输出设备失败: ${err}`)
     }
   }
   function nextMusic() {
@@ -184,6 +183,6 @@ const message = window.$message
     onMusicPlay,
     pauseMusic,
     nextMusic,
-    aplayerRef
+    aplayerRef,
   }
 })
diff --git a/src/store/useNotificationStore.ts b/src/store/useNotificationStore.ts
index ed4971e..b3edc35 100644
--- a/src/store/useNotificationStore.ts
+++ b/src/store/useNotificationStore.ts
@@ -1,10 +1,10 @@
-import { QueryGetAPI } from '@/api/query'
-import { NOTIFACTION_API_URL } from '@/data/constants'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { QueryGetAPI } from '@/api/query'
+import { NOTIFACTION_API_URL } from '@/data/constants'
 
-export type NotificationData = {
+export interface NotificationData {
   title: string
 }
 
@@ -19,7 +19,7 @@ export const useNotificationStore = defineStore('notification', () => {
     return // 暂时没写这部分相关逻辑
     try {
       const result = await QueryGetAPI<NotificationData[]>(
-        NOTIFACTION_API_URL + 'get-unread'
+        `${NOTIFACTION_API_URL}get-unread`,
       )
       if (result.code == 200) {
         unread.value = result.data
@@ -40,6 +40,6 @@ export const useNotificationStore = defineStore('notification', () => {
   }
   return {
     init,
-    unread
+    unread,
   }
 })
diff --git a/src/store/usePaymentSettingStore.ts b/src/store/usePaymentSettingStore.ts
index 09bf000..129590c 100644
--- a/src/store/usePaymentSettingStore.ts
+++ b/src/store/usePaymentSettingStore.ts
@@ -1,9 +1,10 @@
-import { useAccount } from '@/api/account'
-import { ConsumptionTypes, IDeductionSetting, UserConsumptionSetting } from '@/api/models/consumption'
-import { QueryPostAPIWithParams } from '@/api/query'
-import { ACCOUNT_API_URL } from '@/data/constants'
+import type { IDeductionSetting, UserConsumptionSetting } from '@/api/models/consumption'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
+import { useAccount } from '@/api/account'
+import { ConsumptionTypes } from '@/api/models/consumption'
+import { QueryPostAPIWithParams } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
 
 export const useConsumptionSettingStore = defineStore(
   'consumptionSetting',
@@ -15,20 +16,20 @@ export const useConsumptionSettingStore = defineStore(
     const consumptionTypeMap = {
       [ConsumptionTypes.DanmakuStorage]: {
         name: '弹幕存储',
-        key: 'danmakuStorage'
-      }
+        key: 'danmakuStorage',
+      },
     }
 
     async function UpdateConsumptionSetting(
       type: ConsumptionTypes,
-      value: unknown
+      value: unknown,
     ) {
-      return await QueryPostAPIWithParams(
-        ACCOUNT_API_URL + 'update-consumption-setting',
+      return QueryPostAPIWithParams(
+        `${ACCOUNT_API_URL}update-consumption-setting`,
         {
-          type: type
+          type,
         },
-        value
+        value,
       )
     }
     function GetSetting(type: ConsumptionTypes) {
@@ -37,5 +38,5 @@ export const useConsumptionSettingStore = defineStore(
     }
 
     return { consumptionSetting, consumptionTypeMap, UpdateConsumptionSetting, GetSetting }
-  }
+  },
 )
diff --git a/src/store/usePointStore.ts b/src/store/usePointStore.ts
index 0eddd51..349ab66 100644
--- a/src/store/usePointStore.ts
+++ b/src/store/usePointStore.ts
@@ -1,24 +1,24 @@
-import { ResponsePointGoodModel } from "@/api/api-models";
-import { QueryGetAPI } from "@/api/query";
-import { POINT_API_URL } from "@/data/constants";
-import { MessageApiInjection } from "naive-ui/es/message/src/MessageProvider";
-import { defineStore } from "pinia";
-import { useBiliAuth } from "./useBiliAuth";
-import { GuidUtils } from "@/Utils";
+import type { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider'
+import type { ResponsePointGoodModel } from '@/api/api-models'
+import { defineStore } from 'pinia'
+import { QueryGetAPI } from '@/api/query'
+import { POINT_API_URL } from '@/data/constants'
+import { GuidUtils } from '@/Utils'
+import { useBiliAuth } from './useBiliAuth'
 
 export const usePointStore = defineStore('point', () => {
   const useAuth = useBiliAuth()
 
   async function GetSpecificPoint(id: number) {
     try {
-      const data = await useAuth.QueryBiliAuthGetAPI<number>(POINT_API_URL + 'user/get-point', { id: id })
+      const data = await useAuth.QueryBiliAuthGetAPI<number>(`${POINT_API_URL}user/get-point`, { id })
       if (data.code == 200) {
         return data.data
       } else {
-        console.error('[point] 无法获取在指定直播间拥有的积分: ' + data.message)
+        console.error(`[point] 无法获取在指定直播间拥有的积分: ${data.message}`)
       }
     } catch (err) {
-      console.error('[point] 无法获取在指定直播间拥有的积分: ' + err)
+      console.error(`[point] 无法获取在指定直播间拥有的积分: ${err}`)
     }
     return null
   }
@@ -27,18 +27,18 @@ export const usePointStore = defineStore('point', () => {
       return []
     }
     try {
-      const resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
-        id: id,
+      const resp = await QueryGetAPI<ResponsePointGoodModel[]>(`${POINT_API_URL}get-goods`, {
+        id,
       })
       if (resp.code == 200) {
         return resp.data
       } else {
-        message?.error('无法获取数据: ' + resp.message)
-        console.error('无法获取数据: ' + resp.message)
+        message?.error(`无法获取数据: ${resp.message}`)
+        console.error(`无法获取数据: ${resp.message}`)
       }
     } catch (err) {
-      message?.error('无法获取数据: ' + err)
-      console.error('无法获取数据: ' + err)
+      message?.error(`无法获取数据: ${err}`)
+      console.error(`无法获取数据: ${err}`)
     }
     return []
   }
@@ -52,44 +52,46 @@ export const usePointStore = defineStore('point', () => {
    */
   async function addPoints(userId: string, count: number, reason: string, remark?: string) {
     if (count === 0) {
-      console.warn('[point] 积分变动数量不能为0');
-      return null;
+      console.warn('[point] 积分变动数量不能为0')
+      return null
     }
 
     try {
       // 根据用户ID构建参数
-      const params: Record<string, any> = GuidUtils.isGuidFromUserId(userId) ? {
-        uId: GuidUtils.guidToLong(userId),
-        count: count,
-        reason: reason || '',
-      } : {
-        oid: userId,
-        count: count,
-        reason: reason || '',
-      };
+      const params: Record<string, any> = GuidUtils.isGuidFromUserId(userId)
+        ? {
+            uId: GuidUtils.guidToLong(userId),
+            count,
+            reason: reason || '',
+          }
+        : {
+            oid: userId,
+            count,
+            reason: reason || '',
+          }
 
       if (remark) {
-        params.remark = remark;
+        params.remark = remark
       }
 
-      const data = await QueryGetAPI<number>(POINT_API_URL + 'give-point', params);
+      const data = await QueryGetAPI<number>(`${POINT_API_URL}give-point`, params)
 
       if (data.code === 200) {
-        console.log(`[point] 用户 ${userId} 积分${count > 0 ? '增加' : '减少'} ${Math.abs(count)} 成功，当前积分：${data.data}`);
-        return data.data; // 返回修改后的积分值
+        console.log(`[point] 用户 ${userId} 积分${count > 0 ? '增加' : '减少'} ${Math.abs(count)} 成功，当前积分：${data.data}`)
+        return data.data // 返回修改后的积分值
       } else {
-        console.error('[point] 积分操作失败:', data.message);
-        return null;
+        console.error('[point] 积分操作失败:', data.message)
+        return null
       }
     } catch (err) {
-      console.error('[point] 积分操作出错:', err);
-      return null;
+      console.error('[point] 积分操作出错:', err)
+      return null
     }
   }
 
   return {
     GetSpecificPoint,
     GetGoods,
-    addPoints
+    addPoints,
   }
-})
\ No newline at end of file
+})
diff --git a/src/store/useQuestionBox.ts b/src/store/useQuestionBox.ts
index 1215aff..98d4533 100644
--- a/src/store/useQuestionBox.ts
+++ b/src/store/useQuestionBox.ts
@@ -1,18 +1,18 @@
-import { useAccount } from '@/api/account'
-import { QAInfo, ViolationTypes } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { ACCOUNT_API_URL, QUESTION_API_URL } from '@/data/constants'
+import type { QAInfo } from '@/api/api-models'
 import { List } from 'linqts'
-import { useMessage } from 'naive-ui'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { ViolationTypes } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { ACCOUNT_API_URL, QUESTION_API_URL } from '@/data/constants'
 
-export type QATagInfo = {
+export interface QATagInfo {
   name: string
   createAt: number
   visiable: boolean
 }
-//SENSITIVE_TERM, HATE, VIOLENCE, PORNOGRAPHY, POLITICS, ADVERTISING, AGGRESSION, EMOTIONAL
+// SENSITIVE_TERM, HATE, VIOLENCE, PORNOGRAPHY, POLITICS, ADVERTISING, AGGRESSION, EMOTIONAL
 
 export const useQuestionBox = defineStore('QuestionBox', () => {
   const isLoading = ref(false)
@@ -25,7 +25,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
   const sendQuestions = ref<QAInfo[]>([])
   const trashQuestions = computed(() => {
     return recieveQuestions.value.filter(
-      (q) => q.reviewResult && q.reviewResult.isApproved == false
+      q => q.reviewResult && q.reviewResult.isApproved == false,
     )
   })
   const tags = ref<QATagInfo[]>([])
@@ -37,60 +37,60 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
 
   const recieveQuestionsFiltered = computed(() => {
     const result = recieveQuestions.value.filter((q) => {
-      /*if (q.id == displayQuestion.value?.id) {
+      /* if (q.id == displayQuestion.value?.id) {
         return false
-      }*/
+      } */
       return (
-        (!q.reviewResult || q.reviewResult.isApproved == true) &&
-        (q.isFavorite || !onlyFavorite.value) &&
-        (q.isPublic || !onlyPublic.value) &&
-        (!q.isReaded || !onlyUnread.value) &&
-        (!displayTag.value || q.tag == displayTag.value)
+        (!q.reviewResult || q.reviewResult.isApproved == true)
+        && (q.isFavorite || !onlyFavorite.value)
+        && (q.isPublic || !onlyPublic.value)
+        && (!q.isReaded || !onlyUnread.value)
+        && (!displayTag.value || q.tag == displayTag.value)
       )
     })
     return result
-    //displayQuestion排在最前面
-    //return displayQuestion.value ? [displayQuestion.value, ...result] : result
+    // displayQuestion排在最前面
+    // return displayQuestion.value ? [displayQuestion.value, ...result] : result
   })
   const currentQuestion = ref<QAInfo>()
   const displayQuestion = ref<QAInfo>()
   const displayTag = ref<string>()
 
   let isRevieveGetted = false
-  //const isSendGetted = false
+  // const isSendGetted = false
 
   const message = window.$message
 
   async function GetRecieveQAInfo() {
     isLoading.value = true
-    await QueryGetAPI<{ questions: QAInfo[]; reviewCount: number }>(
-      QUESTION_API_URL + 'get-recieve'
+    await QueryGetAPI<{ questions: QAInfo[], reviewCount: number }>(
+      `${QUESTION_API_URL}get-recieve`,
     )
       .then((data) => {
         if (data.code == 200) {
           if (data.data.questions.length > 0) {
             recieveQuestions.value = new List(data.data.questions)
-              .OrderBy((d) => d.isReaded)
-              .ThenByDescending((d) => d.sendAt)
+              .OrderBy(d => d.isReaded)
+              .ThenByDescending(d => d.sendAt)
               .ToArray()
             reviewing.value = data.data.reviewCount
 
-            const displayId =
-              accountInfo.value?.settings.questionDisplay.currentQuestion
+            const displayId
+              = accountInfo.value?.settings.questionDisplay.currentQuestion
             if (displayId && displayQuestion.value?.id != displayId) {
               displayQuestion.value = recieveQuestions.value.find(
-                (q) => q.id == displayId
+                q => q.id == displayId,
               )
             }
           }
-          //message.success('共收取 ' + data.data.length + ' 条提问')
+          // message.success('共收取 ' + data.data.length + ' 条提问')
           isRevieveGetted = true
         } else {
           message.error(data.message)
         }
       })
       .catch((err) => {
-        message.error('发生错误: ' + err)
+        message.error(`发生错误: ${err}`)
       })
       .finally(() => {
         isLoading.value = false
@@ -98,44 +98,44 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
   }
   async function GetSendQAInfo() {
     isLoading.value = true
-    await QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-send')
+    await QueryGetAPI<QAInfo[]>(`${QUESTION_API_URL}get-send`)
       .then((data) => {
         if (data.code == 200) {
           sendQuestions.value = data.data
-          //message.success('共发送 ' + data.data.length + ' 条提问')
+          // message.success('共发送 ' + data.data.length + ' 条提问')
         } else {
           message.error(data.message)
         }
       })
       .catch((err) => {
-        message.error('发生错误: ' + err)
+        message.error(`发生错误: ${err}`)
       })
       .finally(() => {
         isLoading.value = false
       })
   }
   async function DelQA(id: number) {
-    await QueryGetAPI(QUESTION_API_URL + 'del', {
-      id: id
+    await QueryGetAPI(`${QUESTION_API_URL}del`, {
+      id,
     })
       .then((data) => {
         if (data.code == 200) {
           message.success('删除成功')
           recieveQuestions.value = recieveQuestions.value.filter(
-            (q) => q.id != id
+            q => q.id != id,
           )
         } else {
           message.error(data.message)
         }
       })
       .catch((err) => {
-        message.error('发生错误: ' + err)
+        message.error(`发生错误: ${err}`)
       })
   }
   async function GetTags() {
     isLoading.value = true
-    await QueryGetAPI<QATagInfo[]>(QUESTION_API_URL + 'get-tags', {
-      id: accountInfo.value?.id
+    await QueryGetAPI<QATagInfo[]>(`${QUESTION_API_URL}get-tags`, {
+      id: accountInfo.value?.id,
     })
       .then((data) => {
         if (data.code == 200) {
@@ -145,14 +145,14 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         }
       })
       .catch((err) => {
-        message.error('发生错误: ' + err)
+        message.error(`发生错误: ${err}`)
       })
       .finally(() => {
         isLoading.value = false
       })
   }
   function getViolationString(violation: ViolationTypes) {
-    //SENSITIVE_TERM, HATE, VIOLENCE, PORNOGRAPHY, POLITICS, ADVERTISING, AGGRESSION
+    // SENSITIVE_TERM, HATE, VIOLENCE, PORNOGRAPHY, POLITICS, ADVERTISING, AGGRESSION
     switch (violation) {
       case ViolationTypes.SENSITIVE_TERM:
         return '敏感词'
@@ -175,23 +175,23 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
       message.warning('请输入标签')
       return
     }
-    if (tags.value.find((t) => t.name == tag)) {
+    if (tags.value.find(t => t.name == tag)) {
       message.warning('标签已存在')
       return
     }
-    await QueryGetAPI(QUESTION_API_URL + 'add-tag', {
-      tag: tag
+    await QueryGetAPI(`${QUESTION_API_URL}add-tag`, {
+      tag,
     })
       .then((data) => {
         if (data.code == 200) {
           message.success('添加成功')
           GetTags()
         } else {
-          message.error('添加失败: ' + data.message)
+          message.error(`添加失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('添加失败: ' + err)
+        message.error(`添加失败: ${err}`)
       })
   }
   async function delTag(tag: string) {
@@ -199,23 +199,23 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
       message.warning('请输入标签')
       return
     }
-    if (!tags.value.find((t) => t.name == tag)) {
+    if (!tags.value.find(t => t.name == tag)) {
       message.warning('标签不存在')
       return
     }
-    await QueryGetAPI(QUESTION_API_URL + 'del-tag', {
-      tag: tag
+    await QueryGetAPI(`${QUESTION_API_URL}del-tag`, {
+      tag,
     })
       .then((data) => {
         if (data.code == 200) {
           message.success('删除成功')
           GetTags()
         } else {
-          message.error('删除失败: ' + data.message)
+          message.error(`删除失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('删除失败: ' + err)
+        message.error(`删除失败: ${err}`)
       })
   }
   async function updateTagVisiable(tag: string, visiable: boolean) {
@@ -223,85 +223,85 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
       message.warning('请输入标签')
       return
     }
-    if (!tags.value.find((t) => t.name == tag)) {
+    if (!tags.value.find(t => t.name == tag)) {
       message.warning('标签不存在')
       return
     }
-    await QueryGetAPI(QUESTION_API_URL + 'update-tag-visiable', {
-      tag: tag,
-      visiable: visiable
+    await QueryGetAPI(`${QUESTION_API_URL}update-tag-visiable`, {
+      tag,
+      visiable,
     })
       .then((data) => {
         if (data.code == 200) {
           message.success('修改成功')
           GetTags()
         } else {
-          message.error('修改失败: ' + data.message)
+          message.error(`修改失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('修改失败: ' + err)
+        message.error(`修改失败: ${err}`)
       })
   }
   async function reply(id: number, msg: string) {
     isRepling.value = true
-    await QueryPostAPI<QAInfo>(QUESTION_API_URL + 'reply', {
+    await QueryPostAPI<QAInfo>(`${QUESTION_API_URL}reply`, {
       Id: id,
-      Message: msg
+      Message: msg,
     })
       .then((data) => {
         if (data.code == 200) {
-          const index = recieveQuestions.value.findIndex((q) => q.id == id)
+          const index = recieveQuestions.value.findIndex(q => q.id == id)
           if (index > -1) {
             recieveQuestions.value[index] = data.data
           }
           message.success('回复成功')
           currentQuestion.value = undefined
-          //replyModalVisiable.value = false
+          // replyModalVisiable.value = false
         } else {
-          message.error('发送失败: ' + data.message)
+          message.error(`发送失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('发送失败: ' + err)
+        message.error(`发送失败: ${err}`)
       })
       .finally(() => {
         isRepling.value = false
       })
   }
   async function read(question: QAInfo, read: boolean) {
-    await QueryGetAPI(QUESTION_API_URL + 'read', {
+    await QueryGetAPI(`${QUESTION_API_URL}read`, {
       id: question.id,
-      read: read ? 'true' : 'false'
+      read: read ? 'true' : 'false',
     })
       .then((data) => {
         if (data.code == 200) {
           question.isReaded = read
           if (read && displayQuestion.value?.id == question.id) {
-            setCurrentQuestion(question) //取消设为当前展示的问题
+            setCurrentQuestion(question) // 取消设为当前展示的问题
           }
         } else {
-          message.error('修改失败: ' + data.message)
+          message.error(`修改失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('修改失败: ' + err)
+        message.error(`修改失败: ${err}`)
       })
   }
   async function favorite(question: QAInfo, fav: boolean) {
-    await QueryGetAPI(QUESTION_API_URL + 'favorite', {
+    await QueryGetAPI(`${QUESTION_API_URL}favorite`, {
       id: question.id,
-      favorite: fav
+      favorite: fav,
     })
       .then((data) => {
         if (data.code == 200) {
           question.isFavorite = fav
         } else {
-          message.error('修改失败: ' + data.message)
+          message.error(`修改失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('修改失败: ' + err)
+        message.error(`修改失败: ${err}`)
       })
   }
   async function approve(question: QAInfo, approve: boolean) {
@@ -309,15 +309,15 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
       message.error('暂时不支持取消审核')
       return
     }
-    await QueryGetAPI(QUESTION_API_URL + 'approve', {
+    await QueryGetAPI(`${QUESTION_API_URL}approve`, {
       id: question.id,
-      approve: approve ? 'true' : 'false'
+      approve: approve ? 'true' : 'false',
     })
       .then((data) => {
         if (data.code == 200) {
           question.reviewResult = undefined
           const trashIndex = trashQuestions.value.findIndex(
-            (q) => q.id == question.id
+            q => q.id == question.id,
           )
           if (trashIndex > -1) {
             trashQuestions.value.splice(trashIndex, 1)
@@ -325,60 +325,60 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
           recieveQuestions.value.unshift(question)
           message.success('已标记为审核通过')
         } else {
-          message.error('修改失败: ' + data.message)
+          message.error(`修改失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('修改失败: ' + err)
+        message.error(`修改失败: ${err}`)
       })
   }
   async function setPublic(pub: boolean) {
     isChangingPublic.value = true
-    await QueryGetAPI(QUESTION_API_URL + 'public', {
+    await QueryGetAPI(`${QUESTION_API_URL}public`, {
       id: currentQuestion.value?.id,
-      public: pub
+      public: pub,
     })
       .then((data) => {
         if (data.code == 200) {
           if (currentQuestion.value) currentQuestion.value.isPublic = pub
           message.success('已修改公开状态')
         } else {
-          message.error('修改失败: ' + data.message)
+          message.error(`修改失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('修改失败: ' + err)
+        message.error(`修改失败: ${err}`)
       })
       .finally(() => {
         isChangingPublic.value = false
       })
   }
   async function blacklist(question: QAInfo) {
-    await QueryGetAPI(ACCOUNT_API_URL + 'black-list/add', {
-      id: question.sender.id
+    await QueryGetAPI(`${ACCOUNT_API_URL}black-list/add`, {
+      id: question.sender.id,
     })
       .then(async (data) => {
         if (data.code == 200) {
-          await QueryGetAPI(QUESTION_API_URL + 'del', {
-            id: question.id
+          await QueryGetAPI(`${QUESTION_API_URL}del`, {
+            id: question.id,
           }).then((data) => {
             if (data.code == 200) {
-              message.success('已拉黑 ' + question.sender.name)
+              message.success(`已拉黑 ${question.sender.name}`)
             } else {
-              message.error('修改失败: ' + data.message)
+              message.error(`修改失败: ${data.message}`)
             }
           })
         } else {
-          message.error('拉黑失败: ' + data.message)
+          message.error(`拉黑失败: ${data.message}`)
         }
       })
       .catch((err) => {
-        message.error('拉黑失败: ' + err)
+        message.error(`拉黑失败: ${err}`)
       })
   }
   async function markAsNormal(question: QAInfo) {
-    await QueryGetAPI(QUESTION_API_URL + 'mark-as-normal', {
-      id: question.id
+    await QueryGetAPI(`${QUESTION_API_URL}mark-as-normal`, {
+      id: question.id,
     })
       .then((data) => {
         if (data.code == 200) {
@@ -387,7 +387,7 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
         }
       })
       .catch((err) => {
-        message.error('标记失败: ' + err)
+        message.error(`标记失败: ${err}`)
       })
   }
   async function setCurrentQuestion(item: QAInfo | undefined) {
@@ -399,20 +399,20 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
     }
     try {
       const data = await QueryGetAPI(
-        QUESTION_API_URL + 'set-current',
+        `${QUESTION_API_URL}set-current`,
         isCurrent || !item
           ? null
           : {
-              id: item.id
-            }
+              id: item.id,
+            },
       )
       if (data.code == 200) {
-        //message.success('设置成功')
+        // message.success('设置成功')
       } else {
-        message.error('设置失败: ' + data.message)
+        message.error(`设置失败: ${data.message}`)
       }
     } catch (err) {
-      message.error('设置失败:' + err)
+      message.error(`设置失败:${err}`)
     }
   }
 
@@ -447,6 +447,6 @@ export const useQuestionBox = defineStore('QuestionBox', () => {
     blacklist,
     markAsNormal,
     setCurrentQuestion,
-    getViolationString
+    getViolationString,
   }
 })
diff --git a/src/store/useRTC.ts b/src/store/useRTC.ts
index f74d787..d4d2cd8 100644
--- a/src/store/useRTC.ts
+++ b/src/store/useRTC.ts
@@ -1,13 +1,14 @@
-import { cookie, useAccount } from '@/api/account'
-import {
+import type {
   BaseRTCClient,
-  MasterRTCClient,
-  SlaveRTCClient
 } from '@/data/RTCClient'
-import { useStorage } from '@vueuse/core'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { cookie, useAccount } from '@/api/account'
+import {
+  MasterRTCClient,
+  SlaveRTCClient,
+} from '@/data/RTCClient'
 
 export const useWebRTC = defineStore('WebRTC', () => {
   const client = ref<BaseRTCClient>()
@@ -42,7 +43,7 @@ export const useWebRTC = defineStore('WebRTC', () => {
               return
             }
             while (!accountInfo.value.id) {
-              await new Promise((resolve) => setTimeout(resolve, 500))
+              await new Promise(resolve => setTimeout(resolve, 500))
             }
             if (client.value) {
               return client.value
@@ -50,12 +51,12 @@ export const useWebRTC = defineStore('WebRTC', () => {
             if (type == 'master') {
               client.value = new MasterRTCClient(
                 accountInfo.value.id.toString(),
-                accountInfo.value.token
+                accountInfo.value.token,
               )
             } else {
               client.value = new SlaveRTCClient(
                 accountInfo.value.id?.toString(),
-                accountInfo.value.token
+                accountInfo.value.token,
               )
             }
             await client.value.Init()
@@ -63,7 +64,7 @@ export const useWebRTC = defineStore('WebRTC', () => {
           } else {
             return useWebRTC()
           }
-        }
+        },
       )
       return useWebRTC()
     } catch (e) {
diff --git a/src/store/useVTsuruHub.ts b/src/store/useVTsuruHub.ts
index b244b14..e0d65c1 100644
--- a/src/store/useVTsuruHub.ts
+++ b/src/store/useVTsuruHub.ts
@@ -1,16 +1,17 @@
-import { useAccount } from '@/api/account'
-import { BASE_HUB_URL } from '@/data/constants'
 import {
   HttpTransportType,
   HubConnectionBuilder,
-  LogLevel
+  LogLevel,
 } from '@microsoft/signalr'
+import type { HubConnection } from '@microsoft/signalr'
 import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { BASE_HUB_URL } from '@/data/constants'
 
 export const useVTsuruHub = defineStore('VTsuruHub', () => {
-  const signalRClient = ref<signalR.HubConnection>()
+  const signalRClient = ref<HubConnection>()
   const isInited = ref(false)
   const isIniting = ref(false)
   const accountInfo = useAccount()
@@ -18,14 +19,18 @@ export const useVTsuruHub = defineStore('VTsuruHub', () => {
   async function connectSignalR() {
     if (isIniting.value) return
     isIniting.value = true
-    while (!accountInfo.value.id || accountInfo.value.id < 1)
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-    //console.log('[Components-Event] 正在连接到 VTsuru 服务器...')
+
+    let currentAccount = accountInfo.value
+    while (!currentAccount || !currentAccount.id || currentAccount.id < 1) {
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      currentAccount = accountInfo.value
+    }
+    // console.log('[Components-Event] 正在连接到 VTsuru 服务器...')
     const connection = new HubConnectionBuilder()
-      .withUrl(BASE_HUB_URL + 'main?token=' + accountInfo.value.token, {
+      .withUrl(`${BASE_HUB_URL}main?token=${currentAccount.token}`, {
         skipNegotiation: true,
         transport: HttpTransportType.WebSockets,
-        logger: LogLevel.Error
+        logger: LogLevel.Error,
       })
       .withAutomaticReconnect([0, 2000, 10000, 30000])
       .withHubProtocol(new MessagePackHubProtocol())
@@ -34,7 +39,7 @@ export const useVTsuruHub = defineStore('VTsuruHub', () => {
       connection.send('Finished')
     })
     connection.on('Disconnect', (reason: unknown) => {
-      console.log('[Hub] 被 VTsuru 服务器断开连接: ' + reason)
+      console.log(`[Hub] 被 VTsuru 服务器断开连接: ${reason}`)
     })
 
     connection.onclose(reconnect)
@@ -45,7 +50,7 @@ export const useVTsuruHub = defineStore('VTsuruHub', () => {
       isInited.value = true
       return true
     } catch (e) {
-      console.log('[Hub] 无法连接到 VTsuru 服务器: ' + e)
+      console.log(`[Hub] 无法连接到 VTsuru 服务器: ${e}`)
       return false
     } finally {
       isIniting.value = false
@@ -62,31 +67,31 @@ export const useVTsuruHub = defineStore('VTsuruHub', () => {
     }
   }
 
-  async function send(methodName: string, ...args: any[]) {
+  async function send(methodName: string, ...args: unknown[]) {
     if (!isInited.value) {
       await connectSignalR()
     }
     signalRClient.value?.send(methodName, ...args)
   }
-  async function invoke<T>(methodName: string, ...args: any[]) {
+  async function invoke<T>(methodName: string, ...args: unknown[]) {
     if (!isInited.value) {
       await connectSignalR()
     }
     return signalRClient.value?.invoke<T>(methodName, ...args)
   }
-  async function on(eventName: string, listener: (args: any) => any) {
+  async function on(eventName: string, listener: (...args: unknown[]) => void) {
     if (!isInited.value) {
       await connectSignalR()
     }
     signalRClient.value?.on(eventName, listener)
   }
-  async function off(eventName: string, listener: (args: any) => any) {
+  async function off(eventName: string, listener: (...args: unknown[]) => void) {
     if (!isInited.value) {
       await connectSignalR()
     }
     signalRClient.value?.off(eventName, listener)
   }
-  async function onreconnected(listener: (id: any) => any) {
+  async function onreconnected(listener: (connectionId?: string) => void) {
     if (!isInited.value) {
       await connectSignalR()
     }
diff --git a/src/store/useWebFetcher.ts b/src/store/useWebFetcher.ts
index 4784275..6557b15 100644
--- a/src/store/useWebFetcher.ts
+++ b/src/store/useWebFetcher.ts
@@ -1,65 +1,64 @@
-import { cookie, useAccount } from '@/api/account';
-import { getEventType, recordEvent, streamingInfo } from '@/client/data/info';
-import { QueryBiliAPI } from '@/client/data/utils';
-import { BASE_HUB_URL, isDev, isTauri } from '@/data/constants';
-import { DirectClientAuthInfo } from '@/data/DanmakuClients/DirectClient';
-import * as signalR from '@microsoft/signalr';
-import * as msgpack from '@microsoft/signalr-protocol-msgpack';
-import { ZstdCodec, ZstdInit } from '@oneidentity/zstd-js/wasm';
-import { platform, version } from '@tauri-apps/plugin-os';
-import { defineStore } from 'pinia';
-import { computed, ref, shallowRef } from 'vue'; // shallowRef 用于非深度响应对象
-import { useRoute } from 'vue-router';
-import { useWebRTC } from './useRTC';
+import type { ZstdCodec } from '@oneidentity/zstd-js/wasm'
+import type { DirectClientAuthInfo } from '@/data/DanmakuClients/DirectClient'
+import * as signalR from '@microsoft/signalr'
+import * as msgpack from '@microsoft/signalr-protocol-msgpack'
+import { encode } from '@msgpack/msgpack'
+import { ZstdInit } from '@oneidentity/zstd-js/wasm'
+import { getVersion } from '@tauri-apps/api/app'
+import { platform, version } from '@tauri-apps/plugin-os'
+import { defineStore } from 'pinia'
+import { computed, ref, shallowRef } from 'vue' // shallowRef 用于非深度响应对象
+import { useRoute } from 'vue-router'
+import { cookie, useAccount } from '@/api/account'
+import { getEventType, recordEvent, streamingInfo } from '@/client/data/info'
+import { onReceivedNotification } from '@/client/data/notification'
 
-import { onReceivedNotification } from '@/client/data/notification';
-import { encode } from "@msgpack/msgpack";
-import { getVersion } from '@tauri-apps/api/app';
-import { useDanmakuClient } from './useDanmakuClient';
+import { QueryBiliAPI } from '@/client/data/utils'
+import { BASE_HUB_URL, isDev, isTauri } from '@/data/constants'
+import { useDanmakuClient } from './useDanmakuClient'
+import { useWebRTC } from './useRTC'
 
 export const useWebFetcher = defineStore('WebFetcher', () => {
-  const route = useRoute();
-  const account = useAccount();
-  const rtc = useWebRTC();
-  const webfetcherType = ref<'openlive' | 'direct'>('openlive'); // 弹幕客户端类型
+  const route = useRoute()
+  const account = useAccount()
+  const rtc = useWebRTC()
+  const webfetcherType = ref<'openlive' | 'direct'>('openlive') // 弹幕客户端类型
   // --- 连接与状态 ---
-  const state = ref<'disconnected' | 'connecting' | 'connected'>('disconnected'); // SignalR 连接状态
-  const startedAt = ref<Date>(); // 本次启动时间
-  const signalRClient = shallowRef<signalR.HubConnection>(); // SignalR 客户端实例 (浅响应)
-  const signalRId = ref<string>(); // SignalR 连接 ID
-  const client = useDanmakuClient();
-  let timer: any; // 事件发送定时器
-  let disconnectedByServer = false;
-  let isFromClient = false; // 是否由Tauri客户端启动
-
-
+  const state = ref<'disconnected' | 'connecting' | 'connected'>('disconnected') // SignalR 连接状态
+  const startedAt = ref<Date>() // 本次启动时间
+  const signalRClient = shallowRef<signalR.HubConnection>() // SignalR 客户端实例 (浅响应)
+  const signalRId = ref<string>() // SignalR 连接 ID
+  const client = useDanmakuClient()
+  let timer: any // 事件发送定时器
+  let disconnectedByServer = false
+  let isFromClient = false // 是否由Tauri客户端启动
 
   // --- 新增: 详细状态与信息 ---
   /** 弹幕客户端内部状态 */
-  const danmakuClientState = ref<'stopped' | 'connecting' | 'connected'>('stopped'); // 更详细的弹幕客户端状态
+  const danmakuClientState = ref<'stopped' | 'connecting' | 'connected'>('stopped') // 更详细的弹幕客户端状态
   /** 弹幕服务器连接地址 */
-  const danmakuServerUrl = ref<string>();
+  const danmakuServerUrl = ref<string>()
   /** SignalR 连接 ID */
-  const signalRConnectionId = ref<string>();
+  const signalRConnectionId = ref<string>()
   // const heartbeatLatency = ref<number>(null); // 心跳延迟暂不实现，复杂度较高
 
   // --- 事件处理 ---
-  const events: string[] = []; // 待发送事件队列
+  const events: string[] = [] // 待发送事件队列
 
   // --- 新增: 会话统计 (在 Start 时重置) ---
   /** 本次会话处理的总事件数 */
-  const sessionEventCount = ref(0);
+  const sessionEventCount = ref(0)
   /** 本次会话各类型事件计数 */
-  const sessionEventTypeCounts = ref<{ [key: string]: number; }>({});
+  const sessionEventTypeCounts = ref<{ [key: string]: number }>({})
   /** 本次会话成功上传次数 */
-  const successfulUploads = ref(0);
+  const successfulUploads = ref(0)
   /** 本次会话失败上传次数 */
-  const failedUploads = ref(0);
+  const failedUploads = ref(0)
   /** 本次会话发送的总字节数 (压缩后) */
-  const bytesSentSession = ref(0);
-  let zstd: ZstdCodec | undefined = undefined; // Zstd 编码器实例 (如果需要压缩)
+  const bytesSentSession = ref(0)
+  let zstd: ZstdCodec | undefined // Zstd 编码器实例 (如果需要压缩)
 
-  const prefix = computed(() => isFromClient ? '[web-fetcher-iframe] ' : '[web-fetcher] ');
+  const prefix = computed(() => isFromClient ? '[web-fetcher-iframe] ' : '[web-fetcher] ')
 
   /**
    * 启动 WebFetcher 服务
@@ -67,97 +66,98 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
   async function Start(
     type: 'openlive' | 'direct' = 'openlive',
     directAuthInfo?: DirectClientAuthInfo,
-    _isFromClient: boolean = false
-  ): Promise<{ success: boolean; message: string; }> {
+    _isFromClient: boolean = false,
+  ): Promise<{ success: boolean, message: string }> {
     if (state.value === 'connected' || state.value === 'connecting') {
-      console.log(prefix.value + '已经启动，无需重复启动');
-      return { success: true, message: '已启动' };
+      console.log(`${prefix.value}已经启动，无需重复启动`)
+      return { success: true, message: '已启动' }
     }
     try {
-      zstd ??= await ZstdInit();
-
+      zstd ??= await ZstdInit()
     } catch (error) {
-      console.error(prefix.value + '当前浏览器不支持zstd压缩, 回退到原始数据传输');
+      console.error(`${prefix.value}当前浏览器不支持zstd压缩, 回退到原始数据传输`)
     }
-    webfetcherType.value = type; // 设置弹幕客户端类型
+    webfetcherType.value = type // 设置弹幕客户端类型
     // 重置会话统计数据
-    resetSessionStats();
-    startedAt.value = new Date();
-    isFromClient = _isFromClient;
-    state.value = 'connecting'; // 设置为连接中状态
+    resetSessionStats()
+    startedAt.value = new Date()
+    isFromClient = _isFromClient
+    state.value = 'connecting' // 设置为连接中状态
 
     // 使用 navigator.locks 确保同一时间只有一个 Start 操作执行
     const result = await navigator.locks.request('webFetcherStartLock', async () => {
-      console.log(prefix.value + '开始启动...');
+      console.log(`${prefix.value}开始启动...`)
       while (!(await connectSignalR())) {
-        console.log(prefix.value + '连接 SignalR 失败, 5秒后重试');
-        await new Promise((resolve) => setTimeout(resolve, 5000));
+        console.log(`${prefix.value}连接 SignalR 失败, 5秒后重试`)
+        await new Promise(resolve => setTimeout(resolve, 5000))
         // 如果用户手动停止，则退出重试循环
-        if (state.value === 'disconnected') return { success: false, message: '用户手动停止' };
+        if (state.value === 'disconnected') return { success: false, message: '用户手动停止' }
       }
 
-      let danmakuResult = await connectDanmakuClient(type, directAuthInfo);
+      let danmakuResult = await connectDanmakuClient(type, directAuthInfo)
       while (!danmakuResult?.success) {
-        console.log(prefix.value + '弹幕客户端启动失败, 5秒后重试');
-        await new Promise((resolve) => setTimeout(resolve, 5000));
+        console.log(`${prefix.value}弹幕客户端启动失败, 5秒后重试`)
+        await new Promise(resolve => setTimeout(resolve, 5000))
         // 如果用户手动停止，则退出重试循环
-        if (state.value === 'disconnected') return { success: false, message: '用户手动停止' };
-        danmakuResult = await connectDanmakuClient(type, directAuthInfo);
+        if (state.value === 'disconnected') return { success: false, message: '用户手动停止' }
+        danmakuResult = await connectDanmakuClient(type, directAuthInfo)
       }
 
       // 只有在两个连接都成功后才设置为 connected
-      state.value = 'connected';
-      disconnectedByServer = false;
-      console.log(prefix.value + '启动成功');
-      return { success: true, message: '启动成功' };
-    });
+      state.value = 'connected'
+      disconnectedByServer = false
+      console.log(`${prefix.value}启动成功`)
+      return { success: true, message: '启动成功' }
+    })
 
     // 如果启动过程中因为手动停止而失败，需要确保状态是 disconnected
     if (!result.success) {
-      Stop(); // 确保清理资源
-      return { success: false, message: result.message || '启动失败' };
+      Stop() // 确保清理资源
+      return { success: false, message: result.message || '启动失败' }
     }
 
-    return result;
+    return result
   }
 
   /**
    * 停止 WebFetcher 服务
    */
   function Stop() {
-    if (state.value === 'disconnected') return;
+    if (state.value === 'disconnected') return
 
-    console.log(prefix.value + '正在停止...');
-    state.value = 'disconnected'; // 立即设置状态，防止重连逻辑触发
+    console.log(`${prefix.value}正在停止...`)
+    state.value = 'disconnected' // 立即设置状态，防止重连逻辑触发
 
     // 清理定时器
-    if (timer) { clearInterval(timer); timer = undefined; }
+    if (timer) {
+      clearInterval(timer); timer = undefined
+    }
 
     // 停止弹幕客户端
-    client.dispose();
-    danmakuClientState.value = 'stopped';
-    danmakuServerUrl.value = undefined;
+    client.dispose()
+    danmakuClientState.value = 'stopped'
+    danmakuServerUrl.value = undefined
 
     // 停止 SignalR 连接
-    signalRClient.value?.stop();
-    signalRClient.value = undefined;
-    signalRConnectionId.value = undefined;
+    signalRClient.value?.stop()
+    signalRClient.value = undefined
+    signalRConnectionId.value = undefined
 
     // 清理状态
-    startedAt.value = undefined;
-    events.length = 0; // 清空事件队列
+    startedAt.value = undefined
+    events.length = 0 // 清空事件队列
     // resetSessionStats(); // 会话统计在下次 Start 时重置
 
-    console.log(prefix.value + '已停止');
+    console.log(`${prefix.value}已停止`)
   }
 
   /** 重置会话统计数据 */
   function resetSessionStats() {
-    sessionEventCount.value = 0;
-    sessionEventTypeCounts.value = {};
-    successfulUploads.value = 0;
-    failedUploads.value = 0;
-    bytesSentSession.value = 0;
+    sessionEventCount.value = 0
+    sessionEventTypeCounts.value = {}
+    successfulUploads.value = 0
+    failedUploads.value = 0
+    bytesSentSession.value = 0
   }
 
   /**
@@ -165,180 +165,177 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
    */
   async function connectDanmakuClient(
     type: 'openlive' | 'direct',
-    directConnectInfo?: DirectClientAuthInfo
+    directConnectInfo?: DirectClientAuthInfo,
   ) {
     if (client.state !== 'waiting') {
-      console.log(prefix.value + '弹幕客户端已连接或正在连接');
-      return { success: true, message: '弹幕客户端已启动' };
+      console.log(`${prefix.value}弹幕客户端已连接或正在连接`)
+      return { success: true, message: '弹幕客户端已启动' }
     }
 
-    console.log(prefix.value + '正在连接弹幕客户端...');
-    danmakuClientState.value = 'connecting';
+    console.log(`${prefix.value}正在连接弹幕客户端...`)
+    danmakuClientState.value = 'connecting'
 
     if (type === 'openlive') {
-      await client.initOpenlive();
+      await client.initOpenlive()
     } else {
       if (!directConnectInfo) {
-        danmakuClientState.value = 'stopped';
-        console.error(prefix.value + '未提供直连弹幕客户端认证信息');
-        return { success: false, message: '未提供弹幕客户端认证信息' };
+        danmakuClientState.value = 'stopped'
+        console.error(`${prefix.value}未提供直连弹幕客户端认证信息`)
+        return { success: false, message: '未提供弹幕客户端认证信息' }
       }
-      await client.initDirect(directConnectInfo);
+      await client.initDirect(directConnectInfo)
     }
 
     // 监听所有事件，用于处理和转发
-    client?.on('all', onGetDanmakus);
+    client?.on('all', onGetDanmakus)
 
     if (client.connected) {
-      console.log(prefix.value + '弹幕客户端连接成功, 开始监听弹幕');
-      danmakuClientState.value = 'connected'; // 明确设置状态
-      danmakuServerUrl.value = client.danmakuClient!.serverUrl; // 获取服务器地址
+      console.log(`${prefix.value}弹幕客户端连接成功, 开始监听弹幕`)
+      danmakuClientState.value = 'connected' // 明确设置状态
+      danmakuServerUrl.value = client.danmakuClient!.serverUrl // 获取服务器地址
       // 启动事件发送定时器 (如果之前没有启动)
-      timer ??= setInterval(sendEvents, 2000); // 每 2 秒尝试发送一次事件
-      return { success: true, message: '弹幕客户端已启动' };
+      timer ??= setInterval(sendEvents, 2000) // 每 2 秒尝试发送一次事件
+      return { success: true, message: '弹幕客户端已启动' }
     } else {
-      console.error(prefix.value + '弹幕客户端启动失败');
-      danmakuClientState.value = 'stopped';
-      danmakuServerUrl.value = undefined;
-      client.dispose(); // 启动失败，清理实例，下次会重建
-      return { success: false, message: '弹幕客户端启动失败' };
-
+      console.error(`${prefix.value}弹幕客户端启动失败`)
+      danmakuClientState.value = 'stopped'
+      danmakuServerUrl.value = undefined
+      client.dispose() // 启动失败，清理实例，下次会重建
+      return { success: false, message: '弹幕客户端启动失败' }
     }
   }
 
-  let isConnectingSignalR = false;
+  let isConnectingSignalR = false
   /**
    * 连接 SignalR 服务器
    */
   async function connectSignalR(): Promise<boolean> {
     if (isConnectingSignalR) {
-      return false;
+      return false
     }
-    isConnectingSignalR = true;
+    isConnectingSignalR = true
     if (signalRClient.value && signalRClient.value.state !== signalR.HubConnectionState.Disconnected) {
-      console.log(prefix.value + "SignalR 已连接或正在连接");
-      return true;
+      console.log(`${prefix.value}SignalR 已连接或正在连接`)
+      return true
     }
-    signalRClient.value?.stop();
-    signalRClient.value = undefined;
-    signalRConnectionId.value = undefined;
-    console.log(prefix.value + '正在连接到 vtsuru 服务器...');
+    signalRClient.value?.stop()
+    signalRClient.value = undefined
+    signalRConnectionId.value = undefined
+    console.log(`${prefix.value}正在连接到 vtsuru 服务器...`)
     const connection = new signalR.HubConnectionBuilder()
-      .withUrl(BASE_HUB_URL + 'web-fetcher?token=' + (route.query.token ?? account.value.token), { // 使用 account.token
+      .withUrl(`${BASE_HUB_URL}web-fetcher?token=${route.query.token ?? account.value.token}`, { // 使用 account.token
         headers: { Authorization: `Bearer ${cookie.value?.cookie}` },
         skipNegotiation: true,
-        transport: signalR.HttpTransportType.WebSockets
+        transport: signalR.HttpTransportType.WebSockets,
       })
       .withAutomaticReconnect({
-        nextRetryDelayInMilliseconds: retryContext => {
-          return retryContext.elapsedMilliseconds < 60 * 1000 ? 10 * 1000 : 30 * 1000;
-        }
+        nextRetryDelayInMilliseconds: (retryContext) => {
+          return retryContext.elapsedMilliseconds < 60 * 1000 ? 10 * 1000 : 30 * 1000
+        },
       }) // 自动重连策略
       .withHubProtocol(new msgpack.MessagePackHubProtocol()) // 使用 MessagePack 协议
-      .build();
+      .build()
 
     connection.on('Disconnect', (reason: unknown) => {
-      console.log(prefix.value + '被服务器断开连接: ' + reason);
-      disconnectedByServer = true; // 标记是服务器主动断开
-      window.$message.error(`被服务器要求断开连接: ${reason}`);
-    });
+      console.log(`${prefix.value}被服务器断开连接: ${reason}`)
+      disconnectedByServer = true // 标记是服务器主动断开
+      window.$message.error(`被服务器要求断开连接: ${reason}`)
+    })
     // --- 尝试启动连接 ---
     try {
-      await connection.start();
-      signalRConnectionId.value = connection.connectionId ?? undefined; // 保存连接ID
-      signalRId.value = await sendSelfInfo(connection); // 发送客户端信息
-      await connection.send('Finished'); // 通知服务器已准备好
-      signalRClient.value = connection; // 保存实例
+      await connection.start()
+      signalRConnectionId.value = connection.connectionId ?? undefined // 保存连接ID
+      signalRId.value = await sendSelfInfo(connection) // 发送客户端信息
+      await connection.send('Finished') // 通知服务器已准备好
+      signalRClient.value = connection // 保存实例
 
       // --- SignalR 事件监听 ---
-      connection.onreconnecting(error => {
-        console.log(prefix.value + `与服务器断开，正在尝试重连... ${error?.message || ''}`);
-        state.value = 'connecting'; // 更新状态为连接中
-        signalRConnectionId.value = undefined; // 连接断开，ID失效
-      });
+      connection.onreconnecting((error) => {
+        console.log(`${prefix.value}与服务器断开，正在尝试重连... ${error?.message || ''}`)
+        state.value = 'connecting' // 更新状态为连接中
+        signalRConnectionId.value = undefined // 连接断开，ID失效
+      })
 
-      connection.onreconnected(async connectionId => {
-        console.log(prefix.value + `与服务器重新连接成功! ConnectionId: ${connectionId}`);
-        signalRConnectionId.value = connectionId ?? undefined;
-        state.value = 'connected'; // 更新状态为已连接
-        signalRId.value = connectionId ?? await sendSelfInfo(connection); // 更新连接ID
-        connection.send('Reconnected').catch(err => console.error(prefix.value + "Send Reconnected failed: " + err));
-      });
+      connection.onreconnected(async (connectionId) => {
+        console.log(`${prefix.value}与服务器重新连接成功! ConnectionId: ${connectionId}`)
+        signalRConnectionId.value = connectionId ?? undefined
+        state.value = 'connected' // 更新状态为已连接
+        signalRId.value = connectionId ?? await sendSelfInfo(connection) // 更新连接ID
+        connection.send('Reconnected').catch(err => console.error(`${prefix.value}Send Reconnected failed: ${err}`))
+      })
 
       connection.onclose(async (error) => {
         // 只有在不是由 Stop() 或服务器明确要求断开时才记录错误并尝试独立重连（虽然 withAutomaticReconnect 应该处理）
         if (state.value !== 'disconnected' && !disconnectedByServer) {
-          console.error(prefix.value + `与服务器连接关闭: ${error?.message || '未知原因'}. 30秒后将自动重启`);
-          //state.value = 'connecting'; // 标记为连接中，等待自动重连
-          //signalRConnectionId.value = undefined;
-          //await connection.start();
+          console.error(`${prefix.value}与服务器连接关闭: ${error?.message || '未知原因'}. 30秒后将自动重启`)
+          // state.value = 'connecting'; // 标记为连接中，等待自动重连
+          // signalRConnectionId.value = undefined;
+          // await connection.start();
           // 停止 SignalR 连接
-          signalRClient.value?.stop();
-          signalRClient.value = undefined;
-          signalRConnectionId.value = undefined;
+          signalRClient.value?.stop()
+          signalRClient.value = undefined
+          signalRConnectionId.value = undefined
           setTimeout(() => {
-            console.log(prefix.value + '尝试重启...');
-            connectSignalR(); // 30秒后尝试重启
-          }, 30 * 1000); // 30秒后自动重启
+            console.log(`${prefix.value}尝试重启...`)
+            connectSignalR() // 30秒后尝试重启
+          }, 30 * 1000) // 30秒后自动重启
         } else if (disconnectedByServer) {
-          console.log(prefix.value + `连接已被服务器关闭.`);
-          //Stop(); // 服务器要求断开，则彻底停止
+          console.log(`${prefix.value}连接已被服务器关闭.`)
+          // Stop(); // 服务器要求断开，则彻底停止
         } else {
-          console.log(prefix.value + `连接已手动关闭.`);
+          console.log(`${prefix.value}连接已手动关闭.`)
         }
-      });
-      connection.on('Request', async (url: string, method: string, body: string, useCookie: boolean) => onRequest(url, method, body, useCookie));
-      connection.on('Notification', (type: string, data: any) => { onReceivedNotification(type, data); });
+      })
+      connection.on('Request', async (url: string, method: string, body: string, useCookie: boolean) => onRequest(url, method, body, useCookie))
+      connection.on('Notification', (type: string, data: any) => {
+        onReceivedNotification(type, data)
+      })
 
-      console.log(prefix.value + '已连接到 vtsuru 服务器, ConnectionId: ' + signalRId.value); // 调试输出连接状态
+      console.log(`${prefix.value}已连接到 vtsuru 服务器, ConnectionId: ${signalRId.value}`) // 调试输出连接状态
       // state.value = 'connected'; // 状态将在 Start 函数末尾统一设置
-      return true;
+      return true
     } catch (e) {
-      console.error(prefix.value + '无法连接到 vtsuru 服务器: ' + e);
-      signalRConnectionId.value = undefined;
-      signalRClient.value = undefined;
+      console.error(`${prefix.value}无法连接到 vtsuru 服务器: ${e}`)
+      signalRConnectionId.value = undefined
+      signalRClient.value = undefined
       // state.value = 'disconnected'; // 保持 connecting 或由 Start 控制
-      return false;
+      return false
     } finally {
-      isConnectingSignalR = false;
+      isConnectingSignalR = false
     }
   }
   async function sendSelfInfo(client: signalR.HubConnection) {
-    return client.invoke('SetSelfInfo',
-      isFromClient ? `tauri ${platform()} ${version()}` : navigator.userAgent,
-      isFromClient ? 'tauri' : 'web',
-      isFromClient ? await getVersion() : '1.0.0',
-      webfetcherType.value === 'direct');
+    return client.invoke('SetSelfInfo', isFromClient ? `tauri ${platform()} ${version()}` : navigator.userAgent, isFromClient ? 'tauri' : 'web', isFromClient ? await getVersion() : '1.0.0', webfetcherType.value === 'direct')
+  }
+  interface ResponseFetchRequestData {
+    Message: string
+    Success: boolean
+    Data: string
   }
-  type ResponseFetchRequestData = {
-    Message: string;
-    Success: boolean;
-    Data: string;
-  };
   async function onRequest(url: string, method: string, body: string, useCookie: boolean) {
     if (!isTauri()) {
-      console.error(prefix.value + '非Tauri环境下无法处理请求: ' + url);
+      console.error(`${prefix.value}非Tauri环境下无法处理请求: ${url}`)
       return {
         Message: '非Tauri环境',
         Success: false,
-        Data: ''
-      };
+        Data: '',
+      }
     }
-    const result = await QueryBiliAPI(url, method, body, useCookie);
-    console.log(`${prefix.value}请求 (${method})${url}: `, result.statusText);
+    const result = await QueryBiliAPI(url, method, body, useCookie)
+    console.log(`${prefix.value}请求 (${method})${url}: `, result.statusText)
     if (result.ok) {
-      const data = await result.text();
+      const data = await result.text()
       return {
         Message: '请求成功',
         Success: true,
-        Data: data
-      } as ResponseFetchRequestData;
+        Data: data,
+      } as ResponseFetchRequestData
     } else {
       return {
-        Message: '请求失败: ' + result.statusText,
+        Message: `请求失败: ${result.statusText}`,
         Success: false,
-        Data: ''
-      } as ResponseFetchRequestData;
+        Data: '',
+      } as ResponseFetchRequestData
     }
   }
 
@@ -366,80 +363,81 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
   function onGetDanmakus(command: any) {
     if (isFromClient) {
       // 1. 解析事件类型
-      const eventType = getEventType(command);
+      const eventType = getEventType(command)
 
       // 2. 记录到每日统计 (调用 statistics 模块)
-      recordEvent(eventType);
+      recordEvent(eventType)
 
       // 3. 更新会话统计
-      sessionEventCount.value++;
-      sessionEventTypeCounts.value[eventType] = (sessionEventTypeCounts.value[eventType] || 0) + 1;
+      sessionEventCount.value++
+      sessionEventTypeCounts.value[eventType] = (sessionEventTypeCounts.value[eventType] || 0) + 1
     }
     // 4. 加入待发送队列 (确保是字符串)
-    const eventString = typeof command === 'string' ? command : JSON.stringify(command);
+    const eventString = typeof command === 'string' ? command : JSON.stringify(command)
     if (isDev) {
-      //console.log(prefix.value + '收到弹幕事件: ' + eventString); // 开发模式下打印所有事件 (可选)
+      // console.log(prefix.value + '收到弹幕事件: ' + eventString); // 开发模式下打印所有事件 (可选)
     }
     if (events.length >= 10000) {
-      events.shift(); // 如果队列过长，移除最旧的事件
+      events.shift() // 如果队列过长，移除最旧的事件
     }
-    events.push(eventString);
+    events.push(eventString)
   }
-  let updateCount = 0;
+  let updateCount = 0
   /**
    * 定期将队列中的事件发送到服务器
    */
   async function sendEvents() {
-    updateCount++;
+    updateCount++
     // 确保 SignalR 已连接
     if (!signalRClient.value || signalRClient.value.state !== signalR.HubConnectionState.Connected) {
-      return;
+      return
     }
     // 如果没有事件，则不发送
     if (events.length === 0) {
-      return;
+      return
     }
     if (updateCount % 60 == 0) {
       // 每60秒更新一次连接信息
       if (signalRClient.value) {
-        await sendSelfInfo(signalRClient.value);
+        await sendSelfInfo(signalRClient.value)
       }
     }
 
     // 批量处理事件，每次最多发送20条
-    const batchSize = 30;
-    const batch = events.slice(0, batchSize);
+    const batchSize = 30
+    const batch = events.slice(0, batchSize)
 
     try {
-
-      let result: { Success: boolean; Message: string; } = { Success: false, Message: '' };
-      let length = 0;
-      let eventCharLength = batch.map(event => event.length).reduce((a, b) => a + b, 0); // 计算字符长度
+      let result: { Success: boolean, Message: string } = { Success: false, Message: '' }
+      let length = 0
+      const eventCharLength = batch.map(event => event.length).reduce((a, b) => a + b, 0) // 计算字符长度
       if (zstd && eventCharLength > 100) {
-        const data = zstd.ZstdSimple.compress(encode(batch), 11);
-        length = data.length;
-        result = await signalRClient.value.invoke<{ Success: boolean; Message: string; }>(
-          'UploadEventsCompressedV2', data
-        );
-      }
-      else {
-        length = new TextEncoder().encode(batch.join()).length;
-        result = await signalRClient.value.invoke<{ Success: boolean; Message: string; }>(
-          'UploadEvents', batch, webfetcherType.value === 'direct' ? true : false
-        );
+        const data = zstd.ZstdSimple.compress(encode(batch), 11)
+        length = data.length
+        result = await signalRClient.value.invoke<{ Success: boolean, Message: string }>(
+          'UploadEventsCompressedV2',
+          data,
+        )
+      } else {
+        length = new TextEncoder().encode(batch.join()).length
+        result = await signalRClient.value.invoke<{ Success: boolean, Message: string }>(
+          'UploadEvents',
+          batch,
+          webfetcherType.value === 'direct',
+        )
       }
 
       if (result?.Success) {
-        events.splice(0, batch.length); // 从队列中移除已成功发送的事件
-        successfulUploads.value++;
-        bytesSentSession.value += length;
+        events.splice(0, batch.length) // 从队列中移除已成功发送的事件
+        successfulUploads.value++
+        bytesSentSession.value += length
       } else {
-        failedUploads.value++;
-        console.error(prefix.value + '上传弹幕失败: ' + result?.Message);
+        failedUploads.value++
+        console.error(`${prefix.value}上传弹幕失败: ${result?.Message}`)
       }
     } catch (err) {
-      failedUploads.value++;
-      console.error(prefix.value + '发送事件时出错: ' + err);
+      failedUploads.value++
+      console.error(`${prefix.value}发送事件时出错: ${err}`)
     }
   }
 
@@ -459,7 +457,7 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
     // 连接详情
     danmakuClientState,
     danmakuServerUrl,
-    //signalRConnectionId,
+    // signalRConnectionId,
     // heartbeatLatency, // 暂不暴露
 
     // 会话统计
@@ -471,6 +469,6 @@ export const useWebFetcher = defineStore('WebFetcher', () => {
 
     // 实例 (谨慎暴露，主要用于调试或特定场景)
     signalRClient: computed(() => signalRClient.value), // 返回计算属性以防直接修改
-    client
-  };
-});
\ No newline at end of file
+    client,
+  }
+})
diff --git a/src/types/gamepad.ts b/src/types/gamepad.ts
index d66e8f3..1650aec 100644
--- a/src/types/gamepad.ts
+++ b/src/types/gamepad.ts
@@ -1,90 +1,103 @@
 // src/types/gamepad.ts
 
-import { DefineComponent, FunctionalComponent, SVGAttributes } from "vue";
+import type { FunctionalComponent, SVGAttributes } from 'vue'
 
 export interface Position {
-  top: string;    // e.g., '50%'
-  left: string;   // e.g., '25%'
-  width: string;  // e.g., '15%'
-  height?: string; // e.g., '10%', optional
+  top: string // e.g., '50%'
+  left: string // e.g., '25%'
+  width: string // e.g., '15%'
+  height?: string // e.g., '10%', optional
 }
 
 // 使用 as const 来获得更精确的字符串字面量类型，类似于枚举
 export const LogicalButtonsList = [
-  'ACTION_DOWN', 'ACTION_RIGHT', 'ACTION_LEFT', 'ACTION_UP',
-  'LEFT_SHOULDER_1', 'RIGHT_SHOULDER_1', 'LEFT_SHOULDER_2', 'RIGHT_SHOULDER_2',
-  'SELECT', 'START', 'LEFT_STICK_PRESS', 'RIGHT_STICK_PRESS',
-  'DPAD_UP', 'DPAD_DOWN', 'DPAD_LEFT', 'DPAD_RIGHT',
-  'HOME', 'PS_TOUCHPAD', 'NINTENDO_CAPTURE',
-] as const;
+  'ACTION_DOWN',
+  'ACTION_RIGHT',
+  'ACTION_LEFT',
+  'ACTION_UP',
+  'LEFT_SHOULDER_1',
+  'RIGHT_SHOULDER_1',
+  'LEFT_SHOULDER_2',
+  'RIGHT_SHOULDER_2',
+  'SELECT',
+  'START',
+  'LEFT_STICK_PRESS',
+  'RIGHT_STICK_PRESS',
+  'DPAD_UP',
+  'DPAD_DOWN',
+  'DPAD_LEFT',
+  'DPAD_RIGHT',
+  'HOME',
+  'PS_TOUCHPAD',
+  'NINTENDO_CAPTURE',
+] as const
 
 // 从上面的数组生成联合类型
-export type LogicalButton = typeof LogicalButtonsList[number];
+export type LogicalButton = typeof LogicalButtonsList[number]
 
 // 用于摇杆的特定逻辑名 (区别于按键的 LogicalButton)
-export type LogicalStickName = 'LEFT_STICK' | 'RIGHT_STICK';
+export type LogicalStickName = 'LEFT_STICK' | 'RIGHT_STICK'
 
 interface BaseComponentConfig {
-  svg: FunctionalComponent<SVGAttributes>; 
-  position: Position;
+  svg: FunctionalComponent<SVGAttributes>
+  position: Position
 }
 
 export interface ButtonComponentConfig extends BaseComponentConfig {
-  type: 'button';
-  logicalButton: LogicalButton; // 对应 LogicalButtons 中的一个
-  name: string; // 显示名称，如 "A", "Cross"
+  type: 'button'
+  logicalButton: LogicalButton // 对应 LogicalButtons 中的一个
+  name: string // 显示名称，如 "A", "Cross"
 }
 
 export interface StickComponentConfig extends BaseComponentConfig {
-  type: 'stick';
-  logicalButton: LogicalStickName; // 'LEFT_STICK' or 'RIGHT_STICK'
+  type: 'stick'
+  logicalButton: LogicalStickName // 'LEFT_STICK' or 'RIGHT_STICK'
 }
 
-export type GamepadComponentConfig = ButtonComponentConfig | StickComponentConfig;
+export type GamepadComponentConfig = ButtonComponentConfig | StickComponentConfig
 
 export interface GamepadConfig {
-  name: string;
-  bodySvg: FunctionalComponent<SVGAttributes>;
-  aspectRatio: string; // e.g., '1000/625'
-  components: GamepadComponentConfig[];
-  defaultViewBox: string;
+  name: string
+  bodySvg: FunctionalComponent<SVGAttributes>
+  aspectRatio: string // e.g., '1000/625'
+  components: GamepadComponentConfig[]
+  defaultViewBox: string
 }
 
-export type GamepadType = 'xbox' | 'ps' | 'nintendo'; // 或者更通用的 string
-
-export type AllGamepadConfigs = Record<GamepadType, GamepadConfig>;
+export type GamepadType = 'xbox' | 'ps' | 'nintendo' // 或者更通用的 string
 
+export type AllGamepadConfigs = Record<GamepadType, GamepadConfig>
 
 // --- Types for useGamepad composable ---
 export interface ButtonInputState {
-  pressed: boolean;
-  value: number; // For analog buttons/triggers
+  pressed: boolean
+  value: number // For analog buttons/triggers
 }
 
 export interface StickInputState {
-  x: number;
-  y: number;
+  x: number
+  y: number
 }
 
-export type NormalizedButtonsInputState = Partial<Record<LogicalButton, ButtonInputState>>;
+export type NormalizedButtonsInputState = Partial<Record<LogicalButton, ButtonInputState>>
 // 使用 Partial 是因为并非所有手柄都会映射所有 LogicalButton
 
 export interface NormalizedSticksInputState {
-  LEFT_STICK: StickInputState;
-  RIGHT_STICK: StickInputState;
+  LEFT_STICK: StickInputState
+  RIGHT_STICK: StickInputState
 }
 
 export interface NormalizedGamepadState {
-  buttons: NormalizedButtonsInputState;
-  sticks: NormalizedSticksInputState;
+  buttons: NormalizedButtonsInputState
+  sticks: NormalizedSticksInputState
 }
 
 export interface RawGamepadState {
-  buttons: readonly GamepadButton[]; // GamepadButton is a browser native type
-  axes: readonly number[];
+  buttons: readonly GamepadButton[] // GamepadButton is a browser native type
+  axes: readonly number[]
 }
 
 export interface GamepadConnectionInfo {
-  id: string;
-  mapping: string; // GamepadMappingType is a browser native type
-}
\ No newline at end of file
+  id: string
+  mapping: string // GamepadMappingType is a browser native type
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index d05d9ee..c6e8a09 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1 +1 @@
-declare const __BUILD_TIME__: string;
+declare const __BUILD_TIME__: string
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 3c07950..afc0d3d 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTimelineItem, NTag, NIcon } from 'naive-ui'
-import { h, computed } from 'vue'
-import { CodeOutline, ServerOutline, HeartOutline, LogoGithub } from '@vicons/ionicons5'
+import { CodeOutline, HeartOutline, LogoGithub, ServerOutline } from '@vicons/ionicons5'
 import { formatDistanceToNow } from 'date-fns'
 import { zhCN } from 'date-fns/locale'
+import { NButton, NCard, NDivider, NIcon, NLayoutContent, NSpace, NTag, NText, NTimeline, NTimelineItem } from 'naive-ui'
+import { computed } from 'vue'
 
 // 获取编译时间
 const buildTime = computed(() => {
@@ -11,16 +11,17 @@ const buildTime = computed(() => {
     const buildDate = new Date(__BUILD_TIME__)
     return {
       date: buildDate.toLocaleString('zh-CN'),
-      relative: formatDistanceToNow(buildDate, { addSuffix: true, locale: zhCN })
+      relative: formatDistanceToNow(buildDate, { addSuffix: true, locale: zhCN }),
     }
   } catch {
     return {
       date: '未知',
-      relative: '未知'
+      relative: '未知',
     }
   }
 })
 </script>
+
 <template>
   <NLayoutContent style="height: 100vh; padding: 20px 0;">
     <NSpace
diff --git a/src/views/BiliAuthView.vue b/src/views/BiliAuthView.vue
index d429a92..be30b01 100644
--- a/src/views/BiliAuthView.vue
+++ b/src/views/BiliAuthView.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import { QueryGetAPI } from '@/api/query'
-import { BILI_AUTH_API_URL, CURRENT_HOST } from '@/data/constants'
-import { useBiliAuth } from '@/store/useBiliAuth'
-import { useStorage, useBreakpoints as useVueUseBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import { breakpointsTailwind, useStorage, useBreakpoints as useVueUseBreakpoints } from '@vueuse/core'
 import {
   NAlert,
   NButton,
   NCard,
   NCountdown,
-  NFlex,
   NInput,
   NInputGroup,
   NPopconfirm,
-  NSpace,
   NSpin,
   NStep,
   NSteps,
@@ -21,8 +16,11 @@ import {
 } from 'naive-ui'
 import { v4 as uuidv4 } from 'uuid'
 import { computed, onMounted, ref } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import { BILI_AUTH_API_URL, CURRENT_HOST } from '@/data/constants'
+import { useBiliAuth } from '@/store/useBiliAuth'
 
-type AuthStartModel = {
+interface AuthStartModel {
   code: string
   endAt: number
   startAt: number
@@ -50,7 +48,7 @@ const timeOut = ref(false)
 const timer = ref()
 
 function onStartVerify() {
-  QueryGetAPI<AuthStartModel>(BILI_AUTH_API_URL + 'start', {
+  QueryGetAPI<AuthStartModel>(`${BILI_AUTH_API_URL}start`, {
     key: guidKey.value,
   }).then((data) => {
     if (data.code == 200) {
@@ -60,12 +58,12 @@ function onStartVerify() {
       timer.value = setInterval(checkStatus, 2500)
       startModel.value = data.data
     } else {
-      message.error('无法开启认证流程: ' + data.message)
+      message.error(`无法开启认证流程: ${data.message}`)
     }
   })
 }
 async function checkStatus() {
-  const data = await QueryGetAPI(BILI_AUTH_API_URL + 'status', {
+  const data = await QueryGetAPI(`${BILI_AUTH_API_URL}status`, {
     key: guidKey.value,
   })
   if (data.code == 201) {
@@ -203,7 +201,7 @@ onMounted(async () => {
                 <NButton
                   type="info"
                   tag="a"
-                  :href="'https://live.bilibili.com/' + startModel?.targetRoomId"
+                  :href="`https://live.bilibili.com/${startModel?.targetRoomId}`"
                   target="_blank"
                   class="live-room-button"
                   size="large"
diff --git a/src/views/ChangePasswordView.vue b/src/views/ChangePasswordView.vue
index 387d9ed..711aca5 100644
--- a/src/views/ChangePasswordView.vue
+++ b/src/views/ChangePasswordView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { QueryGetAPI } from '@/api/query'
-import { ACCOUNT_API_URL } from '@/data/constants'
-import router from '@/router'
 import { NButton, NCard, NInput, NLayoutContent, NSpace, useMessage } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { QueryGetAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import router from '@/router'
 
 const password = ref('')
 const password2 = ref('')
@@ -21,7 +21,7 @@ function changePassword() {
     return
   }
   isLoading.value = true
-  QueryGetAPI(ACCOUNT_API_URL + 'verify/reset-password', {
+  QueryGetAPI(`${ACCOUNT_API_URL}verify/reset-password`, {
     key: key.value,
     password: password.value,
   })
diff --git a/src/views/FeedbackManage.vue b/src/views/FeedbackManage.vue
index b1eac76..052ce42 100644
--- a/src/views/FeedbackManage.vue
+++ b/src/views/FeedbackManage.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { FeedbackStatus, FeedbackType, ResponseFeedbackModel } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import FeedbackItem from '@/components/FeedbackItem.vue'
-import { FEEDBACK_API_URL } from '@/data/constants'
+import type { ResponseFeedbackModel } from '@/api/api-models'
 import { List } from 'linqts'
 import {
   NButton,
@@ -20,6 +16,11 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { FeedbackStatus, FeedbackType } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import FeedbackItem from '@/components/FeedbackItem.vue'
+import { FEEDBACK_API_URL } from '@/data/constants'
 
 interface FeedbackModel {
   message: string
@@ -59,11 +60,11 @@ const newFeedback = ref<FeedbackModel>({
 
 async function get() {
   try {
-    const data = await QueryGetAPI<ResponseFeedbackModel[]>(FEEDBACK_API_URL + 'get')
+    const data = await QueryGetAPI<ResponseFeedbackModel[]>(`${FEEDBACK_API_URL}get`)
     if (data.code == 200) {
-      return new List(data.data).OrderByDescending((s) => s.createAt).ToArray()
+      return new List(data.data).OrderByDescending(s => s.createAt).ToArray()
     } else {
-      message.error('无法获取数据: ' + data.message)
+      message.error(`无法获取数据: ${data.message}`)
       return []
     }
   } catch (err) {
@@ -76,7 +77,7 @@ async function add() {
     message.error('反馈内容不能为空')
     return
   }
-  await QueryPostAPI<ResponseFeedbackModel>(FEEDBACK_API_URL + 'add', newFeedback.value)
+  await QueryPostAPI<ResponseFeedbackModel>(`${FEEDBACK_API_URL}add`, newFeedback.value)
     .then((data) => {
       if (data.code == 200) {
         message.success('发送成功, 感谢你的反馈!')
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 8632e12..6239392 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { QueryGetAPI } from '@/api/query'
-import { VTSURU_API_URL } from '@/data/constants'
 import {
   BookCoins20Filled,
+  Chat24Filled,
   Info24Filled,
   Lottery24Filled,
   MoreHorizontal24Filled,
+  PersonFeedback24Filled,
   TabletSpeaker24Filled,
   VehicleShip24Filled,
   VideoAdd20Filled,
-  Chat24Filled,
-  PersonFeedback24Filled
 } from '@vicons/fluent'
 import { AnalyticsSharp, Calendar, Chatbox, ListCircle, MusicalNote } from '@vicons/ionicons5'
 import { useWindowSize } from '@vueuse/core'
-import { NButton, NDivider, NEllipsis, NFlex, NGradientText, NGrid, NGridItem, NIcon, NNumberAnimation, NSpace, NText, NTooltip, NAlert, NCard, NStatistic, NTag, NBadge } from 'naive-ui'
+import { NButton, NCard, NFlex, NGradientText, NIcon, NNumberAnimation, NSpace, NText, NTooltip } from 'naive-ui'
 import { onMounted, ref } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import { VTSURU_API_URL } from '@/data/constants'
 import vtb from '@/svgs/ic_vtuber.svg'
 
 const { width } = useWindowSize()
@@ -102,7 +102,7 @@ const functions = [
     icon: MoreHorizontal24Filled,
   },
 ]
-type IndexDataType = {
+interface IndexDataType {
   userCount: number
   streamers: { name: string, uname: string, avatar: string, uid: number, roomId: number }[]
 }
@@ -111,7 +111,7 @@ const iconColor = 'white'
 const indexData = ref<IndexDataType>()
 
 onMounted(async () => {
-  const data = await QueryGetAPI<IndexDataType>(VTSURU_API_URL + 'get-index-data')
+  const data = await QueryGetAPI<IndexDataType>(`${VTSURU_API_URL}get-index-data`)
   if (data.code == 200) {
     indexData.value = data.data
   }
@@ -482,7 +482,7 @@ onMounted(async () => {
               >
                 <div>
                   <img
-                    :src="streamer.avatar + '@64w'"
+                    :src="`${streamer.avatar}@64w`"
                     referrerpolicy="no-referrer"
                     height="32"
                     style="border-radius: 50%;"
@@ -490,7 +490,7 @@ onMounted(async () => {
                 </div>
                 <NButton
                   tag="a"
-                  :href="'@' + streamer.name"
+                  :href="`@${streamer.name}`"
                   text
                 >
                   {{ streamer.uname || streamer.name }}
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 691ac13..7b6f156 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import { NavigateToNewTab, isDarkMode } from '@/Utils'
-import { cookie, isLoadingAccount, useAccount } from '@/api/account'
-import { ThemeType } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
-import { checkUpdateNote } from '@/data/UpdateNote';
-import { ACCOUNT_API_URL } from '@/data/constants'
-import { useBiliAuth } from '@/store/useBiliAuth'
-import { useMusicRequestProvider } from '@/store/useMusicRequest'
 import {
   BookCoins20Filled,
   CalendarClock24Filled,
@@ -15,21 +6,21 @@ import {
   Info24Filled,
   Live24Filled,
   Lottery24Filled,
+  Mail24Filled,
   PeopleQueue24Filled,
   Person48Filled,
   PersonFeedback24Filled,
   TabletSpeaker24Filled,
   VehicleShip24Filled,
   VideoAdd20Filled,
-  Mail24Filled,
 } from '@vicons/fluent'
-import { AnalyticsSharp, BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, Eye, PlayForward, PlayBack, Play, Pause, VolumeHigh, ChevronUp, ChevronDown, TrashBin, Bookmark, BookmarkOutline } from '@vicons/ionicons5'
+import { AnalyticsSharp, Bookmark, BookmarkOutline, BrowsersOutline, Chatbox, ChevronDown, ChevronUp, Eye, Moon, MusicalNote, Pause, Play, PlayBack, PlayForward, Sunny, TrashBin, VolumeHigh } from '@vicons/ionicons5'
 import { useElementSize, useStorage } from '@vueuse/core'
 import {
   NAlert,
   NBackTop,
-  NBadge,
   NButton,
+  NCard,
   NCountdown,
   NDivider,
   NElement,
@@ -44,6 +35,7 @@ import {
   NPageHeader,
   NPopconfirm,
   NScrollbar,
+  NSlider,
   NSpace,
   NSpin,
   NSwitch,
@@ -51,13 +43,19 @@ import {
   NText,
   NTooltip,
   useMessage,
-  NCard,
-  NSlider,
 } from 'naive-ui'
 import { computed, h, onMounted, ref, watch } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
 // @ts-ignore
 import APlayer from 'vue3-aplayer'
+import { RouterLink, useRoute } from 'vue-router'
+import { cookie, isLoadingAccount, useAccount } from '@/api/account'
+import { ThemeType } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import { useBiliAuth } from '@/store/useBiliAuth'
+import { useMusicRequestProvider } from '@/store/useMusicRequest'
+import { isDarkMode, NavigateToNewTab } from '@/Utils'
 
 // 全局状态和工具
 const accountInfo = useAccount()
@@ -69,49 +67,51 @@ const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 // 收藏功能相关
 const favoriteMenuItems = useStorage<string[]>('Settings.FavoriteMenuItems', [])
 const isFavorite = (key: string) => favoriteMenuItems.value?.includes(key)
-const toggleFavorite = (key: string) => {
+function toggleFavorite(key: string) {
   const list = favoriteMenuItems.value ?? []
   const idx = list.indexOf(key)
   if (idx === -1) list.unshift(key)
   else list.splice(idx, 1)
   favoriteMenuItems.value = [...list]
 }
-const renderFavoriteExtra = (key: string) => () =>
-  h(
-    'span',
-    { class: ['menu-fav', isFavorite(key) ? 'active' : ''] },
-    [
-      h(
-        NTooltip,
-        { placement: 'right' },
-        {
-          trigger: () =>
-            h(
-              NButton,
-              {
-                text: true,
-                size: 'tiny',
-                circle: true,
-                onClick: (e: MouseEvent) => {
-                  e.stopPropagation()
-                  toggleFavorite(key)
+function renderFavoriteExtra(key: string) {
+  return () =>
+    h(
+      'span',
+      { class: ['menu-fav', isFavorite(key) ? 'active' : ''] },
+      [
+        h(
+          NTooltip,
+          { placement: 'right' },
+          {
+            trigger: () =>
+              h(
+                NButton,
+                {
+                  text: true,
+                  size: 'tiny',
+                  circle: true,
+                  onClick: (e: MouseEvent) => {
+                    e.stopPropagation()
+                    toggleFavorite(key)
+                  },
+                  style: 'padding: 0; height: 18px; width: 18px;',
                 },
-                style: 'padding: 0; height: 18px; width: 18px;'
-              },
-              {
-                icon: () =>
-                  h(NIcon, {
-                    component: isFavorite(key) ? Bookmark : BookmarkOutline,
-                    size: 16,
-                    color: isFavorite(key) ? '#f5c451' : undefined,
-                  }),
-              },
-            ),
-          default: () => (isFavorite(key) ? '取消收藏' : '收藏'),
-        },
-      ),
-    ],
-  )
+                {
+                  icon: () =>
+                    h(NIcon, {
+                      component: isFavorite(key) ? Bookmark : BookmarkOutline,
+                      size: 16,
+                      color: isFavorite(key) ? '#f5c451' : undefined,
+                    }),
+                },
+              ),
+            default: () => (isFavorite(key) ? '取消收藏' : '收藏'),
+          },
+        ),
+      ],
+    )
+}
 
 // 侧边栏和布局相关
 const sider = ref()
@@ -136,14 +136,14 @@ const aplayerHeight = computed(() => {
 
 // 播放器是否可见
 const isPlayerVisible = computed(
-  () => musicRquestStore.originMusics.length > 0 || musicRquestStore.waitingMusics.length > 0
+  () => musicRquestStore.originMusics.length > 0 || musicRquestStore.waitingMusics.length > 0,
 )
 
 // 音乐播放器相关状态
 const isPlayerMinimized = useStorage('Settings.MusicPlayer.Minimized', false)
 const playerVolume = computed({
   get: () => musicRquestStore.settings.volume,
-  set: (value) => musicRquestStore.settings.volume = value
+  set: value => musicRquestStore.settings.volume = value,
 })
 
 const aplayer = ref()
@@ -156,12 +156,12 @@ const currentPlayingInfo = computed(() => {
   if (musicRquestStore.currentOriginMusic && musicRquestStore.isPlayingOrderMusic) {
     return {
       type: 'request',
-      info: `正在播放 ${musicRquestStore.currentOriginMusic.from.name} 点的歌`
+      info: `正在播放 ${musicRquestStore.currentOriginMusic.from.name} 点的歌`,
     }
   } else if (musicRquestStore.currentMusic && musicRquestStore.currentMusic.title) {
     return {
       type: 'normal',
-      info: '正在播放背景音乐'
+      info: '正在播放背景音乐',
     }
   }
   return null
@@ -340,7 +340,7 @@ const menuOptions = computed(() => {
                 ),
               },
             ),
-          ]
+          ],
         ),
         default: () => (isBiliVerified.value
           ? '需要使用直播弹幕的功能'
@@ -352,9 +352,9 @@ const menuOptions = computed(() => {
     disabled: accountInfo.value?.isEmailVerified === false || !isBiliVerified.value,
     children: [
       withFavoriteExtra({
-        label: () => !isBiliVerified.value ? '弹幕机' : h(NTooltip,
-            {},
-            {
+        label: () => !isBiliVerified.value
+          ? '弹幕机'
+          : h(NTooltip, {}, {
               trigger: () => h(
                 RouterLink,
                 { to: { name: 'manage-danmuji' } },
@@ -367,70 +367,80 @@ const menuOptions = computed(() => {
         icon: renderIcon(Lottery24Filled),
       }),
       withFavoriteExtra({
-        label: () => !isBiliVerified.value ? '抽奖' : h(
-          RouterLink,
-          { to: { name: 'manage-liveLottery' } },
-          { default: () => '抽奖' },
-        ),
+        label: () => !isBiliVerified.value
+          ? '抽奖'
+          : h(
+              RouterLink,
+              { to: { name: 'manage-liveLottery' } },
+              { default: () => '抽奖' },
+            ),
         key: 'manage-liveLottery',
         icon: renderIcon(Lottery24Filled),
         disabled: !isBiliVerified.value,
       }),
       withFavoriteExtra({
-        label: () => !isBiliVerified.value ? '点播' : h(
-          NTooltip,
-          {},
-          {
-            trigger: () => h(
-              RouterLink,
-              { to: { name: 'manage-liveRequest' } },
-              { default: () => '点播' },
+        label: () => !isBiliVerified.value
+          ? '点播'
+          : h(
+              NTooltip,
+              {},
+              {
+                trigger: () => h(
+                  RouterLink,
+                  { to: { name: 'manage-liveRequest' } },
+                  { default: () => '点播' },
+                ),
+                default: () => '歌势之类用的, 可以用来点歌或者跳舞什么的',
+              },
             ),
-            default: () => '歌势之类用的, 可以用来点歌或者跳舞什么的',
-          },
-        ),
         key: 'manage-liveRequest',
         icon: renderIcon(MusicalNote),
         disabled: !isBiliVerified.value,
       }),
       withFavoriteExtra({
-        label: () => !isBiliVerified.value ? '点歌' : h(
-          NTooltip,
-          {},
-          {
-            trigger: () => h(
-              RouterLink,
-              { to: { name: 'manage-musicRequest' } },
-              { default: () => '点歌' },
+        label: () => !isBiliVerified.value
+          ? '点歌'
+          : h(
+              NTooltip,
+              {},
+              {
+                trigger: () => h(
+                  RouterLink,
+                  { to: { name: 'manage-musicRequest' } },
+                  { default: () => '点歌' },
+                ),
+                default: () => '就是传统的点歌机, 发弹幕后播放指定的歌曲',
+              },
             ),
-            default: () => '就是传统的点歌机, 发弹幕后播放指定的歌曲',
-          },
-        ),
         key: 'manage-musicRequest',
         icon: renderIcon(MusicalNote),
         disabled: !isBiliVerified.value,
       }),
       withFavoriteExtra({
-        label: () => !isBiliVerified.value ? '排队' : h(
-          RouterLink,
-          { to: { name: 'manage-liveQueue' } },
-          { default: () => '排队' },
-        ),
+        label: () => !isBiliVerified.value
+          ? '排队'
+          : h(
+              RouterLink,
+              { to: { name: 'manage-liveQueue' } },
+              { default: () => '排队' },
+            ),
         key: 'manage-liveQueue',
         icon: renderIcon(PeopleQueue24Filled),
         disabled: !isBiliVerified.value,
       }),
       withFavoriteExtra({
-        label: () => !isBiliVerified.value ? '读弹幕' : h(
-          RouterLink,
-          { to: { name: 'manage-speech' } },
-          { default: () => '读弹幕' },
-        ),
+        label: () => !isBiliVerified.value
+          ? '读弹幕'
+          : h(
+              RouterLink,
+              { to: { name: 'manage-speech' } },
+              { default: () => '读弹幕' },
+            ),
         key: 'manage-speech',
         icon: renderIcon(TabletSpeaker24Filled),
         disabled: !isBiliVerified.value,
       }),
-      /*withFavoriteExtra({
+      /* withFavoriteExtra({
         label: () => !isBiliVerified.value ? '弹幕投票' : h(
           RouterLink,
           { to: { name: 'manage-danmakuVote' } },
@@ -439,7 +449,7 @@ const menuOptions = computed(() => {
         key: 'manage-danmakuVote',
         icon: renderIcon(Chat24Filled),
         disabled: !isBiliVerified.value,
-      }),*/
+      }), */
     ],
   }
 
@@ -496,7 +506,7 @@ const menuOptions = computed(() => {
 // 重发验证邮件
 async function resendEmail() {
   try {
-    const data = await QueryGetAPI(ACCOUNT_API_URL + 'send-verify-email')
+    const data = await QueryGetAPI(`${ACCOUNT_API_URL}send-verify-email`)
     if (data.code === 200) {
       canResendEmail.value = false
       message.success('发送成功, 请检查你的邮箱. 如果没有收到, 请检查垃圾邮件')
@@ -504,7 +514,7 @@ async function resendEmail() {
         accountInfo.value.nextSendEmailTime += 1000 * 60
       }
     } else {
-      message.error('发送失败: ' + data.message)
+      message.error(`发送失败: ${data.message}`)
     }
   } catch (err) {
     message.error('发送失败')
@@ -542,7 +552,7 @@ function onPreviousMusic() {
     } else {
       // 否则播放上一首
       const currentIndex = musicRquestStore.aplayerMusics.findIndex(
-        music => music.id === musicRquestStore.currentMusic.id
+        music => music.id === musicRquestStore.currentMusic.id,
       )
       if (currentIndex > 0) {
         musicRquestStore.currentMusic = musicRquestStore.aplayerMusics[currentIndex - 1]
@@ -880,11 +890,11 @@ onMounted(() => {
             :content-style="isPlayerMinimized ? 'padding: 0' : undefined"
             size="small"
             class="music-player-card"
-            :style="`
+            style="
               margin: 8px;
               border-radius: 12px;
               backdrop-filter: blur(10px);
-            `"
+            "
           >
             <!-- 播放器头部控制栏 -->
             <template #header>
@@ -1019,7 +1029,7 @@ onMounted(() => {
                     v-model:shuffle="musicRquestStore.settings.shuffle"
                     v-model:repeat="musicRquestStore.settings.repeat"
                     :list="musicRquestStore.aplayerMusics"
-                    :list-max-height="'200'"
+                    list-max-height="200"
                     mutex
                     list-folded
                     style="border-radius: 8px;"
diff --git a/src/views/OBSLayout.vue b/src/views/OBSLayout.vue
index 5e7326a..beacbc1 100644
--- a/src/views/OBSLayout.vue
+++ b/src/views/OBSLayout.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { useWebFetcher } from '@/store/useWebFetcher'
 import { NSpin } from 'naive-ui'
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { useWebFetcher } from '@/store/useWebFetcher'
 
 const timer = ref<any>()
 const visible = ref(true)
@@ -23,31 +23,31 @@ onMounted(async () => {
     await webfetcher.Start()
   }
 
-  //@ts-expect-error 这里获取不了
+  // @ts-expect-error 这里获取不了
   if (window.obsstudio) {
-    //@ts-expect-error 这里获取不了
+    // @ts-expect-error 这里获取不了
     window.obsstudio.onVisibilityChange = function (visibility: boolean) {
       visible.value = visibility
     }
-    //@ts-expect-error 这里获取不了
+    // @ts-expect-error 这里获取不了
     window.obsstudio.onActiveChange = function (a: boolean) {
       active.value = a
     }
   }
   // 使 .n-layout-content 背景透明
-  const layoutContent = document.querySelector('.n-layout-content');
+  const layoutContent = document.querySelector('.n-layout-content')
   if (layoutContent instanceof HTMLElement) {
     originalBackgroundColor.value = layoutContent.style.backgroundColor
-    layoutContent.style.setProperty('background-color', 'transparent');
+    layoutContent.style.setProperty('background-color', 'transparent')
   }
 })
 
 onUnmounted(() => {
   clearInterval(timer.value)
   // 还原 .n-layout-content 背景颜色
-  const layoutContent = document.querySelector('.n-layout-content');
+  const layoutContent = document.querySelector('.n-layout-content')
   if (layoutContent instanceof HTMLElement) {
-    layoutContent.style.setProperty('background-color', originalBackgroundColor.value);
+    layoutContent.style.setProperty('background-color', originalBackgroundColor.value)
   }
 })
 </script>
diff --git a/src/views/OpenLiveLayout.vue b/src/views/OpenLiveLayout.vue
index 6d3ee1a..2fc8f63 100644
--- a/src/views/OpenLiveLayout.vue
+++ b/src/views/OpenLiveLayout.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { isDarkMode } from '@/Utils' // 引入暗黑模式判断工具
-import { ThemeType } from '@/api/api-models' // 引入主题类型枚举
-import { AuthInfo } from '@/data/DanmakuClients/OpenLiveClient' // 引入开放平台认证信息类型
-import { useDanmakuClient } from '@/store/useDanmakuClient'; // 引入弹幕客户端状态管理
+import type { AuthInfo } from '@/data/DanmakuClients/OpenLiveClient' // 引入开放平台认证信息类型
 import { Lottery24Filled, PeopleQueue24Filled, TabletSpeaker24Filled } from '@vicons/fluent' // 引入 Fluent UI 图标
 import { Moon, MusicalNote, Sunny } from '@vicons/ionicons5' // 引入 Ionicons 图标
 import { useElementSize, useStorage } from '@vueuse/core' // 引入 VueUse 组合式函数
@@ -28,15 +25,18 @@ import {
   NText,
   useMessage,
 } from 'naive-ui' // 引入 Naive UI 组件
-import { h, onMounted, onUnmounted, ref, computed } from 'vue' // 引入 Vue 相关 API
+import { computed, h, onMounted, ref } from 'vue' // 引入 Vue 相关 API
 import { RouterLink, useRoute, useRouter } from 'vue-router' // 引入 Vue Router 相关 API
+import { ThemeType } from '@/api/api-models' // 引入主题类型枚举
+import { useDanmakuClient } from '@/store/useDanmakuClient' // 引入弹幕客户端状态管理
+import { isDarkMode } from '@/Utils' // 引入暗黑模式判断工具
 
 // -- 基本状态和工具 --
 const route = useRoute() // 获取当前路由信息
 const router = useRouter() // 获取路由实例
 const message = useMessage() // 获取 Naive UI 消息提示 API
 const themeType = useStorage('Settings.Theme', ThemeType.Auto) // 使用 useStorage 持久化主题设置 (默认自动)
-const danmakuClient = useDanmakuClient(); // 获取弹幕客户端实例
+const danmakuClient = useDanmakuClient() // 获取弹幕客户端实例
 
 // -- 侧边栏状态 --
 const sider = ref<HTMLElement | null>(null) // 侧边栏 DOM 引用
@@ -124,9 +124,9 @@ function renderIcon(icon: unknown) {
 const isDarkValue = computed({
   get: () => themeType.value === ThemeType.Dark || (themeType.value === ThemeType.Auto && isDarkMode.value),
   set: (value) => {
-    themeType.value = value ? ThemeType.Dark : ThemeType.Light;
-  }
-});
+    themeType.value = value ? ThemeType.Dark : ThemeType.Light
+  },
+})
 
 // -- 生命周期钩子 --
 onMounted(async () => {
@@ -142,15 +142,15 @@ onMounted(async () => {
       // message.success('弹幕客户端连接中...')
     } catch (error: any) {
       // 4. 处理初始化错误
-      console.error("Danmaku client initialization failed:", error);
-      danmakuClientError.value = `弹幕客户端初始化失败: ${error.message || '未知错误'}`;
-      message.error(danmakuClientError.value);
+      console.error('Danmaku client initialization failed:', error)
+      danmakuClientError.value = `弹幕客户端初始化失败: ${error.message || '未知错误'}`
+      message.error(danmakuClientError.value)
     }
   } else {
     // 5. 如果缺少 Code, 显示错误信息
     message.error('无效访问: 缺少必要的认证参数 (Code)。请通过幻星平台获取链接。')
     // authInfo 清空, 触发 v-if 显示错误页
-    authInfo.value = undefined;
+    authInfo.value = undefined
   }
 })
 
@@ -158,7 +158,6 @@ onMounted(async () => {
 // onUnmounted(() => {
 //   danmakuClient.dispose(); // 示例: 如果有清理逻辑
 // })
-
 </script>
 
 <template>
@@ -446,4 +445,4 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index b02079c..4d11d68 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
-import { BaseRTCClient, MasterRTCClient, SlaveRTCClient } from '@/data/RTCClient';
-import { useWebRTC } from '@/store/useRTC';
-import { NButton, NInput, NSpin } from 'naive-ui';
-import { computed, Ref, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import DanmujiOBS from './obs/DanmujiOBS.vue';
-import { useDanmakuClient } from '@/store/useDanmakuClient';
+import { NButton, NInput, NSpin } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAccount } from '@/api/account'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import { useWebRTC } from '@/store/useRTC'
+import DanmujiOBS from './obs/DanmujiOBS.vue'
 
-const target = ref('');
+const target = ref('')
 const accountInfo = useAccount()
 const route = useRoute()
 const inputMsg = ref('')
@@ -19,7 +18,7 @@ const isMaster = computed(() => {
 const dc = useDanmakuClient()
 const customCss = ref('')
 
-let rtc= useWebRTC()
+const rtc = useWebRTC()
 const danmujiRef = ref()
 
 async function mount() {
@@ -57,4 +56,4 @@ async function mount() {
       :is-o-b-s="false"
     />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/VerifyView.vue b/src/views/VerifyView.vue
index 4799b22..1d4b3f1 100644
--- a/src/views/VerifyView.vue
+++ b/src/views/VerifyView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ACCOUNT } from '@/api/account'
-import { AccountInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { ACCOUNT_API_URL } from '@/data/constants'
-import router from '@/router'
+import type { AccountInfo } from '@/api/api-models'
 import { NButton, NCard, NLayoutContent, NSpace, useMessage } from 'naive-ui'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { ACCOUNT } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import router from '@/router'
 
 const message = useMessage()
 const route = useRoute()
@@ -15,16 +15,16 @@ const isLoading = ref(false)
 
 async function VerifyAccount() {
   isLoading.value = true
-  await QueryGetAPI<AccountInfo>(ACCOUNT_API_URL + 'verify', {
+  await QueryGetAPI<AccountInfo>(`${ACCOUNT_API_URL}verify`, {
     target: route.query.target,
   })
     .then((data) => {
       if (data.code == 200) {
         ACCOUNT.value = data.data
-        message.success('成功激活账户: ' + ACCOUNT.value.name)
+        message.success(`成功激活账户: ${ACCOUNT.value.name}`)
         router.push('/manage')
       } else {
-        message.error('激活失败: ' + data.message)
+        message.error(`激活失败: ${data.message}`)
       }
     })
     .finally(() => {
diff --git a/src/views/VideoCollectListView.vue b/src/views/VideoCollectListView.vue
index ad07dbe..b2af49b 100644
--- a/src/views/VideoCollectListView.vue
+++ b/src/views/VideoCollectListView.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { NavigateToNewTab } from '@/Utils'
-import { VideoCollectDetail, VideoCollectVideo, VideoInfo, VideoStatus } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { VIDEO_COLLECT_API_URL } from '@/data/constants'
+import type { VideoCollectDetail, VideoCollectVideo, VideoInfo } from '@/api/api-models'
 import { Clock24Regular, Person24Regular, Question24Regular } from '@vicons/fluent'
 import { useElementSize } from '@vueuse/core'
 import { List } from 'linqts'
@@ -26,6 +23,10 @@ import {
 } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { VideoStatus } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { VIDEO_COLLECT_API_URL } from '@/data/constants'
+import { NavigateToNewTab } from '@/Utils'
 
 const route = useRoute()
 const message = useMessage()
@@ -36,21 +37,21 @@ const { width } = useElementSize(card)
 
 const videoDetail = ref<VideoCollectDetail | null>(await get())
 const acceptVideos = computed(() => {
-  return videoDetail.value?.videos.filter((v) => v.info.status == VideoStatus.Accepted)
+  return videoDetail.value?.videos.filter(v => v.info.status == VideoStatus.Accepted)
 })
 const watchedVideos = computed(() => {
-  return videoDetail.value?.videos.filter((v) => v.video.watched == true) ?? []
+  return videoDetail.value?.videos.filter(v => v.video.watched == true) ?? []
 })
 const watchedTime = computed(() => {
-  return new List(watchedVideos.value).Sum((v) => v?.video.length ?? 0)
+  return new List(watchedVideos.value).Sum(v => v?.video.length ?? 0)
 })
 const totalTime = computed(() => {
-  return new List(videoDetail.value?.videos).Sum((v) => v?.video.length ?? 0)
+  return new List(videoDetail.value?.videos).Sum(v => v?.video.length ?? 0)
 })
 
 async function get() {
   try {
-    const data = await QueryGetAPI<VideoCollectDetail>(VIDEO_COLLECT_API_URL + 'get', { id: route.params.id })
+    const data = await QueryGetAPI<VideoCollectDetail>(`${VIDEO_COLLECT_API_URL}get`, { id: route.params.id })
     if (data.code == 200) {
       return data.data
     }
@@ -64,13 +65,13 @@ function onClick(video: VideoCollectVideo) {
     video.watched = true
   }
   // 将视频对象移动到数组的末尾
-  const index = videoDetail.value?.videos.findIndex((v) => v.video == video) ?? -1
-  const tempVideo = videoDetail.value?.videos[index] ?? ({} as { info: VideoInfo; video: VideoCollectVideo })
+  const index = videoDetail.value?.videos.findIndex(v => v.video == video) ?? -1
+  const tempVideo = videoDetail.value?.videos[index] ?? ({} as { info: VideoInfo, video: VideoCollectVideo })
   if (index > -1) {
     videoDetail.value?.videos.splice(index, 1)
     videoDetail.value?.videos.push(tempVideo)
   }
-  NavigateToNewTab('https://bilibili.com/video/' + video.id)
+  NavigateToNewTab(`https://bilibili.com/video/${video.id}`)
 }
 function formatSeconds(seconds: number): string {
   const minutes = Math.floor(seconds / 60)
@@ -172,7 +173,7 @@ function formatSecondsToTime(seconds: number): string {
           >
             <NSpace>
               <NImage
-                :src="item.video.cover + '@100h'"
+                :src="`${item.video.cover}@100h`"
                 lazy
                 :img-props="{ referrerpolicy: 'no-referrer' }"
                 height="75"
diff --git a/src/views/VideoCollectPublic.vue b/src/views/VideoCollectPublic.vue
index 2aa8f26..23ccb4d 100644
--- a/src/views/VideoCollectPublic.vue
+++ b/src/views/VideoCollectPublic.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { VideoCollectDetail, VideoCollectTable } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
-import { TURNSTILE_KEY, VIDEO_COLLECT_API_URL } from '@/data/constants'
+import type { VideoCollectDetail, VideoCollectTable } from '@/api/api-models'
 import {
   NAlert,
   NButton,
@@ -19,6 +16,9 @@ import {
 import { onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import VueTurnstile from 'vue-turnstile'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
+import { TURNSTILE_KEY, VIDEO_COLLECT_API_URL } from '@/data/constants'
 
 interface AddVideoModel {
   id: string
@@ -40,7 +40,7 @@ const isLoading = ref(false)
 
 async function get() {
   try {
-    const data = await QueryGetAPI<VideoCollectDetail>(VIDEO_COLLECT_API_URL + 'get', { id: route.params.id })
+    const data = await QueryGetAPI<VideoCollectDetail>(`${VIDEO_COLLECT_API_URL}get`, { id: route.params.id })
     if (data.code == 200) {
       return data.data.table
     }
@@ -56,7 +56,7 @@ async function add() {
   }
   isLoading.value = true
   addModel.value.id = table.value?.id ?? route.params.id.toString()
-  await QueryPostAPI(VIDEO_COLLECT_API_URL + 'add', addModel.value, [['Turnstile', token.value]])
+  await QueryPostAPI(`${VIDEO_COLLECT_API_URL}add`, addModel.value, [['Turnstile', token.value]])
     .then((data) => {
       if (data.code == 200) {
         message.success('已成功推荐视频')
@@ -64,7 +64,7 @@ async function add() {
           location.reload()
         }, 1000)
       } else {
-        message.error('添加失败: ' + data.message)
+        message.error(`添加失败: ${data.message}`)
       }
     })
     .catch((err) => {
diff --git a/src/views/ViewerFeedbackView.vue b/src/views/ViewerFeedbackView.vue
index 26adc54..5dbea9b 100644
--- a/src/views/ViewerFeedbackView.vue
+++ b/src/views/ViewerFeedbackView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { NLayoutContent } from 'naive-ui'
 import FeedbackManage from './FeedbackManage.vue'
 </script>
+
 <template>
   <div style="margin: 16px">
     <FeedbackManage />
diff --git a/src/views/ViewerLayout.vue b/src/views/ViewerLayout.vue
index 2c4b440..42a34da 100644
--- a/src/views/ViewerLayout.vue
+++ b/src/views/ViewerLayout.vue
@@ -1,230 +1,239 @@
 <script setup lang="ts">
-  import { NavigateToNewTab, isDarkMode } from '@/Utils';
-  import { useAccount } from '@/api/account';
-  import { FunctionTypes, ThemeType, UserInfo } from '@/api/api-models';
-  import { useUser } from '@/api/user';
-  import RegisterAndLogin from '@/components/RegisterAndLogin.vue';
-  import { FETCH_API } from '@/data/constants'; // 移除了未使用的 AVATAR_URL
-  import { useBiliAuth } from '@/store/useBiliAuth';
-  import {
-    BookCoins20Filled,
-    CalendarClock24Filled,
-    Person48Filled,
-    VideoAdd20Filled,
-    WindowWrench20Filled,
-    CheckmarkCircle24Filled,
-  } from '@vicons/fluent';
-  import { BrowsersOutline, Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5';
-  import { useElementSize, useStorage } from '@vueuse/core';
-  import {
-    MenuOption,
-    NAvatar,
-    NBackTop,
-    NButton,
-    NDivider,
-    NEllipsis,
-    NIcon,
-    NLayout,
-    NLayoutContent,
-    NLayoutHeader,
-    NLayoutSider,
-    NMenu,
-    NModal,
-    NPageHeader,
-    NResult,
-    NSpace,
-    NSpin,
-    NSwitch,
-    NText,
-    useMessage,
-    // NSpin 已默认导入，如果单独使用需确保导入
-  } from 'naive-ui';
-  import { computed, h, onMounted, ref, watch, defineAsyncComponent } from 'vue'; // 引入 watch
-  import { RouterLink, useRoute, useRouter } from 'vue-router'; // 引入 useRouter
+import type {
+  MenuOption,
+} from 'naive-ui'
+import type { UserInfo } from '@/api/api-models'
+import {
+  BookCoins20Filled,
+  CalendarClock24Filled,
+  CheckmarkCircle24Filled,
+  Person48Filled,
+  VideoAdd20Filled,
+  WindowWrench20Filled,
+} from '@vicons/fluent'
+import { BrowsersOutline, Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
+import { useElementSize, useStorage } from '@vueuse/core'
+import {
+  NAvatar,
+  NBackTop,
+  NButton,
+  NDivider,
+  NEllipsis,
+  NIcon,
+  NLayout,
+  NLayoutContent,
+  NLayoutHeader,
+  NLayoutSider,
+  NMenu,
+  NModal,
+  NPageHeader,
+  NResult,
+  NSpace,
+  NSpin,
+  NSwitch,
+  NText,
+  useMessage,
+  // NSpin 已默认导入，如果单独使用需确保导入
+} from 'naive-ui'
+import { computed, h, ref, watch } from 'vue' // 引入 watch
+import { RouterLink, useRoute, useRouter } from 'vue-router' // 引入 useRouter
+import { useAccount } from '@/api/account'
+import { FunctionTypes, ThemeType } from '@/api/api-models'
+import { useUser } from '@/api/user'
+import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
+import { FETCH_API } from '@/data/constants' // 移除了未使用的 AVATAR_URL
+import { useBiliAuth } from '@/store/useBiliAuth'
+import { isDarkMode, NavigateToNewTab } from '@/Utils'
 
-  // --- 响应式状态和常量 ---
-  const route = useRoute();
-  const router = useRouter(); // 获取 router 实例
-  const message = useMessage();
-  const accountInfo = useAccount(); // 获取当前登录账户信息
-  const useAuth = useBiliAuth(); // 获取认证状态 Store
+// --- 响应式状态和常量 ---
+const route = useRoute()
+const router = useRouter() // 获取 router 实例
+const message = useMessage()
+const accountInfo = useAccount() // 获取当前登录账户信息
+const useAuth = useBiliAuth() // 获取认证状态 Store
 
-  // 路由参数
-  const id = computed(() => route.params.id);
+// 路由参数
+const id = computed(() => route.params.id)
 
-  // 主题设置
-  const themeType = useStorage('Settings.Theme', ThemeType.Auto);
+// 主题设置
+const themeType = useStorage('Settings.Theme', ThemeType.Auto)
 
-  // 用户和页面状态
-  const userInfo = ref<UserInfo | null>(null); // 用户信息，初始化为 null
-  const biliUserInfo = ref<any>(null); // B站用户信息
-  const isLoading = ref(true); // 是否正在加载数据
-  const notFound = ref(false); // 是否未找到用户
+// 用户和页面状态
+const userInfo = ref<UserInfo | null>(null) // 用户信息，初始化为 null
+const biliUserInfo = ref<any>(null) // B站用户信息
+const isLoading = ref(true) // 是否正在加载数据
+const notFound = ref(false) // 是否未找到用户
 
-  // UI 控制状态
-  const registerAndLoginModalVisiable = ref(false); // 注册/登录弹窗可见性
-  const sider = ref(); // 侧边栏 DOM 引用
-  const { width: siderWidth } = useElementSize(sider); // 侧边栏宽度
-  const windowWidth = window.innerWidth; // 窗口宽度，用于响应式显示
+// UI 控制状态
+const registerAndLoginModalVisiable = ref(false) // 注册/登录弹窗可见性
+const sider = ref() // 侧边栏 DOM 引用
+const { width: siderWidth } = useElementSize(sider) // 侧边栏宽度
+const windowWidth = window.innerWidth // 窗口宽度，用于响应式显示
 
-  // 侧边栏菜单项
-  const menuOptions = ref<MenuOption[]>([]); // 初始化为空数组
+// 侧边栏菜单项
+const menuOptions = ref<MenuOption[]>([]) // 初始化为空数组
 
-  // --- 方法 ---
+// --- 方法 ---
 
-  /** 渲染图标的辅助函数 */
-  function renderIcon(icon: unknown) {
-    return () => h(NIcon, null, { default: () => h(icon as any) });
+/** 渲染图标的辅助函数 */
+function renderIcon(icon: unknown) {
+  return () => h(NIcon, null, { default: () => h(icon as any) })
+}
+
+/** 根据 userInfo 更新侧边栏菜单 */
+function updateMenuOptions() {
+  // 如果没有用户信息，清空菜单
+  if (!userInfo.value) {
+    menuOptions.value = []
+    return
   }
-
-  /** 根据 userInfo 更新侧边栏菜单 */
-  function updateMenuOptions() {
-    // 如果没有用户信息，清空菜单
-    if (!userInfo.value) {
-      menuOptions.value = [];
-      return;
-    }
-    // 基于 userInfo.extra.enableFunctions 构建菜单项
-    menuOptions.value = [
-      {
-        label: () => h(RouterLink, { to: { name: 'user-index' } }, { default: () => '主页' }),
-        key: 'user-index', icon: renderIcon(Home),
-        // 主页通常都显示
-        show: true
-      },
-      {
-        label: () => h(RouterLink, { to: { name: 'user-songList' } }, { default: () => '歌单' }),
-        key: 'user-songList', icon: renderIcon(MusicalNote),
-        // 根据用户配置判断是否显示
-        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.SongList)
-      },
-      {
-        label: () => h(RouterLink, { to: { name: 'user-schedule' } }, { default: () => '日程' }),
-        key: 'user-schedule', icon: renderIcon(CalendarClock24Filled),
-        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.Schedule)
-      },
-      {
-        label: () => h(RouterLink, { to: { name: 'user-questionBox' } }, { default: () => '棉花糖 (提问箱)' }),
-        key: 'user-questionBox', icon: renderIcon(Chatbox),
-        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.QuestionBox)
-      },
-      {
-        label: () => h(RouterLink, { to: { name: 'user-video-collect' } }, { default: () => '视频征集' }),
-        key: 'user-video-collect', icon: renderIcon(VideoAdd20Filled),
-        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.VideoCollect)
-      },
-      {
-        label: () => h(RouterLink, { to: { name: 'user-goods' } }, { default: () => '积分' }),
-        key: 'user-goods', icon: renderIcon(BookCoins20Filled),
-        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.Point)
-      },
-      {
-        label: () => h(RouterLink, { to: { name: 'user-checkin' } }, { default: () => '签到排行' }),
-        key: 'user-checkin', icon: renderIcon(CheckmarkCircle24Filled),
-        show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.CheckInRanking)
-      },
-    ].filter(option => option.show !== false) as MenuOption[]; // 过滤掉 show 为 false 的菜单项
-  }
-
-
-  /** 获取 Bilibili 用户信息 */
-  async function RequestBiliUserData() {
-    // 确保 userInfo 和 biliId 存在
-    if (!userInfo.value?.biliId) return;
-
-    try {
-      const response = await fetch(FETCH_API + `https://workers.vrp.moe/api/bilibili/user-info/${userInfo.value.biliId}`);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const data = await response.json();
-      if (data.code === 0) {
-        biliUserInfo.value = data.card; // 存储获取到的 B 站信息
-      } else {
-        console.error('Bili User API Error:', data.message);
-        // message.warning('获取B站信息失败: ' + data.message) // 可选: 轻微提示用户
-      }
-    } catch (error) {
-      console.error('Failed to fetch Bili user data:', error);
-      // message.error('获取B站信息时网络错误') // 可选: 提示用户网络问题
-    }
-  }
-
-  /** 获取 Vtsuru 用户信息和相关数据 */
-  async function fetchUserData(userId: string | string[] | undefined) {
-    // 验证 userId 的有效性
-    if (!userId || Array.isArray(userId)) {
-      notFound.value = true; // 标记为未找到
-      isLoading.value = false; // 加载结束
-      userInfo.value = null; // 清空用户信息
-      menuOptions.value = []; // 清空菜单
-      console.error("无效的用户 ID:", userId);
-      return;
-    }
-
-    // 重置状态，准备加载新数据
-    isLoading.value = true;
-    notFound.value = false;
-    userInfo.value = null;
-    menuOptions.value = [];
-    biliUserInfo.value = null;
-
-    try {
-      // 调用 API 获取用户信息
-      const fetchedUserInfo = await useUser(userId as string); // 强制转换为 string
-
-      if (!fetchedUserInfo) {
-        // 如果 API 返回 null 或 undefined，则视为未找到
-        notFound.value = true;
-        userInfo.value = null;
-      } else {
-        // 成功获取用户信息
-        userInfo.value = fetchedUserInfo;
-        // 基于新的用户信息更新菜单
-        updateMenuOptions();
-        // 异步获取 B 站信息（不阻塞主流程）
-        RequestBiliUserData();
-      }
-    } catch (error) {
-      console.error("获取用户信息时出错:", error);
-      message.error("加载用户信息时发生错误");
-      notFound.value = true; // 标记为未找到状态
-      userInfo.value = null;
-    } finally {
-      // 无论成功或失败，加载状态都结束
-      isLoading.value = false;
-    }
-  }
-
-  /** 跳转到 Bilibili 认证用户中心 */
-  function gotoAuthPage() {
-    if (!accountInfo.value?.biliUserAuthInfo) {
-      message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定');
-      return;
-    }
-    NavigateToNewTab('/bili-user'); // 在新标签页打开
-  }
-
-  // --- Watcher ---
-
-  // 监听路由参数 id 的变化
-  watch(
-    () => route.params.id,
-    (newId, oldId) => {
-      // 只有当 newId 有效且与 oldId 不同时才重新加载数据
-      if (newId && newId !== oldId) {
-        fetchUserData(newId);
-      } else if (!newId) {
-        // 如果 id 从路由中移除，处理相应的状态
-        notFound.value = true;
-        isLoading.value = false;
-        userInfo.value = null;
-        menuOptions.value = [];
-      }
+  // 基于 userInfo.extra.enableFunctions 构建菜单项
+  menuOptions.value = [
+    {
+      label: () => h(RouterLink, { to: { name: 'user-index' } }, { default: () => '主页' }),
+      key: 'user-index',
+      icon: renderIcon(Home),
+      // 主页通常都显示
+      show: true,
     },
-    { immediate: true } // 关键: 组件挂载时立即执行一次 watcher，触发初始数据加载
-  );
-  // --- 组件模板 ---
+    {
+      label: () => h(RouterLink, { to: { name: 'user-songList' } }, { default: () => '歌单' }),
+      key: 'user-songList',
+      icon: renderIcon(MusicalNote),
+      // 根据用户配置判断是否显示
+      show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.SongList),
+    },
+    {
+      label: () => h(RouterLink, { to: { name: 'user-schedule' } }, { default: () => '日程' }),
+      key: 'user-schedule',
+      icon: renderIcon(CalendarClock24Filled),
+      show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.Schedule),
+    },
+    {
+      label: () => h(RouterLink, { to: { name: 'user-questionBox' } }, { default: () => '棉花糖 (提问箱)' }),
+      key: 'user-questionBox',
+      icon: renderIcon(Chatbox),
+      show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.QuestionBox),
+    },
+    {
+      label: () => h(RouterLink, { to: { name: 'user-video-collect' } }, { default: () => '视频征集' }),
+      key: 'user-video-collect',
+      icon: renderIcon(VideoAdd20Filled),
+      show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.VideoCollect),
+    },
+    {
+      label: () => h(RouterLink, { to: { name: 'user-goods' } }, { default: () => '积分' }),
+      key: 'user-goods',
+      icon: renderIcon(BookCoins20Filled),
+      show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.Point),
+    },
+    {
+      label: () => h(RouterLink, { to: { name: 'user-checkin' } }, { default: () => '签到排行' }),
+      key: 'user-checkin',
+      icon: renderIcon(CheckmarkCircle24Filled),
+      show: userInfo.value?.extra?.enableFunctions.includes(FunctionTypes.CheckInRanking),
+    },
+  ].filter(option => option.show !== false) as MenuOption[] // 过滤掉 show 为 false 的菜单项
+}
+
+/** 获取 Bilibili 用户信息 */
+async function RequestBiliUserData() {
+  // 确保 userInfo 和 biliId 存在
+  if (!userInfo.value?.biliId) return
+
+  try {
+    const response = await fetch(`${FETCH_API}https://workers.vrp.moe/api/bilibili/user-info/${userInfo.value.biliId}`)
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    const data = await response.json()
+    if (data.code === 0) {
+      biliUserInfo.value = data.card // 存储获取到的 B 站信息
+    } else {
+      console.error('Bili User API Error:', data.message)
+      // message.warning('获取B站信息失败: ' + data.message) // 可选: 轻微提示用户
+    }
+  } catch (error) {
+    console.error('Failed to fetch Bili user data:', error)
+    // message.error('获取B站信息时网络错误') // 可选: 提示用户网络问题
+  }
+}
+
+/** 获取 Vtsuru 用户信息和相关数据 */
+async function fetchUserData(userId: string | string[] | undefined) {
+  // 验证 userId 的有效性
+  if (!userId || Array.isArray(userId)) {
+    notFound.value = true // 标记为未找到
+    isLoading.value = false // 加载结束
+    userInfo.value = null // 清空用户信息
+    menuOptions.value = [] // 清空菜单
+    console.error('无效的用户 ID:', userId)
+    return
+  }
+
+  // 重置状态，准备加载新数据
+  isLoading.value = true
+  notFound.value = false
+  userInfo.value = null
+  menuOptions.value = []
+  biliUserInfo.value = null
+
+  try {
+    // 调用 API 获取用户信息
+    const fetchedUserInfo = await useUser(userId as string) // 强制转换为 string
+
+    if (!fetchedUserInfo) {
+      // 如果 API 返回 null 或 undefined，则视为未找到
+      notFound.value = true
+      userInfo.value = null
+    } else {
+      // 成功获取用户信息
+      userInfo.value = fetchedUserInfo
+      // 基于新的用户信息更新菜单
+      updateMenuOptions()
+      // 异步获取 B 站信息（不阻塞主流程）
+      RequestBiliUserData()
+    }
+  } catch (error) {
+    console.error('获取用户信息时出错:', error)
+    message.error('加载用户信息时发生错误')
+    notFound.value = true // 标记为未找到状态
+    userInfo.value = null
+  } finally {
+    // 无论成功或失败，加载状态都结束
+    isLoading.value = false
+  }
+}
+
+/** 跳转到 Bilibili 认证用户中心 */
+function gotoAuthPage() {
+  if (!accountInfo.value?.biliUserAuthInfo) {
+    message.error('你尚未进行 Bilibili 认证, 请前往面板进行认证和绑定')
+    return
+  }
+  NavigateToNewTab('/bili-user') // 在新标签页打开
+}
+
+// --- Watcher ---
+
+// 监听路由参数 id 的变化
+watch(
+  () => route.params.id,
+  (newId, oldId) => {
+    // 只有当 newId 有效且与 oldId 不同时才重新加载数据
+    if (newId && newId !== oldId) {
+      fetchUserData(newId)
+    } else if (!newId) {
+      // 如果 id 从路由中移除，处理相应的状态
+      notFound.value = true
+      isLoading.value = false
+      userInfo.value = null
+      menuOptions.value = []
+    }
+  },
+  { immediate: true }, // 关键: 组件挂载时立即执行一次 watcher，触发初始数据加载
+)
+// --- 组件模板 ---
 </script>
 
 <template>
@@ -492,7 +501,7 @@
           <NBackTop
             :right="40"
             :bottom="40"
-            :listen-to="'.viewer-page-content'"
+            listen-to=".viewer-page-content"
           />
         </div>
         <!-- 如果 !isLoading && notFound, 会显示顶部的 NResult，这里不需要 else -->
@@ -528,7 +537,7 @@
           <NButton
             type="primary"
             size="small"
-            @click="$router.push({ name: 'bili-user'})"
+            @click="$router.push({ name: 'bili-user' })"
           >
             <template #icon>
               <NIcon :component="BrowsersOutline" />
@@ -721,4 +730,4 @@
     opacity: 0.7;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/manage/AnalyzeView.vue b/src/views/manage/AnalyzeView.vue
index 581242d..647f376 100644
--- a/src/views/manage/AnalyzeView.vue
+++ b/src/views/manage/AnalyzeView.vue
@@ -1,3 +1,469 @@
+<script lang="ts" setup>
+import { TrendingDown, TrendingUp } from '@vicons/ionicons5'
+import { BarChart, LineChart } from 'echarts/charts'
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  MarkLineComponent,
+  MarkPointComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components'
+import * as echarts from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { NCard, NDivider, NGrid, NGridItem, NIcon, NSpace, NSpin, NStatistic, NTabPane, NTabs, NTag, useMessage, useThemeVars } from 'naive-ui'
+
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import { ANALYZE_API_URL } from '@/data/constants'
+
+// 注册必要的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  BarChart,
+  CanvasRenderer,
+  MarkPointComponent,
+  MarkLineComponent,
+  DataZoomComponent,
+])
+
+// types.ts
+interface ChartItem {
+  income: number
+  interactionCount: number
+  danmakuCount: number
+  payingUsers: number
+  interactionUsers: number
+  liveMinutes: number
+  likeCount: number
+}
+
+interface Summary {
+  last7Days: {
+    totalIncome: number
+    totalInteractions: number
+    totalDanmakuCount: number
+    totalLiveMinutes: number
+    dailyAvgIncome: number
+    dailyAvgDanmaku: number
+    incomeTrend: number
+    interactionTrend: number
+    danmakuTrend: number
+    activeLiveDays: number
+    interactionUsers: number
+    payingUsers: number
+    interactionUsersTrend: number
+    payingUsersTrend: number
+  }
+  last30Days: {
+    totalIncome: number
+    totalInteractions: number
+    totalDanmakuCount: number
+    totalLiveMinutes: number
+    dailyAvgIncome: number
+    dailyAvgDanmaku: number
+    incomeTrend: number
+    interactionTrend: number
+    danmakuTrend: number
+    activeLiveDays: number
+    interactionUsers: number
+    payingUsers: number
+  }
+}
+
+interface AnalyzeData {
+  summary: Summary
+  chartData: Record<number, ChartItem> // 键是Unix时间戳，值是对应的数据
+}
+
+// 状态管理
+const loading = ref(true)
+const message = useMessage()
+const analyzeData = ref<AnalyzeData>()
+const summaryData = computed(() => analyzeData.value?.summary)
+const activeChart = ref('income')
+const themeVars = useThemeVars()
+
+// 处理标签页变化
+function onTabChange(value: string) {
+  nextTick(() => {
+    handleResize()
+  })
+}
+
+// 图表引用
+const incomeChartRef = ref<HTMLElement | null>(null)
+const interactionChartRef = ref<HTMLElement | null>(null)
+const usersChartRef = ref<HTMLElement | null>(null)
+
+// 图表实例
+let incomeChart: echarts.ECharts | null = null
+let interactionChart: echarts.ECharts | null = null
+let usersChart: echarts.ECharts | null = null
+
+// 格式化工具函数
+function formatCurrency(value: number): string {
+  return `¥${value.toFixed(2)}`
+}
+
+function formatTrend(value: number): string {
+  return value >= 0 ? `+${value}%` : `${value}%`
+}
+
+function getTrendType(value: number): 'success' | 'error' | 'info' {
+  if (value > 0) return 'success'
+  if (value < 0) return 'error'
+  return 'info'
+}
+
+// 格式化时间戳为日期
+function formatDate(timestamp: number): string {
+  const date = new Date(timestamp * 1000)
+  return `${date.getMonth() + 1}/${date.getDate()}`
+}
+
+// 从ChartData对象转换为数组，并按时间戳排序
+function getChartDataArray() {
+  if (!analyzeData.value?.chartData) return []
+
+  return Object.entries(analyzeData.value.chartData)
+    .map(([timestamp, data]) => ({
+      timestamp: Number.parseInt(timestamp, 10),
+      date: formatDate(Number.parseInt(timestamp, 10)),
+      ...data,
+    }))
+    .sort((a, b) => a.timestamp - b.timestamp)
+}
+
+// 获取主题色配置
+function getThemeColors() {
+  return {
+    textColor: themeVars.value.textColor2,
+    axisLineColor: themeVars.value.borderColor,
+    splitLineColor: themeVars.value.dividerColor,
+    seriesColors: [
+      themeVars.value.primaryColor,
+      themeVars.value.infoColor,
+      themeVars.value.successColor,
+      themeVars.value.warningColor,
+      themeVars.value.errorColor,
+    ],
+  }
+}
+
+// 初始化图表
+function initCharts() {
+  const chartData = getChartDataArray()
+  if (chartData.length === 0) return
+
+  const dates = chartData.map(item => item.date)
+  const themeColors = getThemeColors()
+
+  const baseOption = {
+    textStyle: {
+      color: themeColors.textColor,
+    },
+    legend: {
+      textStyle: {
+        color: themeColors.textColor,
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: {
+        lineStyle: {
+          color: themeColors.axisLineColor,
+        },
+      },
+      axisLabel: {
+        color: themeColors.textColor,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: themeColors.axisLineColor,
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: themeColors.splitLineColor,
+        },
+      },
+      axisLabel: {
+        color: themeColors.textColor,
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: themeVars.value.cardColor,
+      borderColor: themeVars.value.borderColor,
+      textStyle: {
+        color: themeColors.textColor,
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '60px',
+      containLabel: true,
+    },
+    color: themeColors.seriesColors,
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100,
+      },
+      {
+        start: 0,
+        end: 100,
+      },
+    ],
+  }
+
+  // 收入图表
+  if (incomeChartRef.value) {
+    incomeChart = echarts.init(incomeChartRef.value)
+    incomeChart.setOption({
+      ...baseOption,
+      title: {
+        text: '收益趋势',
+        textStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      yAxis: {
+        ...baseOption.yAxis,
+        name: '收益(元)',
+        nameTextStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      series: [
+        {
+          name: '收益',
+          type: 'line',
+          data: chartData.map(item => item.income),
+          areaStyle: {
+            opacity: 0.3,
+          },
+          smooth: true,
+          markPoint: {
+            data: [
+              { type: 'max', name: '最高值' },
+              { type: 'min', name: '最低值' },
+            ],
+          },
+          markLine: {
+            data: [
+              { type: 'average', name: '平均值' },
+            ],
+          },
+        },
+      ],
+    })
+  }
+
+  // 互动图表
+  if (interactionChartRef.value) {
+    interactionChart = echarts.init(interactionChartRef.value)
+    interactionChart.setOption({
+      ...baseOption,
+      title: {
+        text: '互动趋势',
+        textStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      legend: {
+        data: ['互动数', '弹幕数', '点赞数'],
+        textStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      yAxis: {
+        ...baseOption.yAxis,
+        name: '数量',
+        nameTextStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      series: [
+        {
+          name: '互动数',
+          type: 'line',
+          data: chartData.map(item => item.interactionCount),
+          smooth: true,
+        },
+        {
+          name: '弹幕数',
+          type: 'line',
+          data: chartData.map(item => item.danmakuCount),
+          smooth: true,
+        },
+        {
+          name: '点赞数',
+          type: 'line',
+          data: chartData.map(item => item.likeCount),
+          smooth: true,
+        },
+      ],
+    })
+  }
+
+  // 用户图表
+  if (usersChartRef.value) {
+    usersChart = echarts.init(usersChartRef.value)
+    usersChart.setOption({
+      ...baseOption,
+      title: {
+        text: '用户趋势',
+        textStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      legend: {
+        data: ['互动用户', '付费用户'],
+        textStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      yAxis: {
+        ...baseOption.yAxis,
+        name: '用户数',
+        nameTextStyle: {
+          color: themeColors.textColor,
+        },
+      },
+      series: [
+        {
+          name: '互动用户',
+          type: 'bar',
+          data: chartData.map(item => item.interactionUsers),
+          barMaxWidth: '40%',
+          itemStyle: {
+            borderRadius: [4, 4, 0, 0],
+          },
+        },
+        {
+          name: '付费用户',
+          type: 'bar',
+          data: chartData.map(item => item.payingUsers),
+          barMaxWidth: '40%',
+          itemStyle: {
+            borderRadius: [4, 4, 0, 0],
+          },
+        },
+      ],
+    })
+  }
+}
+
+// 更新图表主题
+function updateChartTheme() {
+  const themeColors = getThemeColors();
+
+  [incomeChart, interactionChart, usersChart].forEach((chart) => {
+    if (!chart) return
+
+    const option = chart.getOption()
+
+    // 更新文本颜色
+    option.textStyle = { color: themeColors.textColor }
+
+    // 更新标题颜色
+    if (option.title && Array.isArray(option.title) && option.title[0]) {
+      option.title[0].textStyle = { color: themeColors.textColor }
+    }
+
+    // 更新坐标轴颜色
+    if (option.xAxis && Array.isArray(option.xAxis) && option.xAxis[0]) {
+      option.xAxis[0].axisLine.lineStyle.color = themeColors.axisLineColor
+      option.xAxis[0].axisLabel.color = themeColors.textColor
+    }
+
+    if (option.yAxis && Array.isArray(option.yAxis) && option.yAxis[0]) {
+      option.yAxis[0].axisLine.lineStyle.color = themeColors.axisLineColor
+      option.yAxis[0].splitLine.lineStyle.color = themeColors.splitLineColor
+      option.yAxis[0].axisLabel.color = themeColors.textColor
+      option.yAxis[0].nameTextStyle = { color: themeColors.textColor }
+    }
+
+    // 更新图例颜色
+    if (option.legend && Array.isArray(option.legend) && option.legend[0]) {
+      option.legend[0].textStyle = { color: themeColors.textColor }
+    }
+
+    // 更新提示框颜色
+    if (option.tooltip && Array.isArray(option.tooltip) && option.tooltip[0]) {
+      option.tooltip[0].backgroundColor = themeVars.value.cardColor
+      option.tooltip[0].borderColor = themeVars.value.borderColor
+      option.tooltip[0].textStyle = { color: themeColors.textColor }
+    }
+
+    // 更新系列颜色
+    option.color = themeColors.seriesColors
+
+    chart.setOption(option)
+  })
+}
+
+// 获取分析数据
+async function fetchAnalyzeData() {
+  try {
+    loading.value = true
+    const data = await QueryGetAPI<AnalyzeData>(`${ANALYZE_API_URL}all`)
+
+    if (data.code === 200) {
+      analyzeData.value = data.data
+      nextTick(() => initCharts())
+    } else {
+      message.error(`获取数据失败: ${data.message}`)
+    }
+  } catch (error) {
+    message.error(`获取数据出错:${(error as Error).message}`)
+    console.error('获取数据出错:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 窗口大小变化时重绘图表
+function handleResize() {
+  incomeChart?.resize()
+  interactionChart?.resize()
+  usersChart?.resize()
+}
+
+// 监听主题变化
+watch(() => themeVars.value, () => {
+  nextTick(() => updateChartTheme())
+}, { deep: true })
+
+// 组件挂载时初始化
+onMounted(() => {
+  fetchAnalyzeData()
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  incomeChart?.dispose()
+  interactionChart?.dispose()
+  usersChart?.dispose()
+})
+</script>
+
 <template>
   <div>
     <NSpace
@@ -238,472 +704,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, onMounted, computed, nextTick, onUnmounted, watch } from 'vue';
-import { NCard, NGrid, NGridItem, NSpin, NStatistic, NTabPane, NTabs, useMessage, NTag, NIcon, NDivider, NFlex, NSpace } from 'naive-ui';
-import * as echarts from 'echarts/core';
-import { LineChart, BarChart } from 'echarts/charts';
-import {
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  MarkPointComponent,
-  MarkLineComponent,
-  DataZoomComponent
-} from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import { QueryGetAPI } from '@/api/query';
-import { ANALYZE_API_URL } from '@/data/constants';
-import { useThemeVars } from 'naive-ui';
-import { TrendingDown, TrendingUp } from '@vicons/ionicons5';
-
-// 注册必要的组件
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  MarkPointComponent,
-  MarkLineComponent,
-  DataZoomComponent
-]);
-
-// types.ts
-interface ChartItem {
-  income: number;
-  interactionCount: number;
-  danmakuCount: number;
-  payingUsers: number;
-  interactionUsers: number;
-  liveMinutes: number;
-  likeCount: number;
-}
-
-interface Summary {
-  last7Days: {
-    totalIncome: number;
-    totalInteractions: number;
-    totalDanmakuCount: number;
-    totalLiveMinutes: number;
-    dailyAvgIncome: number;
-    dailyAvgDanmaku: number;
-    incomeTrend: number;
-    interactionTrend: number;
-    danmakuTrend: number;
-    activeLiveDays: number;
-    interactionUsers: number;
-    payingUsers: number;
-    interactionUsersTrend: number;
-    payingUsersTrend: number;
-  };
-  last30Days: {
-    totalIncome: number;
-    totalInteractions: number;
-    totalDanmakuCount: number;
-    totalLiveMinutes: number;
-    dailyAvgIncome: number;
-    dailyAvgDanmaku: number;
-    incomeTrend: number;
-    interactionTrend: number;
-    danmakuTrend: number;
-    activeLiveDays: number;
-    interactionUsers: number;
-    payingUsers: number;
-  };
-}
-
-interface AnalyzeData {
-  summary: Summary;
-  chartData: Record<number, ChartItem>; // 键是Unix时间戳，值是对应的数据
-}
-
-// 状态管理
-const loading = ref(true);
-const message = useMessage();
-const analyzeData = ref<AnalyzeData>();
-const summaryData = computed(() => analyzeData.value?.summary);
-const activeChart = ref('income');
-const themeVars = useThemeVars();
-
-// 处理标签页变化
-const onTabChange = (value: string) => {
-  nextTick(() => {
-    handleResize();
-  });
-};
-
-// 图表引用
-const incomeChartRef = ref<HTMLElement | null>(null);
-const interactionChartRef = ref<HTMLElement | null>(null);
-const usersChartRef = ref<HTMLElement | null>(null);
-
-// 图表实例
-let incomeChart: echarts.ECharts | null = null;
-let interactionChart: echarts.ECharts | null = null;
-let usersChart: echarts.ECharts | null = null;
-
-// 格式化工具函数
-const formatCurrency = (value: number): string => {
-  return `¥${value.toFixed(2)}`;
-};
-
-const formatTrend = (value: number): string => {
-  return value >= 0 ? `+${value}%` : `${value}%`;
-};
-
-const getTrendType = (value: number): 'success' | 'error' | 'info' => {
-  if (value > 0) return 'success';
-  if (value < 0) return 'error';
-  return 'info';
-};
-
-// 格式化时间戳为日期
-const formatDate = (timestamp: number): string => {
-  const date = new Date(timestamp * 1000);
-  return `${date.getMonth() + 1}/${date.getDate()}`;
-};
-
-// 从ChartData对象转换为数组，并按时间戳排序
-const getChartDataArray = () => {
-  if (!analyzeData.value?.chartData) return [];
-
-  return Object.entries(analyzeData.value.chartData)
-    .map(([timestamp, data]) => ({
-      timestamp: parseInt(timestamp, 10),
-      date: formatDate(parseInt(timestamp, 10)),
-      ...data
-    }))
-    .sort((a, b) => a.timestamp - b.timestamp);
-};
-
-// 获取主题色配置
-const getThemeColors = () => {
-  return {
-    textColor: themeVars.value.textColor2,
-    axisLineColor: themeVars.value.borderColor,
-    splitLineColor: themeVars.value.dividerColor,
-    seriesColors: [
-      themeVars.value.primaryColor,
-      themeVars.value.infoColor,
-      themeVars.value.successColor,
-      themeVars.value.warningColor,
-      themeVars.value.errorColor
-    ]
-  };
-};
-
-// 初始化图表
-const initCharts = () => {
-  const chartData = getChartDataArray();
-  if (chartData.length === 0) return;
-
-  const dates = chartData.map(item => item.date);
-  const themeColors = getThemeColors();
-
-  const baseOption = {
-    textStyle: {
-      color: themeColors.textColor
-    },
-    legend: {
-      textStyle: {
-        color: themeColors.textColor
-      }
-    },
-    xAxis: {
-      type: 'category',
-      data: dates,
-      axisLine: {
-        lineStyle: {
-          color: themeColors.axisLineColor
-        }
-      },
-      axisLabel: {
-        color: themeColors.textColor
-      }
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: {
-        lineStyle: {
-          color: themeColors.axisLineColor
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: themeColors.splitLineColor
-        }
-      },
-      axisLabel: {
-        color: themeColors.textColor
-      }
-    },
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: themeVars.value.cardColor,
-      borderColor: themeVars.value.borderColor,
-      textStyle: {
-        color: themeColors.textColor
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      top: '60px',
-      containLabel: true
-    },
-    color: themeColors.seriesColors,
-    dataZoom: [
-      {
-        type: 'inside',
-        start: 0,
-        end: 100
-      },
-      {
-        start: 0,
-        end: 100
-      }
-    ]
-  };
-
-  // 收入图表
-  if (incomeChartRef.value) {
-    incomeChart = echarts.init(incomeChartRef.value);
-    incomeChart.setOption({
-      ...baseOption,
-      title: {
-        text: '收益趋势',
-        textStyle: {
-          color: themeColors.textColor
-        }
-      },
-      yAxis: {
-        ...baseOption.yAxis,
-        name: '收益(元)',
-        nameTextStyle: {
-          color: themeColors.textColor
-        }
-      },
-      series: [
-        {
-          name: '收益',
-          type: 'line',
-          data: chartData.map(item => item.income),
-          areaStyle: {
-            opacity: 0.3
-          },
-          smooth: true,
-          markPoint: {
-            data: [
-              { type: 'max', name: '最高值' },
-              { type: 'min', name: '最低值' }
-            ]
-          },
-          markLine: {
-            data: [
-              { type: 'average', name: '平均值' }
-            ]
-          }
-        }
-      ]
-    });
-  }
-
-  // 互动图表
-  if (interactionChartRef.value) {
-    interactionChart = echarts.init(interactionChartRef.value);
-    interactionChart.setOption({
-      ...baseOption,
-      title: {
-        text: '互动趋势',
-        textStyle: {
-          color: themeColors.textColor
-        }
-      },
-      legend: {
-        data: ['互动数', '弹幕数', '点赞数'],
-        textStyle: {
-          color: themeColors.textColor
-        }
-      },
-      yAxis: {
-        ...baseOption.yAxis,
-        name: '数量',
-        nameTextStyle: {
-          color: themeColors.textColor
-        }
-      },
-      series: [
-        {
-          name: '互动数',
-          type: 'line',
-          data: chartData.map(item => item.interactionCount),
-          smooth: true
-        },
-        {
-          name: '弹幕数',
-          type: 'line',
-          data: chartData.map(item => item.danmakuCount),
-          smooth: true
-        },
-        {
-          name: '点赞数',
-          type: 'line',
-          data: chartData.map(item => item.likeCount),
-          smooth: true
-        }
-      ]
-    });
-  }
-
-  // 用户图表
-  if (usersChartRef.value) {
-    usersChart = echarts.init(usersChartRef.value);
-    usersChart.setOption({
-      ...baseOption,
-      title: {
-        text: '用户趋势',
-        textStyle: {
-          color: themeColors.textColor
-        }
-      },
-      legend: {
-        data: ['互动用户', '付费用户'],
-        textStyle: {
-          color: themeColors.textColor
-        }
-      },
-      yAxis: {
-        ...baseOption.yAxis,
-        name: '用户数',
-        nameTextStyle: {
-          color: themeColors.textColor
-        }
-      },
-      series: [
-        {
-          name: '互动用户',
-          type: 'bar',
-          data: chartData.map(item => item.interactionUsers),
-          barMaxWidth: '40%',
-          itemStyle: {
-            borderRadius: [4, 4, 0, 0]
-          }
-        },
-        {
-          name: '付费用户',
-          type: 'bar',
-          data: chartData.map(item => item.payingUsers),
-          barMaxWidth: '40%',
-          itemStyle: {
-            borderRadius: [4, 4, 0, 0]
-          }
-        }
-      ]
-    });
-  }
-};
-
-// 更新图表主题
-const updateChartTheme = () => {
-  const themeColors = getThemeColors();
-
-  [incomeChart, interactionChart, usersChart].forEach(chart => {
-    if (!chart) return;
-
-    const option = chart.getOption();
-
-    // 更新文本颜色
-    option.textStyle = { color: themeColors.textColor };
-
-    // 更新标题颜色
-    if (option.title && Array.isArray(option.title) && option.title[0]) {
-      option.title[0].textStyle = { color: themeColors.textColor };
-    }
-
-    // 更新坐标轴颜色
-    if (option.xAxis && Array.isArray(option.xAxis) && option.xAxis[0]) {
-      option.xAxis[0].axisLine.lineStyle.color = themeColors.axisLineColor;
-      option.xAxis[0].axisLabel.color = themeColors.textColor;
-    }
-
-    if (option.yAxis && Array.isArray(option.yAxis) && option.yAxis[0]) {
-      option.yAxis[0].axisLine.lineStyle.color = themeColors.axisLineColor;
-      option.yAxis[0].splitLine.lineStyle.color = themeColors.splitLineColor;
-      option.yAxis[0].axisLabel.color = themeColors.textColor;
-      option.yAxis[0].nameTextStyle = { color: themeColors.textColor };
-    }
-
-    // 更新图例颜色
-    if (option.legend && Array.isArray(option.legend) && option.legend[0]) {
-      option.legend[0].textStyle = { color: themeColors.textColor };
-    }
-
-    // 更新提示框颜色
-    if (option.tooltip && Array.isArray(option.tooltip) && option.tooltip[0]) {
-      option.tooltip[0].backgroundColor = themeVars.value.cardColor;
-      option.tooltip[0].borderColor = themeVars.value.borderColor;
-      option.tooltip[0].textStyle = { color: themeColors.textColor };
-    }
-
-    // 更新系列颜色
-    option.color = themeColors.seriesColors;
-
-    chart.setOption(option);
-  });
-};
-
-// 获取分析数据
-const fetchAnalyzeData = async () => {
-  try {
-    loading.value = true;
-    const data = await QueryGetAPI<AnalyzeData>(ANALYZE_API_URL + 'all');
-
-    if (data.code === 200) {
-      analyzeData.value = data.data;
-      nextTick(() => initCharts());
-    } else {
-      message.error(`获取数据失败: ${data.message}`);
-    }
-  } catch (error) {
-    message.error('获取数据出错:' + (error as Error).message);
-    console.error('获取数据出错:', error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 窗口大小变化时重绘图表
-const handleResize = () => {
-  incomeChart?.resize();
-  interactionChart?.resize();
-  usersChart?.resize();
-};
-
-// 监听主题变化
-watch(() => themeVars.value, () => {
-  nextTick(() => updateChartTheme());
-}, { deep: true });
-
-// 组件挂载时初始化
-onMounted(() => {
-  fetchAnalyzeData();
-  window.addEventListener('resize', handleResize);
-});
-
-// 组件卸载时清理
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
-  incomeChart?.dispose();
-  interactionChart?.dispose();
-  usersChart?.dispose();
-})
-</script>
-
 <style scoped>
 .analyze-card {
   margin-bottom: 20px;
diff --git a/src/views/manage/DanmujiManageView.vue b/src/views/manage/DanmujiManageView.vue
index 54982c3..7c36bbc 100644
--- a/src/views/manage/DanmujiManageView.vue
+++ b/src/views/manage/DanmujiManageView.vue
@@ -1,19 +1,14 @@
 <script setup lang="ts">
-import { useAccount, UploadConfig, DownloadConfig } from '@/api/account';
-import { EventDataTypes, GuardLevel } from '@/api/api-models';
-import { CURRENT_HOST, defaultDanmujiCss } from '@/data/constants';
-import { isDarkMode } from '@/Utils';
-import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
+import type { DanmujiConfig } from '../obs/DanmujiOBS.vue'
+import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
 import {
-  NAlert,
   NButton,
   NCard,
   NCheckbox,
-  NCollapse,
-  NCollapseItem,
   NDivider,
   NFlex,
-  NForm, NFormItem,
+  NForm,
+  NFormItem,
   NInput,
   NInputNumber,
   NPopconfirm,
@@ -21,20 +16,22 @@ import {
   NSpace,
   NSplit,
   NSwitch,
-  NTag,
-  NTabs,
   NTabPane,
-  useMessage
-} from 'naive-ui';
-import { reactive, ref, onMounted, onUnmounted, watch } from 'vue';
-import DanmujiOBS from '../obs/DanmujiOBS.vue';
-import type { DanmujiConfig } from '../obs/DanmujiOBS.vue';
+  NTabs,
+  useMessage,
+} from 'naive-ui'
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
+import { EventDataTypes, GuardLevel } from '@/api/api-models'
+import { CURRENT_HOST, defaultDanmujiCss } from '@/data/constants'
+import { isDarkMode } from '@/Utils'
+import DanmujiOBS from '../obs/DanmujiOBS.vue'
 
-const accountInfo = useAccount();
-const css = useStorage('danmuji-css', defaultDanmujiCss);
-const danmujiObsRef = ref<InstanceType<typeof DanmujiOBS> | null>(null);
-const message = useMessage();
-const windowWidth = useWindowSize().width;
+const accountInfo = useAccount()
+const css = useStorage('danmuji-css', defaultDanmujiCss)
+const danmujiObsRef = ref<InstanceType<typeof DanmujiOBS> | null>(null)
+const message = useMessage()
+const windowWidth = useWindowSize().width
 
 const testFormData = reactive({
   type: EventDataTypes.Message,
@@ -46,8 +43,8 @@ const testFormData = reactive({
   guard_level: GuardLevel.Jianzhang,
   fans_medal_level: 10,
   fans_medal_name: '测试牌子',
-  sc_id_to_delete: ''
-});
+  sc_id_to_delete: '',
+})
 
 const messageTypeOptions = [
   { label: '弹幕 (Message)', value: EventDataTypes.Message },
@@ -55,13 +52,13 @@ const messageTypeOptions = [
   { label: '舰长 (Guard)', value: EventDataTypes.Guard },
   { label: '醒目留言 (SC)', value: EventDataTypes.SC },
   { label: '删除SC (SCDel)', value: EventDataTypes.SCDel },
-];
+]
 
 const guardLevelOptions = [
-    { label: '非舰长', value: GuardLevel.None },
-    { label: '舰长', value: GuardLevel.Jianzhang },
-    { label: '提督', value: GuardLevel.Tidu },
-    { label: '总督', value: GuardLevel.Zongdu },
+  { label: '非舰长', value: GuardLevel.None },
+  { label: '舰长', value: GuardLevel.Jianzhang },
+  { label: '提督', value: GuardLevel.Tidu },
+  { label: '总督', value: GuardLevel.Zongdu },
 ]
 
 // 随机弹幕内容库
@@ -95,8 +92,8 @@ const randomMessages = [
   '皮套萌萌哒',
   '这个建模好精致',
   '有没有录播组',
-  '狗头保命'
-];
+  '狗头保命',
+]
 
 // 随机用户名库
 const randomUsernames = [
@@ -124,8 +121,8 @@ const randomUsernames = [
   '白上单推人',
   'ぺこら推し',
   '星街永远爱',
-  '吹雪的狗'
-];
+  '吹雪的狗',
+]
 
 // 随机礼物名库
 const randomGifts = [
@@ -143,8 +140,8 @@ const randomGifts = [
   '棒棒糖',
   '荧光棒',
   '小黄鸭',
-  '小飞船'
-];
+  '小飞船',
+]
 
 // 随机粉丝牌名称库
 const randomMedalNames = [
@@ -162,8 +159,8 @@ const randomMedalNames = [
   '虹团',
   '杏仁',
   '梦追人',
-  'VVota'
-];
+  'VVota',
+]
 
 // 保存DanmujiConfig的配置
 const danmujiConfig = useStorage<DanmujiConfig>('danmuji-config', {
@@ -183,16 +180,16 @@ const danmujiConfig = useStorage<DanmujiConfig>('danmuji-config', {
   giftUsernamePronunciation: '',
   importPresetCss: false,
 
-  emoticons: []
-});
+  emoticons: [],
+})
 
 // 修改为使用标签页的活动键存储
-const activeTab = useStorage('danmuji-active-tab', 'style');
+const activeTab = useStorage('danmuji-active-tab', 'style')
 
 // 自动生成弹幕设置
-const isAutoGenerating = ref(true);
-const autoGenerateInterval = ref(1); // 默认间隔3秒
-let autoGenerateTimer: ReturnType<typeof setTimeout> | null = null;
+const isAutoGenerating = ref(true)
+const autoGenerateInterval = ref(1) // 默认间隔3秒
+let autoGenerateTimer: ReturnType<typeof setTimeout> | null = null
 
 // 自动生成弹幕的独立数据对象，不影响表单
 const autoGenData = reactive({
@@ -205,11 +202,11 @@ const autoGenData = reactive({
   guard_level: GuardLevel.None,
   fans_medal_level: 0,
   fans_medal_name: '',
-});
+})
 
 // 重设CSS为默认值
 function resetCssToDefault() {
-  css.value = defaultDanmujiCss;
+  css.value = defaultDanmujiCss
 }
 
 // 重设配置为默认值
@@ -231,73 +228,73 @@ function resetConfigToDefault() {
     giftUsernamePronunciation: '',
     importPresetCss: false,
 
-    emoticons: []
-  };
-  message.success('配置已重置为默认值');
+    emoticons: [],
+  }
+  message.success('配置已重置为默认值')
 }
 
 // 随机生成测试弹幕内容
 function generateRandomContent() {
   // 随机生成用户名
-  testFormData.uname = randomUsernames[Math.floor(Math.random() * randomUsernames.length)];
+  testFormData.uname = randomUsernames[Math.floor(Math.random() * randomUsernames.length)]
 
   // 随机生成用户ID (10000-99999)
-  testFormData.uid = Math.floor(Math.random() * 90000) + 10000;
+  testFormData.uid = Math.floor(Math.random() * 90000) + 10000
 
   // 根据消息类型随机生成相应内容
   switch (testFormData.type) {
     case EventDataTypes.Message:
       // 随机弹幕内容
-      testFormData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)];
+      testFormData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)]
       // 随机粉丝牌等级 (0-30)
-      testFormData.fans_medal_level = Math.floor(Math.random() * 31);
+      testFormData.fans_medal_level = Math.floor(Math.random() * 31)
       // 随机粉丝牌名称
-      testFormData.fans_medal_name = randomMedalNames[Math.floor(Math.random() * randomMedalNames.length)];
+      testFormData.fans_medal_name = randomMedalNames[Math.floor(Math.random() * randomMedalNames.length)]
       // 随机舰长等级
-      const guardRandomIndex = Math.floor(Math.random() * guardLevelOptions.length);
-      testFormData.guard_level = guardLevelOptions[guardRandomIndex].value;
-      break;
+      const guardRandomIndex = Math.floor(Math.random() * guardLevelOptions.length)
+      testFormData.guard_level = guardLevelOptions[guardRandomIndex].value
+      break
 
     case EventDataTypes.Gift:
       // 随机礼物名称
-      testFormData.msg = randomGifts[Math.floor(Math.random() * randomGifts.length)];
+      testFormData.msg = randomGifts[Math.floor(Math.random() * randomGifts.length)]
       // 随机礼物数量 (1-99)
-      testFormData.num = Math.floor(Math.random() * 99) + 1;
+      testFormData.num = Math.floor(Math.random() * 99) + 1
       // 随机礼物价值 (1-50)
-      testFormData.price = Math.floor(Math.random() * 50) + 1;
-      break;
+      testFormData.price = Math.floor(Math.random() * 50) + 1
+      break
 
     case EventDataTypes.Guard:
       // 随机舰长等级 (排除非舰长选项)
-      const guardOptions = guardLevelOptions.filter(option => option.value !== GuardLevel.None);
-      const guardIndex = Math.floor(Math.random() * guardOptions.length);
-      testFormData.guard_level = guardOptions[guardIndex].value;
-      break;
+      const guardOptions = guardLevelOptions.filter(option => option.value !== GuardLevel.None)
+      const guardIndex = Math.floor(Math.random() * guardOptions.length)
+      testFormData.guard_level = guardOptions[guardIndex].value
+      break
 
     case EventDataTypes.SC:
       // 随机SC内容
-      testFormData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)];
+      testFormData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)]
       // 随机SC价格 (5-500)
-      testFormData.price = Math.floor(Math.random() * 496) + 5;
-      break;
+      testFormData.price = Math.floor(Math.random() * 496) + 5
+      break
 
     case EventDataTypes.SCDel:
       // 生成一个假的SC ID
-      testFormData.sc_id_to_delete = `test-sc-${Date.now() - Math.floor(Math.random() * 10000)}`;
-      break;
+      testFormData.sc_id_to_delete = `test-sc-${Date.now() - Math.floor(Math.random() * 10000)}`
+      break
   }
 }
 
 function sendTestMessage() {
   if (!danmujiObsRef.value) {
-    console.error("DanmujiOBS component instance not found.");
-    return;
+    console.error('DanmujiOBS component instance not found.')
+    return
   }
 
-  let dataPayload: any = {};
-  const baseMsg = testFormData.msg;
-  const basePrice = testFormData.price;
-  const baseGuardLevel = testFormData.guard_level;
+  let dataPayload: any = {}
+  const baseMsg = testFormData.msg
+  const basePrice = testFormData.price
+  const baseGuardLevel = testFormData.guard_level
 
   switch (testFormData.type) {
     case EventDataTypes.Message:
@@ -310,8 +307,8 @@ function sendTestMessage() {
         guard_level: testFormData.guard_level,
         fans_medal_level: testFormData.fans_medal_level,
         fans_medal_name: testFormData.fans_medal_name,
-      };
-      break;
+      }
+      break
     case EventDataTypes.Gift:
       dataPayload = {
         msg_id: `test-gift-${Date.now()}`,
@@ -322,20 +319,20 @@ function sendTestMessage() {
         paid: true,
         uname: testFormData.uname,
         uid: testFormData.uid,
-      };
-      break;
+      }
+      break
     case EventDataTypes.Guard:
       dataPayload = {
         msg_id: `test-guard-${Date.now()}`,
         timestamp: Date.now() / 1000,
         guard_level: testFormData.guard_level,
         user_info: {
-            uname: testFormData.uname,
-            uid: testFormData.uid,
-            uface: ''
-        }
-      };
-      break;
+          uname: testFormData.uname,
+          uid: testFormData.uid,
+          uface: '',
+        },
+      }
+      break
     case EventDataTypes.SC:
       dataPayload = {
         msg_id: `test-sc-${Date.now()}`,
@@ -344,13 +341,13 @@ function sendTestMessage() {
         rmb: testFormData.price,
         uname: testFormData.uname,
         uid: testFormData.uid,
-      };
-      break;
+      }
+      break
     case EventDataTypes.SCDel:
       dataPayload = {
-        message_ids: [testFormData.sc_id_to_delete || `test-sc-${Date.now() - 5000}`]
-      };
-      break;
+        message_ids: [testFormData.sc_id_to_delete || `test-sc-${Date.now() - 5000}`],
+      }
+      break
   }
 
   const eventToSend = {
@@ -364,129 +361,129 @@ function sendTestMessage() {
     fans_medal_level: Number(testFormData.fans_medal_level ?? 0),
     fans_medal_name: testFormData.fans_medal_name,
     time: dataPayload.timestamp ?? Date.now() / 1000,
-    data: dataPayload
-  };
+    data: dataPayload,
+  }
 
-  danmujiObsRef.value.testAddMessage(eventToSend as any);
+  danmujiObsRef.value.testAddMessage(eventToSend as any)
 }
 
 // 添加初始测试数据
 function addInitialTestMessages() {
-  if (!danmujiObsRef.value) return;
+  if (!danmujiObsRef.value) return
 
   // 延迟执行，确保组件已完全渲染
   setTimeout(() => {
     // 添加普通弹幕消息
     for (let i = 0; i < 5; i++) {
-      autoGenData.type = EventDataTypes.Message;
-      generateAutoContent();
-      sendAutoMessage();
+      autoGenData.type = EventDataTypes.Message
+      generateAutoContent()
+      sendAutoMessage()
     }
 
     // 添加礼物消息
-    autoGenData.type = EventDataTypes.Gift;
-    generateAutoContent();
-    sendAutoMessage();
+    autoGenData.type = EventDataTypes.Gift
+    generateAutoContent()
+    sendAutoMessage()
 
     // 添加舰长消息
-    autoGenData.type = EventDataTypes.Guard;
-    generateAutoContent();
-    sendAutoMessage();
+    autoGenData.type = EventDataTypes.Guard
+    generateAutoContent()
+    sendAutoMessage()
 
     // 添加SC消息
-    autoGenData.type = EventDataTypes.SC;
-    generateAutoContent();
-    sendAutoMessage();
-  }, 500);
+    autoGenData.type = EventDataTypes.SC
+    generateAutoContent()
+    sendAutoMessage()
+  }, 500)
 }
 
 // 开始自动生成弹幕
 function startAutoGenerate() {
   if (autoGenerateTimer) {
-    clearTimeout(autoGenerateTimer);
+    clearTimeout(autoGenerateTimer)
   }
 
-  if (!isAutoGenerating.value) return;
+  if (!isAutoGenerating.value) return
 
   // 生成随机消息类型
   const messageTypes = [
     EventDataTypes.Message,
     EventDataTypes.Gift,
     EventDataTypes.Guard,
-    EventDataTypes.SC
-  ];
+    EventDataTypes.SC,
+  ]
 
   // 50%概率为普通弹幕，50%概率为其他类型
   autoGenData.type = Math.random() < 0.5
     ? EventDataTypes.Message
-    : messageTypes[Math.floor(Math.random() * messageTypes.length)];
+    : messageTypes[Math.floor(Math.random() * messageTypes.length)]
 
   // 为自动生成数据随机生成内容
-  generateAutoContent();
+  generateAutoContent()
 
   // 发送自动生成的消息
-  sendAutoMessage();
+  sendAutoMessage()
 
   // 随机间隔时间（基础间隔的50%-150%）
-  const randomInterval = autoGenerateInterval.value * (0.5 + Math.random());
-  autoGenerateTimer = setTimeout(startAutoGenerate, randomInterval * 1000);
+  const randomInterval = autoGenerateInterval.value * (0.5 + Math.random())
+  autoGenerateTimer = setTimeout(startAutoGenerate, randomInterval * 1000)
 }
 
 // 为自动生成弹幕生成随机内容
 function generateAutoContent() {
   // 随机生成用户名
-  autoGenData.uname = randomUsernames[Math.floor(Math.random() * randomUsernames.length)];
+  autoGenData.uname = randomUsernames[Math.floor(Math.random() * randomUsernames.length)]
 
   // 随机生成用户ID (10000-99999)
-  autoGenData.uid = Math.floor(Math.random() * 90000) + 10000;
+  autoGenData.uid = Math.floor(Math.random() * 90000) + 10000
 
   // 根据消息类型随机生成相应内容
   switch (autoGenData.type) {
     case EventDataTypes.Message:
       // 随机弹幕内容
-      autoGenData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)];
+      autoGenData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)]
       // 随机粉丝牌等级 (0-30)
-      autoGenData.fans_medal_level = Math.floor(Math.random() * 31);
+      autoGenData.fans_medal_level = Math.floor(Math.random() * 31)
       // 随机粉丝牌名称
-      autoGenData.fans_medal_name = randomMedalNames[Math.floor(Math.random() * randomMedalNames.length)];
+      autoGenData.fans_medal_name = randomMedalNames[Math.floor(Math.random() * randomMedalNames.length)]
       // 随机舰长等级
-      const guardRandomIndex = Math.floor(Math.random() * guardLevelOptions.length);
-      autoGenData.guard_level = guardLevelOptions[guardRandomIndex].value;
-      break;
+      const guardRandomIndex = Math.floor(Math.random() * guardLevelOptions.length)
+      autoGenData.guard_level = guardLevelOptions[guardRandomIndex].value
+      break
 
     case EventDataTypes.Gift:
       // 随机礼物名称
-      autoGenData.msg = randomGifts[Math.floor(Math.random() * randomGifts.length)];
+      autoGenData.msg = randomGifts[Math.floor(Math.random() * randomGifts.length)]
       // 随机礼物数量 (1-99)
-      autoGenData.num = Math.floor(Math.random() * 99) + 1;
+      autoGenData.num = Math.floor(Math.random() * 99) + 1
       // 随机礼物价值 (1-50)
-      autoGenData.price = Math.floor(Math.random() * 50) + 1;
-      break;
+      autoGenData.price = Math.floor(Math.random() * 50) + 1
+      break
 
     case EventDataTypes.Guard:
       // 随机舰长等级 (排除非舰长选项)
-      const guardOptions = guardLevelOptions.filter(option => option.value !== GuardLevel.None);
-      const guardIndex = Math.floor(Math.random() * guardOptions.length);
-      autoGenData.guard_level = guardOptions[guardIndex].value;
-      break;
+      const guardOptions = guardLevelOptions.filter(option => option.value !== GuardLevel.None)
+      const guardIndex = Math.floor(Math.random() * guardOptions.length)
+      autoGenData.guard_level = guardOptions[guardIndex].value
+      break
 
     case EventDataTypes.SC:
       // 随机SC内容
-      autoGenData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)];
+      autoGenData.msg = randomMessages[Math.floor(Math.random() * randomMessages.length)]
       // 随机SC价格 (5-500)
-      autoGenData.price = Math.floor(Math.random() * 496) + 5;
-      break;
+      autoGenData.price = Math.floor(Math.random() * 496) + 5
+      break
   }
 }
 
 // 发送自动生成的消息
 function sendAutoMessage() {
   if (!danmujiObsRef.value) {
-    console.error("DanmujiOBS component instance not found.");
-    return;
+    console.error('DanmujiOBS component instance not found.')
+    return
   }
 
-  let dataPayload: any = {};
+  let dataPayload: any = {}
 
   switch (autoGenData.type) {
     case EventDataTypes.Message:
@@ -499,8 +496,8 @@ function sendAutoMessage() {
         guard_level: autoGenData.guard_level,
         fans_medal_level: autoGenData.fans_medal_level,
         fans_medal_name: autoGenData.fans_medal_name,
-      };
-      break;
+      }
+      break
     case EventDataTypes.Gift:
       dataPayload = {
         msg_id: `test-gift-${Date.now()}`,
@@ -511,20 +508,20 @@ function sendAutoMessage() {
         paid: true,
         uname: autoGenData.uname,
         uid: autoGenData.uid,
-      };
-      break;
+      }
+      break
     case EventDataTypes.Guard:
       dataPayload = {
         msg_id: `test-guard-${Date.now()}`,
         timestamp: Date.now() / 1000,
         guard_level: autoGenData.guard_level,
         user_info: {
-            uname: autoGenData.uname,
-            uid: autoGenData.uid,
-            uface: ''
-        }
-      };
-      break;
+          uname: autoGenData.uname,
+          uid: autoGenData.uid,
+          uface: '',
+        },
+      }
+      break
     case EventDataTypes.SC:
       dataPayload = {
         msg_id: `test-sc-${Date.now()}`,
@@ -533,8 +530,8 @@ function sendAutoMessage() {
         rmb: autoGenData.price,
         uname: autoGenData.uname,
         uid: autoGenData.uid,
-      };
-      break;
+      }
+      break
   }
 
   const eventToSend = {
@@ -548,69 +545,69 @@ function sendAutoMessage() {
     fans_medal_level: Number(autoGenData.fans_medal_level ?? 0),
     fans_medal_name: autoGenData.fans_medal_name,
     time: dataPayload.timestamp ?? Date.now() / 1000,
-    data: dataPayload
-  };
+    data: dataPayload,
+  }
 
-  danmujiObsRef.value.testAddMessage(eventToSend as any);
+  danmujiObsRef.value.testAddMessage(eventToSend as any)
 }
 
 // 监听自动生成状态变化
 watch(isAutoGenerating, (newValue) => {
   if (newValue) {
-    startAutoGenerate();
+    startAutoGenerate()
   } else if (autoGenerateTimer) {
-    clearTimeout(autoGenerateTimer);
-    autoGenerateTimer = null;
+    clearTimeout(autoGenerateTimer)
+    autoGenerateTimer = null
   }
-}, { immediate: true });
+}, { immediate: true })
 
 // 从服务器获取配置
 async function downloadConfigFromServer() {
-  const result = await DownloadConfig<DanmujiConfig>('danmuji-config');
+  const result = await DownloadConfig<DanmujiConfig>('danmuji-config')
   if (result.status === 'success' && result.data) {
-    danmujiConfig.value = result.data;
-    message.success('已从服务器获取弹幕姬配置');
-    return true;
+    danmujiConfig.value = result.data
+    message.success('已从服务器获取弹幕姬配置')
+    return true
   } else if (result.status === 'notfound') {
-    //message.info('服务器上未找到弹幕姬配置，将使用本地配置');
-    uploadConfigToServer();
+    // message.info('服务器上未找到弹幕姬配置，将使用本地配置');
+    uploadConfigToServer()
   } else {
-    message.error(`获取配置失败: ${result.msg}`);
+    message.error(`获取配置失败: ${result.msg}`)
   }
-  return false;
+  return false
 }
 
 // 组件挂载后添加初始测试数据
 onMounted(async () => {
   // 先尝试从服务器获取配置
-  await downloadConfigFromServer();
+  await downloadConfigFromServer()
 
   // 添加初始测试数据
-  addInitialTestMessages();
+  addInitialTestMessages()
 
   // 确保在添加初始测试数据后启动自动生成
   setTimeout(() => {
     if (isAutoGenerating.value && !autoGenerateTimer) {
-      startAutoGenerate();
+      startAutoGenerate()
     }
-  }, 1000);
-});
+  }, 1000)
+})
 
 // 组件卸载时清除定时器
 onUnmounted(() => {
   if (autoGenerateTimer) {
-    clearTimeout(autoGenerateTimer);
-    autoGenerateTimer = null;
+    clearTimeout(autoGenerateTimer)
+    autoGenerateTimer = null
   }
-});
+})
 
 // 上传配置到服务器
 async function uploadConfigToServer() {
-  const result = await UploadConfig('danmuji-config', danmujiConfig.value);
+  const result = await UploadConfig('danmuji-config', danmujiConfig.value)
   if (result) {
-    message.success('弹幕姬配置已上传到服务器');
+    message.success('弹幕姬配置已上传到服务器')
   } else {
-    message.error('上传弹幕姬配置失败');
+    message.error('上传弹幕姬配置失败')
   }
 }
 </script>
@@ -672,7 +669,7 @@ async function uploadConfigToServer() {
                     style="height: 400px; width: 100%;"
                     :options="{
                       minimap: {
-                        enabled: false
+                        enabled: false,
                       },
                       fontSize: 14,
                       automaticLayout: true,
@@ -682,11 +679,11 @@ async function uploadConfigToServer() {
                       wordWrap: 'on',
                       tabSize: 2,
                       bracketPairColorization: {
-                        enabled: true
+                        enabled: true,
                       },
                       guides: {
                         bracketPairs: true,
-                        indentation: true
+                        indentation: true,
                       },
                       autoIndent: 'full',
                       cursorBlinking: 'smooth',
@@ -700,8 +697,8 @@ async function uploadConfigToServer() {
                       colorDecorators: true,
                       scrollbar: {
                         verticalScrollbarSize: 10,
-                        horizontalScrollbarSize: 10
-                      }
+                        horizontalScrollbarSize: 10,
+                      },
                     }"
                     :theme="isDarkMode ? 'vs-dark' : 'vs'"
                   />
@@ -1137,4 +1134,4 @@ async function uploadConfigToServer() {
 :deep(::-webkit-scrollbar-thumb:hover) {
   background: rgba(0, 0, 0, 0.3);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index 266eee1..aca48f1 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { cookie, useAccount } from '@/api/account'
-import { BiliAuthCodeStatusType, BiliAuthModel } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
-import { ACCOUNT_API_URL, CN_HOST, TURNSTILE_KEY } from '@/data/constants'
+import type { BiliAuthModel } from '@/api/api-models'
 import { Info24Filled, Mic24Filled, Question24Regular } from '@vicons/fluent'
+import { useRouteQuery } from '@vueuse/router'
 import {
   NAlert,
   NButton,
@@ -26,15 +23,18 @@ import {
   NText,
   NTime,
   NTooltip,
-  useMessage
+  useMessage,
 } from 'naive-ui'
 import { onUnmounted, ref } from 'vue'
-import { useRouteQuery } from '@vueuse/router'
 import VueTurnstile from 'vue-turnstile'
+import { cookie, useAccount } from '@/api/account'
+import { BiliAuthCodeStatusType } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
+import { ACCOUNT_API_URL, CN_HOST, TURNSTILE_KEY } from '@/data/constants'
+import { checkUpdateNote } from '@/data/UpdateNote'
 import SettingPaymentView from './Setting_PaymentView.vue'
 import SettingsManageView from './SettingsManageView.vue'
-import { checkUpdateNote } from '@/data/UpdateNote'
-
 
 const token = ref('')
 const turnstile = ref()
@@ -69,7 +69,7 @@ function logout() {
 }
 function resetBili() {
   isLoading.value = true
-  QueryGetAPI(ACCOUNT_API_URL + 'reset-bili')
+  QueryGetAPI(`${ACCOUNT_API_URL}reset-bili`)
     .then((data) => {
       if (data.code == 200) {
         message.success('已解绑 Bilibili 主播账号')
@@ -86,7 +86,7 @@ function resetBili() {
 }
 function resetBiliAuthBind() {
   isLoading.value = true
-  QueryGetAPI(ACCOUNT_API_URL + 'reset-bili-auth')
+  QueryGetAPI(`${ACCOUNT_API_URL}reset-bili-auth`)
     .then((data) => {
       if (data.code == 200) {
         message.success('已解绑 Bilibili 用户账号')
@@ -103,10 +103,10 @@ function resetBiliAuthBind() {
 }
 function resetEmail() {
   isLoading.value = true
-  QueryGetAPI(ACCOUNT_API_URL + 'reset-email', { email: newEmailAddress.value, code: newEmailVerifyCode.value })
+  QueryGetAPI(`${ACCOUNT_API_URL}reset-email`, { email: newEmailAddress.value, code: newEmailVerifyCode.value })
     .then((data) => {
       if (data.code == 200) {
-        message.success('已将邮箱改绑为 ' + newEmailAddress.value)
+        message.success(`已将邮箱改绑为 ${newEmailAddress.value}`)
         setTimeout(() => {
           location.reload()
         }, 1000)
@@ -119,7 +119,7 @@ function resetEmail() {
     })
 }
 function sendEmailVerifyCode() {
-  QueryGetAPI(ACCOUNT_API_URL + 'reset-email/code', { email: newEmailAddress.value })
+  QueryGetAPI(`${ACCOUNT_API_URL}reset-email/code`, { email: newEmailAddress.value })
     .then((data) => {
       if (data.code == 200) {
         message.success('发送成功, 请检查目标邮箱. 如果没有收到, 请检查垃圾邮件')
@@ -140,7 +140,7 @@ async function resetPassword() {
     message.error('两次密码不一致')
     return
   }
-  await QueryGetAPI(ACCOUNT_API_URL + 'verify/reset-password', { password: newPassword.value })
+  await QueryGetAPI(`${ACCOUNT_API_URL}verify/reset-password`, { password: newPassword.value })
     .then(async (data) => {
       if (data.code == 200) {
         message.success('密码已修改')
@@ -161,7 +161,7 @@ async function resetName() {
     return
   }
   isLoading.value = true
-  await QueryGetAPI(ACCOUNT_API_URL + 'change-name', { name: newName.value })
+  await QueryGetAPI(`${ACCOUNT_API_URL}change-name`, { name: newName.value })
     .then(async (data) => {
       if (data.code == 200) {
         message.success('用户名已修改')
@@ -181,7 +181,7 @@ async function resetName() {
 }
 async function resetToken() {
   isLoading.value = true
-  await QueryPostAPI<string>(ACCOUNT_API_URL + 'reset-token')
+  await QueryPostAPI<string>(`${ACCOUNT_API_URL}reset-token`)
     .then(async (data) => {
       if (data.code == 200) {
         message.success('已重新生成 Token')
@@ -192,7 +192,7 @@ async function resetToken() {
       }
     })
     .catch((err) => {
-      message.error('发生错误: ' + err)
+      message.error(`发生错误: ${err}`)
     })
     .finally(() => {
       isLoading.value = false
@@ -209,7 +209,7 @@ async function BindBili() {
     uid: number
     uface: string
     room_id: number
-  }>(ACCOUNT_API_URL + 'bind-bili', { code: biliCode.value }, [['Turnstile', token.value]])
+  }>(`${ACCOUNT_API_URL}bind-bili`, { code: biliCode.value }, [['Turnstile', token.value]])
     .then(async (data) => {
       if (data.code == 200) {
         message.success('已绑定, 如无特殊情况请勿刷新身份码, 如果刷新了且还需要使用本站直播相关功能请更新身份码')
@@ -234,10 +234,10 @@ async function BindBiliAuth() {
     return
   }
   isLoading.value = true
-  await QueryGetAPI<BiliAuthModel>(ACCOUNT_API_URL + 'bind-bili-auth', { token: biliAuthText.value })
+  await QueryGetAPI<BiliAuthModel>(`${ACCOUNT_API_URL}bind-bili-auth`, { token: biliAuthText.value })
     .then(async (data) => {
       if (data.code == 200) {
-        message.success('已绑定用户: ' + data.data.userId)
+        message.success(`已绑定用户: ${data.data.userId}`)
         setTimeout(() => {
           location.reload()
         }, 1000)
@@ -263,7 +263,7 @@ async function ChangeBili() {
     uid: number
     uface: string
     room_id: number
-  }>(ACCOUNT_API_URL + 'change-bili', { code: biliCode.value }, [['Turnstile', token.value]])
+  }>(`${ACCOUNT_API_URL}change-bili`, { code: biliCode.value }, [['Turnstile', token.value]])
     .then(async (data) => {
       if (data.code == 200) {
         message.success('已更新身份码')
@@ -283,8 +283,7 @@ async function ChangeBili() {
     })
 }
 onMounted(() => {
-
-  checkUpdateNote();
+  checkUpdateNote()
 })
 onUnmounted(() => {
   turnstile.value?.remove()
diff --git a/src/views/manage/EventView.vue b/src/views/manage/EventView.vue
index eba99ab..bd198e1 100644
--- a/src/views/manage/EventView.vue
+++ b/src/views/manage/EventView.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import { isDarkMode } from '@/Utils'
-import { useAccount } from '@/api/account'
-import { QueryGetAPI } from '@/api/query'
-import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
-import EventFetcherAlert from '@/components/EventFetcherAlert.vue' // 添加缺失的组件导入
-import { AVATAR_URL, BASE_API_URL, EVENT_API_URL } from '@/data/constants'
+import type { EventModel } from '@/api/api-models'
 import { Grid28Filled, List16Filled } from '@vicons/fluent'
 import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
@@ -23,6 +18,7 @@ import {
   NGridItem,
   NH3,
   NIcon,
+  NInfiniteScroll,
   NLi,
   NRadioButton,
   NRadioGroup,
@@ -34,10 +30,15 @@ import {
   NTime,
   NUl,
   useMessage,
-  NInfiniteScroll,
 } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
-import { EventDataTypes, EventModel } from '@/api/api-models'
+import { useAccount } from '@/api/account'
+import { EventDataTypes } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import EventFetcherAlert from '@/components/EventFetcherAlert.vue' // 添加缺失的组件导入
+import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
+import { AVATAR_URL, EVENT_API_URL } from '@/data/constants'
+import { isDarkMode } from '@/Utils'
 
 const accountInfo = useAccount()
 const message = useMessage()
@@ -73,13 +74,13 @@ const hasMore = ref(true) // 是否还有更多数据
 // 根据类型过滤事件 - 这个计算属性现在可能只显示当前已加载的事件
 // 如果需要导出 *所有* 选定日期/类型的数据，导出逻辑需要调整
 const selectedEvents = computed(() => {
-  return events.value.filter((e) => e.type == selectedType.value)
+  return events.value.filter(e => e.type == selectedType.value)
 })
 
 // API请求获取数据 - 修改为支持分页
 async function get(currentOffset: number, currentLimit: number) {
   try {
-    const data = await QueryGetAPI<EventModel[]>(EVENT_API_URL + 'get', {
+    const data = await QueryGetAPI<EventModel[]>(`${EVENT_API_URL}get`, {
       start: selectedDate.value[0],
       end: selectedDate.value[1],
       offset: currentOffset, // 添加 offset 参数
@@ -89,11 +90,11 @@ async function get(currentOffset: number, currentLimit: number) {
       message.success(`成功获取 ${data.data.length} 条数据`) // 调整提示
       return data.data // 直接返回数据数组
     } else {
-      message.error('获取数据失败: ' + data.message)
+      message.error(`获取数据失败: ${data.message}`)
       return []
     }
   } catch (err) {
-    message.error('获取数据失败: ' + (err as Error).message) // 提供更详细的错误信息
+    message.error(`获取数据失败: ${(err as Error).message}`) // 提供更详细的错误信息
     return []
   }
 }
@@ -116,7 +117,7 @@ async function fetchData(isInitialLoad = false) {
 
   if (fetchedData.length > 0) {
     // 使用 Linqts 进行排序后追加或设置
-    const sortedData = new List(fetchedData).OrderByDescending((d) => d.time).ToArray()
+    const sortedData = new List(fetchedData).OrderByDescending(d => d.time).ToArray()
     events.value = isInitialLoad ? sortedData : [...events.value, ...sortedData]
     offset.value += fetchedData.length // 更新偏移量
     hasMore.value = fetchedData.length === limit.value // 如果返回的数量等于请求的数量，则可能还有更多
@@ -172,7 +173,7 @@ function GetGuardColor(price: number | null | undefined): string {
 
 // 导出数据功能 - 注意：这现在只导出已加载的数据
 function exportData() {
-  if(hasMore.value) {
+  if (hasMore.value) {
     message.warning('当前导出的是已加载的部分数据，并非所有数据。')
   }
   let text = ''
@@ -185,7 +186,7 @@ function exportData() {
     }
     case 'csv': {
       text = objectsToCSV(
-        selectedEvents.value.map((v) => ({
+        selectedEvents.value.map(v => ({
           type: v.type,
           time: format(v.time, 'yyyy-MM-dd HH:mm:ss'),
           name: v.uname,
@@ -201,7 +202,7 @@ function exportData() {
 
   saveAs(
     new Blob([text], { type: 'text/plain;charset=utf-8' }),
-    fileName
+    fileName,
   )
 }
 
@@ -343,7 +344,7 @@ function objectsToCSV(arr: any[]) {
               >
                 <NGridItem
                   v-for="item in selectedEvents"
-                  :key="item.time + '_' + item.uid + '_' + item.price"
+                  :key="`${item.time}_${item.uid}_${item.price}`"
                 >
                   <NCard
                     size="small"
@@ -453,7 +454,7 @@ function objectsToCSV(arr: any[]) {
             <tbody>
               <tr
                 v-for="item in selectedEvents"
-                :key="item.time + '_' + item.uid + '_' + item.price"
+                :key="`${item.time}_${item.uid}_${item.price}`"
               >
                 <td>{{ item.uname }}</td>
                 <td>{{ item.uid }}</td>
diff --git a/src/views/manage/ForumManage.vue b/src/views/manage/ForumManage.vue
index be83d44..4dd259a 100644
--- a/src/views/manage/ForumManage.vue
+++ b/src/views/manage/ForumManage.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { useForumStore } from '@/store/useForumStore'
-import {
+import type {
   DataTableColumns,
+} from 'naive-ui'
+import type { UserBasicInfo } from '@/api/api-models'
+import type { ForumModel, ForumUserModel } from '@/api/models/forum'
+import {
   NAlert,
   NButton,
   NCard,
@@ -19,7 +20,6 @@ import {
   NModal,
   NSelect,
   NSpin,
-  NSwitch,
   NTabPane,
   NTabs,
   NTag,
@@ -27,12 +27,14 @@ import {
   useMessage,
 } from 'naive-ui'
 import { h, onMounted, ref } from 'vue'
-import { ForumModel, ForumUserLevels, ForumUserModel } from '@/api/models/forum'
+import { useAccount } from '@/api/account'
+import { ForumUserLevels } from '@/api/models/forum'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import UserBasicInfoCard from '@/components/UserBasicInfoCard.vue'
 import { FORUM_API_URL } from '@/data/constants'
 // @ts-ignore
 import Agreement from '@/document/EnableForumAgreement.md'
-import { UserBasicInfo } from '@/api/api-models'
-import UserBasicInfoCard from '@/components/UserBasicInfoCard.vue'
+import { useForumStore } from '@/store/useForumStore'
 
 const useForum = useForumStore()
 const accountInfo = useAccount()
@@ -90,19 +92,19 @@ async function createForum() {
     return
   }
   try {
-    const data = await QueryPostAPI<ForumModel>(FORUM_API_URL + 'create', {
+    const data = await QueryPostAPI<ForumModel>(`${FORUM_API_URL}create`, {
       name: create_Name.value,
     })
     if (data.code == 200) {
       message.success('创建成功')
       currentForum.value = data.data
     } else {
-      message.error('创建失败:' + data.message)
+      message.error(`创建失败:${data.message}`)
       console.error(data.message)
     }
   } catch (err) {
     console.error(err)
-    message.error('创建失败:' + err)
+    message.error(`创建失败:${err}`)
   }
 }
 async function SwitchForum(owner: number) {
@@ -139,7 +141,7 @@ const applyingColumns: DataTableColumns<ForumUserModel> = [
           onClick: () =>
             useForum.ConfirmApply(currentForum.value.owner.id, row.id).then((success) => {
               if (success) message.success('操作成功')
-              currentForum.value.applying = currentForum.value.applying.filter((u) => u.id != row.id)
+              currentForum.value.applying = currentForum.value.applying.filter(u => u.id != row.id)
             }),
         },
         { default: () => '通过申请' },
@@ -227,9 +229,9 @@ const adminColumns: DataTableColumns<ForumUserModel> = [
 
 async function addAdmin(id: number) {
   try {
-    const data = await QueryGetAPI<ForumModel>(FORUM_API_URL + 'manage/add-admin', {
+    const data = await QueryGetAPI<ForumModel>(`${FORUM_API_URL}manage/add-admin`, {
       forum: currentForum.value.owner.id,
-      id: id,
+      id,
     })
     if (data.code == 200) {
       message.success('已设置为管理员')
@@ -237,15 +239,15 @@ async function addAdmin(id: number) {
       addAdminName.value = ''
       showAddAdminModal.value = false
     } else {
-      message.error('操作失败: ' + data.message)
+      message.error(`操作失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('操作失败: ' + err)
+    message.error(`操作失败: ${err}`)
   }
 }
 async function removeAdmin(id: number) {
   try {
-    const data = await QueryGetAPI<ForumModel>(FORUM_API_URL + 'manage/del-admin', {
+    const data = await QueryGetAPI<ForumModel>(`${FORUM_API_URL}manage/del-admin`, {
       forum: currentForum.value.owner.id,
       id,
     })
@@ -253,31 +255,31 @@ async function removeAdmin(id: number) {
       message.success('已取消管理员权限')
       refreshForumInfo()
     } else {
-      message.error('操作失败: ' + data.message)
+      message.error(`操作失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('操作失败: ' + err)
+    message.error(`操作失败: ${err}`)
   }
 }
 async function banUser(id: number) {
   try {
-    const data = await QueryGetAPI<ForumModel>(FORUM_API_URL + 'manage/ban', {
+    const data = await QueryGetAPI<ForumModel>(`${FORUM_API_URL}manage/ban`, {
       forum: currentForum.value.owner.id,
-      id: id,
+      id,
     })
     if (data.code == 200) {
       message.success('已封禁用户')
       refreshForumInfo()
     } else {
-      message.error('操作失败: ' + data.message)
+      message.error(`操作失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('操作失败: ' + err)
+    message.error(`操作失败: ${err}`)
   }
 }
 async function unbanUser(id: number) {
   try {
-    const data = await QueryGetAPI<ForumModel>(FORUM_API_URL + 'manage/unban', {
+    const data = await QueryGetAPI<ForumModel>(`${FORUM_API_URL}manage/unban`, {
       forum: currentForum.value.owner.id,
       id,
     })
@@ -285,21 +287,21 @@ async function unbanUser(id: number) {
       message.success('已解禁')
       refreshForumInfo()
     } else {
-      message.error('操作失败: ' + data.message)
+      message.error(`操作失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('操作失败: ' + err)
+    message.error(`操作失败: ${err}`)
   }
 }
 async function updateForumSettings() {
   try {
-    const data = await QueryPostAPI(FORUM_API_URL + 'manage/update-setting', currentForum.value.settings)
+    const data = await QueryPostAPI(`${FORUM_API_URL}manage/update-setting`, currentForum.value.settings)
     if (data.code == 200) {
     } else {
-      message.error('修改失败: ' + data.message)
+      message.error(`修改失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('修改失败: ' + err)
+    message.error(`修改失败: ${err}`)
   }
 }
 
@@ -321,7 +323,7 @@ onMounted(() => {
     v-model:value="selectedForum"
     :options="
       managedForums.map((f) => ({
-        label: (f.owner.id == accountInfo.id ? '[我的] ' : '') + f.name + ` (${f.owner.name})`,
+        label: `${(f.owner.id == accountInfo.id ? '[我的] ' : '') + f.name} (${f.owner.name})`,
         value: f.owner.id,
       }))
     "
diff --git a/src/views/manage/HistoryView.vue b/src/views/manage/HistoryView.vue
index 37ab023..a2b84e7 100644
--- a/src/views/manage/HistoryView.vue
+++ b/src/views/manage/HistoryView.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { QueryGetAPI } from '@/api/query'
-import { HISTORY_API_URL } from '@/data/constants'
 import { Info24Filled } from '@vicons/fluent'
-import { addDays, endOfDay, format, isSameDay, startOfDay } from 'date-fns'
+import { addDays, endOfDay, format, startOfDay } from 'date-fns'
 import { BarChart, LineChart } from 'echarts/charts'
 import {
   DataZoomComponent,
@@ -18,7 +15,9 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { NAlert, NButton, NCard, NDatePicker, NDivider, NIcon, NSpace, NSpin, NText, NTime, NTooltip, useMessage } from 'naive-ui'
 import { computed, onMounted, ref, watch } from 'vue'
 import VChart from 'vue-echarts'
-
+import { useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { HISTORY_API_URL } from '@/data/constants'
 
 // 初始化ECharts组件
 use([
@@ -35,7 +34,7 @@ use([
 ])
 
 // 定义数据模型类型
-type HistoryModel = {
+interface HistoryModel {
   fan: {
     records: HistoryRecordModel[]
     updateAt: number
@@ -50,12 +49,12 @@ type HistoryModel = {
   }
 }
 
-type HistoryRecordModel = {
+interface HistoryRecordModel {
   time: number
   count: number
 }
 
-type HistoryUpstatRecordModel = {
+interface HistoryUpstatRecordModel {
   time: number
   stats: {
     views: number
@@ -91,17 +90,17 @@ const statisticStartDateTime = statisticStartDate.getTime()
 // 日期范围选择（毫秒时间戳区间）
 const dateRange = ref<[number, number] | null>(null)
 const dateShortcuts: Record<string, [number, number] | (() => [number, number])> = {
-  '最近7天': () => {
+  最近7天: () => {
     const end = endOfDay(new Date()).getTime()
     const start = startOfDay(addDays(new Date(), -6)).getTime()
     return [start, end] as [number, number]
   },
-  '最近30天': () => {
+  最近30天: () => {
     const end = endOfDay(new Date()).getTime()
     const start = startOfDay(addDays(new Date(), -29)).getTime()
     return [start, end] as [number, number]
   },
-  '最近90天': () => {
+  最近90天: () => {
     const end = endOfDay(new Date()).getTime()
     const start = startOfDay(addDays(new Date(), -89)).getTime()
     return [start, end] as [number, number]
@@ -119,7 +118,7 @@ const chartHeight = computed(() => {
  */
 async function getHistory() {
   try {
-    const response = await QueryGetAPI<HistoryModel>(HISTORY_API_URL + 'get-all')
+    const response = await QueryGetAPI<HistoryModel>(`${HISTORY_API_URL}get-all`)
     if (response.code == 200) {
       fansHistory.value = response.data.fan.records
       guardHistory.value = response.data.guard.records
@@ -128,7 +127,7 @@ async function getHistory() {
       guardUpdateAt.value = response.data.guard.updateAt
       upstatUpdateAt.value = response.data.upstat.updateAt
     } else {
-      message.error('加载失败: ' + response.message)
+      message.error(`加载失败: ${response.message}`)
     }
   } catch (err) {
     message.error('加载失败')
@@ -183,9 +182,9 @@ function generateTimeSeries(
   startTime: Date,
   endTime: Date,
   initialTimeIndex: number,
-  initialCount: number
+  initialCount: number,
 ) {
-  const timeSeries: { time: Date; count: number; change: boolean; exist: boolean }[] = []
+  const timeSeries: { time: Date, count: number, change: boolean, exist: boolean }[] = []
   let lastDayCount = initialCount
   let lastTimeIndex = initialTimeIndex
   let currentTime = startTime
@@ -238,12 +237,12 @@ function processFansChartOptions() {
     return
   }
 
-  const initialIndex = fansHistory.value.findIndex((entry) => entry.time >= statisticStartDateTime)
+  const initialIndex = fansHistory.value.findIndex(entry => entry.time >= statisticStartDateTime)
   const initialCount = initialIndex >= 0 ? fansHistory.value[initialIndex].count : 0
 
   const completeTimeSeries = generateTimeSeries(fansHistory.value, startTime, endTime, initialIndex, initialCount)
 
-  const fansIncreacement: { time: Date; count: number }[] = []
+  const fansIncreacement: { time: Date, count: number }[] = []
   let previousDayCount = completeTimeSeries[0]?.count ?? 0
   completeTimeSeries.forEach((entry, index) => {
     if (index > 0) {
@@ -254,9 +253,9 @@ function processFansChartOptions() {
   })
 
   const chartData = {
-    xAxisData: completeTimeSeries.map((entry) => format(entry.time, 'yyyy-MM-dd')),
-    seriesData: completeTimeSeries.map((entry) => entry.count),
-    incrementData: fansIncreacement.map((entry) => entry.count),
+    xAxisData: completeTimeSeries.map(entry => format(entry.time, 'yyyy-MM-dd')),
+    seriesData: completeTimeSeries.map(entry => entry.count),
+    incrementData: fansIncreacement.map(entry => entry.count),
   }
 
   fansOption.value = {
@@ -264,13 +263,13 @@ function processFansChartOptions() {
     tooltip: {
       ...getBaseChartOptions().tooltip,
       formatter: (param: any) => {
-        const name = param[0].name + '<br>'
+        const name = `${param[0].name}<br>`
         let str = ''
-        for (var i = 0; i < param.length; i++) {
-          const status =
-            param[i].seriesName == '粉丝数' ? (completeTimeSeries[param[i].dataIndex].exist ? '' : '(未获取)') : ''
-          const statusHtml = status == '' ? '' : '&nbsp;<span style="color:gray">' + status + '</span>'
-          str += param[i].marker + param[i].seriesName + '：' + param[i].data + statusHtml + '<br>'
+        for (let i = 0; i < param.length; i++) {
+          const status
+            = param[i].seriesName == '粉丝数' ? (completeTimeSeries[param[i].dataIndex].exist ? '' : '(未获取)') : ''
+          const statusHtml = status == '' ? '' : `&nbsp;<span style="color:gray">${status}</span>`
+          str += `${param[i].marker + param[i].seriesName}：${param[i].data}${statusHtml}<br>`
         }
         return name + str
       },
@@ -323,7 +322,7 @@ function processGuardsChartOptions() {
     return
   }
 
-  const initialIndex = guardHistory.value.findIndex((entry) => entry.time >= startTime.getTime())
+  const initialIndex = guardHistory.value.findIndex(entry => entry.time >= startTime.getTime())
   const initialCount = initialIndex >= 0 ? guardHistory.value[initialIndex].count : 0
 
   const completeTimeSeries = generateTimeSeries(guardHistory.value, startTime, endTime, initialIndex, initialCount)
@@ -337,7 +336,7 @@ function processGuardsChartOptions() {
     previousDayCount = entry.count
   })
 
-  const xAxisData = completeTimeSeries.map((entry) => format(entry.time, 'yyyy-MM-dd'))
+  const xAxisData = completeTimeSeries.map(entry => format(entry.time, 'yyyy-MM-dd'))
 
   guardsOption.value = {
     ...getBaseChartOptions(),
@@ -391,7 +390,7 @@ function processUpstatChartOptions(dataType: 'views' | 'likes', title: string) {
 
   const rangeStart = dateRange.value ? dateRange.value[0] : -Infinity
   const rangeEnd = dateRange.value ? dateRange.value[1] : Infinity
-  const filtered = upstatHistory.value.filter((u) => u.time >= rangeStart && u.time <= rangeEnd)
+  const filtered = upstatHistory.value.filter(u => u.time >= rangeStart && u.time <= rangeEnd)
 
   if (filtered.length === 0) {
     return {
@@ -405,7 +404,7 @@ function processUpstatChartOptions(dataType: 'views' | 'likes', title: string) {
     }
   }
 
-  const increments: { time: number; value: number }[] = []
+  const increments: { time: number, value: number }[] = []
   let lastValue = filtered[0].stats[dataType]
 
   filtered.forEach((u) => {
@@ -428,7 +427,7 @@ function processUpstatChartOptions(dataType: 'views' | 'likes', title: string) {
         type: 'category',
         axisTick: { alignWithLabel: true },
         axisLine: { onZero: false, lineStyle: { color: '#EE6666' } },
-        data: filtered.map((f) => format(f.time, 'yyyy-MM-dd')),
+        data: filtered.map(f => format(f.time, 'yyyy-MM-dd')),
       },
     ],
     series: [
@@ -436,9 +435,9 @@ function processUpstatChartOptions(dataType: 'views' | 'likes', title: string) {
         name: title,
         type: 'line',
         emphasis: { focus: 'series' },
-        data: filtered.map((f) => f.stats[dataType]),
+        data: filtered.map(f => f.stats[dataType]),
         itemStyle: {
-          color: function (data: any) {
+          color(data: any) {
             return increments[data.dataIndex].value !== 0 ? '#5470C6' : '#cccccc'
           },
         },
@@ -448,7 +447,7 @@ function processUpstatChartOptions(dataType: 'views' | 'likes', title: string) {
         type: 'bar',
         yAxisIndex: 1,
         emphasis: { focus: 'series' },
-        data: increments.map((f) => f.value),
+        data: increments.map(f => f.value),
       },
     ],
   }
@@ -491,7 +490,7 @@ watch(
   () => dateRange.value,
   () => {
     if (!isLoading.value) processAllChartOptions()
-  }
+  },
 )
 </script>
 
@@ -565,7 +564,9 @@ watch(
     <br>
     <br>
     <NSpace align="center">
-      <NText depth="3">日期范围：</NText>
+      <NText depth="3">
+        日期范围：
+      </NText>
       <NDatePicker
         v-model:value="dateRange"
         type="daterange"
diff --git a/src/views/manage/LiveDetailManage.vue b/src/views/manage/LiveDetailManage.vue
index 2123b62..f1ee9c3 100644
--- a/src/views/manage/LiveDetailManage.vue
+++ b/src/views/manage/LiveDetailManage.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { DanmakuModel, ResponseLiveInfoModel } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import DanmakuContainer from '@/components/DanmakuContainer.vue'
-import { LIVE_API_URL } from '@/data/constants'
+import type { DanmakuModel, ResponseLiveInfoModel } from '@/api/api-models'
 import { NButton, NEmpty, NSpin, useMessage } from 'naive-ui'
 import { onActivated, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import DanmakuContainer from '@/components/DanmakuContainer.vue'
+import { LIVE_API_URL } from '@/data/constants'
 
 interface ResponseLiveDetail {
   live: ResponseLiveInfoModel
@@ -25,14 +25,14 @@ const liveInfo = ref<ResponseLiveDetail | undefined>(await get())
 async function get() {
   isLoading.value = true
   try {
-    const data = await QueryGetAPI<ResponseLiveDetail>(LIVE_API_URL + 'get', {
+    const data = await QueryGetAPI<ResponseLiveDetail>(`${LIVE_API_URL}get`, {
       id: route.params.id,
       useEmoji: true,
     })
     if (data.code == 200) {
       return data.data
     } else {
-      message.error('无法获取数据: ' + data.message)
+      message.error(`无法获取数据: ${data.message}`)
       return undefined
     }
   } catch (err) {
diff --git a/src/views/manage/LiveManager.vue b/src/views/manage/LiveManager.vue
index 79b2193..e4979f0 100644
--- a/src/views/manage/LiveManager.vue
+++ b/src/views/manage/LiveManager.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import type { ResponseLiveInfoModel } from '@/api/api-models'
+import { NAlert, NDivider, NList, NListItem, NPagination, NSpace, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useAccount } from '@/api/account'
-import { ResponseLiveInfoModel } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
 import LiveInfoContainer from '@/components/LiveInfoContainer.vue'
 import { LIVE_API_URL } from '@/data/constants'
-import { NAlert, NButton, NDivider, NList, NListItem, NPagination, NSpace, useMessage } from 'naive-ui'
-import { ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 
 const accountInfo = useAccount()
 const message = useMessage()
@@ -21,11 +21,11 @@ const defaultDanmakusCount = ref(0)
 
 async function getAll() {
   try {
-    const data = await QueryGetAPI<ResponseLiveInfoModel[]>(LIVE_API_URL + 'get-all')
+    const data = await QueryGetAPI<ResponseLiveInfoModel[]>(`${LIVE_API_URL}get-all`)
     if (data.code == 200) {
       return data.data
     } else {
-      message.error('无法获取数据: ' + data.message)
+      message.error(`无法获取数据: ${data.message}`)
       return []
     }
   } catch (err) {
diff --git a/src/views/manage/LotteryView.vue b/src/views/manage/LotteryView.vue
index 8f2e065..e3ffd2f 100644
--- a/src/views/manage/LotteryView.vue
+++ b/src/views/manage/LotteryView.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { NavigateToNewTab } from '@/Utils'
-import { LotteryUserInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { LOTTERY_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import type { LotteryUserInfo } from '@/api/api-models'
 import { useLocalStorage, useStorage } from '@vueuse/core'
 import { format } from 'date-fns'
 import { List } from 'linqts'
@@ -36,6 +33,9 @@ import {
 } from 'naive-ui'
 import { computed, h, onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
+import { QueryGetAPI } from '@/api/query'
+import { LOTTERY_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { NavigateToNewTab } from '@/Utils'
 
 interface TempLotteryResponseModel {
   users: LotteryUserInfo[]
@@ -125,7 +125,7 @@ function getCurrentUsers() {
   return undefined
 }
 const validUsers = computed(() => {
-  return currentUsers.value?.users.filter((u) => isUserValid(u))
+  return currentUsers.value?.users.filter(u => isUserValid(u))
 })
 
 async function onGet() {
@@ -139,12 +139,12 @@ async function onGet() {
       break
     }
   }
-  currentUsers.value?.users.forEach((u) => (u.visiable = true))
+  currentUsers.value?.users.forEach(u => (u.visiable = true))
 }
 async function getCommentsUsers() {
   isLoading.value = true
   await QueryGetAPI<TempLotteryResponseModel>(
-    LOTTERY_API_URL + 'comments',
+    `${LOTTERY_API_URL}comments`,
     {
       id: inputDynamicId.value,
     },
@@ -152,14 +152,14 @@ async function getCommentsUsers() {
   )
     .then((data) => {
       if (data.code == 200) {
-        data.data.users = new List(data.data.users).DistinctBy((u) => u.uId).ToArray()
+        data.data.users = new List(data.data.users).DistinctBy(u => u.uId).ToArray()
         data.data.total = data.data.users.length
 
         originCommentUsers.value = JSON.parse(JSON.stringify(data.data))
         commentUsers.value = data.data
         isCommentCountDown.value = false
       } else {
-        message.error('获取用户失败: ' + data.message)
+        message.error(`获取用户失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -173,7 +173,7 @@ async function getCommentsUsers() {
 async function getForwardUsers() {
   isLoading.value = true
   await QueryGetAPI<TempLotteryResponseModel>(
-    LOTTERY_API_URL + 'forward',
+    `${LOTTERY_API_URL}forward`,
     {
       id: inputDynamicId.value,
     },
@@ -181,14 +181,14 @@ async function getForwardUsers() {
   )
     .then((data) => {
       if (data.code == 200) {
-        data.data.users = new List(data.data.users).DistinctBy((u) => u.uId).ToArray()
+        data.data.users = new List(data.data.users).DistinctBy(u => u.uId).ToArray()
         data.data.total = data.data.users.length
 
         originForwardUsers.value = JSON.parse(JSON.stringify(data.data))
         forwardUsers.value = data.data
         isCommentCountDown.value = false
       } else {
-        message.error('获取用户失败: ' + data.message)
+        message.error(`获取用户失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -237,7 +237,7 @@ function startLottery() {
           removeSingleUser()
           function removeSingleUser() {
             if (data.users.length > lotteryOption.value.resultCount) {
-              console.log(`[${data.users.length}] 移除` + data.users.splice(getRandomInt(data.users.length), 1)[0].name)
+              console.log(`[${data.users.length}] 移除${data.users.splice(getRandomInt(data.users.length), 1)[0].name}`)
               setTimeout(() => {
                 removeSingleUser()
               }, 500)
@@ -259,15 +259,15 @@ function onFinishLottery() {
   isLotteried.value = true
   notification.create({
     title: '抽奖完成',
-    description: '共' + resultUsers.value?.length + '人',
+    description: `共${resultUsers.value?.length}人`,
     duration: 3000,
     content: () =>
       h(
         NSpace,
         { vertical: true },
-        resultUsers.value?.map((user) =>
+        resultUsers.value?.map(user =>
           h(NSpace, null, [
-            h(NAvatar, { src: user.avatar + '@32w_32h', imgProps: { referrerpolicy: 'no-referrer' } }),
+            h(NAvatar, { src: `${user.avatar}@32w_32h`, imgProps: { referrerpolicy: 'no-referrer' } }),
             h('span', user.name),
           ]),
         ),
@@ -281,7 +281,7 @@ function onFinishLottery() {
     users: currentUsers.value?.users ?? [],
     time: Date.now(),
     type: currentType.value,
-    url: inputDynamicId.value ? 'https://t.bilibili.com/' + inputDynamicId.value : inputDynamic.value ?? '',
+    url: inputDynamicId.value ? `https://t.bilibili.com/${inputDynamicId.value}` : inputDynamic.value ?? '',
   })
 }
 function reset() {
@@ -494,7 +494,7 @@ onUnmounted(() => {
                   lazy
                   borderd
                   :size="64"
-                  :src="item.avatar + '@64w_64h'"
+                  :src="`${item.avatar}@64w_64h`"
                   :img-props="{ referrerpolicy: 'no-referrer' }"
                   style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)"
                 />
@@ -591,7 +591,7 @@ onUnmounted(() => {
                 <NAvatar
                   round
                   lazy
-                  :src="user.avatar + '@64w_64h'"
+                  :src="`${user.avatar}@64w_64h`"
                   :img-props="{ referrerpolicy: 'no-referrer' }"
                 />
                 {{ user.name }}
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index 6bd786c..e154500 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import { copyToClipboard, downloadImage } from '@/Utils'
-import { DisableFunction, EnableFunction, SaveAccountSettings, SaveSetting, useAccount } from '@/api/account'
-import { FunctionTypes, QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
-import QuestionItem from '@/components/QuestionItem.vue'
-import QuestionItems from '@/components/QuestionItems.vue'
-import { CURRENT_HOST } from '@/data/constants'
-import router from '@/router'
-import { useQuestionBox } from '@/store/useQuestionBox'
+import type { QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
 import { Delete24Filled, Delete24Regular, Eye24Filled, EyeOff24Filled, Info24Filled } from '@vicons/fluent'
 import { Heart, HeartOutline, TrashBin } from '@vicons/ionicons5'
 import { useStorage } from '@vueuse/core'
-import QuestionDisplayCard from './QuestionDisplayCard.vue'
 // @ts-ignore
 import { saveAs } from 'file-saver'
 import html2canvas from 'html2canvas'
@@ -43,11 +35,20 @@ import {
   NText,
   NTime,
   NTooltip,
-  useMessage
+  useMessage,
 } from 'naive-ui'
 import QrcodeVue from 'qrcode.vue'
 import { computed, h, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { DisableFunction, EnableFunction, SaveAccountSettings, SaveSetting, useAccount } from '@/api/account'
+import { FunctionTypes } from '@/api/api-models'
+import QuestionItem from '@/components/QuestionItem.vue'
+import QuestionItems from '@/components/QuestionItems.vue'
+import { CURRENT_HOST } from '@/data/constants'
+import router from '@/router'
+import { useQuestionBox } from '@/store/useQuestionBox'
+import { copyToClipboard, downloadImage } from '@/Utils'
+import QuestionDisplayCard from './QuestionDisplayCard.vue'
 
 // --- 响应式状态和全局实例 ---
 const accountInfo = useAccount() // 获取账户信息
@@ -67,7 +68,7 @@ const selectedShareTag = ref<string | null>(null) // 分享时选择的标签
 const selectedDirectShareTag = ref<string | null>(null) // 主链接区域选择的标签
 const ps = ref(20) // 分页大小 (每页条数)
 const pn = ref(1) // 当前页码
-const savedCardSize = useStorage<{ width: number; height: number }>('Settings.QuestionDisplay.CardSize', { // 问题展示卡片尺寸 (持久化存储)
+const savedCardSize = useStorage<{ width: number, height: number }>('Settings.QuestionDisplay.CardSize', { // 问题展示卡片尺寸 (持久化存储)
   width: 400,
   height: 400,
 })
@@ -87,7 +88,7 @@ const setting = computed({
 })
 
 // 分享链接 (统一 Host, 根据选择的标签附加参数)
-const shareUrlWithTag = (tag: string | null) => {
+function shareUrlWithTag(tag: string | null) {
   const base = `${CURRENT_HOST}@${accountInfo.value?.name}/question-box`
   return tag ? `${base}?tag=${tag}` : base
 }
@@ -141,7 +142,7 @@ function onOpenModal(question: QAInfo) {
 // 刷新数据
 async function refresh() {
   // 重置页码为第一页
-  pn.value = 1;
+  pn.value = 1
   // 根据当前标签页重新获取数据
   if (selectedTabItem.value == '0') {
     await useQB.GetRecieveQAInfo()
@@ -150,9 +151,9 @@ async function refresh() {
   }
   // 如果在垃圾站或设置页, 额外刷新收到的问题列表 (可能需要更新状态)
   if (selectedTabItem.value === '2' || selectedTabItem.value === '3') {
-     await useQB.GetRecieveQAInfo()
-     // 如果需要，也可以刷新发送的列表
-     // await useQB.GetSendQAInfo()
+    await useQB.GetRecieveQAInfo()
+    // 如果需要，也可以刷新发送的列表
+    // await useQB.GetSendQAInfo()
   }
   message.success('已刷新')
 }
@@ -181,9 +182,9 @@ function saveShareImage() {
       'image/png', // 指定图片格式
       1, // 图片质量 (无损)
     )
-  }).catch(err => {
-    message.error('生成分享卡片失败: ' + err)
-    console.error("html2canvas error:", err);
+  }).catch((err) => {
+    message.error(`生成分享卡片失败: ${err}`)
+    console.error('html2canvas error:', err)
   })
 }
 
@@ -207,27 +208,27 @@ async function saveQuestionBoxSettings() {
       message.error('保存设置失败') // API 返回 false
     }
   } catch (err) {
-    message.error('保存设置时出错: ' + err)
-    console.error("SaveSetting error:", err);
+    message.error(`保存设置时出错: ${err}`)
+    console.error('SaveSetting error:', err)
   }
 }
 
 // 保存通知相关的账户设置
 async function saveNotificationSetting() {
-    if (!accountInfo.value?.settings?.sendEmail) return; // 防御
+  if (!accountInfo.value?.settings?.sendEmail) return // 防御
 
-    try {
-      const response = await SaveAccountSettings(); // API 应只保存账户相关的设置
-      if (response.code === 200) {
-        message.success('通知设置已保存');
-      } else {
-        message.error('修改通知设置失败: ' + response.message); // 使用后端返回的消息
-      }
-    } catch (err) {
-      message.error('修改通知设置失败: ' + err);
-      console.error("SaveAccountSettings error:", err);
+  try {
+    const response = await SaveAccountSettings() // API 应只保存账户相关的设置
+    if (response.code === 200) {
+      message.success('通知设置已保存')
+    } else {
+      message.error(`修改通知设置失败: ${response.message}`) // 使用后端返回的消息
     }
+  } catch (err) {
+    message.error(`修改通知设置失败: ${err}`)
+    console.error('SaveAccountSettings error:', err)
   }
+}
 
 // 启用或禁用提问箱功能
 async function setFunctionEnable(enable: boolean) {
@@ -243,24 +244,23 @@ async function setFunctionEnable(enable: boolean) {
       // 成功后可能需要更新 accountInfo 中的 enableFunctions 状态, useAccount 可能需要提供更新方法或自动刷新
       // 假设 useAccount() 会自动更新或有刷新机制
       if (accountInfo.value?.settings?.enableFunctions) {
-         if (enable && !accountInfo.value.settings.enableFunctions.includes(FunctionTypes.QuestionBox)) {
-            accountInfo.value.settings.enableFunctions.push(FunctionTypes.QuestionBox)
-         } else if (!enable) {
-             const index = accountInfo.value.settings.enableFunctions.indexOf(FunctionTypes.QuestionBox);
-             if (index > -1) {
-                 accountInfo.value.settings.enableFunctions.splice(index, 1);
-             }
-         }
+        if (enable && !accountInfo.value.settings.enableFunctions.includes(FunctionTypes.QuestionBox)) {
+          accountInfo.value.settings.enableFunctions.push(FunctionTypes.QuestionBox)
+        } else if (!enable) {
+          const index = accountInfo.value.settings.enableFunctions.indexOf(FunctionTypes.QuestionBox)
+          if (index > -1) {
+            accountInfo.value.settings.enableFunctions.splice(index, 1)
+          }
+        }
       }
-
     } else {
       message.error(`无法${enable ? '启用' : '禁用'}提问箱功能`)
     }
   } catch (err) {
-     message.error(`操作失败: ${err}`)
-     console.error("Enable/Disable Function error:", err);
-     // 操作失败时可能需要恢复 Switch 的状态,防止UI与实际状态不一致
-     // 这需要更复杂的逻辑,暂时不加
+    message.error(`操作失败: ${err}`)
+    console.error('Enable/Disable Function error:', err)
+    // 操作失败时可能需要恢复 Switch 的状态,防止UI与实际状态不一致
+    // 这需要更复杂的逻辑,暂时不加
   }
 }
 
@@ -273,22 +273,21 @@ onMounted(() => {
 
   // 初始化展示问题 (如果设置中存在)
   useQB.displayQuestion = useQB.recieveQuestions.find(
-    (s) => s.id == accountInfo.value?.settings?.questionDisplay?.currentQuestion,
+    s => s.id == accountInfo.value?.settings?.questionDisplay?.currentQuestion,
   )
 
   // 初始化安全等级滑块的临时值
   if (accountInfo.value?.settings?.questionBox?.saftyLevel !== undefined) {
-      tempSaftyLevel.value = accountInfo.value.settings.questionBox.saftyLevel;
+    tempSaftyLevel.value = accountInfo.value.settings.questionBox.saftyLevel
   }
-});
+})
 
 // 监听 accountInfo 变化, 以确保 tempSaftyLevel 能在 accountInfo 加载后正确初始化
 watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) => {
-    if (newLevel !== undefined) {
-        tempSaftyLevel.value = newLevel;
-    }
-}, { immediate: true }); // 立即执行一次以设置初始值
-
+  if (newLevel !== undefined) {
+    tempSaftyLevel.value = newLevel
+  }
+}, { immediate: true }) // 立即执行一次以设置初始值
 </script>
 
 <template>
@@ -608,7 +607,7 @@ watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) =>
                         <NButton
                           text
                           type="info"
-                          @click="router.push('/user/' + item.target.id)"
+                          @click="router.push(`/user/${item.target.id}`)"
                         >
                           {{ item.target.name }}
                         </NButton>
@@ -831,7 +830,7 @@ watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) =>
                 style="max-width: 90%; margin: 10px auto;"
                 :format-tooltip="(v) => remarkLevelString[v]"
                 :disabled="useQB.isLoading"
-                @dragend="() => { if (accountInfo?.settings?.questionBox) { accountInfo.settings.questionBox.saftyLevel = tempSaftyLevel; saveQuestionBoxSettings();} }"
+                @dragend="() => { if (accountInfo?.settings?.questionBox) { accountInfo.settings.questionBox.saftyLevel = tempSaftyLevel; saveQuestionBoxSettings(); } }"
               />
 
               <!-- 标签/话题管理 -->
@@ -1150,11 +1149,11 @@ watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) =>
     <!-- OBS组件预览区域 -->
     <div
       :style="{
-        width: savedCardSize.width + 'px',
-        height: savedCardSize.height + 'px',
+        width: `${savedCardSize.width}px`,
+        height: `${savedCardSize.height}px`,
         border: '1px dashed #ccc',
         overflow: 'hidden', // 确保内容不溢出预览框
-        position: 'relative' // 用于定位内部组件
+        position: 'relative', // 用于定位内部组件
       }"
     >
       <QuestionDisplayCard
@@ -1343,4 +1342,4 @@ watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) =>
 .n-card {
     border-radius: 6px; /* 统一卡片圆角 */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/manage/QuestionDisplayCard.vue b/src/views/manage/QuestionDisplayCard.vue
index 591b84e..c4c9e7e 100644
--- a/src/views/manage/QuestionDisplayCard.vue
+++ b/src/views/manage/QuestionDisplayCard.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
+import { useDebounceFn, useScroll } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { QAInfo, QuestionDisplayAlign, Setting_QuestionDisplay } from '@/api/api-models'
-import { useDebounceFn, useScroll, useStorage } from '@vueuse/core'
+import { QuestionDisplayAlign } from '@/api/api-models'
 
 const props = defineProps<{
   question: QAInfo | undefined
@@ -10,9 +11,8 @@ const props = defineProps<{
   showGreenBorder?: boolean
   css?: string
 }>()
-defineExpose({ setScroll, setScrollTop })
 const emit = defineEmits<{ scroll: [value: { clientHeight: number, scrollHeight: number, scrollTop: number }] }>()
-
+defineExpose({ setScroll, setScrollTop })
 let styleElement: HTMLStyleElement
 const cssDebounce = useDebounceFn(() => {
   if (styleElement) {
@@ -25,7 +25,6 @@ watch(() => props.css, cssDebounce)
 const contentRef = ref()
 const { x, y, isScrolling, arrivedState, directions } = useScroll(contentRef)
 
-
 const align = computed(() => {
   switch (props.setting.align) {
     case QuestionDisplayAlign.Left:
@@ -39,7 +38,7 @@ const align = computed(() => {
 })
 function setScrollTop(top: number) {
   contentRef.value?.scrollTo({
-    top: top,
+    top,
     behavior: 'smooth',
   })
 }
@@ -47,8 +46,8 @@ function setScroll(value: { clientHeight: number, scrollHeight: number, scrollTo
   if (contentRef.value.clientHeight == contentRef.value.scrollHeight) {
     setScrollTop(value.scrollTop)
   } else {
-    const scrollRatio1 = value.scrollTop / (value.scrollHeight - value.clientHeight);
-    const scrollTop = scrollRatio1 * (contentRef.value.scrollHeight - contentRef.value.clientHeight);
+    const scrollRatio1 = value.scrollTop / (value.scrollHeight - value.clientHeight)
+    const scrollTop = scrollRatio1 * (contentRef.value.scrollHeight - contentRef.value.clientHeight)
     setScrollTop(scrollTop)
   }
 }
@@ -56,7 +55,7 @@ function scrollCallback(e: Event) {
   emit('scroll', {
     clientHeight: contentRef.value?.clientHeight ?? 0,
     scrollHeight: contentRef.value?.scrollHeight ?? 0,
-    scrollTop: contentRef.value?.scrollTop ?? 0
+    scrollTop: contentRef.value?.scrollTop ?? 0,
   })
 }
 
@@ -81,9 +80,9 @@ onUnmounted(() => {
   <div
     class="question-display-root"
     :style="{
-      backgroundColor: '#' + setting.borderColor,
-      borderColor: setting.borderColor ? '#' + setting.borderColor : undefined,
-      borderWidth: setting.borderWidth ? setting.borderWidth + 'px' : undefined,
+      backgroundColor: `#${setting.borderColor}`,
+      borderColor: setting.borderColor ? `#${setting.borderColor}` : undefined,
+      borderWidth: setting.borderWidth ? `${setting.borderWidth}px` : undefined,
       borderTopWidth: setting.showUserName && question ? 0 : setting.borderWidth,
     }"
     :display="question ? 1 : 0"
@@ -96,8 +95,8 @@ onUnmounted(() => {
         v-if="setting.showUserName && question"
         class="question-display-user-name"
         :style="{
-          color: '#' + setting.nameFontColor,
-          fontSize: setting.nameFontSize + 'px',
+          color: `#${setting.nameFontColor}`,
+          fontSize: `${setting.nameFontSize}px`,
           fontWeight: setting.nameFontWeight ? setting.nameFontWeight : undefined,
           fontFamily: setting.nameFont,
         }"
@@ -109,9 +108,9 @@ onUnmounted(() => {
       ref="contentRef"
       class="question-display-content"
       :style="{
-        color: '#' + setting.fontColor,
-        backgroundColor: '#' + setting.backgroundColor,
-        fontSize: setting.fontSize + 'px',
+        color: `#${setting.fontColor}`,
+        backgroundColor: `#${setting.backgroundColor}`,
+        fontSize: `${setting.fontSize}px`,
         fontWeight: setting.fontWeight ? setting.fontWeight : undefined,
         textAlign: align,
         fontFamily: setting.font,
@@ -141,9 +140,9 @@ onUnmounted(() => {
         <div
           v-else
           class="question-display-loading loading"
-          :style="{ color: '#' + setting.fontColor }"
+          :style="{ color: `#${setting.fontColor}` }"
         >
-          <div :style="{ color: '#' + setting.fontColor }" />
+          <div :style="{ color: `#${setting.fontColor}` }" />
           <div />
           <div />
           <div />
diff --git a/src/views/manage/ScheduleManageView.vue b/src/views/manage/ScheduleManageView.vue
index 28c5fd0..664d0aa 100644
--- a/src/views/manage/ScheduleManageView.vue
+++ b/src/views/manage/ScheduleManageView.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
-import { FunctionTypes, ScheduleDayInfo, ScheduleWeekInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import ScheduleList from '@/components/ScheduleList.vue'
-import { CURRENT_HOST, SCHEDULE_API_URL } from '@/data/constants'
-import { copyToClipboard } from '@/Utils'
+import type { SelectMixedOption, SelectOption } from 'naive-ui/es/select/src/interface'
+import type { VNode } from 'vue'
+import type { ScheduleDayInfo, ScheduleWeekInfo } from '@/api/api-models'
 import { TagQuestionMark16Filled } from '@vicons/fluent'
 import { addWeeks, endOfWeek, endOfYear, format, isBefore, startOfWeek, startOfYear } from 'date-fns'
 import {
@@ -12,7 +9,6 @@ import {
   NBadge,
   NButton,
   NCard,
-  NCheckbox,
   NColorPicker,
   NDivider,
   NFlex,
@@ -30,8 +26,13 @@ import {
   NTooltip,
   useMessage,
 } from 'naive-ui'
-import { SelectMixedOption, SelectOption } from 'naive-ui/es/select/src/interface'
-import { VNode, computed, h, onMounted, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
+import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
+import { FunctionTypes } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import ScheduleList from '@/components/ScheduleList.vue'
+import { CURRENT_HOST, SCHEDULE_API_URL } from '@/data/constants'
+import { copyToClipboard } from '@/Utils'
 
 const rules = {
   user: {
@@ -67,8 +68,8 @@ const weekOptions = computed(() => {
   const weeks = [] as SelectMixedOption[]
   const all = getAllWeeks(selectedScheduleYear.value)
   all.forEach((week) => {
-    const isExist =
-      (schedules.value?.findIndex((s) => s.year == selectedScheduleYear.value && s.week == week[0] + 1) ?? -1) > -1
+    const isExist
+      = (schedules.value?.findIndex(s => s.year == selectedScheduleYear.value && s.week == week[0] + 1) ?? -1) > -1
     weeks.push({
       label: `${isExist ? '(已安排)' : ''} 第${week[0] + 1}周 (${week[1]})`,
       value: week[0] + 1,
@@ -145,7 +146,7 @@ function normalizeColor(color: any): string | null {
 
     const toHex = (c: number) => {
       const hex = Math.round(Math.min(Math.max(c, 0), 1) * 255).toString(16)
-      return hex.length === 1 ? '0' + hex : hex
+      return hex.length === 1 ? `0${hex}` : hex
     }
 
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()
@@ -173,18 +174,18 @@ function normalizeColor(color: any): string | null {
     // 2) 处理 hsla/hsl 字符串
     const hslMatch = str.match(/^hsla?\(\s*([+-]?\d+(?:\.\d+)?)\s*,\s*([+-]?\d+(?:\.\d+)?)%\s*,\s*([+-]?\d+(?:\.\d+)?)%\s*(?:,\s*([+-]?\d*(?:\.\d+)?)\s*)?\)$/i)
     if (hslMatch) {
-      const h = parseFloat(hslMatch[1])
-      const s = parseFloat(hslMatch[2])
-      const l = parseFloat(hslMatch[3])
+      const h = Number.parseFloat(hslMatch[1])
+      const s = Number.parseFloat(hslMatch[2])
+      const l = Number.parseFloat(hslMatch[3])
       return hslToHex(h, s, l)
     }
 
     // 3) 处理 rgba/rgb 字符串，忽略 alpha
     const rgbMatch = str.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([+-]?\d*(?:\.\d+)?)\s*)?\)$/i)
     if (rgbMatch) {
-      const r = Math.min(255, Math.max(0, parseInt(rgbMatch[1])))
-      const g = Math.min(255, Math.max(0, parseInt(rgbMatch[2])))
-      const b = Math.min(255, Math.max(0, parseInt(rgbMatch[3])))
+      const r = Math.min(255, Math.max(0, Number.parseInt(rgbMatch[1])))
+      const g = Math.min(255, Math.max(0, Number.parseInt(rgbMatch[2])))
+      const b = Math.min(255, Math.max(0, Number.parseInt(rgbMatch[3])))
       const toHex = (n: number) => n.toString(16).padStart(2, '0')
       return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase()
     }
@@ -222,7 +223,7 @@ function normalizeWeek(week?: ScheduleWeekInfo): ScheduleWeekInfo {
     if (!Array.isArray(list)) return [] as ScheduleDayInfo[]
     return list
       .filter(Boolean)
-      .map((item) => ({
+      .map(item => ({
         title: item?.title ?? null,
         tag: item?.tag ?? null,
         tagColor: normalizeColor(item?.tagColor),
@@ -245,8 +246,8 @@ function cloneWeek(week: ScheduleWeekInfo, options: { resetIds?: boolean } = {})
   return {
     year: normalized.year,
     week: normalized.week,
-    days: normalized.days.map((dayList) =>
-      dayList.map((item) => ({
+    days: normalized.days.map(dayList =>
+      dayList.map(item => ({
         title: item.title ?? null,
         tag: item.tag ?? null,
         tagColor: normalizeColor(item.tagColor),
@@ -281,8 +282,8 @@ function sanitizeDays(days?: ScheduleDayInfo[][]): ScheduleDayInfo[][] {
   return Array.from({ length: 7 }, (_, index) => {
     const list = days?.[index] ?? []
     return list
-      .filter((item) => !!item && (item.title?.trim() || item.tag?.trim() || item.time?.trim()))
-      .map((item) => ({
+      .filter(item => !!item && (item.title?.trim() || item.tag?.trim() || item.time?.trim()))
+      .map(item => ({
         title: item.title?.trim() || null,
         tag: item.tag?.trim() || null,
         tagColor: normalizeColor(item.tagColor),
@@ -333,8 +334,8 @@ watch(showUpdateModal, (visible) => {
   if (visible) {
     ensureDayInitialized(updateScheduleModel.value, selectedDay.value)
     // 清理所有可能的数组格式颜色值
-    updateScheduleModel.value.days.forEach(dayList => {
-      dayList.forEach(item => {
+    updateScheduleModel.value.days.forEach((dayList) => {
+      dayList.forEach((item) => {
         if (item.tagColor && Array.isArray(item.tagColor)) {
           item.tagColor = normalizeColor(item.tagColor)
         }
@@ -347,15 +348,15 @@ watch(showUpdateModal, (visible) => {
 watch(
   () => updateScheduleModel.value.days,
   (days) => {
-    days?.forEach(dayList => {
-      dayList?.forEach(item => {
+    days?.forEach((dayList) => {
+      dayList?.forEach((item) => {
         if (item.tagColor && Array.isArray(item.tagColor)) {
           item.tagColor = normalizeColor(item.tagColor)
         }
       })
     })
   },
-  { deep: true }
+  { deep: true },
 )
 
 watch(selectedDay, (value) => {
@@ -364,14 +365,14 @@ watch(selectedDay, (value) => {
 
 async function get() {
   isLoading.value = true
-  await QueryGetAPI<ScheduleWeekInfo[]>(SCHEDULE_API_URL + 'get', {
+  await QueryGetAPI<ScheduleWeekInfo[]>(`${SCHEDULE_API_URL}get`, {
     id: accountInfo.value?.id ?? -1,
   })
     .then((data) => {
       if (data.code == 200) {
-        schedules.value = (data.data ?? []).map((week) => normalizeWeek(week))
+        schedules.value = (data.data ?? []).map(week => normalizeWeek(week))
       } else {
-        message.error('加载失败: ' + data.message)
+        message.error(`加载失败: ${data.message}`)
       }
     })
     .catch(() => {
@@ -383,7 +384,7 @@ const isFetching = ref(false)
 async function addSchedule() {
   isFetching.value = true
   const emptyWeek = createEmptyWeek(selectedScheduleYear.value, selectedScheduleWeek.value)
-  await QueryPostAPI(SCHEDULE_API_URL + 'update', {
+  await QueryPostAPI(`${SCHEDULE_API_URL}update`, {
     year: emptyWeek.year,
     week: emptyWeek.week,
     days: emptyWeek.days,
@@ -394,7 +395,7 @@ async function addSchedule() {
         showAddModal.value = false
         schedules.value = [...schedules.value, emptyWeek]
       } else {
-        message.error('添加失败: ' + data.message)
+        message.error(`添加失败: ${data.message}`)
       }
     })
     .finally(() => {
@@ -402,7 +403,7 @@ async function addSchedule() {
     })
 }
 async function onCopySchedule() {
-  if (schedules.value?.find((s) => s.year == selectedScheduleYear.value && s.week == selectedScheduleWeek.value)) {
+  if (schedules.value?.find(s => s.year == selectedScheduleYear.value && s.week == selectedScheduleWeek.value)) {
     message.error('想要复制到的周已存在')
   } else {
     updateScheduleModel.value.year = selectedScheduleYear.value
@@ -430,7 +431,7 @@ async function saveSchedule(day: number | null) {
     payload.day = day
   }
 
-  await QueryPostAPI(SCHEDULE_API_URL + 'update', payload)
+  await QueryPostAPI(`${SCHEDULE_API_URL}update`, payload)
     .then((data) => {
       if (data.code == 200) {
         message.success('成功')
@@ -441,7 +442,7 @@ async function saveSchedule(day: number | null) {
         })
 
         const index = schedules.value.findIndex(
-          (s) => s.year == updateScheduleModel.value.year && s.week == updateScheduleModel.value.week,
+          s => s.year == updateScheduleModel.value.year && s.week == updateScheduleModel.value.week,
         )
 
         if (index >= 0) {
@@ -462,7 +463,7 @@ async function saveSchedule(day: number | null) {
         })
         ensureDayInitialized(updateScheduleModel.value, selectedDay.value)
       } else {
-        message.error('修改失败: ' + data.message)
+        message.error(`修改失败: ${data.message}`)
       }
     })
     .finally(() => {
@@ -473,7 +474,7 @@ async function onUpdateSchedule() {
   await saveSchedule(selectedDay.value)
 }
 async function onDeleteSchedule(schedule: ScheduleWeekInfo) {
-  await QueryGetAPI(SCHEDULE_API_URL + 'del', {
+  await QueryGetAPI(`${SCHEDULE_API_URL}del`, {
     year: schedule.year,
     week: schedule.week,
   }).then((data) => {
@@ -481,7 +482,7 @@ async function onDeleteSchedule(schedule: ScheduleWeekInfo) {
       message.success('已删除')
       get()
     } else {
-      message.error('删除失败: ' + data.message)
+      message.error(`删除失败: ${data.message}`)
     }
   })
 }
@@ -506,21 +507,21 @@ function onEditScheduleItem(schedule: ScheduleWeekInfo, dayIndex: number, item:
 async function onDeleteScheduleItem(schedule: ScheduleWeekInfo, dayIndex: number, item: ScheduleDayInfo) {
   const targetSchedule = schedules.value.find(s => s.year === schedule.year && s.week === schedule.week)
   if (!targetSchedule) return
-  
-  const itemIndex = targetSchedule.days[dayIndex].findIndex(i => 
-    i.id === item.id || (i.title === item.title && i.time === item.time && i.tag === item.tag)
+
+  const itemIndex = targetSchedule.days[dayIndex].findIndex(i =>
+    i.id === item.id || (i.title === item.title && i.time === item.time && i.tag === item.tag),
   )
-  
+
   if (itemIndex === -1) return
-  
+
   const updatedDays = targetSchedule.days.map((dayList, idx) => {
     if (idx === dayIndex) {
       return dayList.filter((_, i) => i !== itemIndex)
     }
     return dayList
   })
-  
-  await QueryPostAPI(SCHEDULE_API_URL + 'update', {
+
+  await QueryPostAPI(`${SCHEDULE_API_URL}update`, {
     year: schedule.year,
     week: schedule.week,
     days: sanitizeDays(updatedDays),
@@ -536,7 +537,7 @@ async function onDeleteScheduleItem(schedule: ScheduleWeekInfo, dayIndex: number
         })
       }
     } else {
-      message.error('删除失败: ' + data.message)
+      message.error(`删除失败: ${data.message}`)
     }
   })
 }
@@ -569,19 +570,20 @@ function removeScheduleItem(index: number) {
 function moveScheduleItem(index: number, direction: 'up' | 'down') {
   const dayList = updateScheduleModel.value.days[selectedDay.value]
   if (!dayList) return
-  
+
   const targetIndex = direction === 'up' ? index - 1 : index + 1
   if (targetIndex < 0 || targetIndex >= dayList.length) return
-  
+
   const temp = dayList[index]
   dayList[index] = dayList[targetIndex]
   dayList[targetIndex] = temp
 }
-const renderOption = ({ node, option }: { node: VNode; option: SelectOption }) =>
-  h(NSpace, { align: 'center', size: 3, style: 'margin-left: 5px' }, () => [
+function renderOption({ node, option }: { node: VNode, option: SelectOption }) {
+  return h(NSpace, { align: 'center', size: 3, style: 'margin-left: 5px' }, () => [
     option.value ? h(NBadge, { dot: true, color: option.value?.toString() }) : null,
     node,
   ])
+}
 async function setFunctionEnable(enable: boolean) {
   let success = false
   if (enable) {
@@ -590,9 +592,9 @@ async function setFunctionEnable(enable: boolean) {
     success = await DisableFunction(FunctionTypes.Schedule)
   }
   if (success) {
-    message.success('已' + (enable ? '启用' : '禁用'))
+    message.success(`已${enable ? '启用' : '禁用'}`)
   } else {
-    message.error('无法' + (enable ? '启用' : '禁用'))
+    message.error(`无法${enable ? '启用' : '禁用'}`)
   }
 }
 
@@ -740,10 +742,10 @@ onMounted(() => {
     />
     <NDivider />
     <template v-if="updateScheduleModel">
-      <div 
+      <div
         style="
-          max-height: calc(90vh - 300px); 
-          overflow-y: auto; 
+          max-height: calc(90vh - 300px);
+          overflow-y: auto;
           padding-right: 8px;
           scrollbar-width: thin;
           scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
@@ -760,111 +762,119 @@ onMounted(() => {
           >
             + 添加行程项
           </NButton>
-        <NCard
-          v-for="(item, itemIndex) in updateScheduleModel.days[selectedDay]"
-          :key="itemIndex"
-          size="small"
-          :bordered="true"
-          :style="{ 
-            borderLeft: item.tagColor ? `4px solid ${item.tagColor}` : 'none',
-            backgroundColor: item.tagColor ? item.tagColor + '08' : 'transparent'
-          }"
-        >
-          <template #header>
-            <NSpace align="center" :size="8">
-              <NText strong style="font-size: 14px;">行程 {{ itemIndex + 1 }}</NText>
-              <NButton
-                v-if="itemIndex > 0"
-                size="tiny"
-                quaternary
-                @click="moveScheduleItem(itemIndex, 'up')"
-              >
-                ↑
-              </NButton>
-              <NButton
-                v-if="itemIndex < updateScheduleModel.days[selectedDay].length - 1"
-                size="tiny"
-                quaternary
-                @click="moveScheduleItem(itemIndex, 'down')"
-              >
-                ↓
-              </NButton>
-            </NSpace>
-          </template>
-          <template #header-extra>
-            <NButton
-              size="tiny"
-              type="error"
-              quaternary
-              @click="removeScheduleItem(itemIndex)"
-            >
-              删除
-            </NButton>
-          </template>
-          <NSpace
-            vertical
-            :size="12"
+          <NCard
+            v-for="(item, itemIndex) in updateScheduleModel.days[selectedDay]"
+            :key="itemIndex"
+            size="small"
+            :bordered="true"
+            :style="{
+              borderLeft: item.tagColor ? `4px solid ${item.tagColor}` : 'none',
+              backgroundColor: item.tagColor ? `${item.tagColor}08` : 'transparent',
+            }"
           >
-            <NSpace align="center" :size="8" style="flex-wrap: wrap;">
-              <NInputGroup style="width: auto; min-width: 200px;">
-                <NInputGroupLabel type="primary" style="min-width: 50px;">
-                  标签
+            <template #header>
+              <NSpace align="center" :size="8">
+                <NText strong style="font-size: 14px;">
+                  行程 {{ itemIndex + 1 }}
+                </NText>
+                <NButton
+                  v-if="itemIndex > 0"
+                  size="tiny"
+                  quaternary
+                  @click="moveScheduleItem(itemIndex, 'up')"
+                >
+                  ↑
+                </NButton>
+                <NButton
+                  v-if="itemIndex < updateScheduleModel.days[selectedDay].length - 1"
+                  size="tiny"
+                  quaternary
+                  @click="moveScheduleItem(itemIndex, 'down')"
+                >
+                  ↓
+                </NButton>
+              </NSpace>
+            </template>
+            <template #header-extra>
+              <NButton
+                size="tiny"
+                type="error"
+                quaternary
+                @click="removeScheduleItem(itemIndex)"
+              >
+                删除
+              </NButton>
+            </template>
+            <NSpace
+              vertical
+              :size="12"
+            >
+              <NSpace align="center" :size="8" style="flex-wrap: wrap;">
+                <NInputGroup style="width: auto; min-width: 200px;">
+                  <NInputGroupLabel type="primary" style="min-width: 50px;">
+                    标签
+                  </NInputGroupLabel>
+                  <NInput
+                    v-model:value="item.tag"
+                    placeholder="标签名称"
+                    style="width: 150px;"
+                    maxlength="10"
+                    show-count
+                  />
+                </NInputGroup>
+                <NSelect
+                  :value="null"
+                  :options="existTagOptions"
+                  filterable
+                  clearable
+                  placeholder="选择已用标签"
+                  style="width: 140px;"
+                  :render-option="renderOption"
+                  @update:value="(val, opt) => onSelectChange(val, opt, itemIndex)"
+                />
+              </NSpace>
+              <NInputGroup>
+                <NInputGroupLabel style="min-width: 50px;">
+                  内容
                 </NInputGroupLabel>
                 <NInput
-                  v-model:value="item.tag"
-                  placeholder="标签名称"
-                  style="width: 150px;"
-                  maxlength="10"
+                  v-model:value="item.title"
+                  placeholder="事件内容描述"
+                  maxlength="50"
                   show-count
                 />
               </NInputGroup>
-              <NSelect
-                :value="null"
-                :options="existTagOptions"
-                filterable
-                clearable
-                placeholder="选择已用标签"
-                style="width: 140px;"
-                :render-option="renderOption"
-                @update:value="(val, opt) => onSelectChange(val, opt, itemIndex)"
-              />
+              <NSpace align="center" :size="8">
+                <NInputGroup style="width: auto;">
+                  <NInputGroupLabel style="min-width: 50px;">
+                    时间
+                  </NInputGroupLabel>
+                  <NTimePicker
+                    v-model:formatted-value="item.time"
+                    default-formatted-value="20:00"
+                    format="HH:mm"
+                    style="width: 120px"
+                    clearable
+                  />
+                </NInputGroup>
+                <NInputGroup style="width: auto;">
+                  <NInputGroupLabel style="min-width: 50px;">
+                    颜色
+                  </NInputGroupLabel>
+                  <NColorPicker
+                    :key="`color-${selectedDay}-${itemIndex}-${item.id || 'new'}`"
+                    :value="normalizeColor(item.tagColor)"
+                    :swatches="['#18A058', '#2080F0', '#F0A020', '#D03050', '#9333EA', '#14B8A6']"
+                    default-value="#2080F0"
+                    :show-alpha="false"
+                    :modes="['hex']"
+                    style="width: 120px;"
+                    @update:value="(val) => item.tagColor = normalizeColor(val)"
+                  />
+                </NInputGroup>
+              </NSpace>
             </NSpace>
-            <NInputGroup>
-              <NInputGroupLabel style="min-width: 50px;"> 内容 </NInputGroupLabel>
-              <NInput
-                v-model:value="item.title"
-                placeholder="事件内容描述"
-                maxlength="50"
-                show-count
-              />
-            </NInputGroup>
-            <NSpace align="center" :size="8">
-              <NInputGroup style="width: auto;">
-                <NInputGroupLabel style="min-width: 50px;">时间</NInputGroupLabel>
-                <NTimePicker
-                  v-model:formatted-value="item.time"
-                  default-formatted-value="20:00"
-                  format="HH:mm"
-                  style="width: 120px"
-                  clearable
-                />
-              </NInputGroup>
-              <NInputGroup style="width: auto;">
-                <NInputGroupLabel style="min-width: 50px;">颜色</NInputGroupLabel>
-                <NColorPicker
-                  :key="`color-${selectedDay}-${itemIndex}-${item.id || 'new'}`"
-                  :value="normalizeColor(item.tagColor)"
-                  @update:value="(val) => item.tagColor = normalizeColor(val)"
-                  :swatches="['#18A058', '#2080F0', '#F0A020', '#D03050', '#9333EA', '#14B8A6']"
-                  default-value="#2080F0"
-                  :show-alpha="false"
-                  :modes="['hex']"
-                  style="width: 120px;"
-                />
-              </NInputGroup>
-            </NSpace>
-          </NSpace>
-        </NCard>
+          </NCard>
         </NSpace>
       </div>
       <NDivider />
diff --git a/src/views/manage/Setting_PaymentView.vue b/src/views/manage/Setting_PaymentView.vue
index bb9ba67..c35b297 100644
--- a/src/views/manage/Setting_PaymentView.vue
+++ b/src/views/manage/Setting_PaymentView.vue
@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { ConsumptionTypes } from '@/api/models/consumption'
+import { CheckmarkCircle24Filled } from '@vicons/fluent'
 import {
-  NFlex,
+  NDivider,
   NIcon,
-  NLayout,
-  NLayoutSider,
-  NMenu,
   NTabPane,
   NTabs,
-  NDivider
 } from 'naive-ui'
-import { h, onMounted, ref, defineComponent, shallowRef } from 'vue'
-import { useConsumptionSettingStore } from '@/store/usePaymentSettingStore'
-import { CheckmarkCircle24Filled } from '@vicons/fluent'
+import { defineComponent, h, onMounted, shallowRef } from 'vue'
+import { useAccount } from '@/api/account'
+import { ConsumptionTypes } from '@/api/models/consumption'
 import { isDev } from '@/data/constants'
+import { useConsumptionSettingStore } from '@/store/usePaymentSettingStore'
 
 const DanmakuStorageView = defineComponent({
   setup() {
     return () => h('div', [
       h(NDivider),
-      h('div', 'WIP...')
+      h('div', 'WIP...'),
     ])
-  }
+  },
 })
 
 const accountInfo = useAccount()
@@ -31,11 +27,11 @@ const currentComponent = shallowRef(DanmakuStorageView)
 
 const enabledIcon = h(NIcon, {
   component: CheckmarkCircle24Filled,
-  color: 'lightgrey'
+  color: 'lightgrey',
 })
 const disabledIcon = h(NIcon, {
   component: CheckmarkCircle24Filled,
-  color: 'red'
+  color: 'red',
 })
 
 function tabDisplay(type: ConsumptionTypes) {
@@ -69,4 +65,4 @@ onMounted(() => {
     </NTabPane>
   </NTabs>
   <component :is="tabDisplay(ConsumptionTypes.DanmakuStorage)" />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index a9fd9d0..0159f9c 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -1,664 +1,672 @@
 <script setup lang="ts">
-  import {
-    DelBiliBlackList,
-    DelBlackList,
-    SaveAccountSettings,
-    SaveEnableFunctions,
-    SaveSetting,
-    downloadConfigDirect,
-    useAccount,
-  } from '@/api/account';
-  import {
-    FunctionTypes,
-    ResponseUserIndexModel,
-    ScheduleWeekInfo,
-    SongFrom,
-    SongLanguage,
-    SongRequestOption,
-    SongsInfo,
-    VideoCollectVideo,
-  } from '@/api/api-models';
-  import { QueryGetAPI, QueryPostAPI } from '@/api/query';
-  import DynamicForm from '@/components/DynamicForm.vue';
-  import SimpleVideoCard from '@/components/SimpleVideoCard.vue';
-  import {
-    FETCH_API,
-    IndexTemplateMap,
-    ScheduleTemplateMap,
-    SongListTemplateMap,
-    TemplateMapType,
-    USER_INDEX_API_URL,
-  } from '@/data/constants';
-  import { ConfigItemDefinition } from '@/data/VTsuruConfigTypes';
-  import { Delete24Regular } from '@vicons/fluent';
-  import {
-    NAlert,
-    NButton,
-    NCard,
-    NCheckbox,
-    NCheckboxGroup,
-    NDivider,
-    NEmpty,
-    NFlex,
-    NIcon,
-    NInput,
-    NList,
-    NListItem,
-    NModal,
-    NPopconfirm,
-    NSelect,
-    NSpace,
-    NSpin,
-    NTabPane,
-    NTabs,
-    NTag,
-    NText,
-    NTooltip,
-    SelectOption,
-    useMessage,
-  } from 'naive-ui';
-  import { computed, h, nextTick, onActivated, onMounted, ref, shallowRef, markRaw } from 'vue';
-  import { useRoute } from 'vue-router';
-  import { useRouteQuery } from '@vueuse/router';
+import type {
+  SelectOption,
+} from 'naive-ui'
+import type {
+  ResponseUserIndexModel,
+  ScheduleWeekInfo,
+  SongRequestOption,
+  SongsInfo,
+  VideoCollectVideo,
+} from '@/api/api-models'
+import type {
+  TemplateMapType,
+} from '@/data/constants'
+import { Delete24Regular } from '@vicons/fluent'
+import { useRouteQuery } from '@vueuse/router'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NCheckbox,
+  NCheckboxGroup,
+  NDivider,
+  NEmpty,
+  NFlex,
+  NIcon,
+  NInput,
+  NList,
+  NListItem,
+  NModal,
+  NPopconfirm,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTabPane,
+  NTabs,
+  NTag,
+  NText,
+  NTooltip,
+  useMessage,
+} from 'naive-ui'
+import { computed, h, nextTick, onActivated, onMounted, ref, shallowRef } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  DelBiliBlackList,
+  DelBlackList,
+  downloadConfigDirect,
+  SaveAccountSettings,
+  SaveEnableFunctions,
+  SaveSetting,
+  useAccount,
+} from '@/api/account'
+import {
+  FunctionTypes,
+  SongFrom,
+} from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import DynamicForm from '@/components/DynamicForm.vue'
+import SimpleVideoCard from '@/components/SimpleVideoCard.vue'
+import {
+  FETCH_API,
+  IndexTemplateMap,
+  ScheduleTemplateMap,
+  SongListTemplateMap,
+  USER_INDEX_API_URL,
+} from '@/data/constants'
 
-  // 模板定义类型接口
-  interface TemplateDefineTypes {
-    TemplateMap: TemplateMapType;
-    Options: SelectOption[];
-    Data: any;
-    Selected: string;
-    Config?: any | undefined;
+// 模板定义类型接口
+interface TemplateDefineTypes {
+  TemplateMap: TemplateMapType
+  Options: SelectOption[]
+  Data: any
+  Selected: string
+  Config?: any | undefined
+}
+
+const accountInfo = useAccount()
+const message = useMessage()
+const route = useRoute()
+
+const isSaving = ref(false)
+const isLoading = ref(false)
+
+// 模板相关数据
+const templates = ref({
+  index: {
+    TemplateMap: IndexTemplateMap,
+    Options: Object.entries(IndexTemplateMap).map(v => ({
+      label: v[1].name,
+      value: v[0],
+    })),
+    Data: null,
+    Selected: accountInfo.value?.settings.indexTemplate ?? '',
+  },
+  schedule: {
+    TemplateMap: ScheduleTemplateMap,
+    Options: Object.entries(ScheduleTemplateMap).map(v => ({
+      label: v[1].name,
+      value: v[0],
+    })),
+    Data: [
+      {
+        year: 2023,
+        week: 30,
+        days: [
+          [{
+            title: '唱唱歌!',
+            tag: '歌回',
+            tagColor: '#61B589',
+            time: '10:00 AM',
+            id: null,
+          }],
+          [{
+            title: '玩点游戏',
+            tag: '游戏',
+            tagColor: '#A36565',
+            time: '20:00 PM',
+            id: null,
+          }],
+          [{
+            title: 'Title 3',
+            tag: 'Tag 3',
+            tagColor: '#7BCDEF',
+            time: '11:00 PM',
+            id: null,
+          }],
+          [{
+            title: null,
+            tag: null,
+            tagColor: null,
+            time: null,
+            id: null,
+          }],
+          [{
+            title: null,
+            tag: null,
+            tagColor: null,
+            time: null,
+            id: null,
+          }],
+          [{
+            title: null,
+            tag: null,
+            tagColor: null,
+            time: null,
+            id: null,
+          }],
+          [{
+            title: null,
+            tag: null,
+            tagColor: null,
+            time: null,
+            id: null,
+          }],
+        ],
+      },
+    ] as ScheduleWeekInfo[],
+    Selected: accountInfo.value?.settings.scheduleTemplate ?? '',
+  },
+  songlist: {
+    TemplateMap: SongListTemplateMap,
+    Options: Object.entries(SongListTemplateMap).map(v => ({
+      label: v[1].name,
+      value: v[0],
+    })),
+    Data: [
+      {
+        id: 1,
+        key: 'song1',
+        name: '歌曲1',
+        author: ['作者1'],
+        tags: ['标签1', '标签2'],
+        description: '这是一段描述',
+        url: 'https://example.com/song1.mp3',
+        from: SongFrom.Custom,
+        language: ['中文'],
+        createTime: Date.now(),
+        updateTime: Date.now(),
+      },
+      {
+        id: 2,
+        key: 'song2',
+        name: '歌曲2',
+        author: ['作者1'],
+        tags: ['标签1', '标签2'],
+        url: 'https://example.com/song2.mp3',
+        from: SongFrom.Custom,
+        language: ['中文'],
+        createTime: Date.now(),
+        updateTime: Date.now(),
+        description: '这还是一段描述',
+        options: {
+          scMinPrice: 30,
+          fanMedalMinLevel: 5,
+          needJianzhang: true,
+        } as SongRequestOption,
+      },
+      {
+        id: 3,
+        key: 'song3',
+        name: '歌曲3',
+        tags: ['标签3', '很长很长很长很长很长很长很长很长很长很长的标签'],
+        author: ['作者3'],
+        url: 'https://example.com/song3.mp3',
+        from: SongFrom.Custom,
+        description: '这是一段很长很长很长很长很长很长很长很长很长很长的描述',
+        language: ['中文'],
+        createTime: Date.now(),
+        updateTime: Date.now(),
+      },
+      {
+        id: 4,
+        key: 'song4',
+        name: '歌曲4',
+        author: ['作者4'],
+        url: 'https://example.com/song4.mp3',
+        from: SongFrom.Custom,
+        language: ['中文'],
+        createTime: Date.now(),
+        updateTime: Date.now(),
+      },
+      {
+        id: 5,
+        key: 'song5',
+        name: '歌曲5',
+        author: ['作者5'],
+        tags: ['标签1', '标签5', '标签6', '标签7', '标签8', '标签9', '标签10'],
+        url: 'https://example.com/song5.mp3',
+        from: SongFrom.Custom,
+        language: ['中文'],
+        createTime: Date.now(),
+        updateTime: Date.now(),
+      },
+    ] as SongsInfo[],
+    Selected: accountInfo.value?.settings.songListTemplate ?? '',
+  },
+} as { [type: string]: TemplateDefineTypes })
+
+// 模板选项配置
+const templateOptions = [
+  { label: '主页', value: 'index' },
+  { label: '歌单', value: 'songlist' },
+  { label: '日程表', value: 'schedule' },
+] as SelectOption[]
+
+// 使用 useRouteQuery 自动同步 URL 查询参数
+const selectedOption = useRouteQuery('template', 'index', { transform: String })
+const selectedTab = useRouteQuery('setting', 'general', { transform: String })
+
+// 动态表单相关
+const dynamicConfigRef = shallowRef()
+
+// 计算属性
+const selectedTemplateData = computed(() => templates.value[selectedOption.value])
+const selectedTemplate = computed(() => selectedTemplateData.value.TemplateMap[selectedTemplateData.value.Selected])
+const selectedComponent = computed(() => selectedTemplate.value.component)
+const selectedTemplateConfig = computed(() => dynamicConfigRef.value?.Config ? dynamicConfigRef.value.Config : undefined)
+
+// B站用户信息
+const biliUserInfo = ref()
+
+// 模态框控制
+const settingModalVisiable = ref(false)
+const showAddVideoModal = ref(false)
+const showAddLinkModal = ref(false)
+const editingLinkName = ref<string | null>(null)
+const newLinkName = ref('')
+
+// 主页数据
+const indexDisplayInfo = ref<ResponseUserIndexModel>()
+const addVideoUrl = ref('')
+const addLinkName = ref('')
+const addLinkUrl = ref('')
+const linkKey = ref(0)
+// 初始化 linkOrder (兼容旧数据)
+onMounted(() => {
+  if (accountInfo.value?.settings?.index) {
+    const idx = accountInfo.value.settings.index
+    if (!idx.linkOrder || idx.linkOrder.length === 0) {
+      idx.linkOrder = Object.keys(idx.links || {})
+    }
   }
+})
 
-  const accountInfo = useAccount();
-  const message = useMessage();
-  const route = useRoute();
+/**
+ * 获取B站用户数据
+ */
+async function RequestBiliUserData() {
+  try {
+    const response = await fetch(`${FETCH_API}https://workers.vrp.moe/api/bilibili/user-info/10021741`)
+    const data = await response.json()
+    if (data.code == 0) {
+      biliUserInfo.value = data.card
+    } else {
+      throw new Error(`Bili User API Error: ${data.message}`)
+    }
+  } catch (error) {
+    console.error('获取B站用户数据失败:', error)
+  }
+}
 
-  const isSaving = ref(false);
-  const isLoading = ref(false);
+/**
+ * 保存功能启用状态
+ */
+async function SaveComboGroupSetting(
+  value: (string | number)[],
+  meta: { actionType: 'check' | 'uncheck', value: string | number },
+) {
+  if (!accountInfo.value) return
 
-  // 模板相关数据
-  const templates = ref({
-    index: {
-      TemplateMap: IndexTemplateMap,
-      Options: Object.entries(IndexTemplateMap).map((v) => ({
-        label: v[1].name,
-        value: v[0],
-      })),
-      Data: null,
-      Selected: accountInfo.value?.settings.indexTemplate ?? '',
-    },
-    schedule: {
-      TemplateMap: ScheduleTemplateMap,
-      Options: Object.entries(ScheduleTemplateMap).map((v) => ({
-        label: v[1].name,
-        value: v[0],
-      })),
-      Data: [
-        {
-          year: 2023,
-          week: 30,
-          days: [
-            [{
-              title: '唱唱歌!',
-              tag: '歌回',
-              tagColor: '#61B589',
-              time: '10:00 AM',
-              id: null,
-            }],
-            [{
-              title: '玩点游戏',
-              tag: '游戏',
-              tagColor: '#A36565',
-              time: '20:00 PM',
-              id: null,
-            }],
-            [{
-              title: 'Title 3',
-              tag: 'Tag 3',
-              tagColor: '#7BCDEF',
-              time: '11:00 PM',
-              id: null,
-            }],
-            [{
-              title: null,
-              tag: null,
-              tagColor: null,
-              time: null,
-              id: null,
-            }],
-            [{
-              title: null,
-              tag: null,
-              tagColor: null,
-              time: null,
-              id: null,
-            }],
-            [{
-              title: null,
-              tag: null,
-              tagColor: null,
-              time: null,
-              id: null,
-            }],
-            [{
-              title: null,
-              tag: null,
-              tagColor: null,
-              time: null,
-              id: null,
-            }],
-          ],
-        },
-      ] as ScheduleWeekInfo[],
-      Selected: accountInfo.value?.settings.scheduleTemplate ?? '',
-    },
-    songlist: {
-      TemplateMap: SongListTemplateMap,
-      Options: Object.entries(SongListTemplateMap).map((v) => ({
-        label: v[1].name,
-        value: v[0],
-      })),
-      Data: [
-        {
-          id: 1,
-          key: 'song1',
-          name: '歌曲1',
-          author: ['作者1'],
-          tags: ['标签1', '标签2'],
-          description: '这是一段描述',
-          url: 'https://example.com/song1.mp3',
-          from: SongFrom.Custom,
-          language: ['中文'],
-          createTime: Date.now(),
-          updateTime: Date.now(),
-        },
-        {
-          id: 2,
-          key: 'song2',
-          name: '歌曲2',
-          author: ['作者1'],
-          tags: ['标签1', '标签2'],
-          url: 'https://example.com/song2.mp3',
-          from: SongFrom.Custom,
-          language: ['中文'],
-          createTime: Date.now(),
-          updateTime: Date.now(),
-          description: '这还是一段描述',
-          options: {
-            scMinPrice: 30,
-            fanMedalMinLevel: 5,
-            needJianzhang: true,
-          } as SongRequestOption,
-        },
-        {
-          id: 3,
-          key: 'song3',
-          name: '歌曲3',
-          tags: ['标签3', '很长很长很长很长很长很长很长很长很长很长的标签'],
-          author: ['作者3'],
-          url: 'https://example.com/song3.mp3',
-          from: SongFrom.Custom,
-          description: '这是一段很长很长很长很长很长很长很长很长很长很长的描述',
-          language: ['中文'],
-          createTime: Date.now(),
-          updateTime: Date.now(),
-        },
-        {
-          id: 4,
-          key: 'song4',
-          name: '歌曲4',
-          author: ['作者4'],
-          url: 'https://example.com/song4.mp3',
-          from: SongFrom.Custom,
-          language: ['中文'],
-          createTime: Date.now(),
-          updateTime: Date.now(),
-        },
-        {
-          id: 5,
-          key: 'song5',
-          name: '歌曲5',
-          author: ['作者5'],
-          tags: ['标签1', '标签5', '标签6', '标签7', '标签8', '标签9', '标签10'],
-          url: 'https://example.com/song5.mp3',
-          from: SongFrom.Custom,
-          language: ['中文'],
-          createTime: Date.now(),
-          updateTime: Date.now(),
-        },
-      ] as SongsInfo[],
-      Selected: accountInfo.value?.settings.songListTemplate ?? '',
-    },
-  } as { [type: string]: TemplateDefineTypes; });
-
-  // 模板选项配置
-  const templateOptions = [
-    { label: '主页', value: 'index' },
-    { label: '歌单', value: 'songlist' },
-    { label: '日程表', value: 'schedule' },
-  ] as SelectOption[];
-
-  // 使用 useRouteQuery 自动同步 URL 查询参数
-  const selectedOption = useRouteQuery('template', 'index', { transform: String });
-  const selectedTab = useRouteQuery('setting', 'general', { transform: String });
-
-  // 动态表单相关
-  const dynamicConfigRef = shallowRef();
-
-  // 计算属性
-  const selectedTemplateData = computed(() => templates.value[selectedOption.value]);
-  const selectedTemplate = computed(() => selectedTemplateData.value.TemplateMap[selectedTemplateData.value.Selected]);
-  const selectedComponent = computed(() => selectedTemplate.value.component);
-  const selectedTemplateConfig = computed(() => dynamicConfigRef.value?.Config ? dynamicConfigRef.value.Config : undefined);
-
-  // B站用户信息
-  const biliUserInfo = ref();
-
-  // 模态框控制
-  const settingModalVisiable = ref(false);
-  const showAddVideoModal = ref(false);
-  const showAddLinkModal = ref(false);
-  const editingLinkName = ref<string | null>(null);
-  const newLinkName = ref('');
-
-  // 主页数据
-  const indexDisplayInfo = ref<ResponseUserIndexModel>();
-  const addVideoUrl = ref('');
-  const addLinkName = ref('');
-  const addLinkUrl = ref('');
-  const linkKey = ref(0);
-  // 初始化 linkOrder (兼容旧数据)
-  onMounted(() => {
-    if (accountInfo.value?.settings?.index) {
-      const idx = accountInfo.value.settings.index;
-      if (!idx.linkOrder || idx.linkOrder.length === 0) {
-        idx.linkOrder = Object.keys(idx.links || {});
+  isSaving.value = true
+  try {
+    const response = await SaveEnableFunctions(accountInfo.value.settings.enableFunctions)
+    if (response.code !== 200) {
+      message.error('修改失败')
+      // 回滚修改
+      if (accountInfo.value) {
+        accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter(
+          f => f != (meta.value as FunctionTypes),
+        )
       }
     }
-  });
+  } catch (err) {
+    message.error(`修改失败: ${err}`)
+  } finally {
+    isSaving.value = false
+  }
+}
 
-  /**
-   * 获取B站用户数据
-   */
-  async function RequestBiliUserData() {
-    try {
-      const response = await fetch(FETCH_API + `https://workers.vrp.moe/api/bilibili/user-info/10021741`);
-      const data = await response.json();
-      if (data.code == 0) {
-        biliUserInfo.value = data.card;
-      } else {
-        throw new Error('Bili User API Error: ' + data.message);
+/**
+ * 保存账户设置
+ */
+async function SaveComboSetting() {
+  if (!accountInfo.value) return
+
+  isSaving.value = true
+  try {
+    const response = await SaveAccountSettings()
+    if (response.code === 200) {
+      message.success('已保存')
+    } else {
+      message.error('修改失败')
+    }
+  } catch (err) {
+    message.error(`修改失败: ${err}`)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+/**
+ * 保存模板设置
+ */
+async function SaveTemplateSetting() {
+  if (!accountInfo.value) return
+
+  // 根据选择的模板类型保存对应设置
+  switch (selectedOption.value) {
+    case 'index':
+      accountInfo.value.settings.indexTemplate = selectedTemplateData.value.Selected ?? ''
+      break
+    case 'songlist':
+      accountInfo.value.settings.songListTemplate = selectedTemplateData.value.Selected ?? ''
+      break
+    case 'schedule':
+      accountInfo.value.settings.scheduleTemplate = selectedTemplateData.value.Selected ?? ''
+      break
+  }
+
+  await SaveComboSetting()
+}
+
+/**
+ * 更新主页设置
+ */
+async function updateIndexSettings() {
+  try {
+    const response = await QueryPostAPI(`${USER_INDEX_API_URL}update-setting`, accountInfo.value.settings.index)
+    if (response.code === 200) {
+      message.success('已保存')
+    } else {
+      message.error(`保存失败: ${response.message}`)
+    }
+  } catch (err) {
+    message.error(`保存失败: ${err}`)
+  }
+}
+
+/**
+ * 添加视频到主页
+ */
+async function addVideo() {
+  if (!addVideoUrl.value) {
+    message.error('请输入视频链接')
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const response = await QueryGetAPI<VideoCollectVideo>(`${USER_INDEX_API_URL}add-video`, {
+      video: addVideoUrl.value,
+    })
+
+    if (response.code === 200) {
+      message.success('已添加')
+      indexDisplayInfo.value?.videos.push(response.data)
+      accountInfo.value?.settings.index.videos.push(response.data.id)
+      addVideoUrl.value = ''
+    } else {
+      message.error(`保存失败: ${response.message}`)
+    }
+  } catch (err) {
+    message.error(`保存失败: ${err}`)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * 从主页移除视频
+ */
+async function removeVideo(id: string) {
+  isLoading.value = true
+  try {
+    const response = await QueryGetAPI<VideoCollectVideo>(`${USER_INDEX_API_URL}del-video`, {
+      video: id,
+    })
+
+    if (response.code === 200) {
+      message.success('已删除')
+      // 更新视频列表
+      if (indexDisplayInfo.value) {
+        indexDisplayInfo.value.videos = indexDisplayInfo.value.videos.filter(v => v.id !== id)
       }
-    } catch (error) {
-      console.error('获取B站用户数据失败:', error);
+      // 更新设置
+      accountInfo.value.settings.index.videos = accountInfo.value.settings.index.videos.filter(v => v !== id)
+    } else {
+      message.error(`删除失败: ${response.message}`)
     }
+  } catch (err) {
+    message.error(`删除失败: ${err}`)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * 添加外部链接
+ */
+async function addLink() {
+  // 验证输入
+  if (!addLinkName.value || !addLinkUrl.value) {
+    message.error('请输入名称和链接')
+    return
   }
 
-  /**
-   * 保存功能启用状态
-   */
-  async function SaveComboGroupSetting(
-    value: (string | number)[],
-    meta: { actionType: 'check' | 'uncheck'; value: string | number; },
-  ) {
-    if (!accountInfo.value) return;
+  // 验证URL格式
+  try {
+    new URL(addLinkUrl.value)
+  } catch (e) {
+    message.error('请输入正确的链接')
+    return
+  }
 
-    isSaving.value = true;
+  // 检查链接名是否已存在
+  if (Object.keys(accountInfo.value.settings.index.links).includes(addLinkName.value)) {
+    message.error(`${addLinkName.value}已存在`)
+    return
+  }
+
+  // 保存链接
+  accountInfo.value.settings.index.links[addLinkName.value] = addLinkUrl.value
+  await updateIndexSettings()
+
+  // 重置表单
+  addLinkName.value = ''
+  addLinkUrl.value = ''
+  location.reload()
+}
+
+/**
+ * 删除外部链接
+ */
+async function removeLink(name: string) {
+  delete accountInfo.value.settings.index.links[name]
+  if (accountInfo.value.settings.index.linkOrder) {
+    accountInfo.value.settings.index.linkOrder = accountInfo.value.settings.index.linkOrder.filter(k => k !== name)
+  }
+  await updateIndexSettings()
+  location.reload()
+}
+
+/** 上移/下移视频 */
+function moveVideo(id: string, dir: 'up' | 'down') {
+  const list = accountInfo.value.settings.index.videos
+  const i = list.indexOf(id)
+  if (i === -1) return
+  const ni = dir === 'up' ? i - 1 : i + 1
+  if (ni < 0 || ni >= list.length) return;
+  [list[i], list[ni]] = [list[ni], list[i]]
+  updateIndexSettings()
+}
+/** 上移/下移链接 */
+function moveLink(name: string, dir: 'up' | 'down') {
+  const order = accountInfo.value.settings.index.linkOrder
+  if (!order) return
+  const i = order.indexOf(name)
+  const ni = dir === 'up' ? i - 1 : i + 1
+  if (i === -1 || ni < 0 || ni >= order.length) return;
+  [order[i], order[ni]] = [order[ni], order[i]]
+  updateIndexSettings()
+  linkKey.value++
+}
+/** 编辑链接名称 */
+function startEditLink(name: string) {
+  editingLinkName.value = name
+  newLinkName.value = name
+}
+async function confirmEditLink(oldName: string) {
+  const idxSetting = accountInfo.value.settings.index
+  if (!newLinkName.value || newLinkName.value === oldName) {
+    editingLinkName.value = null; return
+  }
+  if (idxSetting.links[newLinkName.value]) {
+    message.error('名称已存在'); return
+  }
+  idxSetting.links[newLinkName.value] = idxSetting.links[oldName]
+  delete idxSetting.links[oldName]
+  if (idxSetting.linkOrder) {
+    idxSetting.linkOrder = idxSetting.linkOrder.map(k => k === oldName ? newLinkName.value : k)
+  }
+  await updateIndexSettings()
+  editingLinkName.value = null
+  linkKey.value++
+}
+function cancelEditLink() {
+  editingLinkName.value = null
+}
+
+/**
+ * 打开模板设置
+ */
+async function onOpenTemplateSettings() {
+  settingModalVisiable.value = true
+  nextTick(async () => {
+    await getTemplateConfig()
+  })
+}
+
+/**
+ * 获取模板配置
+ */
+async function getTemplateConfig() {
+  // 只获取未加载且有配置名的模板
+  if (selectedTemplate.value && !selectedTemplateData.value.Config && selectedTemplate.value.settingName) {
+    const name = selectedTemplate.value.settingName
     try {
-      const response = await SaveEnableFunctions(accountInfo.value.settings.enableFunctions);
-      if (response.code !== 200) {
-        message.error('修改失败');
-        // 回滚修改
-        if (accountInfo.value) {
-          accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter(
-            (f) => f != (meta.value as FunctionTypes),
-          );
-        }
-      }
-    } catch (err) {
-      message.error('修改失败: ' + err);
-    } finally {
-      isSaving.value = false;
-    }
-  }
-
-  /**
-   * 保存账户设置
-   */
-  async function SaveComboSetting() {
-    if (!accountInfo.value) return;
-
-    isSaving.value = true;
-    try {
-      const response = await SaveAccountSettings();
-      if (response.code === 200) {
-        message.success('已保存');
-      } else {
-        message.error('修改失败');
-      }
-    } catch (err) {
-      message.error('修改失败: ' + err);
-    } finally {
-      isSaving.value = false;
-    }
-  }
-
-  /**
-   * 保存模板设置
-   */
-  async function SaveTemplateSetting() {
-    if (!accountInfo.value) return;
-
-    // 根据选择的模板类型保存对应设置
-    switch (selectedOption.value) {
-      case 'index':
-        accountInfo.value.settings.indexTemplate = selectedTemplateData.value.Selected ?? '';
-        break;
-      case 'songlist':
-        accountInfo.value.settings.songListTemplate = selectedTemplateData.value.Selected ?? '';
-        break;
-      case 'schedule':
-        accountInfo.value.settings.scheduleTemplate = selectedTemplateData.value.Selected ?? '';
-        break;
-    }
-
-    await SaveComboSetting();
-  }
-
-  /**
-   * 更新主页设置
-   */
-  async function updateIndexSettings() {
-    try {
-      const response = await QueryPostAPI(USER_INDEX_API_URL + 'update-setting', accountInfo.value.settings.index);
-      if (response.code === 200) {
-        message.success('已保存');
-      } else {
-        message.error('保存失败: ' + response.message);
-      }
-    } catch (err) {
-      message.error('保存失败: ' + err);
-    }
-  }
-
-  /**
-   * 添加视频到主页
-   */
-  async function addVideo() {
-    if (!addVideoUrl.value) {
-      message.error('请输入视频链接');
-      return;
-    }
-
-    isLoading.value = true;
-    try {
-      const response = await QueryGetAPI<VideoCollectVideo>(USER_INDEX_API_URL + 'add-video', {
-        video: addVideoUrl.value,
-      });
+      const response = await downloadConfigDirect(name)
 
       if (response.code === 200) {
-        message.success('已添加');
-        indexDisplayInfo.value?.videos.push(response.data);
-        accountInfo.value?.settings.index.videos.push(response.data.id);
-        addVideoUrl.value = '';
+        console.log(`已获取模板配置: ${name}`)
+        selectedTemplateData.value.Config = JSON.parse(response.data)
+      } else if (response.code === 404) {
+        console.error(`未找到名为 ${name} 的配置文件`)
+        // 使用默认配置
+        selectedTemplateData.value.Config = dynamicConfigRef.value.DefaultConfig
       } else {
-        message.error('保存失败: ' + response.message);
+        message.error(`获取失败: ${response.message}`)
+        console.error(`获取失败: ${response.message}`)
       }
     } catch (err) {
-      message.error('保存失败: ' + err);
-    } finally {
-      isLoading.value = false;
+      message.error((err as Error).toString())
     }
   }
+}
 
-  /**
-   * 从主页移除视频
-   */
-  async function removeVideo(id: string) {
-    isLoading.value = true;
-    try {
-      const response = await QueryGetAPI<VideoCollectVideo>(USER_INDEX_API_URL + 'del-video', {
-        video: id,
-      });
+// 操作按钮组
+const buttonGroup = computed(() => {
+  return h(NSpace, () => [
+    h(NButton, { type: 'primary', onClick: () => SaveTemplateSetting() }, () => '设为展示模板'),
+    h(NButton, {
+      type: 'info',
+      onClick: onOpenTemplateSettings,
+      disabled: !selectedTemplate.value.settingName,
+    }, () => '模板设置'),
+  ])
+})
 
-      if (response.code === 200) {
-        message.success('已删除');
-        // 更新视频列表
-        if (indexDisplayInfo.value) {
-          indexDisplayInfo.value.videos = indexDisplayInfo.value.videos.filter((v) => v.id !== id);
-        }
-        // 更新设置
-        accountInfo.value.settings.index.videos = accountInfo.value.settings.index.videos.filter((v) => v !== id);
-      } else {
-        message.error('删除失败: ' + response.message);
-      }
-    } catch (err) {
-      message.error('删除失败: ' + err);
-    } finally {
-      isLoading.value = false;
-    }
-  }
-
-  /**
-   * 添加外部链接
-   */
-  async function addLink() {
-    // 验证输入
-    if (!addLinkName.value || !addLinkUrl.value) {
-      message.error('请输入名称和链接');
-      return;
-    }
-
-    // 验证URL格式
-    try {
-      new URL(addLinkUrl.value);
-    } catch (e) {
-      message.error('请输入正确的链接');
-      return;
-    }
-
-    // 检查链接名是否已存在
-    if (Object.keys(accountInfo.value.settings.index.links).includes(addLinkName.value)) {
-      message.error(addLinkName.value + '已存在');
-      return;
-    }
-
-    // 保存链接
-    accountInfo.value.settings.index.links[addLinkName.value] = addLinkUrl.value;
-    await updateIndexSettings();
-
-    // 重置表单
-    addLinkName.value = '';
-    addLinkUrl.value = '';
-    location.reload();
-  }
-
-  /**
-   * 删除外部链接
-   */
-  async function removeLink(name: string) {
-    delete accountInfo.value.settings.index.links[name];
-    if (accountInfo.value.settings.index.linkOrder) {
-      accountInfo.value.settings.index.linkOrder = accountInfo.value.settings.index.linkOrder.filter(k => k !== name);
-    }
-    await updateIndexSettings();
-    location.reload();
-  }
-
-  /** 上移/下移视频 */
-  function moveVideo(id: string, dir: 'up' | 'down') {
-    const list = accountInfo.value.settings.index.videos;
-    const i = list.indexOf(id);
-    if (i === -1) return;
-    const ni = dir === 'up' ? i - 1 : i + 1;
-    if (ni < 0 || ni >= list.length) return;
-    [list[i], list[ni]] = [list[ni], list[i]];
-    updateIndexSettings();
-  }
-  /** 上移/下移链接 */
-  function moveLink(name: string, dir: 'up' | 'down') {
-    const order = accountInfo.value.settings.index.linkOrder;
-    if (!order) return;
-    const i = order.indexOf(name);
-    const ni = dir === 'up' ? i - 1 : i + 1;
-    if (i === -1 || ni < 0 || ni >= order.length) return;
-    [order[i], order[ni]] = [order[ni], order[i]];
-    updateIndexSettings();
-    linkKey.value++;
-  }
-  /** 编辑链接名称 */
-  function startEditLink(name: string) {
-    editingLinkName.value = name;
-    newLinkName.value = name;
-  }
-  async function confirmEditLink(oldName: string) {
-    const idxSetting = accountInfo.value.settings.index;
-    if (!newLinkName.value || newLinkName.value === oldName) {
-      editingLinkName.value = null; return;
-    }
-    if (idxSetting.links[newLinkName.value]) { message.error('名称已存在'); return; }
-    idxSetting.links[newLinkName.value] = idxSetting.links[oldName];
-    delete idxSetting.links[oldName];
-    if (idxSetting.linkOrder) {
-      idxSetting.linkOrder = idxSetting.linkOrder.map(k => k === oldName ? newLinkName.value : k);
-    }
-    await updateIndexSettings();
-    editingLinkName.value = null;
-    linkKey.value++;
-  }
-  function cancelEditLink() { editingLinkName.value = null; }
-
-  /**
-   * 打开模板设置
-   */
-  async function onOpenTemplateSettings() {
-    settingModalVisiable.value = true;
-    nextTick(async () => {
-      await getTemplateConfig();
-    });
-  }
-
-  /**
-   * 获取模板配置
-   */
-  async function getTemplateConfig() {
-    // 只获取未加载且有配置名的模板
-    if (selectedTemplate.value && !selectedTemplateData.value.Config && selectedTemplate.value.settingName) {
-      const name = selectedTemplate.value.settingName;
-      try {
-        const response = await downloadConfigDirect(name);
-
-        if (response.code === 200) {
-          console.log(`已获取模板配置: ${name}`);
-          selectedTemplateData.value.Config = JSON.parse(response.data);
-        } else if (response.code === 404) {
-          console.error(`未找到名为 ${name} 的配置文件`);
-          // 使用默认配置
-          selectedTemplateData.value.Config = dynamicConfigRef.value.DefaultConfig;
-        } else {
-          message.error('获取失败: ' + response.message);
-          console.error('获取失败: ' + response.message);
-        }
-      } catch (err) {
-        message.error((err as Error).toString());
-      }
-    }
-  }
-
-  // 操作按钮组
-  const buttonGroup = computed(() => {
-    return h(NSpace, () => [
-      h(NButton, { type: 'primary', onClick: () => SaveTemplateSetting() }, () => '设为展示模板'),
-      h(NButton, {
-        type: 'info',
-        onClick: onOpenTemplateSettings,
-        disabled: !selectedTemplate.value.settingName
-      }, () => '模板设置'),
-    ]);
-  });
-
-  /**
-   * 解除B站用户黑名单
-   */
-  function unblockBiliUser(id: number) {
-    DelBiliBlackList(id)
-      .then((data) => {
-        if (data.code === 200) {
-          message.success(`[${id}] 已移除黑名单`);
-          if (accountInfo.value) {
-            delete accountInfo.value.biliBlackList[id];
-          }
-        } else {
-          message.error(data.message);
-        }
-      })
-      .catch((err) => {
-        message.error(err);
-      });
-  }
-
-  /**
-   * 解除普通用户黑名单
-   */
-  function unblockUser(id: number) {
-    DelBlackList(id)
-      .then((data) => {
-        if (data.code === 200) {
-          message.success(`[${id}] 已移除黑名单`);
-          if (accountInfo.value) {
-            accountInfo.value.blackList = accountInfo.value.blackList.filter((u) => u.id != id);
-          }
-        } else {
-          message.error(data.message);
-        }
-      })
-      .catch((err) => {
-        message.error(err);
-      });
-  }
-
-  /**
-   * 获取用户主页信息
-   */
-  async function getIndexInfo() {
-    isLoading.value = true;
-    try {
-      const data = await QueryGetAPI<ResponseUserIndexModel>(USER_INDEX_API_URL + 'get', { id: accountInfo.value.id });
+/**
+ * 解除B站用户黑名单
+ */
+function unblockBiliUser(id: number) {
+  DelBiliBlackList(id)
+    .then((data) => {
       if (data.code === 200) {
-        return data.data;
-      } else if (data.code !== 404) {
-        message?.error('无法获取数据: ' + data.message);
+        message.success(`[${id}] 已移除黑名单`)
+        if (accountInfo.value) {
+          delete accountInfo.value.biliBlackList[id]
+        }
+      } else {
+        message.error(data.message)
       }
-      return undefined;
-    } catch (err) {
-      message?.error('无法获取数据: ' + err);
-      return undefined;
-    } finally {
-      isLoading.value = false;
+    })
+    .catch((err) => {
+      message.error(err)
+    })
+}
+
+/**
+ * 解除普通用户黑名单
+ */
+function unblockUser(id: number) {
+  DelBlackList(id)
+    .then((data) => {
+      if (data.code === 200) {
+        message.success(`[${id}] 已移除黑名单`)
+        if (accountInfo.value) {
+          accountInfo.value.blackList = accountInfo.value.blackList.filter(u => u.id != id)
+        }
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      message.error(err)
+    })
+}
+
+/**
+ * 获取用户主页信息
+ */
+async function getIndexInfo() {
+  isLoading.value = true
+  try {
+    const data = await QueryGetAPI<ResponseUserIndexModel>(`${USER_INDEX_API_URL}get`, { id: accountInfo.value.id })
+    if (data.code === 200) {
+      return data.data
+    } else if (data.code !== 404) {
+      message?.error(`无法获取数据: ${data.message}`)
     }
+    return undefined
+  } catch (err) {
+    message?.error(`无法获取数据: ${err}`)
+    return undefined
+  } finally {
+    isLoading.value = false
   }
+}
 
-  /**
-   * 更新用户主页设置
-   */
-  async function updateUserIndexSettings() {
-    await SaveSetting('Index', accountInfo.value.settings.index);
-    message.success('已保存');
-  }
+/**
+ * 更新用户主页设置
+ */
+async function updateUserIndexSettings() {
+  await SaveSetting('Index', accountInfo.value.settings.index)
+  message.success('已保存')
+}
 
-  // 路由激活时的处理（useRouteQuery 已自动处理参数同步）
-  onActivated(() => {
-    // useRouteQuery 会自动同步，这里可以添加其他激活时的逻辑
-  });
+// 路由激活时的处理（useRouteQuery 已自动处理参数同步）
+onActivated(() => {
+  // useRouteQuery 会自动同步，这里可以添加其他激活时的逻辑
+})
 
-  // 组件挂载时初始化数据
-  onMounted(async () => {
-    await RequestBiliUserData();
-    indexDisplayInfo.value = await getIndexInfo();
-    // 设置默认值
-    accountInfo.value.settings.index.allowDisplayInIndex = accountInfo.value.settings.index.allowDisplayInIndex ?? true;
-  });
+// 组件挂载时初始化数据
+onMounted(async () => {
+  await RequestBiliUserData()
+  indexDisplayInfo.value = await getIndexInfo()
+  // 设置默认值
+  accountInfo.value.settings.index.allowDisplayInIndex = accountInfo.value.settings.index.allowDisplayInIndex ?? true
+})
 </script>
 
 <template>
@@ -824,7 +832,7 @@
             :key="linkKey"
           >
             <NFlex
-              v-for="name in (accountInfo.settings.index.linkOrder?.filter(n=>indexDisplayInfo?.links[n]) || Object.keys(indexDisplayInfo?.links||{}))"
+              v-for="name in (accountInfo.settings.index.linkOrder?.filter(n => indexDisplayInfo?.links[n]) || Object.keys(indexDisplayInfo?.links || {}))"
               :key="name"
               align="center"
             >
diff --git a/src/views/manage/SongListManageView.vue b/src/views/manage/SongListManageView.vue
index b2bdeef..cec391d 100644
--- a/src/views/manage/SongListManageView.vue
+++ b/src/views/manage/SongListManageView.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { copyToClipboard, objectsToCSV } from '@/Utils'
-import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
-import { FunctionTypes, SongFrom, SongLanguage, SongRequestOption, SongsInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import SongList from '@/components/SongList.vue'
-import { CN_HOST, CURRENT_HOST, FETCH_API, SONG_API_URL } from '@/data/constants'
+import type {
+  FormInst,
+  FormRules,
+  UploadFileInfo,
+} from 'naive-ui'
+import type { Option } from 'naive-ui/es/transfer/src/interface'
+import type { SongRequestOption, SongsInfo } from '@/api/api-models'
 import { Info24Filled } from '@vicons/fluent'
 import { ArchiveOutline } from '@vicons/ionicons5'
 import { useStorage } from '@vueuse/core'
@@ -13,8 +14,6 @@ import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
 import { List } from 'linqts'
 import {
-  FormInst,
-  FormRules,
   NAlert,
   NButton,
   NCheckbox,
@@ -37,8 +36,8 @@ import {
   NSpace,
   NSpin,
   NSwitch,
-  NTabPane,
   NTable,
+  NTabPane,
   NTabs,
   NTag,
   NText,
@@ -46,12 +45,16 @@ import {
   NTransfer,
   NUpload,
   NUploadDragger,
-  UploadFileInfo,
   useMessage,
 } from 'naive-ui'
-import { Option } from 'naive-ui/es/transfer/src/interface'
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import * as XLSX from 'xlsx'
+import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
+import { FunctionTypes, SongFrom } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import SongList from '@/components/SongList.vue'
+import { CURRENT_HOST, FETCH_API, SONG_API_URL } from '@/data/constants'
+import { copyToClipboard, objectsToCSV } from '@/Utils'
 
 const message = useMessage()
 const accountInfo = useAccount()
@@ -71,7 +74,7 @@ const columnMappings = useStorage('song-list-column-mappings', {
   description: '描述,备注,说明,description,note,remark',
   url: '链接,地址,url,link',
   language: '语言,language',
-  tags: '标签,类别,分类,tag,tags,category'
+  tags: '标签,类别,分类,tag,tags,category',
 })
 
 // 歌曲列表数据
@@ -130,19 +133,19 @@ const neteaseSongListId = computed(() => {
 // 从歌曲列表中提取所有作者
 const authors = computed(() => {
   return new List(songs.value)
-    .SelectMany((s) => new List(s?.author || []))
+    .SelectMany(s => new List(s?.author || []))
     .Distinct()
     .ToArray()
-    .map((t) => ({ label: t, value: t }))
+    .map(t => ({ label: t, value: t }))
 })
 
 // 从歌曲列表中提取所有标签
 const tags = computed(() => {
   return new List(songs.value)
-    .SelectMany((s) => new List(s?.tags || []))
+    .SelectMany(s => new List(s?.tags || []))
     .Distinct()
     .ToArray()
-    .map((t) => ({ label: t, value: t }))
+    .map(t => ({ label: t, value: t }))
 })
 
 // 语言选项列表
@@ -158,21 +161,21 @@ const songSelectOption = [
 
 // 从已有歌曲中提取所有语言
 const languageSelectOption = computed(() => {
-  const languages = new Set<string>(songSelectOption.map((s) => s.label))
+  const languages = new Set<string>(songSelectOption.map(s => s.label))
   songs.value.forEach((s) => {
     if (s.language) {
-      s.language.forEach((l) => languages.add(l))
+      s.language.forEach(l => languages.add(l))
     }
   })
-  return [...languages].map((t) => ({ label: t, value: t }))
+  return [...languages].map(t => ({ label: t, value: t }))
 })
 
 // 从上传文件中读取的歌曲列表选项
 const uploadSongsOptions = computed(() => {
-  return uploadSongsFromFile.value.map((s) => ({
+  return uploadSongsFromFile.value.map(s => ({
     label: `${s.name} - ${!s.author ? '未知' : s.author.join('/')}`,
     value: s.name,
-    disabled: songs.value.findIndex((exist) => exist.name == s.name) > -1,
+    disabled: songs.value.findIndex(exist => exist.name == s.name) > -1,
   }))
 })
 
@@ -183,7 +186,7 @@ const selecteduploadSongs = ref<string[]>([])
  */
 async function addCustomSong() {
   // 检查歌曲名称是否已存在
-  if (songs.value.findIndex((s) => s.name == addSongModel.value.name) > -1) {
+  if (songs.value.findIndex(s => s.name == addSongModel.value.name) > -1) {
     message.error('已存在相同名称的歌曲')
     return
   }
@@ -196,14 +199,14 @@ async function addCustomSong() {
         .then((data) => {
           if (data.code == 200) {
             if (data.data.length == 1) {
-              message.success('成功添加歌曲: ' + addSongModel.value.name)
+              message.success(`成功添加歌曲: ${addSongModel.value.name}`)
               songs.value.push(data.data[0])
               resetAddingSong(onlyResetNameOnAdded.value)
             } else {
               message.error('未能添加歌曲, 已存在相同名称的曲目')
             }
           } else {
-            message.error('添加失败: ' + data.message)
+            message.error(`添加失败: ${data.message}`)
           }
         })
         .catch((err) => {
@@ -220,7 +223,7 @@ async function addCustomSong() {
  */
 async function addNeteaseSongs() {
   isModalLoading.value = true
-  const selected = neteaseSongs.value.filter((s) => selectedNeteaseSongs.value.find((select) => s.key == select))
+  const selected = neteaseSongs.value.filter(s => selectedNeteaseSongs.value.find(select => s.key == select))
 
   await addSongs(selected, SongFrom.Netease)
     .then((data) => {
@@ -230,7 +233,7 @@ async function addNeteaseSongs() {
         // 更新选项禁用状态
         updateNeteaseSongsOptions(data.data)
       } else {
-        message.error('添加失败: ' + data.message)
+        message.error(`添加失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -245,12 +248,12 @@ async function addNeteaseSongs() {
  * 更新网易云歌曲选项的禁用状态
  */
 function updateNeteaseSongsOptions(newlyAddedSongs: SongsInfo[] = []) {
-  neteaseSongsOptions.value = neteaseSongs.value.map((s) => ({
+  neteaseSongsOptions.value = neteaseSongs.value.map(s => ({
     label: `${s.name} - ${s.author.join('/')}`,
     value: s.key,
     disabled:
-      songs.value.findIndex((exist) => exist.id == s.id) > -1 ||
-      newlyAddedSongs.findIndex((add) => add.id == s.id) > -1,
+      songs.value.findIndex(exist => exist.id == s.id) > -1
+      || newlyAddedSongs.findIndex(add => add.id == s.id) > -1,
   }))
 }
 
@@ -278,7 +281,7 @@ async function addFingsingSongs(song: SongsInfo) {
         addSongModel.value = {} as SongsInfo
         songs.value.push(...data.data)
       } else {
-        message.error('添加失败: ' + data.message)
+        message.error(`添加失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -300,8 +303,8 @@ async function addUploadFileSong() {
   }
 
   isModalLoading.value = true
-  const songsToAdd = uploadSongsFromFile.value.filter((s) =>
-    selecteduploadSongs.value.find((select) => s.name == select)
+  const songsToAdd = uploadSongsFromFile.value.filter(s =>
+    selecteduploadSongs.value.find(select => s.name == select),
   )
 
   await addSongs(songsToAdd, SongFrom.Custom)
@@ -310,11 +313,11 @@ async function addUploadFileSong() {
         message.success(`已添加 ${data.data.length} 首歌曲`)
         songs.value.push(...data.data)
       } else {
-        message.error('添加失败: ' + data.message)
+        message.error(`添加失败: ${data.message}`)
       }
     })
     .catch((err) => {
-      message.error('添加失败: ' + err)
+      message.error(`添加失败: ${err}`)
       console.error(err)
     })
     .finally(() => {
@@ -327,8 +330,8 @@ async function addUploadFileSong() {
  */
 async function addSongs(songsShoudAdd: SongsInfo[], from: SongFrom) {
   return QueryPostAPI<SongsInfo[]>(
-    SONG_API_URL + 'add',
-    songsShoudAdd.map((s) => ({
+    `${SONG_API_URL}add`,
+    songsShoudAdd.map(s => ({
       Name: s.name,
       Id: from == SongFrom.Custom ? -1 : s.id,
       From: from,
@@ -354,7 +357,7 @@ async function getNeteaseSongList() {
   }
 
   isModalLoading.value = true
-  await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get-netease-list', {
+  await QueryGetAPI<SongsInfo[]>(`${SONG_API_URL}get-netease-list`, {
     id: neteaseSongListId.value,
   })
     .then((data) => {
@@ -362,14 +365,14 @@ async function getNeteaseSongList() {
         neteaseSongs.value = data.data
         updateNeteaseSongsOptions()
         message.success(
-          `成功获取歌曲信息, 共 ${data.data.length} 条, 歌单中已存在 ${neteaseSongsOptions.value.filter((s) => s.disabled).length} 首`,
+          `成功获取歌曲信息, 共 ${data.data.length} 条, 歌单中已存在 ${neteaseSongsOptions.value.filter(s => s.disabled).length} 首`,
         )
       } else {
-        message.error('获取歌单失败: ' + data.message)
+        message.error(`获取歌单失败: ${data.message}`)
       }
     })
     .catch((err) => {
-      message.error('获取歌单失败: ' + err)
+      message.error(`获取歌单失败: ${err}`)
     })
     .finally(() => {
       isModalLoading.value = false
@@ -413,7 +416,7 @@ async function getFivesingSearchList(isRestart = false) {
       message.success(`成功获取搜索信息, 共 ${json.pageInfo.totalCount} 条, 当前第 ${fivesingCurrentPage.value} 页`)
     })
     .catch((err) => {
-      message.error('获取歌单失败: ' + err)
+      message.error(`获取歌单失败: ${err}`)
     })
     .finally(() => {
       isModalLoading.value = false
@@ -443,7 +446,7 @@ async function playFivesingSong(song: SongsInfo) {
       song.url = data
     })
     .catch((err) => {
-      message.error('获取歌曲链接失败: ' + err)
+      message.error(`获取歌曲链接失败: ${err}`)
     })
     .finally(() => {
       isGettingFivesingSongPlayUrl.value = 0
@@ -471,7 +474,7 @@ async function getFivesingSongUrl(song: SongsInfo): Promise<string> {
  */
 async function getSongs() {
   isLoading.value = true
-  await QueryGetAPI<any>(SONG_API_URL + 'get', {
+  await QueryGetAPI<any>(`${SONG_API_URL}get`, {
     id: accountInfo.value?.id,
   })
     .then((data) => {
@@ -480,7 +483,7 @@ async function getSongs() {
       }
     })
     .catch((err) => {
-      message.error('获取歌曲失败: ' + err)
+      message.error(`获取歌曲失败: ${err}`)
     })
     .finally(() => {
       isLoading.value = false
@@ -501,7 +504,7 @@ function exportData() {
   }
 
   // 构建CSV数据
-  const csvData = songs.value.map((s) => ({
+  const csvData = songs.value.map(s => ({
     id: s.id,
     名称: s.name,
     翻译名称: s.translateName,
@@ -518,7 +521,7 @@ function exportData() {
   const text = objectsToCSV(csvData)
 
   // 添加UTF-8 BOM以支持中文
-  const BOM = new Uint8Array([0xef, 0xbb, 0xbf])
+  const BOM = new Uint8Array([0xEF, 0xBB, 0xBF])
   const utf8encoder = new TextEncoder()
   const utf8array = utf8encoder.encode(text)
 
@@ -526,7 +529,7 @@ function exportData() {
   const fileName = `歌单_${format(Date.now(), 'yyyy-MM-dd HH:mm:ss')}_${accountInfo.value?.name}_.csv`
   saveAs(
     new Blob([BOM, utf8array], { type: 'text/csv;charset=utf-8;' }),
-    fileName
+    fileName,
   )
 }
 
@@ -564,82 +567,82 @@ function parseExcelFile() {
 
     // 解析每一行数据
     const parsedSongs = rows.map((row) => {
-      const song = {} as SongsInfo;
+      const song = {} as SongsInfo
 
       for (let i = 0; i < headers.length; i++) {
-        const headerFromFile = (headers[i] as string)?.toLowerCase().trim();
-        if (!headerFromFile) continue;
+        const headerFromFile = (headers[i] as string)?.toLowerCase().trim()
+        if (!headerFromFile) continue
 
-        const value = row[i];
+        const value = row[i]
 
         // 歌曲名称 (必填)
-        const nameHeaders = columnMappings.value.name.split(/,|，/).map(h => h.trim().toLowerCase());
+        const nameHeaders = columnMappings.value.name.split(/,|，/).map(h => h.trim().toLowerCase())
         if (nameHeaders.includes(headerFromFile)) {
-          if (value) song.name = value;
+          if (value) song.name = value
           // 注意：即使找到歌名，也不立即continue，因为一个列可能对应多个信息（虽然不推荐）
           // 但标准做法是每个信息有独立列
         }
 
         // 翻译名称
         if (columnMappings.value.translateName) {
-          const translateNameHeaders = columnMappings.value.translateName.split(/,|，/).map(h => h.trim().toLowerCase());
+          const translateNameHeaders = columnMappings.value.translateName.split(/,|，/).map(h => h.trim().toLowerCase())
           if (translateNameHeaders.includes(headerFromFile)) {
-            if (value) song.translateName = value;
+            if (value) song.translateName = value
           }
         }
 
         // 作者
         if (columnMappings.value.author) {
-          const authorHeaders = columnMappings.value.author.split(/,|，/).map(h => h.trim().toLowerCase());
+          const authorHeaders = columnMappings.value.author.split(/,|，/).map(h => h.trim().toLowerCase())
           if (authorHeaders.includes(headerFromFile)) {
-            if (value) song.author = parseMultipleValues(value as string);
+            if (value) song.author = parseMultipleValues(value as string)
           }
         }
 
         // 描述
         if (columnMappings.value.description) {
-          const descriptionHeaders = columnMappings.value.description.split(/,|，/).map(h => h.trim().toLowerCase());
+          const descriptionHeaders = columnMappings.value.description.split(/,|，/).map(h => h.trim().toLowerCase())
           if (descriptionHeaders.includes(headerFromFile)) {
-            song.description = value;
+            song.description = value
           }
         }
 
         // 链接
         if (columnMappings.value.url) {
-          const urlHeaders = columnMappings.value.url.split(/,|，/).map(h => h.trim().toLowerCase());
+          const urlHeaders = columnMappings.value.url.split(/,|，/).map(h => h.trim().toLowerCase())
           if (urlHeaders.includes(headerFromFile)) {
-            song.url = value;
+            song.url = value
           }
         }
 
         // 语言
         if (columnMappings.value.language) {
-          const languageHeaders = columnMappings.value.language.split(/,|，/).map(h => h.trim().toLowerCase());
+          const languageHeaders = columnMappings.value.language.split(/,|，/).map(h => h.trim().toLowerCase())
           if (languageHeaders.includes(headerFromFile)) {
-            if (value) song.language = parseMultipleValues(value as string);
+            if (value) song.language = parseMultipleValues(value as string)
           }
         }
 
         // 标签
         if (columnMappings.value.tags) {
-          const tagsHeaders = columnMappings.value.tags.split(/,|，/).map(h => h.trim().toLowerCase());
+          const tagsHeaders = columnMappings.value.tags.split(/,|，/).map(h => h.trim().toLowerCase())
           if (tagsHeaders.includes(headerFromFile)) {
-            if (value) song.tags = parseMultipleValues(value as string);
+            if (value) song.tags = parseMultipleValues(value as string)
           }
         }
       }
 
       // 如果没有解析到歌名，则这条记录无效
       if (!song.name) {
-        console.log('忽略无效记录（未找到歌名或歌名为空）: ' + row.join(','));
-        return null;
+        console.log(`忽略无效记录（未找到歌名或歌名为空）: ${row.join(',')}`)
+        return null
       }
 
-      return song;
-    }).filter(s => s !== null) as SongsInfo[];
+      return song
+    }).filter(s => s !== null) as SongsInfo[]
 
-    uploadSongsFromFile.value = parsedSongs;
-    message.success('解析完成, 共获取 ' + uploadSongsFromFile.value.length + ' 首曲目')
+    uploadSongsFromFile.value = parsedSongs
+    message.success(`解析完成, 共获取 ${uploadSongsFromFile.value.length} 首曲目`)
   }
 }
 
@@ -658,14 +661,14 @@ function parseMultipleValues(value: string): string[] {
     .split(/\/|,/)
     .map((a: string) => a.trim())
     .filter((value: string, index: number, self: string[]) =>
-      value && self.indexOf(value) === index
+      value && self.indexOf(value) === index,
     )
 }
 
 /**
  * 上传前验证文件类型
  */
-function beforeUpload(data: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
+function beforeUpload(data: { file: UploadFileInfo, fileList: UploadFileInfo[] }) {
   const validExtensions = ['.xlsx', '.xls', '.csv']
   const isValid = validExtensions.some(ext => data.file.name.endsWith(ext))
 
@@ -690,9 +693,9 @@ async function setFunctionEnable(enable: boolean) {
   }
 
   if (success) {
-    message.success('已' + (enable ? '启用' : '禁用'))
+    message.success(`已${enable ? '启用' : '禁用'}`)
   } else {
-    message.error('无法' + (enable ? '启用' : '禁用'))
+    message.error(`无法${enable ? '启用' : '禁用'}`)
   }
 }
 
@@ -722,7 +725,7 @@ function resetColumnMappings() {
     description: '描述,备注,说明,description,note,remark',
     url: '链接,地址,url,link',
     language: '语言,language',
-    tags: '标签,类别,分类,tag,tags,category'
+    tags: '标签,类别,分类,tag,tags,category',
   }
   message.success('已重置为默认映射')
 }
diff --git a/src/views/manage/ToolsDashboardView.vue b/src/views/manage/ToolsDashboardView.vue
index 6c15d08..27188a3 100644
--- a/src/views/manage/ToolsDashboardView.vue
+++ b/src/views/manage/ToolsDashboardView.vue
@@ -1,45 +1,17 @@
-<template>
-  <n-layout class="tools-dashboard">
-    <n-layout-header bordered class="header">
-      <n-h1 style="margin: 0; padding: 16px;">直播工具箱</n-h1>
-    </n-layout-header>
-    <n-layout-content style="padding: 24px;">
-      <n-grid cols="1 s:2 m:3 l:4 xl:4 xxl:5" responsive="screen" :x-gap="16" :y-gap="16">
-        <n-grid-item v-for="tool in availableTools" :key="tool.name">
-          <n-card :title="tool.displayName" hoverable @click="navigateToTool(tool.routeName)">
-            <template #cover v-if="tool.icon">
-              <!-- Placeholder for an icon or image -->
-              <div style="font-size: 48px; text-align: center; padding: 20px 0;">
-                <n-icon :component="tool.icon" />
-              </div>
-            </template>
-            {{ tool.description }}
-             <template #action>
-              <n-button type="primary" block @click.stop="navigateToTool(tool.routeName)">
-                打开工具
-              </n-button>
-            </template>
-          </n-card>
-        </n-grid-item>
-      </n-grid>
-    </n-layout-content>
-  </n-layout>
-</template>
-
 <script setup lang="ts">
-import { shallowRef } from 'vue';
-import { useRouter } from 'vue-router';
-import { NLayout, NLayoutHeader, NLayoutContent, NGrid, NGridItem, NCard, NH1, NIcon, NButton } from 'naive-ui';
-import { ImagesOutline as NineGridIcon } from '@vicons/ionicons5'; // Example Icon
+import { ImagesOutline as NineGridIcon } from '@vicons/ionicons5' // Example Icon
+import { NButton, NCard, NGrid, NGridItem, NH1, NIcon, NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
+import { shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
 
-const router = useRouter();
+const router = useRouter()
 
 interface ToolDefinition {
-  name: string;
-  displayName: string;
-  description: string;
-  routeName: string;
-  icon?: any; // Using 'any' for icon component type for simplicity
+  name: string
+  displayName: string
+  description: string
+  routeName: string
+  icon?: any // Using 'any' for icon component type for simplicity
 }
 
 const availableTools = shallowRef<ToolDefinition[]>([
@@ -58,13 +30,43 @@ const availableTools = shallowRef<ToolDefinition[]>([
   //   routeName: 'ManageToolAnotherTool',
   //   icon: AnotherIconComponent,
   // },
-]);
+])
 
-const navigateToTool = (routeName: string) => {
-  router.push({ name: routeName });
-};
+function navigateToTool(routeName: string) {
+  router.push({ name: routeName })
+}
 </script>
 
+<template>
+  <NLayout class="tools-dashboard">
+    <NLayoutHeader bordered class="header">
+      <NH1 style="margin: 0; padding: 16px;">
+        直播工具箱
+      </NH1>
+    </NLayoutHeader>
+    <NLayoutContent style="padding: 24px;">
+      <NGrid cols="1 s:2 m:3 l:4 xl:4 xxl:5" responsive="screen" :x-gap="16" :y-gap="16">
+        <NGridItem v-for="tool in availableTools" :key="tool.name">
+          <NCard :title="tool.displayName" hoverable @click="navigateToTool(tool.routeName)">
+            <template v-if="tool.icon" #cover>
+              <!-- Placeholder for an icon or image -->
+              <div style="font-size: 48px; text-align: center; padding: 20px 0;">
+                <NIcon :component="tool.icon" />
+              </div>
+            </template>
+            {{ tool.description }}
+            <template #action>
+              <NButton type="primary" block @click.stop="navigateToTool(tool.routeName)">
+                打开工具
+              </NButton>
+            </template>
+          </NCard>
+        </NGridItem>
+      </NGrid>
+    </NLayoutContent>
+  </NLayout>
+</template>
+
 <style scoped>
 .tools-dashboard {
   min-height: calc(100vh - 64px); /* Adjust based on your header/footer height */
diff --git a/src/views/manage/ToolsManageView.vue b/src/views/manage/ToolsManageView.vue
index 621bfe5..2784f00 100644
--- a/src/views/manage/ToolsManageView.vue
+++ b/src/views/manage/ToolsManageView.vue
@@ -1,25 +1,25 @@
-<template>
-  <div class="tools-manage-view p-4">
-    <n-h1>直播工具箱</n-h1>
-    <n-tabs type="line" animated>
-      <n-tab-pane name="nine-grid" tab="动态九宫格生成器">
-        <ToolDynamicNineGrid />
-      </n-tab-pane>
-      <!-- 更多工具可以在这里添加 -->
-    </n-tabs>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { NH1, NTabs, NTabPane } from 'naive-ui'
+import { NH1, NTabPane, NTabs } from 'naive-ui'
 import ToolDynamicNineGrid from '@/components/manage/tools/ToolDynamicNineGrid.vue'
 
 // 后续可能需要的逻辑
 </script>
 
+<template>
+  <div class="tools-manage-view p-4">
+    <NH1>直播工具箱</NH1>
+    <NTabs type="line" animated>
+      <NTabPane name="nine-grid" tab="动态九宫格生成器">
+        <ToolDynamicNineGrid />
+      </NTabPane>
+      <!-- 更多工具可以在这里添加 -->
+    </NTabs>
+  </div>
+</template>
+
 <style scoped>
 .tools-manage-view {
   max-width: 1200px;
   margin: 0 auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/manage/VideoCollectDetailView.vue b/src/views/manage/VideoCollectDetailView.vue
index e059f43..5ee6eff 100644
--- a/src/views/manage/VideoCollectDetailView.vue
+++ b/src/views/manage/VideoCollectDetailView.vue
@@ -1,22 +1,19 @@
 <script setup lang="ts">
-import { downloadImage } from '@/Utils'
-import {
+import type {
+  FormRules,
+} from 'naive-ui'
+import type { VNode } from 'vue'
+import type {
   VideoCollectCreateModel,
   VideoCollectDetail,
   VideoCollectTable,
   VideoCollectVideo,
   VideoInfo,
-  VideoStatus,
 } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
-import { CURRENT_HOST, VIDEO_COLLECT_API_URL } from '@/data/constants'
-import router from '@/router'
 import { Clock24Filled, Person24Filled } from '@vicons/fluent'
 import { useWindowSize } from '@vueuse/core'
 import { List } from 'linqts'
 import {
-  FormRules,
   NButton,
   NCard,
   NDatePicker,
@@ -40,8 +37,16 @@ import {
   useMessage,
 } from 'naive-ui'
 import Qrcode from 'qrcode.vue'
-import { VNode, computed, h, onActivated, ref } from 'vue'
+import { computed, h, onActivated, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import {
+  VideoStatus,
+} from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
+import { CURRENT_HOST, VIDEO_COLLECT_API_URL } from '@/data/constants'
+import router from '@/router'
+import { downloadImage } from '@/Utils'
 
 const route = useRoute()
 const message = useMessage()
@@ -101,18 +106,18 @@ const createRules: FormRules = {
 }
 
 const paddingVideos = computed(() => {
-  return videoDetail.value?.videos?.filter((v) => v.info.status == VideoStatus.Pending) ?? []
+  return videoDetail.value?.videos?.filter(v => v.info.status == VideoStatus.Pending) ?? []
 })
 const rejectVideos = computed(() => {
-  return videoDetail.value?.videos?.filter((v) => v.info.status == VideoStatus.Rejected) ?? []
+  return videoDetail.value?.videos?.filter(v => v.info.status == VideoStatus.Rejected) ?? []
 })
 const acceptVideos = computed(() => {
-  return videoDetail.value?.videos?.filter((v) => v.info.status == VideoStatus.Accepted) ?? []
+  return videoDetail.value?.videos?.filter(v => v.info.status == VideoStatus.Accepted) ?? []
 })
 
 async function getData() {
   try {
-    const data = await QueryGetAPI<VideoCollectDetail>(VIDEO_COLLECT_API_URL + 'get', { id: route.params.id })
+    const data = await QueryGetAPI<VideoCollectDetail>(`${VIDEO_COLLECT_API_URL}get`, { id: route.params.id })
     if (data.code == 200) {
       updateModel.value = {
         id: data.data.table.id,
@@ -128,9 +133,9 @@ async function getData() {
   }
   return {} as VideoCollectDetail
 }
-const gridRender = (type: 'padding' | 'reject' | 'accept') => {
+function gridRender(type: 'padding' | 'reject' | 'accept') {
   let footer: (arg0: VideoInfo) => VNode
-  let videos: { info: VideoInfo; video: VideoCollectVideo }[]
+  let videos: { info: VideoInfo, video: VideoCollectVideo }[]
   switch (type) {
     case 'padding':
       footer = paddingButtonGroup
@@ -148,77 +153,73 @@ const gridRender = (type: 'padding' | 'reject' | 'accept') => {
   return videos.length == 0
     ? h(NEmpty)
     : h(NGrid, { cols: '1 500:2 700:3 900:4 1200:5  ', xGap: '12', yGap: '12', responsive: 'self' }, () =>
-      videos?.map((v) =>
-        h(NGridItem, () =>
-          h(
-            NCard,
-            { style: 'height: 330px;', embedded: true, size: 'small' },
-            {
-              cover: () =>
-                h('div', { style: 'position: relative;height: 150px;' }, [
-                  h('img', {
-                    src: v.video.cover.replace('http://', 'https://'),
-                    referrerpolicy: 'no-referrer',
-                    style: 'max-height: 100%; object-fit: contain;cursor: pointer',
-                    onClick: () => window.open('https://www.bilibili.com/video/' + v.info.bvid, '_blank'),
-                  }),
-                  h(
-                    NSpace,
-                    {
-                      style: { position: 'relative', bottom: '20px', background: '#00000073' },
-                      justify: 'space-around',
-                    },
-                    () => [
-                      h('span', [
-                        h(NIcon, { component: Clock24Filled, color: 'lightgrey' }),
-                        h(NText, { style: 'color: lightgrey;size:small;' }, () => formatSeconds(v.video.length)),
-                      ]),
-                      h('span', [
-                        h(NIcon, { component: Person24Filled, color: 'lightgrey' }),
-                        h(NText, { style: 'color: lightgrey;size:small;' }, () => v.video.ownerName),
-                      ]),
-                    ],
-                  ),
-                ]),
-              header: () =>
-                h(
-                  NButton,
-                  {
-                    style: 'width: 100%;',
-                    text: true,
-                    onClick: () => window.open('https://www.bilibili.com/video/' + v.info.bvid, '_blank'),
-                  },
-                  () =>
+        videos?.map(v =>
+          h(NGridItem, () =>
+            h(
+              NCard,
+              { style: 'height: 330px;', embedded: true, size: 'small' },
+              {
+                cover: () =>
+                  h('div', { style: 'position: relative;height: 150px;' }, [
+                    h('img', {
+                      src: v.video.cover.replace('http://', 'https://'),
+                      referrerpolicy: 'no-referrer',
+                      style: 'max-height: 100%; object-fit: contain;cursor: pointer',
+                      onClick: () => window.open(`https://www.bilibili.com/video/${v.info.bvid}`, '_blank'),
+                    }),
                     h(
-                      NEllipsis,
-                      { style: 'max-width: 100%;' },
+                      NSpace,
                       {
-                        default: () => v.video.title,
-                        tooltip: () => h('div', { style: 'max-width: 300px' }, v.video.title),
+                        style: { position: 'relative', bottom: '20px', background: '#00000073' },
+                        justify: 'space-around',
                       },
+                      () => [
+                        h('span', [
+                          h(NIcon, { component: Clock24Filled, color: 'lightgrey' }),
+                          h(NText, { style: 'color: lightgrey;size:small;' }, () => formatSeconds(v.video.length)),
+                        ]),
+                        h('span', [
+                          h(NIcon, { component: Person24Filled, color: 'lightgrey' }),
+                          h(NText, { style: 'color: lightgrey;size:small;' }, () => v.video.ownerName),
+                        ]),
+                      ],
                     ),
-                ),
-              default: () =>
-                h(NScrollbar, { style: 'height: 65px;' }, () =>
-                  h(NCard, { contentStyle: 'padding: 5px;' }, () =>
-                    v.info.senders.map((s) => [
-                      h('div', { style: 'font-size: 12px;' }, [
-                        h('div', `推荐人: ${s.sender ?? '未填写'} [${s.senderId ?? '未填写'}]`),
-                        h('div', `推荐理由: ${s.description ?? '未填写'}`),
-                      ]),
-                      h(NSpace, { style: 'margin: 0;' }),
-                    ]),
+                  ]),
+                header: () =>
+                  h(
+                    NButton,
+                    {
+                      style: 'width: 100%;',
+                      text: true,
+                      onClick: () => window.open(`https://www.bilibili.com/video/${v.info.bvid}`, '_blank'),
+                    },
+                    () =>
+                      h(
+                        NEllipsis,
+                        { style: 'max-width: 100%;' },
+                        {
+                          default: () => v.video.title,
+                          tooltip: () => h('div', { style: 'max-width: 300px' }, v.video.title),
+                        },
+                      ),
                   ),
-                ),
-              footer: () => footer(v.info),
-            },
-          ),
-        ),
-      ),
-    )
+                default: () =>
+                  h(NScrollbar, { style: 'height: 65px;' }, () =>
+                    h(NCard, { contentStyle: 'padding: 5px;' }, () =>
+                      v.info.senders.map(s => [
+                        h('div', { style: 'font-size: 12px;' }, [
+                          h('div', `推荐人: ${s.sender ?? '未填写'} [${s.senderId ?? '未填写'}]`),
+                          h('div', `推荐理由: ${s.description ?? '未填写'}`),
+                        ]),
+                        h(NSpace, { style: 'margin: 0;' }),
+                      ]))),
+                footer: () => footer(v.info),
+              },
+            )),
+        ))
 }
-const paddingButtonGroup = (v: VideoInfo) =>
-  h(NSpace, { size: 'small', justify: 'space-around' }, () => [
+function paddingButtonGroup(v: VideoInfo) {
+  return h(NSpace, { size: 'small', justify: 'space-around' }, () => [
     h(
       NButton,
       { type: 'success', loading: isLoading.value, onClick: () => setStatus(VideoStatus.Accepted, v) },
@@ -230,8 +231,9 @@ const paddingButtonGroup = (v: VideoInfo) =>
       () => '拒绝',
     ),
   ])
-const acceptButtonGroup = (v: VideoInfo) =>
-  h(NSpace, { size: 'small', justify: 'space-around' }, () => [
+}
+function acceptButtonGroup(v: VideoInfo) {
+  return h(NSpace, { size: 'small', justify: 'space-around' }, () => [
     h(
       NButton,
       { type: 'info', loading: isLoading.value, onClick: () => setStatus(VideoStatus.Pending, v) },
@@ -243,8 +245,9 @@ const acceptButtonGroup = (v: VideoInfo) =>
       () => '拒绝',
     ),
   ])
-const rejectButtonGroup = (v: VideoInfo) =>
-  h(NSpace, { size: 'small', justify: 'space-around' }, () => [
+}
+function rejectButtonGroup(v: VideoInfo) {
+  return h(NSpace, { size: 'small', justify: 'space-around' }, () => [
     h(
       NButton,
       { type: 'success', loading: isLoading.value, onClick: () => setStatus(VideoStatus.Accepted, v) },
@@ -256,19 +259,20 @@ const rejectButtonGroup = (v: VideoInfo) =>
       () => '重设为未审核',
     ),
   ])
+}
 function setStatus(status: VideoStatus, video: VideoInfo) {
   isLoading.value = true
-  QueryGetAPI(VIDEO_COLLECT_API_URL + 'set-status', {
+  QueryGetAPI(`${VIDEO_COLLECT_API_URL}set-status`, {
     id: videoDetail.value.table.id,
     bvid: video.bvid,
-    status: status,
+    status,
   })
     .then((data) => {
       if (data.code == 200) {
         video.status = status
         message.success('设置成功')
       } else {
-        message.error('设置失败: ' + data.message)
+        message.error(`设置失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -293,13 +297,13 @@ function dateDisabled(ts: number) {
 function updateTable() {
   isLoading.value = true
   updateModel.value.id = videoDetail.value.table.id
-  QueryPostAPI<VideoCollectTable>(VIDEO_COLLECT_API_URL + 'update', updateModel.value)
+  QueryPostAPI<VideoCollectTable>(`${VIDEO_COLLECT_API_URL}update`, updateModel.value)
     .then((data) => {
       if (data.code == 200) {
         message.success('更新成功')
         videoDetail.value.table = data.data
       } else {
-        message.error('更新失败: ' + data.message)
+        message.error(`更新失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -311,7 +315,7 @@ function updateTable() {
 }
 function deleteTable() {
   isLoading.value = true
-  QueryGetAPI(VIDEO_COLLECT_API_URL + 'del', {
+  QueryGetAPI(`${VIDEO_COLLECT_API_URL}del`, {
     id: videoDetail.value.table.id,
   })
     .then((data) => {
@@ -321,7 +325,7 @@ function deleteTable() {
           router.push({ name: 'manage-videoCollect' })
         }, 1000)
       } else {
-        message.error('删除失败: ' + data.message)
+        message.error(`删除失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -333,16 +337,16 @@ function deleteTable() {
 }
 function closeTable() {
   isLoading.value = true
-  QueryGetAPI(VIDEO_COLLECT_API_URL + 'finish', {
+  QueryGetAPI(`${VIDEO_COLLECT_API_URL}finish`, {
     id: videoDetail.value.table.id,
     finish: !videoDetail.value.table.isFinish,
   })
     .then((data) => {
       if (data.code == 200) {
-        message.success('已' + (videoDetail.value.table.isFinish ? '开启表' : '关闭表'))
+        message.success(`已${videoDetail.value.table.isFinish ? '开启表' : '关闭表'}`)
         videoDetail.value.table.isFinish = !videoDetail.value.table.isFinish
       } else {
-        message.error('操作失败: ' + data.message)
+        message.error(`操作失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -354,7 +358,7 @@ function closeTable() {
 }
 function saveQRCode() {
   downloadImage(
-    `https://api.qrserver.com/v1/create-qr-code/?data=${'https://vtsuru.live/video-collect/' + videoDetail.value.table.shortId}`,
+    `https://api.qrserver.com/v1/create-qr-code/?data=${`https://vtsuru.live/video-collect/${videoDetail.value.table.shortId}`}`,
     `vtsuru-视频征集二维码-${videoDetail.value.table.name}.png`,
   )
 }
@@ -365,6 +369,7 @@ onActivated(async () => {
   }
 })
 </script>
+
 <template>
   <NSpace>
     <NButton
@@ -529,13 +534,13 @@ onActivated(async () => {
     style="width: 600px; max-width: 90vw"
   >
     <Qrcode
-      :value="`${CURRENT_HOST}video-collect/` + videoDetail.table.shortId"
+      :value="`${CURRENT_HOST}video-collect/${videoDetail.table.shortId}`"
       level="Q"
       :size="100"
       background="#fff"
       :margin="1"
     />
-    <NInput :value="`${CURRENT_HOST}video-collect/` + videoDetail.table.shortId" />
+    <NInput :value="`${CURRENT_HOST}video-collect/${videoDetail.table.shortId}`" />
     <NDivider />
     <NSpace justify="center">
       <NButton
diff --git a/src/views/manage/VideoCollectManageView.vue b/src/views/manage/VideoCollectManageView.vue
index 025e34b..e9ecc6d 100644
--- a/src/views/manage/VideoCollectManageView.vue
+++ b/src/views/manage/VideoCollectManageView.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { UpdateFunctionEnable, useAccount } from '@/api/account'
-import { FunctionTypes, VideoCollectTable } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
-import { VIDEO_COLLECT_API_URL } from '@/data/constants'
-import {
+import type {
   FormRules,
+} from 'naive-ui'
+import type { VideoCollectTable } from '@/api/api-models'
+import {
   NAlert,
   NButton,
   NDatePicker,
@@ -25,6 +23,11 @@ import {
   useMessage,
 } from 'naive-ui'
 import { ref } from 'vue'
+import { UpdateFunctionEnable, useAccount } from '@/api/account'
+import { FunctionTypes } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
+import { VIDEO_COLLECT_API_URL } from '@/data/constants'
 
 const accountInfo = useAccount()
 const message = useMessage()
@@ -87,12 +90,12 @@ const isLoading2 = ref(false)
 async function get() {
   try {
     isLoading.value = true
-    const data = await QueryGetAPI<VideoCollectTable[]>(VIDEO_COLLECT_API_URL + 'get-all')
+    const data = await QueryGetAPI<VideoCollectTable[]>(`${VIDEO_COLLECT_API_URL}get-all`)
     if (data.code == 200) {
-      //videoTables.value = data.data
+      // videoTables.value = data.data
       return data.data
     } else {
-      message.error('获取失败: ' + data.message)
+      message.error(`获取失败: ${data.message}`)
       return []
     }
   } catch (err) {
@@ -105,7 +108,7 @@ async function get() {
 function createTable() {
   formRef.value?.validate().then(async () => {
     isLoading2.value = true
-    QueryPostAPI<VideoCollectTable>(VIDEO_COLLECT_API_URL + 'create', createVideoModel.value)
+    QueryPostAPI<VideoCollectTable>(`${VIDEO_COLLECT_API_URL}create`, createVideoModel.value)
       .then((data) => {
         if (data.code == 200) {
           videoTables.value.push(data.data)
@@ -113,7 +116,7 @@ function createTable() {
           message.success('创建成功')
           createVideoModel.value = JSON.parse(JSON.stringify(defaultModel))
         } else {
-          message.error('创建失败: ' + data.message)
+          message.error(`创建失败: ${data.message}`)
         }
       })
       .catch((err) => {
diff --git a/src/views/manage/point/PointManage.vue b/src/views/manage/point/PointManage.vue
index 8a9d37f..2104052 100644
--- a/src/views/manage/point/PointManage.vue
+++ b/src/views/manage/point/PointManage.vue
@@ -1,87 +1,92 @@
 <script setup lang="ts">
-  import { copyToClipboard } from '@/Utils';
-  import { DisableFunction, EnableFunction, useAccount } from '@/api/account';
-  import {
-    FunctionTypes,
-    GoodsStatus,
-    GoodsTypes,
-    KeySelectionMode,
-    ResponsePointGoodModel,
-    UploadPointGoodsModel,
-    UserFileLocation
-  } from '@/api/api-models';
-  import { QueryGetAPI, QueryPostAPI } from '@/api/query';
-  import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue';
-  import PointGoodsItem from '@/components/manage/PointGoodsItem.vue';
-  import { CURRENT_HOST, POINT_API_URL } from '@/data/constants';
-  import { uploadFiles, UploadStage } from '@/data/fileUpload';
-  import { useBiliAuth } from '@/store/useBiliAuth';
-  import { Info24Filled } from '@vicons/fluent';
-  import { useRouteHash } from '@vueuse/router';
-  import {
-    FormItemRule,
-    NAlert,
-    NButton,
-    NCheckbox,
-    NDivider,
-    NDynamicTags,
-    NEmpty,
-    NFlex,
-    NForm,
-    NFormItem,
-    NGrid,
-    NGridItem,
-    NIcon,
-    NInput,
-    NInputGroup,
-    NInputNumber,
-    NModal,
-    NPopconfirm,
-    NProgress,
-    NRadioButton,
-    NRadioGroup,
-    NScrollbar,
-    NSelect,
-    NSwitch,
-    NTabPane,
-    NTabs,
-    NText,
-    NTooltip,
-    NUpload,
-    UploadFileInfo,
-    useDialog,
-    useMessage
-  } from 'naive-ui';
-  import { computed, onMounted, ref, watch } from 'vue';
-  import PointOrderManage from './PointOrderManage.vue';
-  import PointSettings from './PointSettings.vue';
-  import PointUserManage from './PointUserManage.vue';
+import type {
+  FormItemRule,
+  UploadFileInfo,
+} from 'naive-ui'
+import type {
+  ResponsePointGoodModel,
+  UploadPointGoodsModel,
+} from '@/api/api-models'
+import { Info24Filled } from '@vicons/fluent'
+import { useRouteHash } from '@vueuse/router'
+import {
+  NAlert,
+  NButton,
+  NCheckbox,
+  NDivider,
+  NDynamicTags,
+  NEmpty,
+  NFlex,
+  NForm,
+  NFormItem,
+  NGrid,
+  NGridItem,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputNumber,
+  NModal,
+  NPopconfirm,
+  NProgress,
+  NRadioButton,
+  NRadioGroup,
+  NScrollbar,
+  NSelect,
+  NSwitch,
+  NTabPane,
+  NTabs,
+  NText,
+  NTooltip,
+  NUpload,
+  useDialog,
+  useMessage,
+} from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
+import {
+  FunctionTypes,
+  GoodsStatus,
+  GoodsTypes,
+  KeySelectionMode,
+  UserFileLocation,
+} from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
+import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
+import { CURRENT_HOST, POINT_API_URL } from '@/data/constants'
+import { uploadFiles, UploadStage } from '@/data/fileUpload'
+import { useBiliAuth } from '@/store/useBiliAuth'
+import { copyToClipboard } from '@/Utils'
+import PointOrderManage from './PointOrderManage.vue'
+import PointSettings from './PointSettings.vue'
+import PointUserManage from './PointUserManage.vue'
 
-  const message = useMessage();
-  const accountInfo = useAccount();
-  const dialog = useDialog();
-  const biliAuth = useBiliAuth();
-  const formRef = ref();
-  const isUpdating = ref(false);
-  const isAllowedPrivacyPolicy = ref(false);
-  const showAddGoodsModal = ref(false);
-  const uploadProgress = ref(0);
-  const isUploadingCover = ref(false);
+const message = useMessage()
+const accountInfo = useAccount()
+const dialog = useDialog()
+const biliAuth = useBiliAuth()
+const formRef = ref()
+const isUpdating = ref(false)
+const isAllowedPrivacyPolicy = ref(false)
+const showAddGoodsModal = ref(false)
+const uploadProgress = ref(0)
+const isUploadingCover = ref(false)
 
-  // 路由哈希处理
-  const realHash = useRouteHash('goods', { mode: 'replace' });
-  const hash = computed({
-    get() {
-      return realHash.value?.startsWith('#') ? realHash.value.slice(1) : realHash.value || 'goods';
-    },
-    set(val) {
-      realHash.value = '#' + val;
-    },
-  });
+// 路由哈希处理
+const realHash = useRouteHash('goods', { mode: 'replace' })
+const hash = computed({
+  get() {
+    return realHash.value?.startsWith('#') ? realHash.value.slice(1) : realHash.value || 'goods'
+  },
+  set(val) {
+    realHash.value = `#${val}`
+  },
+})
 
-  // 商品数据及模型
-  const goods = ref<ResponsePointGoodModel[]>(await biliAuth.GetGoods(accountInfo.value?.id, message));
-  const defaultGoodsModel = (): { goods: UploadPointGoodsModel; fileList: UploadFileInfo[]; } => ({
+// 商品数据及模型
+const goods = ref<ResponsePointGoodModel[]>(await biliAuth.GetGoods(accountInfo.value?.id, message))
+function defaultGoodsModel(): { goods: UploadPointGoodsModel, fileList: UploadFileInfo[] } {
+  return {
     goods: {
       type: GoodsTypes.Virtual,
       status: GoodsStatus.Normal,
@@ -89,7 +94,7 @@
       isAllowRebuy: false,
       isPinned: false,
       setting: {
-        allowGuardLevel: 0
+        allowGuardLevel: 0,
       },
       virtualKeys: [],
       keySelectionMode: KeySelectionMode.None,
@@ -101,213 +106,214 @@
       cover: undefined,
     } as UploadPointGoodsModel,
     fileList: [],
-  });
-  const currentGoodsModel = ref<{ goods: UploadPointGoodsModel; fileList: UploadFileInfo[]; }>(
-    defaultGoodsModel()
-  );
+  }
+}
+const currentGoodsModel = ref<{ goods: UploadPointGoodsModel, fileList: UploadFileInfo[] }>(
+  defaultGoodsModel(),
+)
 
-  // 监听 fileList 变化，确保 cover 和 fileList 同步
-  watch(() => currentGoodsModel.value.fileList, (newFileList, oldFileList) => {
-    if (oldFileList && oldFileList.length > 0 && newFileList.length === 0) {
-      if (currentGoodsModel.value.goods.id && currentGoodsModel.value.goods.cover) {
-        currentGoodsModel.value.goods.cover = undefined;
-      }
-    }
-  }, { deep: true });
-
-  // 计算属性
-  const allowedYearOptions = computed(() => {
-    return Array.from({ length: new Date().getFullYear() - 2024 + 1 }, (_, i) => 2024 + i).map((item) => ({
-      label: item.toString() + '年',
-      value: item,
-    }));
-  });
-
-  const allowedMonthOptions = computed(() => {
-    return Array.from({ length: 12 }, (_, i) => i + 1).map((item) => ({
-      label: item.toString() + '月',
-      value: item,
-    }));
-  });
-
-  const existTags = computed(() => {
-    if (goods.value.length === 0) return [];
-
-    const tempSet = new Set<string>();
-    for (const good of goods.value) {
-      if (!good.tags || good.tags.length === 0) continue;
-      good.tags.forEach(tag => tempSet.add(tag));
-    }
-
-    return Array.from(tempSet).map(tag => ({ label: tag, value: tag }));
-  });
-
-  // 下拉菜单选项
-  const dropDownActions = {
-    update: {
-      label: '修改',
-      key: 'update',
-      action: (item: ResponsePointGoodModel) => onUpdateClick(item),
-    },
-    delete: {
-      label: '删除',
-      key: 'delete',
-      action: (item: ResponsePointGoodModel) => onDeleteClick(item),
-    },
-  } as { [key: string]: { label: string; key: string; action: (item: ResponsePointGoodModel) => void; }; };
-
-  const dropDownOptions = computed(() => Object.values(dropDownActions));
-
-  // 表单验证规则
-  const rules = {
-    name: {
-      required: true,
-      message: '请输入礼物名称',
-    },
-    price: {
-      required: true,
-      message: '请输入礼物价格',
-    },
-    'goods.type': {
-      required: true,
-      message: '请选择是虚拟礼物或实物',
-    },
-    content: {
-      required: true,
-      message: '请输入虚拟礼物的具体内容',
-      validator: (rule: FormItemRule, value: string) =>
-        currentGoodsModel.value.goods.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
-    },
-    privacy: {
-      required: true,
-      message: '需要阅读并同意本站隐私协议',
-      validator: (rule: FormItemRule, value: boolean) =>
-        (currentGoodsModel.value.goods.type != GoodsTypes.Physical &&
-          currentGoodsModel.value.goods.collectUrl != undefined) ||
-        isAllowedPrivacyPolicy.value
-    },
-    maxBuyCount: {
-      required: true,
-      message: '需要输入最大购买数量',
-      validator: (rule: FormItemRule, value: number) =>
-        currentGoodsModel.value.goods.type != GoodsTypes.Physical ||
-        (currentGoodsModel.value.goods.maxBuyCount ?? 0) > 0
-    },
-    'goods.url': {
-      required: true,
-      message: '请输入收集收货地址的链接',
-      validator: (rule: FormItemRule, value: string) => {
-        try {
-          new URL(value);
-          return true;
-        } catch (err) {
-          return false;
-        }
-      },
-    },
-  };
-
-  // 方法
-  async function setFunctionEnable(enable: boolean) {
-    const success = enable ? await EnableFunction(FunctionTypes.Point) : await DisableFunction(FunctionTypes.Point);
-
-    if (success) {
-      message.success('已' + (enable ? '启用' : '禁用') + '积分系统');
-    } else {
-      message.error('无法' + (enable ? '启用' : '禁用') + '积分系统');
+// 监听 fileList 变化，确保 cover 和 fileList 同步
+watch(() => currentGoodsModel.value.fileList, (newFileList, oldFileList) => {
+  if (oldFileList && oldFileList.length > 0 && newFileList.length === 0) {
+    if (currentGoodsModel.value.goods.id && currentGoodsModel.value.goods.cover) {
+      currentGoodsModel.value.goods.cover = undefined
     }
   }
+}, { deep: true })
 
-  async function updateGoods(e: MouseEvent) {
-    if (isUpdating.value || !formRef.value) return;
-    e.preventDefault();
-    isUpdating.value = true;
-    isUploadingCover.value = false;
-    uploadProgress.value = 0;
+// 计算属性
+const allowedYearOptions = computed(() => {
+  return Array.from({ length: new Date().getFullYear() - 2024 + 1 }, (_, i) => 2024 + i).map(item => ({
+    label: `${item.toString()}年`,
+    value: item,
+  }))
+})
 
-    try {
-      await formRef.value.validate();
+const allowedMonthOptions = computed(() => {
+  return Array.from({ length: 12 }, (_, i) => i + 1).map(item => ({
+    label: `${item.toString()}月`,
+    value: item,
+  }))
+})
 
-      const newFilesToUpload = currentGoodsModel.value.fileList.filter(f => f.file && f.status !== 'finished');
-      if (newFilesToUpload.length > 0 && newFilesToUpload[0].file) {
-        isUploadingCover.value = true;
-        message.info('正在上传封面...');
-        const uploadResults = await uploadFiles(
-          [newFilesToUpload[0].file],
-          undefined,
-          UserFileLocation.Local,
-          (stage: string) => {
-            if (stage === UploadStage.Uploading) {
-              uploadProgress.value = 0;
-            }
-          }
-        );
-        isUploadingCover.value = false;
-        if (uploadResults && uploadResults.length > 0) {
-          currentGoodsModel.value.goods.cover = uploadResults[0];
-          message.success('封面上传成功');
-          const uploadedFileIndex = currentGoodsModel.value.fileList.findIndex(f => f.id === newFilesToUpload[0].id);
-          if (uploadedFileIndex > -1) {
-            currentGoodsModel.value.fileList[uploadedFileIndex] = {
-              ...currentGoodsModel.value.fileList[uploadedFileIndex],
-              id: uploadResults[0].id.toString(),
-              status: 'finished',
-              thumbnailUrl: uploadResults[0].path,
-              url: uploadResults[0].path
-            };
-          }
-        } else {
-          throw new Error('封面上传失败');
-        }
-      } else if (currentGoodsModel.value.fileList.length === 0 && currentGoodsModel.value.goods.id) {
-        currentGoodsModel.value.goods.cover = undefined;
+const existTags = computed(() => {
+  if (goods.value.length === 0) return []
+
+  const tempSet = new Set<string>()
+  for (const good of goods.value) {
+    if (!good.tags || good.tags.length === 0) continue
+    good.tags.forEach(tag => tempSet.add(tag))
+  }
+
+  return Array.from(tempSet).map(tag => ({ label: tag, value: tag }))
+})
+
+// 下拉菜单选项
+const dropDownActions = {
+  update: {
+    label: '修改',
+    key: 'update',
+    action: (item: ResponsePointGoodModel) => onUpdateClick(item),
+  },
+  delete: {
+    label: '删除',
+    key: 'delete',
+    action: (item: ResponsePointGoodModel) => onDeleteClick(item),
+  },
+} as { [key: string]: { label: string, key: string, action: (item: ResponsePointGoodModel) => void } }
+
+const dropDownOptions = computed(() => Object.values(dropDownActions))
+
+// 表单验证规则
+const rules = {
+  'name': {
+    required: true,
+    message: '请输入礼物名称',
+  },
+  'price': {
+    required: true,
+    message: '请输入礼物价格',
+  },
+  'goods.type': {
+    required: true,
+    message: '请选择是虚拟礼物或实物',
+  },
+  'content': {
+    required: true,
+    message: '请输入虚拟礼物的具体内容',
+    validator: (rule: FormItemRule, value: string) =>
+      currentGoodsModel.value.goods.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0,
+  },
+  'privacy': {
+    required: true,
+    message: '需要阅读并同意本站隐私协议',
+    validator: (rule: FormItemRule, value: boolean) =>
+      (currentGoodsModel.value.goods.type != GoodsTypes.Physical
+        && currentGoodsModel.value.goods.collectUrl != undefined)
+      || isAllowedPrivacyPolicy.value,
+  },
+  'maxBuyCount': {
+    required: true,
+    message: '需要输入最大购买数量',
+    validator: (rule: FormItemRule, value: number) =>
+      currentGoodsModel.value.goods.type != GoodsTypes.Physical
+      || (currentGoodsModel.value.goods.maxBuyCount ?? 0) > 0,
+  },
+  'goods.url': {
+    required: true,
+    message: '请输入收集收货地址的链接',
+    validator: (rule: FormItemRule, value: string) => {
+      try {
+        new URL(value)
+        return true
+      } catch (err) {
+        return false
       }
+    },
+  },
+}
 
-      const { code, data, message: errMsg } = await QueryPostAPI<ResponsePointGoodModel>(
-        POINT_API_URL + 'update-goods',
-        currentGoodsModel.value.goods
-      );
+// 方法
+async function setFunctionEnable(enable: boolean) {
+  const success = enable ? await EnableFunction(FunctionTypes.Point) : await DisableFunction(FunctionTypes.Point)
 
-      if (code === 200) {
-        message.success('商品信息保存成功');
-        showAddGoodsModal.value = false;
-        currentGoodsModel.value = defaultGoodsModel();
+  if (success) {
+    message.success(`已${enable ? '启用' : '禁用'}积分系统`)
+  } else {
+    message.error(`无法${enable ? '启用' : '禁用'}积分系统`)
+  }
+}
 
-        const index = goods.value.findIndex(g => g.id === data.id);
-        if (index >= 0) {
-          goods.value[index] = data;
-        } else {
-          goods.value.push(data);
+async function updateGoods(e: MouseEvent) {
+  if (isUpdating.value || !formRef.value) return
+  e.preventDefault()
+  isUpdating.value = true
+  isUploadingCover.value = false
+  uploadProgress.value = 0
+
+  try {
+    await formRef.value.validate()
+
+    const newFilesToUpload = currentGoodsModel.value.fileList.filter(f => f.file && f.status !== 'finished')
+    if (newFilesToUpload.length > 0 && newFilesToUpload[0].file) {
+      isUploadingCover.value = true
+      message.info('正在上传封面...')
+      const uploadResults = await uploadFiles(
+        [newFilesToUpload[0].file],
+        undefined,
+        UserFileLocation.Local,
+        (stage: string) => {
+          if (stage === UploadStage.Uploading) {
+            uploadProgress.value = 0
+          }
+        },
+      )
+      isUploadingCover.value = false
+      if (uploadResults && uploadResults.length > 0) {
+        currentGoodsModel.value.goods.cover = uploadResults[0]
+        message.success('封面上传成功')
+        const uploadedFileIndex = currentGoodsModel.value.fileList.findIndex(f => f.id === newFilesToUpload[0].id)
+        if (uploadedFileIndex > -1) {
+          currentGoodsModel.value.fileList[uploadedFileIndex] = {
+            ...currentGoodsModel.value.fileList[uploadedFileIndex],
+            id: uploadResults[0].id.toString(),
+            status: 'finished',
+            thumbnailUrl: uploadResults[0].path,
+            url: uploadResults[0].path,
+          }
         }
       } else {
-        message.error('商品信息保存失败: ' + errMsg);
+        throw new Error('封面上传失败')
       }
-    } catch (err: any) {
-      console.error(currentGoodsModel.value, err);
-      const errorMsg = err instanceof Error ? err.message : typeof err === 'string' ? err : '表单验证失败或上传出错';
-      message.error(`失败: ${errorMsg}`);
-    } finally {
-      isUpdating.value = false;
-      isUploadingCover.value = false;
+    } else if (currentGoodsModel.value.fileList.length === 0 && currentGoodsModel.value.goods.id) {
+      currentGoodsModel.value.goods.cover = undefined
     }
-  }
 
-  function OnFileListChange(files: UploadFileInfo[]) {
-    if (files.length === 1 && (files[0].file?.size ?? 0) > 10 * 1024 * 1024) {
-      message.error('文件大小不能超过10MB');
-      currentGoodsModel.value.fileList = [];
+    const { code, data, message: errMsg } = await QueryPostAPI<ResponsePointGoodModel>(
+      `${POINT_API_URL}update-goods`,
+      currentGoodsModel.value.goods,
+    )
+
+    if (code === 200) {
+      message.success('商品信息保存成功')
+      showAddGoodsModal.value = false
+      currentGoodsModel.value = defaultGoodsModel()
+
+      const index = goods.value.findIndex(g => g.id === data.id)
+      if (index >= 0) {
+        goods.value[index] = data
+      } else {
+        goods.value.push(data)
+      }
     } else {
-      currentGoodsModel.value.fileList = files;
+      message.error(`商品信息保存失败: ${errMsg}`)
     }
+  } catch (err: any) {
+    console.error(currentGoodsModel.value, err)
+    const errorMsg = err instanceof Error ? err.message : typeof err === 'string' ? err : '表单验证失败或上传出错'
+    message.error(`失败: ${errorMsg}`)
+  } finally {
+    isUpdating.value = false
+    isUploadingCover.value = false
   }
+}
 
-  function onUpdateClick(item: ResponsePointGoodModel) {
-    currentGoodsModel.value = {
-      goods: JSON.parse(JSON.stringify({
-        ...item,
-      })),
-      fileList: item.cover
-        ? [
+function OnFileListChange(files: UploadFileInfo[]) {
+  if (files.length === 1 && (files[0].file?.size ?? 0) > 10 * 1024 * 1024) {
+    message.error('文件大小不能超过10MB')
+    currentGoodsModel.value.fileList = []
+  } else {
+    currentGoodsModel.value.fileList = files
+  }
+}
+
+function onUpdateClick(item: ResponsePointGoodModel) {
+  currentGoodsModel.value = {
+    goods: JSON.parse(JSON.stringify({
+      ...item,
+    })),
+    fileList: item.cover
+      ? [
           {
             id: item.cover.id.toString(),
             name: item.cover.name || '封面',
@@ -316,94 +322,94 @@
             thumbnailUrl: item.cover.path,
           },
         ]
-        : [],
-    };
-    isAllowedPrivacyPolicy.value = true;
-    showAddGoodsModal.value = true;
+      : [],
   }
+  isAllowedPrivacyPolicy.value = true
+  showAddGoodsModal.value = true
+}
 
-  async function onSetShelfClick(item: ResponsePointGoodModel, status: GoodsStatus) {
-    const d = dialog.warning({
-      title: '警告',
-      content: `你确定要${status == GoodsStatus.Normal ? '重新上架' : '下架'}这个礼物吗？`,
-      positiveText: '确定',
-      negativeText: '取消',
-      onPositiveClick: async () => {
-        d.loading = true;
-        const originStatus = item.status;
+async function onSetShelfClick(item: ResponsePointGoodModel, status: GoodsStatus) {
+  const d = dialog.warning({
+    title: '警告',
+    content: `你确定要${status == GoodsStatus.Normal ? '重新上架' : '下架'}这个礼物吗？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      d.loading = true
+      const originStatus = item.status
 
-        try {
-          const { code, message: errMsg } = await QueryPostAPI(POINT_API_URL + 'update-goods-status', {
-            ids: [item.id],
-            status: status,
-          });
+      try {
+        const { code, message: errMsg } = await QueryPostAPI(`${POINT_API_URL}update-goods-status`, {
+          ids: [item.id],
+          status,
+        })
 
-          if (code === 200) {
-            message.success('成功');
-            const index = goods.value.findIndex(g => g.id === item.id);
-            if (index > -1) {
-              goods.value[index].status = status;
-            }
-          } else {
-            message.error('失败: ' + errMsg);
-            item.status = originStatus;
-            console.error(errMsg);
+        if (code === 200) {
+          message.success('成功')
+          const index = goods.value.findIndex(g => g.id === item.id)
+          if (index > -1) {
+            goods.value[index].status = status
           }
-        } catch (err) {
-          message.error('失败: ' + err);
-          item.status = originStatus;
-          console.error(err);
-        } finally {
-          d.loading = false;
+        } else {
+          message.error(`失败: ${errMsg}`)
+          item.status = originStatus
+          console.error(errMsg)
         }
-      },
-    });
-  }
+      } catch (err) {
+        message.error(`失败: ${err}`)
+        item.status = originStatus
+        console.error(err)
+      } finally {
+        d.loading = false
+      }
+    },
+  })
+}
 
-  function onDeleteClick(item: ResponsePointGoodModel) {
-    const d = dialog.warning({
-      title: '警告',
-      content: '你确定要删除这个礼物吗？',
-      positiveText: '确定',
-      negativeText: '取消',
-      onPositiveClick: async () => {
-        d.loading = true;
+function onDeleteClick(item: ResponsePointGoodModel) {
+  const d = dialog.warning({
+    title: '警告',
+    content: '你确定要删除这个礼物吗？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      d.loading = true
 
-        try {
-          const { code, message: errMsg } = await QueryGetAPI(POINT_API_URL + 'delete-goods', {
-            id: item.id,
-          });
+      try {
+        const { code, message: errMsg } = await QueryGetAPI(`${POINT_API_URL}delete-goods`, {
+          id: item.id,
+        })
 
-          if (code === 200) {
-            message.success('成功');
-            goods.value = goods.value.filter(g => g.id !== item.id);
-          } else {
-            message.error('失败: ' + errMsg);
-            console.error(errMsg);
-          }
-        } catch (err) {
-          message.error('失败: ' + err);
-          console.error(err);
-        } finally {
-          d.loading = false;
+        if (code === 200) {
+          message.success('成功')
+          goods.value = goods.value.filter(g => g.id !== item.id)
+        } else {
+          message.error(`失败: ${errMsg}`)
+          console.error(errMsg)
         }
-      },
-    });
-  }
+      } catch (err) {
+        message.error(`失败: ${err}`)
+        console.error(err)
+      } finally {
+        d.loading = false
+      }
+    },
+  })
+}
 
-  function onModalOpen() {
-    if (!currentGoodsModel.value.goods.id) {
-      resetGoods();
-    }
-    showAddGoodsModal.value = true;
+function onModalOpen() {
+  if (!currentGoodsModel.value.goods.id) {
+    resetGoods()
   }
+  showAddGoodsModal.value = true
+}
 
-  function resetGoods() {
-    currentGoodsModel.value = defaultGoodsModel();
-    isAllowedPrivacyPolicy.value = false;
-  }
+function resetGoods() {
+  currentGoodsModel.value = defaultGoodsModel()
+  isAllowedPrivacyPolicy.value = false
+}
 
-  onMounted(() => { });
+onMounted(() => { })
 </script>
 
 <template>
@@ -830,7 +836,7 @@
                 v-if="isUploadingCover"
                 type="line"
                 :percentage="uploadProgress"
-                :indicator-placement="'inside'"
+                indicator-placement="inside"
                 processing
               />
             </NFlex>
@@ -1092,7 +1098,6 @@
               </NFlex>
             </NFormItem>
 
-
             <NFormItem
               path="goods.content"
               required
diff --git a/src/views/manage/point/PointOrderManage.vue b/src/views/manage/point/PointOrderManage.vue
index 6c6a625..e157f98 100644
--- a/src/views/manage/point/PointOrderManage.vue
+++ b/src/views/manage/point/PointOrderManage.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { GoodsTypes, PointOrderStatus, ResponsePointGoodModel, ResponsePointOrder2OwnerModel, ResponsePointUserModel } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import PointOrderCard from '@/components/manage/PointOrderCard.vue'
-import { POINT_API_URL } from '@/data/constants'
-import { objectsToCSV } from '@/Utils'
+import type {
+  DataTableRowKey,
+} from 'naive-ui'
+import type { ResponsePointGoodModel, ResponsePointOrder2OwnerModel } from '@/api/api-models'
 import { useStorage } from '@vueuse/core'
 import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
 import { List } from 'linqts'
 import {
-  DataTableRowKey,
   NButton,
   NCard,
   NCheckbox,
@@ -26,13 +23,18 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, onMounted, ref } from 'vue'
-import PointUserDetailCard from './PointUserDetailCard.vue'
+import { useAccount } from '@/api/account'
+import { GoodsTypes, PointOrderStatus } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import PointOrderCard from '@/components/manage/PointOrderCard.vue'
+import { POINT_API_URL } from '@/data/constants'
+import { objectsToCSV } from '@/Utils'
 
 // 订单筛选设置类型定义
-type OrderFilterSettings = {
-  type?: GoodsTypes       // 订单类型（实体/虚拟）
+interface OrderFilterSettings {
+  type?: GoodsTypes // 订单类型（实体/虚拟）
   status?: PointOrderStatus // 订单状态
-  customer?: number       // 用户ID
+  customer?: number // 用户ID
   onlyRequireShippingInfo: boolean // 是否只显示需要物流信息的订单
 }
 
@@ -73,15 +75,15 @@ const showStatusModal = ref(false)
 async function getOrders() {
   try {
     isLoading.value = true
-    const data = await QueryGetAPI<ResponsePointOrder2OwnerModel[]>(POINT_API_URL + 'get-orders')
+    const data = await QueryGetAPI<ResponsePointOrder2OwnerModel[]>(`${POINT_API_URL}get-orders`)
     if (data.code == 200) {
       return data.data
     } else {
-      message.error('获取订单失败: ' + data.message)
+      message.error(`获取订单失败: ${data.message}`)
     }
   } catch (err) {
     console.log(err)
-    message.error('获取订单失败: ' + err)
+    message.error(`获取订单失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -96,16 +98,16 @@ async function deleteOrder() {
   }
 
   try {
-    const data = await QueryPostAPI(POINT_API_URL + 'delete-orders', selectedItem.value)
+    const data = await QueryPostAPI(`${POINT_API_URL}delete-orders`, selectedItem.value)
     if (data.code == 200) {
       message.success('删除成功')
-      orders.value = orders.value.filter((o) => !selectedItem.value?.includes(o.id))
+      orders.value = orders.value.filter(o => !selectedItem.value?.includes(o.id))
       selectedItem.value = undefined
     } else {
-      message.error('删除失败: ' + data.message)
+      message.error(`删除失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('删除失败: ' + err)
+    message.error(`删除失败: ${err}`)
     console.log(err)
   }
 }
@@ -134,14 +136,14 @@ async function batchUpdateOrderStatus() {
   try {
     const requestData = {
       orderIds: selectedItem.value,
-      status: targetStatus.value
+      status: targetStatus.value,
     }
 
-    const data = await QueryPostAPI<number[]>(POINT_API_URL + 'batch-update-order-status', requestData)
+    const data = await QueryPostAPI<number[]>(`${POINT_API_URL}batch-update-order-status`, requestData)
     if (data.code == 200) {
       message.success('更新成功')
       // 更新本地订单状态
-      orders.value.forEach(order => {
+      orders.value.forEach((order) => {
         if (data.data.includes(order.id)) {
           order.status = targetStatus.value as PointOrderStatus
           order.updateAt = Date.now()
@@ -150,10 +152,10 @@ async function batchUpdateOrderStatus() {
       targetStatus.value = undefined
       showStatusModal.value = false
     } else {
-      message.error('更新失败: ' + data.message)
+      message.error(`更新失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('更新失败: ' + err)
+    message.error(`更新失败: ${err}`)
     console.log(err)
   }
 }
@@ -196,7 +198,7 @@ function exportData() {
     )
 
     // 添加BOM标记，确保Excel正确识别UTF-8编码
-    const BOM = new Uint8Array([0xef, 0xbb, 0xbf])
+    const BOM = new Uint8Array([0xEF, 0xBB, 0xBF])
     const utf8encoder = new TextEncoder()
     const utf8array = utf8encoder.encode(text)
 
@@ -207,7 +209,7 @@ function exportData() {
 
     message.success('导出成功')
   } catch (error) {
-    message.error('导出失败: ' + error)
+    message.error(`导出失败: ${error}`)
     console.error('导出失败:', error)
   }
 }
diff --git a/src/views/manage/point/PointSettings.vue b/src/views/manage/point/PointSettings.vue
index af6df16..d65861d 100644
--- a/src/views/manage/point/PointSettings.vue
+++ b/src/views/manage/point/PointSettings.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { SaveSetting, useAccount } from '@/api/account'
-import { EventDataTypes, SettingPointGiftAllowType, Setting_Point } from '@/api/api-models'
-import { QueryPostAPI } from '@/api/query'
-import { POINT_API_URL } from '@/data/constants'
+import type { Setting_Point } from '@/api/api-models'
 import { Delete24Regular, Info24Filled } from '@vicons/fluent'
 import {
   NAlert,
@@ -31,6 +28,8 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, ref } from 'vue'
+import { SaveSetting, useAccount } from '@/api/account'
+import { EventDataTypes, SettingPointGiftAllowType } from '@/api/api-models'
 
 const accountInfo = useAccount()
 const message = useMessage()
@@ -73,11 +72,11 @@ const setting = computed({
 })
 
 // 添加礼物表单模型
-const addGiftModel = ref<{ name: string; point: number; nameError: string; pointError: string }>({
+const addGiftModel = ref<{ name: string, point: number, nameError: string, pointError: string }>({
   name: '',
   point: 1,
   nameError: '',
-  pointError: ''
+  pointError: '',
 })
 
 // 是否可以编辑设置
@@ -104,10 +103,10 @@ async function updateSettings() {
       message.success('已保存')
       return true
     } else {
-      message.error('保存失败: ' + msg)
+      message.error(`保存失败: ${msg}`)
     }
   } catch (err) {
-    message.error('保存失败: ' + err)
+    message.error(`保存失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
@@ -202,10 +201,10 @@ async function SaveComboSetting() {
       message.success('已保存')
       return true
     } else {
-      message.error('保存失败: ' + msg)
+      message.error(`保存失败: ${msg}`)
     }
   } catch (err) {
-    message.error('修改失败: ' + err)
+    message.error(`修改失败: ${err}`)
   } finally {
     isLoading.value = false
   }
diff --git a/src/views/manage/point/PointUserDetailCard.vue b/src/views/manage/point/PointUserDetailCard.vue
index 8e58f29..0228a94 100644
--- a/src/views/manage/point/PointUserDetailCard.vue
+++ b/src/views/manage/point/PointUserDetailCard.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import { GuidUtils } from '@/Utils'
-import {
+import type {
   ResponsePointGoodModel,
   ResponsePointHisrotyModel,
   ResponsePointOrder2OwnerModel,
   ResponsePointUserModel,
 } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import PointHistoryCard from '@/components/manage/PointHistoryCard.vue'
-import PointOrderCard from '@/components/manage/PointOrderCard.vue'
-import { POINT_API_URL } from '@/data/constants'
 import { Info24Filled } from '@vicons/fluent'
 import {
   NButton,
@@ -24,12 +19,15 @@ import {
   NModal,
   NSpin,
   NTag,
-  NText,
   NTime,
   NTooltip,
   useMessage,
 } from 'naive-ui'
 import { onMounted, ref } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import PointHistoryCard from '@/components/manage/PointHistoryCard.vue'
+import PointOrderCard from '@/components/manage/PointOrderCard.vue'
+import { POINT_API_URL } from '@/data/constants'
 
 // 组件属性定义
 const props = defineProps<{
@@ -59,18 +57,18 @@ async function getOrders() {
 
   try {
     isLoading.value = true
-    const data = await QueryGetAPI<ResponsePointOrder2OwnerModel[]>(POINT_API_URL + 'get-user-orders', {
+    const data = await QueryGetAPI<ResponsePointOrder2OwnerModel[]>(`${POINT_API_URL}get-user-orders`, {
       authId: props.user.info?.id,
     })
 
     if (data.code == 200) {
       return data.data
     } else {
-      message.error('获取订单失败: ' + data.message)
+      message.error(`获取订单失败: ${data.message}`)
       console.error(data)
     }
   } catch (err) {
-    message.error('获取订单失败: ' + err)
+    message.error(`获取订单失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
@@ -90,18 +88,18 @@ async function getPointHistory() {
       : { id: props.user.info.userId > 0 ? props.user.info.userId : props.user.info.openId }
 
     const data = await QueryGetAPI<ResponsePointHisrotyModel[]>(
-      POINT_API_URL + 'get-user-histories',
-      params
+      `${POINT_API_URL}get-user-histories`,
+      params,
     )
 
     if (data.code == 200) {
       return data.data
     } else {
-      message.error('获取积分历史失败: ' + data.message)
+      message.error(`获取积分历史失败: ${data.message}`)
       console.error(data)
     }
   } catch (err) {
-    message.error('获取积分历史失败: ' + err)
+    message.error(`获取积分历史失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
@@ -143,7 +141,7 @@ async function givePoint() {
       }
     }
 
-    const data = await QueryGetAPI(POINT_API_URL + 'give-point', params)
+    const data = await QueryGetAPI(`${POINT_API_URL}give-point`, params)
 
     if (data.code == 200) {
       message.success('添加成功')
@@ -159,11 +157,11 @@ async function givePoint() {
       addPointCount.value = 0
       addPointReason.value = ''
     } else {
-      message.error('添加积分失败: ' + data.message)
+      message.error(`添加积分失败: ${data.message}`)
       console.error(data)
     }
   } catch (err) {
-    message.error('添加积分失败: ' + err)
+    message.error(`添加积分失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
diff --git a/src/views/manage/point/PointUserManage.vue b/src/views/manage/point/PointUserManage.vue
index d3f8580..d38c8ca 100644
--- a/src/views/manage/point/PointUserManage.vue
+++ b/src/views/manage/point/PointUserManage.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { ResponsePointGoodModel, ResponsePointUserModel } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { POINT_API_URL } from '@/data/constants'
-import { objectsToCSV } from '@/Utils'
-import { Info24Filled } from '@vicons/fluent'
-import { Warning24Regular } from '@vicons/fluent'
+import type {
+  DataTableColumns,
+} from 'naive-ui'
+
+import type { ResponsePointGoodModel, ResponsePointUserModel } from '@/api/api-models'
+import { Info24Filled, Warning24Regular } from '@vicons/fluent'
 import { useStorage } from '@vueuse/core'
 import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
 import {
-  DataTableColumns,
   NButton,
   NCard,
   NCheckbox,
@@ -34,12 +32,16 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import { POINT_API_URL } from '@/data/constants'
+import { objectsToCSV } from '@/Utils'
 import PointUserDetailCard from './PointUserDetailCard.vue'
 
 // 用户积分设置类型定义
-type PointUserSettings = {
-  onlyAuthed: boolean       // 只显示已认证用户
-  searchKeyword?: string    // 搜索关键词
+interface PointUserSettings {
+  onlyAuthed: boolean // 只显示已认证用户
+  searchKeyword?: string // 搜索关键词
 }
 
 const props = defineProps<{
@@ -91,8 +93,8 @@ const filteredUsers = computed(() => {
       if (settings.value.searchKeyword) {
         const keyword = settings.value.searchKeyword.toLowerCase()
         return (
-          user.info.name?.toLowerCase().includes(keyword) == true ||
-          user.info.userId?.toString() == keyword
+          user.info.name?.toLowerCase().includes(keyword) == true
+          || user.info.userId?.toString() == keyword
         )
       }
 
@@ -105,7 +107,7 @@ const filteredUsers = computed(() => {
 const currentUser = ref<ResponsePointUserModel>()
 
 // 渲染用户名或用户ID
-const renderUsername = (user: ResponsePointUserModel) => {
+function renderUsername(user: ResponsePointUserModel) {
   if (user.info?.name) {
     return user.info.name
   }
@@ -117,13 +119,13 @@ const renderUsername = (user: ResponsePointUserModel) => {
 }
 
 // 渲染订单数量，更友好的显示方式
-const renderOrderCount = (user: ResponsePointUserModel) => {
+function renderOrderCount(user: ResponsePointUserModel) {
   if (!user.isAuthed) return h(NText, { depth: 3 }, { default: () => '未认证' })
   return user.orderCount > 0 ? h(NText, {}, { default: () => formatNumber(user.orderCount) }) : h(NText, { depth: 3 }, { default: () => '无订单' })
 }
 
 // 渲染时间戳为相对时间和绝对时间
-const renderTime = (timestamp: number) => {
+function renderTime(timestamp: number) {
   return h(NTooltip, null, {
     trigger: () => h(NTime, { time: timestamp, type: 'relative' }),
     default: () => h(NTime, { time: timestamp }),
@@ -131,7 +133,7 @@ const renderTime = (timestamp: number) => {
 }
 
 // 渲染操作按钮
-const renderActions = (user: ResponsePointUserModel) => {
+function renderActions(user: ResponsePointUserModel) {
   return h(NFlex, { justify: 'center', gap: 8 }, () => [
     h(
       NButton,
@@ -165,12 +167,12 @@ const renderActions = (user: ResponsePointUserModel) => {
 }
 
 // 格式化数字，添加千位符
-const formatNumber = (num: number) => {
+function formatNumber(num: number) {
   return num.toLocaleString('zh-CN')
 }
 
 // 渲染积分，添加千位符并加粗
-const renderPoint = (num: number) => {
+function renderPoint(num: number) {
   return h(NText, { strong: true }, { default: () => formatNumber(num) })
 }
 
@@ -216,15 +218,15 @@ const column: DataTableColumns<ResponsePointUserModel> = [
 async function getUsers() {
   try {
     isLoading.value = true
-    const data = await QueryGetAPI<ResponsePointUserModel[]>(POINT_API_URL + 'get-all-users')
+    const data = await QueryGetAPI<ResponsePointUserModel[]>(`${POINT_API_URL}get-all-users`)
     if (data.code == 200) {
       return data.data
     } else {
-      message.error('获取用户失败: ' + data.message)
+      message.error(`获取用户失败: ${data.message}`)
     }
   } catch (err) {
     console.log(err)
-    message.error('获取用户失败: ' + err)
+    message.error(`获取用户失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -251,7 +253,7 @@ async function givePoint() {
 
   isLoading.value = true
   try {
-    const data = await QueryGetAPI(POINT_API_URL + 'give-point', {
+    const data = await QueryGetAPI(`${POINT_API_URL}give-point`, {
       uId: addPointTarget.value,
       count: addPointCount.value,
       reason: addPointReason.value || '',
@@ -271,10 +273,10 @@ async function givePoint() {
       addPointReason.value = ''
       addPointTarget.value = undefined
     } else {
-      message.error('添加失败: ' + data.message)
+      message.error(`添加失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('添加失败: ' + err)
+    message.error(`添加失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -291,16 +293,16 @@ async function deleteUser(user: ResponsePointUserModel) {
         ? { uId: user.info.userId }
         : { uId: user.info.openId }
 
-    const data = await QueryGetAPI(POINT_API_URL + 'delete-user', params)
+    const data = await QueryGetAPI(`${POINT_API_URL}delete-user`, params)
 
     if (data.code == 200) {
       message.success('已删除')
-      users.value = users.value.filter((u) => u != user)
+      users.value = users.value.filter(u => u != user)
     } else {
-      message.error('删除失败: ' + data.message)
+      message.error(`删除失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('删除失败: ' + err)
+    message.error(`删除失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -316,7 +318,7 @@ async function resetAllPoints() {
 
   isLoading.value = true
   try {
-    const data = await QueryGetAPI(POINT_API_URL + 'reset')
+    const data = await QueryGetAPI(`${POINT_API_URL}reset`)
 
     if (data.code == 200) {
       message.success('已重置所有用户积分')
@@ -328,10 +330,10 @@ async function resetAllPoints() {
         refresh()
       }, 1500)
     } else {
-      message.error('重置失败: ' + data.message)
+      message.error(`重置失败: ${data.message}`)
     }
   } catch (err) {
-    message.error('重置失败: ' + err)
+    message.error(`重置失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -350,11 +352,11 @@ function exportData() {
           订单数量: user.orderCount || 0,
           最后更新时间: format(user.updateAt, 'yyyy-MM-dd HH:mm:ss'),
         }
-      })
+      }),
     )
 
     // 添加BOM标记，确保Excel正确识别UTF-8编码
-    const BOM = new Uint8Array([0xef, 0xbb, 0xbf])
+    const BOM = new Uint8Array([0xEF, 0xBB, 0xBF])
     const utf8encoder = new TextEncoder()
     const utf8array = utf8encoder.encode(text)
 
@@ -365,7 +367,7 @@ function exportData() {
 
     message.success('导出成功')
   } catch (error) {
-    message.error('导出失败: ' + error)
+    message.error(`导出失败: ${error}`)
     console.error('导出失败:', error)
   }
 }
@@ -486,7 +488,7 @@ onMounted(async () => {
         showSizePicker: true,
         pageSizes: [10, 25, 50, 100],
         onUpdatePage: (page) => (pn = page),
-        onUpdatePageSize: (pageSize) => (ps = pageSize)
+        onUpdatePageSize: (pageSize) => (ps = pageSize),
       }"
       :loading="isLoading"
     />
diff --git a/src/views/manage/tools/ToolDynamicNineGrid.vue b/src/views/manage/tools/ToolDynamicNineGrid.vue
index 71c1d97..407b2cb 100644
--- a/src/views/manage/tools/ToolDynamicNineGrid.vue
+++ b/src/views/manage/tools/ToolDynamicNineGrid.vue
@@ -1,40 +1,331 @@
+<script setup lang="ts">
+import type { UploadFileInfo } from 'naive-ui'
+import { saveAs } from 'file-saver'
+import JSZip from 'jszip'
+import { NButton, NCard, NH4, NInputNumber, NSelect, NSpace, NSwitch, NText, NUpload, useMessage } from 'naive-ui'
+import { computed, ref } from 'vue'
+import VueCropper from 'vue-cropperjs'
+
+const message = useMessage()
+
+const originalImage = ref<string | null>(null)
+const croppedSquareImage = ref<string | null>(null)
+
+const additionalImages = ref<(string | null)[]>(Array.from({ length: 9 }, () => null))
+const finalImages = ref<string[]>([])
+
+// 导出设置
+const tileSize = ref<number>(1024)
+const exportFormat = ref<'png' | 'jpeg'>('png')
+const jpegQuality = ref<number>(0.92)
+const formatOptions: { label: string, value: 'png' | 'jpeg' }[] = [
+  { label: 'PNG（无损）', value: 'png' },
+  { label: 'JPEG（有损）', value: 'jpeg' },
+]
+
+const isGenerating = ref<boolean>(false)
+
+// 裁剪相关
+const enableManualCrop = ref<boolean>(false)
+const cropperRef = ref<any>(null)
+
+function handleFileChange(data: { file: UploadFileInfo }) {
+  const file = data.file.file
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = async (e) => {
+      originalImage.value = e.target?.result as string
+      await updateImageMetaAndDefaultCrop()
+      finalImages.value = [] // Reset final images
+      additionalImages.value = Array.from({ length: 9 }, () => null) // Reset additional images
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+async function updateImageMetaAndDefaultCrop() {
+  if (!originalImage.value) return
+  const img = new Image()
+  img.src = originalImage.value
+  await new Promise(resolve => img.onload = resolve)
+  // 默认：如果不是正方形，打开手动裁剪；但也先生成一次中心裁剪的预览
+  enableManualCrop.value = img.width !== img.height
+  await generatePreview()
+}
+
+async function generatePreview() {
+  if (!originalImage.value) return
+
+  const img = new Image()
+  img.src = originalImage.value
+  await new Promise(resolve => img.onload = resolve)
+
+  // 创建方形预览图
+  const size = Math.min(img.width, img.height)
+  const tempCanvas = document.createElement('canvas')
+  const tempCtx = tempCanvas.getContext('2d')
+
+  if (!tempCtx) return
+
+  const offsetX = (img.width - size) / 2
+  const offsetY = (img.height - size) / 2
+
+  tempCanvas.width = size
+  tempCanvas.height = size
+
+  tempCtx.drawImage(img, offsetX, offsetY, size, size, 0, 0, size, size)
+  croppedSquareImage.value = tempCanvas.toDataURL()
+
+  message.success('图片已准备就绪，可以查看九宫格预览')
+}
+
+function applyCrop() {
+  if (!enableManualCrop.value || !cropperRef.value) return
+  try {
+    const canvas: HTMLCanvasElement = cropperRef.value.getCroppedCanvas({
+      // 不做强制缩放，保持裁剪原分辨率
+      fillColor: '#fff',
+    })
+    if (!canvas) {
+      message.error('无法获取裁剪结果')
+      return
+    }
+    croppedSquareImage.value = exportFormat.value === 'jpeg'
+      ? canvas.toDataURL('image/jpeg', jpegQuality.value)
+      : canvas.toDataURL('image/png')
+    message.success('已应用裁剪')
+  } catch (e) {
+    console.error(e)
+    message.error('裁剪失败，请重试')
+  }
+}
+
+function resetCrop() {
+  cropperRef.value?.reset?.()
+}
+
+// 预览瓦片背景位置（背景图按 300% 缩放，位置采用 0/50/100%）
+function bgPosition(index: number) {
+  const row = Math.floor(index / 3)
+  const col = index % 3
+  const x = col * 50
+  const y = row * 50
+  return `${x}% ${y}%`
+}
+
+function handleAdditionalImageChange(data: { file: UploadFileInfo }, index: number) {
+  const file = data.file.file
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      additionalImages.value[index] = e.target?.result as string
+    }
+    reader.readAsDataURL(file)
+  }
+}
+
+async function generateFinalImages() {
+  const sourceUrl = croppedSquareImage.value || originalImage.value
+  if (!sourceUrl) {
+    message.error('请先上传一张图片')
+    return
+  }
+  isGenerating.value = true
+  finalImages.value = []
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) {
+    message.error('无法创建画布')
+    isGenerating.value = false
+    return
+  }
+
+  // 加载源图片（优先使用正方形预览）
+  const srcImg = new Image()
+  srcImg.src = sourceUrl
+  await new Promise(resolve => srcImg.onload = resolve)
+
+  // 源图的正方形区域
+  const s = Math.min(srcImg.width, srcImg.height)
+  const offX = (srcImg.width - s) / 2
+  const offY = (srcImg.height - s) / 2
+  const cellSrcSize = s / 3 // 每格源区域尺寸
+
+  try {
+    for (let i = 0; i < 9; i++) {
+      const row = Math.floor(i / 3)
+      const col = i % 3
+      const srcX = offX + col * cellSrcSize
+      const srcY = offY + row * cellSrcSize
+
+      // 附加图片（如果有）
+      let additionalImg: HTMLImageElement | null = null
+      let additionalHeight = 0
+      if (additionalImages.value[i]) {
+        additionalImg = new Image()
+        additionalImg.src = additionalImages.value[i] as string
+        await new Promise(resolve => additionalImg!.onload = resolve)
+        additionalHeight = (tileSize.value / additionalImg.width) * additionalImg.height
+      }
+
+      // 画布尺寸
+      canvas.width = tileSize.value
+      canvas.height = tileSize.value + additionalHeight
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      // 绘制主图格子
+      ctx.drawImage(
+        srcImg,
+        srcX,
+        srcY,
+        cellSrcSize,
+        cellSrcSize,
+        0,
+        0,
+        tileSize.value,
+        tileSize.value,
+      )
+
+      // 绘制附加图片
+      if (additionalImg) {
+        ctx.drawImage(
+          additionalImg,
+          0,
+          tileSize.value,
+          tileSize.value,
+          additionalHeight,
+        )
+      }
+
+      // 导出设置
+      const mime = exportFormat.value === 'png' ? 'image/png' : 'image/jpeg'
+      const dataUrl = exportFormat.value === 'jpeg'
+        ? canvas.toDataURL(mime, jpegQuality.value)
+        : canvas.toDataURL(mime)
+      finalImages.value.push(dataUrl)
+    }
+    message.success('九宫格图片已生成！可以单独下载每张图片')
+  } catch (e) {
+    console.error(e)
+    message.error('生成过程中出现问题，请重试')
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+function downloadImage(dataUrl: string, filename: string) {
+  const link = document.createElement('a')
+  link.href = dataUrl
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+// 计算是否存在任一附加图片
+const hasAnyAdditional = computed(() => additionalImages.value.some(Boolean))
+
+function removeAllAdditionalImages() {
+  if (!hasAnyAdditional.value) return
+  additionalImages.value = Array.from({ length: 9 }, () => null)
+  message.success('已清空所有附加图片')
+}
+
+function removeAdditionalImage(index: number) {
+  additionalImages.value[index] = null
+  message.success('已删除附加图片')
+}
+
+function dataUrlToBlob(dataUrl: string): Blob {
+  const arr = dataUrl.split(',')
+  const mimeMatch = arr[0].match(/:(.*?);/)
+  const mime = mimeMatch ? mimeMatch[1] : 'application/octet-stream'
+  const bstr = atob(arr[1])
+  let n = bstr.length
+  const u8arr = new Uint8Array(n)
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n)
+  }
+  return new Blob([u8arr], { type: mime })
+}
+
+async function downloadAllAsZip() {
+  if (finalImages.value.length === 0) {
+    message.error('请先生成九宫格图片')
+    return
+  }
+  try {
+    const zip = new JSZip()
+    finalImages.value.forEach((dataUrl, index) => {
+      const blob = dataUrlToBlob(dataUrl)
+      zip.file(getFileName(index), blob)
+    })
+    const content = await zip.generateAsync({ type: 'blob' })
+    saveAs(content, 'dynamic-nine-grid.zip')
+    message.success('ZIP 已开始下载')
+  } catch (e) {
+    console.error(e)
+    message.error('打包失败，请重试')
+  }
+}
+
+// 下载文件名（根据导出格式）
+function getFileName(index: number) {
+  const ext = exportFormat.value === 'png' ? 'png' : 'jpg'
+  return `grid_image_${index + 1}.${ext}`
+}
+</script>
+
 <template>
   <div class="dynamic-nine-grid-tool">
-    <n-card title="动态九图生成器">
-      <n-space vertical size="large">
+    <NCard title="动态九图生成器">
+      <NSpace vertical size="large">
         <div class="upload-section">
-          <n-upload
+          <NUpload
             action="#"
             :show-file-list="false"
-            @change="handleFileChange"
             accept="image/*"
+            @change="handleFileChange"
           >
-            <n-button type="primary">上传原始图片</n-button>
-          </n-upload>
-          <n-text depth="3" class="mt-1">
+            <NButton type="primary">
+              上传原始图片
+            </NButton>
+          </NUpload>
+          <NText depth="3" class="mt-1">
             请上传一张方形或长方形图片，将会自动分割成3x3的九宫格图片
-          </n-text>
+          </NText>
         </div>
         <div v-if="originalImage" class="two-column-layout">
           <div class="left-pane">
             <div class="cropper-container">
               <div class="cropper-toolbar">
                 <div class="toolbar-left">
-                  <n-text depth="3">手动裁剪</n-text>
-                  <n-switch v-model:value="enableManualCrop" />
+                  <NText depth="3">
+                    手动裁剪
+                  </NText>
+                  <NSwitch v-model:value="enableManualCrop" />
                 </div>
                 <div class="toolbar-actions">
-                  <n-button size="small" tertiary @click="generatePreview">自动中心裁剪</n-button>
-                  <n-button size="small" type="primary" @click="applyCrop" :disabled="!enableManualCrop">应用裁剪</n-button>
-                  <n-button size="small" @click="resetCrop" :disabled="!enableManualCrop">重置裁剪</n-button>
-                  <n-upload
+                  <NButton size="small" tertiary @click="generatePreview">
+                    自动中心裁剪
+                  </NButton>
+                  <NButton size="small" type="primary" :disabled="!enableManualCrop" @click="applyCrop">
+                    应用裁剪
+                  </NButton>
+                  <NButton size="small" :disabled="!enableManualCrop" @click="resetCrop">
+                    重置裁剪
+                  </NButton>
+                  <NUpload
                     action="#"
                     :show-file-list="false"
-                    @change="handleFileChange"
                     accept="image/*"
+                    @change="handleFileChange"
                   >
-                    <n-button size="small" type="warning">重新选择图片</n-button>
-                  </n-upload>
+                    <NButton size="small" type="warning">
+                      重新选择图片
+                    </NButton>
+                  </NUpload>
                 </div>
               </div>
               <div class="image-preview">
@@ -49,47 +340,59 @@
                   :responsive="true"
                   style="width: 100%; height: 480px;"
                 />
-                <img v-else :src="originalImage || ''" alt="原始图片" class="original-image-preview" />
+                <img v-else :src="originalImage || ''" alt="原始图片" class="original-image-preview">
               </div>
             </div>
           </div>
 
-          <div class="right-pane" v-if="croppedSquareImage">
+          <div v-if="croppedSquareImage" class="right-pane">
             <div class="preview-section">
-              <n-h4>九宫格预览</n-h4>
-              <n-text depth="3">
+              <NH4>九宫格预览</NH4>
+              <NText depth="3">
                 九宫格预览显示了图片分割后的效果，每个格子都可以添加下方图片
-              </n-text>
+              </NText>
 
               <div class="whole-image-preview">
-                <img :src="croppedSquareImage" alt="完整预览" class="whole-preview-img" />
+                <img :src="croppedSquareImage" alt="完整预览" class="whole-preview-img">
                 <div class="grid-overlay">
                   <div v-for="i in 9" :key="`overlay-${i}`" class="grid-overlay-cell">
-                    <div class="cell-number">{{ i }}</div>
+                    <div class="cell-number">
+                      {{ i }}
+                    </div>
                   </div>
                 </div>
               </div>
 
               <!-- 导出设置 -->
               <div class="export-settings">
-                <n-text depth="3">导出设置：</n-text>
+                <NText depth="3">
+                  导出设置：
+                </NText>
                 <div class="export-item">
-                  <n-text depth="3">单张边长</n-text>
-                  <n-input-number v-model:value="tileSize" :min="128" :max="4096" :step="128" />
-                  <n-text depth="3">px</n-text>
+                  <NText depth="3">
+                    单张边长
+                  </NText>
+                  <NInputNumber v-model:value="tileSize" :min="128" :max="4096" :step="128" />
+                  <NText depth="3">
+                    px
+                  </NText>
                 </div>
                 <div class="export-item">
-                  <n-text depth="3">格式</n-text>
-                  <n-select v-model:value="exportFormat" :options="formatOptions" style="min-width: 120px" />
+                  <NText depth="3">
+                    格式
+                  </NText>
+                  <NSelect v-model:value="exportFormat" :options="formatOptions" style="min-width: 120px" />
                 </div>
-                <div class="export-item" v-if="exportFormat === 'jpeg'">
-                  <n-text depth="3">JPEG质量</n-text>
-                  <n-input-number v-model:value="jpegQuality" :min="0.1" :max="1" :step="0.05" />
+                <div v-if="exportFormat === 'jpeg'" class="export-item">
+                  <NText depth="3">
+                    JPEG质量
+                  </NText>
+                  <NInputNumber v-model:value="jpegQuality" :min="0.1" :max="1" :step="0.05" />
                 </div>
                 <div class="export-item">
-                  <n-button tertiary size="small" @click="removeAllAdditionalImages" :disabled="!hasAnyAdditional">
+                  <NButton tertiary size="small" :disabled="!hasAnyAdditional" @click="removeAllAdditionalImages">
                     清空所有下方图片
-                  </n-button>
+                  </NButton>
                 </div>
               </div>
 
@@ -100,337 +403,74 @@
                   class="grid-item-container"
                 >
                   <div class="grid-image-container">
-                    <div class="grid-position-indicator">第{{ i }}格</div>
+                    <div class="grid-position-indicator">
+                      第{{ i }}格
+                    </div>
                     <div class="grid-image-wrapper">
                       <div
                         class="grid-bg-tile"
-                        :style="{ backgroundImage: 'url(' + croppedSquareImage + ')', backgroundPosition: bgPosition(i-1) }"
-                      ></div>
+                        :style="{ backgroundImage: `url(${croppedSquareImage})`, backgroundPosition: bgPosition(i - 1) }"
+                      />
                     </div>
                   </div>
-                  <div v-if="additionalImages[i-1]" class="additional-image-preview">
-                    <img :src="additionalImages[i-1] || ''" alt="附加图片" />
+                  <div v-if="additionalImages[i - 1]" class="additional-image-preview">
+                    <img :src="additionalImages[i - 1] || ''" alt="附加图片">
                   </div>
                   <div class="grid-controls">
-                    <n-upload
+                    <NUpload
                       action="#"
                       :show-file-list="false"
-                      @change="(data) => handleAdditionalImageChange(data, i - 1)"
                       accept="image/*"
+                      @change="(data) => handleAdditionalImageChange(data, i - 1)"
                     >
-                      <n-button size="tiny">添加下方图片</n-button>
-                    </n-upload>
-                    <n-button
-                      v-if="additionalImages[i-1]"
+                      <NButton size="tiny">
+                        添加下方图片
+                      </NButton>
+                    </NUpload>
+                    <NButton
+                      v-if="additionalImages[i - 1]"
                       size="tiny"
                       type="error"
-                      @click="() => removeAdditionalImage(i-1)"
+                      @click="() => removeAdditionalImage(i - 1)"
                     >
                       删除下方图片
-                    </n-button>
+                    </NButton>
                   </div>
                 </div>
               </div>
               <div class="action-buttons">
-                <n-button @click="generateFinalImages" type="success" class="mt-2" :loading="isGenerating">生成九张图片</n-button>
-                <n-button @click="downloadAllAsZip" type="info" class="mt-2" :disabled="finalImages.length === 0 || isGenerating">
+                <NButton type="success" class="mt-2" :loading="isGenerating" @click="generateFinalImages">
+                  生成九张图片
+                </NButton>
+                <NButton type="info" class="mt-2" :disabled="finalImages.length === 0 || isGenerating" @click="downloadAllAsZip">
                   打包下载 ZIP
-                </n-button>
+                </NButton>
               </div>
             </div>
           </div>
         </div>
         <div v-if="finalImages.length > 0" class="final-images-section">
-          <n-h4>最终图片</n-h4>
-          <n-text depth="3">
+          <NH4>最终图片</NH4>
+          <NText depth="3">
             以下是生成的九宫格图片，您可以单独下载每张图片
-          </n-text>
+          </NText>
           <div class="final-images-grid">
             <div v-for="(imgDataUrl, index) in finalImages" :key="`final-${index}`" class="final-image-item">
-              <img :src="imgDataUrl" :alt="`最终图片 ${index + 1}`" />
-              <div class="image-number">{{ index + 1 }}</div>
-              <n-button size="small" @click="() => downloadImage(imgDataUrl, getFileName(index))" class="download-button">
+              <img :src="imgDataUrl" :alt="`最终图片 ${index + 1}`">
+              <div class="image-number">
+                {{ index + 1 }}
+              </div>
+              <NButton size="small" class="download-button" @click="() => downloadImage(imgDataUrl, getFileName(index))">
                 下载
-              </n-button>
+              </NButton>
             </div>
           </div>
         </div>
-
-      </n-space>
-    </n-card>
+      </NSpace>
+    </NCard>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { NCard, NButton, NUpload, NSpace, NH4, NText, NInputNumber, NSelect, NSwitch, useMessage } from 'naive-ui';
-import type { UploadFileInfo } from 'naive-ui';
-import VueCropper from 'vue-cropperjs';
-import JSZip from 'jszip';
-import { saveAs } from 'file-saver';
-
-const message = useMessage();
-
-const originalImage = ref<string | null>(null);
-const croppedSquareImage = ref<string | null>(null);
-
-const additionalImages = ref<(string | null)[]>(Array(9).fill(null));
-const finalImages = ref<string[]>([]);
-
-// 导出设置
-const tileSize = ref<number>(1024);
-const exportFormat = ref<'png' | 'jpeg'>('png');
-const jpegQuality = ref<number>(0.92);
-const formatOptions: { label: string; value: 'png' | 'jpeg' }[] = [
-  { label: 'PNG（无损）', value: 'png' },
-  { label: 'JPEG（有损）', value: 'jpeg' },
-];
-
-const isGenerating = ref<boolean>(false);
-
-// 裁剪相关
-const enableManualCrop = ref<boolean>(false);
-const cropperRef = ref<any>(null);
-
-const handleFileChange = (data: { file: UploadFileInfo }) => {
-  const file = data.file.file;
-  if (file) {
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      originalImage.value = e.target?.result as string;
-      await updateImageMetaAndDefaultCrop();
-      finalImages.value = []; // Reset final images
-      additionalImages.value = Array(9).fill(null); // Reset additional images
-    };
-    reader.readAsDataURL(file);
-  }
-};
-
-const updateImageMetaAndDefaultCrop = async () => {
-  if (!originalImage.value) return;
-  const img = new Image();
-  img.src = originalImage.value;
-  await new Promise(resolve => img.onload = resolve);
-  // 默认：如果不是正方形，打开手动裁剪；但也先生成一次中心裁剪的预览
-  enableManualCrop.value = img.width !== img.height;
-  await generatePreview();
-};
-
-const generatePreview = async () => {
-  if (!originalImage.value) return;
-
-  const img = new Image();
-  img.src = originalImage.value;
-  await new Promise(resolve => img.onload = resolve);
-
-  // 创建方形预览图
-  const size = Math.min(img.width, img.height);
-  const tempCanvas = document.createElement('canvas');
-  const tempCtx = tempCanvas.getContext('2d');
-
-  if (!tempCtx) return;
-
-  const offsetX = (img.width - size) / 2;
-  const offsetY = (img.height - size) / 2;
-
-  tempCanvas.width = size;
-  tempCanvas.height = size;
-
-  tempCtx.drawImage(img, offsetX, offsetY, size, size, 0, 0, size, size);
-  croppedSquareImage.value = tempCanvas.toDataURL();
-
-  message.success('图片已准备就绪，可以查看九宫格预览');
-};
-
-const applyCrop = () => {
-  if (!enableManualCrop.value || !cropperRef.value) return;
-  try {
-    const canvas: HTMLCanvasElement = cropperRef.value.getCroppedCanvas({
-      // 不做强制缩放，保持裁剪原分辨率
-      fillColor: '#fff'
-    });
-    if (!canvas) {
-      message.error('无法获取裁剪结果');
-      return;
-    }
-    croppedSquareImage.value = exportFormat.value === 'jpeg'
-      ? canvas.toDataURL('image/jpeg', jpegQuality.value)
-      : canvas.toDataURL('image/png');
-    message.success('已应用裁剪');
-  } catch (e) {
-    console.error(e);
-    message.error('裁剪失败，请重试');
-  }
-};
-
-const resetCrop = () => {
-  cropperRef.value?.reset?.();
-};
-
-// 预览瓦片背景位置（背景图按 300% 缩放，位置采用 0/50/100%）
-const bgPosition = (index: number) => {
-  const row = Math.floor(index / 3);
-  const col = index % 3;
-  const x = col * 50;
-  const y = row * 50;
-  return `${x}% ${y}%`;
-};
-
-const handleAdditionalImageChange = (data: { file: UploadFileInfo }, index: number) => {
-  const file = data.file.file;
-  if (file) {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      additionalImages.value[index] = e.target?.result as string;
-    };
-    reader.readAsDataURL(file);
-  }
-};
-
-const generateFinalImages = async () => {
-  const sourceUrl = croppedSquareImage.value || originalImage.value;
-  if (!sourceUrl) {
-    message.error('请先上传一张图片');
-    return;
-  }
-  isGenerating.value = true;
-  finalImages.value = [];
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-
-  if (!ctx) {
-    message.error('无法创建画布');
-    isGenerating.value = false;
-    return;
-  }
-
-  // 加载源图片（优先使用正方形预览）
-  const srcImg = new Image();
-  srcImg.src = sourceUrl;
-  await new Promise(resolve => srcImg.onload = resolve);
-
-  // 源图的正方形区域
-  const s = Math.min(srcImg.width, srcImg.height);
-  const offX = (srcImg.width - s) / 2;
-  const offY = (srcImg.height - s) / 2;
-  const cellSrcSize = s / 3; // 每格源区域尺寸
-
-  try {
-    for (let i = 0; i < 9; i++) {
-      const row = Math.floor(i / 3);
-      const col = i % 3;
-      const srcX = offX + col * cellSrcSize;
-      const srcY = offY + row * cellSrcSize;
-
-      // 附加图片（如果有）
-      let additionalImg: HTMLImageElement | null = null;
-      let additionalHeight = 0;
-      if (additionalImages.value[i]) {
-        additionalImg = new Image();
-        additionalImg.src = additionalImages.value[i] as string;
-        await new Promise(resolve => additionalImg!.onload = resolve);
-        additionalHeight = (tileSize.value / additionalImg.width) * additionalImg.height;
-      }
-
-      // 画布尺寸
-      canvas.width = tileSize.value;
-      canvas.height = tileSize.value + additionalHeight;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      // 绘制主图格子
-      ctx.drawImage(
-        srcImg,
-        srcX, srcY, cellSrcSize, cellSrcSize,
-        0, 0, tileSize.value, tileSize.value
-      );
-
-      // 绘制附加图片
-      if (additionalImg) {
-        ctx.drawImage(
-          additionalImg,
-          0, tileSize.value, tileSize.value, additionalHeight
-        );
-      }
-
-      // 导出设置
-      const mime = exportFormat.value === 'png' ? 'image/png' : 'image/jpeg';
-      const dataUrl = exportFormat.value === 'jpeg'
-        ? canvas.toDataURL(mime, jpegQuality.value)
-        : canvas.toDataURL(mime);
-      finalImages.value.push(dataUrl);
-    }
-    message.success('九宫格图片已生成！可以单独下载每张图片');
-  } catch (e) {
-    console.error(e);
-    message.error('生成过程中出现问题，请重试');
-  } finally {
-    isGenerating.value = false;
-  }
-};
-
-const downloadImage = (dataUrl: string, filename: string) => {
-  const link = document.createElement('a');
-  link.href = dataUrl;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-// 计算是否存在任一附加图片
-const hasAnyAdditional = computed(() => additionalImages.value.some(Boolean));
-
-const removeAllAdditionalImages = () => {
-  if (!hasAnyAdditional.value) return;
-  additionalImages.value = Array(9).fill(null);
-  message.success('已清空所有附加图片');
-};
-
-const removeAdditionalImage = (index: number) => {
-  additionalImages.value[index] = null;
-  message.success('已删除附加图片');
-};
-
-const dataUrlToBlob = (dataUrl: string): Blob => {
-  const arr = dataUrl.split(',');
-  const mimeMatch = arr[0].match(/:(.*?);/);
-  const mime = mimeMatch ? mimeMatch[1] : 'application/octet-stream';
-  const bstr = atob(arr[1]);
-  let n = bstr.length;
-  const u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new Blob([u8arr], { type: mime });
-};
-
-const downloadAllAsZip = async () => {
-  if (finalImages.value.length === 0) {
-    message.error('请先生成九宫格图片');
-    return;
-  }
-  try {
-    const zip = new JSZip();
-    finalImages.value.forEach((dataUrl, index) => {
-      const blob = dataUrlToBlob(dataUrl);
-      zip.file(getFileName(index), blob);
-    });
-    const content = await zip.generateAsync({ type: 'blob' });
-    saveAs(content, 'dynamic-nine-grid.zip');
-    message.success('ZIP 已开始下载');
-  } catch (e) {
-    console.error(e);
-    message.error('打包失败，请重试');
-  }
-};
-
-// 下载文件名（根据导出格式）
-const getFileName = (index: number) => {
-  const ext = exportFormat.value === 'png' ? 'png' : 'jpg';
-  return `grid_image_${index + 1}.${ext}`;
-};
-</script>
-
 <style scoped>
 .dynamic-nine-grid-tool {
   max-width: 1200px;
diff --git a/src/views/obs/DanmakuVoteOBS.vue b/src/views/obs/DanmakuVoteOBS.vue
index c312f2b..659be88 100644
--- a/src/views/obs/DanmakuVoteOBS.vue
+++ b/src/views/obs/DanmakuVoteOBS.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { EventModel, VoteConfig, VoteOBSData, VoteOption } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { VOTE_API_URL } from '@/data/constants'
-import { useDanmakuClient } from '@/store/useDanmakuClient'
+import type { EventModel, VoteConfig, VoteOBSData, VoteOption } from '@/api/api-models'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { clearInterval, setInterval } from 'worker-timers'
+import { QueryGetAPI } from '@/api/query'
+import { VOTE_API_URL } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
 
 const props = defineProps<{
   roomId?: number
@@ -37,7 +37,7 @@ async function fetchVoteData() {
       voteData.value = result.data
       // 更新每个选项的百分比
       if (voteData.value && voteData.value.options && voteData.value.totalVotes > 0) {
-        voteData.value.options.forEach(option => {
+        voteData.value.options.forEach((option) => {
           option.percentage = calculatePercentage(option.count, voteData.value!.totalVotes)
         })
       }
@@ -150,13 +150,13 @@ onMounted(async () => {
     :class="[
       `theme-${theme}`,
       `position-${voteData.displayPosition || 'right'}`,
-      { 'rounded': voteData.roundedCorners }
+      { rounded: voteData.roundedCorners },
     ]"
     :style="{
       '--bg-color': voteData.backgroundColor || '#1e1e2e',
       '--text-color': voteData.textColor || '#ffffff',
       '--option-color': voteData.optionColor || '#89b4fa',
-      '--bg-image': voteData.backgroundImage ? `url(${voteData.backgroundImage})` : 'none'
+      '--bg-image': voteData.backgroundImage ? `url(${voteData.backgroundImage})` : 'none',
     }"
   >
     <div class="vote-container">
@@ -357,4 +357,4 @@ onMounted(async () => {
   background-color: rgba(0, 0, 0, 0.6);
   box-shadow: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs/DanmujiOBS.vue b/src/views/obs/DanmujiOBS.vue
index 81f5fde..a90ce36 100644
--- a/src/views/obs/DanmujiOBS.vue
+++ b/src/views/obs/DanmujiOBS.vue
@@ -1,45 +1,51 @@
 <script setup lang="ts">
-import { useDanmakuClient } from '@/store/useDanmakuClient';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-import MessageRender from './blivechat/MessageRender.vue';
+import type { EventModel } from '@/api/api-models'
+import { NAlert } from 'naive-ui'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 // @ts-ignore
-import * as constants from './blivechat/constants';
+import { DownloadConfig, GetConfigHash, useAccount } from '@/api/account'
+import { EventDataTypes } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { defaultDanmujiCss, VTSURU_API_URL } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
 // @ts-ignore
-import { useAccount, DownloadConfig, GetConfigHash } from '@/api/account';
-import { QueryGetAPI } from '@/api/query';
-import { defaultDanmujiCss, VTSURU_API_URL } from '@/data/constants';
-import { useWebRTC } from '@/store/useRTC';
-import { NAlert } from 'naive-ui';
-import { useRoute } from 'vue-router';
+import * as constants from './blivechat/constants'
+import MessageRender from './blivechat/MessageRender.vue'
 // @ts-ignore
-import * as pronunciation from './blivechat/utils/pronunciation';
-import { EventDataTypes, EventModel } from '@/api/api-models';
+import * as pronunciation from './blivechat/utils/pronunciation'
 // @ts-ignore
-import * as trie from './blivechat/utils/trie';
+import * as trie from './blivechat/utils/trie'
 
 export interface DanmujiConfig {
-  minGiftPrice: number,
-  showDanmaku: boolean,
-  showGift: boolean,
-  showGiftName: boolean,
-  mergeSimilarDanmaku: boolean,
-  mergeGift: boolean,
-  maxNumber: number,
+  minGiftPrice: number
+  showDanmaku: boolean
+  showGift: boolean
+  showGiftName: boolean
+  mergeSimilarDanmaku: boolean
+  mergeGift: boolean
+  maxNumber: number
 
-  blockLevel: number,
-  blockKeywords: string,
-  blockUsers: string,
-  blockMedalLevel: number,
+  blockLevel: number
+  blockKeywords: string
+  blockUsers: string
+  blockMedalLevel: number
 
-  giftUsernamePronunciation: string,
+  giftUsernamePronunciation: string
   importPresetCss: boolean
 
   emoticons: {
-    keyword: string,
+    keyword: string
     url: string
   }[]
 }
 
+const props = defineProps<{
+  active?: boolean
+  visible?: boolean
+  config?: DanmujiConfig
+}>()
+
 // 默认配置
 const defaultConfig: DanmujiConfig = {
   minGiftPrice: 0.1,
@@ -58,17 +64,11 @@ const defaultConfig: DanmujiConfig = {
   giftUsernamePronunciation: '',
   importPresetCss: false,
 
-  emoticons: []
+  emoticons: [],
 }
 
 defineExpose({ setCss, testAddMessage })
-const props = defineProps<{
-  active?: boolean,
-  visible?: boolean,
-  config?: DanmujiConfig
-}>()
-
-const customCss = useStorage('danmuji-css', '');
+const customCss = useStorage('danmuji-css', '')
 
 const isOBS = computed(() => {
   // @ts-ignore
@@ -139,10 +139,10 @@ async function onAddText(event: EventModel, command: unknown) {
     authorName: event.uname,
     authorType: getAuthorType(event.open_id, event.guard_level),
     content: event.msg,
-    richContent: richContent,
+    richContent,
     privilegeType: event.guard_level,
     repeated: 1,
-    translation: ''
+    translation: '',
   }
   messageRender.value.addMessage(message)
 }
@@ -173,9 +173,9 @@ function onAddGift(event: EventModel, command: unknown) {
     time: new Date(),
     authorName: event.uname,
     authorNamePronunciation: getPronunciation(event.uname),
-    price: price,
+    price,
     giftName: event.msg,
-    num: event.num
+    num: event.num,
   }
   messageRender.value.addMessage(message)
 }
@@ -196,7 +196,7 @@ function onAddMember(event: EventModel, command: unknown) {
     authorName: event.uname,
     authorNamePronunciation: getPronunciation(event.uname),
     privilegeType: event.guard_level,
-    title: '新舰长'
+    title: '新舰长',
   }
   messageRender.value.addMessage(message)
 }
@@ -222,7 +222,7 @@ function onAddSuperChat(event: EventModel, command: unknown) {
     price: event.price,
     time: new Date(),
     content: event.msg.trim(),
-    translation: ''
+    translation: '',
   }
   messageRender.value.addMessage(message)
 }
@@ -231,29 +231,29 @@ function onAddSuperChat(event: EventModel, command: unknown) {
  * 处理SC撤回
  */
 function onDelSuperChat(event: EventModel, command: unknown) {
-  let messageIdsToDelete: string[] = [];
+  let messageIdsToDelete: string[] = []
 
   // 尝试从command中获取需要删除的SC ID
   if (command && typeof command === 'object' && 'data' in command) {
-    const commandData = command.data;
+    const commandData = command.data
     if (commandData && typeof commandData === 'object') {
       if ('message_ids' in commandData && Array.isArray(commandData.message_ids)) {
-        messageIdsToDelete = commandData.message_ids.map(id => String(id));
+        messageIdsToDelete = commandData.message_ids.map(id => String(id))
       } else if ('message_id' in commandData) {
-        messageIdsToDelete.push(String(commandData.message_id));
+        messageIdsToDelete.push(String(commandData.message_id))
       }
     }
   }
   // 尝试使用消息内容作为ID
   else if (event.msg) {
-    messageIdsToDelete.push(event.msg);
+    messageIdsToDelete.push(event.msg)
   }
 
   if (messageIdsToDelete.length > 0) {
-    console.log(`正在删除SC，ID: ${messageIdsToDelete.join(', ')}`);
-    messageIdsToDelete.forEach(id => messageRender.value.deleteMessage(id));
+    console.log(`正在删除SC，ID: ${messageIdsToDelete.join(', ')}`)
+    messageIdsToDelete.forEach(id => messageRender.value.deleteMessage(id))
   } else {
-    console.warn("收到删除SC事件但无法确定要删除的消息ID", event, command);
+    console.warn('收到删除SC事件但无法确定要删除的消息ID', event, command)
   }
 }
 
@@ -270,11 +270,11 @@ function getAuthorType(open_id: string, guard_level: number): number {
   }
 }
 
-type RichContentType = {
-  type: number,
-  text: string,
-  url?: string,
-  width?: number,
+interface RichContentType {
+  type: number
+  text: string
+  url?: string
+  width?: number
   height?: number
 }
 
@@ -289,9 +289,9 @@ async function getRichContent(data: EventModel): Promise<RichContentType[]> {
     richContent.push({
       type: constants.CONTENT_TYPE_IMAGE,
       text: data.msg,
-      url: data.emoji + '@256w_256h_1e_1c',
+      url: `${data.emoji}@256w_256h_1e_1c`,
       width: 256,
-      height: 256
+      height: 256,
     })
     return richContent
   }
@@ -300,7 +300,7 @@ async function getRichContent(data: EventModel): Promise<RichContentType[]> {
   if (config.value.emoticons.length === 0 && textEmoticons.length === 0) {
     richContent.push({
       type: constants.CONTENT_TYPE_TEXT,
-      text: data.msg
+      text: data.msg,
     })
     return richContent
   }
@@ -320,7 +320,7 @@ async function getRichContent(data: EventModel): Promise<RichContentType[]> {
     if (pos !== startPos) {
       richContent.push({
         type: constants.CONTENT_TYPE_TEXT,
-        text: data.msg.slice(startPos, pos)
+        text: data.msg.slice(startPos, pos),
       })
     }
 
@@ -330,7 +330,7 @@ async function getRichContent(data: EventModel): Promise<RichContentType[]> {
       text: matchEmoticon.keyword,
       url: matchEmoticon.url,
       width: 0,
-      height: 0
+      height: 0,
     })
     pos += matchEmoticon.keyword.length
     startPos = pos
@@ -340,7 +340,7 @@ async function getRichContent(data: EventModel): Promise<RichContentType[]> {
   if (pos !== startPos) {
     richContent.push({
       type: constants.CONTENT_TYPE_TEXT,
-      text: data.msg.slice(startPos, pos)
+      text: data.msg.slice(startPos, pos),
     })
   }
 
@@ -368,7 +368,7 @@ async function fillImageContentSizes(richContent: RichContentType[]) {
   // 并行加载所有图片获取尺寸
   const promises = []
   for (const url of urlSizeMap.keys()) {
-    promises.push(new Promise<void>(resolve => {
+    promises.push(new Promise<void>((resolve) => {
       const img = document.createElement('img')
       img.onload = () => {
         const size = urlSizeMap.get(url)
@@ -497,27 +497,27 @@ async function testAddMessage(rawEventData: Partial<EventModel> & { type: EventD
     fans_medal_wearing_status: rawEventData.fans_medal_wearing_status ?? false,
     emoji: rawEventData.emoji,
     ouid: rawEventData.ouid ?? '',
-    ...(rawEventData.data ? { data: rawEventData.data } : {})
-  };
+    ...(rawEventData.data ? { data: rawEventData.data } : {}),
+  }
 
   switch (event.type) {
     case EventDataTypes.Message:
-      await onAddText(event, null);
-      break;
+      await onAddText(event, null)
+      break
     case EventDataTypes.Gift:
-      onAddGift(event, null);
-      break;
+      onAddGift(event, null)
+      break
     case EventDataTypes.Guard:
-      onAddMember(event, null);
-      break;
+      onAddMember(event, null)
+      break
     case EventDataTypes.SC:
-      onAddSuperChat(event, null);
-      break;
+      onAddSuperChat(event, null)
+      break
     case EventDataTypes.SCDel:
-      onDelSuperChat(event, null);
-      break;
+      onDelSuperChat(event, null)
+      break
     default:
-      console.warn('Unsupported test event type:', event.type);
+      console.warn('Unsupported test event type:', event.type)
   }
 }
 // --- 结束修改测试方法 ---
@@ -526,7 +526,7 @@ async function testAddMessage(rawEventData: Partial<EventModel> & { type: EventD
  * 添加系统通知消息
  */
 function addSystemNotice(message: string) {
-  if (!messageRender.value) return;
+  if (!messageRender.value) return
 
   const systemMessage = {
     id: `system-${Date.now()}`,
@@ -538,67 +538,67 @@ function addSystemNotice(message: string) {
     content: message,
     richContent: [{
       type: constants.CONTENT_TYPE_TEXT,
-      text: message
+      text: message,
     }],
     privilegeType: 0,
     repeated: 1,
     translation: '',
-    isSystem: true // 添加标记以便在UI中特殊处理
+    isSystem: true, // 添加标记以便在UI中特殊处理
   }
 
   messageRender.value.addMessage(systemMessage)
 }
 
-let configHashCheckTimer: ReturnType<typeof setInterval> | null = null;
-let currentConfigHash: string | null = null;
+let configHashCheckTimer: ReturnType<typeof setInterval> | null = null
+let currentConfigHash: string | null = null
 
 // 从服务器获取配置
 async function getConfigFromServer() {
   try {
-    const result = await DownloadConfig<DanmujiConfig>('danmuji-config');
+    const result = await DownloadConfig<DanmujiConfig>('danmuji-config')
     if (result.status === 'success' && result.data) {
-      Object.assign(config.value, result.data);
-      console.log('已从服务器获取弹幕姬配置');
-      addSystemNotice('配置已从服务器更新');
-      return true;
+      Object.assign(config.value, result.data)
+      console.log('已从服务器获取弹幕姬配置')
+      addSystemNotice('配置已从服务器更新')
+      return true
     } else if (result.status === 'notfound') {
-      console.log('服务器上未找到弹幕姬配置');
+      console.log('服务器上未找到弹幕姬配置')
     } else {
-      console.error(`获取配置失败: ${result.msg}`);
+      console.error(`获取配置失败: ${result.msg}`)
     }
   } catch (error) {
-    console.error('获取配置文件出错:', error);
+    console.error('获取配置文件出错:', error)
   }
-  return false;
+  return false
 }
 
 // 检查配置文件哈希值
 async function checkConfigHash() {
-  if (!isOBS.value) return;
+  if (!isOBS.value) return
 
   try {
-    const hash = await GetConfigHash('danmuji-config');
+    const hash = await GetConfigHash('danmuji-config')
     if (hash && hash !== currentConfigHash) {
-      console.log('配置文件已更新，正在获取新配置...');
-      currentConfigHash = hash;
-      await getConfigFromServer();
+      console.log('配置文件已更新，正在获取新配置...')
+      currentConfigHash = hash
+      await getConfigFromServer()
     }
   } catch (error) {
-    console.error('检查配置哈希值出错:', error);
+    console.error('检查配置哈希值出错:', error)
   }
 }
 
 // 启动定时检查配置
 function startConfigHashCheck() {
-  if (!isOBS.value) return;
+  if (!isOBS.value) return
 
   // 先获取一次当前哈希值
-  GetConfigHash('danmuji-config').then(hash => {
-    currentConfigHash = hash;
-  });
+  GetConfigHash('danmuji-config').then((hash) => {
+    currentConfigHash = hash
+  })
 
   // 设置定时检查，每5秒检查一次
-  configHashCheckTimer = setInterval(checkConfigHash, 5000);
+  configHashCheckTimer = setInterval(checkConfigHash, 5000)
 }
 
 onMounted(async () => {
@@ -609,7 +609,7 @@ onMounted(async () => {
   client.onEvent('scDel', onDelSuperChat)
 
   try {
-    const result = await QueryGetAPI<{ keyword: string, url: string }[]>(VTSURU_API_URL + 'blivechat/emoticon')
+    const result = await QueryGetAPI<{ keyword: string, url: string }[]>(`${VTSURU_API_URL}blivechat/emoticon`)
     if (result.code === 200) {
       textEmoticons = result.data
     }
@@ -624,14 +624,14 @@ onMounted(async () => {
 
   // 显示弹幕姬加载完成的通知
   setTimeout(() => {
-    addSystemNotice('加载完成');
-  }, 300);
+    addSystemNotice('加载完成')
+  }, 300)
 
   // 在OBS环境下，获取配置并启动配置检查
   // @ts-ignore
   if (window.obsstudio) {
-    await getConfigFromServer();
-    startConfigHashCheck();
+    await getConfigFromServer()
+    startConfigHashCheck()
 
     messageRender.value?.setCss(defaultDanmujiCss)
     console.log('设置默认CSS')
@@ -649,8 +649,8 @@ onUnmounted(() => {
 
   // 清除定时器
   if (configHashCheckTimer) {
-    clearInterval(configHashCheckTimer);
-    configHashCheckTimer = null;
+    clearInterval(configHashCheckTimer)
+    configHashCheckTimer = null
   }
 })
 </script>
@@ -676,4 +676,3 @@ onUnmounted(() => {
   background-color: transparent;
 }
 </style>
-
diff --git a/src/views/obs/LiveLotteryOBS.vue b/src/views/obs/LiveLotteryOBS.vue
index cde8f84..2d78e58 100644
--- a/src/views/obs/LiveLotteryOBS.vue
+++ b/src/views/obs/LiveLotteryOBS.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { OpenLiveLotteryType, UpdateLiveLotteryUsersModel } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { LOTTERY_API_URL } from '@/data/constants'
+import type { UpdateLiveLotteryUsersModel } from '@/api/api-models'
 import { useElementSize } from '@vueuse/core'
 import { NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
+import { useRoute } from 'vue-router'
+import { OpenLiveLotteryType } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { LOTTERY_API_URL } from '@/data/constants'
 
 const props = defineProps<{
   code?: string
@@ -30,7 +31,7 @@ const isMoreThanContainer = computed(() => {
 
 async function getUsers() {
   try {
-    const data = await QueryGetAPI<UpdateLiveLotteryUsersModel>(LOTTERY_API_URL + 'live/get-users', {
+    const data = await QueryGetAPI<UpdateLiveLotteryUsersModel>(`${LOTTERY_API_URL}live/get-users`, {
       code: currentCode.value,
     })
     if (data.code == 200) {
@@ -90,7 +91,7 @@ onUnmounted(() => {
           >
             <img
               class="lottery-avatar"
-              :src="user.avatar + '@30h'"
+              :src="`${user.avatar}@30h`"
               referrerpolicy="no-referrer"
             >
             <div>
@@ -135,7 +136,7 @@ onUnmounted(() => {
                 height="50"
                 width="50"
                 style="border-radius: 50%"
-                :src="user.avatar + '@50h_50w'"
+                :src="`${user.avatar}@50h_50w`"
                 referrerpolicy="no-referrer"
               >
               <NText style="font-size: large">
@@ -165,7 +166,7 @@ onUnmounted(() => {
               height="50"
               width="50"
               style="border-radius: 50%"
-              :src="user.avatar + '@50h_50w'"
+              :src="`${user.avatar}@50h_50w`"
               referrerpolicy="no-referrer"
             >
             <NText style="font-size: large; margin-top: 10px">
diff --git a/src/views/obs/LiveRequestOBS.vue b/src/views/obs/LiveRequestOBS.vue
index b46109c..296f41b 100644
--- a/src/views/obs/LiveRequestOBS.vue
+++ b/src/views/obs/LiveRequestOBS.vue
@@ -5,16 +5,16 @@ import ClassicRequestOBS from './live-request/ClassicRequestOBS.vue'
 import FreshRequestOBS from './live-request/FreshRequestOBS.vue'
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
-  style?: 'classic' | 'fresh',
+  id?: number
+  active?: boolean
+  visible?: boolean
+  style?: 'classic' | 'fresh'
 }>()
 
 const route = useRoute()
 const currentId = computed(() => {
   const queryId = route.query.id
-  return props.id ?? (typeof queryId === 'string' ? parseInt(queryId) : undefined)
+  return props.id ?? (typeof queryId === 'string' ? Number.parseInt(queryId) : undefined)
 })
 
 // 渲染哪种样式
@@ -39,4 +39,4 @@ const styleType = computed(() => {
     :visible="visible"
     v-bind="$attrs"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/obs/LiveRequestProcessedOBS.vue b/src/views/obs/LiveRequestProcessedOBS.vue
index 99df2ea..23c825a 100644
--- a/src/views/obs/LiveRequestProcessedOBS.vue
+++ b/src/views/obs/LiveRequestProcessedOBS.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import {
-  QueueSortType,
+import type {
   Setting_LiveRequest,
-  SongRequestFrom,
-  SongRequestInfo
+  SongRequestInfo,
 } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { SONG_REQUEST_API_URL } from '@/data/constants'
 import { useElementSize } from '@vueuse/core'
 import { List } from 'linqts'
 import { NDivider, NEmpty, NMessageProvider, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
+import { useRoute } from 'vue-router'
+import {
+  QueueSortType,
+  SongRequestFrom,
+} from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { SONG_REQUEST_API_URL } from '@/data/constants'
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
+  id?: number
+  active?: boolean
+  visible?: boolean
 }>()
 
 const message = useMessage()
@@ -38,24 +40,23 @@ const songs = computed(() => {
   let result = new List(originSongs.value)
   switch (settings.value.sortType) {
     case QueueSortType.TimeFirst: {
-      result = result.ThenBy((q) => q.createAt)
+      result = result.ThenBy(q => q.createAt)
       break
     }
     case QueueSortType.GuardFirst: {
       result = result
-        .OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
-        .ThenBy((q) => q.createAt)
+        .OrderBy(q => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
+        .ThenBy(q => q.createAt)
       break
     }
     case QueueSortType.PaymentFist: {
-      result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
+      result = result.OrderByDescending(q => q.price ?? 0).ThenBy(q => q.createAt)
     }
     case QueueSortType.FansMedalFirst: {
-      result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
+      result = result.OrderByDescending(q => q.user?.fans_medal_level ?? 0).ThenBy(q => q.createAt)
     }
   }
   if (settings.value.isReverse) {
-     
     return result.Reverse().ToArray()
   } else {
     return result.ToArray()
@@ -70,8 +71,8 @@ const settings = ref<Setting_LiveRequest>({} as Setting_LiveRequest)
 
 async function get() {
   try {
-    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
-      SONG_REQUEST_API_URL + 'get-today',
+    const data = await QueryGetAPI<{ songs: SongRequestInfo[], setting: Setting_LiveRequest }>(
+      `${SONG_REQUEST_API_URL}get-today`,
       {
         id: currentId.value,
       },
@@ -80,7 +81,7 @@ async function get() {
       return data.data
     }
   } catch (err) { }
-  return {} as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
+  return {} as { songs: SongRequestInfo[], setting: Setting_LiveRequest }
 }
 const allowGuardTypes = computed(() => {
   const types = []
diff --git a/src/views/obs/MusicRequestOBS.vue b/src/views/obs/MusicRequestOBS.vue
index c983c55..5993822 100644
--- a/src/views/obs/MusicRequestOBS.vue
+++ b/src/views/obs/MusicRequestOBS.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import { DanmakuUserInfo, SongsInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { AVATAR_URL, MUSIC_REQUEST_API_URL } from '@/data/constants'
-import { useWebRTC } from '@/store/useRTC'
+import type { DanmakuUserInfo, SongsInfo } from '@/api/api-models'
 import { useElementSize } from '@vueuse/core'
 import { NDivider, NEmpty, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
+import { useRoute } from 'vue-router'
+import { QueryGetAPI } from '@/api/query'
+import { AVATAR_URL, MUSIC_REQUEST_API_URL } from '@/data/constants'
+import { useWebRTC } from '@/store/useRTC'
 
-type WaitMusicInfo = {
+interface WaitMusicInfo {
   from: DanmakuUserInfo
   music: SongsInfo
 }
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
+  id?: number
+  active?: boolean
+  visible?: boolean
 }>()
 
 const message = useMessage()
@@ -37,14 +37,14 @@ const itemHeight = 40
 
 const key = ref(Date.now())
 
-const originSongs = ref<{ playing?: WaitMusicInfo; waiting: WaitMusicInfo[] }>({
+const originSongs = ref<{ playing?: WaitMusicInfo, waiting: WaitMusicInfo[] }>({
   waiting: [],
 })
 
 async function get() {
   try {
-    const data = await QueryGetAPI<{ playing: WaitMusicInfo; waiting: WaitMusicInfo[] }>(
-      MUSIC_REQUEST_API_URL + 'get-waiting',
+    const data = await QueryGetAPI<{ playing: WaitMusicInfo, waiting: WaitMusicInfo[] }>(
+      `${MUSIC_REQUEST_API_URL}get-waiting`,
       {
         id: currentId.value,
       },
diff --git a/src/views/obs/QuestionDisplayOBS.vue b/src/views/obs/QuestionDisplayOBS.vue
index bb43a8c..82a0d5e 100644
--- a/src/views/obs/QuestionDisplayOBS.vue
+++ b/src/views/obs/QuestionDisplayOBS.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { QUESTION_API_URL } from '@/data/constants'
+import type { QAInfo, Setting_QuestionDisplay } from '@/api/api-models'
 import { useRouteQuery } from '@vueuse/router'
 import { onMounted, onUnmounted, ref } from 'vue'
-import QuestionDisplayCard from '../manage/QuestionDisplayCard.vue'
+import { QueryGetAPI } from '@/api/query'
+import { QUESTION_API_URL } from '@/data/constants'
 import { useWebRTC } from '@/store/useRTC'
+import QuestionDisplayCard from '../manage/QuestionDisplayCard.vue'
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
+  id?: number
+  active?: boolean
+  visible?: boolean
 }>()
 
 const hash = ref('')
@@ -24,7 +24,7 @@ const cardRef = ref()
 
 async function checkIfChanged() {
   try {
-    const data = await QueryGetAPI<string>(QUESTION_API_URL + 'get-hash', {
+    const data = await QueryGetAPI<string>(`${QUESTION_API_URL}get-hash`, {
       token: token.value,
     })
     if (data.code == 200) {
@@ -42,7 +42,7 @@ async function getQuestionAndSetting() {
     const data = await QueryGetAPI<{
       question: QAInfo
       setting: Setting_QuestionDisplay
-    }>(QUESTION_API_URL + 'get-current-and-settings', {
+    }>(`${QUESTION_API_URL}get-current-and-settings`, {
       token: token.value,
     })
     if (data.code == 200) {
diff --git a/src/views/obs/QueueOBS.vue b/src/views/obs/QueueOBS.vue
index 60b9a3f..d3d1232 100644
--- a/src/views/obs/QueueOBS.vue
+++ b/src/views/obs/QueueOBS.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import {
-  QueueFrom,
-  QueueSortType,
-  QueueStatus,
+import type {
   ResponseQueueModel,
-  Setting_Queue
+  Setting_Queue,
 } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { QUEUE_API_URL } from '@/data/constants'
-import { useWebRTC } from '@/store/useRTC'
 import { useElementSize } from '@vueuse/core'
 import { List } from 'linqts'
 import { NDivider, NEmpty, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import {
+  QueueFrom,
+  QueueSortType,
+  QueueStatus,
+} from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { QUEUE_API_URL } from '@/data/constants'
+import { useWebRTC } from '@/store/useRTC'
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
-  speedMultiplier?: number,
+  id?: number
+  active?: boolean
+  visible?: boolean
+  speedMultiplier?: number
 }>()
 
 const message = useMessage()
@@ -34,7 +36,7 @@ const speedMultiplier = computed(() => {
     return props.speedMultiplier
   }
   const speedParam = route.query.speed
-  const speed = parseFloat(speedParam?.toString() ?? '1')
+  const speed = Number.parseFloat(speedParam?.toString() ?? '1')
   return isNaN(speed) || speed <= 0 ? 1 : speed
 })
 
@@ -61,39 +63,39 @@ const totalContentHeightWithLastMargin = computed(() => {
 const queue = ref<ResponseQueueModel[]>([])
 const settings = ref<Setting_Queue>({} as Setting_Queue)
 const progressing = computed(() => {
-  return queue.value.find((s) => s.status == QueueStatus.Progressing)
+  return queue.value.find(s => s.status == QueueStatus.Progressing)
 })
 const activeItems = computed(() => {
   let list = new List(queue.value)
-    .Where((q) => q?.status == QueueStatus.Waiting)
-    .OrderByDescending((q) => q.from == QueueFrom.Manual)
+    .Where(q => q?.status == QueueStatus.Waiting)
+    .OrderByDescending(q => q.from == QueueFrom.Manual)
   switch (settings.value.sortType) {
     case QueueSortType.TimeFirst: {
-      list = list.OrderBy((q) => q.createAt)
+      list = list.OrderBy(q => q.createAt)
       break
     }
     case QueueSortType.GuardFirst: {
       list = list
-        .OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
-        .ThenBy((q) => q.createAt)
+        .OrderBy(q => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
+        .ThenBy(q => q.createAt)
       break
     }
     case QueueSortType.PaymentFist: {
-      list = list.OrderByDescending((q) => q.giftPrice).ThenBy((q) => q.createAt)
+      list = list.OrderByDescending(q => q.giftPrice).ThenBy(q => q.createAt)
       break
     }
     case QueueSortType.FansMedalFirst: {
       list = list
-        .OrderByDescending((q) => (q.user?.fans_medal_wearing_status ? 1 : 0))
-        .ThenByDescending((q) => q.user?.fans_medal_level ?? 0)
-        .ThenBy((q) => q.createAt)
+        .OrderByDescending(q => (q.user?.fans_medal_wearing_status ? 1 : 0))
+        .ThenByDescending(q => q.user?.fans_medal_level ?? 0)
+        .ThenBy(q => q.createAt)
       break
     }
   }
   if (settings.value.isReverse) {
     list = list.Reverse()
   }
-  list = list.OrderByDescending((q) => (q.status == QueueStatus.Progressing ? 1 : 0))
+  list = list.OrderByDescending(q => (q.status == QueueStatus.Progressing ? 1 : 0))
   return list.ToArray()
 })
 const itemNum = computed(() => {
@@ -102,8 +104,8 @@ const itemNum = computed(() => {
 
 async function get() {
   try {
-    const data = await QueryGetAPI<{ queue: ResponseQueueModel[]; setting: Setting_Queue }>(
-      QUEUE_API_URL + 'get-active-and-settings',
+    const data = await QueryGetAPI<{ queue: ResponseQueueModel[], setting: Setting_Queue }>(
+      `${QUEUE_API_URL}get-active-and-settings`,
       {
         id: currentId.value,
       },
@@ -112,7 +114,7 @@ async function get() {
       return data.data
     }
   } catch (err) { }
-  return {} as { queue: ResponseQueueModel[]; setting: Setting_Queue }
+  return {} as { queue: ResponseQueueModel[], setting: Setting_Queue }
 }
 
 const isMoreThanContainer = computed(() => {
@@ -246,7 +248,7 @@ onUnmounted(() => {
               v-if="item.from == QueueFrom.Manual || ((item.giftPrice ?? 0) > 0 || settings.showPayment)"
               class="queue-list-item-payment"
             >
-              {{ item.from == QueueFrom.Manual ? '主播添加' : item.giftPrice == undefined ? '无' : '¥ ' + item.giftPrice }}
+              {{ item.from == QueueFrom.Manual ? '主播添加' : item.giftPrice == undefined ? '无' : `¥ ${item.giftPrice}` }}
             </div>
           </span>
         </div>
@@ -294,7 +296,7 @@ onUnmounted(() => {
             type="price"
           >
             <span class="tag-label">最低价格</span>
-            <span class="tag-value">{{ settings.minGiftPrice ? '> ¥' + settings.minGiftPrice : '任意' }}</span>
+            <span class="tag-value">{{ settings.minGiftPrice ? `> ¥${settings.minGiftPrice}` : '任意' }}</span>
           </div>
           <div
             class="queue-footer-tag"
@@ -312,7 +314,7 @@ onUnmounted(() => {
               {{
                 settings.fanMedalMinLevel != undefined && !settings.allowAllDanmaku
                   ? settings.fanMedalMinLevel > 0
-                    ? '> ' + settings.fanMedalMinLevel
+                    ? `> ${settings.fanMedalMinLevel}`
                     : '佩戴'
                   : '无需'
               }}
@@ -345,7 +347,7 @@ onUnmounted(() => {
             type="price"
           >
             <span class="tag-label">最低价格</span>
-            <span class="tag-value">{{ settings.minGiftPrice ? '> ¥' + settings.minGiftPrice : '任意' }}</span>
+            <span class="tag-value">{{ settings.minGiftPrice ? `> ¥${settings.minGiftPrice}` : '任意' }}</span>
           </div>
           <div
             v-if="settings.giftNames && settings.giftNames.length > 0"
@@ -364,7 +366,7 @@ onUnmounted(() => {
               {{
                 settings.fanMedalMinLevel != undefined && !settings.allowAllDanmaku
                   ? settings.fanMedalMinLevel > 0
-                    ? '> ' + settings.fanMedalMinLevel
+                    ? `> ${settings.fanMedalMinLevel}`
                     : '佩戴'
                   : '无需'
               }}
diff --git a/src/views/obs/WebFetcherOBS.vue b/src/views/obs/WebFetcherOBS.vue
index cd120f9..dad7afb 100644
--- a/src/views/obs/WebFetcherOBS.vue
+++ b/src/views/obs/WebFetcherOBS.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { useWebFetcher } from '@/store/useWebFetcher'
-import { onMounted, onUnmounted, ref } from 'vue'
+import type { DirectClientAuthInfo } from '@/data/DanmakuClients/DirectClient'
 import { RPC } from '@mixer/postmessage-rpc'
-import DirectClient, { DirectClientAuthInfo } from '@/data/DanmakuClients/DirectClient';
-import OpenLiveClient from '@/data/DanmakuClients/OpenLiveClient';
+import { onMounted, onUnmounted } from 'vue'
+import DirectClient from '@/data/DanmakuClients/DirectClient'
+import OpenLiveClient from '@/data/DanmakuClients/OpenLiveClient'
+import { useWebFetcher } from '@/store/useWebFetcher'
 
 const webFetcher = useWebFetcher()
 let rpc: RPC | undefined
 
-type QueryData = {
-  url: string;
-  headers?: { [key: string]: string };
-  body?: any;
+interface QueryData {
+  url: string
+  headers?: { [key: string]: string }
+  body?: any
 }
 
 function onGetDanmaku(data: any) {
@@ -20,36 +21,37 @@ function onGetDanmaku(data: any) {
 
 let timer: any
 onMounted(async () => {
-  if (window.frameElement) { //当是客户端组件时不自动启动, 需要客户端来启动以获取启动响应
+  if (window.frameElement) { // 当是客户端组件时不自动启动, 需要客户端来启动以获取启动响应
     console.log('[web-fetcher-iframe] 当前为客户端组件')
 
     rpc = new RPC({
       target: window.parent,
       serviceId: 'web-fetcher',
-      origin: '*'
+      origin: '*',
     })
 
     rpc.expose('status', () => {
       return {
         status: webFetcher.state,
         type: webFetcher.webfetcherType,
-        roomId: webFetcher.client instanceof OpenLiveClient ?
-          webFetcher.client.roomAuthInfo?.anchor_info.room_id :
-          webFetcher.client instanceof DirectClient ?
-            webFetcher.client.authInfo.roomId : -1,
+        roomId: webFetcher.client instanceof OpenLiveClient
+          ? webFetcher.client.roomAuthInfo?.anchor_info.room_id
+          : webFetcher.client instanceof DirectClient
+            ? webFetcher.client.authInfo.roomId
+            : -1,
         startedAt: webFetcher.startedAt,
 
       }
     })
 
     rpc.expose('start', async (data: { type: 'openlive' | 'direct', directAuthInfo?: DirectClientAuthInfo, force: boolean }) => {
-      console.log('[web-fetcher-iframe] 接收到 ' + (data.force ? '强制' : '') + '启动请求')
+      console.log(`[web-fetcher-iframe] 接收到 ${data.force ? '强制' : ''}启动请求`)
       if (data.force && webFetcher.state === 'connected') {
         console.log('[web-fetcher-iframe] 强制启动, 停止当前实例')
         webFetcher.Stop()
       }
       return await webFetcher.Start(data.type, data.directAuthInfo, true).then((result) => {
-        webFetcher.client?.on('all', (data) => onGetDanmaku(data))
+        webFetcher.client?.on('all', data => onGetDanmaku(data))
       })
     })
     rpc.expose('stop', () => {
@@ -57,19 +59,18 @@ onMounted(async () => {
       webFetcher.Stop()
     })
     rpc.expose('call-hub', (data: {
-      name: string;
-      args: any[];
+      name: string
+      args: any[]
     }) => {
       return webFetcher.signalRClient?.invoke(data.name, ...data.args)
     })
 
     setTimeout(() => {
       rpc?.call('ready', {}, false)
-    }, 1000);
+    }, 1000)
 
     console.log('[web-fetcher-iframe] RPC 初始化完成')
-  }
-  else {
+  } else {
     await webFetcher.Start()
   }
   setTimeout(() => {
diff --git a/src/views/obs/blivechat/AuthorBadge.vue b/src/views/obs/blivechat/AuthorBadge.vue
index ddc6aa1..15ba6da 100644
--- a/src/views/obs/blivechat/AuthorBadge.vue
+++ b/src/views/obs/blivechat/AuthorBadge.vue
@@ -1,3 +1,33 @@
+<script setup>
+import { NTooltip } from 'naive-ui'
+import { computed } from 'vue'
+import { FILE_BASE_URL } from '@/data/constants'
+import * as constants from './constants'
+
+const props = defineProps({
+  isAdmin: Boolean,
+  privilegeType: Number,
+})
+
+const authorTypeText = computed(() => {
+  if (props.isAdmin) {
+    return 'moderator'
+  }
+  return props.privilegeType > 0 ? 'member' : ''
+})
+
+const readableAuthorTypeText = computed(() => {
+  if (props.isAdmin) {
+    return '管理员'
+  }
+  return constants.getShowGuardLevelText(props.privilegeType)
+})
+
+const fileServerUrl = computed(() => {
+  return FILE_BASE_URL
+})
+</script>
+
 <template>
   <yt-live-chat-author-badge-renderer :type="authorTypeText">
     <NTooltip
@@ -41,35 +71,6 @@
   </yt-live-chat-author-badge-renderer>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-import { NTooltip } from 'naive-ui'
-import * as constants from './constants'
-import { FILE_BASE_URL } from '@/data/constants'
-
-const props = defineProps({
-  isAdmin: Boolean,
-  privilegeType: Number
-})
-
-const authorTypeText = computed(() => {
-  if (props.isAdmin) {
-    return 'moderator'
-  }
-  return props.privilegeType > 0 ? 'member' : ''
-})
-
-const readableAuthorTypeText = computed(() => {
-  if (props.isAdmin) {
-    return '管理员'
-  }
-  return constants.getShowGuardLevelText(props.privilegeType)
-})
-
-const fileServerUrl = computed(() => {
-  return FILE_BASE_URL
-})
-</script>
-
 <style src="@/assets/css/youtube/yt-live-chat-author-badge-renderer.css"></style>
+
 <style src="@/assets/css/youtube/yt-icon.css"></style>
diff --git a/src/views/obs/blivechat/AuthorChip.vue b/src/views/obs/blivechat/AuthorChip.vue
index 8dccee7..2c2711a 100644
--- a/src/views/obs/blivechat/AuthorChip.vue
+++ b/src/views/obs/blivechat/AuthorChip.vue
@@ -1,3 +1,22 @@
+<script setup>
+import { computed } from 'vue'
+import AuthorBadge from './AuthorBadge.vue'
+import * as constants from './constants'
+
+const props = defineProps({
+  isInMemberMessage: Boolean,
+  authorName: String,
+  authorType: Number,
+  privilegeType: Number,
+})
+
+const AUTHOR_TYPE_ADMIN = constants.AUTHOR_TYPE_ADMIN
+
+const authorTypeText = computed(() => {
+  return constants.AUTHOR_TYPE_TO_TEXT[props.authorType]
+})
+</script>
+
 <template>
   <yt-live-chat-author-chip>
     <span
@@ -18,20 +37,20 @@
       id="chat-badges"
       class="style-scope yt-live-chat-author-chip"
     >
-      <author-badge
+      <AuthorBadge
         v-if="isInMemberMessage"
         class="style-scope yt-live-chat-author-chip"
         :is-admin="false"
         :privilege-type="privilegeType"
       />
       <template v-else>
-        <author-badge
+        <AuthorBadge
           v-if="authorType === AUTHOR_TYPE_ADMIN"
           class="style-scope yt-live-chat-author-chip"
           is-admin
           :privilege-type="0"
         />
-        <author-badge
+        <AuthorBadge
           v-if="privilegeType > 0"
           class="style-scope yt-live-chat-author-chip"
           :is-admin="false"
@@ -42,23 +61,4 @@
   </yt-live-chat-author-chip>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-import AuthorBadge from './AuthorBadge.vue'
-import * as constants from './constants'
-
-const props = defineProps({
-  isInMemberMessage: Boolean,
-  authorName: String,
-  authorType: Number,
-  privilegeType: Number
-})
-
-const AUTHOR_TYPE_ADMIN = constants.AUTHOR_TYPE_ADMIN
-
-const authorTypeText = computed(() => {
-  return constants.AUTHOR_TYPE_TO_TEXT[props.authorType]
-})
-</script>
-
 <style src="@/assets/css/youtube/yt-live-chat-author-chip.css"></style>
diff --git a/src/views/obs/blivechat/ImgShadow.vue b/src/views/obs/blivechat/ImgShadow.vue
index 704caf2..7a528b7 100644
--- a/src/views/obs/blivechat/ImgShadow.vue
+++ b/src/views/obs/blivechat/ImgShadow.vue
@@ -1,3 +1,26 @@
+<script setup>
+import { ref, watch } from 'vue'
+import * as models from '../../../data/chat/models'
+
+const props = defineProps({
+  imgUrl: String,
+  height: String,
+  width: String,
+})
+
+const showImgUrl = ref(props.imgUrl)
+
+watch(() => props.imgUrl, (val) => {
+  showImgUrl.value = val
+})
+
+function onLoadError() {
+  if (showImgUrl.value !== models.DEFAULT_AVATAR_URL) {
+    showImgUrl.value = models.DEFAULT_AVATAR_URL
+  }
+}
+</script>
+
 <template>
   <yt-img-shadow
     class="no-transition"
@@ -19,27 +42,4 @@
   </yt-img-shadow>
 </template>
 
-<script setup>
-import { ref, watch } from 'vue'
-import * as models from '../../../data/chat/models'
-
-const props = defineProps({
-  imgUrl: String,
-  height: String,
-  width: String
-})
-
-const showImgUrl = ref(props.imgUrl)
-
-watch(() => props.imgUrl, (val) => {
-  showImgUrl.value = val
-})
-
-function onLoadError() {
-  if (showImgUrl.value !== models.DEFAULT_AVATAR_URL) {
-    showImgUrl.value = models.DEFAULT_AVATAR_URL
-  }
-}
-</script>
-
 <style src="@/assets/css/youtube/yt-img-shadow.css"></style>
diff --git a/src/views/obs/blivechat/MembershipItem.vue b/src/views/obs/blivechat/MembershipItem.vue
index ad99948..c3e13f0 100644
--- a/src/views/obs/blivechat/MembershipItem.vue
+++ b/src/views/obs/blivechat/MembershipItem.vue
@@ -1,3 +1,22 @@
+<script setup>
+import { computed } from 'vue'
+import AuthorChip from './AuthorChip.vue'
+import ImgShadow from './ImgShadow.vue'
+import * as utils from './utils'
+
+const props = defineProps({
+  avatarUrl: String,
+  authorName: String,
+  privilegeType: Number,
+  title: String,
+  time: Date,
+})
+
+const timeText = computed(() => {
+  return utils.getTimeTextHourMin(props.time)
+})
+</script>
+
 <template>
   <yt-live-chat-membership-item-renderer
     class="style-scope yt-live-chat-item-list-renderer"
@@ -12,7 +31,7 @@
         id="header"
         class="style-scope yt-live-chat-membership-item-renderer"
       >
-        <img-shadow
+        <ImgShadow
           id="author-photo"
           height="40"
           width="40"
@@ -31,7 +50,7 @@
               id="header-content-inner-column"
               class="style-scope yt-live-chat-membership-item-renderer"
             >
-              <author-chip
+              <AuthorChip
                 class="style-scope yt-live-chat-membership-item-renderer"
                 is-in-member-message
                 :author-name="authorName"
@@ -58,23 +77,4 @@
   </yt-live-chat-membership-item-renderer>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-import ImgShadow from './ImgShadow.vue'
-import AuthorChip from './AuthorChip.vue'
-import * as utils from './utils'
-
-const props = defineProps({
-  avatarUrl: String,
-  authorName: String,
-  privilegeType: Number,
-  title: String,
-  time: Date
-})
-
-const timeText = computed(() => {
-  return utils.getTimeTextHourMin(props.time)
-})
-</script>
-
 <style src="@/assets/css/youtube/yt-live-chat-membership-item-renderer.css"></style>
diff --git a/src/views/obs/blivechat/MessageRender.vue b/src/views/obs/blivechat/MessageRender.vue
index ff6b2dd..82142fe 100644
--- a/src/views/obs/blivechat/MessageRender.vue
+++ b/src/views/obs/blivechat/MessageRender.vue
@@ -1,97 +1,12 @@
-<template>
-  <yt-live-chat-renderer
-    class="style-scope yt-live-chat-app"
-    style="--scrollbar-width:11px;"
-    hide-timestamps
-    @mousemove="refreshCantScrollStartTime"
-  >
-    <ticker
-      v-model:messages="paidMessages"
-      class="style-scope yt-live-chat-renderer"
-      :show-gift-name="showGiftName || undefined"
-    />
-    <yt-live-chat-item-list-renderer
-      class="style-scope yt-live-chat-renderer"
-      allow-scroll
-    >
-      <div
-        id="item-scroller"
-        ref="scroller"
-        class="style-scope yt-live-chat-item-list-renderer animated"
-        @scroll="onScroll"
-      >
-        <div
-          id="item-offset"
-          ref="itemOffset"
-          class="style-scope yt-live-chat-item-list-renderer"
-        >
-          <div
-            id="items"
-            ref="items"
-            class="style-scope yt-live-chat-item-list-renderer"
-            style="overflow: hidden"
-            :style="{ transform: `translateY(${Math.floor(scrollPixelsRemaining)}px)` }"
-          >
-            <template
-              v-for="message in messages"
-              :key="message.id"
-            >
-              <text-message
-                v-if="message.type === MESSAGE_TYPE_TEXT"
-                class="style-scope yt-live-chat-item-list-renderer"
-                :time="message.time"
-                :avatar-url="message.avatarUrl"
-                :author-name="message.authorName"
-                :author-type="message.authorType"
-                :privilege-type="message.privilegeType"
-                :content-parts="getShowContentParts(message)"
-                :repeated="message.repeated"
-              />
-              <paid-message
-                v-else-if="message.type === MESSAGE_TYPE_GIFT"
-                class="style-scope yt-live-chat-item-list-renderer"
-                :time="message.time"
-                :avatar-url="message.avatarUrl"
-                :author-name="getShowAuthorName(message)"
-                :price="message.price"
-                :price-text="message.price <= 0 ? getGiftShowNameAndNum(message) : ''"
-                :content="message.price <= 0 ? '' : getGiftShowContent(message, showGiftName)"
-              />
-              <membership-item
-                v-else-if="message.type === MESSAGE_TYPE_MEMBER"
-                class="style-scope yt-live-chat-item-list-renderer"
-                :time="message.time"
-                :avatar-url="message.avatarUrl"
-                :author-name="getShowAuthorName(message)"
-                :privilege-type="message.privilegeType"
-                :title="message.title"
-              />
-              <paid-message
-                v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
-                class="style-scope yt-live-chat-item-list-renderer"
-                :time="message.time"
-                :avatar-url="message.avatarUrl"
-                :author-name="getShowAuthorName(message)"
-                :price="message.price"
-                :content="getShowContent(message)"
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-    </yt-live-chat-item-list-renderer>
-  </yt-live-chat-renderer>
-</template>
-
 <script>
+import { useDebounceFn } from '@vueuse/core'
 import _ from 'lodash'
-import Ticker from './Ticker.vue'
-import TextMessage from './TextMessage.vue'
+import { defineComponent } from 'vue'
+import * as constants from './constants'
 import MembershipItem from './MembershipItem.vue'
 import PaidMessage from './PaidMessage.vue'
-import * as constants from './constants'
-import { defineComponent } from 'vue'
-import { useDebounceFn } from '@vueuse/core'
+import TextMessage from './TextMessage.vue'
+import Ticker from './Ticker.vue'
 
 // 要添加的消息类型
 const ADD_MESSAGE_TYPES = [
@@ -116,24 +31,24 @@ export default defineComponent({
     Ticker,
     TextMessage,
     MembershipItem,
-    PaidMessage
+    PaidMessage,
   },
   props: {
     maxNumber: {
       type: Number,
-      default: 60
+      default: 60,
     },
     showGiftName: {
       type: Boolean,
-      default: false
+      default: false,
     },
     customCss: {
       type: String,
-      default: ''
+      default: '',
     },
   },
   data() {
-    let customStyleElement = document.createElement('style')
+    const customStyleElement = document.createElement('style')
     document.head.appendChild(customStyleElement)
     const setCssDebounce = useDebounceFn(() => {
       customStyleElement.innerHTML = this.customCss ?? ''
@@ -145,27 +60,27 @@ export default defineComponent({
       MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
       MESSAGE_TYPE_SUPER_CHAT: constants.MESSAGE_TYPE_SUPER_CHAT,
 
-      messages: [],                        // 显示的消息
-      paidMessages: [],                    // 固定在上方的消息
+      messages: [], // 显示的消息
+      paidMessages: [], // 固定在上方的消息
 
-      smoothedMessageQueue: [],            // 平滑消息队列，由外部调用addMessages等方法添加
-      emitSmoothedMessageTimerId: null,    // 消费平滑消息队列的定时器ID
-      enqueueIntervals: [],                // 最近进队列的时间间隔，用来估计下次进队列的时间
-      lastEnqueueTime: null,               // 上次进队列的时间
-      estimatedEnqueueInterval: null,      // 估计的下次进队列时间间隔
+      smoothedMessageQueue: [], // 平滑消息队列，由外部调用addMessages等方法添加
+      emitSmoothedMessageTimerId: null, // 消费平滑消息队列的定时器ID
+      enqueueIntervals: [], // 最近进队列的时间间隔，用来估计下次进队列的时间
+      lastEnqueueTime: null, // 上次进队列的时间
+      estimatedEnqueueInterval: null, // 估计的下次进队列时间间隔
 
-      messagesBuffer: [],                  // 暂时未显示的消息，当不能自动滚动时会积压在这
-      preinsertHeight: 0,                  // 插入新消息之前items的高度
-      isSmoothed: true,                    // 是否平滑滚动，当消息太快时不平滑滚动
-      chatRateMs: 1000,                    // 用来计算消息速度
-      scrollPixelsRemaining: 0,            // 平滑滚动剩余像素
-      scrollTimeRemainingMs: 0,            // 平滑滚动剩余时间
-      lastSmoothChatMessageAddMs: null,    // 上次showNewMessages时间
-      smoothScrollRafHandle: null,         // 平滑滚动requestAnimationFrame句柄
-      lastSmoothScrollUpdate: null,        // 平滑滚动上一帧时间
+      messagesBuffer: [], // 暂时未显示的消息，当不能自动滚动时会积压在这
+      preinsertHeight: 0, // 插入新消息之前items的高度
+      isSmoothed: true, // 是否平滑滚动，当消息太快时不平滑滚动
+      chatRateMs: 1000, // 用来计算消息速度
+      scrollPixelsRemaining: 0, // 平滑滚动剩余像素
+      scrollTimeRemainingMs: 0, // 平滑滚动剩余时间
+      lastSmoothChatMessageAddMs: null, // 上次showNewMessages时间
+      smoothScrollRafHandle: null, // 平滑滚动requestAnimationFrame句柄
+      lastSmoothScrollUpdate: null, // 平滑滚动上一帧时间
 
-      atBottom: true,                      // 滚动到底部，用来判断能否自动滚动
-      cantScrollStartTime: null,            // 开始不能自动滚动的时间，用来防止卡住
+      atBottom: true, // 滚动到底部，用来判断能否自动滚动
+      cantScrollStartTime: null, // 开始不能自动滚动的时间，用来防止卡住
 
       customStyleElement,
 
@@ -175,7 +90,7 @@ export default defineComponent({
   computed: {
     canScrollToBottom() {
       return this.atBottom/* || this.allowScroll */
-    }
+    },
   },
   watch: {
     canScrollToBottom(val) {
@@ -185,8 +100,8 @@ export default defineComponent({
       immediate: true,
       handler(val, oldVal) {
         this.setCssDebounce(val)
-      }
-    }
+      },
+    },
   },
   mounted() {
     this.scrollToBottom()
@@ -220,12 +135,12 @@ export default defineComponent({
     // 后悔加这个功能了
     mergeSimilarText(content) {
       content = content.trim().toLowerCase()
-      for (let message of this.iterRecentMessages(5)) {
+      for (const message of this.iterRecentMessages(5)) {
         if (message.type !== constants.MESSAGE_TYPE_TEXT) {
           continue
         }
 
-        let messageContent = message.content.trim().toLowerCase()
+        const messageContent = message.content.trim().toLowerCase()
         let longer, shorter
         if (messageContent.length > content.length) {
           longer = messageContent
@@ -236,13 +151,13 @@ export default defineComponent({
         }
 
         if (
-          longer.indexOf(shorter) !== -1 // 长的包含短的
+          longer.includes(shorter) // 长的包含短的
           && longer.length - shorter.length < shorter.length // 长度差较小
         ) {
           this.updateMessage(message.id, {
             $add: {
-              repeated: 1
-            }
+              repeated: 1,
+            },
           })
           return true
         }
@@ -250,7 +165,7 @@ export default defineComponent({
       return false
     },
     mergeSimilarGift(authorName, price, _freePrice, giftName, num) {
-      for (let message of this.iterRecentMessages(5)) {
+      for (const message of this.iterRecentMessages(5)) {
         if (
           message.type === constants.MESSAGE_TYPE_GIFT
           && message.authorName === authorName
@@ -258,10 +173,10 @@ export default defineComponent({
         ) {
           this.updateMessage(message.id, {
             $add: {
-              price: price,
+              price,
               // freePrice: freePrice, // 暂时没用到
-              num: num
-            }
+              num,
+            },
           })
           return true
         }
@@ -269,13 +184,13 @@ export default defineComponent({
       return false
     },
     // 从新到老迭代num条消息，注意会迭代smoothedMessageQueue，不会迭代paidMessages
-    *iterRecentMessages(num, onlyCountAddMessages = true) {
+    * iterRecentMessages(num, onlyCountAddMessages = true) {
       if (num <= 0) {
         return
       }
-      for (let arr of this.iterMessageArrs()) {
+      for (const arr of this.iterMessageArrs()) {
         for (let i = arr.length - 1; i >= 0 && num > 0; i--) {
-          let message = arr[i]
+          const message = arr[i]
           yield message
           if (!onlyCountAddMessages || this.isAddMessage(message)) {
             num--
@@ -287,7 +202,7 @@ export default defineComponent({
       }
     },
     // 从新到老迭代消息的数组
-    *iterMessageArrs() {
+    * iterMessageArrs() {
       for (let i = this.smoothedMessageQueue.length - 1; i >= 0; i--) {
         yield this.smoothedMessageQueue[i]
       }
@@ -301,8 +216,8 @@ export default defineComponent({
       this.enqueueMessages(ids.map(
         id => ({
           type: constants.MESSAGE_TYPE_DEL,
-          id
-        })
+          id,
+        }),
       ))
     },
     clearMessages() {
@@ -326,7 +241,7 @@ export default defineComponent({
       this.enqueueMessages([{
         type: constants.MESSAGE_TYPE_UPDATE,
         id,
-        newValuesObj
+        newValuesObj,
       }])
     },
 
@@ -335,8 +250,8 @@ export default defineComponent({
       if (!this.lastEnqueueTime) {
         this.lastEnqueueTime = new Date()
       } else {
-        let curTime = new Date()
-        let interval = curTime - this.lastEnqueueTime
+        const curTime = new Date()
+        const interval = curTime - this.lastEnqueueTime
         // 真实的进队列时间间隔模式大概是这样：2500, 300, 300, 300, 2500, 300, ...
         // B站消息有缓冲，会一次发多条消息。这里把波峰视为发送了一次真实的WS消息，所以要过滤掉间隔太小的
         if (interval > 1000 || this.enqueueIntervals.length < 5) {
@@ -354,7 +269,7 @@ export default defineComponent({
 
       // 把messages分成messageGroup，每个组里最多有1个需要平滑的消息
       let messageGroup = []
-      for (let message of messages) {
+      for (const message of messages) {
         messageGroup.push(message)
         if (this.isAddMessage(message)) {
           this.smoothedMessageQueue.push(messageGroup)
@@ -365,8 +280,8 @@ export default defineComponent({
       if (messageGroup.length > 0) {
         if (this.smoothedMessageQueue.length > 0) {
           // 和上一组合并
-          let lastMessageGroup = this.smoothedMessageQueue[this.smoothedMessageQueue.length - 1]
-          for (let message of messageGroup) {
+          const lastMessageGroup = this.smoothedMessageQueue[this.smoothedMessageQueue.length - 1]
+          for (const message of messageGroup) {
             lastMessageGroup.push(message)
           }
         } else {
@@ -380,7 +295,7 @@ export default defineComponent({
       }
     },
     isAddMessage({ type }) {
-      return ADD_MESSAGE_TYPES.indexOf(type) !== -1
+      return ADD_MESSAGE_TYPES.includes(type)
     },
     emitSmoothedMessages() {
       this.emitSmoothedMessageTimerId = null
@@ -395,9 +310,9 @@ export default defineComponent({
       }
       // 计算发送的消息数，保证在下次进队列之前发完
       // 下次进队列之前应该发多少条消息
-      let shouldEmitGroupNum = Math.max(this.smoothedMessageQueue.length, 0)
+      const shouldEmitGroupNum = Math.max(this.smoothedMessageQueue.length, 0)
       // 下次进队列之前最多能发多少次
-      let maxCanEmitCount = estimatedNextEnqueueRemainTime / MESSAGE_MIN_INTERVAL
+      const maxCanEmitCount = estimatedNextEnqueueRemainTime / MESSAGE_MIN_INTERVAL
       // 这次发多少条消息
       let groupNumToEmit
       if (shouldEmitGroupNum < maxCanEmitCount) {
@@ -409,10 +324,10 @@ export default defineComponent({
       }
 
       // 发消息
-      let messageGroups = this.smoothedMessageQueue.splice(0, groupNumToEmit)
-      let mergedGroup = []
-      for (let messageGroup of messageGroups) {
-        for (let message of messageGroup) {
+      const messageGroups = this.smoothedMessageQueue.splice(0, groupNumToEmit)
+      const mergedGroup = []
+      for (const messageGroup of messageGroups) {
+        for (const message of messageGroup) {
           mergedGroup.push(message)
         }
       }
@@ -444,7 +359,7 @@ export default defineComponent({
         return
       }
 
-      for (let message of messageGroup) {
+      for (const message of messageGroup) {
         switch (message.type) {
           case constants.MESSAGE_TYPE_TEXT:
           case constants.MESSAGE_TYPE_GIFT:
@@ -482,9 +397,9 @@ export default defineComponent({
       this.messagesBuffer.push(message)
     },
     handleDelMessage({ id }) {
-      let arrs = [this.messages, this.paidMessages, this.messagesBuffer]
+      const arrs = [this.messages, this.paidMessages, this.messagesBuffer]
       let needResetSmoothScroll = false
-      for (let arr of arrs) {
+      for (const arr of arrs) {
         for (let i = 0; i < arr.length; i++) {
           if (arr[i].id !== id) {
             continue
@@ -501,10 +416,10 @@ export default defineComponent({
       }
     },
     handleUpdateMessage({ id, newValuesObj }) {
-      let arrs = [this.messages, this.paidMessages, this.messagesBuffer]
+      const arrs = [this.messages, this.paidMessages, this.messagesBuffer]
       let needResetSmoothScroll = false
-      for (let arr of arrs) {
-        for (let message of arr) {
+      for (const arr of arrs) {
+        for (const message of arr) {
           if (message.id !== id) {
             continue
           }
@@ -521,15 +436,15 @@ export default defineComponent({
     },
     doUpdateMessage(message, newValuesObj) {
       // +=
-      let addValuesObj = newValuesObj.$add
+      const addValuesObj = newValuesObj.$add
       if (addValuesObj !== undefined) {
-        for (let name in addValuesObj) {
+        for (const name in addValuesObj) {
           message[name] += addValuesObj[name]
         }
       }
 
       // =
-      for (let name in newValuesObj) {
+      for (const name in newValuesObj) {
         if (!name.startsWith('$')) {
           message[name] = newValuesObj[name]
         }
@@ -548,7 +463,7 @@ export default defineComponent({
         return
       }
 
-      let removeNum = Math.max(this.messages.length + this.messagesBuffer.length - this.maxNumber, 0)
+      const removeNum = Math.max(this.messages.length + this.messagesBuffer.length - this.maxNumber, 0)
       if (removeNum > 0) {
         this.messages.splice(0, removeNum)
         // 防止同时添加和删除项目时所有的项目重新渲染 https://github.com/vuejs/vue/issues/6857
@@ -556,7 +471,7 @@ export default defineComponent({
       }
 
       this.preinsertHeight = this.$refs.items.clientHeight
-      for (let message of this.messagesBuffer) {
+      for (const message of this.messagesBuffer) {
         this.messages.push(message)
       }
       this.messagesBuffer = []
@@ -565,7 +480,7 @@ export default defineComponent({
       this.showNewMessages()
     },
     showNewMessages() {
-      let hasScrollBar = this.$refs.items.clientHeight > this.$refs.scroller.clientHeight
+      const hasScrollBar = this.$refs.items.clientHeight > this.$refs.scroller.clientHeight
       this.$refs.itemOffset.style.height = `${this.$refs.items.clientHeight}px`
       if (!this.canScrollToBottomOrTimedOut() || !hasScrollBar) {
         return
@@ -579,7 +494,7 @@ export default defineComponent({
       if (!this.lastSmoothChatMessageAddMs) {
         this.lastSmoothChatMessageAddMs = performance.now()
       }
-      let interval = performance.now() - this.lastSmoothChatMessageAddMs
+      const interval = performance.now() - this.lastSmoothChatMessageAddMs
       this.chatRateMs = (0.9 * this.chatRateMs) + (0.1 * interval)
       if (this.isSmoothed) {
         if (this.chatRateMs < 400) {
@@ -605,9 +520,9 @@ export default defineComponent({
         return
       }
 
-      let interval = time - this.lastSmoothScrollUpdate
+      const interval = time - this.lastSmoothScrollUpdate
       if (
-        this.scrollPixelsRemaining <= 0 || this.scrollPixelsRemaining >= 400  // 已经滚动到底部或者离底部太远则结束
+        this.scrollPixelsRemaining <= 0 || this.scrollPixelsRemaining >= 400 // 已经滚动到底部或者离底部太远则结束
         || interval >= 1000 // 离上一帧时间太久，可能用户切换到其他网页
         || this.scrollTimeRemainingMs <= 0 // 时间已结束
       ) {
@@ -615,7 +530,7 @@ export default defineComponent({
         return
       }
 
-      let pixelsToScroll = interval / this.scrollTimeRemainingMs * this.scrollPixelsRemaining
+      const pixelsToScroll = interval / this.scrollTimeRemainingMs * this.scrollPixelsRemaining
       this.scrollPixelsRemaining -= pixelsToScroll
       if (this.scrollPixelsRemaining < 0) {
         this.scrollPixelsRemaining = 0
@@ -647,12 +562,12 @@ export default defineComponent({
       }
     },
     scrollToBottom() {
-      this.$refs.scroller.scrollTop = Math.pow(2, 24)
+      this.$refs.scroller.scrollTop = 2 ** 24
       this.atBottom = true
     },
     onScroll() {
       this.refreshCantScrollStartTime()
-      let scroller = this.$refs.scroller
+      const scroller = this.$refs.scroller
       this.atBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight < SCROLLED_TO_BOTTOM_EPSILON
       this.flushMessagesBuffer()
     },
@@ -668,11 +583,98 @@ export default defineComponent({
       if (this.cantScrollStartTime) {
         this.cantScrollStartTime = new Date()
       }
-    }
-  }
+    },
+  },
 })
 </script>
 
+<template>
+  <yt-live-chat-renderer
+    class="style-scope yt-live-chat-app"
+    style="--scrollbar-width:11px;"
+    hide-timestamps
+    @mousemove="refreshCantScrollStartTime"
+  >
+    <Ticker
+      v-model:messages="paidMessages"
+      class="style-scope yt-live-chat-renderer"
+      :show-gift-name="showGiftName || undefined"
+    />
+    <yt-live-chat-item-list-renderer
+      class="style-scope yt-live-chat-renderer"
+      allow-scroll
+    >
+      <div
+        id="item-scroller"
+        ref="scroller"
+        class="style-scope yt-live-chat-item-list-renderer animated"
+        @scroll="onScroll"
+      >
+        <div
+          id="item-offset"
+          ref="itemOffset"
+          class="style-scope yt-live-chat-item-list-renderer"
+        >
+          <div
+            id="items"
+            ref="items"
+            class="style-scope yt-live-chat-item-list-renderer"
+            style="overflow: hidden"
+            :style="{ transform: `translateY(${Math.floor(scrollPixelsRemaining)}px)` }"
+          >
+            <template
+              v-for="message in messages"
+              :key="message.id"
+            >
+              <TextMessage
+                v-if="message.type === MESSAGE_TYPE_TEXT"
+                class="style-scope yt-live-chat-item-list-renderer"
+                :time="message.time"
+                :avatar-url="message.avatarUrl"
+                :author-name="message.authorName"
+                :author-type="message.authorType"
+                :privilege-type="message.privilegeType"
+                :content-parts="getShowContentParts(message)"
+                :repeated="message.repeated"
+              />
+              <PaidMessage
+                v-else-if="message.type === MESSAGE_TYPE_GIFT"
+                class="style-scope yt-live-chat-item-list-renderer"
+                :time="message.time"
+                :avatar-url="message.avatarUrl"
+                :author-name="getShowAuthorName(message)"
+                :price="message.price"
+                :price-text="message.price <= 0 ? getGiftShowNameAndNum(message) : ''"
+                :content="message.price <= 0 ? '' : getGiftShowContent(message, showGiftName)"
+              />
+              <MembershipItem
+                v-else-if="message.type === MESSAGE_TYPE_MEMBER"
+                class="style-scope yt-live-chat-item-list-renderer"
+                :time="message.time"
+                :avatar-url="message.avatarUrl"
+                :author-name="getShowAuthorName(message)"
+                :privilege-type="message.privilegeType"
+                :title="message.title"
+              />
+              <PaidMessage
+                v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
+                class="style-scope yt-live-chat-item-list-renderer"
+                :time="message.time"
+                :avatar-url="message.avatarUrl"
+                :author-name="getShowAuthorName(message)"
+                :price="message.price"
+                :content="getShowContent(message)"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </yt-live-chat-item-list-renderer>
+  </yt-live-chat-renderer>
+</template>
+
 <style src="@/assets/css/youtube/yt-html.css"></style>
+
 <style src="@/assets/css/youtube/yt-live-chat-renderer.css"></style>
-<style src="@/assets/css/youtube/yt-live-chat-item-list-renderer.css"></style>
\ No newline at end of file
+
+<style src="@/assets/css/youtube/yt-live-chat-item-list-renderer.css"></style>
diff --git a/src/views/obs/blivechat/PaidMessage.vue b/src/views/obs/blivechat/PaidMessage.vue
index 0719893..1842fc6 100644
--- a/src/views/obs/blivechat/PaidMessage.vue
+++ b/src/views/obs/blivechat/PaidMessage.vue
@@ -1,3 +1,35 @@
+<script setup>
+import { computed } from 'vue'
+import * as constants from './constants'
+import ImgShadow from './ImgShadow.vue'
+import * as utils from './utils'
+
+const props = defineProps({
+  avatarUrl: String,
+  authorName: String,
+  price: Number, // 价格，人民币
+  priceText: String,
+  time: Date,
+  content: String,
+})
+
+const priceConfig = computed(() => {
+  return constants.getPriceConfig(props.price)
+})
+
+const color = computed(() => {
+  return priceConfig.value.colors
+})
+
+const showPriceText = computed(() => {
+  return props.priceText || `CN¥${utils.formatCurrency(props.price)}`
+})
+
+const timeText = computed(() => {
+  return utils.getTimeTextHourMin(props.time)
+})
+</script>
+
 <template>
   <yt-live-chat-paid-message-renderer
     class="style-scope yt-live-chat-item-list-renderer"
@@ -9,7 +41,7 @@
       '--yt-live-chat-paid-message-header-color': color.header,
       '--yt-live-chat-paid-message-author-name-color': color.authorName,
       '--yt-live-chat-paid-message-timestamp-color': color.time,
-      '--yt-live-chat-paid-message-color': color.content
+      '--yt-live-chat-paid-message-color': color.content,
     }"
     :blc-price-level="priceConfig.priceLevel"
   >
@@ -21,7 +53,7 @@
         id="header"
         class="style-scope yt-live-chat-paid-message-renderer"
       >
-        <img-shadow
+        <ImgShadow
           id="author-photo"
           height="40"
           width="40"
@@ -71,36 +103,4 @@
   </yt-live-chat-paid-message-renderer>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-import ImgShadow from './ImgShadow.vue'
-import * as constants from './constants'
-import * as utils from './utils'
-
-const props = defineProps({
-  avatarUrl: String,
-  authorName: String,
-  price: Number, // 价格，人民币
-  priceText: String,
-  time: Date,
-  content: String
-})
-
-const priceConfig = computed(() => {
-  return constants.getPriceConfig(props.price)
-})
-
-const color = computed(() => {
-  return priceConfig.value.colors
-})
-
-const showPriceText = computed(() => {
-  return props.priceText || `CN¥${utils.formatCurrency(props.price)}`
-})
-
-const timeText = computed(() => {
-  return utils.getTimeTextHourMin(props.time)
-})
-</script>
-
 <style src="@/assets/css/youtube/yt-live-chat-paid-message-renderer.css"></style>
diff --git a/src/views/obs/blivechat/TextMessage.vue b/src/views/obs/blivechat/TextMessage.vue
index d1ee134..1e5294b 100644
--- a/src/views/obs/blivechat/TextMessage.vue
+++ b/src/views/obs/blivechat/TextMessage.vue
@@ -1,9 +1,58 @@
+<script setup>
+import { NBadge } from 'naive-ui'
+import { computed } from 'vue'
+import AuthorChip from './AuthorChip.vue'
+import * as constants from './constants'
+import ImgShadow from './ImgShadow.vue'
+import * as utils from './utils'
+
+const props = defineProps({
+  avatarUrl: String,
+  time: Date,
+  authorName: String,
+  authorType: Number,
+  contentParts: Array,
+  privilegeType: Number,
+  repeated: Number,
+})
+// HSL
+const REPEATED_MARK_COLOR_START = [210, 100.0, 62.5]
+const REPEATED_MARK_COLOR_END = [360, 87.3, 69.2]
+
+const CONTENT_TYPE_TEXT = constants.CONTENT_TYPE_TEXT
+const CONTENT_TYPE_IMAGE = constants.CONTENT_TYPE_IMAGE
+
+const timeText = computed(() => {
+  return utils.getTimeTextHourMin(props.time)
+})
+
+const authorTypeText = computed(() => {
+  return constants.AUTHOR_TYPE_TO_TEXT[props.authorType]
+})
+
+const repeatedMarkColor = computed(() => {
+  let color
+  if (props.repeated <= 2) {
+    color = REPEATED_MARK_COLOR_START
+  } else if (props.repeated >= 10) {
+    color = REPEATED_MARK_COLOR_END
+  } else {
+    color = [0, 0, 0]
+    const t = (props.repeated - 2) / (10 - 2)
+    for (let i = 0; i < 3; i++) {
+      color[i] = REPEATED_MARK_COLOR_START[i] + ((REPEATED_MARK_COLOR_END[i] - REPEATED_MARK_COLOR_START[i]) * t)
+    }
+  }
+  return `hsl(${color[0]}, ${color[1]}%, ${color[2]}%)`
+})
+</script>
+
 <template>
   <yt-live-chat-text-message-renderer
     :author-type="authorTypeText"
     :blc-guard-level="privilegeType"
   >
-    <img-shadow
+    <ImgShadow
       id="author-photo"
       height="24"
       width="24"
@@ -18,7 +67,7 @@
         id="timestamp"
         class="style-scope yt-live-chat-text-message-renderer"
       >{{ timeText }}</span>
-      <author-chip
+      <AuthorChip
         class="style-scope yt-live-chat-text-message-renderer"
         :is-in-member-message="false"
         :author-name="authorName"
@@ -38,7 +87,7 @@
           <img
             v-else-if="content.type === CONTENT_TYPE_IMAGE"
             :id="`emoji-${content.text}`"
-            :key="'_' + index"
+            :key="`_${index}`"
             class="emoji yt-formatted-string style-scope yt-live-chat-text-message-renderer"
             :src="content.url"
             :alt="content.text"
@@ -61,56 +110,6 @@
   </yt-live-chat-text-message-renderer>
 </template>
 
-<script setup>
-import { computed } from 'vue'
-import ImgShadow from './ImgShadow.vue'
-import AuthorChip from './AuthorChip.vue'
-import * as constants from './constants'
-import * as utils from './utils'
-import { NBadge } from 'naive-ui'
-
-// HSL
-const REPEATED_MARK_COLOR_START = [210, 100.0, 62.5]
-const REPEATED_MARK_COLOR_END = [360, 87.3, 69.2]
-
-const CONTENT_TYPE_TEXT = constants.CONTENT_TYPE_TEXT
-const CONTENT_TYPE_IMAGE = constants.CONTENT_TYPE_IMAGE
-
-const props = defineProps({
-  avatarUrl: String,
-  time: Date,
-  authorName: String,
-  authorType: Number,
-  contentParts: Array,
-  privilegeType: Number,
-  repeated: Number
-})
-
-const timeText = computed(() => {
-  return utils.getTimeTextHourMin(props.time)
-})
-
-const authorTypeText = computed(() => {
-  return constants.AUTHOR_TYPE_TO_TEXT[props.authorType]
-})
-
-const repeatedMarkColor = computed(() => {
-  let color
-  if (props.repeated <= 2) {
-    color = REPEATED_MARK_COLOR_START
-  } else if (props.repeated >= 10) {
-    color = REPEATED_MARK_COLOR_END
-  } else {
-    color = [0, 0, 0]
-    let t = (props.repeated - 2) / (10 - 2)
-    for (let i = 0; i < 3; i++) {
-      color[i] = REPEATED_MARK_COLOR_START[i] + ((REPEATED_MARK_COLOR_END[i] - REPEATED_MARK_COLOR_START[i]) * t)
-    }
-  }
-  return `hsl(${color[0]}, ${color[1]}%, ${color[2]}%)`
-})
-</script>
-
 <style>
 yt-live-chat-text-message-renderer>#content>#message>.el-badge {
   margin-left: 10px;
diff --git a/src/views/obs/blivechat/Ticker.vue b/src/views/obs/blivechat/Ticker.vue
index 159ffda..e6f398b 100644
--- a/src/views/obs/blivechat/Ticker.vue
+++ b/src/views/obs/blivechat/Ticker.vue
@@ -1,99 +1,19 @@
 <!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
-    <div
-      id="container"
-      dir="ltr"
-      class="style-scope yt-live-chat-ticker-renderer"
-    >
-      <transition-group
-        id="items"
-        tag="div"
-        :css="false"
-        class="style-scope yt-live-chat-ticker-renderer"
-        @enter="onTickerItemEnter"
-        @leave="onTickerItemLeave"
-      >
-        <yt-live-chat-ticker-paid-message-item-renderer
-          v-for="message in showMessages"
-          :key="message.raw.id"
-          tabindex="0"
-          class="style-scope yt-live-chat-ticker-renderer"
-          style="overflow: hidden;"
-          @click="onItemClick(message.raw)"
-        >
-          <div
-            id="container"
-            dir="ltr"
-            class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
-            :style="{
-              background: message.bgColor,
-            }"
-          >
-            <div
-              id="content"
-              class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
-              :style="{
-                color: message.color
-              }"
-            >
-              <img-shadow
-                id="author-photo"
-                height="24"
-                width="24"
-                class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
-                :img-url="message.raw.avatarUrl"
-              />
-              <span
-                id="text"
-                dir="ltr"
-                class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
-              >{{ message.text }}</span>
-            </div>
-          </div>
-        </yt-live-chat-ticker-paid-message-item-renderer>
-      </transition-group>
-    </div>
-    <template v-if="pinnedMessage">
-      <membership-item
-        v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
-        :key="pinnedMessage.id"
-        class="style-scope yt-live-chat-ticker-renderer"
-        :avatar-url="pinnedMessage.avatarUrl"
-        :author-name="getShowAuthorName(pinnedMessage)"
-        :privilege-type="pinnedMessage.privilegeType"
-        :title="pinnedMessage.title"
-        :time="pinnedMessage.time"
-      />
-      <paid-message
-        v-else
-        :key="pinnedMessage.id"
-        class="style-scope yt-live-chat-ticker-renderer"
-        :price="pinnedMessage.price"
-        :avatar-url="pinnedMessage.avatarUrl"
-        :author-name="getShowAuthorName(pinnedMessage)"
-        :time="pinnedMessage.time"
-        :content="pinnedMessageShowContent"
-      />
-    </template>
-  </yt-live-chat-ticker-renderer>
-</template>
-
 <script setup>
 // @ts-nocheck
-import { ref, computed, onBeforeUnmount, nextTick } from 'vue'
-import { formatCurrency } from './utils'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+import * as constants from './constants'
 import ImgShadow from './ImgShadow.vue'
 import MembershipItem from './MembershipItem.vue'
 import PaidMessage from './PaidMessage.vue'
-import * as constants from './constants'
+import { formatCurrency } from './utils'
 
 const props = defineProps({
   messages: Array,
   showGiftName: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update:messages'])
@@ -109,8 +29,8 @@ onBeforeUnmount(() => {
 })
 
 const showMessages = computed(() => {
-  let res = []
-  for (let message of props.messages) {
+  const res = []
+  for (const message of props.messages) {
     if (!needToShow(message)) {
       continue
     }
@@ -118,7 +38,7 @@ const showMessages = computed(() => {
       raw: message,
       bgColor: getBgColor(message),
       color: getColor(message),
-      text: getText(message)
+      text: getText(message),
     })
   }
   return res
@@ -136,7 +56,7 @@ const pinnedMessageShowContent = computed(() => {
 })
 
 async function onTickerItemEnter(el, done) {
-  let width = el.clientWidth
+  const width = el.clientWidth
   if (width === 0) {
     // CSS指定了不显示固定栏
     done()
@@ -165,7 +85,7 @@ function onTickerItemLeave(el, done) {
 const getShowAuthorName = constants.getShowAuthorName
 
 function needToShow(message) {
-  let pinTime = getPinTime(message)
+  const pinTime = getPinTime(message)
   return (new Date() - message.addTime) / (60 * 1000) < pinTime
 }
 
@@ -175,11 +95,11 @@ function getBgColor(message) {
     color1 = 'rgba(15,157,88,1)'
     color2 = 'rgba(11,128,67,1)'
   } else {
-    let config = constants.getPriceConfig(message.price)
+    const config = constants.getPriceConfig(message.price)
     color1 = config.colors.contentBg
     color2 = config.colors.headerBg
   }
-  let pinTime = getPinTime(message)
+  const pinTime = getPinTime(message)
   let progress = (1 - ((curTime.value - message.addTime) / (60 * 1000) / pinTime)) * 100
   if (progress < 0) {
     progress = 0
@@ -215,10 +135,10 @@ function updateProgress() {
   curTime.value = new Date()
 
   // 删除过期的消息
-  let filteredMessages = []
+  const filteredMessages = []
   let messagesChanged = false
-  for (let message of props.messages) {
-    let pinTime = getPinTime(message)
+  for (const message of props.messages) {
+    const pinTime = getPinTime(message)
     if ((curTime.value - message.addTime) / (60 * 1000) >= pinTime) {
       messagesChanged = true
       if (pinnedMessage.value === message) {
@@ -242,5 +162,86 @@ function onItemClick(message) {
 }
 </script>
 
+<template>
+  <yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
+    <div
+      id="container"
+      dir="ltr"
+      class="style-scope yt-live-chat-ticker-renderer"
+    >
+      <transition-group
+        id="items"
+        tag="div"
+        :css="false"
+        class="style-scope yt-live-chat-ticker-renderer"
+        @enter="onTickerItemEnter"
+        @leave="onTickerItemLeave"
+      >
+        <yt-live-chat-ticker-paid-message-item-renderer
+          v-for="message in showMessages"
+          :key="message.raw.id"
+          tabindex="0"
+          class="style-scope yt-live-chat-ticker-renderer"
+          style="overflow: hidden;"
+          @click="onItemClick(message.raw)"
+        >
+          <div
+            id="container"
+            dir="ltr"
+            class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+            :style="{
+              background: message.bgColor,
+            }"
+          >
+            <div
+              id="content"
+              class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+              :style="{
+                color: message.color,
+              }"
+            >
+              <ImgShadow
+                id="author-photo"
+                height="24"
+                width="24"
+                class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+                :img-url="message.raw.avatarUrl"
+              />
+              <span
+                id="text"
+                dir="ltr"
+                class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
+              >{{ message.text }}</span>
+            </div>
+          </div>
+        </yt-live-chat-ticker-paid-message-item-renderer>
+      </transition-group>
+    </div>
+    <template v-if="pinnedMessage">
+      <MembershipItem
+        v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
+        :key="pinnedMessage.id"
+        class="style-scope yt-live-chat-ticker-renderer"
+        :avatar-url="pinnedMessage.avatarUrl"
+        :author-name="getShowAuthorName(pinnedMessage)"
+        :privilege-type="pinnedMessage.privilegeType"
+        :title="pinnedMessage.title"
+        :time="pinnedMessage.time"
+      />
+      <PaidMessage
+        v-else
+        :key="pinnedMessage.id"
+        class="style-scope yt-live-chat-ticker-renderer"
+        :price="pinnedMessage.price"
+        :avatar-url="pinnedMessage.avatarUrl"
+        :author-name="getShowAuthorName(pinnedMessage)"
+        :time="pinnedMessage.time"
+        :content="pinnedMessageShowContent"
+      />
+    </template>
+  </yt-live-chat-ticker-renderer>
+</template>
+
 <style src="@/assets/css/youtube/yt-live-chat-ticker-renderer.css"></style>
+
 <style src="@/assets/css/youtube/yt-live-chat-ticker-paid-message-item-renderer.css"></style>
diff --git a/src/views/obs/blivechat/constants.js b/src/views/obs/blivechat/constants.js
index fda7658..1992564 100644
--- a/src/views/obs/blivechat/constants.js
+++ b/src/views/obs/blivechat/constants.js
@@ -7,7 +7,7 @@ export const AUTHOR_TYPE_TO_TEXT = [
   '',
   'member', // 舰队
   'moderator', // 房管
-  'owner' // 主播
+  'owner', // 主播
 ]
 
 export function getShowGuardLevelText(guardLevel) {
@@ -45,7 +45,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(0,0,0,1)',
       authorName: 'rgba(0,0,0,0.701961)',
       time: 'rgba(0,0,0,0.501961)',
-      content: 'rgba(0,0,0,1)'
+      content: 'rgba(0,0,0,1)',
     },
     pinTime: 0,
     priceLevel: 0,
@@ -59,7 +59,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(255,255,255,1)',
       authorName: 'rgba(255,255,255,0.701961)',
       time: 'rgba(255,255,255,0.501961)',
-      content: 'rgba(255,255,255,1)'
+      content: 'rgba(255,255,255,1)',
     },
     pinTime: 0,
     priceLevel: 1,
@@ -73,7 +73,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(0,0,0,1)',
       authorName: 'rgba(0,0,0,0.701961)',
       time: 'rgba(0,0,0,0.501961)',
-      content: 'rgba(0,0,0,1)'
+      content: 'rgba(0,0,0,1)',
     },
     pinTime: 0,
     priceLevel: 2,
@@ -87,7 +87,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(0,0,0,1)',
       authorName: 'rgba(0,0,0,0.541176)',
       time: 'rgba(0,0,0,0.501961)',
-      content: 'rgba(0,0,0,1)'
+      content: 'rgba(0,0,0,1)',
     },
     pinTime: 2,
     priceLevel: 3,
@@ -101,7 +101,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(0,0,0,0.87451)',
       authorName: 'rgba(0,0,0,0.541176)',
       time: 'rgba(0,0,0,0.501961)',
-      content: 'rgba(0,0,0,0.87451)'
+      content: 'rgba(0,0,0,0.87451)',
     },
     pinTime: 5,
     priceLevel: 4,
@@ -115,7 +115,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(255,255,255,0.87451)',
       authorName: 'rgba(255,255,255,0.701961)',
       time: 'rgba(255,255,255,0.501961)',
-      content: 'rgba(255,255,255,0.87451)'
+      content: 'rgba(255,255,255,0.87451)',
     },
     pinTime: 10,
     priceLevel: 5,
@@ -129,7 +129,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(255,255,255,1)',
       authorName: 'rgba(255,255,255,0.701961)',
       time: 'rgba(255,255,255,0.501961)',
-      content: 'rgba(255,255,255,1)'
+      content: 'rgba(255,255,255,1)',
     },
     pinTime: 30,
     priceLevel: 6,
@@ -143,7 +143,7 @@ const PRICE_CONFIGS = [
       header: 'rgba(255,255,255,1)',
       authorName: 'rgba(255,255,255,0.701961)',
       time: 'rgba(255,255,255,0.501961)',
-      content: 'rgba(255,255,255,1)'
+      content: 'rgba(255,255,255,1)',
     },
     pinTime: 60,
     priceLevel: 7,
@@ -154,7 +154,7 @@ export function getPriceConfig(price) {
   let i = 0
   // 根据先验知识，从小找到大通常更快结束
   for (; i < PRICE_CONFIGS.length - 1; i++) {
-    let nextConfig = PRICE_CONFIGS[i + 1]
+    const nextConfig = PRICE_CONFIGS[i + 1]
     if (price < nextConfig.price) {
       return PRICE_CONFIGS[i]
     }
@@ -170,22 +170,22 @@ export function getShowContent(message) {
 }
 
 export function getShowRichContent(message) {
-  let richContent = [...message.richContent]
+  const richContent = [...message.richContent]
   if (message.translation) {
     richContent.push({
       type: CONTENT_TYPE_TEXT,
-      text: `（${message.translation}）`
+      text: `（${message.translation}）`,
     })
   }
   return richContent
 }
 
 export function getShowContentParts(message) {
-  let contentParts = [...message.contentParts || []]
+  const contentParts = [...message.contentParts || []]
   if (message.translation) {
     contentParts.push({
       type: CONTENT_TYPE_TEXT,
-      text: `（${message.translation}）`
+      text: `（${message.translation}）`,
     })
   }
   return contentParts
diff --git a/src/views/obs/blivechat/utils/index.js b/src/views/obs/blivechat/utils/index.js
index 9f572bc..cb1e055 100644
--- a/src/views/obs/blivechat/utils/index.js
+++ b/src/views/obs/blivechat/utils/index.js
@@ -1,9 +1,8 @@
-
 import { format } from 'date-fns'
 
 export function mergeConfig(config, defaultConfig) {
-  let res = {}
-  for (let i in defaultConfig) {
+  const res = {}
+  for (const i in defaultConfig) {
     res[i] = i in config ? config[i] : defaultConfig[i]
   }
   return res
@@ -11,13 +10,13 @@ export function mergeConfig(config, defaultConfig) {
 
 export function toBool(val) {
   if (typeof val === 'string') {
-    return ['false', 'no', 'off', '0', ''].indexOf(val.toLowerCase()) === -1
+    return !['false', 'no', 'off', '0', ''].includes(val.toLowerCase())
   }
   return Boolean(val)
 }
 
 export function toInt(val, _default) {
-  let res = parseInt(val)
+  let res = Number.parseInt(val)
   if (isNaN(res)) {
     res = _default
   }
@@ -25,7 +24,7 @@ export function toInt(val, _default) {
 }
 
 export function toFloat(val, _default) {
-  let res = parseFloat(val)
+  let res = Number.parseFloat(val)
   if (isNaN(res)) {
     res = _default
   }
@@ -34,7 +33,7 @@ export function toFloat(val, _default) {
 
 export function formatCurrency(price) {
   return new Intl.NumberFormat('zh-CN', {
-    minimumFractionDigits: price < 100 ? 2 : 0
+    minimumFractionDigits: price < 100 ? 2 : 0,
   }).format(price)
 }
 
@@ -43,9 +42,9 @@ export function getTimeTextHourMin(date) {
 }
 
 export function getUuid4Hex() {
-  let chars = []
+  const chars = []
   for (let i = 0; i < 32; i++) {
-    let char = Math.floor(Math.random() * 16).toString(16)
+    const char = Math.floor(Math.random() * 16).toString(16)
     chars.push(char)
   }
   return chars.join('')
diff --git a/src/views/obs/blivechat/utils/pronunciation/index.js b/src/views/obs/blivechat/utils/pronunciation/index.js
index c989447..44ff09e 100644
--- a/src/views/obs/blivechat/utils/pronunciation/index.js
+++ b/src/views/obs/blivechat/utils/pronunciation/index.js
@@ -9,19 +9,19 @@ export class PronunciationConverter {
   async loadDict(dictName) {
     let promise
     switch (dictName) {
-    case DICT_PINYIN:
-      promise = import('./dictPinyin')
-      break
-    case DICT_KANA:
-      promise = import('./dictKana')
-      break
-    default:
-      return
+      case DICT_PINYIN:
+        promise = import('./dictPinyin')
+        break
+      case DICT_KANA:
+        promise = import('./dictKana')
+        break
+      default:
+        return
     }
 
-    let dictTxt = (await promise).default
-    let pronunciationMap = new Map()
-    for (let item of dictTxt.split('\n')) {
+    const dictTxt = (await promise).default
+    const pronunciationMap = new Map()
+    for (const item of dictTxt.split('\n')) {
       if (item.length === 0) {
         continue
       }
@@ -31,10 +31,10 @@ export class PronunciationConverter {
   }
 
   getPronunciation(text) {
-    let res = []
+    const res = []
     let lastHasPronunciation = null
-    for (let char of text) {
-      let pronunciation = this.pronunciationMap.get(char)
+    for (const char of text) {
+      const pronunciation = this.pronunciationMap.get(char)
       if (pronunciation === undefined) {
         if (lastHasPronunciation !== null && lastHasPronunciation) {
           res.push(' ')
diff --git a/src/views/obs/blivechat/utils/trie.js b/src/views/obs/blivechat/utils/trie.js
index a869cd5..a10a54a 100644
--- a/src/views/obs/blivechat/utils/trie.js
+++ b/src/views/obs/blivechat/utils/trie.js
@@ -6,7 +6,7 @@ export class Trie {
   _createNode() {
     return {
       children: {}, // char -> node
-      value: null
+      value: null,
     }
   }
 
@@ -15,7 +15,7 @@ export class Trie {
       throw new Error('key is empty')
     }
     let node = this._root
-    for (let char of key) {
+    for (const char of key) {
       let nextNode = node.children[char]
       if (nextNode === undefined) {
         nextNode = node.children[char] = this._createNode()
@@ -27,8 +27,8 @@ export class Trie {
 
   get(key) {
     let node = this._root
-    for (let char of key) {
-      let nextNode = node.children[char]
+    for (const char of key) {
+      const nextNode = node.children[char]
       if (nextNode === undefined) {
         return null
       }
@@ -43,8 +43,8 @@ export class Trie {
 
   lazyMatch(str) {
     let node = this._root
-    for (let char of str) {
-      let nextNode = node.children[char]
+    for (const char of str) {
+      const nextNode = node.children[char]
       if (nextNode === undefined) {
         return null
       }
diff --git a/src/views/obs/live-request/ClassicRequestOBS.vue b/src/views/obs/live-request/ClassicRequestOBS.vue
index dc00b2e..e2ed997 100644
--- a/src/views/obs/live-request/ClassicRequestOBS.vue
+++ b/src/views/obs/live-request/ClassicRequestOBS.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import { NDivider, NEmpty } from 'naive-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import {
   SongRequestFrom,
   SongRequestStatus,
 } from '@/api/api-models'
-import { useElementSize } from '@vueuse/core'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { NDivider, NEmpty } from 'naive-ui'
 import { useLiveRequestData } from './useLiveRequestData'
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
-  speedMultiplier?: number,
+  id?: number
+  active?: boolean
+  visible?: boolean
+  speedMultiplier?: number
 }>()
 
 const route = useRoute()
@@ -26,7 +26,7 @@ const speedMultiplier = computed(() => {
     return props.speedMultiplier
   }
   const speedParam = route.query.speed
-  const speed = parseFloat(speedParam?.toString() ?? '1')
+  const speed = Number.parseFloat(speedParam?.toString() ?? '1')
   return isNaN(speed) || speed <= 0 ? 1 : speed
 })
 
@@ -38,7 +38,7 @@ const {
   allowGuardTypes,
   key,
   update,
-  initRTC
+  initRTC,
 } = useLiveRequestData(currentId.value?.toString() ?? '')
 
 const cardRef = ref()
@@ -217,7 +217,7 @@ onUnmounted(() => {
             type="sc"
           >
             <span class="tag-label">SC点歌</span>
-            <span class="tag-value">{{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}</span>
+            <span class="tag-value">{{ settings.allowSC ? `> ¥${settings.scMinPrice}` : '不允许' }}</span>
           </div>
           <div
             class="live-request-footer-tag"
@@ -228,7 +228,7 @@ onUnmounted(() => {
               {{
                 settings.needWearFanMedal
                   ? settings.fanMedalMinLevel > 0
-                    ? '> ' + settings.fanMedalMinLevel
+                    ? `> ${settings.fanMedalMinLevel}`
                     : '佩戴'
                   : '无需'
               }}
@@ -253,7 +253,7 @@ onUnmounted(() => {
             type="sc"
           >
             <span class="tag-label">SC点歌</span>
-            <span class="tag-value">{{ settings.allowSC ? '> ¥' + settings.scMinPrice : '不允许' }}</span>
+            <span class="tag-value">{{ settings.allowSC ? `> ¥${settings.scMinPrice}` : '不允许' }}</span>
           </div>
           <div
             class="live-request-footer-tag"
@@ -264,7 +264,7 @@ onUnmounted(() => {
               {{
                 settings.needWearFanMedal
                   ? settings.fanMedalMinLevel > 0
-                    ? '> ' + settings.fanMedalMinLevel
+                    ? `> ${settings.fanMedalMinLevel}`
                     : '佩戴'
                   : '无需'
               }}
@@ -631,4 +631,4 @@ onUnmounted(() => {
     box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs/live-request/FreshRequestOBS.vue b/src/views/obs/live-request/FreshRequestOBS.vue
index 2d89a9b..43500f9 100644
--- a/src/views/obs/live-request/FreshRequestOBS.vue
+++ b/src/views/obs/live-request/FreshRequestOBS.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { SongRequestFrom, SongRequestStatus } from '@/api/api-models'
 import { useElementSize } from '@vueuse/core'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
 // Remove Vue3Marquee import if no longer needed elsewhere
 // import { Vue3Marquee } from 'vue3-marquee'
-import { NDivider, NEmpty, NBadge, NAvatar, NTag } from 'naive-ui'
+import { NEmpty, NTag } from 'naive-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { SongRequestFrom } from '@/api/api-models'
 import { useLiveRequestData } from './useLiveRequestData'
 
 const props = defineProps<{
-  id?: number,
-  active?: boolean,
-  visible?: boolean,
+  id?: number
+  active?: boolean
+  visible?: boolean
   speedMultiplier?: number
 }>()
 
@@ -26,7 +26,7 @@ const speedMultiplier = computed(() => {
     return props.speedMultiplier
   }
   const speedParam = route.query.speed
-  const speed = parseFloat(speedParam?.toString() ?? '1')
+  const speed = Number.parseFloat(speedParam?.toString() ?? '1')
   return isNaN(speed) || speed <= 0 ? 1 : speed
 })
 
@@ -38,7 +38,7 @@ const {
   allowGuardTypes,
   key,
   update,
-  initRTC
+  initRTC,
 } = useLiveRequestData(currentId.value?.toString() ?? '')
 
 const containerRef = ref()
@@ -605,4 +605,4 @@ onUnmounted(() => {
 .fresh-request-song-list-inner.animating:hover {
   animation-play-state: paused;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs/live-request/useLiveRequestData.ts b/src/views/obs/live-request/useLiveRequestData.ts
index ea0f997..44c11ff 100644
--- a/src/views/obs/live-request/useLiveRequestData.ts
+++ b/src/views/obs/live-request/useLiveRequestData.ts
@@ -1,14 +1,15 @@
+import type {
+  Setting_LiveRequest,
+  SongRequestInfo,
+} from '@/api/api-models'
+import { List } from 'linqts'
+import { computed, ref } from 'vue'
 import {
   QueueSortType,
-  Setting_LiveRequest,
-  SongRequestFrom,
-  SongRequestInfo,
   SongRequestStatus,
 } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import { SONG_REQUEST_API_URL } from '@/data/constants'
-import { computed, ref, Ref } from 'vue'
-import { List } from 'linqts'
 import { useWebRTC } from '@/store/useRTC'
 
 export function useLiveRequestData(currentId: string) {
@@ -22,21 +23,21 @@ export function useLiveRequestData(currentId: string) {
     let result = new List(originSongs.value)
     switch (settings.value.sortType) {
       case QueueSortType.TimeFirst: {
-        result = result.ThenBy((q) => q.createAt)
+        result = result.ThenBy(q => q.createAt)
         break
       }
       case QueueSortType.GuardFirst: {
         result = result
-          .OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
-          .ThenBy((q) => q.createAt)
+          .OrderBy(q => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
+          .ThenBy(q => q.createAt)
         break
       }
       case QueueSortType.PaymentFist: {
-        result = result.OrderByDescending((q) => q.price ?? 0).ThenBy((q) => q.createAt)
+        result = result.OrderByDescending(q => q.price ?? 0).ThenBy(q => q.createAt)
         break
       }
       case QueueSortType.FansMedalFirst: {
-        result = result.OrderByDescending((q) => q.user?.fans_medal_level ?? 0).ThenBy((q) => q.createAt)
+        result = result.OrderByDescending(q => q.user?.fans_medal_level ?? 0).ThenBy(q => q.createAt)
         break
       }
     }
@@ -48,11 +49,11 @@ export function useLiveRequestData(currentId: string) {
   })
 
   const singing = computed(() => {
-    return songs.value.find((s) => s.status == SongRequestStatus.Singing)
+    return songs.value.find(s => s.status == SongRequestStatus.Singing)
   })
 
   const activeSongs = computed(() => {
-    return songs.value.filter((s) => s.status == SongRequestStatus.Waiting)
+    return songs.value.filter(s => s.status == SongRequestStatus.Waiting)
   })
 
   const allowGuardTypes = computed(() => {
@@ -72,8 +73,8 @@ export function useLiveRequestData(currentId: string) {
   // 数据获取方法
   async function get() {
     try {
-      const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest }>(
-        SONG_REQUEST_API_URL + 'get-active-and-settings',
+      const data = await QueryGetAPI<{ songs: SongRequestInfo[], setting: Setting_LiveRequest }>(
+        `${SONG_REQUEST_API_URL}get-active-and-settings`,
         {
           id: currentId,
         },
@@ -87,7 +88,7 @@ export function useLiveRequestData(currentId: string) {
     return {
       songs: [],
       setting: {} as Setting_LiveRequest,
-    } as { songs: SongRequestInfo[]; setting: Setting_LiveRequest }
+    } as { songs: SongRequestInfo[], setting: Setting_LiveRequest }
   }
 
   async function update() {
@@ -108,7 +109,7 @@ export function useLiveRequestData(currentId: string) {
   async function initRTC() {
     rtc.value = await useWebRTC().Init('slave')
     // 接收点播结果消息
-    rtc.value.on('function.live-request.add', () => update())
+    rtc.value.on('function.live-request.add', async () => update())
   }
 
   return {
@@ -121,6 +122,6 @@ export function useLiveRequestData(currentId: string) {
     key,
     get,
     update,
-    initRTC
+    initRTC,
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/obs_store/OBSComponentStoreView.vue b/src/views/obs_store/OBSComponentStoreView.vue
index 840c30e..1e15058 100644
--- a/src/views/obs_store/OBSComponentStoreView.vue
+++ b/src/views/obs_store/OBSComponentStoreView.vue
@@ -1,3 +1,244 @@
+<script lang="ts" setup>
+import type { ComponentPublicInstance } from 'vue'
+import type { UserInfo } from '@/api/api-models'
+import type { OBSComponentDefinition } from '@/data/obsConstants'
+
+import type { ConfigItemDefinition } from '@/data/VTsuruConfigTypes'
+import { NAlert, NButton, NCard, NGrid, NGridItem, NModal, NPageHeader, NSpace, NSpin, NTag, useMessage } from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
+import { OBSComponentMap } from '@/data/obsConstants'
+import { useBiliAuth } from '@/store/useBiliAuth'
+
+// --- 静态导入所有可能的组件，以便 DynamicForm 能获取到 Config 定义 ---
+// 如果组件过多，考虑更动态的注册方式，但 DynamicForm 需要直接访问 Config
+// 修正：直接从子组件实例获取 Config，而不是静态导入模块本身
+// import * as ExampleOBSComponent from './components/ExampleOBSComponent.vue';
+
+// --- 模拟父组件传入的信息 ---
+const props = defineProps<{
+  // 如果此视图作为路由组件，可能从路由参数获取信息
+  // userId?: string; // 示例：如果配置与特定用户关联
+  biliInfo?: any // B站信息 (可选)
+}>()
+
+const accountInfo = useAccount()
+const biliAuth = useBiliAuth() // 若需要B站授权信息
+const message = useMessage()
+
+const userInfo = ref<UserInfo | undefined>(accountInfo.value.id ? { id: accountInfo.value.id, name: accountInfo.value.name } as UserInfo : undefined) // 模拟
+
+const availableComponents = ref<OBSComponentDefinition[]>([])
+const currentSelectedComponentId = ref<string | null>(null)
+const dynamicComponentRef = ref<ComponentPublicInstance & { Config?: ConfigItemDefinition[], DefaultConfig?: any } | null>(null)
+
+const componentConfig = ref<any>({}) // 当前选中组件的运行时配置
+const componentConfigForEditing = ref<any>({}) // 模态框中编辑的配置副本
+
+const isLoading = ref(false)
+const showSettingModal = ref(false)
+const refreshSignal = ref(0) // 用于手动触发子组件刷新
+const showPreviewModal = ref(false) // 新增：控制预览 Modal 的显示
+
+// 初始化可用组件列表
+function initializeComponents() {
+  availableComponents.value = Object.values(OBSComponentMap)
+}
+
+const currentSelectedComponent = computed<OBSComponentDefinition | undefined>(() => {
+  if (!currentSelectedComponentId.value) return undefined
+  return OBSComponentMap[currentSelectedComponentId.value]
+})
+
+// 用于模态框的计算属性，确保组件引用已加载并且 Config 存在
+const selectedComponentDefinitionForModal = computed(() => {
+  if (!currentSelectedComponent.value || !dynamicComponentRef.value?.Config) return undefined
+  // 确保 dynamicComponentRef.value 存在并且具有 Config 属性
+  if (dynamicComponentRef.value && typeof dynamicComponentRef.value.Config !== 'undefined') {
+    return {
+      ...currentSelectedComponent.value,
+      componentRef: dynamicComponentRef.value, // 直接使用 ref
+    }
+  }
+  return undefined
+})
+
+async function selectComponent(componentId: string) {
+  if (currentSelectedComponentId.value === componentId) { // 如果已经是当前选中的，则尝试刷新
+    refreshSelectedComponent()
+    return
+  }
+
+  currentSelectedComponentId.value = componentId
+  isLoading.value = true
+  componentConfig.value = {} // 重置配置
+
+  // 等待下一个 tick 确保 dynamicComponentRef 更新
+  await new Promise(resolve => setTimeout(resolve, 0))
+  currentSelectedComponent.value!.settingName = dynamicComponentRef.value?.Config ? `OBSStore.Config.${currentSelectedComponent.value!.id}` : undefined
+
+  if (currentSelectedComponent.value?.settingName) {
+    await loadComponentConfig(currentSelectedComponent.value.settingName)
+  } else {
+    // 如果组件没有 settingName，则它可能不使用持久化配置，或者使用默认配置
+    if (dynamicComponentRef.value && dynamicComponentRef.value.DefaultConfig) {
+      componentConfig.value = { ...dynamicComponentRef.value.DefaultConfig }
+      componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value))
+    }
+  }
+  isLoading.value = false
+  showPreviewModal.value = true // 新增：显示预览 Modal
+}
+
+async function loadComponentConfig(settingName: string) {
+  if (!userInfo.value?.id) {
+    message.error('无法加载组件配置：未找到用户信息。')
+    if (dynamicComponentRef.value && dynamicComponentRef.value.DefaultConfig) {
+      componentConfig.value = { ...dynamicComponentRef.value.DefaultConfig }
+      componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value))
+    }
+    isLoading.value = false
+    return
+  }
+
+  isLoading.value = true
+  try {
+    const configData = await DownloadConfig<any>(settingName, userInfo.value.id)
+    const defaultConfig = dynamicComponentRef.value?.DefaultConfig || {}
+
+    if (configData.msg || Object.keys(configData.data || {}).length === 0) {
+      componentConfig.value = { ...defaultConfig }
+      message.info('未找到在线配置，已加载默认配置。')
+    } else {
+      // 合并远程配置和默认配置，确保所有键都存在
+      componentConfig.value = configData.data
+    }
+  } catch (error) {
+    console.error('加载组件配置失败:', error)
+    message.error(`加载组件配置失败: ${error instanceof Error ? error.message : String(error)}`)
+    componentConfig.value = { ...(dynamicComponentRef.value?.DefaultConfig || {}) }
+  } finally {
+    componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value)) // 深拷贝用于编辑
+    isLoading.value = false
+  }
+}
+
+async function saveComponentConfig() {
+  if (!currentSelectedComponent.value?.settingName || !userInfo.value?.id) {
+    message.error('无法保存配置：组件配置名称或用户信息丢失。')
+    return
+  }
+  isLoading.value = true
+  try {
+    await UploadConfig(currentSelectedComponent.value.settingName, JSON.stringify(componentConfigForEditing.value), // 保存编辑后的配置
+      false) // 或根据需要设置为 true);
+    message.success('配置保存成功！')
+    componentConfig.value = JSON.parse(JSON.stringify(componentConfigForEditing.value)) // 更新运行时配置
+    showSettingModal.value = false
+    refreshSignal.value++ // 触发子组件刷新
+  } catch (error) {
+    console.error('保存组件配置失败:', error)
+    message.error(`保存组件配置失败: ${error instanceof Error ? error.message : String(error)}`)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function onDynamicFormUpdate(updatedConfig: any) {
+  componentConfigForEditing.value = updatedConfig
+}
+
+function handleConfigUpdateFromChild(newConfig: any) {
+  // 如果子组件能直接修改配置并冒泡事件，可以在此处理
+  // componentConfig.value = newConfig;
+  // componentConfigForEditing.value = JSON.parse(JSON.stringify(newConfig));
+  // console.log('Config updated from child:', newConfig);
+}
+
+function refreshSelectedComponent() {
+  if (!currentSelectedComponent.value) return
+  message.info(`正在刷新 ${currentSelectedComponent.value.name}...`)
+
+  // 方式1: 增加 refreshSignal 以触发子组件 watch
+  refreshSignal.value++
+
+  // 方式2: 如果子组件有暴露的刷新方法，可以调用
+  // if (typeof dynamicComponentRef.value?.refresh === 'function') {
+  //   dynamicComponentRef.value.refresh();
+  // }
+
+  // 可选: 重新加载配置
+  if (currentSelectedComponent.value.settingName) {
+    loadComponentConfig(currentSelectedComponent.value.settingName)
+  }
+}
+
+// 当 dynamicComponentRef 变化时 (组件加载完成)，尝试加载/设置配置
+watch(dynamicComponentRef, (newRef) => {
+  if (newRef) { // 组件已挂载
+    const compDef = currentSelectedComponent.value
+    if (compDef) {
+      currentSelectedComponent.value!.settingName = newRef.Config ? `OBSStore.Config.${currentSelectedComponent.value!.id}` : undefined
+      if (compDef.settingName) {
+        // 如果有 settingName，则 loadComponentConfig 会处理（包括默认配置）
+        // 这里确保在 selectComponent 中已经调用了 loadComponentConfig
+      } else if (newRef.DefaultConfig) {
+        // 没有 settingName，但子组件有 DefaultConfig
+        componentConfig.value = { ...newRef.DefaultConfig }
+        componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value))
+      }
+    }
+  }
+}, { immediate: false }) // immediate: false 因为 selectComponent 会处理首次加载
+
+watch(showSettingModal, (isShown) => {
+  if (isShown && currentSelectedComponent.value) {
+    // 打开模态框时，确保编辑的是当前运行时配置的深拷贝
+    // 同时，确保 DefaultConfig 能够正确合并，以防远程配置不完整
+    const defaultConfig = dynamicComponentRef.value?.DefaultConfig || {}
+    componentConfigForEditing.value = JSON.parse(JSON.stringify({
+      ...defaultConfig,
+      ...componentConfig.value, // 当前运行时配置优先
+    }))
+  }
+})
+
+// 新增：用于从预览 Modal 中打开配置 Modal
+function openSettingsForCurrentComponent() {
+  if (currentSelectedComponent.value?.settingName && userInfo.value?.id === accountInfo.value.id) {
+    // 确保 componentConfigForEditing 是最新的，基于 componentConfig
+    // watch(showSettingModal) 已经处理了更复杂的默认配置合并逻辑，这里仅确保基于当前运行时配置的深拷贝
+    const defaultConfig = dynamicComponentRef.value?.DefaultConfig || {}
+    componentConfigForEditing.value = JSON.parse(JSON.stringify({
+      ...defaultConfig,
+      ...componentConfig.value,
+    }))
+    showSettingModal.value = true
+  } else {
+    message.error('无法打开配置：组件无设置项或用户不匹配。')
+  }
+}
+
+function handlePreviewModalUpdateShow(show: boolean) {
+  showPreviewModal.value = show // 保持 v-model:show 的双向绑定
+  if (!show) {
+    // 清理预览 Modal 关闭后的状态
+    currentSelectedComponentId.value = null
+    componentConfig.value = {}
+    componentConfigForEditing.value = {}
+    dynamicComponentRef.value = null // 清除对组件实例的引用
+  }
+}
+
+onMounted(() => {
+  initializeComponents()
+  // 可以在这里根据路由参数或其他逻辑自动选择一个组件
+  // if (props.initialComponentId) {
+  //   selectComponent(props.initialComponentId);
+  // }
+})
+</script>
+
 <template>
   <div class="obs-component-store-view">
     <NPageHeader :title="currentSelectedComponent ? currentSelectedComponent.name : 'OBS 组件商店'">
@@ -49,7 +290,7 @@
     <NModal
       v-model:show="showPreviewModal"
       preset="card"
-      :title="'组件预览：' + (currentSelectedComponent?.name || '')"
+      :title="`组件预览：${currentSelectedComponent?.name || ''}`"
       style="max-width: 95vw; width: 1000px; max-height: 95vh; height: 1000px;"
       @update:show="handlePreviewModalUpdateShow"
     >
@@ -143,250 +384,6 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { DownloadConfig, UploadConfig, useAccount } from '@/api/account';
-  import { UserInfo } from '@/api/api-models';
-  import { OBSComponentMap } from '@/data/obsConstants';
-  import { OBSComponentDefinition } from '@/data/obsConstants';
-  import { ConfigItemDefinition } from '@/data/VTsuruConfigTypes';
-  import { useBiliAuth } from '@/store/useBiliAuth';
-  import { NAlert, NButton, NCard, NGrid, NGridItem, NModal, NPageHeader, NSpace, NSpin, NTag, useMessage } from 'naive-ui';
-  import { ComponentPublicInstance, computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
-
-  // --- 静态导入所有可能的组件，以便 DynamicForm 能获取到 Config 定义 ---
-  // 如果组件过多，考虑更动态的注册方式，但 DynamicForm 需要直接访问 Config
-  // 修正：直接从子组件实例获取 Config，而不是静态导入模块本身
-  // import * as ExampleOBSComponent from './components/ExampleOBSComponent.vue';
-
-
-  // --- 模拟父组件传入的信息 ---
-  const props = defineProps<{
-    // 如果此视图作为路由组件，可能从路由参数获取信息
-    // userId?: string; // 示例：如果配置与特定用户关联
-    biliInfo?: any; // B站信息 (可选)
-  }>();
-
-  const accountInfo = useAccount();
-  const biliAuth = useBiliAuth(); // 若需要B站授权信息
-  const message = useMessage();
-
-  const userInfo = ref<UserInfo | undefined>(accountInfo.value.id ? { id: accountInfo.value.id, name: accountInfo.value.name } as UserInfo : undefined); // 模拟
-
-  const availableComponents = ref<OBSComponentDefinition[]>([]);
-  const currentSelectedComponentId = ref<string | null>(null);
-  const dynamicComponentRef = ref<ComponentPublicInstance & { Config?: ConfigItemDefinition[], DefaultConfig?: any; } | null>(null);
-
-
-  const componentConfig = ref<any>({}); // 当前选中组件的运行时配置
-  const componentConfigForEditing = ref<any>({}); // 模态框中编辑的配置副本
-
-  const isLoading = ref(false);
-  const showSettingModal = ref(false);
-  const refreshSignal = ref(0); // 用于手动触发子组件刷新
-  const showPreviewModal = ref(false); // 新增：控制预览 Modal 的显示
-
-  // 初始化可用组件列表
-  function initializeComponents() {
-    availableComponents.value = Object.values(OBSComponentMap);
-  }
-
-  const currentSelectedComponent = computed<OBSComponentDefinition | undefined>(() => {
-    if (!currentSelectedComponentId.value) return undefined;
-    return OBSComponentMap[currentSelectedComponentId.value];
-  });
-
-  // 用于模态框的计算属性，确保组件引用已加载并且 Config 存在
-  const selectedComponentDefinitionForModal = computed(() => {
-    if (!currentSelectedComponent.value || !dynamicComponentRef.value?.Config) return undefined;
-    // 确保 dynamicComponentRef.value 存在并且具有 Config 属性
-    if (dynamicComponentRef.value && typeof dynamicComponentRef.value.Config !== 'undefined') {
-      return {
-        ...currentSelectedComponent.value,
-        componentRef: dynamicComponentRef.value, // 直接使用 ref
-      };
-    }
-    return undefined;
-  });
-
-
-  async function selectComponent(componentId: string) {
-    if (currentSelectedComponentId.value === componentId) { // 如果已经是当前选中的，则尝试刷新
-      refreshSelectedComponent();
-      return;
-    }
-
-    currentSelectedComponentId.value = componentId;
-    isLoading.value = true;
-    componentConfig.value = {}; // 重置配置
-
-    // 等待下一个 tick 确保 dynamicComponentRef 更新
-    await new Promise(resolve => setTimeout(resolve, 0));
-    currentSelectedComponent.value!.settingName = dynamicComponentRef.value?.Config ? `OBSStore.Config.${currentSelectedComponent.value!.id}` : undefined;
-
-    if (currentSelectedComponent.value?.settingName) {
-      await loadComponentConfig(currentSelectedComponent.value.settingName);
-    } else {
-      // 如果组件没有 settingName，则它可能不使用持久化配置，或者使用默认配置
-      if (dynamicComponentRef.value && dynamicComponentRef.value.DefaultConfig) {
-        componentConfig.value = { ...dynamicComponentRef.value.DefaultConfig };
-        componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value));
-      }
-    }
-    isLoading.value = false;
-    showPreviewModal.value = true; // 新增：显示预览 Modal
-  }
-
-  async function loadComponentConfig(settingName: string) {
-    if (!userInfo.value?.id) {
-      message.error('无法加载组件配置：未找到用户信息。');
-      if (dynamicComponentRef.value && dynamicComponentRef.value.DefaultConfig) {
-        componentConfig.value = { ...dynamicComponentRef.value.DefaultConfig };
-        componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value));
-      }
-      isLoading.value = false;
-      return;
-    }
-
-    isLoading.value = true;
-    try {
-      const configData = await DownloadConfig<any>(settingName, userInfo.value.id);
-      const defaultConfig = dynamicComponentRef.value?.DefaultConfig || {};
-
-      if (configData.msg || Object.keys(configData.data || {}).length === 0) {
-        componentConfig.value = { ...defaultConfig };
-        message.info('未找到在线配置，已加载默认配置。');
-      } else {
-        // 合并远程配置和默认配置，确保所有键都存在
-        componentConfig.value = configData.data;
-      }
-    } catch (error) {
-      console.error('加载组件配置失败:', error);
-      message.error(`加载组件配置失败: ${error instanceof Error ? error.message : String(error)}`);
-      componentConfig.value = { ...(dynamicComponentRef.value?.DefaultConfig || {}) };
-    } finally {
-      componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value)); // 深拷贝用于编辑
-      isLoading.value = false;
-    }
-  }
-
-  async function saveComponentConfig() {
-    if (!currentSelectedComponent.value?.settingName || !userInfo.value?.id) {
-      message.error('无法保存配置：组件配置名称或用户信息丢失。');
-      return;
-    }
-    isLoading.value = true;
-    try {
-      await UploadConfig(currentSelectedComponent.value.settingName,
-        JSON.stringify(componentConfigForEditing.value), // 保存编辑后的配置
-        false); // 或根据需要设置为 true);
-      message.success('配置保存成功！');
-      componentConfig.value = JSON.parse(JSON.stringify(componentConfigForEditing.value)); // 更新运行时配置
-      showSettingModal.value = false;
-      refreshSignal.value++; // 触发子组件刷新
-    } catch (error) {
-      console.error('保存组件配置失败:', error);
-      message.error(`保存组件配置失败: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      isLoading.value = false;
-    }
-  }
-
-  function onDynamicFormUpdate(updatedConfig: any) {
-    componentConfigForEditing.value = updatedConfig;
-  }
-
-  function handleConfigUpdateFromChild(newConfig: any) {
-    // 如果子组件能直接修改配置并冒泡事件，可以在此处理
-    // componentConfig.value = newConfig;
-    // componentConfigForEditing.value = JSON.parse(JSON.stringify(newConfig));
-    // console.log('Config updated from child:', newConfig);
-  }
-
-  function refreshSelectedComponent() {
-    if (!currentSelectedComponent.value) return;
-    message.info(`正在刷新 ${currentSelectedComponent.value.name}...`);
-
-    // 方式1: 增加 refreshSignal 以触发子组件 watch
-    refreshSignal.value++;
-
-    // 方式2: 如果子组件有暴露的刷新方法，可以调用
-    // if (typeof dynamicComponentRef.value?.refresh === 'function') {
-    //   dynamicComponentRef.value.refresh();
-    // }
-
-    // 可选: 重新加载配置
-    if (currentSelectedComponent.value.settingName) {
-      loadComponentConfig(currentSelectedComponent.value.settingName);
-    }
-  }
-
-  // 当 dynamicComponentRef 变化时 (组件加载完成)，尝试加载/设置配置
-  watch(dynamicComponentRef, (newRef) => {
-    if (newRef) { // 组件已挂载
-      const compDef = currentSelectedComponent.value;
-      if (compDef) {
-        currentSelectedComponent.value!.settingName = newRef.Config ? `OBSStore.Config.${currentSelectedComponent.value!.id}` : undefined;
-        if (compDef.settingName) {
-          // 如果有 settingName，则 loadComponentConfig 会处理（包括默认配置）
-          // 这里确保在 selectComponent 中已经调用了 loadComponentConfig
-        } else if (newRef.DefaultConfig) {
-          // 没有 settingName，但子组件有 DefaultConfig
-          componentConfig.value = { ...newRef.DefaultConfig };
-          componentConfigForEditing.value = JSON.parse(JSON.stringify(componentConfig.value));
-        }
-      }
-    }
-  }, { immediate: false }); // immediate: false 因为 selectComponent 会处理首次加载
-
-  watch(showSettingModal, (isShown) => {
-    if (isShown && currentSelectedComponent.value) {
-      // 打开模态框时，确保编辑的是当前运行时配置的深拷贝
-      // 同时，确保 DefaultConfig 能够正确合并，以防远程配置不完整
-      const defaultConfig = dynamicComponentRef.value?.DefaultConfig || {};
-      componentConfigForEditing.value = JSON.parse(JSON.stringify({
-        ...defaultConfig,
-        ...componentConfig.value // 当前运行时配置优先
-      }));
-    }
-  });
-
-  // 新增：用于从预览 Modal 中打开配置 Modal
-  function openSettingsForCurrentComponent() {
-    if (currentSelectedComponent.value?.settingName && userInfo.value?.id === accountInfo.value.id) {
-      // 确保 componentConfigForEditing 是最新的，基于 componentConfig
-      // watch(showSettingModal) 已经处理了更复杂的默认配置合并逻辑，这里仅确保基于当前运行时配置的深拷贝
-      const defaultConfig = dynamicComponentRef.value?.DefaultConfig || {};
-      componentConfigForEditing.value = JSON.parse(JSON.stringify({
-        ...defaultConfig,
-        ...componentConfig.value
-      }));
-      showSettingModal.value = true;
-    } else {
-      message.error('无法打开配置：组件无设置项或用户不匹配。');
-    }
-  }
-
-  function handlePreviewModalUpdateShow(show: boolean) {
-    showPreviewModal.value = show; // 保持 v-model:show 的双向绑定
-    if (!show) {
-      // 清理预览 Modal 关闭后的状态
-      currentSelectedComponentId.value = null;
-      componentConfig.value = {};
-      componentConfigForEditing.value = {};
-      dynamicComponentRef.value = null; // 清除对组件实例的引用
-    }
-  }
-
-  onMounted(() => {
-    initializeComponents();
-    // 可以在这里根据路由参数或其他逻辑自动选择一个组件
-    // if (props.initialComponentId) {
-    //   selectComponent(props.initialComponentId);
-    // }
-  });
-
-</script>
-
 <style scoped>
   .obs-component-store-view {
     padding: 0px;
@@ -418,4 +415,4 @@
     /* border-radius: var(--n-border-radius); /* NModal card preset 提供圆角 */
     /* background-color: var(--n-card-color); /* NModal card preset 提供背景 */
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs_store/components/ExampleOBSComponent.vue b/src/views/obs_store/components/ExampleOBSComponent.vue
index 28ffd15..79ad9b7 100644
--- a/src/views/obs_store/components/ExampleOBSComponent.vue
+++ b/src/views/obs_store/components/ExampleOBSComponent.vue
@@ -1,3 +1,134 @@
+<script lang="ts" setup>
+import type { UserInfo } from '@/api/api-models'
+import type { ExtractConfigData } from '@/data/VTsuruConfigTypes'
+// ConfigItemType is imported in the script block above
+// import { ConfigItemDefinition, ConfigItemType, ExtractConfigData, defineTemplateConfig } from '@/data/VTsuruConfigTypes';
+import { NAlert, NButton, NCard, NForm, NFormItem, NInput, useMessage } from 'naive-ui'; import { computed, onMounted, ref, watch } from 'vue'
+import { defineTemplateConfig } from '@/data/VTsuruConfigTypes'
+
+// --- Props ---
+const props = defineProps<{
+  config: ExampleConfigType // 从父组件接收的配置
+  userInfo?: UserInfo
+  biliInfo?: any
+  refreshSignal?: number // 接收刷新信号
+}>()
+
+const Config = defineTemplateConfig([
+  {
+    name: '组件标题',
+    key: 'title',
+    type: 'string',
+    default: '我的示例 OBS 组件',
+    description: '显示在组件顶部的标题文字。',
+  },
+  {
+    name: '提示类型',
+    key: 'alertType',
+    type: 'select',
+    options: [
+      { label: '信息 (Info)', value: 'info' },
+      { label: '成功 (Success)', value: 'success' },
+      { label: '警告 (Warning)', value: 'warning' },
+      { label: '错误 (Error)', value: 'error' },
+    ],
+    default: 'info',
+    description: '组件内 NAlert 提示框的样式类型。',
+  },
+  {
+    name: '提示标题',
+    key: 'alertTitle',
+    type: 'string',
+    default: '组件信息',
+  },
+  {
+    name: '主要内容文本',
+    key: 'contentText',
+    type: 'string',
+    inputType: 'textarea',
+    default: '这是示例 OBS 组件的默认内容。您可以在此输入多行文本。',
+    description: '组件内显示的主要文本信息。',
+  },
+  {
+    name: '启用高级特性',
+    key: 'enableAdvanced',
+    type: 'boolean',
+    default: false,
+  },
+])
+
+type ExampleConfigType = ExtractConfigData<typeof Config>
+
+const DefaultConfig: ExampleConfigType = {
+  title: '示例组件默认标题',
+  alertType: 'success',
+  alertTitle: '默认提示',
+  contentText: '来自 DefaultConfig 的内容。点歌点歌点歌。关注vtsuru喵！',
+  enableAdvanced: false,
+}
+
+defineExpose({
+  Config,
+  DefaultConfig,
+})
+
+// --- Emits (可选，如果子组件需要通知父组件配置更改) ---
+// const emits = defineEmits(['update:config']);
+
+const message = useMessage()
+
+// --- 本地状态 ---
+const refreshCount = ref(0)
+const dynamicTitle = ref(props.config?.title || '默认标题')
+
+// --- 计算属性，合并传入的config和默认值，确保所有字段都存在 ---
+const localConfig = computed<ExampleConfigType>(() => {
+  return {
+    ...DefaultConfig, // 先使用默认值
+    ...(props.config || {}), // 然后用传入的配置覆盖
+  }
+})
+
+// --- 监听刷新信号 ---
+watch(() => props.refreshSignal, (newValue, oldValue) => {
+  if (newValue !== undefined && newValue !== oldValue) {
+    refreshCount.value++
+    message.success(`'示例 OBS 组件' 已刷新 (信号: ${newValue})`)
+    // 在这里执行组件的刷新逻辑，例如重新获取数据、重置状态等
+    // fetchData();
+  }
+})
+
+// --- 方法 ---
+function updateTitle() {
+  if (props.config) {
+    // 这是直接修改 prop，Vue 会发出警告。在实际应用中，应该通过 emit 更新父组件的配置
+    // (props.config as any).title = dynamicTitle.value;
+    message.info('标题已在本地临时更改。若要保存，请通过父组件的配置面板。')
+    // 要正确更新，应该 emit事件，例如：
+    // emits('update:config', { ...localConfig.value, title: dynamicTitle.value });
+  }
+}
+
+// --- Expose (使得父组件可以通过 ref 访问 Config 和 DefaultConfig) ---
+// Vue 3 <script setup> 默认关闭，需要显式 defineExpose
+// 但对于 DynamicForm，它似乎能够通过某种方式访问导出的 Config 和 DefaultConfig
+// 如果父组件需要通过 ref 主动调用方法或访问属性，则需要 defineExpose
+// defineExpose({ Config, DefaultConfig, /* refreshMethod */ });
+
+onMounted(() => {
+  // console.log('ExampleOBSComponent mounted with config:', props.config);
+  // console.log('Effective localConfig:', localConfig.value);
+  // console.log('Exposed Config definition:', Config);
+  // console.log('Exposed DefaultConfig:', DefaultConfig);
+  dynamicTitle.value = localConfig.value.title
+})
+
+watch(() => props.config, (newConfig) => {
+  dynamicTitle.value = newConfig?.title || DefaultConfig.title
+}, { deep: true })
+</script>
+
 <template>
   <NCard
     :title="localConfig.title || '示例 OBS 组件'"
@@ -32,137 +163,6 @@
   </NCard>
 </template>
 
-<script lang="ts" setup>
-  import { UserInfo } from '@/api/api-models';
-  // ConfigItemType is imported in the script block above
-  // import { ConfigItemDefinition, ConfigItemType, ExtractConfigData, defineTemplateConfig } from '@/data/VTsuruConfigTypes';
-  import { NAlert, NButton, NCard, NForm, NFormItem, NInput, useMessage } from 'naive-ui';
-  import { computed, ref, watch, onMounted } from 'vue'; import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruConfigTypes';
-
-  const Config = defineTemplateConfig([
-    {
-      name: '组件标题',
-      key: 'title',
-      type: 'string',
-      default: '我的示例 OBS 组件',
-      description: '显示在组件顶部的标题文字。'
-    },
-    {
-      name: '提示类型',
-      key: 'alertType',
-      type: 'select',
-      options: [
-        { label: '信息 (Info)', value: 'info' },
-        { label: '成功 (Success)', value: 'success' },
-        { label: '警告 (Warning)', value: 'warning' },
-        { label: '错误 (Error)', value: 'error' },
-      ],
-      default: 'info',
-      description: '组件内 NAlert 提示框的样式类型。'
-    },
-    {
-      name: '提示标题',
-      key: 'alertTitle',
-      type: 'string',
-      default: '组件信息',
-    },
-    {
-      name: '主要内容文本',
-      key: 'contentText',
-      type: 'string',
-      inputType: 'textarea',
-      default: '这是示例 OBS 组件的默认内容。您可以在此输入多行文本。',
-      description: '组件内显示的主要文本信息。'
-    },
-    {
-      name: '启用高级特性',
-      key: 'enableAdvanced',
-      type: 'boolean',
-      default: false,
-    },
-  ]);
-
-  type ExampleConfigType = ExtractConfigData<typeof Config>;
-
-  const DefaultConfig: ExampleConfigType = {
-    title: '示例组件默认标题',
-    alertType: 'success',
-    alertTitle: '默认提示',
-    contentText: '来自 DefaultConfig 的内容。点歌点歌点歌。关注vtsuru喵！',
-    enableAdvanced: false,
-  };
-
-  defineExpose({
-    Config,
-    DefaultConfig,
-  });
-
-  // --- Props ---
-  const props = defineProps<{
-    config: ExampleConfigType; // 从父组件接收的配置
-    userInfo?: UserInfo;
-    biliInfo?: any;
-    refreshSignal?: number; // 接收刷新信号
-  }>();
-
-  // --- Emits (可选，如果子组件需要通知父组件配置更改) ---
-  // const emits = defineEmits(['update:config']);
-
-  const message = useMessage();
-
-  // --- 本地状态 ---
-  const refreshCount = ref(0);
-  const dynamicTitle = ref(props.config?.title || '默认标题');
-
-  // --- 计算属性，合并传入的config和默认值，确保所有字段都存在 ---
-  const localConfig = computed<ExampleConfigType>(() => {
-    return {
-      ...DefaultConfig, // 先使用默认值
-      ...(props.config || {}), // 然后用传入的配置覆盖
-    };
-  });
-
-  // --- 监听刷新信号 ---
-  watch(() => props.refreshSignal, (newValue, oldValue) => {
-    if (newValue !== undefined && newValue !== oldValue) {
-      refreshCount.value++;
-      message.success(`'示例 OBS 组件' 已刷新 (信号: ${newValue})`);
-      // 在这里执行组件的刷新逻辑，例如重新获取数据、重置状态等
-      // fetchData();
-    }
-  });
-
-  // --- 方法 ---
-  function updateTitle() {
-    if (props.config) {
-      // 这是直接修改 prop，Vue 会发出警告。在实际应用中，应该通过 emit 更新父组件的配置
-      // (props.config as any).title = dynamicTitle.value;
-      message.info('标题已在本地临时更改。若要保存，请通过父组件的配置面板。');
-      // 要正确更新，应该 emit事件，例如：
-      // emits('update:config', { ...localConfig.value, title: dynamicTitle.value });
-    }
-  }
-
-  // --- Expose (使得父组件可以通过 ref 访问 Config 和 DefaultConfig) ---
-  // Vue 3 <script setup> 默认关闭，需要显式 defineExpose
-  // 但对于 DynamicForm，它似乎能够通过某种方式访问导出的 Config 和 DefaultConfig
-  // 如果父组件需要通过 ref 主动调用方法或访问属性，则需要 defineExpose
-  // defineExpose({ Config, DefaultConfig, /* refreshMethod */ });
-
-  onMounted(() => {
-    // console.log('ExampleOBSComponent mounted with config:', props.config);
-    // console.log('Effective localConfig:', localConfig.value);
-    // console.log('Exposed Config definition:', Config);
-    // console.log('Exposed DefaultConfig:', DefaultConfig);
-    dynamicTitle.value = localConfig.value.title;
-  });
-
-  watch(() => props.config, (newConfig) => {
-    dynamicTitle.value = newConfig?.title || DefaultConfig.title;
-  }, { deep: true });
-
-</script>
-
 <style scoped>
   .example-obs-component {
     border: 1px dashed var(--n-border-color);
@@ -179,4 +179,4 @@
     word-break: break-all;
     /* 强制断词，防止溢出 */
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs_store/components/GamepadStick.vue b/src/views/obs_store/components/GamepadStick.vue
index a137223..0f11268 100644
--- a/src/views/obs_store/components/GamepadStick.vue
+++ b/src/views/obs_store/components/GamepadStick.vue
@@ -1,48 +1,48 @@
-<template>
-  <img
-    v-if="svg"
-    :src="svg"
-    :class="['gamepad-component', 'gamepad-stick']"
-    :style="transformedStyle"
-  />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue';
-import type { Position } from '@/types/gamepad';
+import type { Position } from '@/types/gamepad'
+import { computed } from 'vue'
 
 interface Props {
-  svg?: string; // SVG URL
-  position?: Position;
-  axes?: { x: number; y: number };
+  svg?: string // SVG URL
+  position?: Position
+  axes?: { x: number, y: number }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   svg: undefined,
   axes: () => ({ x: 0, y: 0 }),
-  position: () => ({ top: '0', left: '0', width: '5%' })
-});
+  position: () => ({ top: '0', left: '0', width: '5%' }),
+})
 
 // 计算实际样式，加入摇杆位移
 const transformedStyle = computed(() => {
-  const moveScale = 15; // 摇杆移动的最大距离（以像素为单位）
-  const translateX = props.axes.x * moveScale;
-  const translateY = props.axes.y * moveScale;
+  const moveScale = 15 // 摇杆移动的最大距离（以像素为单位）
+  const translateX = props.axes.x * moveScale
+  const translateY = props.axes.y * moveScale
 
   return {
     top: props.position?.top,
     left: props.position?.left,
     width: props.position?.width,
     height: props.position?.height || 'auto',
-    transform: `translate(${translateX}px, ${translateY}px)`
-  };
-});
+    transform: `translate(${translateX}px, ${translateY}px)`,
+  }
+})
 </script>
 
+<template>
+  <img
+    v-if="svg"
+    :src="svg"
+    class="gamepad-component gamepad-stick"
+    :style="transformedStyle"
+  >
+</template>
+
 <style scoped>
 .gamepad-component {
   position: absolute;
   user-select: none;
   transition: transform 0.1s ease-out;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs_store/components/gamepads/GamepadButton.vue b/src/views/obs_store/components/gamepads/GamepadButton.vue
index 44324e1..a57ded9 100644
--- a/src/views/obs_store/components/gamepads/GamepadButton.vue
+++ b/src/views/obs_store/components/gamepads/GamepadButton.vue
@@ -1,39 +1,39 @@
-<template>
-  <component
-    :is="svg"
-    v-if="svg"
-    :class="['gamepad-component', 'gamepad-button', { 'pressed': isPressed }]"
-    :style="positionStyle"
-  />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue';
-import type { Component } from 'vue';
-import type { Position } from '@/types/gamepad';
+import type { Component } from 'vue'
+import type { Position } from '@/types/gamepad'
+import { computed } from 'vue'
 
 interface Props {
-  name?: string;
-  svg?: Component; // 改为接受组件而非URL字符串
-  position?: Position;
-  isPressed?: boolean;
+  name?: string
+  svg?: Component // 改为接受组件而非URL字符串
+  position?: Position
+  isPressed?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   name: 'Button',
   svg: undefined,
   isPressed: false,
-  position: () => ({ top: '0', left: '0', width: '5%' })
-});
+  position: () => ({ top: '0', left: '0', width: '5%' }),
+})
 
 const positionStyle = computed(() => ({
   top: props.position?.top,
   left: props.position?.left,
   width: props.position?.width,
   height: props.position?.height || 'auto',
-}));
+}))
 </script>
 
+<template>
+  <component
+    :is="svg"
+    v-if="svg"
+    class="gamepad-component gamepad-button" :class="[{ pressed: isPressed }]"
+    :style="positionStyle"
+  />
+</template>
+
 <style scoped>
 .gamepad-component {
   position: absolute;
@@ -44,4 +44,4 @@ const positionStyle = computed(() => ({
   transform: scale(0.92);
   opacity: 0.7;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs_store/components/gamepads/GamepadDisplay.vue b/src/views/obs_store/components/gamepads/GamepadDisplay.vue
index b4e0ba2..9ee0064 100644
--- a/src/views/obs_store/components/gamepads/GamepadDisplay.vue
+++ b/src/views/obs_store/components/gamepads/GamepadDisplay.vue
@@ -1,3 +1,547 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { BodyOptionConfig, ControllerComponentStructure } from '@/data/gamepadConfigs'
+import type { GamepadConfig, GamepadType, LogicalButton } from '@/types/gamepad'
+import { useRouteQuery } from '@vueuse/router'
+import { NCard, NText } from 'naive-ui'
+import { computed, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { controllerBodies, controllerStructures, gamepadConfigs } from '@/data/gamepadConfigs'
+import { useGamepadStore } from '@/store/useGamepadStore'
+import { LogicalButtonsList } from '@/types/gamepad'
+import GamepadButton from './GamepadButton.vue'
+import GamepadStick from './GamepadStick.vue'
+
+interface Props {
+  fullscreenMode?: boolean // 是否以全屏模式显示
+  type?: GamepadType // 控制器类型
+  bodyId?: string // 控制器主体ID
+  overlay?: boolean // 是否使用叠加式按钮
+  pressedColor?: string | null // 按下颜色
+  viewBox?: string // 视图框
+  inlineMode?: boolean // 是否为页内嵌入模式
+  stickSensitivity?: number // 摇杆移动灵敏度
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fullscreenMode: true,
+  type: undefined,
+  bodyId: undefined,
+  overlay: undefined,
+  pressedColor: undefined,
+  viewBox: undefined,
+  inlineMode: false,
+  stickSensitivity: undefined, // 默认未定义，将从query或配置中获取
+})
+
+// 字符串转布尔辅助函数
+const stringToBoolean = (v: string | null | undefined): boolean => v === 'true'
+
+// 路由查询参数
+const querySelectedType = useRouteQuery<GamepadType>('type', 'xbox', { transform: String as (v: any) => GamepadType })
+const querySelectedBodyId = useRouteQuery<string>('bodyId', '')
+const queryUseOverlayButtons = useRouteQuery('overlay', 'true')
+const queryCustomPressedColor = useRouteQuery<string | null>('pressedColor', null, { transform: v => v === 'null' ? null : String(v) })
+const queryCustomViewBox = useRouteQuery<string>('viewBox', '')
+const queryStickSensitivity = useRouteQuery<number>('stickSensitivity', 5, { transform: (v) => {
+  const num = Number(v)
+  return isNaN(num) ? 5 : num
+} })
+
+// 优先使用 props，没有则使用 query
+const selectedType = computed<GamepadType>(() => props.type !== undefined ? props.type : querySelectedType.value)
+const selectedBodyId = computed<string>(() => props.bodyId !== undefined ? props.bodyId : querySelectedBodyId.value)
+const useOverlayButtonsValue = computed<boolean>(() => props.overlay !== undefined ? props.overlay : stringToBoolean(queryUseOverlayButtons.value))
+const customPressedColorValue = computed<string | null>(() => props.pressedColor !== undefined ? props.pressedColor : queryCustomPressedColor.value)
+const customViewBoxValue = computed<string>(() => props.viewBox !== undefined ? props.viewBox : queryCustomViewBox.value)
+const stickSensitivityValue = computed<number>(() => props.stickSensitivity !== undefined ? props.stickSensitivity : queryStickSensitivity.value)
+
+// 组件状态
+const svgContainerRef = ref<HTMLElement | null>(null)
+const bodySvgRef = ref<ComponentPublicInstance<{}, {}, SVGElement> | null>(null)
+const originalElementFills = shallowRef<Map<string, string | null>>(new Map())
+const originalElementTransforms = shallowRef<Map<string, string>>(new Map())
+const defaultPressedHighlightColor = ref('#FFFFFF80')
+
+const gamepad = useGamepadStore()
+
+// 配置和可用主体
+const currentConfigFromQuery = computed<GamepadConfig | undefined>(() => gamepadConfigs[selectedType.value])
+const availableBodiesFromQuery = computed<BodyOptionConfig[]>(() => controllerBodies[selectedType.value] || [])
+const useOverlayButtons = useOverlayButtonsValue
+const currentBodySvgComponentFromQuery = shallowRef<any>(null)
+
+// 当选择手柄类型或主体变化时，更新SVG组件
+watch(() => [selectedBodyId.value, selectedType.value, availableBodiesFromQuery.value], async () => {
+  const type = selectedType.value
+  const bodyId = selectedBodyId.value
+  const bodies = availableBodiesFromQuery.value
+  const config = currentConfigFromQuery.value
+
+  let componentToLoad = null
+  if (bodyId && bodies.length > 0) {
+    const selectedBody = bodies.find(b => b.name === bodyId)
+    componentToLoad = selectedBody ? selectedBody.body : (config?.bodySvg || null)
+  } else if (config) {
+    componentToLoad = config.bodySvg || null
+  }
+  currentBodySvgComponentFromQuery.value = componentToLoad
+
+  // 当主体/类型变化时重置状态
+  originalElementFills.value.clear()
+  originalElementTransforms.value.clear()
+  if (bodySvgRef.value?.$el) {
+    resetAllElementStyles(bodySvgRef.value.$el)
+  }
+  nextTick(() => analyzeSvgStructure())
+}, { immediate: true, deep: true })
+
+// 视图框计算
+const defaultViewBoxForCurrentBodyFromQuery = computed<string>(() => {
+  const selectedBodyConfig = availableBodiesFromQuery.value.find(b => b.name === selectedBodyId.value)
+  if (selectedBodyConfig?.defaultViewBox) {
+    return selectedBodyConfig.defaultViewBox
+  }
+  return currentConfigFromQuery.value?.defaultViewBox || '0 0 1000 1000'
+})
+
+const effectiveViewBoxFromQuery = computed<string | undefined>(() => {
+  return customViewBoxValue.value || defaultViewBoxForCurrentBodyFromQuery.value
+})
+
+const svgStyle = computed(() => ({
+  maxWidth: '100%',
+  maxHeight: '100%',
+  objectFit: 'contain',
+  margin: 'auto',
+}))
+
+// SVG结构分析相关
+interface SvgElementInfoForDisplay {
+  id: string | null
+  label: string | null
+  element?: Element | null
+  componentName?: string
+}
+
+const svgStructureForDisplay = ref<SvgElementInfoForDisplay[]>([])
+const controllerComponentsFromQuery = computed(() => controllerStructures[selectedType.value] || [])
+
+// 分析SVG结构
+function analyzeSvgStructure() {
+  if (!bodySvgRef.value || useOverlayButtons.value) return
+
+  const svgElement = bodySvgRef.value.$el
+  if (!svgElement) return
+
+  svgStructureForDisplay.value = []
+  originalElementFills.value.clear()
+  originalElementTransforms.value.clear()
+
+  function processComponent(component: ControllerComponentStructure) {
+    if (component.path) {
+      const element = findElementByPath(svgElement, component.path)
+      if (element) {
+        svgStructureForDisplay.value.push({
+          id: element.id || null,
+          label: element.getAttribute('inkscape:label') || null,
+          element,
+          componentName: component.name,
+        })
+
+        const targetElement = findTargetElement(element)
+        originalElementFills.value.set(component.path, targetElement.getAttribute('fill') || window.getComputedStyle(targetElement).fill || 'none')
+        if (component.type === 'stick') {
+          originalElementTransforms.value.set(component.path, element.getAttribute('transform') || '')
+        }
+      }
+    }
+    if (component.childComponents) {
+      component.childComponents.forEach(processComponent)
+    }
+  }
+  controllerComponentsFromQuery.value.forEach(processComponent)
+}
+
+// 当SVG组件加载完成后分析结构
+watch(currentBodySvgComponentFromQuery, () => {
+  nextTick(() => {
+    if (bodySvgRef.value?.$el) {
+      analyzeSvgStructure()
+    }
+  })
+}, { immediate: true })
+
+// 监听手柄状态变化，更新SVG样式
+watchEffect(() => {
+  if (!gamepad.isGamepadConnected || !currentBodySvgComponentFromQuery.value || !bodySvgRef.value?.$el || useOverlayButtons.value) {
+    if (bodySvgRef.value?.$el && !useOverlayButtons.value) {
+      resetAllElementStyles(bodySvgRef.value.$el)
+    }
+    return
+  }
+
+  const state = gamepad.normalizedGamepadState
+  LogicalButtonsList.forEach((logicalButton) => {
+    const buttonState = state.buttons[logicalButton]
+    if (buttonState) {
+      if (logicalButton === 'LEFT_SHOULDER_2' || logicalButton === 'RIGHT_SHOULDER_2') {
+        handleTriggerStateChange(logicalButton, buttonState.value)
+      } else {
+        handleButtonStateChange(logicalButton, buttonState.pressed)
+      }
+    }
+  })
+
+  const stickKeys: Array<keyof typeof state.sticks> = ['LEFT_STICK', 'RIGHT_STICK']
+  stickKeys.forEach((stickKey) => {
+    const stickAxes = state.sticks[stickKey]
+    if (stickAxes) {
+      handleStickStateChange(stickKey as LogicalButton, stickAxes)
+    }
+  })
+})
+
+// 重置所有元素样式
+function resetAllElementStyles(svgElement: Element) {
+  controllerComponentsFromQuery.value.forEach((componentDef) => {
+    if (componentDef.path) {
+      const element = findElementByPath(svgElement, componentDef.path)
+      if (element) {
+        if (componentDef.type === 'stick') {
+          const originalTransform = originalElementTransforms.value.get(componentDef.path)
+          if (originalTransform !== undefined) {
+            element.setAttribute('transform', originalTransform)
+          } else {
+            element.removeAttribute('transform')
+          }
+        } else {
+          resetElementStyle(element, componentDef.path)
+        }
+      }
+    }
+  })
+}
+
+// 通过路径查找SVG元素
+function findElementByPath(svgElement: Element, path: string): Element | null {
+  if (!path || !svgElement) return null
+
+  // 先尝试通过inkscape:label查找
+  let element = Array.from(svgElement.querySelectorAll('*')).find(
+    el => el.getAttribute('inkscape:label') === path,
+  )
+
+  // 如果找不到，尝试通过ID查找
+  if (!element) {
+    try {
+      if (/^[a-z][\w:.-]*$/i.test(path)) {
+        const foundElement = svgElement.querySelector(`#${path.replace(/:/g, '\\:')}`)
+        if (foundElement) element = foundElement
+      }
+    } catch (e) {}
+  }
+
+  // 部分匹配回退
+  if (!element) {
+    const pathWords = path.split(/\s+/)
+    for (const word of pathWords) {
+      if (word.length < 3) continue
+      element = Array.from(svgElement.querySelectorAll('*')).find(
+        el => el.getAttribute('inkscape:label')
+          && el.getAttribute('inkscape:label')!.includes(word),
+      )
+      if (element) break
+    }
+  }
+  return element || null
+}
+
+// 查找可应用样式的目标元素
+function findTargetElement(element: Element): Element {
+  let colorElement = Array.from(element.querySelectorAll('*')).find(
+    el => el.getAttribute('inkscape:label') === 'Color'
+      || el.getAttribute('inkscape:label')?.toLowerCase().includes('color'),
+  )
+  colorElement ??= element.children[0]
+  return colorElement || element
+}
+
+// 颜色反转
+function invertColor(hex: string): string {
+  if (hex.indexOf('#') === 0) hex = hex.slice(1)
+  if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  if (hex.length !== 6) return defaultPressedHighlightColor.value
+
+  const r = (255 - Number.parseInt(hex.slice(0, 2), 16)).toString(16)
+  const g = (255 - Number.parseInt(hex.slice(2, 4), 16)).toString(16)
+  const b = (255 - Number.parseInt(hex.slice(4, 6), 16)).toString(16)
+  const padZero = (str: string) => (`00${str}`).slice(-2)
+  return `#${padZero(r)}${padZero(g)}${padZero(b)}`
+}
+
+// 应用按下样式
+function applyPressedStyle(element: Element, pathId: string) {
+  if (!element) return
+  const targetElement = findTargetElement(element)
+  const currentFill = targetElement.getAttribute('fill') || window.getComputedStyle(targetElement).fill
+
+  if (!originalElementFills.value.has(pathId)) {
+    originalElementFills.value.set(pathId, currentFill === 'none' ? null : currentFill)
+  }
+
+  let pressedFill = customPressedColorValue.value
+  if (!pressedFill) {
+    if (currentFill && currentFill !== 'none' && currentFill.startsWith('#')) {
+      pressedFill = invertColor(currentFill)
+    } else {
+      pressedFill = defaultPressedHighlightColor.value
+    }
+  }
+  targetElement.setAttribute('fill', pressedFill)
+}
+
+// 重置元素样式
+function resetElementStyle(element: Element, pathId: string) {
+  if (!element) return
+  const targetElement = findTargetElement(element)
+  if (originalElementFills.value.has(pathId)) {
+    const originalFill = originalElementFills.value.get(pathId)
+    if (originalFill !== null && originalFill !== undefined) {
+      targetElement.setAttribute('fill', originalFill)
+    } else {
+      targetElement.removeAttribute('fill')
+    }
+  }
+}
+
+// 查找关联组件
+function findAssociatedComponents(
+  components: ControllerComponentStructure[],
+  logicalButton: LogicalButton,
+  componentType?: string,
+): ControllerComponentStructure[] {
+  const result: ControllerComponentStructure[] = []
+  function traverse(comps: ControllerComponentStructure[]) {
+    comps.forEach((comp) => {
+      if (comp.logicalButton === logicalButton) {
+        if (componentType) {
+          if (comp.type === componentType) {
+            result.push(comp)
+          }
+        } else {
+          result.push(comp)
+        }
+      }
+      if (comp.childComponents) {
+        traverse(comp.childComponents)
+      }
+    })
+  }
+  traverse(components)
+  return result
+}
+
+// 处理按钮状态变化
+function handleButtonStateChange(logicalButton: LogicalButton, isPressed: boolean) {
+  if (useOverlayButtons.value || !bodySvgRef.value?.$el) return
+  if (logicalButton === 'LEFT_SHOULDER_2' || logicalButton === 'RIGHT_SHOULDER_2') {
+    const value = gamepad.normalizedGamepadState.buttons[logicalButton]?.value || 0
+    handleTriggerStateChange(logicalButton, value)
+    return
+  }
+
+  const svgElement = bodySvgRef.value.$el
+  const associatedComponents = findAssociatedComponents(controllerComponentsFromQuery.value, logicalButton)
+
+  associatedComponents.forEach((componentDef) => {
+    if (componentDef.path) {
+      const targetElement = findElementByPath(svgElement, componentDef.path)
+      if (targetElement) {
+        if (isPressed) applyPressedStyle(targetElement, componentDef.path)
+        else resetElementStyle(targetElement, componentDef.path)
+      }
+    }
+  })
+}
+
+// 处理扳机键状态变化
+function handleTriggerStateChange(logicalButton: LogicalButton, value: number) {
+  if (useOverlayButtons.value || !bodySvgRef.value?.$el) return
+  const svgElement = bodySvgRef.value.$el
+  const associatedComponents = findAssociatedComponents(
+    controllerComponentsFromQuery.value,
+    logicalButton,
+    'trigger',
+  )
+  associatedComponents.forEach((componentDef) => {
+    if (componentDef.path) {
+      const targetElement = findElementByPath(svgElement, componentDef.path)
+      if (targetElement) {
+        applyTriggerStyle(targetElement, componentDef.path, value)
+      }
+    }
+  })
+}
+
+// 应用扳机键样式
+function applyTriggerStyle(element: Element, pathId: string, value: number) {
+  if (!element) return
+  const targetElement = findTargetElement(element)
+  const originalFillMap = originalElementFills.value
+  const originalTransformMap = originalElementTransforms.value
+
+  // 保存原始样式
+  if (!originalFillMap.has(pathId)) {
+    const currentFill = targetElement.getAttribute('fill') || window.getComputedStyle(targetElement).fill || 'none'
+    originalFillMap.set(pathId, currentFill)
+  }
+
+  if (!originalTransformMap.has(pathId)) {
+    const currentTransform = element.getAttribute('transform') || ''
+    originalTransformMap.set(pathId, currentTransform)
+  }
+
+  const originalFill = originalFillMap.get(pathId)
+  const originalTransform = originalTransformMap.get(pathId) || ''
+
+  // 力度非常小时恢复原始状态
+  if (value <= 0.01) {
+    if (originalFill !== null && originalFill !== undefined && originalFill !== 'none') {
+      targetElement.setAttribute('fill', originalFill)
+    } else {
+      targetElement.removeAttribute('fill')
+    }
+    element.setAttribute('transform', originalTransform)
+    return
+  }
+
+  // 目标颜色（按下状态的颜色）
+  const targetColor = customPressedColorValue.value || '#FFFFFF'
+
+  // 解析颜色函数
+  function parseColor(color: string): { r: number, g: number, b: number } {
+    if (color === 'none' || !color) {
+      return { r: 200, g: 200, b: 200 } // 默认灰色
+    }
+
+    // 处理十六进制颜色
+    if (color.startsWith('#')) {
+      let hex = color.slice(1)
+      // 规范化颜色格式
+      if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+      } else if (hex.length === 4) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+      } else if (hex.length === 8) {
+        hex = hex.slice(0, 6) // 移除alpha通道
+      }
+
+      return {
+        r: Number.parseInt(hex.slice(0, 2), 16),
+        g: Number.parseInt(hex.slice(2, 4), 16),
+        b: Number.parseInt(hex.slice(4, 6), 16),
+      }
+    }
+
+    // 处理rgb/rgba颜色
+    const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/)
+    if (rgbMatch) {
+      return {
+        r: Number.parseInt(rgbMatch[1]),
+        g: Number.parseInt(rgbMatch[2]),
+        b: Number.parseInt(rgbMatch[3]),
+      }
+    }
+
+    // 无法解析的颜色返回默认值
+    return { r: 200, g: 200, b: 200 }
+  }
+
+  // 将RGB转回十六进制
+  function rgbToHex(r: number, g: number, b: number): string {
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+  }
+
+  // 在两种颜色间进行插值
+  function interpolateColor(color1: { r: number, g: number, b: number }, color2: { r: number, g: number, b: number }, factor: number) {
+    return {
+      r: Math.round(color1.r + (color2.r - color1.r) * factor),
+      g: Math.round(color1.g + (color2.g - color1.g) * factor),
+      b: Math.round(color1.b + (color2.b - color1.b) * factor),
+    }
+  }
+
+  // 解析原始颜色和目标颜色
+  const sourceColor = parseColor(originalFill || '#808080')
+  const destColor = parseColor(targetColor)
+
+  // 根据力度插值计算当前颜色
+  const currentColor = interpolateColor(sourceColor, destColor, value)
+  const fillColor = rgbToHex(currentColor.r, currentColor.g, currentColor.b)
+
+  // 应用颜色变化
+  targetElement.setAttribute('fill', fillColor)
+
+  // 保留位移效果
+  const isLeftTrigger = pathId.toLowerCase().includes('left') || pathId.toLowerCase().includes('l2')
+  const movement = value * 5 // 最大移动2像素
+
+  let newTransform = originalTransform
+  if (originalTransform.includes('translate')) {
+    newTransform = newTransform.replace(/translate\([^)]+\)/, isLeftTrigger ? `translate(0, ${movement})` : `translate(0, ${movement})`)
+  } else {
+    newTransform = `translate(0, ${movement}) ${newTransform}`.trim()
+  }
+
+  element.setAttribute('transform', newTransform)
+}
+
+// 处理摇杆状态变化
+function handleStickStateChange(logicalStick: LogicalButton, axes: { x: number, y: number }) {
+  if (useOverlayButtons.value || !bodySvgRef.value?.$el) return
+  const svgElement = bodySvgRef.value.$el
+  const associatedComponents = findAssociatedComponents(controllerComponentsFromQuery.value, logicalStick, 'stick')
+
+  associatedComponents.forEach((componentDef) => {
+    if (componentDef.path) {
+      const stickElement = findElementByPath(svgElement, componentDef.path)
+      if (stickElement) {
+        // 优先使用组件配置的灵敏度，否则使用全局灵敏度设置，再否则使用默认值5
+        const defaultSensitivity = typeof (componentDef as any).sensitivity === 'number' ? (componentDef as any).sensitivity : 5
+        const sensitivity = stickSensitivityValue.value || defaultSensitivity
+
+        const translateX = axes.x * sensitivity
+        const translateY = axes.y * sensitivity
+
+        const transformMap = originalElementTransforms.value
+        const pathId = componentDef.path
+
+        if (!transformMap.has(pathId)) {
+          transformMap.set(pathId, stickElement.getAttribute('transform') || '')
+        }
+        const baseTransform = transformMap.get(pathId) || ''
+
+        let dynamicTranslatePart = ''
+        if (Math.abs(translateX) > 0.01 || Math.abs(translateY) > 0.01) {
+          dynamicTranslatePart = `translate(${translateX.toFixed(2)}, ${translateY.toFixed(2)})`
+        }
+
+        const newTransform = (dynamicTranslatePart + (baseTransform ? ` ${baseTransform}` : '')).trim()
+        stickElement.setAttribute('transform', newTransform)
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if (bodySvgRef.value?.$el) {
+      analyzeSvgStructure()
+    }
+  })
+})
+</script>
+
 <template>
   <div :class="props.inlineMode ? 'gamepad-display-wrapper-inline' : 'gamepad-display-wrapper'">
     <div
@@ -16,9 +560,9 @@
           :style="svgStyle"
           :viewBox="effectiveViewBoxFromQuery"
           preserveAspectRatio="xMidYMid meet"
-        /> <n-text v-else>
+        /> <NText v-else>
           无法加载手柄SVG组件 (类型: {{ selectedType }}, 主体ID: {{ selectedBodyId }}).
-        </n-text>
+        </NText>
       </div>
       <div
         v-if="useOverlayButtons"
@@ -43,560 +587,15 @@
           />
         </template>
       </div>
-    </div> <n-card
+    </div> <NCard
       v-else
       class="error-card"
     >
       无效的游戏手柄类型或配置: {{ selectedType }}
-    </n-card>
+    </NCard>
   </div>
 </template>
 
-<script setup lang="ts">
-  import { computed, ref, onMounted, nextTick, shallowRef, watchEffect, watch } from 'vue';
-  import { useRouteQuery } from '@vueuse/router';
-  import type { GamepadType, GamepadConfig, LogicalButton } from '@/types/gamepad';
-  import { LogicalButtonsList } from '@/types/gamepad';
-  import GamepadButton from './GamepadButton.vue';
-  import GamepadStick from './GamepadStick.vue';
-  import { gamepadConfigs, controllerBodies, controllerStructures, ControllerComponentStructure, BodyOptionConfig } from '@/data/gamepadConfigs';
-  import { useGamepadStore } from '@/store/useGamepadStore';
-  import { NText, NCard } from 'naive-ui';
-  import type { ComponentPublicInstance } from 'vue';
-
-  interface Props {
-    fullscreenMode?: boolean; // 是否以全屏模式显示
-    type?: GamepadType; // 控制器类型
-    bodyId?: string; // 控制器主体ID
-    overlay?: boolean; // 是否使用叠加式按钮
-    pressedColor?: string | null; // 按下颜色
-    viewBox?: string; // 视图框
-    inlineMode?: boolean; // 是否为页内嵌入模式
-    stickSensitivity?: number; // 摇杆移动灵敏度
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    fullscreenMode: true,
-    type: undefined,
-    bodyId: undefined,
-    overlay: undefined,
-    pressedColor: undefined,
-    viewBox: undefined,
-    inlineMode: false,
-    stickSensitivity: undefined, // 默认未定义，将从query或配置中获取
-  });
-
-  // 字符串转布尔辅助函数
-  const stringToBoolean = (v: string | null | undefined): boolean => v === 'true';
-
-  // 路由查询参数
-  const querySelectedType = useRouteQuery<GamepadType>('type', 'xbox', { transform: String as (v: any) => GamepadType });
-  const querySelectedBodyId = useRouteQuery<string>('bodyId', '');
-  const queryUseOverlayButtons = useRouteQuery('overlay', 'true');
-  const queryCustomPressedColor = useRouteQuery<string | null>('pressedColor', null, { transform: v => v === 'null' ? null : String(v) });
-  const queryCustomViewBox = useRouteQuery<string>('viewBox', '');
-  const queryStickSensitivity = useRouteQuery<number>('stickSensitivity', 5, { transform: v => {
-    const num = Number(v);
-    return isNaN(num) ? 5 : num;
-  }});
-
-  // 优先使用 props，没有则使用 query
-  const selectedType = computed<GamepadType>(() => props.type !== undefined ? props.type : querySelectedType.value);
-  const selectedBodyId = computed<string>(() => props.bodyId !== undefined ? props.bodyId : querySelectedBodyId.value);
-  const useOverlayButtonsValue = computed<boolean>(() => props.overlay !== undefined ? props.overlay : stringToBoolean(queryUseOverlayButtons.value));
-  const customPressedColorValue = computed<string | null>(() => props.pressedColor !== undefined ? props.pressedColor : queryCustomPressedColor.value);
-  const customViewBoxValue = computed<string>(() => props.viewBox !== undefined ? props.viewBox : queryCustomViewBox.value);
-  const stickSensitivityValue = computed<number>(() => props.stickSensitivity !== undefined ? props.stickSensitivity : queryStickSensitivity.value);
-
-  // 组件状态
-  const svgContainerRef = ref<HTMLElement | null>(null);
-  const bodySvgRef = ref<ComponentPublicInstance<{}, {}, SVGElement> | null>(null);
-  const originalElementFills = shallowRef<Map<string, string | null>>(new Map());
-  const originalElementTransforms = shallowRef<Map<string, string>>(new Map());
-  const defaultPressedHighlightColor = ref('#FFFFFF80');
-
-  const gamepad = useGamepadStore();
-
-  // 配置和可用主体
-  const currentConfigFromQuery = computed<GamepadConfig | undefined>(() => gamepadConfigs[selectedType.value]);
-  const availableBodiesFromQuery = computed<BodyOptionConfig[]>(() => controllerBodies[selectedType.value] || []);
-  const useOverlayButtons = useOverlayButtonsValue;
-  const currentBodySvgComponentFromQuery = shallowRef<any>(null);
-
-  // 当选择手柄类型或主体变化时，更新SVG组件
-  watch(() => [selectedBodyId.value, selectedType.value, availableBodiesFromQuery.value], async () => {
-    const type = selectedType.value;
-    const bodyId = selectedBodyId.value;
-    const bodies = availableBodiesFromQuery.value;
-    const config = currentConfigFromQuery.value;
-
-    let componentToLoad = null;
-    if (bodyId && bodies.length > 0) {
-      const selectedBody = bodies.find(b => b.name === bodyId);
-      componentToLoad = selectedBody ? selectedBody.body : (config?.bodySvg || null);
-    } else if (config) {
-      componentToLoad = config.bodySvg || null;
-    }
-    currentBodySvgComponentFromQuery.value = componentToLoad;
-
-    // 当主体/类型变化时重置状态
-    originalElementFills.value.clear();
-    originalElementTransforms.value.clear();
-    if (bodySvgRef.value?.$el) {
-      resetAllElementStyles(bodySvgRef.value.$el);
-    }
-    nextTick(() => analyzeSvgStructure());
-  }, { immediate: true, deep: true });
-
-  // 视图框计算
-  const defaultViewBoxForCurrentBodyFromQuery = computed<string>(() => {
-    const selectedBodyConfig = availableBodiesFromQuery.value.find(b => b.name === selectedBodyId.value);
-    if (selectedBodyConfig?.defaultViewBox) {
-      return selectedBodyConfig.defaultViewBox;
-    }
-    return currentConfigFromQuery.value?.defaultViewBox || '0 0 1000 1000';
-  });
-
-  const effectiveViewBoxFromQuery = computed<string | undefined>(() => {
-    return customViewBoxValue.value || defaultViewBoxForCurrentBodyFromQuery.value;
-  });
-
-  const svgStyle = computed(() => ({
-    maxWidth: '100%',
-    maxHeight: '100%',
-    objectFit: 'contain',
-    margin: 'auto',
-  }));
-
-  // SVG结构分析相关
-  interface SvgElementInfoForDisplay {
-    id: string | null;
-    label: string | null;
-    element?: Element | null;
-    componentName?: string;
-  }
-
-  const svgStructureForDisplay = ref<SvgElementInfoForDisplay[]>([]);
-  const controllerComponentsFromQuery = computed(() => controllerStructures[selectedType.value] || []);
-
-  // 分析SVG结构
-  function analyzeSvgStructure() {
-    if (!bodySvgRef.value || useOverlayButtons.value) return;
-
-    const svgElement = bodySvgRef.value.$el;
-    if (!svgElement) return;
-
-    svgStructureForDisplay.value = [];
-    originalElementFills.value.clear();
-    originalElementTransforms.value.clear();
-
-    function processComponent(component: ControllerComponentStructure) {
-      if (component.path) {
-        const element = findElementByPath(svgElement, component.path);
-        if (element) {
-          svgStructureForDisplay.value.push({
-            id: element.id || null,
-            label: element.getAttribute('inkscape:label') || null,
-            element,
-            componentName: component.name,
-          });
-
-          const targetElement = findTargetElement(element);
-          originalElementFills.value.set(component.path, targetElement.getAttribute('fill') || window.getComputedStyle(targetElement).fill || 'none');
-          if (component.type === 'stick') {
-            originalElementTransforms.value.set(component.path, element.getAttribute('transform') || '');
-          }
-        }
-      }
-      if (component.childComponents) {
-        component.childComponents.forEach(processComponent);
-      }
-    }
-    controllerComponentsFromQuery.value.forEach(processComponent);
-  }
-
-  // 当SVG组件加载完成后分析结构
-  watch(currentBodySvgComponentFromQuery, () => {
-    nextTick(() => {
-      if (bodySvgRef.value?.$el) {
-        analyzeSvgStructure();
-      }
-    });
-  }, { immediate: true });
-
-  // 监听手柄状态变化，更新SVG样式
-  watchEffect(() => {
-    if (!gamepad.isGamepadConnected || !currentBodySvgComponentFromQuery.value || !bodySvgRef.value?.$el || useOverlayButtons.value) {
-      if (bodySvgRef.value?.$el && !useOverlayButtons.value) {
-        resetAllElementStyles(bodySvgRef.value.$el);
-      }
-      return;
-    }
-
-    const state = gamepad.normalizedGamepadState;
-    LogicalButtonsList.forEach(logicalButton => {
-      const buttonState = state.buttons[logicalButton];
-      if (buttonState) {
-        if (logicalButton === 'LEFT_SHOULDER_2' || logicalButton === 'RIGHT_SHOULDER_2') {
-          handleTriggerStateChange(logicalButton, buttonState.value);
-        } else {
-          handleButtonStateChange(logicalButton, buttonState.pressed);
-        }
-      }
-    });
-
-    const stickKeys: Array<keyof typeof state.sticks> = ['LEFT_STICK', 'RIGHT_STICK'];
-    stickKeys.forEach(stickKey => {
-      const stickAxes = state.sticks[stickKey];
-      if (stickAxes) {
-        handleStickStateChange(stickKey as LogicalButton, stickAxes);
-      }
-    });
-  });
-
-  // 重置所有元素样式
-  function resetAllElementStyles(svgElement: Element) {
-    controllerComponentsFromQuery.value.forEach(componentDef => {
-      if (componentDef.path) {
-        const element = findElementByPath(svgElement, componentDef.path);
-        if (element) {
-          if (componentDef.type === 'stick') {
-            const originalTransform = originalElementTransforms.value.get(componentDef.path);
-            if (originalTransform !== undefined) {
-              element.setAttribute('transform', originalTransform);
-            } else {
-              element.removeAttribute('transform');
-            }
-          } else {
-            resetElementStyle(element, componentDef.path);
-          }
-        }
-      }
-    });
-    
-  }
-
-  // 通过路径查找SVG元素
-  function findElementByPath(svgElement: Element, path: string): Element | null {
-    if (!path || !svgElement) return null;
-
-    // 先尝试通过inkscape:label查找
-    let element = Array.from(svgElement.querySelectorAll('*')).find(
-      el => el.getAttribute('inkscape:label') === path
-    );
-
-    // 如果找不到，尝试通过ID查找
-    if (!element) {
-      try {
-        if (/^[a-zA-Z][\w:.-]*$/.test(path)) {
-          const foundElement = svgElement.querySelector(`#${path.replace(/:/g, '\\:')}`);
-          if (foundElement) element = foundElement;
-        }
-      } catch (e) {}
-    }
-
-    // 部分匹配回退
-    if (!element) {
-      const pathWords = path.split(/\s+/);
-      for (const word of pathWords) {
-        if (word.length < 3) continue;
-        element = Array.from(svgElement.querySelectorAll('*')).find(
-          el => el.getAttribute('inkscape:label') &&
-            el.getAttribute('inkscape:label')!.includes(word)
-        );
-        if (element) break;
-      }
-    }
-    return element || null;
-  }
-
-  // 查找可应用样式的目标元素
-  function findTargetElement(element: Element): Element {
-    let colorElement = Array.from(element.querySelectorAll('*')).find(
-      el => el.getAttribute('inkscape:label') === 'Color' ||
-        el.getAttribute('inkscape:label')?.toLowerCase().includes('color')
-    );
-    colorElement ??= element.children[0];
-    return colorElement || element;
-  }
-
-  // 颜色反转
-  function invertColor(hex: string): string {
-    if (hex.indexOf('#') === 0) hex = hex.slice(1);
-    if (hex.length === 3) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-    if (hex.length !== 6) return defaultPressedHighlightColor.value;
-
-    const r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16);
-    const g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16);
-    const b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
-    const padZero = (str: string) => ('00' + str).slice(-2);
-    return '#' + padZero(r) + padZero(g) + padZero(b);
-  }
-
-  // 应用按下样式
-  function applyPressedStyle(element: Element, pathId: string) {
-    if (!element) return;
-    const targetElement = findTargetElement(element);
-    const currentFill = targetElement.getAttribute('fill') || window.getComputedStyle(targetElement).fill;
-
-    if (!originalElementFills.value.has(pathId)) {
-      originalElementFills.value.set(pathId, currentFill === 'none' ? null : currentFill);
-    }
-
-    let pressedFill = customPressedColorValue.value;
-    if (!pressedFill) {
-      if (currentFill && currentFill !== 'none' && currentFill.startsWith('#')) {
-        pressedFill = invertColor(currentFill);
-      } else {
-        pressedFill = defaultPressedHighlightColor.value;
-      }
-    }
-    targetElement.setAttribute('fill', pressedFill);
-  }
-
-  // 重置元素样式
-  function resetElementStyle(element: Element, pathId: string) {
-    if (!element) return;
-    const targetElement = findTargetElement(element);
-    if (originalElementFills.value.has(pathId)) {
-      const originalFill = originalElementFills.value.get(pathId);
-      if (originalFill !== null && originalFill !== undefined) {
-        targetElement.setAttribute('fill', originalFill);
-      } else {
-        targetElement.removeAttribute('fill');
-      }
-    }
-  }
-
-  // 查找关联组件
-  function findAssociatedComponents(
-    components: ControllerComponentStructure[],
-    logicalButton: LogicalButton,
-    componentType?: string
-  ): ControllerComponentStructure[] {
-    const result: ControllerComponentStructure[] = [];
-    function traverse(comps: ControllerComponentStructure[]) {
-      comps.forEach(comp => {
-        if (comp.logicalButton === logicalButton) {
-          if (componentType) {
-            if (comp.type === componentType) {
-              result.push(comp);
-            }
-          } else {
-            result.push(comp);
-          }
-        }
-        if (comp.childComponents) {
-          traverse(comp.childComponents);
-        }
-      });
-    }
-    traverse(components);
-    return result;
-  }
-
-  // 处理按钮状态变化
-  function handleButtonStateChange(logicalButton: LogicalButton, isPressed: boolean) {
-    if (useOverlayButtons.value || !bodySvgRef.value?.$el) return;
-    if (logicalButton === 'LEFT_SHOULDER_2' || logicalButton === 'RIGHT_SHOULDER_2') {
-      const value = gamepad.normalizedGamepadState.buttons[logicalButton]?.value || 0;
-      handleTriggerStateChange(logicalButton, value);
-      return;
-    }
-
-    const svgElement = bodySvgRef.value.$el;
-    const associatedComponents = findAssociatedComponents(controllerComponentsFromQuery.value, logicalButton);
-
-    associatedComponents.forEach(componentDef => {
-      if (componentDef.path) {
-        const targetElement = findElementByPath(svgElement, componentDef.path);
-        if (targetElement) {
-          if (isPressed) applyPressedStyle(targetElement, componentDef.path);
-          else resetElementStyle(targetElement, componentDef.path);
-        }
-      }
-    });
-  }
-
-  // 处理扳机键状态变化
-  function handleTriggerStateChange(logicalButton: LogicalButton, value: number) {
-    if (useOverlayButtons.value || !bodySvgRef.value?.$el) return;
-    const svgElement = bodySvgRef.value.$el;
-    const associatedComponents = findAssociatedComponents(
-      controllerComponentsFromQuery.value,
-      logicalButton,
-      'trigger'
-    );
-    associatedComponents.forEach(componentDef => {
-      if (componentDef.path) {
-        const targetElement = findElementByPath(svgElement, componentDef.path);
-        if (targetElement) {
-          applyTriggerStyle(targetElement, componentDef.path, value);
-        }
-      }
-    });
-  }
-
-  // 应用扳机键样式
-  function applyTriggerStyle(element: Element, pathId: string, value: number) {
-    if (!element) return;
-    const targetElement = findTargetElement(element);
-    const originalFillMap = originalElementFills.value;
-    const originalTransformMap = originalElementTransforms.value;
-
-    // 保存原始样式
-    if (!originalFillMap.has(pathId)) {
-      const currentFill = targetElement.getAttribute('fill') || window.getComputedStyle(targetElement).fill || 'none';
-      originalFillMap.set(pathId, currentFill);
-    }
-
-    if (!originalTransformMap.has(pathId)) {
-      const currentTransform = element.getAttribute('transform') || '';
-      originalTransformMap.set(pathId, currentTransform);
-    }
-
-    const originalFill = originalFillMap.get(pathId);
-    const originalTransform = originalTransformMap.get(pathId) || '';
-
-    // 力度非常小时恢复原始状态
-    if (value <= 0.01) {
-      if (originalFill !== null && originalFill !== undefined && originalFill !== 'none') {
-        targetElement.setAttribute('fill', originalFill);
-      } else {
-        targetElement.removeAttribute('fill');
-      }
-      element.setAttribute('transform', originalTransform);
-      return;
-    }
-
-    // 目标颜色（按下状态的颜色）
-    const targetColor = customPressedColorValue.value || '#FFFFFF';
-
-    // 解析颜色函数
-    function parseColor(color: string): { r: number; g: number; b: number; } {
-      if (color === 'none' || !color) {
-        return { r: 200, g: 200, b: 200 }; // 默认灰色
-      }
-
-      // 处理十六进制颜色
-      if (color.startsWith('#')) {
-        let hex = color.slice(1);
-        // 规范化颜色格式
-        if (hex.length === 3) {
-          hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-        } else if (hex.length === 4) {
-          hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-        } else if (hex.length === 8) {
-          hex = hex.slice(0, 6); // 移除alpha通道
-        }
-
-        return {
-          r: parseInt(hex.slice(0, 2), 16),
-          g: parseInt(hex.slice(2, 4), 16),
-          b: parseInt(hex.slice(4, 6), 16)
-        };
-      }
-
-      // 处理rgb/rgba颜色
-      const rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
-      if (rgbMatch) {
-        return {
-          r: parseInt(rgbMatch[1]),
-          g: parseInt(rgbMatch[2]),
-          b: parseInt(rgbMatch[3])
-        };
-      }
-
-      // 无法解析的颜色返回默认值
-      return { r: 200, g: 200, b: 200 };
-    }
-
-    // 将RGB转回十六进制
-    function rgbToHex(r: number, g: number, b: number): string {
-      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-    }
-
-    // 在两种颜色间进行插值
-    function interpolateColor(color1: { r: number; g: number; b: number; }, color2: { r: number; g: number; b: number; }, factor: number) {
-      return {
-        r: Math.round(color1.r + (color2.r - color1.r) * factor),
-        g: Math.round(color1.g + (color2.g - color1.g) * factor),
-        b: Math.round(color1.b + (color2.b - color1.b) * factor)
-      };
-    }
-
-    // 解析原始颜色和目标颜色
-    const sourceColor = parseColor(originalFill || '#808080');
-    const destColor = parseColor(targetColor);
-
-    // 根据力度插值计算当前颜色
-    const currentColor = interpolateColor(sourceColor, destColor, value);
-    const fillColor = rgbToHex(currentColor.r, currentColor.g, currentColor.b);
-
-    // 应用颜色变化
-    targetElement.setAttribute('fill', fillColor);
-
-    // 保留位移效果
-    const isLeftTrigger = pathId.toLowerCase().includes('left') || pathId.toLowerCase().includes('l2');
-    const movement = value * 5; // 最大移动2像素
-
-    let newTransform = originalTransform;
-    if (originalTransform.includes('translate')) {
-      newTransform = newTransform.replace(/translate\([^)]+\)/,
-        isLeftTrigger ? `translate(0, ${movement})` : `translate(0, ${movement})`);
-    } else {
-      newTransform = `translate(0, ${movement}) ${newTransform}`.trim();
-    }
-
-    element.setAttribute('transform', newTransform);
-  }
-
-  // 处理摇杆状态变化
-  function handleStickStateChange(logicalStick: LogicalButton, axes: { x: number, y: number; }) {
-    if (useOverlayButtons.value || !bodySvgRef.value?.$el) return;
-    const svgElement = bodySvgRef.value.$el;
-    const associatedComponents = findAssociatedComponents(controllerComponentsFromQuery.value, logicalStick, 'stick');
-
-    associatedComponents.forEach(componentDef => {
-      if (componentDef.path) {
-        const stickElement = findElementByPath(svgElement, componentDef.path);
-        if (stickElement) {
-          // 优先使用组件配置的灵敏度，否则使用全局灵敏度设置，再否则使用默认值5
-          const defaultSensitivity = typeof (componentDef as any).sensitivity === 'number' ? (componentDef as any).sensitivity : 5;
-          const sensitivity = stickSensitivityValue.value || defaultSensitivity;
-
-          const translateX = axes.x * sensitivity;
-          const translateY = axes.y * sensitivity;
-
-          const transformMap = originalElementTransforms.value;
-          const pathId = componentDef.path;
-
-          if (!transformMap.has(pathId)) {
-            transformMap.set(pathId, stickElement.getAttribute('transform') || '');
-          }
-          const baseTransform = transformMap.get(pathId) || '';
-
-          let dynamicTranslatePart = '';
-          if (Math.abs(translateX) > 0.01 || Math.abs(translateY) > 0.01) {
-            dynamicTranslatePart = `translate(${translateX.toFixed(2)}, ${translateY.toFixed(2)})`;
-          }
-
-          const newTransform = (dynamicTranslatePart + (baseTransform ? ' ' + baseTransform : '')).trim();
-          stickElement.setAttribute('transform', newTransform);
-        }
-      }
-    });
-  }
-
-  onMounted(() => {
-    nextTick(() => {
-      if (bodySvgRef.value?.$el) {
-        analyzeSvgStructure();
-      }
-    });
-  });
-</script>
-
 <style scoped>
   .gamepad-display-wrapper {
     position: fixed;
@@ -685,4 +684,4 @@
   .error-card {
     max-width: 400px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs_store/components/gamepads/GamepadStick.vue b/src/views/obs_store/components/gamepads/GamepadStick.vue
index 45467d4..0b5e71d 100644
--- a/src/views/obs_store/components/gamepads/GamepadStick.vue
+++ b/src/views/obs_store/components/gamepads/GamepadStick.vue
@@ -1,49 +1,49 @@
-<template>
-  <component
-    :is="svg"
-    v-if="svg"
-    :class="['gamepad-component', 'gamepad-stick']"
-    :style="transformedStyle"
-  />
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue';
-import type { Component } from 'vue';
-import type { Position } from '@/types/gamepad';
+import type { Component } from 'vue'
+import type { Position } from '@/types/gamepad'
+import { computed } from 'vue'
 
 interface Props {
-  svg?: Component; // 改为接受组件而非URL字符串
-  position?: Position;
-  axes?: { x: number; y: number };
+  svg?: Component // 改为接受组件而非URL字符串
+  position?: Position
+  axes?: { x: number, y: number }
 }
 
 const props = withDefaults(defineProps<Props>(), {
   svg: undefined,
   axes: () => ({ x: 0, y: 0 }),
-  position: () => ({ top: '0', left: '0', width: '5%' })
-});
+  position: () => ({ top: '0', left: '0', width: '5%' }),
+})
 
 // 计算实际样式，加入摇杆位移
 const transformedStyle = computed(() => {
-  const moveScale = 15; // 摇杆移动的最大距离（以像素为单位）
-  const translateX = props.axes.x * moveScale;
-  const translateY = props.axes.y * moveScale;
+  const moveScale = 15 // 摇杆移动的最大距离（以像素为单位）
+  const translateX = props.axes.x * moveScale
+  const translateY = props.axes.y * moveScale
 
   return {
     top: props.position?.top,
     left: props.position?.left,
     width: props.position?.width,
     height: props.position?.height || 'auto',
-    transform: `translate(${translateX}px, ${translateY}px)`
-  };
-});
+    transform: `translate(${translateX}px, ${translateY}px)`,
+  }
+})
 </script>
 
+<template>
+  <component
+    :is="svg"
+    v-if="svg"
+    class="gamepad-component gamepad-stick"
+    :style="transformedStyle"
+  />
+</template>
+
 <style scoped>
 .gamepad-component {
   position: absolute;
   user-select: none;
   transition: transform 0.1s ease-out;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/obs_store/components/gamepads/GamepadViewer.vue b/src/views/obs_store/components/gamepads/GamepadViewer.vue
index 092848f..3bc518e 100644
--- a/src/views/obs_store/components/gamepads/GamepadViewer.vue
+++ b/src/views/obs_store/components/gamepads/GamepadViewer.vue
@@ -1,21 +1,300 @@
+<script setup lang="ts">
+import type {
+  TreeOption,
+} from 'naive-ui'
+import type { BodyOptionConfig, ControllerComponentStructure } from '@/data/gamepadConfigs'
+import type { GamepadConfig, GamepadType } from '@/types/gamepad'
+import { useStorage } from '@vueuse/core'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NCheckbox,
+  NCollapse,
+  NCollapseItem,
+  NColorPicker,
+  NDescriptions,
+  NDescriptionsItem,
+  NDivider,
+  NGrid,
+  NGridItem,
+  NInput,
+  NInputNumber,
+  NScrollbar,
+  NSelect,
+  NSlider,
+  NSpace,
+  NTag,
+  NText,
+  NTree,
+} from 'naive-ui'
+import { computed, h, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { controllerBodies, controllerStructures, gamepadConfigs } from '@/data/gamepadConfigs'
+import { useGamepadStore } from '@/store/useGamepadStore'
+import GamepadDisplay from './GamepadDisplay.vue'
+
+interface Props {
+  viewBox?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  viewBox: '',
+})
+
+// 基本设置
+const selectedType = useStorage<GamepadType>('Setting.Gamepad.SelectedType', 'xbox')
+const currentGamepadType = computed(() => selectedType.value)
+const gamepadTypeOptions = [
+  { label: 'Xbox', value: 'xbox' as GamepadType },
+  { label: 'PlayStation', value: 'ps' as GamepadType },
+  { label: 'Nintendo', value: 'nintendo' as GamepadType },
+]
+
+// 调试树组件相关
+const selectedComponentForDebug = ref<ControllerComponentStructure | null>(null)
+const controllerComponents = computed(() => controllerStructures[selectedType.value] || [])
+
+// 存储、配置与状态
+const viewBoxStorageKey = computed(() => `gamepad-viewBox-${selectedType.value}`)
+const customViewBoxInput = useStorage<string>(viewBoxStorageKey, props.viewBox || '')
+const useOverlayButtons = useStorage<boolean>(`Setting.Gamepad.UseOverlayButtons`, true)
+const showComponentTree = ref(false)
+
+// 摇杆灵敏度设置
+const stickSensitivityStorageKey = computed(() => `gamepad-stick-sensitivity-${selectedType.value}`)
+const stickSensitivity = useStorage<number>(stickSensitivityStorageKey, 5)
+
+// 按下颜色配置
+const pressedColorStorageKey = computed(() => `gamepad-pressed-color-${selectedType.value}`)
+const customPressedColor = useStorage<string | null>(pressedColorStorageKey, null)
+const enableCustomPressedColor = computed({
+  get: () => customPressedColor.value !== null && customPressedColor.value !== 'null',
+  set: (val) => {
+    if (!val) {
+      customPressedColor.value = null
+    } else if (customPressedColor.value === null || customPressedColor.value === 'null') {
+      customPressedColor.value = '#FF0000FF'
+    }
+  },
+})
+
+// 游戏手柄状态与配置
+const gamepad = useGamepadStore()
+const currentConfig = computed<GamepadConfig | undefined>(() => gamepadConfigs[selectedType.value])
+
+// 控制器主体选项
+const availableBodies = computed<BodyOptionConfig[]>(() => controllerBodies[selectedType.value] || [])
+const bodyOptions = computed(() => availableBodies.value.map(body => ({
+  label: body.name,
+  value: body.name,
+})))
+
+const bodyIdStorageKey = computed(() => `gamepad-body-${selectedType.value}`)
+const selectedBodyId = useStorage<string>(bodyIdStorageKey, '')
+
+// 当手柄类型变化时重置相关配置
+watch(selectedType, () => {
+  nextTick(() => {
+    resetViewBox()
+    selectedComponentForDebug.value = null
+    if (availableBodies.value.length > 0 && !availableBodies.value.some(b => b.name === selectedBodyId.value)) {
+      selectedBodyId.value = availableBodies.value[0].name
+    } else if (availableBodies.value.length === 0) {
+      selectedBodyId.value = ''
+    }
+  })
+}, { immediate: true })
+
+// 确保选择的手柄主体有效
+watch(() => [availableBodies.value, selectedType.value], () => {
+  if (availableBodies.value.length > 0) {
+    const currentSelectionIsValid = availableBodies.value.some(b => b.name === selectedBodyId.value)
+    if (!currentSelectionIsValid || !selectedBodyId.value) {
+      selectedBodyId.value = availableBodies.value[0].name
+    }
+  } else {
+    selectedBodyId.value = ''
+  }
+}, { immediate: true, deep: true })
+
+// 从props更新viewBox
+watch(() => props.viewBox, (newVal) => {
+  if (newVal && newVal !== customViewBoxInput.value) {
+    customViewBoxInput.value = newVal
+  }
+})
+
+// 获取默认视图框
+const defaultViewBoxForCurrentConfig = computed<string>(() => {
+  const selectedBodyConfig = availableBodies.value.find(b => b.name === selectedBodyId.value)
+  if (selectedBodyConfig?.defaultViewBox) {
+    return selectedBodyConfig.defaultViewBox
+  }
+  return currentConfig.value?.defaultViewBox || '0 0 1000 1000'
+})
+
+// 实际应用的视图框
+const effectiveViewBoxForDisplay = computed<string | undefined>(() => {
+  if (selectedType.value === 'ps') return 'PlayStation SVGs typically manage their own size'
+  return customViewBoxInput.value || defaultViewBoxForCurrentConfig.value
+})
+
+// 连接状态提示
+const lastConnectedInfo = ref<string>('')
+const lastDisconnectedInfo = ref<string>('')
+const showConnectionMessage = ref(false)
+let unsubscribeConnected: (() => void) | undefined
+let unsubscribeDisconnected: (() => void) | undefined
+
+// 组件挂载时初始化
+onMounted(() => {
+  // 注册手柄连接/断开事件监听器
+  unsubscribeConnected = gamepad.onConnected((gamepadInfo, index) => {
+    lastConnectedInfo.value = `${gamepadInfo.id} (索引: ${index})`
+    lastDisconnectedInfo.value = ''
+    showConnectionMessage.value = true
+    setTimeout(() => showConnectionMessage.value = false, 3000)
+  })
+  unsubscribeDisconnected = gamepad.onDisconnected((gamepadInfo, index) => {
+    lastDisconnectedInfo.value = `${gamepadInfo.id} (索引: ${index})`
+    lastConnectedInfo.value = ''
+    showConnectionMessage.value = true
+    setTimeout(() => showConnectionMessage.value = false, 3000)
+  })
+
+  // 初始化视图框和主体选择
+  if (!customViewBoxInput.value && props.viewBox) {
+    customViewBoxInput.value = props.viewBox
+  }
+  if (availableBodies.value.length > 0 && !availableBodies.value.some(b => b.name === selectedBodyId.value)) {
+    selectedBodyId.value = availableBodies.value[0].name
+  } else if (availableBodies.value.length === 0 && selectedBodyId.value) {
+    selectedBodyId.value = ''
+  }
+})
+
+// 组件卸载时清理监听器
+onUnmounted(() => {
+  if (unsubscribeConnected) unsubscribeConnected()
+  if (unsubscribeDisconnected) unsubscribeDisconnected()
+})
+
+// 重置视图框为默认值
+function resetViewBox() {
+  customViewBoxInput.value = defaultViewBoxForCurrentConfig.value
+}
+
+// 重置摇杆灵敏度为默认值
+function resetStickSensitivity() {
+  stickSensitivity.value = 5
+}
+
+// 调试树相关函数
+function findComponentByPath(components: ControllerComponentStructure[], path: string): ControllerComponentStructure | null {
+  if (!path) return null
+
+  for (const component of components) {
+    if (component.path === path) return component
+    if (component.childComponents) {
+      const found = findComponentByPath(component.childComponents, path)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+// 将控制器组件格式化为树形数据
+function formatComponentsForTree(components: ControllerComponentStructure[]): TreeOption[] {
+  return components.map((component) => {
+    const key = component.path || `name:${component.name}:${Math.random().toString(36).substr(2, 9)}`
+    return {
+      key,
+      label: component.name,
+      children: component.childComponents ? formatComponentsForTree(component.childComponents) : undefined,
+      component,
+    }
+  })
+}
+
+// 自定义树节点渲染
+function renderComponentLabel(info: { option: any }) {
+  const { option } = info
+  const component = option.component as ControllerComponentStructure
+  let iconType: 'default' | 'success' | 'error' | 'warning' | 'primary' | 'info' = 'default'
+  switch (component.type) {
+    case 'button': iconType = 'info'; break
+    case 'stick': iconType = 'success'; break
+    case 'trigger': iconType = 'warning'; break
+    case 'dpad': iconType = 'primary'; break
+    default: iconType = 'default'; break
+  }
+  return h('div', { style: 'display: flex; align-items: center;' }, [
+    h(NTag, { type: iconType, size: 'small', style: 'margin-right: 6px;' }, { default: () => component.type }),
+    option.label,
+  ])
+}
+
+// 处理组件选择事件
+function handleComponentSelectedForDebug(keys: string[]) {
+  if (keys.length === 0) {
+    selectedComponentForDebug.value = null
+    return
+  }
+
+  const key = keys[0]
+  if (key.startsWith('name:')) {
+    const namePart = key.split(':', 2)[1]
+    for (const component of controllerComponents.value) {
+      if (component.name === namePart) {
+        selectedComponentForDebug.value = component
+        return
+      }
+    }
+    selectedComponentForDebug.value = null
+  } else {
+    selectedComponentForDebug.value = findComponentByPath(controllerComponents.value, key)
+  }
+}
+
+// 生成独立显示窗口URL
+const gamepadDisplayUrl = computed(() => {
+  const params = new URLSearchParams()
+  params.append('type', selectedType.value)
+  if (selectedBodyId.value) {
+    params.append('bodyId', selectedBodyId.value)
+  }
+  params.append('overlay', String(useOverlayButtons.value))
+  if (customPressedColor.value && customPressedColor.value !== 'null') {
+    params.append('pressedColor', customPressedColor.value)
+  } else {
+    params.append('pressedColor', 'null')
+  }
+  if (customViewBoxInput.value) {
+    params.append('viewBox', customViewBoxInput.value)
+  }
+  // 添加摇杆灵敏度参数
+  params.append('stickSensitivity', String(stickSensitivity.value))
+  return `/obs-store/gamepad?${params.toString()}`
+})
+</script>
+
 <template>
-  <n-card
+  <NCard
     v-if="currentConfig"
     size="small"
     class="gamepad-settings-container"
   >
-    <n-space
+    <NSpace
       align="center"
       size="small"
     >
-      <n-text>选择控制器类型:</n-text>
-      <n-select
+      <NText>选择控制器类型:</NText>
+      <NSelect
         v-model:value="selectedType"
         :options="gamepadTypeOptions"
         size="small"
         style="min-width: 150px"
       />
-      <n-button
+      <NButton
         size="small"
         type="primary"
         tag="a"
@@ -23,19 +302,19 @@
         target="_blank"
       >
         打开独立显示窗口
-      </n-button>
-    </n-space>
+      </NButton>
+    </NSpace>
 
-    <n-divider size="small" />
+    <NDivider size="small" />
 
-    <n-text v-if="!gamepad.isGamepadConnected">
+    <NText v-if="!gamepad.isGamepadConnected">
       未检测到游戏手柄连接
-    </n-text>
-    <n-text v-else-if="gamepad.connectedGamepadInfo">
+    </NText>
+    <NText v-else-if="gamepad.connectedGamepadInfo">
       已连接: {{ gamepad.connectedGamepadInfo.id }} ({{ gamepad.connectedGamepadInfo.mapping }})
-    </n-text>
+    </NText>
 
-    <n-alert
+    <NAlert
       v-if="showConnectionMessage"
       type="info"
       closable
@@ -48,98 +327,98 @@
       <template v-else-if="lastDisconnectedInfo">
         手柄已断开连接: {{ lastDisconnectedInfo }}
       </template>
-    </n-alert>
+    </NAlert>
 
-    <n-space
+    <NSpace
       vertical
       size="small"
     >
-      <n-space
+      <NSpace
         align="center"
         size="small"
       >
-        <n-checkbox v-model:checked="useOverlayButtons">
+        <NCheckbox v-model:checked="useOverlayButtons">
           使用叠加式按钮 (更好的交互效果)
-        </n-checkbox>
-        <n-button
+        </NCheckbox>
+        <NButton
           size="small"
           @click="showComponentTree = !showComponentTree"
         >
           {{ showComponentTree ? '隐藏' : '显示' }}控制器结构 (调试)
-        </n-button>
-      </n-space>
+        </NButton>
+      </NSpace>
 
-      <n-space
+      <NSpace
         v-if="availableBodies.length > 1"
         align="center"
         size="small"
       >
-        <n-text>选择手柄主体样式:</n-text>
-        <n-select
+        <NText>选择手柄主体样式:</NText>
+        <NSelect
           v-model:value="selectedBodyId"
           :options="bodyOptions"
           size="small"
           style="min-width: 200px"
         />
-      </n-space>
+      </NSpace>
 
-      <n-divider title-placement="left">
+      <NDivider title-placement="left">
         按键按下效果
-      </n-divider>
-      <n-space align="center">
-        <n-checkbox v-model:checked="enableCustomPressedColor">
+      </NDivider>
+      <NSpace align="center">
+        <NCheckbox v-model:checked="enableCustomPressedColor">
           自定义按下颜色
-        </n-checkbox>
-        <n-color-picker
+        </NCheckbox>
+        <NColorPicker
           v-if="enableCustomPressedColor"
           v-model:value="customPressedColor"
           :show-alpha="true"
           size="small"
         />
-        <n-text v-else>
+        <NText v-else>
           (默认使用反色效果)
-        </n-text>
-      </n-space>
+        </NText>
+      </NSpace>
 
-      <n-divider title-placement="left">
+      <NDivider title-placement="left">
         摇杆灵敏度
-      </n-divider>
-      <n-space
+      </NDivider>
+      <NSpace
         vertical
         size="small"
       >
-        <n-space align="center">
-          <n-text>移动幅度: {{ stickSensitivity }}</n-text>
-          <n-slider
+        <NSpace align="center">
+          <NText>移动幅度: {{ stickSensitivity }}</NText>
+          <NSlider
             v-model:value="stickSensitivity"
             :min="1"
             :max="20"
             :step="1"
             style="min-width: 200px; max-width: 300px"
           />
-          <n-input-number
+          <NInputNumber
             v-model:value="stickSensitivity"
             :min="1"
             :max="40"
             size="small"
             style="width: 80px"
           />
-          <n-button
+          <NButton
             size="small"
             @click="resetStickSensitivity"
           >
             重置
-          </n-button>
-        </n-space>
-        <n-text
+          </NButton>
+        </NSpace>
+        <NText
           size="small"
           depth="3"
         >
           数值越大，摇杆移动幅度越大。默认值为5。
-        </n-text>
-      </n-space>
+        </NText>
+      </NSpace>
 
-      <n-card
+      <NCard
         title="手柄实时预览"
         size="small"
         style="margin-top: 10px;"
@@ -157,345 +436,86 @@
             :stick-sensitivity="stickSensitivity"
           />
         </div>
-      </n-card>
+      </NCard>
 
-      <n-grid
+      <NGrid
         :cols="1"
       >
-        <n-grid-item v-if="showComponentTree">
-          <n-card
+        <NGridItem v-if="showComponentTree">
+          <NCard
             size="small"
             title="控制器结构 (数据视图)"
           >
-            <n-space vertical>
-              <n-scrollbar style="max-height: 300px;">
-                <n-tree
+            <NSpace vertical>
+              <NScrollbar style="max-height: 300px;">
+                <NTree
                   :data="formatComponentsForTree(controllerComponents)"
                   selectable
                   :render-label="renderComponentLabel"
                   @update:selected-keys="handleComponentSelectedForDebug"
                 />
-              </n-scrollbar>
+              </NScrollbar>
               <div
                 v-if="selectedComponentForDebug"
                 class="selected-component-info"
               >
-                <n-divider title-placement="left">
+                <NDivider title-placement="left">
                   选中组件信息 (调试)
-                </n-divider>
-                <n-descriptions
+                </NDivider>
+                <NDescriptions
                   bordered
                   size="small"
                 >
-                  <n-descriptions-item label="名称">
+                  <NDescriptionsItem label="名称">
                     {{ selectedComponentForDebug.name }}
-                  </n-descriptions-item>
-                  <n-descriptions-item label="类型">
+                  </NDescriptionsItem>
+                  <NDescriptionsItem label="类型">
                     {{ selectedComponentForDebug.type }}
-                  </n-descriptions-item>
-                  <n-descriptions-item label="SVG路径">
+                  </NDescriptionsItem>
+                  <NDescriptionsItem label="SVG路径">
                     {{ selectedComponentForDebug.path || '无' }}
-                  </n-descriptions-item>
-                  <n-descriptions-item label="逻辑按键">
+                  </NDescriptionsItem>
+                  <NDescriptionsItem label="逻辑按键">
                     {{ selectedComponentForDebug.logicalButton || 'N/A' }}
-                  </n-descriptions-item>
-                </n-descriptions>
+                  </NDescriptionsItem>
+                </NDescriptions>
               </div>
-            </n-space>
-          </n-card>
-        </n-grid-item>
-      </n-grid>
+            </NSpace>
+          </NCard>
+        </NGridItem>
+      </NGrid>
 
-      <n-collapse>
-        <n-collapse-item title="高级布局设置 (用于独立显示窗口)">
-          <n-space vertical>
-            <n-space align="center">
-              <n-text>自定义ViewBox:</n-text>
-              <n-input
+      <NCollapse>
+        <NCollapseItem title="高级布局设置 (用于独立显示窗口)">
+          <NSpace vertical>
+            <NSpace align="center">
+              <NText>自定义ViewBox:</NText>
+              <NInput
                 v-model:value="customViewBoxInput"
                 placeholder="例如: 0 0 1543 956"
                 size="small"
                 style="width: 200px"
               />
-              <n-button
+              <NButton
                 size="small"
                 @click="resetViewBox"
               >
                 重置
-              </n-button>
-            </n-space>
-            <n-text size="small">
+              </NButton>
+            </NSpace>
+            <NText size="small">
               ViewBox格式: minX minY width height. 当前生效: {{ effectiveViewBoxForDisplay }}
-            </n-text>
-          </n-space>
-        </n-collapse-item>
-      </n-collapse>
-    </n-space>
-  </n-card>
-  <n-card v-else>
+            </NText>
+          </NSpace>
+        </NCollapseItem>
+      </NCollapse>
+    </NSpace>
+  </NCard>
+  <NCard v-else>
     无效的游戏手柄类型: {{ currentGamepadType }}
-  </n-card>
+  </NCard>
 </template>
 
-<script setup lang="ts">
-import { computed, watch, ref, onMounted, nextTick, h, onUnmounted } from 'vue';
-import type { GamepadType, GamepadConfig } from '@/types/gamepad';
-import GamepadDisplay from './GamepadDisplay.vue';
-import { gamepadConfigs, controllerBodies, BodyOptionConfig, controllerStructures, ControllerComponentStructure } from '@/data/gamepadConfigs';
-import { useGamepadStore } from '@/store/useGamepadStore';
-import { useStorage } from '@vueuse/core';
-import {
-  NCard, NSpace, NButton, NCheckbox, NSelect, NText, NCollapse,
-  NCollapseItem, NInput, NScrollbar, NDivider,
-  NTag, NColorPicker, NGrid, NGridItem, NTree, NDescriptions,
-  NDescriptionsItem, NAlert, NSlider, NInputNumber,
-  TreeOption
-} from 'naive-ui';
-
-interface Props {
-  viewBox?: string;
-}
-const props = withDefaults(defineProps<Props>(), {
-  viewBox: '',
-});
-
-// 基本设置
-const selectedType = useStorage<GamepadType>('Setting.Gamepad.SelectedType', 'xbox');
-const currentGamepadType = computed(() => selectedType.value);
-const gamepadTypeOptions = [
-  { label: 'Xbox', value: 'xbox' as GamepadType },
-  { label: 'PlayStation', value: 'ps' as GamepadType },
-  { label: 'Nintendo', value: 'nintendo' as GamepadType }
-];
-
-// 调试树组件相关
-const selectedComponentForDebug = ref<ControllerComponentStructure | null>(null);
-const controllerComponents = computed(() => controllerStructures[selectedType.value] || []);
-
-// 存储、配置与状态
-const viewBoxStorageKey = computed(() => `gamepad-viewBox-${selectedType.value}`);
-const customViewBoxInput = useStorage<string>(viewBoxStorageKey, props.viewBox || '');
-const useOverlayButtons = useStorage<boolean>(`Setting.Gamepad.UseOverlayButtons`, true);
-const showComponentTree = ref(false);
-
-// 摇杆灵敏度设置
-const stickSensitivityStorageKey = computed(() => `gamepad-stick-sensitivity-${selectedType.value}`);
-const stickSensitivity = useStorage<number>(stickSensitivityStorageKey, 5);
-
-// 按下颜色配置
-const pressedColorStorageKey = computed(() => `gamepad-pressed-color-${selectedType.value}`);
-const customPressedColor = useStorage<string | null>(pressedColorStorageKey, null);
-const enableCustomPressedColor = computed({
-  get: () => customPressedColor.value !== null && customPressedColor.value !== 'null',
-  set: (val) => {
-    if (!val) {
-      customPressedColor.value = null;
-    } else if (customPressedColor.value === null || customPressedColor.value === 'null') {
-      customPressedColor.value = '#FF0000FF';
-    }
-  }
-});
-
-// 游戏手柄状态与配置
-const gamepad = useGamepadStore();
-const currentConfig = computed<GamepadConfig | undefined>(() => gamepadConfigs[selectedType.value]);
-
-// 控制器主体选项
-const availableBodies = computed<BodyOptionConfig[]>(() => controllerBodies[selectedType.value] || []);
-const bodyOptions = computed(() => availableBodies.value.map(body => ({
-  label: body.name,
-  value: body.name
-})));
-
-const bodyIdStorageKey = computed(() => `gamepad-body-${selectedType.value}`);
-const selectedBodyId = useStorage<string>(bodyIdStorageKey, '');
-
-// 当手柄类型变化时重置相关配置
-watch(selectedType, () => {
-  nextTick(() => {
-    resetViewBox();
-    selectedComponentForDebug.value = null;
-    if (availableBodies.value.length > 0 && !availableBodies.value.some(b => b.name === selectedBodyId.value)) {
-      selectedBodyId.value = availableBodies.value[0].name;
-    } else if (availableBodies.value.length === 0) {
-      selectedBodyId.value = '';
-    }
-  });
-}, { immediate: true });
-
-// 确保选择的手柄主体有效
-watch(() => [availableBodies.value, selectedType.value], () => {
-  if (availableBodies.value.length > 0) {
-    const currentSelectionIsValid = availableBodies.value.some(b => b.name === selectedBodyId.value);
-    if (!currentSelectionIsValid || !selectedBodyId.value) {
-      selectedBodyId.value = availableBodies.value[0].name;
-    }
-  } else {
-    selectedBodyId.value = '';
-  }
-}, { immediate: true, deep: true });
-
-// 从props更新viewBox
-watch(() => props.viewBox, (newVal) => {
-  if (newVal && newVal !== customViewBoxInput.value) {
-    customViewBoxInput.value = newVal;
-  }
-});
-
-// 获取默认视图框
-const defaultViewBoxForCurrentConfig = computed<string>(() => {
-  const selectedBodyConfig = availableBodies.value.find(b => b.name === selectedBodyId.value);
-  if (selectedBodyConfig?.defaultViewBox) {
-    return selectedBodyConfig.defaultViewBox;
-  }
-  return currentConfig.value?.defaultViewBox || '0 0 1000 1000';
-});
-
-// 实际应用的视图框
-const effectiveViewBoxForDisplay = computed<string | undefined>(() => {
-  if (selectedType.value === 'ps') return 'PlayStation SVGs typically manage their own size';
-  return customViewBoxInput.value || defaultViewBoxForCurrentConfig.value;
-});
-
-// 连接状态提示
-const lastConnectedInfo = ref<string>('');
-const lastDisconnectedInfo = ref<string>('');
-const showConnectionMessage = ref(false);
-let unsubscribeConnected: (() => void) | undefined;
-let unsubscribeDisconnected: (() => void) | undefined;
-
-// 组件挂载时初始化
-onMounted(() => {
-  // 注册手柄连接/断开事件监听器
-  unsubscribeConnected = gamepad.onConnected((gamepadInfo, index) => {
-    lastConnectedInfo.value = `${gamepadInfo.id} (索引: ${index})`;
-    lastDisconnectedInfo.value = '';
-    showConnectionMessage.value = true;
-    setTimeout(() => showConnectionMessage.value = false, 3000);
-  });
-  unsubscribeDisconnected = gamepad.onDisconnected((gamepadInfo, index) => {
-    lastDisconnectedInfo.value = `${gamepadInfo.id} (索引: ${index})`;
-    lastConnectedInfo.value = '';
-    showConnectionMessage.value = true;
-    setTimeout(() => showConnectionMessage.value = false, 3000);
-  });
-
-  // 初始化视图框和主体选择
-  if (!customViewBoxInput.value && props.viewBox) {
-    customViewBoxInput.value = props.viewBox;
-  }
-  if (availableBodies.value.length > 0 && !availableBodies.value.some(b => b.name === selectedBodyId.value)) {
-    selectedBodyId.value = availableBodies.value[0].name;
-  } else if (availableBodies.value.length === 0 && selectedBodyId.value) {
-    selectedBodyId.value = '';
-  }
-});
-
-// 组件卸载时清理监听器
-onUnmounted(() => {
-  if (unsubscribeConnected) unsubscribeConnected();
-  if (unsubscribeDisconnected) unsubscribeDisconnected();
-});
-
-// 重置视图框为默认值
-const resetViewBox = () => {
-  customViewBoxInput.value = defaultViewBoxForCurrentConfig.value;
-};
-
-// 重置摇杆灵敏度为默认值
-const resetStickSensitivity = () => {
-  stickSensitivity.value = 5;
-};
-
-// 调试树相关函数
-function findComponentByPath(components: ControllerComponentStructure[], path: string): ControllerComponentStructure | null {
-  if (!path) return null;
-
-  for (const component of components) {
-    if (component.path === path) return component;
-    if (component.childComponents) {
-      const found = findComponentByPath(component.childComponents, path);
-      if (found) return found;
-    }
-  }
-  return null;
-}
-
-// 将控制器组件格式化为树形数据
-function formatComponentsForTree(components: ControllerComponentStructure[]): TreeOption[] {
-  return components.map(component => {
-    const key = component.path || `name:${component.name}:${Math.random().toString(36).substr(2, 9)}`;
-    return {
-      key,
-      label: component.name,
-      children: component.childComponents ? formatComponentsForTree(component.childComponents) : undefined,
-      component
-    };
-  });
-}
-
-// 自定义树节点渲染
-function renderComponentLabel(info: { option: any }) {
-  const { option } = info;
-  const component = option.component as ControllerComponentStructure;
-  let iconType: "default" | "success" | "error" | "warning" | "primary" | "info" = 'default';
-  switch (component.type) {
-    case 'button': iconType = 'info'; break;
-    case 'stick': iconType = 'success'; break;
-    case 'trigger': iconType = 'warning'; break;
-    case 'dpad': iconType = 'primary'; break;
-    default: iconType = 'default'; break;
-  }
-  return h('div', { style: 'display: flex; align-items: center;' }, [
-    h(NTag, { type: iconType, size: 'small', style: 'margin-right: 6px;' }, { default: () => component.type }),
-    option.label
-  ]);
-}
-
-// 处理组件选择事件
-function handleComponentSelectedForDebug(keys: string[]) {
-  if (keys.length === 0) {
-    selectedComponentForDebug.value = null;
-    return;
-  }
-
-  const key = keys[0];
-  if (key.startsWith('name:')) {
-    const namePart = key.split(':', 2)[1];
-    for (const component of controllerComponents.value) {
-      if (component.name === namePart) {
-        selectedComponentForDebug.value = component;
-        return;
-      }
-    }
-    selectedComponentForDebug.value = null;
-  } else {
-    selectedComponentForDebug.value = findComponentByPath(controllerComponents.value, key);
-  }
-}
-
-// 生成独立显示窗口URL
-const gamepadDisplayUrl = computed(() => {
-  const params = new URLSearchParams();
-  params.append('type', selectedType.value);
-  if (selectedBodyId.value) {
-    params.append('bodyId', selectedBodyId.value);
-  }
-  params.append('overlay', String(useOverlayButtons.value));
-  if (customPressedColor.value && customPressedColor.value !== 'null') {
-    params.append('pressedColor', customPressedColor.value);
-  } else {
-    params.append('pressedColor', 'null');
-  }
-  if (customViewBoxInput.value) {
-    params.append('viewBox', customViewBoxInput.value);
-  }
-  // 添加摇杆灵敏度参数
-  params.append('stickSensitivity', String(stickSensitivity.value));
-  return `/obs-store/gamepad?${params.toString()}`;
-});
-</script>
-
 <style scoped>
 .gamepad-settings-container {
   max-width: 700px;
@@ -507,4 +527,4 @@ const gamepadDisplayUrl = computed(() => {
 .selected-component-info {
   margin-top: 10px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/open_live/DanmakuVote.vue b/src/views/open_live/DanmakuVote.vue
index 1978b23..74e3cf2 100644
--- a/src/views/open_live/DanmakuVote.vue
+++ b/src/views/open_live/DanmakuVote.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import { copyToClipboard } from '@/Utils'
-import { useAccount } from '@/api/account'
-import { OpenLiveInfo, RequestCreateBulletVote, ResponseVoteSession, VoteConfig } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { VOTE_API_URL } from '@/data/constants'
-import { useDanmakuClient } from '@/store/useDanmakuClient'
+import type { OpenLiveInfo, RequestCreateBulletVote, ResponseVoteSession, VoteConfig } from '@/api/api-models'
 import { Add24Filled, Delete24Regular, Info24Filled, Pause24Regular, Play24Regular, Settings24Regular, ShareAndroid24Regular } from '@vicons/fluent'
 import { useStorage } from '@vueuse/core'
 import {
@@ -33,11 +28,16 @@ import {
   NTag,
   NText,
   NThing,
-  useMessage
+  useMessage,
 } from 'naive-ui'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { clearInterval, setInterval } from 'worker-timers'
+import { useAccount } from '@/api/account'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { VOTE_API_URL } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import { copyToClipboard } from '@/Utils'
 
 const props = defineProps<{
   roomInfo?: OpenLiveInfo
@@ -56,22 +56,22 @@ const voteConfig = ref<VoteConfig>({
   isEnabled: false,
   showResults: true,
   voteDurationSeconds: 60,
-  voteCommand: "投票",
-  voteEndCommand: "结束投票",
-  voteTitle: "投票",
+  voteCommand: '投票',
+  voteEndCommand: '结束投票',
+  voteTitle: '投票',
   allowMultipleOptions: false,
   allowMultipleVotes: false,
   allowCustomOptions: false,
   logVotes: true,
-  defaultOptions: ["选项1", "选项2"],
-  backgroundColor: "#1e1e2e",
-  textColor: "#ffffff",
-  optionColor: "#89b4fa",
+  defaultOptions: ['选项1', '选项2'],
+  backgroundColor: '#1e1e2e',
+  textColor: '#ffffff',
+  optionColor: '#89b4fa',
   roundedCorners: true,
-  displayPosition: "right",
+  displayPosition: 'right',
   allowGiftVoting: false,
   minGiftPrice: 1,
-  voteResultMode: 0
+  voteResultMode: 0,
 })
 
 // 当前投票会话
@@ -177,7 +177,7 @@ async function createVote() {
     title: newVoteTitle.value,
     options: filteredOptions,
     allowMultipleVotes: newVoteAllowMultiple.value,
-    durationSeconds: newVoteDuration.value
+    durationSeconds: newVoteDuration.value,
   }
 
   try {
@@ -259,7 +259,7 @@ function copyObsLink() {
   const roomId = props.roomInfo?.anchor_info?.room_id || route.query.roomId
 
   // 获取配置哈希
-  fetchVoteHash().then(hash => {
+  fetchVoteHash().then((hash) => {
     if (hash) {
       const obsUrl = `${baseUrl}/obs/danmaku-vote?hash=${hash}`
       copyToClipboard(obsUrl)
@@ -291,7 +291,7 @@ function calculatePercentage(count: number, totalVotes: number) {
 }
 
 // 加载模板
-function loadTemplate(template: {title: string, options: string[]}) {
+function loadTemplate(template: { title: string, options: string[] }) {
   newVoteTitle.value = template.title
   newVoteOptions.value = [...template.options]
   // 确保至少有两个选项
@@ -329,7 +329,7 @@ watch(() => voteConfig.value, (newConfig) => {
 }, { immediate: true })
 
 // 初始模板
-const savedTemplates = useStorage<{title: string, options: string[]}[]>('DanmakuVoteTemplates', [])
+const savedTemplates = useStorage<{ title: string, options: string[] }[]>('DanmakuVoteTemplates', [])
 const templateName = ref('')
 
 // 保存模板
@@ -347,7 +347,7 @@ function saveTemplate() {
 
   savedTemplates.value.push({
     title: templateName.value,
-    options: filteredOptions
+    options: filteredOptions,
   })
 
   templateName.value = ''
@@ -771,7 +771,7 @@ function deleteTemplate(index: number) {
                   { label: '左侧', value: 'left' },
                   { label: '右侧', value: 'right' },
                   { label: '顶部', value: 'top' },
-                  { label: '底部', value: 'bottom' }
+                  { label: '底部', value: 'bottom' },
                 ]"
                 style="width: 120px"
               />
@@ -793,4 +793,4 @@ function deleteTemplate(index: number) {
       </NSpace>
     </NSpin>
   </NModal>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/open_live/LiveRequest.vue b/src/views/open_live/LiveRequest.vue
index 9b2bc30..7543ddc 100644
--- a/src/views/open_live/LiveRequest.vue
+++ b/src/views/open_live/LiveRequest.vue
@@ -1,16 +1,9 @@
 // 这是LiveRequest重构后的代码
 
 <script setup lang="ts">
-import { SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account'
-import {
-  EventModel,
-  FunctionTypes,
+import type {
   OpenLiveInfo,
-  QueueSortType
 } from '@/api/api-models'
-import { CURRENT_HOST } from '@/data/constants'
-import SongPlayer from '@/components/SongPlayer.vue'
-import { useDanmakuClient } from '@/store/useDanmakuClient'
 import { Info24Filled } from '@vicons/fluent'
 import { useStorage } from '@vueuse/core'
 import {
@@ -34,21 +27,32 @@ import {
   NTabPane,
   NTabs,
   NText,
-  NTime,
   NTooltip,
   NUl,
-  useMessage
+  useMessage,
 } from 'naive-ui'
-import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, provide, ref } from 'vue'
+import { onActivated, onDeactivated, onMounted, onUnmounted, provide, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import LiveRequestOBS from '../obs/LiveRequestOBS.vue'
+import { SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account'
+import {
+  FunctionTypes,
+} from '@/api/api-models'
+import SongPlayer from '@/components/SongPlayer.vue'
 import { useLiveRequest } from '@/composables/useLiveRequest'
+import { CURRENT_HOST } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import LiveRequestOBS from '../obs/LiveRequestOBS.vue'
 
+import SongRequestHistory from './components/SongRequestHistory.vue'
 // 子组件
 import SongRequestList from './components/SongRequestList.vue'
-import SongRequestHistory from './components/SongRequestHistory.vue'
 import SongRequestSettings from './components/SongRequestSettings.vue'
 
+const props = defineProps<{
+  roomInfo?: OpenLiveInfo
+  code?: string | undefined
+  isOpenLive?: boolean
+}>()
 const route = useRoute()
 const accountInfo = useAccount()
 const message = useMessage()
@@ -66,19 +70,13 @@ const songRequest = useLiveRequest()
 // 提供activeSongs给子组件
 provide('activeSongs', songRequest.activeSongs)
 
-const props = defineProps<{
-  roomInfo?: OpenLiveInfo
-  code?: string | undefined
-  isOpenLive?: boolean
-}>()
-
 // 控制歌曲请求功能开关
 async function onUpdateFunctionEnable() {
   if (accountInfo.value.id) {
     const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions))
     if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.LiveRequest)) {
       accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter(
-        (f) => f != FunctionTypes.LiveRequest,
+        f => f != FunctionTypes.LiveRequest,
       )
     } else {
       accountInfo.value.settings.enableFunctions.push(FunctionTypes.LiveRequest)
@@ -119,7 +117,7 @@ async function updateSettings() {
           message.success('已保存')
           return true
         } else {
-          message.error('保存失败: ' + msg)
+          message.error(`保存失败: ${msg}`)
         }
       })
       .finally(() => {
@@ -244,7 +242,8 @@ onUnmounted(() => {
             if (songRequest.configCanEdit) {
               accountInfo.settings.songRequest.isReverse = value
               updateSettings()
-            } else {
+            }
+            else {
               songRequest.isReverse = value
             }
           }"
diff --git a/src/views/open_live/MusicRequest.vue b/src/views/open_live/MusicRequest.vue
index 54881ee..4b50f20 100644
--- a/src/views/open_live/MusicRequest.vue
+++ b/src/views/open_live/MusicRequest.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
-import { DanmakuUserInfo, EventModel, OpenLiveInfo, SongFrom, SongsInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { CURRENT_HOST, MUSIC_REQUEST_API_URL, SONG_API_URL } from '@/data/constants'
-import { useDanmakuClient } from '@/store/useDanmakuClient'
-import { MusicRequestSettings, useMusicRequestProvider } from '@/store/useMusicRequest'
+import type {
+  SelectOption,
+} from 'naive-ui'
+import type { DanmakuUserInfo, EventModel, OpenLiveInfo, SongsInfo } from '@/api/api-models'
+import type { MusicRequestSettings } from '@/store/useMusicRequest'
 import { useStorage } from '@vueuse/core'
 import { List } from 'linqts'
 import {
@@ -36,15 +35,20 @@ import {
   NTransfer,
   NUl,
   NVirtualList,
-  SelectOption,
   useMessage,
 } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { clearInterval, setInterval } from 'worker-timers'
+import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
+import { SongFrom } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { CURRENT_HOST, MUSIC_REQUEST_API_URL, SONG_API_URL } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import { useMusicRequestProvider } from '@/store/useMusicRequest'
 import MusicRequestOBS from '../obs/MusicRequestOBS.vue'
 
-type Music = {
+interface Music {
   id: number
   title: string
   artist: string
@@ -52,11 +56,17 @@ type Music = {
   pic: string
   lrc: string
 }
-type WaitMusicInfo = {
+interface WaitMusicInfo {
   from: DanmakuUserInfo
   music: SongsInfo
 }
 
+const props = defineProps<{
+  roomInfo?: OpenLiveInfo
+  code?: string | undefined
+  isOpenLive?: boolean
+}>()
+
 const route = useRoute()
 
 const settings = computed(() => {
@@ -66,12 +76,6 @@ const cooldown = useStorage<{ [id: number]: number }>('Setting.MusicRequest.Cool
 const musicRquestStore = useMusicRequestProvider()
 const client = await useDanmakuClient().initOpenlive()
 
-const props = defineProps<{
-  roomInfo?: OpenLiveInfo
-  code?: string | undefined
-  isOpenLive?: boolean
-}>()
-
 const deviceList = ref<SelectOption[]>([])
 
 const accountInfo = useAccount()
@@ -110,22 +114,22 @@ const neteaseSongListId = computed(() => {
 })
 const neteaseSongs = ref<SongsInfo[]>([])
 const neteaseSongsOptions = computed(() => {
-  return neteaseSongs.value.map((s) => ({
+  return neteaseSongs.value.map(s => ({
     label: `${s.name} - ${s.author.join('/')}`,
     value: s.key,
-    disabled: originMusics.value.findIndex((exist) => exist.id == s.id) > -1,
+    disabled: originMusics.value.findIndex(exist => exist.id == s.id) > -1,
   }))
 })
 const selectedNeteaseSongs = ref<string[]>([])
 
 async function get() {
   try {
-    const data = await QueryGetAPI<SongsInfo[]>(MUSIC_REQUEST_API_URL + 'get')
+    const data = await QueryGetAPI<SongsInfo[]>(`${MUSIC_REQUEST_API_URL}get`)
     if (data.code == 200) {
       console.log('[OPEN-LIVE-Music-Request] 已获取所有数据')
-      return new List(data.data).OrderByDescending((s) => s.createTime).ToArray()
+      return new List(data.data).OrderByDescending(s => s.createTime).ToArray()
     } else {
-      message.error('无法获取数据: ' + data.message)
+      message.error(`无法获取数据: ${data.message}`)
       return []
     }
   } catch (err) {
@@ -134,38 +138,38 @@ async function get() {
   return []
 }
 async function searchMusic(keyword: string) {
-  const inSongList = originMusics.value.find((m) => m.name.toLowerCase().trim() == keyword.toLowerCase().trim())
+  const inSongList = originMusics.value.find(m => m.name.toLowerCase().trim() == keyword.toLowerCase().trim())
   if (inSongList) {
     return inSongList
   }
-  const data = await QueryGetAPI<SongsInfo>(MUSIC_REQUEST_API_URL + 'search-' + settings.value.platform, {
-    keyword: keyword,
+  const data = await QueryGetAPI<SongsInfo>(`${MUSIC_REQUEST_API_URL}search-${settings.value.platform}`, {
+    keyword,
   })
   if (data.code == 200) {
     return data.data
   } else if (data.code == 404) {
-    message.error('未找到包含关键词: ' + keyword + ' 的歌曲')
+    message.error(`未找到包含关键词: ${keyword} 的歌曲`)
   }
   return undefined
 }
 function switchTo() { }
 async function getNeteaseSongList() {
   isLoading.value = true
-  await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get-netease-list', {
+  await QueryGetAPI<SongsInfo[]>(`${SONG_API_URL}get-netease-list`, {
     id: neteaseSongListId.value,
   })
     .then((data) => {
       if (data.code == 200) {
         neteaseSongs.value = data.data
         message.success(
-          `成功获取歌曲信息, 共 ${data.data.length} 条, 歌单中已存在 ${neteaseSongsOptions.value.filter((s) => s.disabled).length} 首`,
+          `成功获取歌曲信息, 共 ${data.data.length} 条, 歌单中已存在 ${neteaseSongsOptions.value.filter(s => s.disabled).length} 首`,
         )
       } else {
-        message.error('获取歌单失败: ' + data.message)
+        message.error(`获取歌单失败: ${data.message}`)
       }
     })
     .catch((err) => {
-      message.error('获取歌单失败: ' + err)
+      message.error(`获取歌单失败: ${err}`)
     })
     .finally(() => {
       isLoading.value = false
@@ -173,14 +177,14 @@ async function getNeteaseSongList() {
 }
 async function addNeteaseSongs() {
   isLoading.value = true
-  const selected = neteaseSongs.value.filter((s) => selectedNeteaseSongs.value.find((select) => s.key == select))
+  const selected = neteaseSongs.value.filter(s => selectedNeteaseSongs.value.find(select => s.key == select))
   await addSongs(selected, SongFrom.Netease)
     .then((data) => {
       if (data.code == 200) {
         message.success(`已添加 ${data.data.length} 首歌曲`)
         originMusics.value.push(...data.data)
       } else {
-        message.error('添加失败: ' + data.message)
+        message.error(`添加失败: ${data.message}`)
       }
     })
     .catch((err) => {
@@ -192,8 +196,8 @@ async function addNeteaseSongs() {
 }
 async function addSongs(songsShoudAdd: SongsInfo[], from: SongFrom) {
   return QueryPostAPI<SongsInfo[]>(
-    MUSIC_REQUEST_API_URL + 'add',
-    songsShoudAdd.map((s) => ({
+    `${MUSIC_REQUEST_API_URL}add`,
+    songsShoudAdd.map(s => ({
       Name: s.name,
       Id: from == SongFrom.Custom ? -1 : s.id,
       From: from,
@@ -205,31 +209,31 @@ async function addSongs(songsShoudAdd: SongsInfo[], from: SongFrom) {
   )
 }
 function delMusic(song: SongsInfo) {
-  QueryPostAPI(MUSIC_REQUEST_API_URL + 'del', [song.key])
+  QueryPostAPI(`${MUSIC_REQUEST_API_URL}del`, [song.key])
     .then((data) => {
       if (data.code == 200) {
         message.success('已删除')
-        musicRquestStore.originMusics = originMusics.value.filter((s) => s.key != song.key)
+        musicRquestStore.originMusics = originMusics.value.filter(s => s.key != song.key)
       } else {
-        message.error('删除失败: ' + data.message)
+        message.error(`删除失败: ${data.message}`)
       }
     })
     .catch((err) => {
-      message.error('删除失败' + err)
+      message.error(`删除失败${err}`)
     })
 }
 function clearMusic() {
-  QueryGetAPI(MUSIC_REQUEST_API_URL + 'clear')
+  QueryGetAPI(`${MUSIC_REQUEST_API_URL}clear`)
     .then((data) => {
       if (data.code == 200) {
         message.success('已清空')
         musicRquestStore.originMusics = []
       } else {
-        message.error('清空失败: ' + data.message)
+        message.error(`清空失败: ${data.message}`)
       }
     })
     .catch((err) => {
-      message.error('清空失败' + err)
+      message.error(`清空失败${err}`)
     })
 }
 async function uploadConfig() {
@@ -249,7 +253,7 @@ async function downloadConfig() {
   await DownloadConfig<MusicRequestSettings>('MusicRequest')
     .then((data) => {
       if (data.msg) {
-        message.error('获取失败: ' + data.msg)
+        message.error(`获取失败: ${data.msg}`)
       } else {
         musicRquestStore.settings = data.data ?? ({} as MusicRequestSettings)
         message.success('已获取配置文件')
@@ -260,10 +264,10 @@ async function downloadConfig() {
     })
 }
 function startListen() {
-  /*if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest)) {
+  /* if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest)) {
     message.warning('使用这个点歌则需要先关闭歌势点歌 (SongRequest)')
     return
-  }*/
+  } */
   listening.value = true
   message.success('开始监听')
 }
@@ -331,23 +335,23 @@ async function getOutputDevice() {
     const list = await navigator.mediaDevices.enumerateDevices()
 
     deviceList.value = list
-      .filter((device) => device.kind === 'audiooutput')
-      .map((d) => ({ label: d.label, value: d.deviceId }))
+      .filter(device => device.kind === 'audiooutput')
+      .map(d => ({ label: d.label, value: d.deviceId }))
   } catch (err) {
     console.error(err)
-    message.error('获取音频输出设备失败, 获取你需要授予网页读取麦克风权限: ' + err)
+    message.error(`获取音频输出设备失败, 获取你需要授予网页读取麦克风权限: ${err}`)
   }
 }
 function blockMusic(song: SongsInfo) {
   settings.value.blacklist.push(song.name)
   musicRquestStore.waitingMusics.splice(
-    musicRquestStore.waitingMusics.findIndex((m) => m.music == song),
+    musicRquestStore.waitingMusics.findIndex(m => m.music == song),
     1,
   )
   message.success(`[${song.name}] 已添加到黑名单`)
 }
 function updateWaiting() {
-  QueryPostAPI(MUSIC_REQUEST_API_URL + 'update-waiting', {
+  QueryPostAPI(`${MUSIC_REQUEST_API_URL}update-waiting`, {
     playing: musicRquestStore.currentOriginMusic,
     waiting: musicRquestStore.waitingMusics,
   })
@@ -364,7 +368,7 @@ onMounted(async () => {
   }
   await getOutputDevice()
   if (deviceList.value.length > 0) {
-    if (!deviceList.value.find((d) => d.value == settings.value.deviceId)) {
+    if (!deviceList.value.find(d => d.value == settings.value.deviceId)) {
       settings.value.deviceId = undefined
     } else {
       musicRquestStore.setSinkId()
@@ -597,7 +601,7 @@ onUnmounted(() => {
       </NEmpty>
       <NVirtualList
         v-else
-        :style="`max-height: 1000px`"
+        style="max-height: 1000px"
         :item-size="30"
         :items="originMusics"
         item-resizable
@@ -666,7 +670,7 @@ onUnmounted(() => {
   <NModal
     v-model:show="showNeteaseModal"
     preset="card"
-    :title="`获取歌单`"
+    title="获取歌单"
     style="max-width: 600px"
   >
     <NInput
@@ -732,7 +736,7 @@ onUnmounted(() => {
       <MusicRequestOBS :id="accountInfo?.id" />
     </div>
     <br>
-    <NInput :value="`${CURRENT_HOST}obs/music-request?id=` + accountInfo?.id" />
+    <NInput :value="`${CURRENT_HOST}obs/music-request?id=${accountInfo?.id}`" />
     <NDivider />
     <NCollapse>
       <NCollapseItem title="使用说明">
diff --git a/src/views/open_live/OpenLiveIndex.vue b/src/views/open_live/OpenLiveIndex.vue
index 8dfbefd..54ad859 100644
--- a/src/views/open_live/OpenLiveIndex.vue
+++ b/src/views/open_live/OpenLiveIndex.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
-import { OpenLiveInfo } from '@/api/api-models';
-import { NAlert, NButton, NCard, NDivider, NSpace } from 'naive-ui';
+import type { OpenLiveInfo } from '@/api/api-models'
+import { NAlert, NButton, NCard, NDivider, NSpace } from 'naive-ui'
+import { useAccount } from '@/api/account'
 
 const props = defineProps<{
   roomInfo?: OpenLiveInfo
diff --git a/src/views/open_live/OpenLottery.vue b/src/views/open_live/OpenLottery.vue
index c71d695..ac142ec 100644
--- a/src/views/open_live/OpenLottery.vue
+++ b/src/views/open_live/OpenLottery.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { OpenLiveInfo, OpenLiveLotteryType, OpenLiveLotteryUserInfo, UpdateLiveLotteryUsersModel } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { CURRENT_HOST, LOTTERY_API_URL } from '@/data/constants'
-import { useDanmakuClient } from '@/store/useDanmakuClient'
-import { Delete24Filled, Info24Filled, Add24Filled, PersonAdd24Filled, Sparkle24Filled, Target24Filled } from '@vicons/fluent'
+import type { OpenLiveInfo, OpenLiveLotteryUserInfo, UpdateLiveLotteryUsersModel } from '@/api/api-models'
+import type { DanmakuInfo, GiftInfo } from '@/data/DanmakuClients/OpenLiveClient'
+import { Add24Filled, Delete24Filled, Info24Filled, PersonAdd24Filled, Sparkle24Filled, Target24Filled } from '@vicons/fluent'
 import { useLocalStorage, useStorage } from '@vueuse/core'
 import { format } from 'date-fns'
 import {
@@ -18,8 +15,8 @@ import {
   NCollapseTransition,
   NDivider,
   NEmpty,
-  NGrid,
-  NGridItem,
+  NForm,
+  NFormItem,
   NIcon,
   NInput,
   NInputGroup,
@@ -29,6 +26,7 @@ import {
   NList,
   NListItem,
   NModal,
+  NProgress,
   NRadioButton,
   NRadioGroup,
   NResult,
@@ -40,18 +38,15 @@ import {
   NUl,
   useMessage,
   useNotification,
-  NProgress,
-  NDrawer,
-  NDrawerContent,
-  NTabPane,
-  NTabs,
-  NForm,
-  NFormItem,
 } from 'naive-ui'
-import { h, onMounted, onUnmounted, ref, computed, nextTick, watch } from 'vue'
+import { computed, h, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useAccount } from '@/api/account'
+import { OpenLiveLotteryType } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { CURRENT_HOST, LOTTERY_API_URL } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
 import LiveLotteryOBS from '../obs/LiveLotteryOBS.vue'
-import { DanmakuInfo, GiftInfo } from '@/data/DanmakuClients/OpenLiveClient'
 
 interface LotteryOption {
   resultCount: number
@@ -72,11 +67,15 @@ interface LotteryHistory {
   time: number
 }
 
-type CardState = {
+interface CardState {
   flipped: boolean
   isWinner: boolean
   eliminated: boolean
 }
+const props = defineProps<{
+  roomInfo?: OpenLiveInfo
+  code?: string | undefined
+}>()
 const CMD_CALLBACK_MAP = {
   LIVE_OPEN_PLATFORM_DM: onDanmaku,
   LIVE_OPEN_PLATFORM_SEND_GIFT: onGift,
@@ -166,11 +165,6 @@ function syncCardStates(users: OpenLiveLotteryUserInfo[], options: { reset?: boo
   cardStates.value = nextStates
 }
 
-const props = defineProps<{
-  roomInfo?: OpenLiveInfo
-  code?: string | undefined
-}>()
-
 const refinedCode = computed(() => {
   if (props.code) {
     return props.code
@@ -180,7 +174,7 @@ const refinedCode = computed(() => {
 
 async function getUsers() {
   try {
-    const data = await QueryGetAPI<UpdateLiveLotteryUsersModel>(LOTTERY_API_URL + 'live/get-users', {
+    const data = await QueryGetAPI<UpdateLiveLotteryUsersModel>(`${LOTTERY_API_URL}live/get-users`, {
       code: props.code,
     })
     if (data.code == 200) {
@@ -190,7 +184,7 @@ async function getUsers() {
   return null
 }
 function updateUsers() {
-  QueryPostAPI(LOTTERY_API_URL + 'live/update-users', {
+  QueryPostAPI(`${LOTTERY_API_URL}live/update-users`, {
     code: props.code,
     users: originUsers.value,
     resultUsers: resultUsers.value,
@@ -200,11 +194,11 @@ function updateUsers() {
   })
 }
 function addUser(user: OpenLiveLotteryUserInfo, danmu?: any) {
-  if (originUsers.value.find((u) => u.openId == user.openId) || (!isStartLottery.value && danmu)) {
+  if (originUsers.value.find(u => u.openId == user.openId) || (!isStartLottery.value && danmu)) {
     return
   }
   if ((danmu && isUserValid(user, danmu)) || !danmu) {
-    if (!originUsers.value.find((u) => u.openId == user.openId)) {
+    if (!originUsers.value.find(u => u.openId == user.openId)) {
       originUsers.value.push(user)
       currentUsers.value.push(user)
       ensureCardState(user.openId)
@@ -223,10 +217,10 @@ function addManualUser() {
     message.error('请输入用户名')
     return
   }
-  
+
   const newUser: OpenLiveLotteryUserInfo = {
     uId: Date.now(),
-    openId: 'manual_' + Date.now(),
+    openId: `manual_${Date.now()}`,
     name: manualUserForm.value.name,
     avatar: manualUserForm.value.avatar,
     fans_medal_level: manualUserForm.value.fans_medal_level,
@@ -234,10 +228,10 @@ function addManualUser() {
     fans_medal_wearing_status: manualUserForm.value.fans_medal_level > 0,
     guard_level: manualUserForm.value.guard_level,
   }
-  
+
   addUser(newUser)
   message.success(`已添加用户: ${newUser.name}`)
-  
+
   // 重置表单
   manualUserForm.value = {
     name: '',
@@ -283,7 +277,7 @@ function startLottery() {
     lotteryProgress.value = 0
     currentLotteryStep.value = 0
     eliminatedUsers.value = []
-    
+
     try {
       if (originUsers.value.length < lotteryOption.value.resultCount) {
         message.warning('符合条件的抽奖人数达不到抽选人数')
@@ -326,18 +320,18 @@ function startSingleLottery() {
     onFinishLottery()
     return
   }
-  
+
   function removeSingleUser() {
     if (currentUsers.value.length > lotteryOption.value.resultCount) {
       const randomIndex = getRandomInt(currentUsers.value.length)
       const eliminatedUser = currentUsers.value.splice(randomIndex, 1)[0]
       eliminatedUsers.value.push(eliminatedUser)
-      
+
       ensureCardState(eliminatedUser.openId).eliminated = true
       lotteryProgress.value = ((totalSteps - (currentUsers.value.length - lotteryOption.value.resultCount)) / totalSteps) * 100
-      
+
       console.log(`[${currentUsers.value.length}] 移除 ${eliminatedUser.name}`)
-      
+
       setTimeout(() => {
         removeSingleUser()
       }, lotteryOption.value.animationSpeed / 2)
@@ -362,7 +356,7 @@ function startHalfLottery() {
   } else {
     const half = Math.floor(currentUsers.value.length / 2)
     console.log(`[OPEN-LIVE-Lottery] 人数减半至${half}人`)
-    message.success('人数减半至 ' + half + ' 人')
+    message.success(`人数减半至 ${half} 人`)
     while (currentUsers.value.length > half) {
       const randomIndex = getRandomInt(currentUsers.value.length)
       const eliminatedUser = currentUsers.value.splice(randomIndex, 1)[0]
@@ -376,16 +370,16 @@ function startHalfLottery() {
 // 翻牌模式
 function startFlipLottery() {
   console.log('开始翻牌模式')
-  
+
   // 预先随机选择获奖者
   const shuffledUsers = [...currentUsers.value].sort(() => Math.random() - 0.5)
   const winners = shuffledUsers.slice(0, Math.min(lotteryOption.value.resultCount, currentUsers.value.length))
-  
+
   syncCardStates(currentUsers.value, { reset: true })
   winners.forEach((winner) => {
     ensureCardState(winner.openId).isWinner = true
   })
-  
+
   message.info('点击用户卡片进行翻牌抽取！')
   // 开启翻牌可点击
   flipEnabled.value = true
@@ -405,14 +399,14 @@ function startWheelLottery() {
   }
   wheelSpinning.value = true
   wheelRotation.value = 0
-  
+
   // 随机转动角度
   const spins = 3 + Math.random() * 3 // 3-6圈
   const finalAngle = Math.random() * 360
   const totalRotation = spins * 360 + finalAngle
-  
+
   wheelRotation.value = totalRotation
-  
+
   setTimeout(() => {
     wheelSpinning.value = false
     // 根据最终角度选择获奖者
@@ -421,7 +415,7 @@ function startWheelLottery() {
     const pointerAngle = 90
     const preAngle = (pointerAngle - (finalAngle % 360) + 360) % 360
     const winnerIndex = Math.floor(preAngle / anglePerUser) % currentUsers.value.length
-    
+
     const winner = currentUsers.value[winnerIndex]
     resultUsers.value = [winner]
     // 不再改变 currentUsers，让转盘保持原样
@@ -433,24 +427,24 @@ function startWheelLottery() {
 function startCardsLottery() {
   console.log('开始抽卡模式')
   message.info('正在随机选择获奖卡片...')
-  
+
   // 随机选择获奖者
   const shuffledUsers = [...currentUsers.value].sort(() => Math.random() - 0.5)
   const winners = shuffledUsers.slice(0, Math.min(lotteryOption.value.resultCount, currentUsers.value.length))
-  
+
   // 设置获奖者标记
   syncCardStates(currentUsers.value, { reset: true })
   winners.forEach((user) => {
     ensureCardState(user.openId).isWinner = true
   })
-  
+
   // 延迟显示结果
   setTimeout(() => {
     // 翻开所有卡片
-    currentUsers.value.forEach(user => {
+    currentUsers.value.forEach((user) => {
       ensureCardState(user.openId).flipped = true
     })
-    
+
     setTimeout(() => {
       resultUsers.value = winners
       currentUsers.value = winners
@@ -465,20 +459,20 @@ function startEliminationLottery() {
   const ratio = currentUsers.value.length / lotteryOption.value.resultCount
   const totalRounds = ratio > 1 ? Math.ceil(Math.log2(ratio)) : 1
   currentLotteryStep.value = 1
-  
+
   function nextRound() {
     if (currentUsers.value.length <= lotteryOption.value.resultCount) {
       onFinishLottery()
       return
     }
-    
+
     const targetCount = Math.max(
       lotteryOption.value.resultCount,
-      Math.floor(currentUsers.value.length / 2)
+      Math.floor(currentUsers.value.length / 2),
     )
-    
+
     message.info(`第 ${currentLotteryStep.value} 轮淘汰赛，目标人数: ${targetCount}`)
-    
+
     // 随机淘汰到目标人数
     while (currentUsers.value.length > targetCount) {
       const randomIndex = getRandomInt(currentUsers.value.length)
@@ -486,10 +480,10 @@ function startEliminationLottery() {
       eliminatedUsers.value.push(eliminatedUser)
       cardStates.value[eliminatedUser.openId].eliminated = true
     }
-    
+
     lotteryProgress.value = ((totalRounds - Math.ceil(Math.log2(currentUsers.value.length / lotteryOption.value.resultCount))) / totalRounds) * 100
     currentLotteryStep.value++
-    
+
     if (currentUsers.value.length > lotteryOption.value.resultCount) {
       setTimeout(() => {
         nextRound()
@@ -498,7 +492,7 @@ function startEliminationLottery() {
       onFinishLottery()
     }
   }
-  
+
   nextRound()
 }
 function getRandomInt(max: number) {
@@ -514,17 +508,16 @@ function onFinishLottery() {
   flipEnabled.value = false
   notification.create({
     title: '抽奖完成',
-    description: '共' + resultUsers.value?.length + '人',
+    description: `共${resultUsers.value?.length}人`,
     duration: 3000,
     content: () =>
       h(NSpace, { vertical: true }, () =>
-        resultUsers.value?.map((user) =>
+        resultUsers.value?.map(user =>
           h(NSpace, null, () => [
-            h(NAvatar, { src: user.avatar + '@32w_32h', imgProps: { referrerpolicy: 'no-referrer' } }),
+            h(NAvatar, { src: `${user.avatar}@32w_32h`, imgProps: { referrerpolicy: 'no-referrer' } }),
             h('span', user.name),
           ]),
-        ),
-      ),
+        )),
     meta: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
     onAfterLeave: () => {
       message.success('已保存至历史')
@@ -539,16 +532,16 @@ function onFinishLottery() {
 // 翻牌点击处理
 function flipCard(user: OpenLiveLotteryUserInfo) {
   if (lotteryOption.value.lotteryType !== 'flip' || isLottering.value || !flipEnabled.value) return
-  
+
   const state = ensureCardState(user.openId)
   // 再次点击可翻回去
   state.flipped = !state.flipped
-  
+
   // 检查是否已经选够了获奖者
-  const flippedWinners = currentUsers.value.filter(u => 
-    ensureCardState(u.openId).flipped && ensureCardState(u.openId).isWinner
+  const flippedWinners = currentUsers.value.filter(u =>
+    ensureCardState(u.openId).flipped && ensureCardState(u.openId).isWinner,
   )
-  
+
   if (flippedWinners.length >= lotteryOption.value.resultCount) {
     // 已满足中奖人数，延迟展示并完成
     if (flipFinishTimer) {
@@ -556,7 +549,7 @@ function flipCard(user: OpenLiveLotteryUserInfo) {
       flipFinishTimer = null
     }
     flipFinishTimer = setTimeout(() => {
-      currentUsers.value.forEach(u => {
+      currentUsers.value.forEach((u) => {
         const st = ensureCardState(u.openId)
         if (!st.flipped) st.flipped = true
       })
@@ -622,7 +615,7 @@ function shuffleFlipCards() {
   currentUsers.value = [...currentUsers.value].sort(() => Math.random() - 0.5)
   // 重置翻牌状态，但保留 isWinner 标记
   const next: Record<string, CardState> = {}
-  currentUsers.value.forEach(u => {
+  currentUsers.value.forEach((u) => {
     const st = ensureCardState(u.openId)
     next[u.openId] = { flipped: false, isWinner: st?.isWinner ?? false, eliminated: false }
   })
@@ -635,8 +628,8 @@ function shuffleFlipCards() {
   message.success('已洗牌')
 }
 function removeUser(user: OpenLiveLotteryUserInfo) {
-  currentUsers.value = currentUsers.value.filter((u) => u.openId != user.openId)
-  originUsers.value = originUsers.value.filter((u) => u.openId != user.openId)
+  currentUsers.value = currentUsers.value.filter(u => u.openId != user.openId)
+  originUsers.value = originUsers.value.filter(u => u.openId != user.openId)
   syncCardStates(currentUsers.value)
   updateUsers()
 }
@@ -646,12 +639,12 @@ function getAvatarUrl(avatar: string) {
   if (!avatar || avatar === 'https://i2.hdslb.com/bfs/face/member/noface.jpg') {
     return 'https://i2.hdslb.com/bfs/face/member/noface.jpg'
   }
-  
+
   // 确保头像URL有正确的尺寸参数
   if (avatar.includes('@')) {
     return avatar.replace(/@\w+/, '@96w_96h')
   } else {
-    return avatar + '@96w_96h'
+    return `${avatar}@96w_96h`
   }
 }
 
@@ -710,9 +703,9 @@ onMounted(async () => {
     const users = (await getUsers())?.users ?? []
     originUsers.value = users
     currentUsers.value = JSON.parse(JSON.stringify(users))
-    console.log('[OPEN-LIVE-Lottery] 从历史记录中加载 ' + users.length + ' 位用户')
+    console.log(`[OPEN-LIVE-Lottery] 从历史记录中加载 ${users.length} 位用户`)
     if (users.length > 0) {
-      message.info('从历史记录中加载 ' + users.length + ' 位用户')
+      message.info(`从历史记录中加载 ${users.length} 位用户`)
     }
   }
   client?.on('danmaku', onDanmaku)
@@ -781,8 +774,8 @@ onUnmounted(() => {
           <NButton
             type="primary"
             size="small"
-            @click="showAddUserModal = true"
             :disabled="isLottering"
+            @click="showAddUserModal = true"
           >
             <template #icon>
               <NIcon :component="PersonAdd24Filled" />
@@ -1058,11 +1051,11 @@ onUnmounted(() => {
             淘汰赛第 {{ currentLotteryStep }} 轮
           </template>
         </NDivider>
-        
+
         <!-- 进度条 -->
         <div v-if="isLottering || lotteryProgress > 0" style="margin: 10px 0">
-          <NProgress 
-            :percentage="lotteryProgress" 
+          <NProgress
+            :percentage="lotteryProgress"
             :show-indicator="true"
             type="line"
             :status="isLottering ? 'info' : 'success'"
@@ -1106,31 +1099,33 @@ onUnmounted(() => {
         <!-- 转轮模式特殊显示 -->
         <div v-if="lotteryOption.lotteryType === 'wheel' && currentUsers.length >= 2" class="wheel-container">
           <div class="wheel-area">
-            <div 
+            <div
               class="lottery-wheel"
               :style="{
                 transform: `rotate(${wheelRotation}deg)`,
-                transition: wheelSpinning ? 'transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94)' : 'none'
+                transition: wheelSpinning ? 'transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94)' : 'none',
               }"
             >
-              <div 
+              <div
                 v-for="(user, index) in currentUsers"
                 :key="user.openId"
                 class="wheel-slice"
                 :style="{
                   '--slice-angle': `${360 / currentUsers.length}deg`,
                   '--slice-offset': `${index * (360 / currentUsers.length)}deg`,
-                  '--slice-bg': `hsl(${index * (360 / currentUsers.length)}, 70%, 80%)`
+                  '--slice-bg': `hsl(${index * (360 / currentUsers.length)}, 70%, 80%)`,
                 }"
               >
-                <div class="wheel-user-name">{{ user.name }}</div>
+                <div class="wheel-user-name">
+                  {{ user.name }}
+                </div>
               </div>
             </div>
-            <div class="wheel-pointer"></div>
+            <div class="wheel-pointer" />
           </div>
-          <NButton 
+          <NButton
             v-if="!wheelSpinning && !isLottering"
-            type="primary" 
+            type="primary"
             size="large"
             style="margin-top: 20px"
             @click="startWheelLottery"
@@ -1153,14 +1148,13 @@ onUnmounted(() => {
           <div
             v-for="item in currentUsers"
             :key="item.openId"
-            :class="[
-              'lottery-card-wrapper',
+            class="lottery-card-wrapper" :class="[
               {
                 'flip-mode': lotteryOption.lotteryType === 'flip' && flipEnabled,
                 'flipped': (lotteryOption.lotteryType !== 'flip' && lotteryOption.lotteryType !== 'cards') || cardStates[item.openId]?.flipped,
                 'eliminated': cardStates[item.openId]?.eliminated,
-                'winner': cardStates[item.openId]?.isWinner && cardStates[item.openId]?.flipped
-              }
+                'winner': cardStates[item.openId]?.isWinner && cardStates[item.openId]?.flipped,
+              },
             ]"
             @click="onCardClick(item)"
           >
@@ -1171,36 +1165,40 @@ onUnmounted(() => {
                   <div class="mystery-icon">
                     <NIcon :component="Sparkle24Filled" size="40" />
                   </div>
-                  <div class="mystery-text">点击翻开</div>
-                  <div class="card-pattern"></div>
+                  <div class="mystery-text">
+                    点击翻开
+                  </div>
+                  <div class="card-pattern" />
                 </div>
               </NCard>
-              
+
               <!-- 卡片正面 -->
-              <NCard 
-                class="card-face card-front" 
-                :class="{'winner-card': cardStates[item.openId]?.isWinner}"
+              <NCard
+                class="card-face card-front"
+                :class="{ 'winner-card': cardStates[item.openId]?.isWinner }"
                 :bordered="cardStates[item.openId]?.isWinner"
                 content-style="padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center;"
               >
                 <div class="user-card-content">
                   <div class="user-avatar-wrapper">
-                    <NAvatar 
-                      :src="getAvatarUrl(item.avatar)" 
+                    <NAvatar
+                      :src="getAvatarUrl(item.avatar)"
                       :size="80"
                       circle
-                      @error="handleImageError"
                       :img-props="{
-                        referrerpolicy: 'no-referrer'
+                        referrerpolicy: 'no-referrer',
                       }"
+                      @error="handleImageError"
                     />
                     <div v-if="cardStates[item.openId]?.isWinner" class="winner-badge">
                       <NIcon :component="Sparkle24Filled" size="16" />
                     </div>
                   </div>
-                  
+
                   <div class="user-info">
-                    <div class="user-name">{{ item.name }}</div>
+                    <div class="user-name">
+                      {{ item.name }}
+                    </div>
                     <div class="user-badges">
                       <NTag v-if="item.fans_medal_wearing_status" :bordered="false" size="small" type="info">
                         <template #icon>
@@ -1208,15 +1206,19 @@ onUnmounted(() => {
                         </template>
                         {{ item.fans_medal_name }}
                       </NTag>
-                      <NTag v-else :bordered="false" size="small">无粉丝牌</NTag>
+                      <NTag v-else :bordered="false" size="small">
+                        无粉丝牌
+                      </NTag>
                       <NTag v-if="item.guard_level > 0" :bordered="false" size="small" type="warning">
                         舰长{{ item.guard_level }}
                       </NTag>
                     </div>
                   </div>
-                  
+
                   <div v-if="cardStates[item.openId]?.isWinner && cardStates[item.openId]?.flipped" class="winner-celebration">
-                    <div class="winner-text">🎉 中奖了！</div>
+                    <div class="winner-text">
+                      🎉 中奖了！
+                    </div>
                   </div>
 
                   <NButton
@@ -1289,7 +1291,7 @@ onUnmounted(() => {
                 <NAvatar
                   round
                   lazy
-                  :src="user.avatar + '@64w_64h'"
+                  :src="`${user.avatar}@64w_64h`"
                   :img-props="{ referrerpolicy: 'no-referrer' }"
                 />
                 {{ user.name }}
@@ -1323,7 +1325,7 @@ onUnmounted(() => {
       <LiveLotteryOBS :code="code" />
     </div>
     <br>
-    <NInput :value="`${CURRENT_HOST}obs/live-lottery?code=` + code" />
+    <NInput :value="`${CURRENT_HOST}obs/live-lottery?code=${code}`" />
     <NDivider />
     <NCollapse>
       <NCollapseItem title="使用说明">
@@ -1338,7 +1340,7 @@ onUnmounted(() => {
 
     <NDivider />
   </NModal>
-  
+
   <!-- 手动添加用户模态框 -->
   <NModal
     v-model:show="showAddUserModal"
@@ -1386,7 +1388,7 @@ onUnmounted(() => {
         />
       </NFormItem>
     </NForm>
-    
+
     <template #footer>
       <NSpace justify="end">
         <NButton @click="showAddUserModal = false">
@@ -1508,7 +1510,7 @@ onUnmounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: 
+  background:
     radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 2px, transparent 2px),
     radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 2px, transparent 2px),
     radial-gradient(circle at 40% 60%, rgba(255,255,255,0.1) 2px, transparent 2px);
@@ -1606,7 +1608,7 @@ onUnmounted(() => {
 
 /* 转轮样式 */
 .wheel-container {
-  text-align: center; 
+  text-align: center;
   margin: 20px 0;
   display: flex;
   flex-direction: column;
@@ -1699,7 +1701,7 @@ onUnmounted(() => {
     grid-template-columns: 1fr;
     gap: 10px;
   }
-  
+
   .lottery-card-wrapper {
     height: 200px;
   }
diff --git a/src/views/open_live/OpenQueue.vue b/src/views/open_live/OpenQueue.vue
index 0fe69f5..6eec91a 100644
--- a/src/views/open_live/OpenQueue.vue
+++ b/src/views/open_live/OpenQueue.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
-import { AddBiliBlackList, SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account';
-import {
+import type {
+  DataTableColumns,
+} from 'naive-ui'
+import type { CSSProperties, VNodeChild } from 'vue'
+import type {
   DanmakuUserInfo,
-  EventDataTypes,
   EventModel,
-  FunctionTypes,
-  KeywordMatchType,
-  OpenLiveInfo, // 保留 props 类型定义
-  QueueFrom,
-  QueueGiftFilterType,
-  QueueSortType,
-  QueueStatus,
+  OpenLiveInfo,
   ResponseQueueModel,
   Setting_Queue,
-} from '@/api/api-models';
-import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query';
-import { CURRENT_HOST, QUEUE_API_URL } from '@/data/constants'; // CURRENT_HOST 用于 OBS Modal
-import { useDanmakuClient } from '@/store/useDanmakuClient';
+} from '@/api/api-models'
 import {
   Checkmark12Regular,
   ClipboardTextLtr24Filled,
@@ -25,13 +18,12 @@ import {
   Info24Filled,
   PeopleQueue24Filled,
   PresenceBlocked16Regular,
-} from '@vicons/fluent';
-import { ReloadCircleSharp } from '@vicons/ionicons5';
-import { useStorage } from '@vueuse/core';
-import { isSameDay } from 'date-fns';
-import { List } from 'linqts';
+} from '@vicons/fluent'
+import { ReloadCircleSharp } from '@vicons/ionicons5'
+import { useStorage } from '@vueuse/core'
+import { isSameDay } from 'date-fns'
+import { List } from 'linqts'
 import {
-  DataTableColumns,
   NAlert,
   NButton,
   NCard,
@@ -66,11 +58,31 @@ import {
   NUl,
   useMessage,
   useNotification,
-} from 'naive-ui';
-import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref, VNodeChild, CSSProperties } from 'vue';
+} from 'naive-ui'
+import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
+import { AddBiliBlackList, SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account'
+import {
+  EventDataTypes,
+  FunctionTypes,
+  KeywordMatchType, // 保留 props 类型定义
+  QueueFrom,
+  QueueGiftFilterType,
+  QueueSortType,
+  QueueStatus,
+} from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
+import { CURRENT_HOST, QUEUE_API_URL } from '@/data/constants' // CURRENT_HOST 用于 OBS Modal
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import { copyToClipboard } from '@/Utils'
 // import { useRoute } from 'vue-router' // 未使用
-import QueueOBS from '../obs/QueueOBS.vue';
-import { copyToClipboard } from '@/Utils';
+import QueueOBS from '../obs/QueueOBS.vue'
+
+// Props 定义 (虽然未在逻辑中直接使用，但可能由父组件传入或用于类型检查)
+const props = defineProps<{
+  roomInfo?: OpenLiveInfo
+  code?: string | undefined
+  isOpenLive?: boolean
+}>()
 
 // 默认队列设置
 const defaultSettings = {
@@ -103,7 +115,7 @@ const defaultSettings = {
   showPayment: true,
   sendGiftDirectJoin: true,
   sendGiftIgnoreLimit: false,
-} as Setting_Queue;
+} as Setting_Queue
 
 // 队列状态映射
 const STATUS_MAP = {
@@ -111,134 +123,127 @@ const STATUS_MAP = {
   [QueueStatus.Progressing]: '处理中',
   [QueueStatus.Finish]: '已完成',
   [QueueStatus.Cancel]: '已取消',
-};
+}
 
 // const route = useRoute() // 未使用
-const accountInfo = useAccount();
-const message = useMessage();
-const notice = useNotification();
-const client = await useDanmakuClient().initOpenlive(); // 初始化弹幕客户端
+const accountInfo = useAccount()
+const message = useMessage()
+const notice = useNotification()
+const client = await useDanmakuClient().initOpenlive() // 初始化弹幕客户端
 
-const isWarnMessageAutoClose = useStorage('Queue.Settings.WarnMessageAutoClose', false); // 警告消息是否自动关闭
-const isReverse = useStorage('Queue.Settings.Reverse', false); // 本地存储的倒序设置 (未登录时使用)
+const isWarnMessageAutoClose = useStorage('Queue.Settings.WarnMessageAutoClose', false) // 警告消息是否自动关闭
+const isReverse = useStorage('Queue.Settings.Reverse', false) // 本地存储的倒序设置 (未登录时使用)
 // const volumn = useStorage('Settings.Volumn', 0.5) // 未使用
 
-const isLoading = ref(false); // 加载状态
-const showOBSModal = ref(false); // OBS 组件模态框显示状态
-const obsScrollSpeed = ref(1.0); // OBS 组件滚动速度
+const isLoading = ref(false) // 加载状态
+const showOBSModal = ref(false) // OBS 组件模态框显示状态
+const obsScrollSpeed = ref(1.0) // OBS 组件滚动速度
 
-const filterName = ref(''); // 历史记录筛选用户名
-const filterNameContains = ref(false); // 历史记录筛选是否包含
+const filterName = ref('') // 历史记录筛选用户名
+const filterNameContains = ref(false) // 历史记录筛选是否包含
 
 // 队列设置 (登录后使用账户设置, 否则使用默认设置)
 const settings = computed({
   get: () => {
     if (accountInfo.value.id) {
-      return accountInfo.value.settings.queue;
+      return accountInfo.value.settings.queue
     }
-    return defaultSettings;
+    return defaultSettings
   },
   set: (value) => {
     if (accountInfo.value.id) {
-      accountInfo.value.settings.queue = value;
+      accountInfo.value.settings.queue = value
     }
   },
-});
+})
 
-// Props 定义 (虽然未在逻辑中直接使用，但可能由父组件传入或用于类型检查)
-const props = defineProps<{
-  roomInfo?: OpenLiveInfo;
-  code?: string | undefined;
-  isOpenLive?: boolean;
-}>();
-
-const localQueues = useStorage('Local.Queue', [] as ResponseQueueModel[]); // 本地存储的队列 (未登录时使用)
-const originQueue = ref<ResponseQueueModel[]>([]); // 从 API 获取或本地存储的原始队列数据
+const localQueues = useStorage('Local.Queue', [] as ResponseQueueModel[]) // 本地存储的队列 (未登录时使用)
+const originQueue = ref<ResponseQueueModel[]>([]) // 从 API 获取或本地存储的原始队列数据
 const queue = computed(() => { // 当前显示的活动队列 (过滤、排序后)
   let list = new List(accountInfo.value ? originQueue.value : localQueues.value)
     .Where( // 按用户名筛选
-      (q) =>
-        !filterName.value ||
-        (filterNameContains.value
+      q =>
+        !filterName.value
+        || (filterNameContains.value
           ? q?.user?.name.toLowerCase().includes(filterName.value.toLowerCase()) == true
           : q?.user?.name.toLowerCase() == filterName.value.toLowerCase()),
     )
-    .Where((q) => (q?.status ?? QueueStatus.Cancel) < QueueStatus.Finish); // 仅显示未完成或取消的
+    .Where(q => (q?.status ?? QueueStatus.Cancel) < QueueStatus.Finish) // 仅显示未完成或取消的
 
   // 根据设置进行排序
   switch (settings.value.sortType) {
     case QueueSortType.TimeFirst: { // 时间优先
-      list = list.OrderBy((q) => q.createAt);
-      break;
+      list = list.OrderBy(q => q.createAt)
+      break
     }
     case QueueSortType.GuardFirst: { // 舰长优先 (总督 > 提督 > 舰长 > 普通)
       list = list
-        .OrderBy((q) => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
-        .ThenBy((q) => q.createAt);
-      break;
+        .OrderBy(q => (q.user?.guard_level == 0 || q.user?.guard_level == null ? 4 : q.user.guard_level))
+        .ThenBy(q => q.createAt)
+      break
     }
     case QueueSortType.PaymentFist: { // 付费优先
-      list = list.OrderByDescending((q) => q.giftPrice).ThenBy((q) => q.createAt);
-      break;
+      list = list.OrderByDescending(q => q.giftPrice).ThenBy(q => q.createAt)
+      break
     }
     case QueueSortType.FansMedalFirst: { // 粉丝牌优先 (佩戴 > 未佩戴, 等级高 > 等级低)
       list = list
-        .OrderByDescending((q) => (q.user?.fans_medal_wearing_status ? 1 : 0))
-        .ThenByDescending((q) => q.user?.fans_medal_level ?? 0)
-        .ThenBy((q) => q.createAt);
-      break;
+        .OrderByDescending(q => (q.user?.fans_medal_wearing_status ? 1 : 0))
+        .ThenByDescending(q => q.user?.fans_medal_level ?? 0)
+        .ThenBy(q => q.createAt)
+      break
     }
   }
   // 处理倒序
   if (configCanEdit.value ? settings.value.isReverse : isReverse.value) {
-    list = list.Reverse();
+    list = list.Reverse()
   }
   // 将处理中的项置顶
-  list = list.OrderByDescending((q) => (q.status == QueueStatus.Progressing ? 1 : 0));
-  return list.ToArray();
-});
+  list = list.OrderByDescending(q => (q.status == QueueStatus.Progressing ? 1 : 0))
+  return list.ToArray()
+})
 const historySongs = computed(() => { // 历史队列 (已完成或取消)
   return (accountInfo.value ? originQueue.value : localQueues.value)
     .filter((song) => {
-      return song.status == QueueStatus.Finish || song.status == QueueStatus.Cancel;
+      return song.status == QueueStatus.Finish || song.status == QueueStatus.Cancel
     })
-    .sort((a, b) => (b.finishAt ?? b.createAt) - (a.finishAt ?? a.createAt)); // 按完成/创建时间降序
-});
+    .sort((a, b) => (b.finishAt ?? b.createAt) - (a.finishAt ?? a.createAt)) // 按完成/创建时间降序
+})
 
-const newQueueName = ref(''); // 手动添加的用户名
+const newQueueName = ref('') // 手动添加的用户名
 
-const defaultKeyword = useStorage('Settings.Queue.DefaultKeyword', '排队'); // 本地存储的默认关键词
+const defaultKeyword = useStorage('Settings.Queue.DefaultKeyword', '排队') // 本地存储的默认关键词
 const configCanEdit = computed(() => { // 配置是否可编辑 (是否已登录)
-  return accountInfo.value != null && accountInfo.value != undefined;
-});
+  return accountInfo.value != null && accountInfo.value != undefined
+})
 
-const table = ref(); // NDataTable 引用
+const table = ref() // NDataTable 引用
 
 // 获取所有队列数据
 async function getAll() {
   if (accountInfo.value.id) {
     try {
-      isLoading.value = true;
-      const data = await QueryGetAPI<ResponseQueueModel[]>(QUEUE_API_URL + 'get-all', {
+      isLoading.value = true
+      const data = await QueryGetAPI<ResponseQueueModel[]>(`${QUEUE_API_URL}get-all`, {
         id: accountInfo.value.id,
-      });
+      })
       if (data.code == 200) {
-        console.log('[OPEN-LIVE-Queue] 已获取所有数据');
-        return data.data ?? []; // 确保返回数组
+        console.log('[OPEN-LIVE-Queue] 已获取所有数据')
+        return data.data ?? [] // 确保返回数组
       } else {
-        message.error('无法获取队列数据: ' + data.message);
-        return [];
+        message.error(`无法获取队列数据: ${data.message}`)
+        return []
       }
     } catch (err: any) {
-      message.error('获取队列数据失败: ' + (err.message || err));
-      console.error('[OPEN-LIVE-Queue] 获取数据失败:', err);
-      return [];
+      message.error(`获取队列数据失败: ${err.message || err}`)
+      console.error('[OPEN-LIVE-Queue] 获取数据失败:', err)
+      return []
     } finally {
-      isLoading.value = false;
+      isLoading.value = false
     }
   } else {
     // 未登录时返回本地数据
-    return localQueues.value;
+    return localQueues.value
   }
 }
 
@@ -246,52 +251,52 @@ async function getAll() {
 async function add(danmaku: EventModel) {
   // 检查消息是否符合加入条件
   if (!checkMessage(danmaku)) {
-    return;
+    return
   }
-  console.log(`[OPEN-LIVE-QUEUE] 收到 [${danmaku.uname}] 的排队请求`);
+  console.log(`[OPEN-LIVE-QUEUE] 收到 [${danmaku.uname}] 的排队请求`)
   // 检查是否仅直播时允许加入
   if (settings.value.enableOnStreaming && accountInfo.value?.streamerInfo?.isStreaming != true) {
-    message.info('当前未在直播中, 无法添加排队请求. 或者关闭设置中的仅允许直播时加入');
-    return;
+    message.info('当前未在直播中, 无法添加排队请求. 或者关闭设置中的仅允许直播时加入')
+    return
   }
 
   if (accountInfo.value.id) { // 已登录，调用 API
     // 检查功能是否启用
     if (!accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.Queue)) {
-      return;
+      return
     }
     try {
-      const data = await QueryPostAPI<ResponseQueueModel>(QUEUE_API_URL + 'try-add', danmaku);
+      const data = await QueryPostAPI<ResponseQueueModel>(`${QUEUE_API_URL}try-add`, danmaku)
       if (data.code == 200) {
         if (data.message != 'EventFetcher') { // 避免重复处理 EventFetcher 的消息
-          const existingIndex = originQueue.value.findIndex((q) => q.id == data.data.id);
+          const existingIndex = originQueue.value.findIndex(q => q.id == data.data.id)
           if (existingIndex > -1) { // 用户已在队列中 (通常是送礼增加金额)
-            const oldPrice = originQueue.value[existingIndex]?.giftPrice ?? 0;
-            const newPrice = data.data?.giftPrice ?? 0;
+            const oldPrice = originQueue.value[existingIndex]?.giftPrice ?? 0
+            const newPrice = data.data?.giftPrice ?? 0
             if (newPrice > oldPrice) {
               message.info(
                 `${data.data.user?.name} 通过发送礼物再次付费: ¥ ${(newPrice - oldPrice).toFixed(1)}, 当前总计付费: ¥ ${newPrice.toFixed(1)}`,
-              );
+              )
             }
-            originQueue.value.splice(existingIndex, 1, data.data); // 替换现有条目
+            originQueue.value.splice(existingIndex, 1, data.data) // 替换现有条目
           } else { // 新用户加入
-            originQueue.value.push(data.data); // 添加到末尾 (排序由 computed 处理)
-            message.success(`[${danmaku.uname}] 添加至队列`);
+            originQueue.value.push(data.data) // 添加到末尾 (排序由 computed 处理)
+            message.success(`[${danmaku.uname}] 添加至队列`)
           }
         }
       } else { // 添加失败
-        const time = Date.now();
+        const time = Date.now()
         notice.warning({
-          title: danmaku.uname + ' 排队失败',
+          title: `${danmaku.uname} 排队失败`,
           description: data.message,
           duration: isWarnMessageAutoClose.value ? 3000 : 0,
-          meta: () => h(NTime, { type: 'relative', time: time, key: updateKey.value }), // 使用 updateKey 强制更新时间显示
-        });
-        console.log(`[OPEN-LIVE-QUEUE] [${danmaku.uname}] 排队失败: ${data.message}`);
+          meta: () => h(NTime, { type: 'relative', time, key: updateKey.value }), // 使用 updateKey 强制更新时间显示
+        })
+        console.log(`[OPEN-LIVE-QUEUE] [${danmaku.uname}] 排队失败: ${data.message}`)
       }
     } catch (err: any) {
-      message.error(`[${danmaku.uname}] 添加队列时出错: ${err.message || err}`);
-      console.error(`[OPEN-LIVE-QUEUE] 添加队列出错:`, err);
+      message.error(`[${danmaku.uname}] 添加队列时出错: ${err.message || err}`)
+      console.error(`[OPEN-LIVE-QUEUE] 添加队列出错:`, err)
     }
   } else { // 未登录，操作本地队列
     const songData = {
@@ -309,35 +314,35 @@ async function add(danmaku: EventModel) {
       } as DanmakuUserInfo,
       createAt: Date.now(),
       isInLocal: true,
-      id: localQueues.value.length == 0 ? 1 : new List(localQueues.value).Max((s) => s.id) + 1, // 本地 ID
-    } as ResponseQueueModel;
-    localQueues.value.unshift(songData); // 添加到本地队列开头
-    message.success(`[${danmaku.uname}] 添加至本地队列`);
+      id: localQueues.value.length == 0 ? 1 : new List(localQueues.value).Max(s => s.id) + 1, // 本地 ID
+    } as ResponseQueueModel
+    localQueues.value.unshift(songData) // 添加到本地队列开头
+    message.success(`[${danmaku.uname}] 添加至本地队列`)
   }
 }
 
 // 手动添加用户至队列
 async function addManual() {
   if (!newQueueName.value) {
-    message.error('请输入用户名');
-    return;
+    message.error('请输入用户名')
+    return
   }
   if (accountInfo.value.id) { // 已登录，调用 API
     try {
-      const data = await QueryPostAPIWithParams<ResponseQueueModel>(QUEUE_API_URL + 'add', {
+      const data = await QueryPostAPIWithParams<ResponseQueueModel>(`${QUEUE_API_URL}add`, {
         name: newQueueName.value,
-      });
+      })
       if (data.code == 200) {
-        message.success(`已手动添加用户至队列: ${data.data.user?.name}`);
-        originQueue.value.unshift(data.data); // 添加到原始队列开头
-        newQueueName.value = '';
-        console.log(`[OPEN-LIVE-QUEUE] 已手动添加用户至队列: ${data.data.user?.name}`);
+        message.success(`已手动添加用户至队列: ${data.data.user?.name}`)
+        originQueue.value.unshift(data.data) // 添加到原始队列开头
+        newQueueName.value = ''
+        console.log(`[OPEN-LIVE-QUEUE] 已手动添加用户至队列: ${data.data.user?.name}`)
       } else {
-        message.error(`手动添加失败: ${data.message}`);
+        message.error(`手动添加失败: ${data.message}`)
       }
     } catch (err: any) {
-      message.error(`手动添加时出错: ${err.message || err}`);
-      console.error(`[OPEN-LIVE-QUEUE] 手动添加出错:`, err);
+      message.error(`手动添加时出错: ${err.message || err}`)
+      console.error(`[OPEN-LIVE-QUEUE] 手动添加出错:`, err)
     }
   } else { // 未登录，操作本地队列
     const songData = {
@@ -347,138 +352,138 @@ async function addManual() {
       user: { name: newQueueName.value } as DanmakuUserInfo,
       createAt: Date.now(),
       isInLocal: true,
-      id: localQueues.value.length == 0 ? 1 : new List(localQueues.value).Max((s) => s.id) + 1,
-    } as ResponseQueueModel;
-    localQueues.value.unshift(songData);
-    message.success(`已手动添加用户至队列: ${newQueueName.value}`);
-    newQueueName.value = '';
+      id: localQueues.value.length == 0 ? 1 : new List(localQueues.value).Max(s => s.id) + 1,
+    } as ResponseQueueModel
+    localQueues.value.unshift(songData)
+    message.success(`已手动添加用户至队列: ${newQueueName.value}`)
+    newQueueName.value = ''
   }
 }
 
 // 更新队列状态
 async function updateStatus(queueData: ResponseQueueModel, status: QueueStatus) {
   if (!configCanEdit.value) { // 未登录，直接修改本地状态
-    const localItem = localQueues.value.find(q => q.id === queueData.id);
+    const localItem = localQueues.value.find(q => q.id === queueData.id)
     if (localItem) {
-      localItem.status = status;
+      localItem.status = status
       if (status > QueueStatus.Progressing) {
-        localItem.finishAt = Date.now();
+        localItem.finishAt = Date.now()
       }
-      message.success(`已更新本地 [${queueData.user?.name}] 队列状态为: ${STATUS_MAP[status]}`);
+      message.success(`已更新本地 [${queueData.user?.name}] 队列状态为: ${STATUS_MAP[status]}`)
     }
-    return;
+    return
   }
   // 已登录，调用 API
-  isLoading.value = true;
+  isLoading.value = true
   try {
-    const data = await QueryGetAPI(QUEUE_API_URL + 'set-status', {
+    const data = await QueryGetAPI(`${QUEUE_API_URL}set-status`, {
       id: queueData.id,
-      status: status,
-    });
+      status,
+    })
     if (data.code == 200) {
-      console.log(`[OPEN-LIVE-QUEUE] 更新队列状态: ${queueData.user?.name} -> ${STATUS_MAP[status]}`);
+      console.log(`[OPEN-LIVE-QUEUE] 更新队列状态: ${queueData.user?.name} -> ${STATUS_MAP[status]}`)
       // 直接修改原始数据以触发响应式更新
-      const itemInOrigin = originQueue.value.find(q => q.id === queueData.id);
+      const itemInOrigin = originQueue.value.find(q => q.id === queueData.id)
       if (itemInOrigin) {
-        itemInOrigin.status = status;
+        itemInOrigin.status = status
         if (status > QueueStatus.Progressing) {
-          itemInOrigin.finishAt = Date.now();
+          itemInOrigin.finishAt = Date.now()
         }
       }
-      message.success(`已更新 [${queueData.user?.name}] 队列状态为: ${STATUS_MAP[status]}`);
+      message.success(`已更新 [${queueData.user?.name}] 队列状态为: ${STATUS_MAP[status]}`)
     } else {
-      console.log(`[OPEN-LIVE-QUEUE] 更新队列状态失败: ${data.message}`);
-      message.error(`更新队列状态失败: ${data.message}`);
+      console.log(`[OPEN-LIVE-QUEUE] 更新队列状态失败: ${data.message}`)
+      message.error(`更新队列状态失败: ${data.message}`)
     }
   } catch (err: any) {
-    message.error(`更新队列状态时出错: ${err.message || err}`);
-    console.error(`[OPEN-LIVE-QUEUE] 更新状态出错:`, err);
+    message.error(`更新队列状态时出错: ${err.message || err}`)
+    console.error(`[OPEN-LIVE-QUEUE] 更新状态出错:`, err)
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
 }
 
 // 弹幕事件处理
 function onGetDanmaku(danmaku: EventModel) {
-  add(danmaku);
+  add(danmaku)
 }
 // 礼物事件处理
 function onGetGift(danmaku: EventModel) {
-  add(danmaku);
+  add(danmaku)
 }
 
 // 检查消息是否符合加入队列的条件
 function checkMessage(eventData: EventModel): boolean {
   // 未登录时，如果用户已在本地队列，则不允许重复添加 (简单检查)
-  if (!configCanEdit.value && localQueues.value.some((q) => q.user?.uid == eventData.uid && q.status < QueueStatus.Finish)) {
-    console.log(`[OPEN-LIVE-QUEUE] 本地队列已存在用户 [${eventData.uname}]，跳过`);
-    return false;
+  if (!configCanEdit.value && localQueues.value.some(q => q.user?.uid == eventData.uid && q.status < QueueStatus.Finish)) {
+    console.log(`[OPEN-LIVE-QUEUE] 本地队列已存在用户 [${eventData.uname}]，跳过`)
+    return false
   }
 
   // 检查弹幕消息
   if (eventData.type === EventDataTypes.Message) {
-    if (!settings.value.keyword) return false; // 未设置关键词则不允许弹幕加入
+    if (!settings.value.keyword) return false // 未设置关键词则不允许弹幕加入
     if (!checkMatch(eventData.msg)) {
-      return false; // 弹幕内容不匹配关键词
+      return false // 弹幕内容不匹配关键词
     }
   }
   // 检查礼物消息
   else if (eventData.type === EventDataTypes.Gift) {
     // 如果不允许礼物加入，并且不允许通过送礼增加金额，则直接拒绝
     if (!settings.value.allowGift && !settings.value.allowIncreasePaymentBySendGift) {
-      return false;
+      return false
     }
     // 如果允许礼物加入，则进行详细检查
     if (settings.value.allowGift) {
-      const nameMatch = (settings.value.giftNames?.length ?? 0) === 0 || // 未设置礼物名要求
-        settings.value.giftNames?.some((n) => eventData.msg.toLowerCase() === n.toLowerCase()) == true; // 礼物名匹配
-      const priceMatch = !settings.value.minGiftPrice || eventData.price >= settings.value.minGiftPrice; // 价格匹配
+      const nameMatch = (settings.value.giftNames?.length ?? 0) === 0 // 未设置礼物名要求
+        || settings.value.giftNames?.some(n => eventData.msg.toLowerCase() === n.toLowerCase()) == true // 礼物名匹配
+      const priceMatch = !settings.value.minGiftPrice || eventData.price >= settings.value.minGiftPrice // 价格匹配
 
       if (settings.value.giftFilterType === QueueGiftFilterType.Or) { // 或逻辑：满足任一即可
-        if (!nameMatch && !priceMatch) return false; // 名称和价格都不满足
+        if (!nameMatch && !priceMatch) return false // 名称和价格都不满足
       } else { // 与逻辑：必须同时满足
-        if (!nameMatch || !priceMatch) return false; // 名称或价格不满足
+        if (!nameMatch || !priceMatch) return false // 名称或价格不满足
       }
       // 如果设置了送礼直接加入，则检查通过
-      if (settings.value.sendGiftDirectJoin) return true;
+      if (settings.value.sendGiftDirectJoin) return true
       // 如果未设置直接加入，则送礼本身不触发加入，需要额外发弹幕
-      else return false;
+      else return false
     }
     // 如果只允许通过送礼增加金额 (不允许直接通过礼物加入)
     else if (settings.value.allowIncreasePaymentBySendGift) {
       // 检查是否允许任意礼物叠加 或 礼物是否在指定列表内
-      const isAllowedGiftForIncrease = settings.value.allowIncreaseByAnyPayment ||
-        settings.value.giftNames?.some((n) => eventData.msg.toLowerCase() === n.toLowerCase()) == true;
+      const isAllowedGiftForIncrease = settings.value.allowIncreaseByAnyPayment
+        || settings.value.giftNames?.some(n => eventData.msg.toLowerCase() === n.toLowerCase()) == true
       // 只有当礼物允许叠加时，才认为这是一个有效的（潜在增加金额的）事件，但不直接触发加入
-      return isAllowedGiftForIncrease;
+      return isAllowedGiftForIncrease
     } else {
-      return false; // 其他情况不允许
+      return false // 其他情况不允许
     }
   }
   // 检查 SC 消息 (如果需要单独处理)
   // else if (eventData.type === EventDataTypes.SC) { ... }
 
-  return true; // 默认通过 (例如，手动添加或网页添加不经过此检查)
+  return true // 默认通过 (例如，手动添加或网页添加不经过此检查)
 
   // 内部函数：检查关键词匹配
   function checkMatch(word: string): boolean {
-    const keyword = settings.value.keyword?.trim().toLowerCase();
-    if (!keyword) return false; // 没有关键词直接返回 false
-    const message = word.trim().toLowerCase();
+    const keyword = settings.value.keyword?.trim().toLowerCase()
+    if (!keyword) return false // 没有关键词直接返回 false
+    const message = word.trim().toLowerCase()
     switch (settings.value.matchType) {
       case KeywordMatchType.Full:
-        return keyword === message;
+        return keyword === message
       case KeywordMatchType.Contains:
-        return message.includes(keyword);
+        return message.includes(keyword)
       case KeywordMatchType.Regex:
         try {
-          return new RegExp(settings.value.keyword).test(word); // 使用原始 keyword 进行正则匹配
+          return new RegExp(settings.value.keyword).test(word) // 使用原始 keyword 进行正则匹配
         } catch (e) {
-          console.warn('[OPEN-LIVE-QUEUE] 正则表达式无效:', settings.value.keyword, e);
-          return false;
+          console.warn('[OPEN-LIVE-QUEUE] 正则表达式无效:', settings.value.keyword, e)
+          return false
         }
       default:
-        return false;
+        return false
     }
   }
 }
@@ -486,41 +491,41 @@ function checkMessage(eventData: EventModel): boolean {
 // 更新功能启用状态
 async function onUpdateFunctionEnable() {
   if (accountInfo.value.id) {
-    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions));
-    const isEnabling = !accountInfo.value.settings.enableFunctions.includes(FunctionTypes.Queue);
+    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions))
+    const isEnabling = !accountInfo.value.settings.enableFunctions.includes(FunctionTypes.Queue)
 
     if (isEnabling) {
-      accountInfo.value.settings.enableFunctions.push(FunctionTypes.Queue);
+      accountInfo.value.settings.enableFunctions.push(FunctionTypes.Queue)
       // 启用时检查并设置默认关键词
       if (!accountInfo.value.settings.queue.keyword) {
-        accountInfo.value.settings.queue.keyword = defaultKeyword.value;
+        accountInfo.value.settings.queue.keyword = defaultKeyword.value
         // 同时保存一次设置以确保关键词生效
-        await updateSettings();
+        await updateSettings()
       }
     } else {
       accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter(
-        (f) => f != FunctionTypes.Queue,
-      );
+        f => f != FunctionTypes.Queue,
+      )
     }
 
     try {
-      const data = await SaveEnableFunctions(accountInfo.value?.settings.enableFunctions);
+      const data = await SaveEnableFunctions(accountInfo.value?.settings.enableFunctions)
       if (data.code == 200) {
-        message.success(`已${isEnabling ? '启用' : '禁用'}队列功能`);
+        message.success(`已${isEnabling ? '启用' : '禁用'}队列功能`)
       } else {
         // 回滚状态
         if (accountInfo.value.id) {
-          accountInfo.value.settings.enableFunctions = oldValue;
+          accountInfo.value.settings.enableFunctions = oldValue
         }
-        message.error(`队列功能${isEnabling ? '启用' : '禁用'}失败: ${data.message}`);
+        message.error(`队列功能${isEnabling ? '启用' : '禁用'}失败: ${data.message}`)
       }
     } catch (err: any) {
       // 回滚状态
       if (accountInfo.value.id) {
-        accountInfo.value.settings.enableFunctions = oldValue;
+        accountInfo.value.settings.enableFunctions = oldValue
       }
-      message.error(`队列功能${isEnabling ? '启用' : '禁用'}失败: ${err.message || err}`);
-      console.error(`[OPEN-LIVE-QUEUE] 更新功能状态失败:`, err);
+      message.error(`队列功能${isEnabling ? '启用' : '禁用'}失败: ${err.message || err}`)
+      console.error(`[OPEN-LIVE-QUEUE] 更新功能状态失败:`, err)
     }
   }
 }
@@ -528,87 +533,87 @@ async function onUpdateFunctionEnable() {
 // 更新设置
 async function updateSettings() {
   if (accountInfo.value.id) {
-    isLoading.value = true;
+    isLoading.value = true
     try {
-      const success = await SaveSetting('Queue', settings.value);
+      const success = await SaveSetting('Queue', settings.value)
       if (success) {
-        message.success('设置已保存');
+        message.success('设置已保存')
       } else {
-        message.error('设置保存失败'); // API 应该返回更详细的信息，但这里简化处理
+        message.error('设置保存失败') // API 应该返回更详细的信息，但这里简化处理
       }
     } catch (err: any) {
-      message.error(`保存设置失败: ${err.message || err}`);
-      console.error(`[OPEN-LIVE-QUEUE] 保存设置失败:`, err);
+      message.error(`保存设置失败: ${err.message || err}`)
+      console.error(`[OPEN-LIVE-QUEUE] 保存设置失败:`, err)
     } finally {
-      isLoading.value = false;
+      isLoading.value = false
     }
   } else {
-    message.success('本地设置已更新 (未登录)'); // 对于未登录用户，设置是响应式的，无需显式保存
+    message.success('本地设置已更新 (未登录)') // 对于未登录用户，设置是响应式的，无需显式保存
   }
 }
 
 // 删除队列记录
 async function deleteQueue(values: ResponseQueueModel[]) {
-  if (!values || values.length === 0) return;
+  if (!values || values.length === 0) return
 
   if (accountInfo.value.id) { // 已登录，调用 API
-    isLoading.value = true;
+    isLoading.value = true
     try {
-      const idsToDelete = values.map((s) => s.id);
-      const data = await QueryPostAPI(QUEUE_API_URL + 'del', idsToDelete);
+      const idsToDelete = values.map(s => s.id)
+      const data = await QueryPostAPI(`${QUEUE_API_URL}del`, idsToDelete)
       if (data.code == 200) {
-        message.success(`成功删除 ${values.length} 条记录`);
+        message.success(`成功删除 ${values.length} 条记录`)
         // 从原始数据中移除已删除项
-        originQueue.value = originQueue.value.filter((s) => !idsToDelete.includes(s.id));
+        originQueue.value = originQueue.value.filter(s => !idsToDelete.includes(s.id))
       } else {
-        message.error('删除失败: ' + data.message);
-        console.error('[OPEN-LIVE-QUEUE] 删除失败: ' + data.message);
+        message.error(`删除失败: ${data.message}`)
+        console.error(`[OPEN-LIVE-QUEUE] 删除失败: ${data.message}`)
       }
     } catch (err: any) {
-      message.error(`删除记录时出错: ${err.message || err}`);
-      console.error('[OPEN-LIVE-QUEUE] 删除记录出错:', err);
+      message.error(`删除记录时出错: ${err.message || err}`)
+      console.error('[OPEN-LIVE-QUEUE] 删除记录出错:', err)
     } finally {
-      isLoading.value = false;
+      isLoading.value = false
     }
   } else { // 未登录，操作本地队列
-    const idsToDelete = values.map(v => v.id);
-    localQueues.value = localQueues.value.filter(q => !idsToDelete.includes(q.id));
-    message.success(`成功删除 ${values.length} 条本地记录`);
+    const idsToDelete = values.map(v => v.id)
+    localQueues.value = localQueues.value.filter(q => !idsToDelete.includes(q.id))
+    message.success(`成功删除 ${values.length} 条本地记录`)
   }
 }
 
 // 取消所有活动队列项
 async function deactiveAllSongs() {
   if (accountInfo.value.id) { // 已登录，调用 API
-    isLoading.value = true;
+    isLoading.value = true
     try {
-      const data = await QueryGetAPI(QUEUE_API_URL + 'deactive');
+      const data = await QueryGetAPI(`${QUEUE_API_URL}deactive`)
       if (data.code == 200) {
-        message.success('已全部取消');
+        message.success('已全部取消')
         // 更新本地状态
         originQueue.value.forEach((s) => {
           if (s.status <= QueueStatus.Progressing) {
-            s.status = QueueStatus.Cancel;
-            s.finishAt = Date.now(); // 标记完成时间
+            s.status = QueueStatus.Cancel
+            s.finishAt = Date.now() // 标记完成时间
           }
-        });
+        })
       } else {
-        message.error('全部取消失败: ' + data.message);
+        message.error(`全部取消失败: ${data.message}`)
       }
     } catch (err: any) {
-      message.error(`全部取消时出错: ${err.message || err}`);
-      console.error('[OPEN-LIVE-QUEUE] 全部取消出错:', err);
+      message.error(`全部取消时出错: ${err.message || err}`)
+      console.error('[OPEN-LIVE-QUEUE] 全部取消出错:', err)
     } finally {
-      isLoading.value = false;
+      isLoading.value = false
     }
   } else { // 未登录，操作本地队列
     localQueues.value.forEach((s) => {
       if (s.status <= QueueStatus.Progressing) {
-        s.status = QueueStatus.Cancel;
-        s.finishAt = Date.now();
+        s.status = QueueStatus.Cancel
+        s.finishAt = Date.now()
       }
-    });
-    message.success('已全部取消本地活动队列');
+    })
+    message.success('已全部取消本地活动队列')
   }
 }
 
@@ -620,9 +625,9 @@ const statusFilterOptions = computed(() => {
       return {
         label: STATUS_MAP[t],
         value: t,
-      };
-    });
-});
+      }
+    })
+})
 
 // 历史记录表格列定义
 const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
@@ -637,47 +642,47 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
           trigger: () => data.user?.name || '未知用户',
           default: () => (data.from == QueueFrom.Manual ? '主播手动添加' : `UID: ${data.user?.uid ?? 'N/A'}`),
         },
-      );
+      )
     },
     filterOptionValue: null, // 用于触发筛选
     filter: (value, row) => { // 使用 NDataTable 内置筛选
-      const name = row.user?.name?.toLowerCase() ?? '';
-      const filterVal = filterName.value.toLowerCase();
-      if (!filterVal) return true;
-      return filterNameContains.value ? name.includes(filterVal) : name === filterVal;
-    }
+      const name = row.user?.name?.toLowerCase() ?? ''
+      const filterVal = filterName.value.toLowerCase()
+      if (!filterVal) return true
+      return filterNameContains.value ? name.includes(filterVal) : name === filterVal
+    },
   },
   {
     title: '来源',
     key: 'from',
     width: 120,
     render(data) {
-      let fromType: 'info' | 'success' | 'default' | 'error' = 'default';
-      let text = '';
+      let fromType: 'info' | 'success' | 'default' | 'error' = 'default'
+      let text = ''
       switch (data.from) {
         case QueueFrom.Danmaku: {
-          fromType = 'info';
-          text = '弹幕' + (data.giftPrice ? ` | ¥${data.giftPrice.toFixed(1)}` : '');
-          break;
+          fromType = 'info'
+          text = `弹幕${data.giftPrice ? ` | ¥${data.giftPrice.toFixed(1)}` : ''}`
+          break
         }
         case QueueFrom.Gift: {
-          fromType = 'error';
-          text = '礼物 | ¥' + (data.giftPrice?.toFixed(1) ?? '0.0');
-          break;
+          fromType = 'error'
+          text = `礼物 | ¥${data.giftPrice?.toFixed(1) ?? '0.0'}`
+          break
         }
         case QueueFrom.Web: {
-          fromType = 'success';
-          text = '网页添加';
-          break;
+          fromType = 'success'
+          text = '网页添加'
+          break
         }
         case QueueFrom.Manual: {
-          fromType = 'default';
-          text = '手动添加';
-          break;
+          fromType = 'default'
+          text = '手动添加'
+          break
         }
-        default: text = '未知';
+        default: text = '未知'
       }
-      return h(NTag, { size: 'small', type: fromType, bordered: false }, () => text);
+      return h(NTag, { size: 'small', type: fromType, bordered: false }, () => text)
     },
   },
   {
@@ -686,26 +691,26 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
     filterMultiple: false, // 只允许单选
     filterOptions: statusFilterOptions.value, // 使用计算属性
     filter: (value, row) => {
-      return row.status === value;
+      return row.status === value
     },
     render(data) {
-      let statusType: 'info' | 'success' | 'warning' | 'error';
+      let statusType: 'info' | 'success' | 'warning' | 'error'
       switch (data.status) {
         case QueueStatus.Progressing: {
-          statusType = 'success';
-          break;
+          statusType = 'success'
+          break
         }
         case QueueStatus.Waiting: {
-          statusType = 'warning';
-          break;
+          statusType = 'warning'
+          break
         }
         case QueueStatus.Finish: {
-          statusType = 'info';
-          break;
+          statusType = 'info'
+          break
         }
         case QueueStatus.Cancel: {
-          statusType = 'error';
-          break;
+          statusType = 'error'
+          break
         }
       }
       return h(
@@ -718,7 +723,7 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
           style: data.status == QueueStatus.Progressing ? 'animation: animated-border 2.5s infinite;' : '',
         },
         () => STATUS_MAP[data.status] ?? '未知状态',
-      );
+      )
     },
   },
   {
@@ -726,7 +731,7 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
     key: 'createAt', // 使用 createAt 作为 key 以便排序
     sorter: 'default', // 使用 NDataTable 内置排序
     render: (data) => {
-      return h(NTime, { time: data.createAt, type: 'datetime' }); // 显示完整时间
+      return h(NTime, { time: data.createAt, type: 'datetime' }) // 显示完整时间
     },
   },
   {
@@ -735,7 +740,7 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
     width: 120, // 稍微加宽以容纳按钮
     align: 'center',
     render(data) {
-      const buttons: VNodeChild[] = [];
+      const buttons: VNodeChild[] = []
 
       // 重新排队按钮 (仅对已完成或取消的显示)
       if (data.status == QueueStatus.Finish || data.status == QueueStatus.Cancel) {
@@ -750,8 +755,8 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
                   circle: true,
                   loading: isLoading.value && queueDataBeingManaged.value === data.id, // 仅当前操作项显示 loading
                   onClick: () => {
-                    queueDataBeingManaged.value = data.id; // 标记正在操作的项
-                    updateStatus(data, QueueStatus.Waiting);
+                    queueDataBeingManaged.value = data.id // 标记正在操作的项
+                    updateStatus(data, QueueStatus.Waiting)
                   },
                   style: 'margin: 0 2px;',
                 },
@@ -761,7 +766,7 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
               ),
             default: () => '重新放回等待',
           }),
-        );
+        )
       }
 
       // 删除按钮
@@ -792,155 +797,152 @@ const columns = computed<DataTableColumns<ResponseQueueModel>>(() => [
             default: () => `确定删除 ${data.user?.name} 的记录吗?`,
           },
         ),
-      );
+      )
 
-      return h(NSpace, { justify: 'center', size: 4 }, () => buttons); // 减小间距
+      return h(NSpace, { justify: 'center', size: 4 }, () => buttons) // 减小间距
     },
   },
-]);
+])
 
 // 用于标记历史记录表格中正在操作的行，以显示 loading
-const queueDataBeingManaged = ref<number | null>(null);
+const queueDataBeingManaged = ref<number | null>(null)
 
 // 监听筛选条件变化，手动触发 NDataTable 筛选
 watch([filterName, filterNameContains], () => {
   if (table.value) {
     // 更新第一列的 filterOptionValue 来触发筛选
-    const cols = table.value.columns;
-    cols[0].filterOptionValue = filterName.value + filterNameContains.value.toString();
-    table.value.filter(cols[0]);
+    const cols = table.value.columns
+    cols[0].filterOptionValue = filterName.value + filterNameContains.value.toString()
+    table.value.filter(cols[0])
   }
-});
-
+})
 
 // 获取舰长等级对应的颜色
 function GetGuardColor(level: number | null | undefined): string {
   if (level) {
     switch (level) {
-      case 1: return 'rgb(122, 4, 35)'; // 总督
-      case 2: return 'rgb(157, 155, 255)'; // 提督 (颜色可能需要调整)
-      case 3: return 'rgb(104, 136, 241)'; // 舰长
+      case 1: return 'rgb(122, 4, 35)' // 总督
+      case 2: return 'rgb(157, 155, 255)' // 提督 (颜色可能需要调整)
+      case 3: return 'rgb(104, 136, 241)' // 舰长
     }
   }
-  return '#999'; // 默认颜色或无舰长
+  return '#999' // 默认颜色或无舰长
 }
 
 // 定时更新活动队列信息 (增量更新)
 async function updateActive() {
-  if (!accountInfo.value.id) return; // 未登录则不执行
+  if (!accountInfo.value.id) return // 未登录则不执行
   try {
-    const data = await QueryGetAPI<ResponseQueueModel[]>(QUEUE_API_URL + 'get-active', {
+    const data = await QueryGetAPI<ResponseQueueModel[]>(`${QUEUE_API_URL}get-active`, {
       id: accountInfo.value?.id,
-    });
+    })
     if (data.code == 200) {
-      const activeItems = data.data ?? [];
+      const activeItems = data.data ?? []
       activeItems.forEach((item) => {
-        const queueDataIndex = originQueue.value.findIndex((s) => s.id == item.id);
+        const queueDataIndex = originQueue.value.findIndex(s => s.id == item.id)
         if (queueDataIndex > -1) { // 更新现有项
-          const queueData = originQueue.value[queueDataIndex];
+          const queueData = originQueue.value[queueDataIndex]
           // 仅在状态或价格变化时更新，减少不必要的响应式触发
-          let updated = false;
+          let updated = false
           if (queueData.status !== item.status) {
-            queueData.status = item.status;
-            updated = true;
+            queueData.status = item.status
+            updated = true
           }
           if (queueData.giftPrice !== item.giftPrice) {
-            const oldPrice = queueData.giftPrice ?? 0;
-            const newPrice = item.giftPrice ?? 0;
+            const oldPrice = queueData.giftPrice ?? 0
+            const newPrice = item.giftPrice ?? 0
             if (newPrice > oldPrice) { // 仅在价格增加时提示
               message.info(
                 `${queueData.user?.name} 通过发送礼物再次付费: ¥ ${(newPrice - oldPrice).toFixed(1)}, 当前总计付费: ¥ ${newPrice.toFixed(1)}`,
-              );
+              )
             }
-            queueData.giftPrice = item.giftPrice;
-            updated = true;
+            queueData.giftPrice = item.giftPrice
+            updated = true
           }
           // 如果有其他需要同步的字段，在此处添加比较和更新
           // if (updated) {
           //   // 可以考虑是否需要强制更新整个对象以确保响应性，但通常直接修改属性即可
           //   // originQueue.value.splice(queueDataIndex, 1, { ...queueData });
           // }
-
         } else { // 添加新项
-          originQueue.value.unshift(item); // 添加到开头，让排序处理
+          originQueue.value.unshift(item) // 添加到开头，让排序处理
           if (item.from == QueueFrom.Web) {
-            message.success(`[${item.user?.name}] 通过网页加入队列`);
+            message.success(`[${item.user?.name}] 通过网页加入队列`)
           } else if (item.from == QueueFrom.Gift && settings.value.sendGiftDirectJoin) {
-            message.success(`[${item.user?.name}] 通过礼物加入队列`);
+            message.success(`[${item.user?.name}] 通过礼物加入队列`)
           }
           // 其他来源的添加消息在 add 函数中处理
         }
-      });
+      })
       // 可选：移除本地存在但远程 active 接口未返回的非终态项 (表示可能被后台清理)
       // const activeIds = new Set(activeItems.map(i => i.id));
       // originQueue.value = originQueue.value.filter(q => q.status >= QueueStatus.Finish || activeIds.has(q.id));
-
     } else {
       // message.error('无法获取活动队列: ' + data.message) // 频繁请求，失败时不提示用户
-      console.warn('[OPEN-LIVE-Queue] 无法获取活动队列: ' + data.message);
+      console.warn(`[OPEN-LIVE-Queue] 无法获取活动队列: ${data.message}`)
     }
   } catch (err: any) {
-    console.warn('[OPEN-LIVE-Queue] 更新活动队列失败:', err.message || err);
+    console.warn('[OPEN-LIVE-Queue] 更新活动队列失败:', err.message || err)
   }
 }
 
 // 拉黑用户 (仅限弹幕来源)
 function blockUser(item: ResponseQueueModel) {
   if (item.from != QueueFrom.Danmaku && item.from != QueueFrom.Gift) { // 允许拉黑礼物用户
-    message.error(`[${item.user?.name}] 不是来自弹幕或礼物的用户，无法拉黑`);
-    return;
+    message.error(`[${item.user?.name}] 不是来自弹幕或礼物的用户，无法拉黑`)
+    return
   }
   if (item.user?.uid) { // 确保有 UID
-    isLoading.value = true; // 开始加载
-    queueDataBeingManaged.value = item.id; // 标记操作项
+    isLoading.value = true // 开始加载
+    queueDataBeingManaged.value = item.id // 标记操作项
     AddBiliBlackList(item.user.uid, item.user.name)
       .then((data) => {
         if (data.code == 200) {
-          message.success(`[${item.user?.name}] 已添加到 B站黑名单`);
-          updateStatus(item, QueueStatus.Cancel); // 拉黑后自动取消排队
+          message.success(`[${item.user?.name}] 已添加到 B站黑名单`)
+          updateStatus(item, QueueStatus.Cancel) // 拉黑后自动取消排队
         } else {
-          message.error(`拉黑失败: ${data.message}`);
+          message.error(`拉黑失败: ${data.message}`)
         }
       })
       .catch((err: any) => {
-        message.error(`拉黑时发生错误: ${err.message || err}`);
-        console.error('[OPEN-LIVE-QUEUE] 拉黑用户出错:', err);
+        message.error(`拉黑时发生错误: ${err.message || err}`)
+        console.error('[OPEN-LIVE-QUEUE] 拉黑用户出错:', err)
       })
       .finally(() => {
-        isLoading.value = false;
-        queueDataBeingManaged.value = null;
-      });
+        isLoading.value = false
+        queueDataBeingManaged.value = null
+      })
   } else {
-    message.error(`用户 [${item.user?.name}] 没有有效的 UID，无法拉黑`);
+    message.error(`用户 [${item.user?.name}] 没有有效的 UID，无法拉黑`)
   }
 }
 
-let timer: any; // 用于更新相对时间的计时器
-let updateActiveTimer: any; // 用于轮询活动队列的计时器
-const updateKey = ref(0); // 用于强制更新 NTime 组件
+let timer: any // 用于更新相对时间的计时器
+let updateActiveTimer: any // 用于轮询活动队列的计时器
+const updateKey = ref(0) // 用于强制更新 NTime 组件
 
 // 初始化操作
 async function init() {
-  dispose(); // 先清理旧的计时器
+  dispose() // 先清理旧的计时器
   // 如果登录了，获取一次全量数据
   if (accountInfo.value.id) {
-    originQueue.value = await getAll();
+    originQueue.value = await getAll()
   }
   // 设置定时器
   timer = setInterval(() => {
-    updateKey.value++; // 每秒更新 key，强制 NTime 更新相对时间
-  }, 1000);
+    updateKey.value++ // 每秒更新 key，强制 NTime 更新相对时间
+  }, 1000)
   updateActiveTimer = setInterval(() => {
-    updateActive(); // 定期更新活动队列
-  }, 5000); // 轮询间隔调整为 5 秒
+    updateActive() // 定期更新活动队列
+  }, 5000) // 轮询间隔调整为 5 秒
 }
 
 // 清理操作
 function dispose() {
-  clearInterval(timer);
-  clearInterval(updateActiveTimer);
-  timer = null;
-  updateActiveTimer = null;
+  clearInterval(timer)
+  clearInterval(updateActiveTimer)
+  timer = null
+  updateActiveTimer = null
 }
 
 // --- 生命周期钩子 ---
@@ -948,52 +950,52 @@ onMounted(async () => {
   // 挂载时初始化
   if (accountInfo.value.id) {
     // 如果已登录，同步一次设置到本地状态 (虽然 computed 会处理，但显式同步更清晰)
-    settings.value = accountInfo.value.settings.queue;
+    settings.value = accountInfo.value.settings.queue
   }
   // 绑定弹幕和礼物事件监听器
-  client.onEvent('danmaku', onGetDanmaku);
-  client.onEvent('gift', onGetGift);
-  await init(); // 初始化数据和定时器
-});
+  client.onEvent('danmaku', onGetDanmaku)
+  client.onEvent('gift', onGetGift)
+  await init() // 初始化数据和定时器
+})
 
 onActivated(async () => {
   // 组件被 keep-alive 激活时重新初始化
-  await init();
-});
+  await init()
+})
 
 onDeactivated(() => {
   // 组件被 keep-alive 停用时清理定时器
-  dispose();
-});
+  dispose()
+})
 
 onUnmounted(() => {
   // 组件卸载时彻底清理
-  client.offEvent('danmaku', onGetDanmaku);
-  client.offEvent('gift', onGetGift);
-  dispose();
-});
+  client.offEvent('danmaku', onGetDanmaku)
+  client.offEvent('gift', onGetGift)
+  dispose()
+})
 
 // --- 辅助函数 ---
 function getIndexStyle(status: QueueStatus): CSSProperties {
   // 基础颜色定义 - 扁平化风格
-  let backgroundColor;
+  let backgroundColor
 
   // 根据状态设置不同的颜色
   switch (status) {
     case QueueStatus.Progressing:
-      backgroundColor = '#18a058';  // 处理中 - 绿色
-      break;
+      backgroundColor = '#18a058' // 处理中 - 绿色
+      break
     case QueueStatus.Waiting:
-      backgroundColor = '#2080f0';  // 等待中 - 蓝色
-      break;
+      backgroundColor = '#2080f0' // 等待中 - 蓝色
+      break
     case QueueStatus.Finish:
-      backgroundColor = '#86909c';  // 已完成 - 灰色
-      break;
+      backgroundColor = '#86909c' // 已完成 - 灰色
+      break
     case QueueStatus.Cancel:
-      backgroundColor = '#d03050';  // 已取消 - 红色
-      break;
+      backgroundColor = '#d03050' // 已取消 - 红色
+      break
     default:
-      backgroundColor = '#2080f0';  // 默认 - 蓝色
+      backgroundColor = '#2080f0' // 默认 - 蓝色
   }
 
   const style: CSSProperties = {
@@ -1001,16 +1003,16 @@ function getIndexStyle(status: QueueStatus): CSSProperties {
     alignItems: 'center',
     justifyContent: 'center',
     fontWeight: 'bold',
-    width: '24px',               // 确保宽高一致以形成完美圆形
-    height: '24px',              // 保持一致的宽高
-    borderRadius: '50%',         // 圆形
+    width: '24px', // 确保宽高一致以形成完美圆形
+    height: '24px', // 保持一致的宽高
+    borderRadius: '50%', // 圆形
     color: 'white',
-    fontSize: '13px',            // 适当调整字体大小
-    backgroundColor,             // 扁平化的纯色背景
-    transition: 'opacity 0.2s',  // 仅保留简单的过渡效果
-  };
+    fontSize: '13px', // 适当调整字体大小
+    backgroundColor, // 扁平化的纯色背景
+    transition: 'opacity 0.2s', // 仅保留简单的过渡效果
+  }
 
-  return style;
+  return style
 }
 </script>
 
@@ -1315,7 +1317,7 @@ function getIndexStyle(status: QueueStatus): CSSProperties {
                       >
                         <template #header>
                           <span style="font-size: small; color: gray;">
-                            {{ '来自' + (queueData?.from == QueueFrom.Gift ? '礼物' : '弹幕') + ': ' }}
+                            {{ `来自${queueData?.from == QueueFrom.Gift ? '礼物' : '弹幕'}: ` }}
                           </span>
                         </template>
                         {{ queueData?.content }}
@@ -1857,7 +1859,7 @@ function getIndexStyle(status: QueueStatus): CSSProperties {
     <NInputGroup style="margin-bottom: 15px;">
       <NInputGroupLabel> URL </NInputGroupLabel>
       <NInput
-        :value="`${CURRENT_HOST}obs/queue?id=` + accountInfo?.id"
+        :value="`${CURRENT_HOST}obs/queue?id=${accountInfo?.id}`"
         readonly
       />
       <NButton
diff --git a/src/views/open_live/ReadDanmaku.vue b/src/views/open_live/ReadDanmaku.vue
index 84dbbe0..aa4d9fd 100644
--- a/src/views/open_live/ReadDanmaku.vue
+++ b/src/views/open_live/ReadDanmaku.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { copyToClipboard } from '@/Utils'
-import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
-import { EventDataTypes, EventModel, OpenLiveInfo } from '@/api/api-models'
-import { FETCH_API } from '@/data/constants'
-import { useDanmakuClient } from '@/store/useDanmakuClient'
+import type { EventModel, OpenLiveInfo } from '@/api/api-models'
 import { Info24Filled, Mic24Filled } from '@vicons/fluent'
 import { useStorage } from '@vueuse/core'
 import EasySpeech from 'easy-speech'
@@ -41,6 +37,11 @@ import {
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { clearInterval, setInterval } from 'worker-timers'
+import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
+import { EventDataTypes } from '@/api/api-models'
+import { FETCH_API } from '@/data/constants'
+import { useDanmakuClient } from '@/store/useDanmakuClient'
+import { copyToClipboard } from '@/Utils'
 
 const props = defineProps<{
   roomInfo?: OpenLiveInfo
@@ -48,7 +49,7 @@ const props = defineProps<{
   isOpenLive?: boolean
 }>()
 
-type SpeechSettings = {
+interface SpeechSettings {
   speechInfo: SpeechInfo
   danmakuTemplate: string
   scTemplate: string
@@ -63,14 +64,14 @@ type SpeechSettings = {
   combineGiftDelay: number | undefined
 }
 
-type SpeechInfo = {
+interface SpeechInfo {
   volume: number
   pitch: number
   rate: number
   voice: string
 }
 
-type SpeechState = {
+interface SpeechState {
   isSpeaking: boolean
   speakingText: string
   isApiAudioLoading: boolean
@@ -133,10 +134,10 @@ const voiceOptions = computed(() => {
         value: v.name,
       }
     })
-    .DistinctBy((v) => v.value)
+    .DistinctBy(v => v.value)
     .ToArray()
 })
-const speakQueue = ref<{ updateAt: number; combineCount?: number; data: EventModel }[]>([])
+const speakQueue = ref<{ updateAt: number, combineCount?: number, data: EventModel }[]>([])
 const giftCombineMap = new Map<string, number>() // 用于快速查找礼物合并项
 const MAX_QUEUE_SIZE = 50 // 最大队列长度限制
 const isVtsuruVoiceAPI = computed(() => {
@@ -209,7 +210,7 @@ function forceSpeak(data: EventModel) {
   cancelSpeech()
 
   speakQueue.value.splice(
-    speakQueue.value.findIndex((v) => v.data == data),
+    speakQueue.value.findIndex(v => v.data == data),
     1,
   )
   speakQueue.value.unshift({
@@ -231,9 +232,9 @@ async function speak() {
     const item = speakQueue.value[i]
 
     // 如果是礼物且还在等待合并期间，跳过
-    if (item.data.type == EventDataTypes.Gift &&
-        combineDelay > 0 &&
-        item.updateAt > now - combineDelay) {
+    if (item.data.type == EventDataTypes.Gift
+      && combineDelay > 0
+      && item.updateAt > now - combineDelay) {
       continue
     }
 
@@ -285,10 +286,10 @@ async function speak() {
 }
 function insertSpaces(sentence: string) {
   // First, insert spaces around English words and numbers
-  //sentence = sentence.replace(/([a-zA-Z]+)/g, "'$1'")
+  // sentence = sentence.replace(/([a-zA-Z]+)/g, "'$1'")
 
   // Then, split all-caps words into single letters, each surrounded by spaces
-  sentence = sentence.replace(/\b([A-Z]{2,})\b/g, function (match) {
+  sentence = sentence.replace(/\b([A-Z]{2,})\b/g, (match) => {
     return match.split('').join(' ')
   })
 
@@ -313,7 +314,7 @@ function speakDirect(text: string) {
     const u = new SpeechSynthesisUtterance()
     u.text = text
     const voices = synth.getVoices()
-    const voice = voices.find((v) => v.name === settings.value.speechInfo.voice)
+    const voice = voices.find(v => v.name === settings.value.speechInfo.voice)
     if (voice) {
       u.voice = voice
       u.volume = settings.value.speechInfo.volume
@@ -328,7 +329,7 @@ function speakDirect(text: string) {
           return
         }
         console.log(err)
-        message.error('无法播放语音: ' + err.error)
+        message.error(`无法播放语音: ${err.error}`)
         cancelSpeech()
       }
     }
@@ -350,14 +351,14 @@ function buildApiUrl(text: string): string | null {
     message.error('未设置语音API')
     return null
   }
-  const scheme =
-    settings.value.voiceAPISchemeType === 'https'
+  const scheme
+    = settings.value.voiceAPISchemeType === 'https'
       ? 'https://'
       : settings.value.useAPIDirectly
         ? 'http://'
         : `${FETCH_API}http://`
 
-  const url = `${scheme}${settings.value.voiceAPI.trim().replace(/^(?:https?:\/\/)/, '')}`.replace(
+  const url = `${scheme}${settings.value.voiceAPI.trim().replace(/^https?:\/\//, '')}`.replace(
     /\{\{\s*text\s*\}\}/,
     encodeURIComponent(text),
   )
@@ -374,7 +375,7 @@ function buildApiUrl(text: string): string | null {
     return tempURL.toString()
   } catch (err) {
     console.log(err)
-    message.error('无效的API地址: ' + url)
+    message.error(`无效的API地址: ${url}`)
     return null
   }
 }
@@ -407,7 +408,7 @@ function speakFromAPI(text: string) {
             return
           }
           console.error('[speakFromAPI] 音频播放失败:', err)
-          message.error('无法播放语音: ' + err.message)
+          message.error(`无法播放语音: ${err.message}`)
           cancelSpeech()
         })
       }
@@ -461,9 +462,9 @@ function onGetEvent(data: EventModel) {
 
     if (existIndex !== undefined && existIndex < speakQueue.value.length) {
       const exist = speakQueue.value[existIndex]
-      if (exist &&
-          exist.data.type == EventDataTypes.Gift &&
-          exist.updateAt > Date.now() - (settings.value.combineGiftDelay * 1000)) {
+      if (exist
+        && exist.data.type == EventDataTypes.Gift
+        && exist.updateAt > Date.now() - (settings.value.combineGiftDelay * 1000)) {
         // 更新现有礼物数据
         exist.updateAt = Date.now()
         exist.data.num += data.num
@@ -546,21 +547,21 @@ function getTextFromDanmaku(data: EventModel | undefined) {
     .trim()
 
   if (data.type === EventDataTypes.Message) {
-    text = text.replace(/\[.*?\]/g, ' ') //删除 [表情], B站的表情是 [生气了] 这样的格式
+    text = text.replace(/\[.*?\]/g, ' ') // 删除 [表情], B站的表情是 [生气了] 这样的格式
   } else if (data.type === EventDataTypes.Gift) {
     text = text.replace(templateConstants.gift_name.regex, data.msg)
   } else if (data.type === EventDataTypes.Guard) {
     text = text.replace(templateConstants.guard_num.regex, data.num.toString())
   }
   text = fullWidthToHalfWidth(text)
-    .replace(/[^0-9a-zA-Z\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF ,.:'"\s]/gi, '')
+    .replace(/[^0-9a-z\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF,.:'"\s]/gi, '')
     .normalize('NFKC')
   return text
 }
 function fullWidthToHalfWidth(str: string) {
   // Convert full-width characters to half-width ones
-  var result = str.replace(/[\uff01-\uff5e]/g, function (ch) {
-    return String.fromCharCode(ch.charCodeAt(0) - 0xfee0)
+  let result = str.replace(/[\uFF01-\uFF5E]/g, (ch) => {
+    return String.fromCharCode(ch.charCodeAt(0) - 0xFEE0)
   })
 
   // Convert full-width space (u3000) to half-width one
@@ -586,7 +587,7 @@ async function uploadConfig() {
     }
   } catch (error) {
     console.error('[uploadConfig] 上传配置失败:', error)
-    message.error('保存失败: ' + (error instanceof Error ? error.message : '未知错误'))
+    message.error(`保存失败: ${error instanceof Error ? error.message : '未知错误'}`)
   }
 }
 async function downloadConfig() {
@@ -598,11 +599,11 @@ async function downloadConfig() {
     } else if (result.status === 'notfound') {
       message.error('未上传配置文件')
     } else {
-      message.error('获取失败: ' + result.msg)
+      message.error(`获取失败: ${result.msg}`)
     }
   } catch (error) {
     console.error('[downloadConfig] 下载配置失败:', error)
-    message.error('获取失败: ' + (error instanceof Error ? error.message : '未知错误'))
+    message.error(`获取失败: ${error instanceof Error ? error.message : '未知错误'}`)
   }
 }
 
@@ -680,8 +681,8 @@ function cleanupQueue() {
 
   speakQueue.value.forEach((item, index) => {
     // 保留非礼物事件或未过期的礼物事件
-    if (item.data.type !== EventDataTypes.Gift ||
-        item.updateAt > now - (settings.value.combineGiftDelay ?? 0) * 1000) {
+    if (item.data.type !== EventDataTypes.Gift
+      || item.updateAt > now - (settings.value.combineGiftDelay ?? 0) * 1000) {
       validItems.push(item)
     } else {
       // 从Map中移除过期的礼物项
@@ -1037,7 +1038,7 @@ onUnmounted(() => {
           :options="voiceOptions"
           :fallback-option="() => ({
             label: settings.speechInfo.voice ? `已选择: ${settings.speechInfo.voice}` : '未选择, 将使用默认语音',
-            value: settings.speechInfo.voice || ''
+            value: settings.speechInfo.voice || '',
           })"
         />
         <span style="width: 100%">
diff --git a/src/views/open_live/components/SongRequestHistory.vue b/src/views/open_live/components/SongRequestHistory.vue
index da9ccf7..af74b5d 100644
--- a/src/views/open_live/components/SongRequestHistory.vue
+++ b/src/views/open_live/components/SongRequestHistory.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { h, ref, computed } from 'vue'
-import { NCard, NSpace, NInputGroup, NInputGroupLabel, NInput, NCheckbox, NDataTable, NTime, NTag, NText, NIcon, NButton, NPopconfirm, NTooltip } from 'naive-ui'
-import { Delete24Filled, ArrowCounterclockwise24Regular } from '@vicons/fluent'
-import { SongRequestFrom, SongRequestInfo, SongRequestStatus } from '@/api/api-models'
-import { useLiveRequest } from '@/composables/useLiveRequest'
 import type { DataTableColumns } from 'naive-ui'
+import type { SongRequestInfo } from '@/api/api-models'
+import { ArrowCounterclockwise24Regular, Delete24Filled } from '@vicons/fluent'
+import { NButton, NCard, NCheckbox, NDataTable, NIcon, NInput, NInputGroup, NInputGroupLabel, NPopconfirm, NSpace, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import { computed, h, ref } from 'vue'
+import { SongRequestFrom, SongRequestStatus } from '@/api/api-models'
+import { useLiveRequest } from '@/composables/useLiveRequest'
 
 // 使用useLiveRequest
 const songRequest = useLiveRequest()
@@ -13,7 +14,7 @@ const table = ref()
 
 const statusFilterOptions = computed(() => {
   return Object.values(SongRequestStatus)
-    .filter((t) => /^\d+$/.test(t.toString()))
+    .filter(t => /^\d+$/.test(t.toString()))
     .map((t) => {
       return {
         label: songRequest.STATUS_MAP[t as SongRequestStatus],
@@ -77,10 +78,10 @@ const columns: DataTableColumns<SongRequestInfo> = [
             return '弹幕'
           }
           case SongRequestFrom.SC: {
-            return 'SuperChat' + (row.price ? ` | ${row.price}` : '')
+            return `SuperChat${row.price ? ` | ${row.price}` : ''}`
           }
           case SongRequestFrom.Gift: {
-            return '礼物' + (row.price ? ` | ${row.price}` : '')
+            return `礼物${row.price ? ` | ${row.price}` : ''}`
           }
           case SongRequestFrom.Manual: {
             return '手动添加'
@@ -154,24 +155,24 @@ const columns: DataTableColumns<SongRequestInfo> = [
         () => [
           row.status == SongRequestStatus.Finish || row.status == SongRequestStatus.Cancel
             ? h(NTooltip, null, {
-              trigger: () =>
-                h(
-                  NButton,
-                  {
-                    size: 'small',
-                    type: 'info',
-                    circle: true,
-                    loading: songRequest.isLoading,
-                    onClick: () => {
-                      songRequest.updateSongStatus(row, SongRequestStatus.Waiting)
+                trigger: () =>
+                  h(
+                    NButton,
+                    {
+                      size: 'small',
+                      type: 'info',
+                      circle: true,
+                      loading: songRequest.isLoading,
+                      onClick: () => {
+                        songRequest.updateSongStatus(row, SongRequestStatus.Waiting)
+                      },
                     },
-                  },
-                  {
-                    icon: () => h(NIcon, { component: ArrowCounterclockwise24Regular }),
-                  },
-                ),
-              default: () => '重新放回等待列表',
-            })
+                    {
+                      icon: () => h(NIcon, { component: ArrowCounterclockwise24Regular }),
+                    },
+                  ),
+                default: () => '重新放回等待列表',
+              })
             : undefined,
           h(
             NPopconfirm,
@@ -264,4 +265,4 @@ const columns: DataTableColumns<SongRequestInfo> = [
 .song-active:hover {
   background-color: #586069 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/open_live/components/SongRequestItem.vue b/src/views/open_live/components/SongRequestItem.vue
index 063e7fa..3b05a27 100644
--- a/src/views/open_live/components/SongRequestItem.vue
+++ b/src/views/open_live/components/SongRequestItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import type { SongRequestInfo } from '@/api/api-models'
 import {
   Checkmark12Regular,
   Dismiss16Filled,
@@ -8,17 +8,18 @@ import {
   PresenceBlocked16Regular,
 } from '@vicons/fluent'
 import {
+  NButton,
+  NCard,
+  NIcon,
+  NPopconfirm,
   NSpace,
-  NText,
   NTag,
+  NText,
   NTime,
   NTooltip,
-  NButton,
-  NIcon,
-  NCard,
-  NPopconfirm
 } from 'naive-ui'
-import { SongRequestInfo, SongRequestStatus, SongsInfo, SongRequestFrom } from '@/api/api-models'
+import { computed, inject } from 'vue'
+import { SongRequestFrom, SongRequestStatus } from '@/api/api-models'
 import { useLiveRequest } from '@/composables/useLiveRequest'
 
 const props = defineProps<{
@@ -138,8 +139,8 @@ const hasOtherSingSong = computed(() => {
         </template>
         <NSpace
           v-if="
-            (song.from == SongRequestFrom.Danmaku || song.from == SongRequestFrom.SC) &&
-              song.user?.fans_medal_wearing_status
+            (song.from == SongRequestFrom.Danmaku || song.from == SongRequestFrom.SC)
+              && song.user?.fans_medal_wearing_status
           "
         >
           <NTag
@@ -281,9 +282,9 @@ const hasOtherSingSong = computed(() => {
         </NPopconfirm>
         <NPopconfirm
           v-if="
-            song.from == SongRequestFrom.Danmaku &&
-              song.user?.uid &&
-              song.status !== SongRequestStatus.Cancel
+            song.from == SongRequestFrom.Danmaku
+              && song.user?.uid
+              && song.status !== SongRequestStatus.Cancel
           "
           @positive-click="onBlockUser"
         >
@@ -304,4 +305,4 @@ const hasOtherSingSong = computed(() => {
       </NSpace>
     </NSpace>
   </NCard>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/open_live/components/SongRequestList.vue b/src/views/open_live/components/SongRequestList.vue
index 2960842..bec45d7 100644
--- a/src/views/open_live/components/SongRequestList.vue
+++ b/src/views/open_live/components/SongRequestList.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
-import { NCard, NSpace, NTag, NIcon, NInput, NInputGroup, NButton, NPopconfirm, NRadioGroup, NRadioButton, NCheckbox, NEmpty, NList, NListItem, NDivider } from 'naive-ui'
-import { PeopleQueue24Filled } from '@vicons/fluent'
-import { Checkmark12Regular } from '@vicons/fluent'
+import { Checkmark12Regular, PeopleQueue24Filled } from '@vicons/fluent'
 import { isSameDay } from 'date-fns'
-import { SongRequestInfo, SongRequestStatus, QueueSortType } from '@/api/api-models'
-import SongRequestItem from './SongRequestItem.vue'
+import { NButton, NCard, NCheckbox, NDivider, NEmpty, NIcon, NInput, NInputGroup, NList, NListItem, NPopconfirm, NRadioButton, NRadioGroup, NSpace, NTag } from 'naive-ui'
+import { computed, provide } from 'vue'
+import { SaveSetting, useAccount } from '@/api/account'
+import { QueueSortType, SongRequestStatus } from '@/api/api-models'
 import { useLiveRequest } from '@/composables/useLiveRequest'
-import { useAccount } from '@/api/account'
-import { SaveSetting } from '@/api/account'
+import SongRequestItem from './SongRequestItem.vue'
 
 // 使用useLiveRequest
 const songRequest = useLiveRequest()
@@ -18,8 +16,8 @@ const accountInfo = useAccount()
 provide('activeSongs', songRequest.activeSongs)
 
 const todayFinishedCount = computed(() => {
-  return songRequest.songs.filter(s => s.status != SongRequestStatus.Cancel &&
-    isSameDay(s.finishAt ?? 0, Date.now())).length
+  return songRequest.songs.filter(s => s.status != SongRequestStatus.Cancel
+    && isSameDay(s.finishAt ?? 0, Date.now())).length
 })
 
 const waitingCount = computed(() => {
@@ -28,7 +26,7 @@ const waitingCount = computed(() => {
 
 // 当前的排序顺序
 const currentIsReverse = computed(() =>
-  songRequest.configCanEdit ? accountInfo.value?.settings?.songRequest?.isReverse : songRequest.isReverse
+  songRequest.configCanEdit ? accountInfo.value?.settings?.songRequest?.isReverse : songRequest.isReverse,
 )
 
 // 保存排序设置
@@ -41,7 +39,7 @@ async function updateSettings() {
           window.$message.success('已保存')
           return true
         } else {
-          window.$message.error('保存失败: ' + msg)
+          window.$message.error(`保存失败: ${msg}`)
         }
       })
       .finally(() => {
@@ -114,7 +112,8 @@ async function updateSettings() {
           if (songRequest.configCanEdit) {
             accountInfo.settings.songRequest.isReverse = value
             updateSettings()
-          } else {
+          }
+          else {
             songRequest.isReverse = value
           }
         }"
@@ -154,4 +153,4 @@ async function updateSettings() {
     v-else
     description="暂无曲目"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/open_live/components/SongRequestSettings.vue b/src/views/open_live/components/SongRequestSettings.vue
index c2712a2..2c789d1 100644
--- a/src/views/open_live/components/SongRequestSettings.vue
+++ b/src/views/open_live/components/SongRequestSettings.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { FunctionTypes, Setting_LiveRequest } from '@/api/api-models';
-import { useLiveRequest } from '@/composables/useLiveRequest';
-import { SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account'
+import type { Setting_LiveRequest } from '@/api/api-models'
 import {
   NAlert,
   NButton,
@@ -13,11 +11,14 @@ import {
   NInputNumber,
   NSpace,
   NSpin,
-  useMessage
-} from 'naive-ui';
-  import { computed } from 'vue';
+  useMessage,
+} from 'naive-ui'
+import { computed } from 'vue'
+import { SaveEnableFunctions, SaveSetting, useAccount } from '@/api/account'
+import { FunctionTypes } from '@/api/api-models'
+import { useLiveRequest } from '@/composables/useLiveRequest'
 
-  const defaultSettings = {
+const defaultSettings = {
   orderPrefix: '点播',
   onlyAllowSongList: false,
   queueMaxSize: 10,
@@ -51,7 +52,7 @@ const enableSongRequest = computed({
   },
   set: async () => {
     await updateEnableFunctions()
-  }
+  },
 })
 const configCanEdit = computed(() => {
   return accountInfo.value != null && accountInfo.value != undefined
@@ -117,7 +118,7 @@ async function updateSettings() {
           message.success('已保存')
           return true
         } else {
-          message.error('保存失败: ' + msg)
+          message.error(`保存失败: ${msg}`)
         }
       })
       .finally(() => {
@@ -376,44 +377,44 @@ async function updateSettings() {
         </NInputGroup>
       </NSpace>
       <NDivider> OBS </NDivider>
-            <NSpace align="center">
-              <NInputGroup style="width: 220px">
-                <NInputGroupLabel> 标题 </NInputGroupLabel>
-                <template v-if="configCanEdit">
-                  <NInput
-                    v-model:value="settings.obsTitle"
-                    placeholder="默认为 点播"
-                  />
-                  <NButton
-                    type="primary"
-                    @click="updateSettings"
-                  >
-                    确定
-                  </NButton>
-                </template>
-              </NInputGroup>
-              <NCheckbox
-                v-model:checked="settings.showRequireInfo"
-                :disabled="!configCanEdit"
-                @update:checked="updateSettings"
-              >
-                显示底部的需求信息
-              </NCheckbox>
-              <NCheckbox
-                v-model:checked="settings.showUserName"
-                :disabled="!configCanEdit"
-                @update:checked="updateSettings"
-              >
-                显示点播用户名
-              </NCheckbox>
-              <NCheckbox
-                v-model:checked="settings.showFanMadelInfo"
-                :disabled="!configCanEdit"
-                @update:checked="updateSettings"
-              >
-                显示点播用户粉丝牌
-              </NCheckbox>
-            </NSpace>
+      <NSpace align="center">
+        <NInputGroup style="width: 220px">
+          <NInputGroupLabel> 标题 </NInputGroupLabel>
+          <template v-if="configCanEdit">
+            <NInput
+              v-model:value="settings.obsTitle"
+              placeholder="默认为 点播"
+            />
+            <NButton
+              type="primary"
+              @click="updateSettings"
+            >
+              确定
+            </NButton>
+          </template>
+        </NInputGroup>
+        <NCheckbox
+          v-model:checked="settings.showRequireInfo"
+          :disabled="!configCanEdit"
+          @update:checked="updateSettings"
+        >
+          显示底部的需求信息
+        </NCheckbox>
+        <NCheckbox
+          v-model:checked="settings.showUserName"
+          :disabled="!configCanEdit"
+          @update:checked="updateSettings"
+        >
+          显示点播用户名
+        </NCheckbox>
+        <NCheckbox
+          v-model:checked="settings.showFanMadelInfo"
+          :disabled="!configCanEdit"
+          @update:checked="updateSettings"
+        >
+          显示点播用户粉丝牌
+        </NCheckbox>
+      </NSpace>
       <NDivider> 警告消息 </NDivider>
       <NSpace>
         <NCheckbox
@@ -425,4 +426,4 @@ async function updateSettings() {
       </NSpace>
     </NSpace>
   </NSpin>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/pointViews/PointGoodsView.vue b/src/views/pointViews/PointGoodsView.vue
index 8e2e5eb..86a6b15 100644
--- a/src/views/pointViews/PointGoodsView.vue
+++ b/src/views/pointViews/PointGoodsView.vue
@@ -1,29 +1,25 @@
 <script setup lang="ts">
-import { NavigateToNewTab } from '@/Utils'
+import type {
+  SelectOption,
+} from 'naive-ui'
 // 移除未使用的 useAccount
-import {
+import type {
   AddressInfo,
-  GoodsTypes,
   ResponsePointGoodModel,
   ResponsePointOrder2UserModel,
   UserInfo,
 } from '@/api/api-models'
-import AddressDisplay from '@/components/manage/AddressDisplay.vue'
-import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
-import { POINT_API_URL } from '@/data/constants'
-import { useBiliAuth } from '@/store/useBiliAuth'
 import {
   NAlert,
   NButton,
-  NCard,
   NCheckbox,
   NDivider,
   NEmpty,
   NFlex,
   NForm,
   NFormItem,
-  NGrid,
   NGi,
+  NGrid,
   NInput,
   NInputNumber,
   NModal,
@@ -32,12 +28,19 @@ import {
   NTag,
   NText,
   NTooltip,
-  SelectOption,
   useDialog,
   useMessage,
 } from 'naive-ui'
 import { computed, h, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import {
+  GoodsTypes,
+} from '@/api/api-models'
+import AddressDisplay from '@/components/manage/AddressDisplay.vue'
+import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
+import { POINT_API_URL } from '@/data/constants'
+import { useBiliAuth } from '@/store/useBiliAuth'
+import { NavigateToNewTab } from '@/Utils'
 
 // 移除未使用的 biliInfo prop
 const props = defineProps<{
@@ -77,7 +80,7 @@ const searchKeyword = ref('') // 搜索关键词
 const addressOptions = computed(() => {
   if (!biliAuth.value.id) return []
   return (
-    biliAuth.value.address?.map((item) => ({
+    biliAuth.value.address?.map(item => ({
       label: item.address, // 使用地址作为标签
       value: item.id, // 使用地址ID作为值
     })) ?? []
@@ -90,33 +93,33 @@ const canDoBuy = computed(() => {
   // 检查积分是否足够
   const pointCheck = currentGoods.value.price * buyCount.value <= currentPoint.value
   // 如果是实物礼物且没有外部收集链接，则必须选择地址
-  const addressCheck =
-    currentGoods.value.type !== GoodsTypes.Physical ||
-    currentGoods.value.collectUrl ||
-    !!selectedAddress.value
+  const addressCheck
+    = currentGoods.value.type !== GoodsTypes.Physical
+      || currentGoods.value.collectUrl
+      || !!selectedAddress.value
   return pointCheck && addressCheck
 })
 
 // 礼物标签列表
 const tags = computed(() => {
-  return Array.from(new Set(goods.value.flatMap((g) => g.tags)))
+  return Array.from(new Set(goods.value.flatMap(g => g.tags)))
 })
 
 // 经过筛选和排序后的礼物列表
 const selectedItems = computed(() => {
   let filteredItems = goods.value
     // 标签筛选
-    .filter((item) => !selectedTag.value || item.tags.includes(selectedTag.value))
+    .filter(item => !selectedTag.value || item.tags.includes(selectedTag.value))
     // 可兑换筛选 (只显示 getTooltip 返回 '开始兑换' 的礼物)
-    .filter((item) => !onlyCanBuy.value || getTooltip(item) === '开始兑换')
+    .filter(item => !onlyCanBuy.value || getTooltip(item) === '开始兑换')
     // 舰长等级筛选 (只显示允许所有等级或忽略舰长限制的礼物)
-    .filter((item) => !ignoreGuard.value || item.allowGuardLevel === 0)
+    .filter(item => !ignoreGuard.value || item.allowGuardLevel === 0)
     // 关键词搜索 (匹配名称或描述)
     .filter(
-      (item) =>
-        !searchKeyword.value ||
-        item.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
-        (item.description && item.description.toLowerCase().includes(searchKeyword.value.toLowerCase())),
+      item =>
+        !searchKeyword.value
+        || item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+        || (item.description && item.description.toLowerCase().includes(searchKeyword.value.toLowerCase())),
     )
 
   // 应用排序方式
@@ -151,19 +154,19 @@ const selectedItems = computed(() => {
   // 无论是否有其他排序，置顶礼物始终排在前面
   return filteredItems.sort((a, b) => {
     // 先按置顶状态排序
-    if (a.isPinned && !b.isPinned) return -1;
-    if (!a.isPinned && b.isPinned) return 1;
+    if (a.isPinned && !b.isPinned) return -1
+    if (!a.isPinned && b.isPinned) return 1
     // 如果已有排序方式，则不再进行额外排序
-    if (sortOrder.value) return 0;
+    if (sortOrder.value) return 0
     // 默认排序逻辑
-    return 0;
+    return 0
   })
 })
 
 // 获取商品标签颜色
 function getTagColor(index: number): 'default' | 'info' | 'success' | 'warning' | 'error' | 'primary' {
-  const colors: Array<'default' | 'info' | 'success' | 'warning' | 'error' | 'primary'> = ['default', 'info', 'success', 'warning', 'error'];
-  return colors[index % colors.length];
+  const colors: Array<'default' | 'info' | 'success' | 'warning' | 'error' | 'primary'> = ['default', 'info', 'success', 'warning', 'error']
+  return colors[index % colors.length]
 }
 
 // --- 方法 ---
@@ -212,9 +215,9 @@ async function buyGoods() {
     return
   }
   if (
-    currentGoods.value?.type === GoodsTypes.Physical && // 是实物
-    !currentGoods.value.collectUrl && // 没有外部收集链接
-    !selectedAddress.value // 且没有选择地址
+    currentGoods.value?.type === GoodsTypes.Physical // 是实物
+    && !currentGoods.value.collectUrl // 没有外部收集链接
+    && !selectedAddress.value // 且没有选择地址
   ) {
     message.error('请选择收货地址')
     return
@@ -229,7 +232,7 @@ async function buyGoods() {
     onPositiveClick: async () => {
       try {
         isLoading.value = true
-        const data = await useAuth.QueryBiliAuthPostAPI<ResponsePointOrder2UserModel>(POINT_API_URL + 'buy', {
+        const data = await useAuth.QueryBiliAuthPostAPI<ResponsePointOrder2UserModel>(`${POINT_API_URL}buy`, {
           vId: props.userInfo.id,
           goodsId: currentGoods.value?.id,
           count: buyCount.value,
@@ -256,14 +259,14 @@ async function buyGoods() {
             },
           })
           // 重新获取礼物列表
-          goods.value = await useAuth.GetGoods(props.userInfo.id, message);
+          goods.value = await useAuth.GetGoods(props.userInfo.id, message)
         } else {
-          message.error('兑换失败: ' + data.message)
+          message.error(`兑换失败: ${data.message}`)
           console.error('Buy failed:', data)
         }
       } catch (err: any) {
         console.error('Buy error:', err)
-        message.error('兑换失败: ' + (err.message || err))
+        message.error(`兑换失败: ${err.message || err}`)
       } finally {
         isLoading.value = false
         // 无论成功失败，如果模态框还开着，理论上应该重置部分状态或关闭模态框
@@ -282,14 +285,14 @@ function onBuyClick(good: ResponsePointGoodModel) {
 }
 
 // 自定义渲染地址选择器的标签
-const renderLabel = (option: SelectOption) => {
-  const address = biliAuth.value.address?.find((a) => a.id === option.value)
-  return h(AddressDisplay, { address: address, size: 'small' })
+function renderLabel(option: SelectOption) {
+  const address = biliAuth.value.address?.find(a => a.id === option.value)
+  return h(AddressDisplay, { address, size: 'small' })
 }
 
 // 自定义渲染地址选择器的选项
-const renderOption = ({ option }: { node: any; option: SelectOption }) => {
-  const address = biliAuth.value.address?.find((a) => a.id === option.value)
+function renderOption({ option }: { node: any, option: SelectOption }) {
+  const address = biliAuth.value.address?.find(a => a.id === option.value)
   return h(
     NButton,
     {
@@ -302,7 +305,7 @@ const renderOption = ({ option }: { node: any; option: SelectOption }) => {
       },
     },
     // 按钮内容为地址显示组件
-    () => h(AddressDisplay, { address: address }),
+    () => h(AddressDisplay, { address }),
   )
 }
 
@@ -339,8 +342,8 @@ onMounted(async () => {
     // 获取礼物列表
     goods.value = await useAuth.GetGoods(props.userInfo.id, message)
   } catch (error) {
-    console.error("Error loading initial data:", error)
-    message.error("加载数据时出错")
+    console.error('Error loading initial data:', error)
+    message.error('加载数据时出错')
   } finally {
     isLoading.value = false // 结束加载
   }
@@ -501,7 +504,7 @@ onMounted(async () => {
                 { label: '名称 ↑', value: 'name_asc' },
                 { label: '名称 ↓', value: 'name_desc' },
                 { label: '类型', value: 'type' },
-                { label: '置顶', value: 'popular' }
+                { label: '置顶', value: 'popular' },
               ]"
               placeholder="排序方式"
               size="small"
diff --git a/src/views/pointViews/PointOrderView.vue b/src/views/pointViews/PointOrderView.vue
index 4059614..29abbbb 100644
--- a/src/views/pointViews/PointOrderView.vue
+++ b/src/views/pointViews/PointOrderView.vue
@@ -1,35 +1,34 @@
 <script setup lang="ts">
-import { ResponsePointOrder2UserModel } from '@/api/api-models'
+import type { ResponsePointOrder2UserModel } from '@/api/api-models'
+import { NButton, NEmpty, NFlex, NSpin, useMessage } from 'naive-ui'
+import { onMounted, ref } from 'vue'
 import PointOrderCard from '@/components/manage/PointOrderCard.vue'
 import { POINT_API_URL } from '@/data/constants'
 import { useBiliAuth } from '@/store/useBiliAuth'
-import { NButton, NEmpty, NFlex, NSpin, useMessage } from 'naive-ui'
-import { onMounted, ref } from 'vue'
 
+// 定义加载完成的事件
+const emit = defineEmits(['dataLoaded'])
 const message = useMessage()
 const useAuth = useBiliAuth()
 
 const orders = ref<ResponsePointOrder2UserModel[]>([])
 const isLoading = ref(false)
 
-// 定义加载完成的事件
-const emit = defineEmits(['dataLoaded'])
-
 async function getOrders() {
   try {
     isLoading.value = true
-    const data = await useAuth.QueryBiliAuthGetAPI<ResponsePointOrder2UserModel[]>(POINT_API_URL + 'user/get-orders')
+    const data = await useAuth.QueryBiliAuthGetAPI<ResponsePointOrder2UserModel[]>(`${POINT_API_URL}user/get-orders`)
     if (data.code == 200) {
       orders.value = data.data
       // 触发数据加载完成事件
       emit('dataLoaded')
       return data.data
     } else {
-      message.error('获取订单失败: ' + data.message)
+      message.error(`获取订单失败: ${data.message}`)
     }
   } catch (err) {
     console.log(err)
-    message.error('获取订单失败: ' + err)
+    message.error(`获取订单失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -44,7 +43,7 @@ function reset() {
 // 暴露方法给父组件
 defineExpose({
   getOrders,
-  reset
+  reset,
 })
 
 onMounted(async () => {
@@ -55,7 +54,9 @@ onMounted(async () => {
 <template>
   <NSpin :show="isLoading">
     <NFlex justify="end" style="margin-bottom: 10px">
-      <NButton size="small" type="primary" @click="getOrders">刷新订单</NButton>
+      <NButton size="small" type="primary" @click="getOrders">
+        刷新订单
+      </NButton>
     </NFlex>
     <NEmpty
       v-if="orders.length == 0"
diff --git a/src/views/pointViews/PointUserHistoryView.vue b/src/views/pointViews/PointUserHistoryView.vue
index e1ca1e8..d877c09 100644
--- a/src/views/pointViews/PointUserHistoryView.vue
+++ b/src/views/pointViews/PointUserHistoryView.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { ResponsePointHisrotyModel, PointFrom } from '@/api/api-models'
+import type { ResponsePointHisrotyModel } from '@/api/api-models'
+import { NButton, NEmpty, NFlex, NSelect, NSpin, useMessage } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { PointFrom } from '@/api/api-models'
 import PointHistoryCard from '@/components/manage/PointHistoryCard.vue'
 import { POINT_API_URL } from '@/data/constants'
 import { useBiliAuth } from '@/store/useBiliAuth'
-import { NButton, NEmpty, NFlex, NSelect, NSpin, useMessage } from 'naive-ui'
-import { computed, onMounted, ref } from 'vue'
 
+// 定义加载完成的事件
+const emit = defineEmits(['dataLoaded'])
 const message = useMessage()
 const useAuth = useBiliAuth()
 const isLoading = ref(false)
@@ -13,14 +16,11 @@ const isLoading = ref(false)
 const history = ref<ResponsePointHisrotyModel[]>([])
 const streamerFilter = ref<string | null>('')
 
-// 定义加载完成的事件
-const emit = defineEmits(['dataLoaded'])
-
 // 获取积分历史记录
 async function getHistories() {
   try {
     isLoading.value = true
-    const data = await useAuth.QueryBiliAuthGetAPI<ResponsePointHisrotyModel[]>(POINT_API_URL + 'user/get-histories')
+    const data = await useAuth.QueryBiliAuthGetAPI<ResponsePointHisrotyModel[]>(`${POINT_API_URL}user/get-histories`)
     if (data.code == 200) {
       console.log('[point] 已获取积分历史')
       history.value = data.data
@@ -28,11 +28,11 @@ async function getHistories() {
       emit('dataLoaded')
       return data.data
     } else {
-      message.error('获取积分历史失败: ' + data.message)
+      message.error(`获取积分历史失败: ${data.message}`)
       console.error(data)
     }
   } catch (err) {
-    message.error('获取积分历史失败: ' + err)
+    message.error(`获取积分历史失败: ${err}`)
     console.error(err)
   } finally {
     isLoading.value = false
@@ -49,7 +49,7 @@ function reset() {
 // 暴露方法给父组件
 defineExpose({
   getHistories,
-  reset
+  reset,
 })
 
 onMounted(async () => {
@@ -61,7 +61,7 @@ const filteredHistory = computed(() => {
   if (streamerFilter.value === '' || streamerFilter.value === null) {
     return history.value
   }
-  return history.value.filter(item => {
+  return history.value.filter((item) => {
     // 只筛选主播操作、弹幕来源和签到
     if ([PointFrom.Manual, PointFrom.Danmaku, PointFrom.CheckIn].includes(item.from)) {
       // 精确匹配主播名称
@@ -79,14 +79,14 @@ const filteredHistory = computed(() => {
 // 计算可选的主播列表
 const streamerOptions = computed(() => {
   const names = new Set<string>()
-  history.value.forEach(item => {
+  history.value.forEach((item) => {
     if ([PointFrom.Manual, PointFrom.Danmaku, PointFrom.CheckIn].includes(item.from) && item.extra?.user?.name) {
       names.add(item.extra.user.name)
     }
   })
   // 添加"全部主播"选项
   const options = [{ label: '全部主播', value: '' }]
-  names.forEach(name => {
+  names.forEach((name) => {
     options.push({ label: name, value: name })
   })
   return options
diff --git a/src/views/pointViews/PointUserLayout.vue b/src/views/pointViews/PointUserLayout.vue
index 7bad235..0d07112 100644
--- a/src/views/pointViews/PointUserLayout.vue
+++ b/src/views/pointViews/PointUserLayout.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { UserInfo } from '@/api/api-models'
-import { POINT_API_URL } from '@/data/constants'
-import { useBiliAuth } from '@/store/useBiliAuth'
+import type { UserInfo } from '@/api/api-models'
 import { useRouteHash } from '@vueuse/router'
 import {
   NAlert,
@@ -21,27 +19,29 @@ import {
   NSpin,
   NTabPane,
   NTabs,
-  NText,
   NTag,
+  NText,
   useMessage,
 } from 'naive-ui'
 import { computed, h, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { POINT_API_URL } from '@/data/constants'
+import { useBiliAuth } from '@/store/useBiliAuth'
 import PointOrderView from './PointOrderView.vue'
 import PointUserHistoryView from './PointUserHistoryView.vue'
 import PointUserSettings from './PointUserSettings.vue'
 
 // 定义组件接口
 interface ComponentWithReset {
-  reset: () => void;
+  reset: () => void
 }
 
 interface OrderViewInstance extends ComponentWithReset {
-  getOrders: () => Promise<any>;
+  getOrders: () => Promise<any>
 }
 
 interface HistoryViewInstance extends ComponentWithReset {
-  getHistories: () => Promise<any>;
+  getHistories: () => Promise<any>
 }
 
 interface SettingsViewInstance extends ComponentWithReset {
@@ -58,14 +58,14 @@ const hash = computed({
     return realHash.value?.startsWith('#') ? realHash.value.slice(1) : realHash.value
   },
   set(val) {
-    realHash.value = '#' + val
+    realHash.value = `#${val}`
   },
 })
 const router = useRouter()
 
 const biliAuth = computed(() => useAuth.biliAuth)
 const isLoading = ref(false)
-const points = ref<{ owner: UserInfo; points: number }[]>([])
+const points = ref<{ owner: UserInfo, points: number }[]>([])
 const isFirstMounted = ref(true)
 // 分别定义各组件引用，使用正确的类型
 const orderViewRef = ref<OrderViewInstance | null>(null)
@@ -77,7 +77,7 @@ const tabDataLoaded = ref({
   points: false,
   orders: false,
   histories: false,
-  settings: true // 设置页面不需要加载数据
+  settings: true, // 设置页面不需要加载数据
 })
 
 const pointColumn = [
@@ -92,7 +92,7 @@ const pointColumn = [
   {
     title: '更多',
     key: 'action',
-    render: (row: { owner: UserInfo; points: number }) => {
+    render: (row: { owner: UserInfo, points: number }) => {
       return h(NFlex, {}, () => [
         h(
           NButton,
@@ -114,8 +114,8 @@ const pointColumn = [
 async function getAllPoints() {
   isLoading.value = true
   try {
-    const data = await useAuth.QueryBiliAuthGetAPI<{ owner: UserInfo; points: number }[]>(
-      POINT_API_URL + 'user/get-all-point',
+    const data = await useAuth.QueryBiliAuthGetAPI<{ owner: UserInfo, points: number }[]>(
+      `${POINT_API_URL}user/get-all-point`,
     )
     if (data.code == 200) {
       console.log('[point] 已获取积分')
@@ -125,7 +125,7 @@ async function getAllPoints() {
     }
   } catch (err) {
     console.error(err)
-    message.error('获取积分失败: ' + err)
+    message.error(`获取积分失败: ${err}`)
   } finally {
     isLoading.value = false
   }
@@ -137,7 +137,7 @@ function resetData() {
   points.value = []
   isFirstMounted.value = true
   // 重置数据加载状态
-  Object.keys(tabDataLoaded.value).forEach(key => {
+  Object.keys(tabDataLoaded.value).forEach((key) => {
     tabDataLoaded.value[key as keyof typeof tabDataLoaded.value] = false
   })
   tabDataLoaded.value.settings = true // 设置页不需要加载数据
@@ -166,7 +166,7 @@ function onAllPointPaneMounted() {
 // 处理选项卡切换
 function onTabChange(tabName: string) {
   // 只在数据未加载时刷新
-  switch(tabName) {
+  switch (tabName) {
     case 'points':
       if (!tabDataLoaded.value.points) {
         getAllPoints()
diff --git a/src/views/pointViews/PointUserSettings.vue b/src/views/pointViews/PointUserSettings.vue
index e141e1b..85671a7 100644
--- a/src/views/pointViews/PointUserSettings.vue
+++ b/src/views/pointViews/PointUserSettings.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { AddressInfo } from '@/api/api-models'
-import AddressDisplay from '@/components/manage/AddressDisplay.vue'
-import { CURRENT_HOST, POINT_API_URL, THINGS_URL } from '@/data/constants'
-import { useBiliAuth } from '@/store/useBiliAuth'
+import type {
+  FormRules,
+} from 'naive-ui'
+import type { AddressInfo } from '@/api/api-models'
 import { useStorage } from '@vueuse/core'
 import {
-  FormRules,
   NButton,
   NCard,
   NCheckbox,
@@ -29,11 +28,14 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, ref } from 'vue'
-//@ts-expect-error 导入有点问题
+import AddressDisplay from '@/components/manage/AddressDisplay.vue'
+import { CURRENT_HOST, POINT_API_URL } from '@/data/constants'
+// @ts-expect-error 导入有点问题
 import UserAgreement from '@/document/UserAgreement.md'
+import { useBiliAuth } from '@/store/useBiliAuth'
 
 // 地区数据类型定义
-type AreaData = {
+interface AreaData {
   [province: string]: {
     [city: string]: {
       [district: string]: string[]
@@ -61,28 +63,28 @@ const areas = useStorage<{
 
 // 计算属性：获取省份选项
 const provinceOptions = computed(() => {
-  return Object.keys(areas.value?.data ?? {}).map((p) => ({ label: p, value: p }))
+  return Object.keys(areas.value?.data ?? {}).map(p => ({ label: p, value: p }))
 })
 
 // 计算属性：当前用户授权信息
 const biliAuth = computed(() => useAuth.biliAuth)
 
 // 获取城市选项
-const cityOptions = (province: string) => {
+function cityOptions(province: string) {
   if (!areas.value?.data[province]) return []
-  return Object.keys(areas.value?.data[province] ?? {}).map((c) => ({ label: c, value: c }))
+  return Object.keys(areas.value?.data[province] ?? {}).map(c => ({ label: c, value: c }))
 }
 
 // 获取区/县选项
-const districtOptions = (province: string, city: string) => {
+function districtOptions(province: string, city: string) {
   if (!areas.value?.data[province]?.[city]) return []
-  return Object.keys(areas.value?.data[province][city] ?? {}).map((d) => ({ label: d, value: d }))
+  return Object.keys(areas.value?.data[province][city] ?? {}).map(d => ({ label: d, value: d }))
 }
 
 // 获取街道选项
-const streetOptions = (province: string, city: string, district: string) => {
+function streetOptions(province: string, city: string, district: string) {
   if (!areas.value?.data[province]?.[city]?.[district]) return []
-  return areas.value?.data[province][city][district]?.map((s) => ({ label: s, value: s })) ?? []
+  return areas.value?.data[province][city][district]?.map(s => ({ label: s, value: s })) ?? []
 }
 
 // 表单验证规则
@@ -119,7 +121,7 @@ const rules: FormRules = {
 }
 
 // 处理API错误的工具函数
-const handleApiError = (action: string, err: any) => {
+function handleApiError(action: string, err: any) {
   message.error(`${action}失败: ${err}`)
   console.error(err)
 }
@@ -132,7 +134,7 @@ async function updateAddress() {
     isLoading.value = true
 
     const data = await useAuth.QueryBiliAuthPostAPI<AddressInfo>(
-      POINT_API_URL + 'user/update-address',
+      `${POINT_API_URL}user/update-address`,
       currentAddress.value,
     )
 
@@ -142,7 +144,7 @@ async function updateAddress() {
 
       // 更新本地地址列表
       if (biliAuth.value.address) {
-        const index = biliAuth.value.address?.findIndex((a) => a.id == data.data.id) ?? -1
+        const index = biliAuth.value.address?.findIndex(a => a.id == data.data.id) ?? -1
         if (index >= 0) {
           biliAuth.value.address[index] = data.data
         } else {
@@ -169,11 +171,11 @@ async function updateAddress() {
 async function deleteAddress(id: string) {
   isLoading.value = true
   try {
-    const data = await useAuth.QueryBiliAuthGetAPI(POINT_API_URL + 'user/del-address', { id })
+    const data = await useAuth.QueryBiliAuthGetAPI(`${POINT_API_URL}user/del-address`, { id })
     if (data.code == 200) {
       message.success('已删除')
       if (biliAuth.value.address) {
-        biliAuth.value.address = biliAuth.value.address?.filter((a) => a.id != id)
+        biliAuth.value.address = biliAuth.value.address?.filter(a => a.id != id)
       }
     } else {
       handleApiError('删除地址', data.message)
@@ -263,7 +265,7 @@ function reset() {
 
 // 暴露方法给父组件
 defineExpose({
-  reset
+  reset,
 })
 </script>
 
@@ -333,7 +335,7 @@ defineExpose({
           >
             <NInput
               type="textarea"
-              :value="`${CURRENT_HOST}bili-user?auth=` + useAuth.biliToken"
+              :value="`${CURRENT_HOST}bili-user?auth=${useAuth.biliToken}`"
               readonly
             />
           </NCollapseItem>
diff --git a/src/views/single/QuestionDisplay.vue b/src/views/single/QuestionDisplay.vue
index a57c0cf..fbc0474 100644
--- a/src/views/single/QuestionDisplay.vue
+++ b/src/views/single/QuestionDisplay.vue
@@ -1,13 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-import { SaveSetting, useAccount } from '@/api/account'
-import { QuestionDisplayAlign, Setting_QuestionDisplay } from '@/api/api-models'
-import QuestionItem from '@/components/QuestionItem.vue'
-import QuestionItems from '@/components/QuestionItems.vue'
-import { CURRENT_HOST } from '@/data/constants'
-import { useQuestionBox } from '@/store/useQuestionBox'
-import { useWebRTC } from '@/store/useRTC'
-import QuestionDisplayCard from '@/views/manage/QuestionDisplayCard.vue'
+import type { Setting_QuestionDisplay } from '@/api/api-models'
 import {
   ArrowCircleLeft12Filled,
   ArrowCircleRight12Filled,
@@ -17,7 +10,7 @@ import {
   TextAlignRight16Filled,
 } from '@vicons/fluent'
 import { Heart, HeartOutline } from '@vicons/ionicons5'
-import { useDebounceFn, useElementSize, useStorage, useThrottleFn } from '@vueuse/core'
+import { useDebounceFn, useElementSize, useStorage } from '@vueuse/core'
 import {
   NButton,
   NCard,
@@ -38,9 +31,17 @@ import {
   NScrollbar,
   NSelect,
   NTooltip,
-  useMessage
+  useMessage,
 } from 'naive-ui'
 import { computed, onMounted, ref, watch } from 'vue'
+import { SaveSetting, useAccount } from '@/api/account'
+import { QuestionDisplayAlign } from '@/api/api-models'
+import QuestionItem from '@/components/QuestionItem.vue'
+import QuestionItems from '@/components/QuestionItems.vue'
+import { CURRENT_HOST } from '@/data/constants'
+import { useQuestionBox } from '@/store/useQuestionBox'
+import { useWebRTC } from '@/store/useRTC'
+import QuestionDisplayCard from '@/views/manage/QuestionDisplayCard.vue'
 
 const message = useMessage()
 const accountInfo = useAccount()
@@ -56,7 +57,7 @@ const isLoading = ref(false)
 
 const cardRef = ref<HTMLElement>()
 const cardSize = useElementSize(cardRef)
-const savedCardSize = useStorage<{ width: number; height: number }>('Settings.QuestionDisplay.CardSize', {
+const savedCardSize = useStorage<{ width: number, height: number }>('Settings.QuestionDisplay.CardSize', {
   width: 400,
   height: 400,
 })
@@ -70,12 +71,11 @@ watch([cardSize.width, cardSize.height], () => {
     debouncedSize()
   }
 })
-const scrollInfo = ref<{ clientHeight: number; scrollHeight: number; scrollTop: number }>()
+const scrollInfo = ref<{ clientHeight: number, scrollHeight: number, scrollTop: number }>()
 const debouncedScroll = useDebounceFn(() => {
   rtc?.send('function.question.sync-scroll', scrollInfo.value)
 }, 200)
 
-
 const setting = computed({
   get: () => {
     if (accountInfo.value && accountInfo.value.settings) {
@@ -98,7 +98,7 @@ async function updateSettings() {
           message.success('已保存')
           return true
         } else {
-          message.error('保存失败: ' + msg)
+          message.error(`保存失败: ${msg}`)
         }
       })
       .finally(() => {
@@ -108,10 +108,10 @@ async function updateSettings() {
     message.success('完成')
   }
 }
-const fontsOptions = useStorage<{ label: string; value: string }[]>('Settings.Fonts', [])
+const fontsOptions = useStorage<{ label: string, value: string }[]>('Settings.Fonts', [])
 async function loadFonts() {
   if ('queryLocalFonts' in window) {
-    //@ts-expect-error 不知道为啥不存在
+    // @ts-expect-error 不知道为啥不存在
     const status = await navigator.permissions.query({ name: 'local-fonts' })
     if (status.state === 'granted') {
       console.log('Permission was granted 👍')
@@ -121,17 +121,17 @@ async function loadFonts() {
       console.log('Permission was denied 👎')
       message.error('你没有授予本地字体权限, 无法读取本地字体')
     }
-    //@ts-expect-error 不知道为啥不存在
+    // @ts-expect-error 不知道为啥不存在
     const fonts = await window.queryLocalFonts()
     fontsOptions.value = fonts.map((f: any) => {
       return { label: f.fullName, value: f.fullName }
     })
-    message.success('已获取字体列表, 共' + fontsOptions.value.length + '个字体')
+    message.success(`已获取字体列表, 共${fontsOptions.value.length}个字体`)
   } else {
     message.error('你的浏览器不支持获取字体列表')
   }
 }
-function syncScroll(value: { clientHeight: number; scrollHeight: number; scrollTop: number }) {
+function syncScroll(value: { clientHeight: number, scrollHeight: number, scrollTop: number }) {
   if (!setting.value.syncScroll) {
     return
   }
@@ -143,7 +143,7 @@ onMounted(() => {
   useQB.GetRecieveQAInfo()
 
   useQB.displayQuestion = useQB.recieveQuestions.find(
-    (s) => s.id == accountInfo.value?.settings.questionDisplay.currentQuestion,
+    s => s.id == accountInfo.value?.settings.questionDisplay.currentQuestion,
   )
 })
 </script>
@@ -359,8 +359,8 @@ onMounted(() => {
               border: showGreenBorder ? '24px solid green' : '',
               background: showGreenBorder ? 'green' : '',
               padding: '10px',
-              width: savedCardSize.width + 'px',
-              height: savedCardSize.height + 'px',
+              width: `${savedCardSize.width}px`,
+              height: `${savedCardSize.height}px`,
             }"
           >
             <QuestionDisplayCard
@@ -376,7 +376,7 @@ onMounted(() => {
   </NFlex>
   <NDrawer
     v-model:show="showSettingDrawer"
-    :title="`设置`"
+    title="设置"
     :width="400"
     placement="left"
   >
@@ -495,7 +495,7 @@ onMounted(() => {
               <NFlex style="min-width: 80px">
                 字体颜色
                 <NColorPicker
-                  :value="setting.fontColor ? '#' + setting.fontColor : undefined"
+                  :value="setting.fontColor ? `#${setting.fontColor}` : undefined"
                   show-preview
                   :modes="['hex']"
                   :actions="['clear', 'confirm']"
@@ -510,7 +510,7 @@ onMounted(() => {
               <NFlex style="min-width: 80px">
                 背景颜色
                 <NColorPicker
-                  :value="setting.backgroundColor ? '#' + setting.backgroundColor : undefined"
+                  :value="setting.backgroundColor ? `#${setting.backgroundColor}` : undefined"
                   show-preview
                   :modes="['hex']"
                   :actions="['clear', 'confirm']"
@@ -525,7 +525,7 @@ onMounted(() => {
               <NFlex style="min-width: 80px">
                 边框颜色
                 <NColorPicker
-                  :value="setting.borderColor ? '#' + setting.borderColor : undefined"
+                  :value="setting.borderColor ? `#${setting.borderColor}` : undefined"
                   show-preview
                   :modes="['hex']"
                   :actions="['clear', 'confirm']"
@@ -599,7 +599,7 @@ onMounted(() => {
             <NFlex style="min-width: 80px">
               字体颜色
               <NColorPicker
-                :value="setting.nameFontColor ? '#' + setting.nameFontColor : undefined"
+                :value="setting.nameFontColor ? `#${setting.nameFontColor}` : undefined"
                 show-preview
                 :modes="['hex']"
                 :actions="['clear', 'confirm']"
@@ -641,8 +641,8 @@ onMounted(() => {
   >
     <div
       :style="{
-        width: savedCardSize.width + 'px',
-        height: savedCardSize.height + 'px',
+        width: `${savedCardSize.width}px`,
+        height: `${savedCardSize.height}px`,
       }"
     >
       <QuestionDisplayCard
@@ -653,7 +653,7 @@ onMounted(() => {
     <NDivider />
     <NInput
       readonly
-      :value="`${CURRENT_HOST}obs/question-display?token=` + accountInfo?.token"
+      :value="`${CURRENT_HOST}obs/question-display?token=${accountInfo?.token}`"
     />
   </NModal>
 </template>
diff --git a/src/views/view/CheckInRankingView.vue b/src/views/view/CheckInRankingView.vue
index 955cce2..5236fe8 100644
--- a/src/views/view/CheckInRankingView.vue
+++ b/src/views/view/CheckInRankingView.vue
@@ -1,3 +1,162 @@
+<script setup lang="ts">
+import type { CheckInRankingInfo, UserInfo } from '@/api/api-models'
+import { Info24Filled } from '@vicons/fluent'
+import {
+  NAlert,
+  NButton,
+  NCard,
+  NEmpty,
+  NIcon,
+  NInput,
+  NPagination,
+  NSelect,
+  NSpace,
+  NSpin,
+  NTooltip,
+} from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import { CHECKIN_API_URL } from '@/data/constants'
+
+const props = defineProps<{
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+  template?: string | undefined
+}>()
+
+// 状态变量
+const isLoading = ref(false)
+const rankingData = ref<CheckInRankingInfo[]>([])
+const timeRange = ref<string>('all')
+const userFilter = ref<string>('')
+const checkInKeyword = ref('签到') // 默认签到关键词
+const pagination = ref({
+  page: 1,
+  pageSize: 10,
+})
+
+// 时间段选项
+const timeRangeOptions = [
+  { label: '全部时间', value: 'all' },
+  { label: '今日', value: 'today' },
+  { label: '本周', value: 'week' },
+  { label: '本月', value: 'month' },
+]
+
+// 过滤后的排行榜数据
+const filteredRankingData = computed(() => {
+  let filtered = rankingData.value
+
+  // 按时间范围筛选
+  if (timeRange.value !== 'all') {
+    const now = new Date()
+    let startTime: Date
+
+    if (timeRange.value === 'today') {
+      // 今天凌晨
+      startTime = new Date(now)
+      startTime.setHours(0, 0, 0, 0)
+    } else if (timeRange.value === 'week') {
+      // 本周一
+      const dayOfWeek = now.getDay() || 7 // 把周日作为7处理
+      startTime = new Date(now)
+      startTime.setDate(now.getDate() - (dayOfWeek - 1))
+      startTime.setHours(0, 0, 0, 0)
+    } else if (timeRange.value === 'month') {
+      // 本月1号
+      startTime = new Date(now.getFullYear(), now.getMonth(), 1)
+    }
+
+    filtered = filtered.filter((user) => {
+      const checkInTime = new Date(user.lastCheckInTime)
+      return checkInTime >= startTime
+    })
+  }
+
+  // 按用户名筛选
+  if (userFilter.value) {
+    const keyword = userFilter.value.toLowerCase()
+    filtered = filtered.filter(user =>
+      user.name.toLowerCase().includes(keyword),
+    )
+  }
+
+  return filtered
+})
+
+// 处理分页后的数据
+const pagedData = computed(() => {
+  const { page, pageSize } = pagination.value
+  const startIndex = (page - 1) * pageSize
+  const endIndex = startIndex + pageSize
+  return filteredRankingData.value.slice(startIndex, endIndex)
+})
+
+// 格式化日期
+function formatDate(timestamp: number): string {
+  const date = new Date(timestamp)
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+
+  return `${month}月${day}日 ${hours}:${minutes}`
+}
+
+// 加载签到排行榜数据
+async function loadCheckInRanking() {
+  isLoading.value = true
+  try {
+    // 使用用户视角的签到排行API
+    const response = await QueryGetAPI<CheckInRankingInfo[]>(`${CHECKIN_API_URL}ranking`, {
+      vId: props.userInfo?.id,
+      count: 100,
+    })
+
+    if (response.code === 200) {
+      rankingData.value = response.data
+      pagination.value.page = 1 // 重置为第一页
+    } else {
+      rankingData.value = []
+      window.$message?.error?.(`获取签到排行榜失败: ${response.message}`)
+    }
+  } catch (error) {
+    console.error('加载签到排行榜失败:', error)
+    rankingData.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 获取签到关键词
+async function fetchCheckInKeyword() {
+  if (!props.userInfo?.id) return
+
+  try {
+    // 获取主播的签到关键词设置
+    const response = await QueryGetAPI<{
+      keyword: string
+      isEnabled: boolean
+      requireAuth: boolean
+    }>(`${CHECKIN_API_URL}keyword`, {
+      vId: props.userInfo?.id,
+    })
+
+    if (response.code === 200 && response.data) {
+      checkInKeyword.value = response.data.keyword
+    }
+  } catch (error) {
+    console.error('获取签到关键词失败:', error)
+  }
+}
+
+// 组件挂载时获取签到排行和关键词
+onMounted(() => {
+  fetchCheckInKeyword()
+  loadCheckInRanking()
+})
+</script>
+
 <template>
   <div class="checkin-ranking-view">
     <NSpace vertical>
@@ -79,7 +238,7 @@
                   v-for="(item, index) in pagedData"
                   :key="index"
                   class="ranking-row"
-                  :class="{'top-three': index < 3}"
+                  :class="{ 'top-three': index < 3 }"
                 >
                   <!-- 排名列 -->
                   <div class="col-rank">
@@ -88,7 +247,7 @@
                       :class="{
                         'rank-1': index === 0,
                         'rank-2': index === 1,
-                        'rank-3': index === 2
+                        'rank-3': index === 2,
                       }"
                     >
                       {{ index + 1 + (pagination.page - 1) * pagination.pageSize }}
@@ -186,165 +345,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { CheckInRankingInfo, UserInfo } from '@/api/api-models';
-import { QueryGetAPI } from '@/api/query';
-import { CHECKIN_API_URL } from '@/data/constants';
-import { Info24Filled } from '@vicons/fluent';
-import {
-  NAlert,
-  NButton,
-  NCard,
-  NEmpty,
-  NIcon,
-  NInput,
-  NPagination,
-  NSelect,
-  NSpace,
-  NSpin,
-  NTooltip,
-} from 'naive-ui';
-import { computed, onMounted, ref } from 'vue';
-
-const props = defineProps<{
-  biliInfo: any | undefined
-  userInfo: UserInfo | undefined
-  template?: string | undefined
-}>()
-
-// 状态变量
-const isLoading = ref(false);
-const rankingData = ref<CheckInRankingInfo[]>([]);
-const timeRange = ref<string>('all');
-const userFilter = ref<string>('');
-const checkInKeyword = ref('签到'); // 默认签到关键词
-const pagination = ref({
-  page: 1,
-  pageSize: 10,
-});
-
-// 时间段选项
-const timeRangeOptions = [
-  { label: '全部时间', value: 'all' },
-  { label: '今日', value: 'today' },
-  { label: '本周', value: 'week' },
-  { label: '本月', value: 'month' },
-];
-
-// 过滤后的排行榜数据
-const filteredRankingData = computed(() => {
-  let filtered = rankingData.value;
-
-  // 按时间范围筛选
-  if (timeRange.value !== 'all') {
-    const now = new Date();
-    let startTime: Date;
-
-    if (timeRange.value === 'today') {
-      // 今天凌晨
-      startTime = new Date(now);
-      startTime.setHours(0, 0, 0, 0);
-    } else if (timeRange.value === 'week') {
-      // 本周一
-      const dayOfWeek = now.getDay() || 7; // 把周日作为7处理
-      startTime = new Date(now);
-      startTime.setDate(now.getDate() - (dayOfWeek - 1));
-      startTime.setHours(0, 0, 0, 0);
-    } else if (timeRange.value === 'month') {
-      // 本月1号
-      startTime = new Date(now.getFullYear(), now.getMonth(), 1);
-    }
-
-    filtered = filtered.filter(user => {
-      const checkInTime = new Date(user.lastCheckInTime);
-      return checkInTime >= startTime;
-    });
-  }
-
-  // 按用户名筛选
-  if (userFilter.value) {
-    const keyword = userFilter.value.toLowerCase();
-    filtered = filtered.filter(user =>
-      user.name.toLowerCase().includes(keyword)
-    );
-  }
-
-  return filtered;
-});
-
-// 处理分页后的数据
-const pagedData = computed(() => {
-  const { page, pageSize } = pagination.value;
-  const startIndex = (page - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  return filteredRankingData.value.slice(startIndex, endIndex);
-});
-
-// 格式化日期
-function formatDate(timestamp: number): string {
-  const date = new Date(timestamp);
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-
-  return `${month}月${day}日 ${hours}:${minutes}`;
-}
-
-// 加载签到排行榜数据
-async function loadCheckInRanking() {
-  isLoading.value = true;
-  try {
-    // 使用用户视角的签到排行API
-    const response = await QueryGetAPI<CheckInRankingInfo[]>(`${CHECKIN_API_URL}ranking`, {
-      vId: props.userInfo?.id,
-      count: 100
-    });
-
-    if (response.code === 200) {
-      rankingData.value = response.data;
-      pagination.value.page = 1; // 重置为第一页
-    } else {
-      rankingData.value = [];
-      window.$message?.error?.(`获取签到排行榜失败: ${response.message}`);
-    }
-  } catch (error) {
-    console.error('加载签到排行榜失败:', error);
-    rankingData.value = [];
-  } finally {
-    isLoading.value = false;
-  }
-}
-
-// 获取签到关键词
-async function fetchCheckInKeyword() {
-  if (!props.userInfo?.id) return;
-
-  try {
-    // 获取主播的签到关键词设置
-    const response = await QueryGetAPI<{
-      keyword: string
-      isEnabled: boolean
-      requireAuth: boolean
-    }>(`${CHECKIN_API_URL}keyword`, {
-      vId: props.userInfo?.id
-    });
-
-    if (response.code === 200 && response.data) {
-      checkInKeyword.value = response.data.keyword;
-    }
-  } catch (error) {
-    console.error('获取签到关键词失败:', error);
-  }
-}
-
-// 组件挂载时获取签到排行和关键词
-onMounted(() => {
-  fetchCheckInKeyword();
-  loadCheckInRanking();
-});
-</script>
-
 <style scoped>
 .checkin-ranking-view {
   padding: 12px;
@@ -540,4 +540,4 @@ onMounted(() => {
     width: 100px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/view/QuestionBoxView.vue b/src/views/view/QuestionBoxView.vue
index 3646448..fb74085 100644
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { QAInfo, UserInfo, Setting_QuestionBox, UploadFileResponse } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { AVATAR_URL, QUESTION_API_URL, TURNSTILE_KEY, FILE_API_URL } from '@/data/constants'
-import { uploadFiles, UploadStage } from '@/data/fileUpload'
+import type { QAInfo, Setting_QuestionBox, UserInfo } from '@/api/api-models'
+import { AddCircle24Regular, DismissCircle24Regular } from '@vicons/fluent'
 import GraphemeSplitter from 'grapheme-splitter'
 import {
   NAlert,
@@ -13,27 +10,26 @@ import {
   NCheckbox,
   NDivider,
   NEmpty,
+  NIcon,
   NImage,
   NInput,
   NList,
   NListItem,
-  NSelect,
   NSpace,
+  NSpin,
   NTag,
   NText,
   NTime,
   NTooltip,
-  NSpin,
-  NIcon,
   useMessage,
-  NCarousel,
-  NCarouselItem,
 } from 'naive-ui'
-import { AddCircle24Regular, DismissCircle24Regular } from '@vicons/fluent'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import VueTurnstile from 'vue-turnstile'
 import { useRoute } from 'vue-router'
-import { getUserAvatarUrl } from '@/Utils'
+import VueTurnstile from 'vue-turnstile'
+import { useAccount } from '@/api/account'
+import { QueryGetAPI, QueryPostAPI } from '@/api/query'
+import { AVATAR_URL, FILE_API_URL, QUESTION_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { uploadFiles } from '@/data/fileUpload'
 
 const { biliInfo, userInfo } = defineProps<{
   biliInfo: any | undefined
@@ -81,196 +77,196 @@ function countGraphemes(value: string) {
 }
 
 // 图片处理公共方法
-function validateImageFile(file: File): {valid: boolean, message?: string} {
+function validateImageFile(file: File): { valid: boolean, message?: string } {
   if (file.size > MAX_FILE_SIZE) {
-    return {valid: false, message: '文件大小不能超过10MB'};
+    return { valid: false, message: '文件大小不能超过10MB' }
   }
 
   if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
-    return {valid: false, message: '只支持上传 PNG, JPG, GIF, WEBP, SVG, ICO 格式的图片'};
+    return { valid: false, message: '只支持上传 PNG, JPG, GIF, WEBP, SVG, ICO 格式的图片' }
   }
 
-  return {valid: true};
+  return { valid: true }
 }
 
 function clearImageURLs(urls: string[]) {
-  urls.forEach(url => {
-    if (url) URL.revokeObjectURL(url);
-  });
+  urls.forEach((url) => {
+    if (url) URL.revokeObjectURL(url)
+  })
 }
 
 // 匿名图片上传
 async function uploadAnonymousImage(file: File) {
   if (!userInfo?.id) {
-    message.error('无法获取目标用户信息');
-    return;
+    message.error('无法获取目标用户信息')
+    return
   }
 
-  const validation = validateImageFile(file);
+  const validation = validateImageFile(file)
   if (!validation.valid) {
-    message.error(validation.message || '图片上传失败');
-    return;
+    message.error(validation.message || '图片上传失败')
+    return
   }
 
-  isUploadingAnonymousImage.value = true;
-  removeAnonymousImage();
+  isUploadingAnonymousImage.value = true
+  removeAnonymousImage()
 
-  const formData = new FormData();
-  formData.append('file', file);
-  formData.append('targetUserId', userInfo.id.toString());
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('targetUserId', userInfo.id.toString())
 
   try {
-    const data = await QueryPostAPI<string>(FILE_API_URL + 'upload-anonymous', formData);
+    const data = await QueryPostAPI<string>(`${FILE_API_URL}upload-anonymous`, formData)
     if (data.code === 200 && data.data) {
-      anonymousImageToken.value = data.data;
-      const url = URL.createObjectURL(file);
-      anonymousImagePreviewUrl.value = url;
-      message.success('匿名图片准备就绪');
+      anonymousImageToken.value = data.data
+      const url = URL.createObjectURL(file)
+      anonymousImagePreviewUrl.value = url
+      message.success('匿名图片准备就绪')
     } else {
-      message.error(data.message || '匿名图片上传失败');
-      removeAnonymousImage();
+      message.error(data.message || '匿名图片上传失败')
+      removeAnonymousImage()
     }
   } catch (err: any) {
-    message.error('匿名图片上传失败: ' + (err.message || err));
-    removeAnonymousImage();
+    message.error(`匿名图片上传失败: ${err.message || err}`)
+    removeAnonymousImage()
   } finally {
-    isUploadingAnonymousImage.value = false;
+    isUploadingAnonymousImage.value = false
   }
 }
 
 function handleAnonymousFileSelect(event: Event) {
-  const input = event.target as HTMLInputElement;
+  const input = event.target as HTMLInputElement
   if (input.files && input.files.length > 0) {
-    const file = input.files[0];
+    const file = input.files[0]
 
     // 如果已经有图片，提示不能多选
     if (anonymousImageToken.value) {
-      message.warning('匿名模式下只能上传一张图片');
-      input.value = '';
-      return;
+      message.warning('匿名模式下只能上传一张图片')
+      input.value = ''
+      return
     }
 
-    uploadAnonymousImage(file);
-    input.value = '';
+    uploadAnonymousImage(file)
+    input.value = ''
   }
 }
 
 function removeAnonymousImage() {
   if (anonymousImagePreviewUrl.value) {
-    URL.revokeObjectURL(anonymousImagePreviewUrl.value as string);
-    anonymousImagePreviewUrl.value = null;
+    URL.revokeObjectURL(anonymousImagePreviewUrl.value as string)
+    anonymousImagePreviewUrl.value = null
   }
-  anonymousImageToken.value = null;
+  anonymousImageToken.value = null
 }
 
 // 已登录用户图片上传
 function handleLoggedInFileSelect(event: Event) {
-  const input = event.target as HTMLInputElement;
+  const input = event.target as HTMLInputElement
   if (input.files && input.files.length > 0) {
     // 处理多个文件 - 支持多选
-    const newFiles = Array.from(input.files);
+    const newFiles = Array.from(input.files)
 
     // 检查每个文件
     for (const file of newFiles) {
       // 验证文件类型和大小
-      const validation = validateImageFile(file);
+      const validation = validateImageFile(file)
       if (!validation.valid) {
-        message.error(validation.message || '图片上传失败');
-        continue;
+        message.error(validation.message || '图片上传失败')
+        continue
       }
 
       // 检查是否超出最大数量限制
       if (loggedInSelectedFiles.value.length >= MAX_LOGGED_IN_IMAGES) {
-        message.warning(`最多只能上传${MAX_LOGGED_IN_IMAGES}张图片`);
-        break;
+        message.warning(`最多只能上传${MAX_LOGGED_IN_IMAGES}张图片`)
+        break
       }
 
       // 检查文件是否重复（通过文件名、大小和最后修改时间判断）
       // 避免重复选择相同图片
       const isDuplicate = loggedInSelectedFiles.value.some(existingFile =>
-        existingFile.name === file.name &&
-        existingFile.size === file.size &&
-        existingFile.lastModified === file.lastModified
-      );
+        existingFile.name === file.name
+        && existingFile.size === file.size
+        && existingFile.lastModified === file.lastModified,
+      )
 
       if (isDuplicate) {
-        message.warning(`文件"${file.name}"已存在，不会重复添加`);
-        continue;
+        message.warning(`文件"${file.name}"已存在，不会重复添加`)
+        continue
       }
 
       // 添加到已选文件列表
-      loggedInSelectedFiles.value.push(file);
-      const url = URL.createObjectURL(file);
-      loggedInImagePreviewUrls.value.push(url);
+      loggedInSelectedFiles.value.push(file)
+      const url = URL.createObjectURL(file)
+      loggedInImagePreviewUrls.value.push(url)
     }
 
     // 清空输入框，允许重新选择文件
-    input.value = '';
+    input.value = ''
   }
 }
 
 function removeLoggedInImage(index: number) {
-  const url = loggedInImagePreviewUrls.value[index];
+  const url = loggedInImagePreviewUrls.value[index]
   if (url) {
-    URL.revokeObjectURL(url as string);
+    URL.revokeObjectURL(url as string)
   }
-  loggedInImagePreviewUrls.value.splice(index, 1);
-  loggedInSelectedFiles.value.splice(index, 1);
+  loggedInImagePreviewUrls.value.splice(index, 1)
+  loggedInSelectedFiles.value.splice(index, 1)
 }
 
 function clearAllLoggedInImages() {
-  loggedInImagePreviewUrls.value.forEach(url => {
-    if (url) URL.revokeObjectURL(url as string);
-  });
-  loggedInImagePreviewUrls.value = [];
-  loggedInSelectedFiles.value = [];
+  loggedInImagePreviewUrls.value.forEach((url) => {
+    if (url) URL.revokeObjectURL(url as string)
+  })
+  loggedInImagePreviewUrls.value = []
+  loggedInSelectedFiles.value = []
 }
 
 // API 交互方法
 async function SendQuestion() {
   if (countGraphemes(questionMessage.value) < 3) {
-    message.error('内容最少需要3个字');
-    return;
+    message.error('内容最少需要3个字')
+    return
   }
 
   if (nextSendQuestionTime.value > Date.now()) {
-    message.error('冷却中, 剩余 ' + Math.ceil((nextSendQuestionTime.value - Date.now()) / 1000) + '秒');
-    return;
+    message.error(`冷却中, 剩余 ${Math.ceil((nextSendQuestionTime.value - Date.now()) / 1000)}秒`)
+    return
   }
 
-  isSending.value = true;
-  let uploadedFileIds: number[] = [];
-  let imagePayload: { id: number }[] | undefined = undefined;
-  let tokenPayload: string | undefined = undefined;
+  isSending.value = true
+  let uploadedFileIds: number[] = []
+  let imagePayload: { id: number }[] | undefined
+  let tokenPayload: string | undefined
 
   try {
     // 处理图片上传
     if (!isUserLoggedIn.value) {
       if (anonymousImageToken.value) {
-        tokenPayload = anonymousImageToken.value;
+        tokenPayload = anonymousImageToken.value
       }
     } else if (loggedInSelectedFiles.value.length > 0) {
-      message.info('正在上传图片...');
+      message.info('正在上传图片...')
 
       // 上传多张图片
       const uploadPromises = loggedInSelectedFiles.value.map(file =>
         uploadFiles(file, undefined, undefined, (stage) => {
-          console.log('上传阶段:', stage);
-        })
-      );
+          console.log('上传阶段:', stage)
+        }),
+      )
 
-      const uploadResults = await Promise.all(uploadPromises);
+      const uploadResults = await Promise.all(uploadPromises)
 
       // 提取所有上传的文件ID
       uploadedFileIds = uploadResults
         .filter(result => result && result.length > 0)
-        .map(result => result[0].id);
+        .map(result => result[0].id)
 
       if (uploadedFileIds.length > 0) {
-        imagePayload = uploadedFileIds.map(id => ({ id }));
-        message.success('图片上传成功');
+        imagePayload = uploadedFileIds.map(id => ({ id }))
+        message.success('图片上传成功')
       } else if (loggedInSelectedFiles.value.length > 0) {
-        throw new Error('图片上传失败，未返回文件信息');
+        throw new Error('图片上传失败，未返回文件信息')
       }
     }
 
@@ -282,51 +278,51 @@ async function SendQuestion() {
       Tag: selectedTag.value,
       Images: imagePayload,
       ImageTokens: tokenPayload ? [tokenPayload] : undefined,
-    };
+    }
 
     const data = await QueryPostAPI<QAInfo>(
-      QUESTION_API_URL + 'send',
+      `${QUESTION_API_URL}send`,
       payload,
       [['Turnstile', token.value]],
-    );
+    )
 
     if (data.code == 200) {
-      message.success('成功发送棉花糖');
-      questionMessage.value = '';
-      removeAnonymousImage();
-      clearAllLoggedInImages();
-      nextSendQuestionTime.value = Date.now() + minSendQuestionTime;
-      getPublicQuestions();
+      message.success('成功发送棉花糖')
+      questionMessage.value = ''
+      removeAnonymousImage()
+      clearAllLoggedInImages()
+      nextSendQuestionTime.value = Date.now() + minSendQuestionTime
+      getPublicQuestions()
     } else {
-      message.error(data.message || '发送失败');
+      message.error(data.message || '发送失败')
       if (tokenPayload && (data.message.includes('token') || data.code === 400)) {
-        removeAnonymousImage();
+        removeAnonymousImage()
       }
     }
   } catch (err: any) {
-    message.error('发送失败: ' + (err.message || err));
+    message.error(`发送失败: ${err.message || err}`)
     if (loggedInSelectedFiles.value.length > 0 && uploadedFileIds.length === 0) {
-      clearAllLoggedInImages();
+      clearAllLoggedInImages()
     }
     if (tokenPayload && (err.message?.includes('token'))) {
-      removeAnonymousImage();
+      removeAnonymousImage()
     }
   } finally {
-    isSending.value = false;
-    turnstile.value?.reset();
+    isSending.value = false
+    turnstile.value?.reset()
   }
 }
 
 function getPublicQuestions() {
   isGetting.value = true
-  QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-public', {
+  QueryGetAPI<QAInfo[]>(`${QUESTION_API_URL}get-public`, {
     id: userInfo?.id,
   })
     .then((data) => {
       if (data.code == 200) {
         publicQuestions.value = data.data
       } else {
-        message.error('获取公开提问失败:' + data.message)
+        message.error(`获取公开提问失败:${data.message}`)
       }
     })
     .catch((err) => {
@@ -338,30 +334,30 @@ function getPublicQuestions() {
 }
 
 async function getTagsAndSettings() {
-  if (!userInfo?.id) return;
-  isGetting.value = true;
+  if (!userInfo?.id) return
+  isGetting.value = true
   try {
-    const tagsData = await QueryGetAPI<string[]>(QUESTION_API_URL + 'get-tags', { id: userInfo.id });
+    const tagsData = await QueryGetAPI<string[]>(`${QUESTION_API_URL}get-tags`, { id: userInfo.id })
 
     if (tagsData.code == 200) {
       if (userInfo?.id == accountInfo.value?.id) {
         tags.value = tagsData.data.map((tag: any) =>
-          typeof tag === 'object' && tag !== null ? tag.name : tag
-        );
+          typeof tag === 'object' && tag !== null ? tag.name : tag,
+        )
       } else {
-        tags.value = tagsData.data;
+        tags.value = tagsData.data
       }
       const tagFromQuery = route.query.tag as string | undefined
       if (tagFromQuery && tags.value.includes(tagFromQuery)) {
         selectedTag.value = tagFromQuery
       }
     } else {
-      message.error('获取标签失败:' + tagsData.message);
+      message.error(`获取标签失败:${tagsData.message}`)
     }
   } catch (err: any) {
-    message.error('获取信息失败: ' + (err.message || err));
+    message.error(`获取信息失败: ${err.message || err}`)
   } finally {
-    isGetting.value = false;
+    isGetting.value = false
   }
 }
 
@@ -377,8 +373,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   turnstile.value?.remove()
-  removeAnonymousImage();
-  clearAllLoggedInImages();
+  removeAnonymousImage()
+  clearAllLoggedInImages()
 })
 </script>
 
@@ -696,7 +692,7 @@ onUnmounted(() => {
                 hoverable
                 size="small"
                 class="question-card"
-                :class="{ 'unread': !item.isReaded }"
+                :class="{ unread: !item.isReaded }"
               >
                 <!-- 问题头部 -->
                 <template #header>
@@ -775,7 +771,7 @@ onUnmounted(() => {
                       class="answer-content"
                     >
                       <NAvatar
-                        :src="AVATAR_URL + userInfo?.biliId + '?size=64'"
+                        :src="`${AVATAR_URL + userInfo?.biliId}?size=64`"
                         circle
                         class="answer-avatar"
                         :img-props="{ referrerpolicy: 'no-referrer' }"
diff --git a/src/views/view/ScheduleView.vue b/src/views/view/ScheduleView.vue
index 239bc7c..1f4f590 100644
--- a/src/views/view/ScheduleView.vue
+++ b/src/views/view/ScheduleView.vue
@@ -1,3 +1,59 @@
+<script lang="ts" setup>
+import type { ScheduleWeekInfo, UserInfo } from '@/api/api-models'
+import { TagQuestionMark16Filled } from '@vicons/fluent'
+import { NButton, NDivider, NFlex, NInput, NInputGroup, NSpin, NTooltip, useMessage } from 'naive-ui'
+import { computed, onMounted, ref } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import { SCHEDULE_API_URL, ScheduleTemplateMap } from '@/data/constants'
+import { copyToClipboard } from '@/Utils'
+
+const props = defineProps<{
+  biliInfo: any | undefined
+  userInfo: UserInfo | undefined
+  template?: string | undefined
+  fakeData?: ScheduleWeekInfo[]
+}>()
+
+const componentType = computed(() => {
+  return props.template ?? props.userInfo?.extra?.templateTypes.schedule?.toLowerCase()
+})
+const currentData = ref<ScheduleWeekInfo[]>()
+const isLoading = ref(true)
+const message = useMessage()
+
+const errMessage = ref('')
+
+async function get() {
+  isLoading.value = true
+  await QueryGetAPI<ScheduleWeekInfo[]>(`${SCHEDULE_API_URL}get`, {
+    id: props.userInfo?.id,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        currentData.value = data.data
+      } else {
+        errMessage.value = data.message
+        message.error(`加载失败: ${data.message}`)
+      }
+    })
+    .catch((err) => {
+      message.error('加载失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+onMounted(async () => {
+  if (!props.fakeData) {
+    await get()
+  } else {
+    currentData.value = props.fakeData
+    isLoading.value = false
+  }
+})
+</script>
+
 <template>
   <NSpin
     v-if="isLoading"
@@ -42,59 +98,3 @@
     />
   </div>
 </template>
-
-<script lang="ts" setup>
-import { ScheduleWeekInfo, UserInfo } from '@/api/api-models'
-import { QueryGetAPI } from '@/api/query'
-import { SCHEDULE_API_URL, ScheduleTemplateMap } from '@/data/constants'
-import { copyToClipboard } from '@/Utils'
-import { TagQuestionMark16Filled } from '@vicons/fluent'
-import { NButton, NDivider, NFlex, NInput, NInputGroup, NSpin, NTooltip, useMessage } from 'naive-ui'
-import { computed, onMounted, ref } from 'vue'
-
-const props = defineProps<{
-  biliInfo: any | undefined
-  userInfo: UserInfo | undefined
-  template?: string | undefined
-  fakeData?: ScheduleWeekInfo[]
-}>()
-
-const componentType = computed(() => {
-  return props.template ?? props.userInfo?.extra?.templateTypes['schedule']?.toLowerCase()
-})
-const currentData = ref<ScheduleWeekInfo[]>()
-const isLoading = ref(true)
-const message = useMessage()
-
-const errMessage = ref('')
-
-async function get() {
-  isLoading.value = true
-  await QueryGetAPI<ScheduleWeekInfo[]>(SCHEDULE_API_URL + 'get', {
-    id: props.userInfo?.id,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        currentData.value = data.data
-      } else {
-        errMessage.value = data.message
-        message.error('加载失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('加载失败')
-    })
-    .finally(() => {
-      isLoading.value = false
-    })
-}
-
-onMounted(async () => {
-  if (!props.fakeData) {
-    await get()
-  } else {
-    currentData.value = props.fakeData
-    isLoading.value = false
-  }
-})
-</script>
diff --git a/src/views/view/SongListView.vue b/src/views/view/SongListView.vue
index ca34a31..8795bd6 100644
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -1,3 +1,298 @@
+<script lang="ts" setup>
+import type { Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models'
+import type { ConfigItemDefinition } from '@/data/VTsuruConfigTypes'
+import { useStorage } from '@vueuse/core'
+import { addSeconds } from 'date-fns'
+import { NButton, NModal, NSpin, useMessage } from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import { DownloadConfig, useAccount } from '@/api/account'
+import { QueryGetAPI, QueryPostAPIWithParams } from '@/api/query'
+import { SONG_API_URL, SONG_REQUEST_API_URL, SongListTemplateMap } from '@/data/constants'
+import { useBiliAuth } from '@/store/useBiliAuth'
+
+// 组件属性
+const props = defineProps<{
+  biliInfo: any | undefined // B站信息
+  userInfo: UserInfo | undefined // 用户信息
+  template?: string | undefined // 模板名称
+  fakeData?: SongsInfo[] // 测试数据
+}>()
+// 用户账号信息
+const accountInfo = useAccount()
+// 下次点歌时间
+const nextRequestTime = useStorage('SongList.NextRequestTime', new Date())
+// 点歌冷却时间(秒)
+const minRequestTime = 30
+// 设置弹窗显示状态
+const showSettingModal = ref(false)
+
+// 计算当前使用的模板类型
+const componentType = computed(() => {
+  return props.template ?? props.userInfo?.extra?.templateTypes.songlist?.toLowerCase()
+})
+
+// 数据状态
+const currentData = ref<SongsInfo[]>([]) // 歌单数据
+const dynamicConfigRef = ref() // 动态配置引用
+const songsActive = ref<SongRequestInfo[]>([]) // 当前点歌列表
+const settings = ref<Setting_LiveRequest>({ // 点歌设置
+  allowFromWeb: false,
+  allowAnonymousFromWeb: false,
+  orderPrefix: '',
+} as Setting_LiveRequest)
+
+// 加载状态
+const isDataLoading = ref(true)
+const isConfigLoading = ref(true)
+const isLoading = computed(() => isDataLoading.value || isConfigLoading.value)
+
+// 计算属性
+const selectedTemplateConfig = computed(() => {
+  if (dynamicConfigRef.value?.Config) {
+    return dynamicConfigRef.value?.Config as ConfigItemDefinition[]
+  }
+  return undefined
+})
+
+const selectedTemplate = computed(() => {
+  const type = componentType.value
+  return type ? SongListTemplateMap[type] : SongListTemplateMap['']
+})
+
+const currentConfig = ref({}) // 当前配置
+const message = useMessage() // 消息提示
+const biliAuth = useBiliAuth() // B站授权
+
+/**
+ * 获取点歌设置和当前点歌列表
+ */
+async function getSongRequestInfo() {
+  if (!props.userInfo?.id) return { songs: [], setting: settings.value }
+
+  try {
+    const data = await QueryGetAPI<{ songs: SongRequestInfo[], setting: Setting_LiveRequest }>(
+      `${SONG_REQUEST_API_URL}get-active-and-settings`,
+      {
+        id: props.userInfo.id,
+      },
+    )
+
+    if (data.code === 200) {
+      return data.data
+    } else {
+      message.warning(`获取点歌设置失败: ${data.message}`)
+    }
+  } catch (err) {
+    console.error('获取点歌设置出错:', err)
+    message.error(`获取点歌设置出错: ${err instanceof Error ? err.message : String(err)}`)
+  }
+
+  return { songs: [], setting: settings.value }
+}
+
+/**
+ * 获取歌单数据
+ */
+async function getSongs() {
+  if (!props.userInfo?.id) {
+    isDataLoading.value = false
+    return
+  }
+
+  isDataLoading.value = true
+
+  try {
+    const data = await QueryGetAPI<SongsInfo[]>(`${SONG_API_URL}get`, {
+      id: props.userInfo.id,
+    })
+
+    if (data.code === 200) {
+      currentData.value = data.data || []
+    } else {
+      message.error(`加载歌单失败: ${data.message}`)
+    }
+  } catch (err) {
+    console.error('加载歌单出错:', err)
+    message.error(`加载歌单失败: ${err instanceof Error ? err.message : String(err)}`)
+  } finally {
+    isDataLoading.value = false
+  }
+}
+
+/**
+ * 获取模板配置
+ */
+async function getConfig() {
+  if (!selectedTemplate.value?.settingName) {
+    isConfigLoading.value = false
+    return
+  }
+
+  if (!selectedTemplateConfig.value) {
+    // 等待模板配置加载完成后再获取配置
+    setTimeout(() => getConfig(), 100)
+    return
+  }
+
+  isConfigLoading.value = true
+
+  try {
+    const data = await DownloadConfig(
+      selectedTemplate.value.settingName,
+      props.userInfo?.id,
+    )
+
+    if (data.msg) {
+      currentConfig.value = dynamicConfigRef.value?.DefaultConfig ?? {}
+    } else {
+      currentConfig.value = data.data || {}
+    }
+  } catch (err) {
+    console.error('加载配置出错:', err)
+    message.error(`加载配置失败: ${err instanceof Error ? err.message : String(err)}`)
+    currentConfig.value = dynamicConfigRef.value?.DefaultConfig ?? {}
+  } finally {
+    isConfigLoading.value = false
+  }
+}
+
+/**
+ * 复制文本到剪贴板
+ */
+function copyToClipboard(text: string, sendMessage: boolean = true) {
+  navigator.clipboard.writeText(text)
+    .then(() => {
+      if (sendMessage) {
+        message.success('复制成功')
+      }
+    })
+    .catch((err) => {
+      console.error('复制失败:', err)
+      message.error('复制失败，请重试')
+    })
+}
+
+/**
+ * 点歌处理
+ */
+async function requestSong(song: SongsInfo) {
+  if (!song) return
+
+  const orderText = `${settings.value.orderPrefix || ''} ${song.name}`
+
+  // 检查是否需要复制到剪贴板而不是直接点歌
+  const shouldCopyOnly = song.options
+    || !settings.value.allowFromWeb
+    || (settings.value.allowFromWeb && !settings.value.allowAnonymousFromWeb && !accountInfo.value.id && !biliAuth.isAuthed)
+
+  if (shouldCopyOnly) {
+    copyToClipboard(orderText, false)
+
+    if (song.options) {
+      message.info('此项目有特殊要求, 请在直播间内点歌, 点歌弹幕已复制到剪切板')
+    } else if (!settings.value.allowAnonymousFromWeb && !accountInfo.value.id && !biliAuth.isAuthed) {
+      message.info('主播不允许匿名点歌, 需要从网页点歌的话请注册登录, 点歌弹幕已复制到剪切板')
+    } else if (!settings.value.allowFromWeb) {
+      message.info('主播不允许从网页点歌, 点歌弹幕已复制到剪切板')
+    }
+    return
+  }
+
+  // 执行网页点歌
+  if (!props.userInfo?.id) {
+    message.error('无法获取主播信息，无法完成点歌')
+    return
+  }
+
+  // 检查点歌冷却时间
+  if (!accountInfo.value.id && nextRequestTime.value > new Date()) {
+    const remainingSeconds = Math.ceil((nextRequestTime.value.getTime() - new Date().getTime()) / 1000)
+    message.warning(`距离点歌冷却还有${remainingSeconds}秒`)
+    return
+  }
+
+  try {
+    const data = await QueryPostAPIWithParams(`${SONG_REQUEST_API_URL}add-from-web`, {
+      target: props.userInfo.id,
+      song: song.key,
+    })
+
+    if (data.code === 200) {
+      message.success('点歌成功')
+      nextRequestTime.value = addSeconds(new Date(), minRequestTime)
+      // 重新获取当前点歌列表，更新界面
+      const songRequestInfo = await getSongRequestInfo()
+      if (songRequestInfo) {
+        songsActive.value = songRequestInfo.songs
+      }
+    } else {
+      message.error(`点歌失败: ${data.message}`)
+    }
+  } catch (err) {
+    console.error('点歌出错:', err)
+    message.error(`点歌失败: ${err instanceof Error ? err.message : String(err)}`)
+  }
+}
+
+// 监听动态配置变化，重新获取配置
+watch(
+  () => dynamicConfigRef.value,
+  (newValue) => {
+    if (newValue?.Config) {
+      getConfig()
+    }
+  },
+  { immediate: false },
+)
+
+// 监听用户ID变化，重新加载数据
+watch(
+  () => props.userInfo?.id,
+  () => {
+    if (!props.fakeData) {
+      getSongs()
+      getSongRequestInfo().then((info) => {
+        if (info) {
+          songsActive.value = info.songs || []
+          settings.value = info.setting || settings.value
+        }
+      })
+    }
+  },
+)
+
+// 组件挂载时初始化
+onMounted(async () => {
+  if (!props.fakeData) {
+    try {
+      // 并行加载歌单和点歌设置
+      await Promise.all([
+        getSongs(),
+        getSongRequestInfo().then((info) => {
+          if (info) {
+            songsActive.value = info.songs || []
+            settings.value = info.setting || settings.value
+          }
+        }),
+      ])
+    } catch (err) {
+      console.error('初始化失败:', err)
+      message.error(`初始化失败: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      isDataLoading.value = false
+    }
+  } else {
+    // 测试模式使用假数据
+    currentData.value = props.fakeData || []
+    isDataLoading.value = false
+  }
+
+  if (!selectedTemplate.value?.settingName) {
+    isConfigLoading.value = false
+  }
+})
+</script>
+
 <template>
   <div>
     <!-- 加载中显示加载动画 -->
@@ -42,299 +337,3 @@
     </NModal>
   </div>
 </template>
-
-<script lang="ts" setup>
-import { DownloadConfig, useAccount } from '@/api/account';
-import { Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models';
-import { QueryGetAPI, QueryPostAPIWithParams } from '@/api/query';
-import { SONG_API_URL, SONG_REQUEST_API_URL, SongListTemplateMap } from '@/data/constants';
-import { ConfigItemDefinition } from '@/data/VTsuruConfigTypes';
-import { useBiliAuth } from '@/store/useBiliAuth';
-import { useStorage } from '@vueuse/core';
-import { addSeconds } from 'date-fns';
-import { NButton, NModal, NSpin, useMessage } from 'naive-ui';
-import { computed, onMounted, ref, watch } from 'vue';
-
-// 用户账号信息
-const accountInfo = useAccount();
-// 下次点歌时间
-const nextRequestTime = useStorage('SongList.NextRequestTime', new Date());
-// 点歌冷却时间(秒)
-const minRequestTime = 30;
-// 设置弹窗显示状态
-const showSettingModal = ref(false);
-
-// 组件属性
-const props = defineProps<{
-  biliInfo: any | undefined;        // B站信息
-  userInfo: UserInfo | undefined;   // 用户信息
-  template?: string | undefined;    // 模板名称
-  fakeData?: SongsInfo[];           // 测试数据
-}>();
-
-// 计算当前使用的模板类型
-const componentType = computed(() => {
-  return props.template ?? props.userInfo?.extra?.templateTypes['songlist']?.toLowerCase();
-});
-
-// 数据状态
-const currentData = ref<SongsInfo[]>([]);     // 歌单数据
-const dynamicConfigRef = ref();               // 动态配置引用
-const songsActive = ref<SongRequestInfo[]>([]); // 当前点歌列表
-const settings = ref<Setting_LiveRequest>({   // 点歌设置
-  allowFromWeb: false,
-  allowAnonymousFromWeb: false,
-  orderPrefix: '',
-} as Setting_LiveRequest);
-
-// 加载状态
-const isDataLoading = ref(true);
-const isConfigLoading = ref(true);
-const isLoading = computed(() => isDataLoading.value || isConfigLoading.value);
-
-// 计算属性
-const selectedTemplateConfig = computed(() => {
-  if (dynamicConfigRef.value?.Config) {
-    return dynamicConfigRef.value?.Config as ConfigItemDefinition[];
-  }
-  return undefined;
-});
-
-const selectedTemplate = computed(() => {
-  const type = componentType.value;
-  return type ? SongListTemplateMap[type] : SongListTemplateMap[''];
-});
-
-const currentConfig = ref({});  // 当前配置
-const message = useMessage();   // 消息提示
-const biliAuth = useBiliAuth(); // B站授权
-
-/**
- * 获取点歌设置和当前点歌列表
- */
-async function getSongRequestInfo() {
-  if (!props.userInfo?.id) return { songs: [], setting: settings.value };
-
-  try {
-    const data = await QueryGetAPI<{ songs: SongRequestInfo[]; setting: Setting_LiveRequest; }>(
-      SONG_REQUEST_API_URL + 'get-active-and-settings',
-      {
-        id: props.userInfo.id,
-      },
-    );
-
-    if (data.code === 200) {
-      return data.data;
-    } else {
-      message.warning(`获取点歌设置失败: ${data.message}`);
-    }
-  } catch (err) {
-    console.error('获取点歌设置出错:', err);
-    message.error(`获取点歌设置出错: ${err instanceof Error ? err.message : String(err)}`);
-  }
-
-  return { songs: [], setting: settings.value };
-}
-
-/**
- * 获取歌单数据
- */
-async function getSongs() {
-  if (!props.userInfo?.id) {
-    isDataLoading.value = false;
-    return;
-  }
-
-  isDataLoading.value = true;
-
-  try {
-    const data = await QueryGetAPI<SongsInfo[]>(SONG_API_URL + 'get', {
-      id: props.userInfo.id,
-    });
-
-    if (data.code === 200) {
-      currentData.value = data.data || [];
-    } else {
-      message.error('加载歌单失败: ' + data.message);
-    }
-  } catch (err) {
-    console.error('加载歌单出错:', err);
-    message.error(`加载歌单失败: ${err instanceof Error ? err.message : String(err)}`);
-  } finally {
-    isDataLoading.value = false;
-  }
-}
-
-/**
- * 获取模板配置
- */
-async function getConfig() {
-  if (!selectedTemplate.value?.settingName) {
-    isConfigLoading.value = false;
-    return;
-  }
-
-  if (!selectedTemplateConfig.value) {
-    // 等待模板配置加载完成后再获取配置
-    setTimeout(() => getConfig(), 100);
-    return;
-  }
-
-  isConfigLoading.value = true;
-
-  try {
-    const data = await DownloadConfig(
-      selectedTemplate.value.settingName,
-      props.userInfo?.id
-    );
-
-    if (data.msg) {
-      currentConfig.value = dynamicConfigRef.value?.DefaultConfig ?? {};
-    } else {
-      currentConfig.value = data.data || {};
-    }
-  } catch (err) {
-    console.error('加载配置出错:', err);
-    message.error(`加载配置失败: ${err instanceof Error ? err.message : String(err)}`);
-    currentConfig.value = dynamicConfigRef.value?.DefaultConfig ?? {};
-  } finally {
-    isConfigLoading.value = false;
-  }
-}
-
-/**
- * 复制文本到剪贴板
- */
-function copyToClipboard(text: string, sendMessage: boolean = true) {
-  navigator.clipboard.writeText(text)
-    .then(() => {
-      if (sendMessage) {
-        message.success('复制成功');
-      }
-    })
-    .catch(err => {
-      console.error('复制失败:', err);
-      message.error('复制失败，请重试');
-    });
-}
-
-/**
- * 点歌处理
- */
-async function requestSong(song: SongsInfo) {
-  if (!song) return;
-
-  const orderText = `${settings.value.orderPrefix || ''} ${song.name}`;
-
-  // 检查是否需要复制到剪贴板而不是直接点歌
-  const shouldCopyOnly = song.options ||
-    !settings.value.allowFromWeb ||
-    (settings.value.allowFromWeb && !settings.value.allowAnonymousFromWeb && !accountInfo.value.id && !biliAuth.isAuthed);
-
-  if (shouldCopyOnly) {
-    copyToClipboard(orderText, false);
-
-    if (song.options) {
-      message.info('此项目有特殊要求, 请在直播间内点歌, 点歌弹幕已复制到剪切板');
-    } else if (!settings.value.allowAnonymousFromWeb && !accountInfo.value.id && !biliAuth.isAuthed) {
-      message.info('主播不允许匿名点歌, 需要从网页点歌的话请注册登录, 点歌弹幕已复制到剪切板');
-    } else if (!settings.value.allowFromWeb) {
-      message.info('主播不允许从网页点歌, 点歌弹幕已复制到剪切板');
-    }
-    return;
-  }
-
-  // 执行网页点歌
-  if (!props.userInfo?.id) {
-    message.error('无法获取主播信息，无法完成点歌');
-    return;
-  }
-
-  // 检查点歌冷却时间
-  if (!accountInfo.value.id && nextRequestTime.value > new Date()) {
-    const remainingSeconds = Math.ceil((nextRequestTime.value.getTime() - new Date().getTime()) / 1000);
-    message.warning(`距离点歌冷却还有${remainingSeconds}秒`);
-    return;
-  }
-
-  try {
-    const data = await QueryPostAPIWithParams(SONG_REQUEST_API_URL + 'add-from-web', {
-      target: props.userInfo.id,
-      song: song.key,
-    });
-
-    if (data.code === 200) {
-      message.success('点歌成功');
-      nextRequestTime.value = addSeconds(new Date(), minRequestTime);
-      // 重新获取当前点歌列表，更新界面
-      const songRequestInfo = await getSongRequestInfo();
-      if (songRequestInfo) {
-        songsActive.value = songRequestInfo.songs;
-      }
-    } else {
-      message.error('点歌失败: ' + data.message);
-    }
-  } catch (err) {
-    console.error('点歌出错:', err);
-    message.error(`点歌失败: ${err instanceof Error ? err.message : String(err)}`);
-  }
-}
-
-// 监听动态配置变化，重新获取配置
-watch(
-  () => dynamicConfigRef.value,
-  (newValue) => {
-    if (newValue?.Config) {
-      getConfig();
-    }
-  },
-  { immediate: false }
-);
-
-// 监听用户ID变化，重新加载数据
-watch(
-  () => props.userInfo?.id,
-  () => {
-    if (!props.fakeData) {
-      getSongs();
-      getSongRequestInfo().then(info => {
-        if (info) {
-          songsActive.value = info.songs || [];
-          settings.value = info.setting || settings.value;
-        }
-      });
-    }
-  }
-);
-
-// 组件挂载时初始化
-onMounted(async () => {
-  if (!props.fakeData) {
-    try {
-      // 并行加载歌单和点歌设置
-      await Promise.all([
-        getSongs(),
-        getSongRequestInfo().then(info => {
-          if (info) {
-            songsActive.value = info.songs || [];
-            settings.value = info.setting || settings.value;
-          }
-        })
-      ]);
-    } catch (err) {
-      console.error('初始化失败:', err);
-      message.error(`初始化失败: ${err instanceof Error ? err.message : String(err)}`);
-    } finally {
-      isDataLoading.value = false;
-    }
-  } else {
-    // 测试模式使用假数据
-    currentData.value = props.fakeData || [];
-    isDataLoading.value = false;
-  }
-
-  if (!selectedTemplate.value?.settingName) {
-    isConfigLoading.value = false;
-  }
-});
-</script>
diff --git a/src/views/view/UserIndexView.vue b/src/views/view/UserIndexView.vue
index 00822e6..51ed741 100644
--- a/src/views/view/UserIndexView.vue
+++ b/src/views/view/UserIndexView.vue
@@ -1,17 +1,7 @@
-<template>
-  <div>
-    <component
-      :is="componentType"
-      :user-info="userInfo"
-      :bili-info="biliInfo"
-    />
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { UserInfo } from '@/api/api-models'
-import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplate.vue'
+import type { UserInfo } from '@/api/api-models'
 import { computed } from 'vue'
+import DefaultIndexTemplate from '@/views/view/indexTemplate/DefaultIndexTemplate.vue'
 
 const props = defineProps<{
   biliInfo: any | undefined
@@ -22,10 +12,20 @@ const props = defineProps<{
 // 计算要展示的模板组件
 const componentType = computed(() => {
   // 获取模板类型：优先使用传入的template，其次使用用户配置，默认为空字符串
-  const type = props.template ?? props.userInfo?.extra?.templateTypes['index']?.toLowerCase() ?? ''
+  const type = props.template ?? props.userInfo?.extra?.templateTypes.index?.toLowerCase() ?? ''
 
   // 无论用户信息是否存在，始终返回默认模板
   // 这里预留了根据不同类型返回不同模板的扩展性
   return DefaultIndexTemplate
 })
 </script>
+
+<template>
+  <div>
+    <component
+      :is="componentType"
+      :user-info="userInfo"
+      :bili-info="biliInfo"
+    />
+  </div>
+</template>
diff --git a/src/views/view/VideoCollectView.vue b/src/views/view/VideoCollectView.vue
index 1d67888..23b7dbc 100644
--- a/src/views/view/VideoCollectView.vue
+++ b/src/views/view/VideoCollectView.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { UserInfo, VideoCollectTable } from '@/api/api-models'
+import type { UserInfo, VideoCollectTable } from '@/api/api-models'
+import { NEmpty, NFlex, NList, NListItem, NSpin, useMessage } from 'naive-ui'
+import { ref } from 'vue'
 import { QueryGetAPI } from '@/api/query'
 import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
 import { VIDEO_COLLECT_API_URL } from '@/data/constants'
-import { NEmpty, NFlex, NList, NListItem, NSpin, useMessage } from 'naive-ui'
-import { ref } from 'vue'
 
 const props = defineProps<{
   biliInfo: any | undefined
@@ -19,14 +19,14 @@ const videoTables = ref<VideoCollectTable[]>(await get())
 async function get() {
   try {
     isLoading.value = true
-    const data = await QueryGetAPI<VideoCollectTable[]>(VIDEO_COLLECT_API_URL + 'get-active', {
+    const data = await QueryGetAPI<VideoCollectTable[]>(`${VIDEO_COLLECT_API_URL}get-active`, {
       id: props.userInfo.id,
     })
     if (data.code == 200) {
-      //videoTables.value = data.data
+      // videoTables.value = data.data
       return data.data
     } else {
-      message.error('获取失败: ' + data.message)
+      message.error(`获取失败: ${data.message}`)
       return []
     }
   } catch (err) {
diff --git a/src/views/view/forumViews/ForumCommentItem.vue b/src/views/view/forumViews/ForumCommentItem.vue
index f42fd96..a2576a9 100644
--- a/src/views/view/forumViews/ForumCommentItem.vue
+++ b/src/views/view/forumViews/ForumCommentItem.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
+import type { ForumCommentModel, ForumTopicModel } from '@/api/models/forum'
+import { ArrowReply16Filled, Delete24Filled } from '@vicons/fluent'
+import { Heart, HeartOutline, SyncCircleSharp } from '@vicons/ionicons5'
+import { NAvatar, NButton, NCard, NFlex, NIcon, NPopconfirm, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import { computed } from 'vue'
 import { useAccount } from '@/api/account'
-import { ForumCommentModel, ForumModel, ForumTopicModel } from '@/api/models/forum'
 import { VTSURU_API_URL } from '@/data/constants'
 import { useForumStore } from '@/store/useForumStore'
-import { ArrowHookUpLeft24Filled, ArrowReply16Filled, Delete24Filled } from '@vicons/fluent'
-import { Heart, HeartOutline, SyncCircleSharp } from '@vicons/ionicons5'
-import { NAvatar, NButton, NCard, NDivider, NFlex, NIcon, NPopconfirm, NTag, NText, NTime, NTooltip } from 'naive-ui'
 import ForumReplyItem from './ForumReplyItem.vue'
-import { computed } from 'vue'
 
 const props = defineProps<{
   item: ForumCommentModel
   topic: ForumTopicModel
 }>()
 
+const emits = defineEmits<{
+  (e: 'delete', id: number): void
+}>()
 const useForum = useForumStore()
 const accountInfo = useAccount()
 
@@ -21,10 +24,6 @@ const canOprate = computed(() => {
   return !props.topic.isLocked && accountInfo.value.id > 0
 })
 
-const emits = defineEmits<{
-  (e: 'delete', id: number): void
-}>()
-
 function delComment(id: number) {
   useForum.DelComment(id).then((success) => {
     if (success) {
@@ -42,7 +41,7 @@ function restoreComment(id: number) {
 function delReply(id: number) {
   useForum.DelReply(id).then((success) => {
     if (success) {
-      props.item.replies = props.item.replies.filter((reply) => reply.id !== id)
+      props.item.replies = props.item.replies.filter(reply => reply.id !== id)
     }
   })
 }
@@ -51,7 +50,7 @@ function delReply(id: number) {
 <template>
   <NFlex>
     <NAvatar
-      :src="VTSURU_API_URL + 'user-face/' + item.user.id + '?size=64'"
+      :src="`${VTSURU_API_URL}user-face/${item.user.id}?size=64`"
       :img-props="{ referrerpolicy: 'no-referrer' }"
     />
     <NFlex
diff --git a/src/views/view/forumViews/ForumPreviewItem.vue b/src/views/view/forumViews/ForumPreviewItem.vue
index 4333049..405149a 100644
--- a/src/views/view/forumViews/ForumPreviewItem.vue
+++ b/src/views/view/forumViews/ForumPreviewItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { ForumModel, ForumTopicBaseModel } from '@/api/models/forum'
-import { useForumStore } from '@/store/useForumStore'
+import type { ForumModel, ForumTopicBaseModel } from '@/api/models/forum'
 import { ArrowReply24Filled, Chat24Regular, Delete24Filled, MoreVertical24Filled, Star24Filled } from '@vicons/fluent'
 import { SyncCircleSharp } from '@vicons/ionicons5'
 import { NButton, NDropdown, NFlex, NIcon, NTag, NText, NTime, NTooltip, useDialog } from 'naive-ui'
 import { h } from 'vue'
+import { useAccount } from '@/api/account'
+import { useForumStore } from '@/store/useForumStore'
 
 const props = defineProps<{
   item: ForumTopicBaseModel
diff --git a/src/views/view/forumViews/ForumReplyItem.vue b/src/views/view/forumViews/ForumReplyItem.vue
index 8bf6f3c..ffedfb2 100644
--- a/src/views/view/forumViews/ForumReplyItem.vue
+++ b/src/views/view/forumViews/ForumReplyItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { getUserAvatarUrl } from '@/Utils'
-import { useAccount } from '@/api/account'
-import { ForumCommentModel, ForumReplyModel, ForumTopicModel } from '@/api/models/forum'
-import { useForumStore } from '@/store/useForumStore'
+import type { ForumCommentModel, ForumReplyModel, ForumTopicModel } from '@/api/models/forum'
 import { ArrowReply16Filled, Delete24Filled } from '@vicons/fluent'
-import { NAvatar, NButton, NCard, NFlex, NIcon, NPopconfirm, NText, NTime, NTooltip } from 'naive-ui'
+import { NAvatar, NButton, NFlex, NIcon, NPopconfirm, NText, NTime, NTooltip } from 'naive-ui'
 import { computed } from 'vue'
+import { useAccount } from '@/api/account'
+import { useForumStore } from '@/store/useForumStore'
+import { getUserAvatarUrl } from '@/Utils'
 
 const props = defineProps<{
   item: ForumReplyModel
@@ -16,15 +16,15 @@ const props = defineProps<{
   showReplyButton?: boolean
 }>()
 
+const emits = defineEmits<{
+  (e: 'delete', id: number): void
+}>()
 const useForum = useForumStore()
 const accountInfo = useAccount()
 
 const canOprate = computed(() => {
   return !props.topic.isLocked && accountInfo.value.id > 0
 })
-const emits = defineEmits<{
-  (e: 'delete', id: number): void
-}>()
 </script>
 
 <template>
diff --git a/src/views/view/forumViews/ForumTopicDetail.vue b/src/views/view/forumViews/ForumTopicDetail.vue
index 817916d..c21ef70 100644
--- a/src/views/view/forumViews/ForumTopicDetail.vue
+++ b/src/views/view/forumViews/ForumTopicDetail.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
-import { getUserAvatarUrl } from '@/Utils'
-import { PaginationResponse, UserInfo } from '@/api/api-models'
-import { ForumCommentModel, ForumCommentSortTypes, ForumTopicModel } from '@/api/models/forum'
-import '@/assets/forumContentStyle.css'
-import TurnstileVerify from '@/components/TurnstileVerify.vue'
-import VEditor from '@/components/VEditor.vue'
-import { VTSURU_API_URL } from '@/data/constants'
-import { useForumStore } from '@/store/useForumStore'
+import type { PaginationResponse, UserInfo } from '@/api/api-models'
+import type { ForumCommentModel, ForumTopicModel } from '@/api/models/forum'
 import {
-  ArrowCircleLeft12Filled,
   ArrowCircleLeft12Regular,
   Comment24Regular,
   Delete24Filled,
@@ -41,16 +34,23 @@ import {
 } from 'naive-ui'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useAccount } from '@/api/account'
+import { ForumCommentSortTypes } from '@/api/models/forum'
+import TurnstileVerify from '@/components/TurnstileVerify.vue'
+import VEditor from '@/components/VEditor.vue'
+import { VTSURU_API_URL } from '@/data/constants'
+import router from '@/router'
+import { useForumStore } from '@/store/useForumStore'
+import { getUserAvatarUrl } from '@/Utils'
 import ForumCommentItem from './ForumCommentItem.vue'
 import ForumReplyItem from './ForumReplyItem.vue'
-import { useAccount } from '@/api/account'
-import router from '@/router'
+import '@/assets/forumContentStyle.css'
 
-type PostCommentModel = {
+interface PostCommentModel {
   content: string
   topic: number
 }
-type PostReplyModel = {
+interface PostReplyModel {
   content: string
   comment: number
   replyTo?: number
@@ -136,7 +136,7 @@ async function refreshComments() {
 }
 function onDeleteComment(id: number) {
   if (comments.value) {
-    comments.value.data = comments.value.data.filter((c) => c.id !== id)
+    comments.value.data = comments.value.data.filter(c => c.id !== id)
   }
 }
 async function delTopic(topicId: number) {
@@ -230,7 +230,7 @@ onMounted(async () => {
             :size="5"
           >
             <NAvatar
-              :src="VTSURU_API_URL + 'user-face/' + topic?.user?.id + '?size=64'"
+              :src="`${VTSURU_API_URL}user-face/${topic?.user?.id}?size=64`"
               :img-props="{ referrerpolicy: 'no-referrer' }"
             />
             <NDivider vertical />
diff --git a/src/views/view/forumViews/ForumView.vue b/src/views/view/forumViews/ForumView.vue
index 3de3009..80753a0 100644
--- a/src/views/view/forumViews/ForumView.vue
+++ b/src/views/view/forumViews/ForumView.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { UserInfo } from '@/api/api-models'
-import { ForumPostTopicModel, ForumTopicBaseModel, ForumTopicSortTypes, ForumUserLevels } from '@/api/models/forum'
-import TurnstileVerify from '@/components/TurnstileVerify.vue'
-import VEditor from '@/components/VEditor.vue'
-import { TURNSTILE_KEY } from '@/data/constants'
-import { useForumStore } from '@/store/useForumStore'
+import type { UserInfo } from '@/api/api-models'
+import type { ForumPostTopicModel, ForumTopicBaseModel } from '@/api/models/forum'
 import { useStorage } from '@vueuse/core'
 import {
   NAlert,
@@ -21,10 +17,12 @@ import {
   useMessage,
 } from 'naive-ui'
 import { onMounted, onUnmounted, ref } from 'vue'
-import VueTurnstile from 'vue-turnstile'
-import ForumPreviewItem from './ForumPreviewItem.vue'
-import ForumCommentItem from './ForumCommentItem.vue'
 import { useAccount } from '@/api/account'
+import { ForumTopicSortTypes, ForumUserLevels } from '@/api/models/forum'
+import TurnstileVerify from '@/components/TurnstileVerify.vue'
+import VEditor from '@/components/VEditor.vue'
+import { useForumStore } from '@/store/useForumStore'
+import ForumPreviewItem from './ForumPreviewItem.vue'
 
 const { biliInfo, userInfo } = defineProps<{
   biliInfo: any | undefined
@@ -47,7 +45,7 @@ const pn = ref(0)
 const sort = ref(ForumTopicSortTypes.Time)
 
 const forumInfo = ref(await useForum.GetForumInfo(userInfo?.id ?? -1))
-const topics = ref<{ data: ForumTopicBaseModel[]; total: number; more: boolean } | undefined>({
+const topics = ref<{ data: ForumTopicBaseModel[], total: number, more: boolean } | undefined>({
   data: [],
   total: 0,
   more: false,
@@ -109,8 +107,8 @@ onUnmounted(() => {
   </NAlert>
   <NCard
     v-else-if="
-      (forumInfo.level < ForumUserLevels.Member && forumInfo.settings.requireApply) ||
-        forumInfo.settings.allowedViewerLevel > forumInfo.level
+      (forumInfo.level < ForumUserLevels.Member && forumInfo.settings.requireApply)
+        || forumInfo.settings.allowedViewerLevel > forumInfo.level
     "
   >
     <NAlert type="warning">
diff --git a/src/views/view/indexTemplate/DefaultIndexTemplate.vue b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
index 96bfad0..e43344c 100644
--- a/src/views/view/indexTemplate/DefaultIndexTemplate.vue
+++ b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
@@ -1,16 +1,14 @@
 <script lang="ts" setup>
-import { isDarkMode } from '@/Utils';
-import { useAccount } from '@/api/account';
-import { ResponseUserIndexModel, UserInfo } from '@/api/api-models';
-import { QueryGetAPI } from '@/api/query';
-import SimpleVideoCard from '@/components/SimpleVideoCard.vue';
-import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruConfigTypes';
-import { USER_INDEX_API_URL } from '@/data/constants';
-import { NAvatar, NButton, NCard, NDivider, NFlex, NSpace, NText, useMessage } from 'naive-ui';
-import { ref, computed } from 'vue';
-
-defineExpose({ Config, DefaultConfig })
-const width = window.innerWidth
+import type { ResponseUserIndexModel, UserInfo } from '@/api/api-models'
+import type { ExtractConfigData } from '@/data/VTsuruConfigTypes'
+import { NAvatar, NButton, NCard, NDivider, NFlex, NSpace, NText, useMessage } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { QueryGetAPI } from '@/api/query'
+import SimpleVideoCard from '@/components/SimpleVideoCard.vue'
+import { USER_INDEX_API_URL } from '@/data/constants'
+import { defineTemplateConfig } from '@/data/VTsuruConfigTypes'
+import { isDarkMode } from '@/Utils'
 
 const props = defineProps<{
   userInfo: UserInfo | undefined
@@ -18,6 +16,9 @@ const props = defineProps<{
   currentData?: any
   config?: any
 }>()
+defineExpose({ Config, DefaultConfig })
+const width = window.innerWidth
+
 const isLoading = ref(true)
 const message = useMessage()
 const accountInfo = useAccount()
@@ -25,30 +26,30 @@ const accountInfo = useAccount()
 const indexInfo = ref<ResponseUserIndexModel>((await getIndexInfo()) || ({} as ResponseUserIndexModel))
 // 计算链接顺序（如果后端未提供 linkOrder 则使用对象键顺序）
 const orderedLinks = computed(() => {
-  if (!indexInfo.value) return [] as [string, string][];
-  const entries = Object.entries(indexInfo.value.links || {});
-  if (!indexInfo.value.links) return [];
+  if (!indexInfo.value) return [] as [string, string][]
+  const entries = Object.entries(indexInfo.value.links || {})
+  if (!indexInfo.value.links) return []
   const order = (accountInfo.value?.settings?.index?.linkOrder?.length
     ? accountInfo.value.settings.index.linkOrder
-    : (indexInfo.value as any)?.linkOrder) as string[] | undefined;
+    : (indexInfo.value as any)?.linkOrder) as string[] | undefined
   if (order && order.length) {
-    const map = new Map(entries);
-    return order.filter(k => map.has(k)).map(k => [k, map.get(k)!]) as [string, string][];
+    const map = new Map(entries)
+    return order.filter(k => map.has(k)).map(k => [k, map.get(k)!]) as [string, string][]
   }
-  return entries;
-});
+  return entries
+})
 async function getIndexInfo() {
   try {
     isLoading.value = true
-    const data = await QueryGetAPI<ResponseUserIndexModel>(USER_INDEX_API_URL + 'get', { id: props.userInfo?.name })
+    const data = await QueryGetAPI<ResponseUserIndexModel>(`${USER_INDEX_API_URL}get`, { id: props.userInfo?.name })
     if (data.code == 200) {
       return data.data
     } else if (data.code != 404) {
-      message?.error('无法获取数据: ' + data.message)
+      message?.error(`无法获取数据: ${data.message}`)
       return undefined
     }
   } catch (err) {
-    message?.error('无法获取数据: ' + err)
+    message?.error(`无法获取数据: ${err}`)
     return undefined
   } finally {
     isLoading.value = false
@@ -64,18 +65,18 @@ function navigate(url: string) {
 export type ConfigType = ExtractConfigData<typeof Config>
 export const DefaultConfig = {} as ConfigType
 export const Config = defineTemplateConfig([
-    {
-      name: '封面',
-      type: 'file',
-      fileLimit: 1,
-      key: 'coverFile',
-    },
-    {
-      name: '测试',
-      type: 'string',
-      key: 'test',
-    },
-  ])
+  {
+    name: '封面',
+    type: 'file',
+    fileLimit: 1,
+    key: 'coverFile',
+  },
+  {
+    name: '测试',
+    type: 'string',
+    key: 'test',
+  },
+])
 </script>
 
 <template>
@@ -156,14 +157,14 @@ export const Config = defineTemplateConfig([
     >
       <NButton
         type="primary"
-        @click="navigate('https://space.bilibili.com/' + userInfo?.biliId)"
+        @click="navigate(`https://space.bilibili.com/${userInfo?.biliId}`)"
       >
         个人主页
       </NButton>
       <NButton
         type="primary"
         secondary
-        @click="navigate('https://live.bilibili.com/' + userInfo?.biliRoomId)"
+        @click="navigate(`https://live.bilibili.com/${userInfo?.biliRoomId}`)"
       >
         直播间
       </NButton>
diff --git a/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue b/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue
index abb2987..ba7e9c9 100644
--- a/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue
+++ b/src/views/view/scheduleTemplate/DefaultScheduleTemplate.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account';
-import ScheduleList from '@/components/ScheduleList.vue';
-import { ScheduleConfigType } from '@/data/TemplateTypes';
-import { NDivider } from 'naive-ui';
-
-const accountInfo = useAccount()
+import type { ScheduleConfigType } from '@/data/TemplateTypes'
+import { NDivider } from 'naive-ui'
+import { useAccount } from '@/api/account'
+import ScheduleList from '@/components/ScheduleList.vue'
 
 defineProps<ScheduleConfigType>()
+
+const accountInfo = useAccount()
 </script>
 
 <template>
diff --git a/src/views/view/scheduleTemplate/KawaiiSchedule.vue b/src/views/view/scheduleTemplate/KawaiiSchedule.vue
index abfcab0..17b6652 100644
--- a/src/views/view/scheduleTemplate/KawaiiSchedule.vue
+++ b/src/views/view/scheduleTemplate/KawaiiSchedule.vue
@@ -1,12 +1,26 @@
 <script lang="ts">
-export const Config = defineTemplateConfig([
+</script>
+
+<script setup lang="ts">
+import type { WritableComputedRef } from 'vue'
+import type { ScheduleWeekInfo, UploadFileResponse } from '@/api/api-models';
+import type { ScheduleConfigTypeWithConfig } from '@/data/TemplateTypes' // Use base type
+import type { ExtractConfigData, RGBAColor } from '@/data/VTsuruConfigTypes'
+import { getWeek, getYear } from 'date-fns'
+import { NDivider, NSelect, NSpace, useMessage } from 'naive-ui'
+import { computed, ref, watch } from 'vue'
+import { ScheduleDayInfo } from '@/api/api-models'
+import SaveCompoent from '@/components/SaveCompoent.vue' // 引入截图组件
+import { defineTemplateConfig, rgbaToString } from '@/data/VTsuruConfigTypes'
+
+const Config = defineTemplateConfig([
   {
     name: '背景图', // Removed 'as const'
     type: 'file',
     key: 'backgroundFile', // Removed 'as const'
     fileLimit: 1,
     onUploaded: (files: UploadFileResponse[], config: any) => {
-      config.backgroundFile = files;
+      config.backgroundFile = files
     },
   },
   {
@@ -56,30 +70,15 @@ export const Config = defineTemplateConfig([
     type: 'decorativeImages',
     key: 'decorativeFile',
   },
-]);
-export type KawaiiConfigType = ExtractConfigData<typeof Config>;
-export const DefaultConfig = {
+])
+type KawaiiConfigType = ExtractConfigData<typeof Config>
 
-} as KawaiiConfigType;
-</script>
-
-
-<script setup lang="ts">
-import { ScheduleDayInfo, ScheduleWeekInfo, UploadFileResponse } from '@/api/api-models';
-import SaveCompoent from '@/components/SaveCompoent.vue'; // 引入截图组件
-import { ScheduleConfigTypeWithConfig } from '@/data/TemplateTypes'; // Use base type
-import { defineTemplateConfig, ExtractConfigData, RGBAColor, rgbaToString } from '@/data/VTsuruConfigTypes';
-import { getWeek, getYear } from 'date-fns';
-import { NDivider, NSelect, NSpace, useMessage } from 'naive-ui';
-import { computed, ref, watch, WritableComputedRef } from 'vue';
+const props = defineProps<ScheduleConfigTypeWithConfig<KawaiiConfigType>>()
 
 // Get message instance
-const message = useMessage();
+const message = useMessage()
 
-const props = defineProps<ScheduleConfigTypeWithConfig<KawaiiConfigType>>();
-
-// --- 默认配置 --- Define DefaultConfig using KawaiiConfigType
-// No export needed here
+// --- 默认配置 ---
 const DefaultConfig: KawaiiConfigType = {
   backgroundFile: [],
   containerColor: { r: 255, g: 255, b: 255, a: 0.8 },
@@ -89,107 +88,108 @@ const DefaultConfig: KawaiiConfigType = {
   timeLabelBgColor: { r: 245, g: 189, b: 189, a: 1 },
   timeLabelTextColor: { r: 255, g: 255, b: 255, a: 1 },
   decorativeFile: [],
-};
+}
 
 // --- 状态 ---
-const tableRef = ref<HTMLElement | null>(null);
-const _selectedDate = ref<string>(); // Internal state
+const tableRef = ref<HTMLElement | null>(null)
+const _selectedDate = ref<string>() // Internal state
 
 // --- Computed Properties ---
 
 // 合并默认配置和传入的配置
 const effectiveConfig = computed(() => {
-  return { ...DefaultConfig, ...props.config };
-});
+  return { ...DefaultConfig, ...props.config }
+})
 
 // Writable computed for selectedDate to handle potential side effects safely
 const selectedDate: WritableComputedRef<string | undefined> = computed({
   get: () => _selectedDate.value,
-  set: (val) => { _selectedDate.value = val; }
-});
+  set: (val) => {
+    _selectedDate.value = val
+  },
+})
 
 // 周选择器选项
 const weekOptions = computed(() => {
   return props.data?.map((item: ScheduleWeekInfo) => ({
     label: `${item.year}年 第${item.week}周`,
     value: `${item.year}-${item.week}`,
-  })) ?? [];
-});
+  })) ?? []
+})
 
 // Find current/selected week data without side effects
 const currentWeekData = computed<ScheduleWeekInfo | null>(() => {
-  if (!props.data || props.data.length === 0) return null;
-  const findPredicateSelected = (item: ScheduleWeekInfo) => `${item.year}-${item.week}` === _selectedDate.value;
-  const findPredicateCurrent = (item: ScheduleWeekInfo) => isTodayInWeek(item.year, item.week);
+  if (!props.data || props.data.length === 0) return null
+  const findPredicateSelected = (item: ScheduleWeekInfo) => `${item.year}-${item.week}` === _selectedDate.value
+  const findPredicateCurrent = (item: ScheduleWeekInfo) => isTodayInWeek(item.year, item.week)
 
   let target = _selectedDate.value
     ? props.data.find(findPredicateSelected)
-    : props.data.find(findPredicateCurrent);
+    : props.data.find(findPredicateCurrent)
 
   // Fallback if target not found (e.g., selected date no longer exists)
   if (!target) {
-    target = props.data.find(findPredicateCurrent) || props.data[0];
+    target = props.data.find(findPredicateCurrent) || props.data[0]
   }
-  return target || null;
-});
+  return target || null
+})
 
 // Watcher to initialize or update selectedDate based on available data
 watch([() => props.data, currentWeekData], ([newDataArray, newCurrentWeek], [oldDataArray, oldCurrentWeek]) => {
-  const currentSelection = _selectedDate.value;
-  const dataAvailable = newDataArray && newDataArray.length > 0;
+  const currentSelection = _selectedDate.value
+  const dataAvailable = newDataArray && newDataArray.length > 0
 
   if (!currentSelection && newCurrentWeek) {
     // Initialize selection if empty and current week data is available
-    _selectedDate.value = `${newCurrentWeek.year}-${newCurrentWeek.week}`;
+    _selectedDate.value = `${newCurrentWeek.year}-${newCurrentWeek.week}`
   } else if (currentSelection && dataAvailable) {
     // Check if the currently selected date still exists in the new data array
-    const selectionExists = newDataArray.some((d: ScheduleWeekInfo) => `${d.year}-${d.week}` === currentSelection);
+    const selectionExists = newDataArray.some((d: ScheduleWeekInfo) => `${d.year}-${d.week}` === currentSelection)
     if (!selectionExists) {
       // If selection no longer exists, fallback to current week or first available
-      const fallbackWeek = newDataArray.find((d: ScheduleWeekInfo) => isTodayInWeek(d.year, d.week)) || newDataArray[0];
-      _selectedDate.value = fallbackWeek ? `${fallbackWeek.year}-${fallbackWeek.week}` : undefined;
+      const fallbackWeek = newDataArray.find((d: ScheduleWeekInfo) => isTodayInWeek(d.year, d.week)) || newDataArray[0]
+      _selectedDate.value = fallbackWeek ? `${fallbackWeek.year}-${fallbackWeek.week}` : undefined
     }
   } else if (!dataAvailable) {
     // Clear selection if no data is available
-    _selectedDate.value = undefined;
+    _selectedDate.value = undefined
   }
-}, { immediate: true });
+}, { immediate: true })
 
 // Day mapping and order
-const dayMap: Record<string, string> = { Mon: '周一', Tue: '周二', Wed: '周三', Thu: '周四', Fri: '周五', Sat: '周六', Sun: '周日' };
-const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const dayMap: Record<string, string> = { Mon: '周一', Tue: '周二', Wed: '周三', Thu: '周四', Fri: '周五', Sat: '周六', Sun: '周日' }
+const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 
 // Formatted schedule data for display
 const formattedSchedule = computed(() => {
-  if (!currentWeekData.value || !Array.isArray(currentWeekData.value.days)) return [];
+  if (!currentWeekData.value || !Array.isArray(currentWeekData.value.days)) return []
 
   return daysOfWeek.map((dayKey, index) => {
-    const dayList = currentWeekData.value!.days[index];
+    const dayList = currentWeekData.value!.days[index]
     // 如果当天有多个行程，取第一个展示；如果没有则显示默认
     const firstItem = Array.isArray(dayList) && dayList.length > 0
       ? dayList[0]
-      : { time: '', tag: '', title: '', tagColor: '', id: null };
+      : { time: '', tag: '', title: '', tagColor: '', id: null }
 
     return {
       key: dayKey,
       label: dayMap[dayKey] || dayKey,
-      data: firstItem
-    };
-  });
-});
+      data: firstItem,
+    }
+  })
+})
 
 // --- 方法 ---
 function isTodayInWeek(year: number, week: number): boolean {
-  const today = new Date();
-  const todayYear = getYear(today);
-  const todayWeek = getWeek(today, { weekStartsOn: 1 });
-  return todayYear === year && todayWeek === week;
+  const today = new Date()
+  const todayYear = getYear(today)
+  const todayWeek = getWeek(today, { weekStartsOn: 1 })
+  return todayYear === year && todayWeek === week
 }
 
 // --- Expose Config and DefaultConfig for template system ---
 // These need to be the actual constant values
-defineExpose({ Config, DefaultConfig });
-
+defineExpose({ Config, DefaultConfig })
 </script>
 
 <template>
@@ -223,7 +223,7 @@ defineExpose({ Config, DefaultConfig });
       '--day-content-text-color': rgbaToString(effectiveConfig.dayContentTextColor),
       '--time-label-bg-color': rgbaToString(effectiveConfig.timeLabelBgColor),
       '--time-label-text-color': rgbaToString(effectiveConfig.timeLabelTextColor),
-      backgroundImage: effectiveConfig.backgroundFile && effectiveConfig.backgroundFile.length > 0 ? `url(${effectiveConfig.backgroundFile[0].path})` : 'none',
+      'backgroundImage': effectiveConfig.backgroundFile && effectiveConfig.backgroundFile.length > 0 ? `url(${effectiveConfig.backgroundFile[0].path})` : 'none',
     }"
   >
     <!-- 装饰图片渲染 -->
@@ -345,7 +345,6 @@ defineExpose({ Config, DefaultConfig });
   /* Ensure image fits within its bounds */
 }
 
-
 /* --- Layout Grid --- */
 .schedule-main-grid {
   position: relative;
@@ -434,7 +433,6 @@ defineExpose({ Config, DefaultConfig });
   /* Take full width */
 }
 
-
 /* --- Week Selector Area --- */
 .kawaii-schedule-selector {
   padding: 5px 10px;
@@ -451,4 +449,4 @@ defineExpose({ Config, DefaultConfig });
 .n-card {
   transition: border 0.2s ease-in-out;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/view/scheduleTemplate/PinkySchedule.vue b/src/views/view/scheduleTemplate/PinkySchedule.vue
index 33d733c..c07321a 100644
--- a/src/views/view/scheduleTemplate/PinkySchedule.vue
+++ b/src/views/view/scheduleTemplate/PinkySchedule.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import SaveCompoent from '@/components/SaveCompoent.vue'
-import { ScheduleConfigType } from '@/data/TemplateTypes'
+import type { ScheduleConfigType } from '@/data/TemplateTypes'
 import { getWeek, getYear } from 'date-fns'
 import { NDivider, NSelect, NSpace } from 'naive-ui'
 import { computed, onMounted, ref } from 'vue'
-
-const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-const table = ref()
+import SaveCompoent from '@/components/SaveCompoent.vue'
 
 const props = defineProps<ScheduleConfigType>()
+const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+const table = ref()
 
 const currentWeek = computed(() => {
   if (props.data?.length == 1) {
@@ -16,7 +15,7 @@ const currentWeek = computed(() => {
   }
   return props.data?.find((item) => {
     if (selectedDate.value) {
-      return item.year + '-' + item.week === selectedDate.value
+      return `${item.year}-${item.week}` === selectedDate.value
     }
     return isTodayInWeek(item.year, item.week)
   })
@@ -25,7 +24,7 @@ const currentWeek = computed(() => {
 const formattedDays = computed(() => {
   const weekData = currentWeek.value
   if (!weekData || !Array.isArray(weekData.days)) return []
-  
+
   return weekData.days.map((dayList) => {
     // 取每天第一个行程展示
     if (Array.isArray(dayList) && dayList.length > 0) {
@@ -37,8 +36,8 @@ const formattedDays = computed(() => {
 const options = computed(() => {
   return props.data?.map((item) => {
     return {
-      label: item.year + '年' + item.week + '周',
-      value: item.year + '-' + item.week,
+      label: `${item.year}年${item.week}周`,
+      value: `${item.year}-${item.week}`,
     }
   })
 })
@@ -54,7 +53,7 @@ function isTodayInWeek(year: number, week: number): boolean {
 
 onMounted(() => {
   if (currentWeek.value) {
-    selectedDate.value = currentWeek.value.year + '-' + currentWeek.value.week
+    selectedDate.value = `${currentWeek.value.year}-${currentWeek.value.week}`
   }
 })
 </script>
diff --git a/src/views/view/songListTemplate/DefaultSongListTemplate.vue b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
index d44bba6..5047f57 100644
--- a/src/views/view/songListTemplate/DefaultSongListTemplate.vue
+++ b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
@@ -1,45 +1,44 @@
 <script setup lang="ts">
+import type { SongsInfo } from '@/api/api-models'
+import type { SongListConfigType } from '@/data/TemplateTypes'
+import { ChevronLeft24Filled, ChevronRight24Filled, CloudAdd20Filled } from '@vicons/fluent'
+import { NButton, NCard, NCollapse, NCollapseItem, NDivider, NIcon, NTooltip, useMessage } from 'naive-ui'
+import { h, onMounted, onUnmounted, ref } from 'vue'
 import { useAccount } from '@/api/account'
-import { SongsInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
-import { SongListConfigType } from '@/data/TemplateTypes'
+import { useBiliAuth } from '@/store/useBiliAuth'
 import LiveRequestOBS from '@/views/obs/LiveRequestOBS.vue'
 import { getSongRequestTooltip } from './utils/songRequestUtils'
-import { CloudAdd20Filled, ChevronLeft24Filled, ChevronRight24Filled } from '@vicons/fluent'
-import { NButton, NCard, NCollapse, NCollapseItem, NDivider, NIcon, NTooltip, useMessage } from 'naive-ui'
-import { h, ref, onMounted, onUnmounted } from 'vue'
-import { useBiliAuth } from '@/store/useBiliAuth'
 
-const accountInfo = useAccount()
-const biliAuth = useBiliAuth()
-
-//所有模板都应该有这些
+// 所有模板都应该有这些
 const props = defineProps<SongListConfigType>()
 const emits = defineEmits(['requestSong'])
+const accountInfo = useAccount()
+const biliAuth = useBiliAuth()
 
 const isLoading = ref('')
 const message = useMessage()
 const songListRef = ref<InstanceType<typeof SongList> | null>(null)
 
 // 处理翻页逻辑
-const handlePrevPage = () => {
+function handlePrevPage() {
   if (songListRef.value) {
     songListRef.value.prevPage()
   }
 }
 
-const handleNextPage = () => {
+function handleNextPage() {
   if (songListRef.value) {
     songListRef.value.nextPage()
   }
 }
 
 // 键盘快捷键处理函数
-const handleKeyDown = (event: KeyboardEvent) => {
+function handleKeyDown(event: KeyboardEvent) {
   // 忽略在输入框内的按键
-  if (event.target instanceof HTMLInputElement ||
-      event.target instanceof HTMLTextAreaElement ||
-      event.target instanceof HTMLSelectElement) {
+  if (event.target instanceof HTMLInputElement
+    || event.target instanceof HTMLTextAreaElement
+    || event.target instanceof HTMLSelectElement) {
     return
   }
 
@@ -64,36 +63,38 @@ onUnmounted(() => {
   window.removeEventListener('keydown', handleKeyDown)
 })
 
-const buttons = (song: SongsInfo) => [
-  accountInfo.value?.id != props.userInfo?.id
-    ? h(
-      NTooltip,
-      { trigger: 'hover' },
-      {
-        trigger: () =>
-          h(
-            NButton,
-            {
-              type: 'warning',
-              size: 'small',
-              circle: true,
-              loading: isLoading.value == song.key,
-              disabled: !accountInfo.value,
-              onClick: () => {
-                isLoading.value = song.key
-                emits('requestSong', song)
-                isLoading.value = ''
-              },
-            },
-            {
-              icon: () => h(NIcon, { component: CloudAdd20Filled }),
-            },
-          ),
-        default: () => getSongRequestTooltip(song, props.liveRequestSettings)
-      },
-    )
-    : undefined,
-]
+function buttons(song: SongsInfo) {
+  return [
+    accountInfo.value?.id != props.userInfo?.id
+      ? h(
+          NTooltip,
+          { trigger: 'hover' },
+          {
+            trigger: () =>
+              h(
+                NButton,
+                {
+                  type: 'warning',
+                  size: 'small',
+                  circle: true,
+                  loading: isLoading.value == song.key,
+                  disabled: !accountInfo.value,
+                  onClick: () => {
+                    isLoading.value = song.key
+                    emits('requestSong', song)
+                    isLoading.value = ''
+                  },
+                },
+                {
+                  icon: () => h(NIcon, { component: CloudAdd20Filled }),
+                },
+              ),
+            default: () => getSongRequestTooltip(song, props.liveRequestSettings),
+          },
+        )
+      : undefined,
+  ]
+}
 </script>
 
 <template>
diff --git a/src/views/view/songListTemplate/SimpleSongListTemplate.vue b/src/views/view/songListTemplate/SimpleSongListTemplate.vue
index d5c9760..eaf2244 100644
--- a/src/views/view/songListTemplate/SimpleSongListTemplate.vue
+++ b/src/views/view/songListTemplate/SimpleSongListTemplate.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import { GetGuardColor } from '@/Utils'
-import { useAccount } from '@/api/account'
-import { FunctionTypes, SongsInfo } from '@/api/api-models'
-import SongPlayer from '@/components/SongPlayer.vue'
-import { SongListConfigType } from '@/data/TemplateTypes'
-import LiveRequestOBS from '@/views/obs/LiveRequestOBS.vue'
-import { getSongRequestTooltip, getSongRequestButtonType } from './utils/songRequestUtils'
+import type { SongsInfo } from '@/api/api-models'
+import type { SongListConfigType } from '@/data/TemplateTypes'
 import { CloudAdd20Filled, Play24Filled } from '@vicons/fluent'
 import { useWindowSize } from '@vueuse/core'
 import { throttle } from 'lodash'
-import { useBiliAuth } from '@/store/useBiliAuth'
 import {
   NButton,
   NCard,
@@ -30,6 +24,13 @@ import {
   NTooltip,
 } from 'naive-ui'
 import { computed, ref } from 'vue'
+import { useAccount } from '@/api/account'
+import { FunctionTypes } from '@/api/api-models'
+import SongPlayer from '@/components/SongPlayer.vue'
+import { useBiliAuth } from '@/store/useBiliAuth'
+import { GetGuardColor } from '@/Utils'
+import LiveRequestOBS from '@/views/obs/LiveRequestOBS.vue'
+import { getSongRequestButtonType, getSongRequestTooltip } from './utils/songRequestUtils'
 
 const props = defineProps<SongListConfigType>()
 const emits = defineEmits(['requestSong'])
@@ -81,9 +82,9 @@ const songs = computed(() => {
     return props.data
       .filter((item) => {
         return (
-          (!selectedTag.value || item.tags?.includes(selectedTag.value)) &&
-          (!searchKeyword.value || item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())) &&
-          (!selectedAuthor.value || item.author?.includes(selectedAuthor.value) == true)
+          (!selectedTag.value || item.tags?.includes(selectedTag.value))
+          && (!searchKeyword.value || item.name.toLowerCase().includes(searchKeyword.value.toLowerCase()))
+          && (!selectedAuthor.value || item.author?.includes(selectedAuthor.value) == true)
         )
       })
       .slice(0, index.value)
@@ -102,6 +103,7 @@ function loadMore() {
   }
 }
 </script>
+
 <template>
   <div
     :style="{
diff --git a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
index bf58d76..c679f64 100644
--- a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
+++ b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
@@ -1,230 +1,231 @@
 <script setup lang="ts">
-import { isDarkMode } from '@/Utils';
-import { useAccount } from '@/api/account';
-import { SongFrom, SongRequestOption, SongsInfo } from '@/api/api-models';
-import { SongListConfigTypeWithConfig } from '@/data/TemplateTypes';
-import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruConfigTypes';
-import { useBiliAuth } from '@/store/useBiliAuth';
-import bilibili from '@/svgs/bilibili.svg';
-import douyin from '@/svgs/douyin.svg';
-import FiveSingIcon from '@/svgs/fivesing.svg';
-import neteaseMusic from '@/svgs/neteaseMusic.svg';
-import qqMusic from '@/svgs/qqMusic.svg';
-import { ArrowCounterclockwise20Filled, ArrowSortDown20Filled, ArrowSortUp20Filled, SquareArrowForward24Filled } from '@vicons/fluent';
-import { List } from 'linqts';
-import { NButton, NFlex, NIcon, NInput, NInputGroup, NInputGroupLabel, NSelect, NTag, NTooltip } from 'naive-ui';
-import { computed, h, ref, VNode, watch } from 'vue';
-import { getSongRequestConfirmText, getSongRequestTooltip } from './utils/songRequestUtils';
+import type { VNode } from 'vue'
+import type { SongRequestOption, SongsInfo } from '@/api/api-models'
+import type { SongListConfigTypeWithConfig } from '@/data/TemplateTypes'
+import type { ExtractConfigData } from '@/data/VTsuruConfigTypes'
+import { ArrowCounterclockwise20Filled, ArrowSortDown20Filled, ArrowSortUp20Filled, SquareArrowForward24Filled } from '@vicons/fluent'
+import { List } from 'linqts'
+import { NButton, NFlex, NIcon, NInput, NInputGroup, NInputGroupLabel, NSelect, NTag, NTooltip } from 'naive-ui'
+import { computed, h, ref, watch } from 'vue'
+import { useAccount } from '@/api/account'
+import { SongFrom } from '@/api/api-models'
+import { defineTemplateConfig } from '@/data/VTsuruConfigTypes'
+import { useBiliAuth } from '@/store/useBiliAuth'
+import bilibili from '@/svgs/bilibili.svg'
+import douyin from '@/svgs/douyin.svg'
+import FiveSingIcon from '@/svgs/fivesing.svg'
+import neteaseMusic from '@/svgs/neteaseMusic.svg'
+import qqMusic from '@/svgs/qqMusic.svg'
+import { isDarkMode } from '@/Utils'
+import { getSongRequestConfirmText, getSongRequestTooltip } from './utils/songRequestUtils'
 
 // Interface Tab - can be reused for both language and tag buttons
 interface FilterButton {
-  id: number;
-  name: string;
+  id: number
+  name: string
 }
 
-const props = defineProps<SongListConfigTypeWithConfig<TraditionalConfigType>>();
-defineExpose({ Config, DefaultConfig });
-const emits = defineEmits(['requestSong']);
-
-const isHovering = ref(false);
+const props = defineProps<SongListConfigTypeWithConfig<TraditionalConfigType>>()
+const emits = defineEmits(['requestSong'])
+defineExpose({ Config, DefaultConfig })
+const isHovering = ref(false)
 
 // --- State for Filters ---
-const selectedLanguage = ref<string | undefined>();
-const selectedTag = ref<string | undefined>(); // Renamed from activeTab for clarity
-const searchQuery = ref<string>('');
-const selectedArtist = ref<string | null>(null);
+const selectedLanguage = ref<string | undefined>()
+const selectedTag = ref<string | undefined>() // Renamed from activeTab for clarity
+const searchQuery = ref<string>('')
+const selectedArtist = ref<string | null>(null)
 // 添加点歌条件筛选状态
-const selectedOption = ref<string | undefined>();
+const selectedOption = ref<string | undefined>()
 
 // --- New: Sorting State ---
-type SortKey = 'name' | 'author' | 'language' | 'tags' | 'options' | 'description' | null;
-const sortKey = ref<SortKey>(null); // 当前排序列
-const sortOrder = ref<'asc' | 'desc'>('asc'); // 当前排序顺序
+type SortKey = 'name' | 'author' | 'language' | 'tags' | 'options' | 'description' | null
+const sortKey = ref<SortKey>(null) // 当前排序列
+const sortOrder = ref<'asc' | 'desc'>('asc') // 当前排序顺序
 
 // --- Computed Properties for Filter Buttons ---
 
 // Extract unique languages
 const allUniqueLanguages = computed<string[]>(() => {
-  const languages = new Set<string>();
+  const languages = new Set<string>()
 
   // 添加"未设定"语言选项
-  languages.add('未设定');
+  languages.add('未设定')
 
-  props.data?.forEach(song => {
-    song.language?.forEach(lang => {
+  props.data?.forEach((song) => {
+    song.language?.forEach((lang) => {
       if (lang?.trim()) {
-        languages.add(lang.trim());
+        languages.add(lang.trim())
       }
-    });
-  });
-  return Array.from(languages).sort();
-});
+    })
+  })
+  return Array.from(languages).sort()
+})
 
 // Create structure for language buttons
 const languageButtons = computed<FilterButton[]>(() =>
-  allUniqueLanguages.value.map((lang, index) => ({ id: index, name: lang }))
-);
+  allUniqueLanguages.value.map((lang, index) => ({ id: index, name: lang })),
+)
 
 // Extract unique tags (similar to original 'tabs' logic)
 const allUniqueTags = computed<string[]>(() => {
-  const tags = new Set<string>();
+  const tags = new Set<string>()
 
   // 添加"未设定"标签选项
-  tags.add('未设定');
+  tags.add('未设定')
 
-  props.data?.forEach(song => {
-    song.tags?.forEach(tag => {
+  props.data?.forEach((song) => {
+    song.tags?.forEach((tag) => {
       if (tag?.trim()) {
-        tags.add(tag.trim());
+        tags.add(tag.trim())
       }
-    });
-  });
-  return Array.from(tags).sort();
-});
+    })
+  })
+  return Array.from(tags).sort()
+})
 
 // Create structure for tag buttons (reuse FilterButton interface)
 const tagButtons = computed<FilterButton[]>(() =>
-  allUniqueTags.value.map((tag, index) => ({ id: index, name: tag }))
-);
+  allUniqueTags.value.map((tag, index) => ({ id: index, name: tag })),
+)
 
 // --- 添加点歌条件筛选按钮 ---
 // 提取所有唯一的点歌条件类型
 const allOptionTypes = computed<string[]>(() => {
-  const optionTypes = new Set<string>();
+  const optionTypes = new Set<string>()
 
   // 添加"未设定"选项
-  optionTypes.add('未设定');
+  optionTypes.add('未设定')
   // 添加基本选项类型
-  optionTypes.add('舰长');
-  optionTypes.add('提督');
-  optionTypes.add('总督');
-  optionTypes.add('粉丝牌');
-  optionTypes.add('SC');
+  optionTypes.add('舰长')
+  optionTypes.add('提督')
+  optionTypes.add('总督')
+  optionTypes.add('粉丝牌')
+  optionTypes.add('SC')
 
-  return Array.from(optionTypes);
-});
+  return Array.from(optionTypes)
+})
 
 // 创建点歌条件筛选按钮
 const optionButtons = computed<FilterButton[]>(() =>
-  allOptionTypes.value.map((option, index) => ({ id: index, name: option }))
-);
-
+  allOptionTypes.value.map((option, index) => ({ id: index, name: option })),
+)
 
 // --- Computed Properties for Data ---
 
 // Get unique artists for the dropdown (unchanged)
 const allArtists = computed(() => {
-  const artists = new Set<string>();
-  props.data?.forEach(song => {
-    song.author?.forEach(author => {
+  const artists = new Set<string>()
+  props.data?.forEach((song) => {
+    song.author?.forEach((author) => {
       if (author?.trim()) {
-        artists.add(author.trim());
+        artists.add(author.trim())
       }
-    });
-  });
-  return Array.from(artists).sort();
-});
+    })
+  })
+  return Array.from(artists).sort()
+})
 
 // Format artists for NSelect options (unchanged)
 const artistOptions = computed(() => {
-  return allArtists.value.map(artist => ({ label: artist, value: artist }));
-});
+  return allArtists.value.map(artist => ({ label: artist, value: artist }))
+})
 
 // --- Updated Filtered & Sorted Songs Logic using linq-ts ---
 const filteredAndSortedSongs = computed(() => {
-  if (!props.data) return [];
+  if (!props.data) return []
 
-  let query = new List<SongsInfo>(props.data);
+  let query = new List<SongsInfo>(props.data)
 
   // 1. Filter by Selected Language
   if (selectedLanguage.value) {
-    const lang = selectedLanguage.value;
+    const lang = selectedLanguage.value
     if (lang === '未设定') {
       // 筛选没有设置语言或语言数组为空的歌曲
-      query = query.Where(song => !song.language || song.language.length === 0);
+      query = query.Where(song => !song.language || song.language.length === 0)
     } else {
-      query = query.Where(song => song.language?.includes(lang));
+      query = query.Where(song => song.language?.includes(lang))
     }
   }
 
   // 2. Filter by Selected Tag
   if (selectedTag.value) {
-    const tag = selectedTag.value;
+    const tag = selectedTag.value
     if (tag === '未设定') {
       // 筛选没有设置标签或标签数组为空的歌曲
-      query = query.Where(song => !song.tags || song.tags.length === 0);
+      query = query.Where(song => !song.tags || song.tags.length === 0)
     } else {
-      query = query.Where(song => song.tags?.includes(tag) ?? false);
+      query = query.Where(song => song.tags?.includes(tag) ?? false)
     }
   }
 
   // 3. Filter by Selected Artist
   if (selectedArtist.value) {
-    const artist = selectedArtist.value;
-    query = query.Where(song => song.author?.includes(artist) ?? false);
+    const artist = selectedArtist.value
+    query = query.Where(song => song.author?.includes(artist) ?? false)
   }
 
   // 新增: 4. 根据点歌条件筛选
   if (selectedOption.value) {
-    const option = selectedOption.value;
+    const option = selectedOption.value
 
     if (option === '未设定') {
       // 筛选没有设置点歌条件的歌曲
-      query = query.Where(song => !song.options);
+      query = query.Where(song => !song.options)
     } else if (option === '舰长') {
-      query = query.Where(song => song.options?.needJianzhang === true);
+      query = query.Where(song => song.options?.needJianzhang === true)
     } else if (option === '提督') {
-      query = query.Where(song => song.options?.needTidu === true);
+      query = query.Where(song => song.options?.needTidu === true)
     } else if (option === '总督') {
-      query = query.Where(song => song.options?.needZongdu === true);
+      query = query.Where(song => song.options?.needZongdu === true)
     } else if (option === '粉丝牌') {
-      query = query.Where(song => (song.options?.fanMedalMinLevel ?? 0) > 0);
+      query = query.Where(song => (song.options?.fanMedalMinLevel ?? 0) > 0)
     } else if (option === 'SC') {
-      query = query.Where(song => (song.options?.scMinPrice ?? 0) > 0);
+      query = query.Where(song => (song.options?.scMinPrice ?? 0) > 0)
     }
   }
 
   // 原有的搜索逻辑
   // 4. Filter by Search Query (case-insensitive, including tags)
   if (searchQuery.value.trim()) {
-    const lowerSearch = searchQuery.value.toLowerCase().trim();
+    const lowerSearch = searchQuery.value.toLowerCase().trim()
     query = query.Where(song =>
-      song.name.toLowerCase().includes(lowerSearch) ||
-      (song.author?.some(a => a.toLowerCase().includes(lowerSearch)) ?? false) ||
-      (song.language?.some(l => l.toLowerCase().includes(lowerSearch)) ?? false) ||
-      (song.tags?.some(t => t.toLowerCase().includes(lowerSearch)) ?? false) ||
-      (song.description?.toLowerCase().includes(lowerSearch) ?? false)
-    );
+      song.name.toLowerCase().includes(lowerSearch)
+      || (song.author?.some(a => a.toLowerCase().includes(lowerSearch)) ?? false)
+      || (song.language?.some(l => l.toLowerCase().includes(lowerSearch)) ?? false)
+      || (song.tags?.some(t => t.toLowerCase().includes(lowerSearch)) ?? false)
+      || (song.description?.toLowerCase().includes(lowerSearch) ?? false),
+    )
   }
 
   // 5. Sort the filtered songs using linq-ts
   if (sortKey.value) {
-    const key = sortKey.value;
+    const key = sortKey.value
 
     // Define selector function for linq-ts
     const keySelector = (song: SongsInfo): any => {
-        if (key === 'options') {
-            // Prefer sorting by specific conditions first if needed, then by presence
-            // Example: Sort by 'needZongdu' first if key is 'options'
-            // For simplicity, just sorting by presence (1) vs absence (0)
-            return song.options ? 1 : 0;
-        }
-        let val = song[key];
-        // Handle potential array values for sorting (simple join)
-        if (Array.isArray(val)) return val.join('').toLowerCase(); // Lowercase for consistent string sort
-        // Handle strings and other types, provide default for null/undefined
-        return (typeof val === 'string' ? val.toLowerCase() : val) ?? '';
-    };
+      if (key === 'options') {
+        // Prefer sorting by specific conditions first if needed, then by presence
+        // Example: Sort by 'needZongdu' first if key is 'options'
+        // For simplicity, just sorting by presence (1) vs absence (0)
+        return song.options ? 1 : 0
+      }
+      const val = song[key]
+      // Handle potential array values for sorting (simple join)
+      if (Array.isArray(val)) return val.join('').toLowerCase() // Lowercase for consistent string sort
+      // Handle strings and other types, provide default for null/undefined
+      return (typeof val === 'string' ? val.toLowerCase() : val) ?? ''
+    }
 
     // Define a stable secondary sort key selector
     const secondaryKeySelector = (song: SongsInfo): string | number => {
-        return song.id ?? (song.name + '-' + (song.author?.join('/') ?? '')); // Use ID or fallback key
-    };
+      return song.id ?? (`${song.name}-${song.author?.join('/') ?? ''}`) // Use ID or fallback key
+    }
 
     if (sortOrder.value === 'asc') {
-        query = query.OrderBy(keySelector).ThenBy(secondaryKeySelector); // Add ThenBy for stability
+      query = query.OrderBy(keySelector).ThenBy(secondaryKeySelector) // Add ThenBy for stability
     } else {
-        query = query.OrderByDescending(keySelector).ThenBy(secondaryKeySelector); // Add ThenBy for stability
+      query = query.OrderByDescending(keySelector).ThenBy(secondaryKeySelector) // Add ThenBy for stability
     }
   }
   // else if no primary sort key, maybe apply a default sort? e.g., by name
@@ -232,112 +233,112 @@ const filteredAndSortedSongs = computed(() => {
   //    query = query.OrderBy(s => s.name);
   // }
 
-  return query.ToArray(); // Get the final array
-});
+  return query.ToArray() // Get the final array
+})
 
 // --- Methods ---
 
 // Select/Deselect Language
-const selectLanguage = (langName: string) => {
+function selectLanguage(langName: string) {
   if (langName === selectedLanguage.value) {
-    selectedLanguage.value = undefined; // Clear filter if clicking the active one
+    selectedLanguage.value = undefined // Clear filter if clicking the active one
   } else {
-    selectedLanguage.value = langName;
+    selectedLanguage.value = langName
   }
-};
+}
 
 // Select/Deselect Tag
-const selectTag = (tagName: string) => {
+function selectTag(tagName: string) {
   if (tagName === selectedTag.value) {
-    selectedTag.value = undefined; // Clear filter if clicking the active one
+    selectedTag.value = undefined // Clear filter if clicking the active one
   } else {
-    selectedTag.value = tagName;
+    selectedTag.value = tagName
   }
-};
+}
 
 // 新增: 选择/取消选择点歌条件
-const selectOption = (optionName: string) => {
+function selectOption(optionName: string) {
   if (optionName === selectedOption.value) {
-    selectedOption.value = undefined; // 点击已激活的按钮则取消筛选
+    selectedOption.value = undefined // 点击已激活的按钮则取消筛选
   } else {
-    selectedOption.value = optionName;
+    selectedOption.value = optionName
   }
-};
+}
 
 // Select Artist (from table click, updated to allow deselect)
-const selectArtistFromTable = (artist: string) => {
+function selectArtistFromTable(artist: string) {
   if (selectedArtist.value === artist) {
-    selectedArtist.value = null; // Deselect if clicking the already selected artist
+    selectedArtist.value = null // Deselect if clicking the already selected artist
   } else {
-    selectedArtist.value = artist; // Select the new artist
+    selectedArtist.value = artist // Select the new artist
   }
-};
+}
 
 // Select Language (from table click, allows deselect)
-const selectLanguageFromTable = (lang: string) => {
+function selectLanguageFromTable(lang: string) {
   if (selectedLanguage.value === lang) {
-    selectedLanguage.value = undefined; // Use undefined based on existing filter logic
+    selectedLanguage.value = undefined // Use undefined based on existing filter logic
   } else {
-    selectedLanguage.value = lang;
+    selectedLanguage.value = lang
   }
-};
+}
 
 // --- New: Clear All Filters ---
-const clearFilters = () => {
-  selectedLanguage.value = undefined;
-  selectedTag.value = undefined;
-  selectedArtist.value = null; // Reset NSelect value
-  selectedOption.value = undefined; // 清除点歌条件筛选
-  searchQuery.value = '';
-};
+function clearFilters() {
+  selectedLanguage.value = undefined
+  selectedTag.value = undefined
+  selectedArtist.value = null // Reset NSelect value
+  selectedOption.value = undefined // 清除点歌条件筛选
+  searchQuery.value = ''
+}
 
 // --- Updated Sorting Method ---
-const handleSort = (key: SortKey) => {
+function handleSort(key: SortKey) {
   if (sortKey.value === key) {
     // Cycle through asc -> desc -> null (clear sort)
     if (sortOrder.value === 'asc') {
-      sortOrder.value = 'desc';
+      sortOrder.value = 'desc'
     } else {
       // If already desc, clear the sort
-      sortKey.value = null;
+      sortKey.value = null
       // Optional: Reset sortOrder, though it doesn't matter when sortKey is null
       // sortOrder.value = 'asc';
     }
   } else {
     // Set new key and default to ascending order
-    sortKey.value = key;
-    sortOrder.value = 'asc';
+    sortKey.value = key
+    sortOrder.value = 'asc'
   }
-};
+}
 
 // --- Updated Helper function for Sort Icons ---
-const getSortIcon = (key: SortKey) => {
+function getSortIcon(key: SortKey) {
   if (sortKey.value !== key) {
     // Show inactive sort icon (down arrow as placeholder)
-    return h(NIcon, { component: ArrowSortDown20Filled, style: { opacity: 0.3, marginLeft: '4px', verticalAlign: 'middle' } });
+    return h(NIcon, { component: ArrowSortDown20Filled, style: { opacity: 0.3, marginLeft: '4px', verticalAlign: 'middle' } })
   }
   // Show active sort icon (up or down)
-  return h(NIcon, { component: sortOrder.value === 'asc' ? ArrowSortUp20Filled : ArrowSortDown20Filled, style: { marginLeft: '4px', verticalAlign: 'middle' } });
+  return h(NIcon, { component: sortOrder.value === 'asc' ? ArrowSortUp20Filled : ArrowSortDown20Filled, style: { marginLeft: '4px', verticalAlign: 'middle' } })
   // Note: We don't need a specific 'clear' icon here, as clicking 'desc' clears the sort and the icon reverts to inactive.
-};
+}
 
 // Watcher for artist selection (unchanged, good practice)
 watch(allArtists, (newArtists) => {
   if (selectedArtist.value && !newArtists.includes(selectedArtist.value)) {
-    selectedArtist.value = null;
+    selectedArtist.value = null
   }
-});
+})
 
-const accountInfo = useAccount();
-const biliAuth = useBiliAuth();
+const accountInfo = useAccount()
+const biliAuth = useBiliAuth()
 
-const randomOrder = () => {
-  const songsToChooseFrom = filteredAndSortedSongs.value.length > 0 ? filteredAndSortedSongs.value : props.data ?? [];
+function randomOrder() {
+  const songsToChooseFrom = filteredAndSortedSongs.value.length > 0 ? filteredAndSortedSongs.value : props.data ?? []
   if (songsToChooseFrom.length === 0) {
-    window.$message?.warning('歌单为空或当前筛选无结果，无法随机点歌');
-    return;
+    window.$message?.warning('歌单为空或当前筛选无结果，无法随机点歌')
+    return
   }
-  const song = songsToChooseFrom[Math.floor(Math.random() * songsToChooseFrom.length)];
+  const song = songsToChooseFrom[Math.floor(Math.random() * songsToChooseFrom.length)]
   window.$modal.create({
     preset: 'dialog',
     type: 'success',
@@ -346,76 +347,76 @@ const randomOrder = () => {
     positiveText: '点歌',
     negativeText: '算了',
     onPositiveClick: () => {
-      emits('requestSong', song);
+      emits('requestSong', song)
     },
-  });
-};
+  })
+}
 
 function onSongClick(song: SongsInfo) {
-  const tooltip = getSongRequestTooltip(song, props.liveRequestSettings);
-  const confirmText = getSongRequestConfirmText(song);
+  const tooltip = getSongRequestTooltip(song, props.liveRequestSettings)
+  const confirmText = getSongRequestConfirmText(song)
   window.$modal.create({
     preset: 'dialog',
     title: '点歌',
-    content: `${confirmText}${tooltip !== '点歌' ? '\n' + tooltip : ''}`,
+    content: `${confirmText}${tooltip !== '点歌' ? `\n${tooltip}` : ''}`,
     positiveText: '点歌',
     negativeText: '算了',
     onPositiveClick: () => {
-      emits('requestSong', song);
+      emits('requestSong', song)
     },
-  });
+  })
 }
 
 // GetPlayButton function remains the same
 function GetPlayButton(song: SongsInfo) {
   // ... (GetPlayButton function implementation - unchanged) ...
   switch (song.from) {
-      case SongFrom.FiveSing: {
-        return h(NTooltip, null, {
-          trigger: () =>
-            h(
-              h(
-                NButton,
-                {
-                  size: 'small',
-                  color: '#00BBB3',
-                  text: true,
-                  onClick: (e) => {
-                    e.stopPropagation(); // Prevent row click
-                    window.open(`http://5sing.kugou.com/bz/${song.id}.html`);
-                  },
-                },
-                {
-                  icon: () => h(FiveSingIcon, { class: 'svg-icon fivesing' }),
-                },
-              ),
-            ),
-          default: () => '在5sing打开',
-        });
-      }
-      case SongFrom.Netease:
-        return h(NTooltip, null, {
-          trigger: () =>
+    case SongFrom.FiveSing: {
+      return h(NTooltip, null, {
+        trigger: () =>
+          h(
             h(
               NButton,
               {
                 size: 'small',
-                color: '#C20C0C',
+                color: '#00BBB3',
                 text: true,
                 onClick: (e) => {
-                  e.stopPropagation(); // Prevent row click
-                  window.open(`https://music.163.com/#/song?id=${song.id}`);
+                  e.stopPropagation() // Prevent row click
+                  window.open(`http://5sing.kugou.com/bz/${song.id}.html`)
                 },
               },
               {
-                icon: () => h(neteaseMusic, { class: 'svg-icon netease' }),
+                icon: () => h(FiveSingIcon, { class: 'svg-icon fivesing' }),
               },
             ),
-          default: () => '在网易云打开',
-        });
-      case SongFrom.Custom:
-        return song.url
-          ? h(NTooltip, null, {
+          ),
+        default: () => '在5sing打开',
+      })
+    }
+    case SongFrom.Netease:
+      return h(NTooltip, null, {
+        trigger: () =>
+          h(
+            NButton,
+            {
+              size: 'small',
+              color: '#C20C0C',
+              text: true,
+              onClick: (e) => {
+                e.stopPropagation() // Prevent row click
+                window.open(`https://music.163.com/#/song?id=${song.id}`)
+              },
+            },
+            {
+              icon: () => h(neteaseMusic, { class: 'svg-icon netease' }),
+            },
+          ),
+        default: () => '在网易云打开',
+      })
+    case SongFrom.Custom:
+      return song.url
+        ? h(NTooltip, null, {
             trigger: () =>
               h(
                 NButton,
@@ -424,8 +425,8 @@ function GetPlayButton(song: SongsInfo) {
                   color: '#6b95bd',
                   text: true,
                   onClick: (e) => {
-                    e.stopPropagation(); // Prevent row click
-                    window.open(song.url);
+                    e.stopPropagation() // Prevent row click
+                    window.open(song.url)
                   },
                 },
                 {
@@ -434,55 +435,54 @@ function GetPlayButton(song: SongsInfo) {
               ),
             default: () => '打开链接',
           })
-          : null;
-    }
+        : null
+  }
 }
 
 // --- New: Helper function for Song Request Options ---
 function getOptionDisplay(options?: SongRequestOption) {
   if (!options) {
     // 直接返回空元素，不显示"无特殊要求"
-    return h('span', {});
+    return h('span', {})
   }
 
-  const conditions: VNode[] = [];
+  const conditions: VNode[] = []
 
   if (options.needJianzhang) {
-    conditions.push(h(NTag, { size: 'small', type: 'info', style: { marginRight: '4px', marginBottom: '2px'} }, () => '舰长'));
+    conditions.push(h(NTag, { size: 'small', type: 'info', style: { marginRight: '4px', marginBottom: '2px' } }, () => '舰长'))
   }
   if (options.needTidu) {
-    conditions.push(h(NTag, { size: 'small', type: 'warning', style: { marginRight: '4px', marginBottom: '2px'} }, () => '提督'));
+    conditions.push(h(NTag, { size: 'small', type: 'warning', style: { marginRight: '4px', marginBottom: '2px' } }, () => '提督'))
   }
   if (options.needZongdu) {
-    conditions.push(h(NTag, { size: 'small', type: 'error', style: { marginRight: '4px', marginBottom: '2px'} }, () => '总督'));
+    conditions.push(h(NTag, { size: 'small', type: 'error', style: { marginRight: '4px', marginBottom: '2px' } }, () => '总督'))
   }
   if (options.fanMedalMinLevel && options.fanMedalMinLevel > 0) {
-    conditions.push(h(NTag, { size: 'small', type: 'success', style: { marginRight: '4px', marginBottom: '2px'} }, () => `粉丝牌 ${options.fanMedalMinLevel}级`));
+    conditions.push(h(NTag, { size: 'small', type: 'success', style: { marginRight: '4px', marginBottom: '2px' } }, () => `粉丝牌 ${options.fanMedalMinLevel}级`))
   }
   if (options.scMinPrice && options.scMinPrice > 0) {
-    conditions.push(h(NTag, { size: 'small', color: { color: '#E85A4F', textColor: '#fff' }, style: { marginRight: '4px', marginBottom: '2px'} }, () => `SC ¥${options.scMinPrice}`));
+    conditions.push(h(NTag, { size: 'small', color: { color: '#E85A4F', textColor: '#fff' }, style: { marginRight: '4px', marginBottom: '2px' } }, () => `SC ¥${options.scMinPrice}`))
   }
 
   if (conditions.length === 0) {
     // 如果没有条件，直接返回空元素，不显示"无特殊要求"
-    return h('span', {});
+    return h('span', {})
   }
 
   // Use NFlex for better wrapping
-  return h(NFlex, { size: 4, wrap: true, style: { gap: '4px' } }, () => conditions);
+  return h(NFlex, { size: 4, wrap: true, style: { gap: '4px' } }, () => conditions)
 }
-
 </script>
 
 <script lang="ts">
 // --- Config section remains the same ---
-const tempLinks = ref<{ name: string, url: string; }>({
+const tempLinks = ref<{ name: string, url: string }>({
   name: '',
-  url: ''
-});
+  url: '',
+})
 
-export type TraditionalConfigType = ExtractConfigData<typeof Config>;
-export const DefaultConfig = {} as TraditionalConfigType;
+export type TraditionalConfigType = ExtractConfigData<typeof Config>
+export const DefaultConfig = {} as TraditionalConfigType
 export const Config = defineTemplateConfig([
   {
     name: '背景',
@@ -490,8 +490,8 @@ export const Config = defineTemplateConfig([
     fileLimit: 1,
     key: 'backgroundFile',
     onUploaded: (file, config) => {
-      console.log(file, config);
-      config.backgroundFile = file;
+      console.log(file, config)
+      config.backgroundFile = file
     },
   },
   {
@@ -505,7 +505,7 @@ export const Config = defineTemplateConfig([
     name: '标题',
     type: 'string',
     key: 'title',
-    default: '我的歌单'
+    default: '我的歌单',
   },
   {
     name: '简介',
@@ -523,7 +523,7 @@ export const Config = defineTemplateConfig([
     type: 'string',
     key: 'longDescription',
     placeholder: '链接页里头的',
-    inputType: 'textarea'
+    inputType: 'textarea',
   },
   {
     type: 'string',
@@ -551,10 +551,9 @@ export const Config = defineTemplateConfig([
       {
         name: '📺 哔哩哔哩',
         url: 'https://www.bilibili.com/',
-      }
+      },
     ],
     render: (config) => {
-
       return h(
         NFlex,
         {
@@ -567,7 +566,7 @@ export const Config = defineTemplateConfig([
           },
         },
         () => [
-          config.links?.map((link: { name: string; url: string; }) => {
+          config.links?.map((link: { name: string, url: string }) => {
             return h(
               NTag,
               {
@@ -576,58 +575,58 @@ export const Config = defineTemplateConfig([
                   cursor: 'pointer',
                 },
                 onClick: () => {
-                  window.open(link.url, '_blank');
+                  window.open(link.url, '_blank')
                 },
                 closable: true,
                 onClose: () => {
-                  config.links = config.links.filter((l: { name: string; url: string; }) => l.name !== link.name);
+                  config.links = config.links.filter((l: { name: string, url: string }) => l.name !== link.name)
                 },
               },
-              () => link.name
-            );
+              () => link.name,
+            )
           }),
-          h(NFlex, { style: { marginTop: '5px', flexGrow: 1, minWidth: '300px' }, align:'center' }, () => [ // Wrap inputs and button
-              h(NInputGroup, { size: 'small', style:{ marginRight: '5px'} }, () => [
-                h(NInputGroupLabel, { style: { width: 'auto' } }, () => '名称'), // Auto width
-                h(NInput, {
-                  placeholder: '链接名称',
-                  value: tempLinks.value.name,
-                  onUpdateValue: (value) => {
-                    tempLinks.value.name = value;
-                  },
-                }),
-              ]),
-              h(NInputGroup, { size: 'small', style:{ marginRight: '5px'} }, () => [
-                h(NInputGroupLabel, { style: { width: 'auto' } }, () => '地址'), // Auto width
-                h(NInput, {
-                  placeholder: 'http(s)://...',
-                  value: tempLinks.value.url,
-                  onUpdateValue: (value) => {
-                    tempLinks.value.url = value;
-                  },
-                }),
-              ]),
-              h(NButton, {
-                type: 'primary',
-                size: 'small',
-                onClick: () => {
-                  if (tempLinks.value.name && tempLinks.value.url) { // Basic validation
-                    config.links = config.links || [];
-                    config.links.push({ ...tempLinks.value }); // Push a copy
-                    tempLinks.value = { // Reset
-                      name: '',
-                      url: '',
-                    };
-                  } else {
-                    window.$message?.warning("请输入链接名称和地址");
-                  }
+          h(NFlex, { style: { marginTop: '5px', flexGrow: 1, minWidth: '300px' }, align: 'center' }, () => [ // Wrap inputs and button
+            h(NInputGroup, { size: 'small', style: { marginRight: '5px' } }, () => [
+              h(NInputGroupLabel, { style: { width: 'auto' } }, () => '名称'), // Auto width
+              h(NInput, {
+                placeholder: '链接名称',
+                value: tempLinks.value.name,
+                onUpdateValue: (value) => {
+                  tempLinks.value.name = value
                 },
-                disabled: !tempLinks.value.name || !tempLinks.value.url // Disable if fields are empty
-              }, () => '添加'),
-          ])
+              }),
+            ]),
+            h(NInputGroup, { size: 'small', style: { marginRight: '5px' } }, () => [
+              h(NInputGroupLabel, { style: { width: 'auto' } }, () => '地址'), // Auto width
+              h(NInput, {
+                placeholder: 'http(s)://...',
+                value: tempLinks.value.url,
+                onUpdateValue: (value) => {
+                  tempLinks.value.url = value
+                },
+              }),
+            ]),
+            h(NButton, {
+              type: 'primary',
+              size: 'small',
+              onClick: () => {
+                if (tempLinks.value.name && tempLinks.value.url) { // Basic validation
+                  config.links = config.links || []
+                  config.links.push({ ...tempLinks.value }) // Push a copy
+                  tempLinks.value = { // Reset
+                    name: '',
+                    url: '',
+                  }
+                } else {
+                  window.$message?.warning('请输入链接名称和地址')
+                }
+              },
+              disabled: !tempLinks.value.name || !tempLinks.value.url, // Disable if fields are empty
+            }, () => '添加'),
+          ]),
 
-        ]
-      );
+        ],
+      )
     },
     // onUploaded seems irrelevant here, keep if needed elsewhere
     // onUploaded(data, config) {
@@ -636,7 +635,7 @@ export const Config = defineTemplateConfig([
     //     url: '',
     //   };
     // },
-  }
+  },
 ])
 </script>
 
@@ -660,7 +659,7 @@ export const Config = defineTemplateConfig([
         >
           <!-- Avatar -->
           <img
-            :src="'https://fetch.vtsuru.live/' + props.userInfo?.streamerInfo?.faceUrl + '@256w_256h'"
+            :src="`https://fetch.vtsuru.live/${props.userInfo?.streamerInfo?.faceUrl}@256w_256h`"
             alt="Avatar"
             class="profile-avatar"
             referrerpolicy="no-referrer"
@@ -689,7 +688,7 @@ export const Config = defineTemplateConfig([
               <!-- Add actual icons here -->
               <a
                 v-if="props.userInfo?.biliId"
-                :href="'https://space.bilibili.com/' + props.userInfo?.biliId"
+                :href="`https://space.bilibili.com/${props.userInfo?.biliId}`"
                 class="icon icon-bilibili"
                 title="Bilibili 链接"
                 target="_blank"
@@ -799,19 +798,19 @@ export const Config = defineTemplateConfig([
           <div class="filter-divider" />
 
           <!-- Filter/Search Bar Row -->
-          <n-flex
+          <NFlex
             class="song-list-filter"
             justify="space-between"
             align="center"
           >
             <!-- Left side filters: Artist, Search, Clear -->
-            <n-flex
+            <NFlex
               align="center"
               :wrap="true"
               style="flex-grow: 1;"
             >
               <!-- Artist Filter Dropdown -->
-              <n-select
+              <NSelect
                 v-model:value="selectedArtist"
                 :options="artistOptions"
                 placeholder="筛选歌手"
@@ -836,7 +835,7 @@ export const Config = defineTemplateConfig([
               </div>
 
               <!-- Clear Filters Button -->
-              <n-button
+              <NButton
                 size="small"
                 class="clear-button"
                 ghost
@@ -844,22 +843,22 @@ export const Config = defineTemplateConfig([
                 @click="clearFilters"
               >
                 <template #icon>
-                  <n-icon :component="ArrowCounterclockwise20Filled" />
+                  <NIcon :component="ArrowCounterclockwise20Filled" />
                 </template>
                 清空筛选
-              </n-button>
-            </n-flex>
+              </NButton>
+            </NFlex>
 
             <!-- Right side: Random Button -->
-            <n-button
+            <NButton
               class="refresh-button"
               size="small"
               ghost
               @click="randomOrder"
             >
               随机点歌
-            </n-button>
-          </n-flex>
+            </NButton>
+          </NFlex>
 
           <!-- Song Table -->
           <NScrollbar
@@ -927,7 +926,7 @@ export const Config = defineTemplateConfig([
                 </tr>
                 <tr
                   v-for="song in filteredAndSortedSongs"
-                  :key="song.key || (song.name + '-' + song.author?.join('/'))"
+                  :key="song.key || (`${song.name}-${song.author?.join('/')}`)"
                   :style="{
                     textShadow: isDarkMode ? '0px 1px 2px rgba(0, 0, 0, 0.4)' : '0px 1px 2px rgba(255, 255, 255, 0.4)',
                   }"
@@ -991,14 +990,14 @@ export const Config = defineTemplateConfig([
                     <!-- 移除了 "未知" 占位文本 -->
                   </td>
                   <td>
-                    <n-flex
+                    <NFlex
                       v-if="song.tags && song.tags.length > 0"
                       :size="4"
                       :wrap="true"
                       style="gap: 4px;"
                     >
                       <!-- Use NFlex for tag wrapping -->
-                      <n-tag
+                      <NTag
                         v-for="tag in song.tags"
                         :key="tag"
                         size="small"
@@ -1007,8 +1006,8 @@ export const Config = defineTemplateConfig([
                         @update:checked="selectTag(tag)"
                       >
                         {{ tag }}
-                      </n-tag>
-                    </n-flex>
+                      </NTag>
+                    </NFlex>
                     <!-- 移除了 "无标签" 占位文本 -->
                   </td>
                   <td>
@@ -1175,7 +1174,6 @@ html.dark .filter-input::placeholder {
   line-height: 28px; /* Adjust if needed */
 }
 
-
 /* --- Random Button Styling (Keep Existing) --- */
 .refresh-button {
   height: 30px;
@@ -1239,7 +1237,6 @@ html.dark .song-list-template {
   &::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-color-active); }
 }
 
-
 /* --- MODIFIED: Main Content Container --- */
 .profile-card-container {
   position: relative; /* Keep for potential absolute children if any */
@@ -1426,7 +1423,6 @@ html.dark .song-list-table thead th {
 .song-list-table th:nth-child(5) { width: 15%; }
 .song-list-table th:nth-child(6) { width: 25%; }
 
-
 .song-list-table tbody tr { transition: background-color 0.15s ease; }
 
 .song-list-table tbody td {
@@ -1547,5 +1543,4 @@ html.dark .language-link.selected-language {
 html.dark .empty-placeholder {
   color: var(--text-color-3); /* Use theme variable for dark mode */
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/view/songListTemplate/utils/songRequestUtils.ts b/src/views/view/songListTemplate/utils/songRequestUtils.ts
index 2b5341f..3443016 100644
--- a/src/views/view/songListTemplate/utils/songRequestUtils.ts
+++ b/src/views/view/songListTemplate/utils/songRequestUtils.ts
@@ -1,6 +1,6 @@
+import type { Setting_LiveRequest, SongsInfo, UserInfo } from '@/api/api-models'
 import { useAccount } from '@/api/account'
-import { Setting_LiveRequest, SongsInfo, UserInfo } from '@/api/api-models'
-import { useBiliAuth } from '@/store/useBiliAuth';
+import { useBiliAuth } from '@/store/useBiliAuth'
 
 /**
  * 获取点歌按钮的tooltip文本
@@ -12,10 +12,10 @@ import { useBiliAuth } from '@/store/useBiliAuth';
  */
 export function getSongRequestTooltip(
   song: SongsInfo,
-  liveRequestSettings: Setting_LiveRequest | undefined
+  liveRequestSettings: Setting_LiveRequest | undefined,
 ): string {
-  const accountInfo = useAccount();
-  const biliAuth = useBiliAuth();
+  const accountInfo = useAccount()
+  const biliAuth = useBiliAuth()
   // 歌曲有特殊要求
   if (song.options) {
     return '点歌 | 此项目有特殊要求, 请在直播间内点歌, 点击后将复制点歌内容到剪切板'
@@ -27,10 +27,10 @@ export function getSongRequestTooltip(
   }
 
   // 主播不允许匿名点歌且用户未登录
-  if (liveRequestSettings?.allowFromWeb &&
-      !liveRequestSettings.allowAnonymousFromWeb &&
-      !accountInfo.value.id &&
-      !biliAuth.isAuthed) {
+  if (liveRequestSettings?.allowFromWeb
+    && !liveRequestSettings.allowAnonymousFromWeb
+    && !accountInfo.value.id
+    && !biliAuth.isAuthed) {
     return '点歌 | 主播不允许匿名点歌, 需要从网页点歌的话请注册登录, 点击后将复制点歌内容到剪切板'
   }
 
@@ -54,14 +54,14 @@ export function getSongRequestButtonType(
   song: SongsInfo,
   liveRequestSettings: Setting_LiveRequest | undefined,
   isLoggedIn: boolean = true,
-  isBiliAuthed: boolean = false
+  isBiliAuthed: boolean = false,
 ): 'warning' | 'info' {
-  if (song.options ||
-      liveRequestSettings?.allowFromWeb === false ||
-      (liveRequestSettings?.allowFromWeb &&
-       !liveRequestSettings.allowAnonymousFromWeb &&
-       !isLoggedIn &&
-       !isBiliAuthed)) {
+  if (song.options
+    || liveRequestSettings?.allowFromWeb === false
+    || (liveRequestSettings?.allowFromWeb
+      && !liveRequestSettings.allowAnonymousFromWeb
+      && !isLoggedIn
+      && !isBiliAuthed)) {
     return 'warning'
   }
 
@@ -84,20 +84,20 @@ export function canRequestSong(
   liveRequestSettings: Setting_LiveRequest | undefined,
   isLoggedIn: boolean,
   isBiliAuthed: boolean = false,
-  nextRequestTime?: Date
-): { canRequest: boolean; reason?: string; shouldCopyOnly?: boolean } {
+  nextRequestTime?: Date,
+): { canRequest: boolean, reason?: string, shouldCopyOnly?: boolean } {
   // 检查主播信息
   if (!userInfo?.id) {
     return { canRequest: false, reason: '无法获取主播信息，无法完成点歌' }
   }
 
   // 判断是否应该只复制到剪贴板
-  const shouldCopyOnly = song.options ||
-    !liveRequestSettings?.allowFromWeb ||
-    (liveRequestSettings?.allowFromWeb &&
-     !liveRequestSettings.allowAnonymousFromWeb &&
-     !isLoggedIn &&
-     !isBiliAuthed)
+  const shouldCopyOnly = song.options
+    || !liveRequestSettings?.allowFromWeb
+    || (liveRequestSettings?.allowFromWeb
+      && !liveRequestSettings.allowAnonymousFromWeb
+      && !isLoggedIn
+      && !isBiliAuthed)
 
   if (shouldCopyOnly) {
     let reason = ''
@@ -118,7 +118,7 @@ export function canRequestSong(
     const remainingSeconds = Math.ceil((nextRequestTime.getTime() - new Date().getTime()) / 1000)
     return {
       canRequest: false,
-      reason: `距离点歌冷却还有${remainingSeconds}秒`
+      reason: `距离点歌冷却还有${remainingSeconds}秒`,
     }
   }
 
@@ -132,4 +132,4 @@ export function canRequestSong(
  */
 export function getSongRequestConfirmText(song: SongsInfo): string {
   return `确定要点 ${song.name} 么`
-}
\ No newline at end of file
+}
diff --git a/tsconfig.json b/tsconfig.json
index e117fa0..059bc0c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,25 +1,26 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "module": "ESNext",
-    "strict": true,
-    "moduleResolution": "Bundler",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable", "ScriptHost"],
     "useDefineForClassFields": true,
-    "allowJs": false,
-    "sourceMap": true,
     "baseUrl": ".",
-    "types": ["node", "vue-vine/macros", "jszip"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "paths": {
       "@/*": ["src/*"]
     },
-    "lib": ["ESNext", "DOM", "DOM.Iterable", "ScriptHost"],
     "resolveJsonModule": true,
+    "types": ["node", "vue-vine/macros", "jszip"],
+    "allowJs": false,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "sourceMap": true,
     "isolatedModules": true
   },
+  "references": [{ "path": "./tsconfig.node.json" }],
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
@@ -32,6 +33,5 @@
     "src/data/chat/models.js",
     "src/store/useDanmakuClient.ts"
   ],
-  "exclude": ["node_modules"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": ["node_modules"]
 }
diff --git a/vite.config.mts b/vite.config.mts
index 837b08b..b9dbf9e 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,14 +1,14 @@
+import path from 'node:path'
 // vite.config.ts
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import path from 'path';
-import AutoImport from 'unplugin-auto-import/vite';
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
-import Components from 'unplugin-vue-components/vite';
-import Markdown from 'unplugin-vue-markdown/vite';
-import { defineConfig } from 'vite';
-import svgLoader from 'vite-svg-loader';
-import { VineVitePlugin } from 'vue-vine/vite';
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import AutoImport from 'unplugin-auto-import/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import Markdown from 'unplugin-vue-markdown/vite'
+import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
+import { VineVitePlugin } from 'vue-vine/vite'
 
 // 自定义SVGO插件，删除所有名称以sodipodi:和inkscape:开头的元素
 const removeSodipodiInkscape = {
@@ -21,13 +21,13 @@ const removeSodipodiInkscape = {
           // 检查元素名称是否以sodipodi:或inkscape:开头
           if (node.name && (node.name.startsWith('sodipodi:') || node.name.startsWith('inkscape:'))) {
             // 从父节点的children数组中过滤掉当前节点
-            parentNode.children = parentNode.children.filter((child: any) => child !== node);
+            parentNode.children = parentNode.children.filter((child: any) => child !== node)
           }
         },
       },
-    };
+    }
   },
-};
+}
 
 export default defineConfig({
   plugins: [
@@ -37,10 +37,10 @@ export default defineConfig({
       template: {
         compilerOptions: {
           isCustomElement: (tag) => {
-            return tag.includes(':') || tag.startsWith('yt-');
-          }
-        }
-      }
+            return tag.includes(':') || tag.startsWith('yt-')
+          },
+        },
+      },
     }),
     vueJsx(),
     svgLoader({
@@ -51,20 +51,20 @@ export default defineConfig({
             params: {
               overrides: {
                 removeEditorsNSData: false,
-              }
-            }
+              },
+            },
           },
           removeSodipodiInkscape,
-          "convertStyleToAttrs",
-          "removeUselessDefs",
-          "removeUselessStrokeAndFill",
-          "removeUnusedNS",
-          "removeEmptyText",
-          "removeEmptyContainers",
-          "removeViewBox",
-          "cleanupIds",
-        ]
-      }
+          'convertStyleToAttrs',
+          'removeUselessDefs',
+          'removeUselessStrokeAndFill',
+          'removeUnusedNS',
+          'removeEmptyText',
+          'removeEmptyContainers',
+          'removeViewBox',
+          'cleanupIds',
+        ],
+      },
     }),
     Markdown({
       /* options */
@@ -75,10 +75,10 @@ export default defineConfig({
           'useDialog',
           'useMessage',
           'useNotification',
-          'useLoadingBar'
-        ]
+          'useLoadingBar',
+        ],
       }],
-      dts: 'src/auto-imports.d.ts'
+      dts: 'src/auto-imports.d.ts',
     }),
     Components({
       resolvers: [NaiveUiResolver()],
@@ -92,11 +92,11 @@ export default defineConfig({
   resolve: { alias: { '@': path.resolve(__dirname, 'src') } },
   define: {
     'process.env': {},
-    global: 'window',
-    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
+    'global': 'window',
+    '__BUILD_TIME__': JSON.stringify(new Date().toISOString()),
   },
   optimizeDeps: {
-    include: ['@vicons/fluent', '@vicons/ionicons5', 'vue', 'vue-router']
+    include: ['@vicons/fluent', '@vicons/ionicons5', 'vue', 'vue-router'],
   },
   build: {
     sourcemap: true,
@@ -104,12 +104,24 @@ export default defineConfig({
     minify: 'esbuild',
     chunkSizeWarningLimit: 1000,
     rollupOptions: {
-      output: {
-        manualChunks: {
-          'vue-vendor': ['vue', 'vue-router', 'pinia'],
-          'ui-vendor': ['naive-ui', '@vueuse/core'],
-        }
-      }
-    }
+      output: { // @ts-ignore
+        advancedChunks: {
+          groups: [
+            {
+              name: 'vue-vendor',
+              test: /[\\/]node_modules[\\/](vue|vue-router|pinia)[\\/]/,
+              priority: -10,
+              enforce: true,
+            },
+            {
+              name: 'ui-vendor',
+              test: /[\\/]node_modules[\\/](naive-ui|@vueuse[\\/]core)[\\/]/,
+              priority: -10,
+              enforce: true,
+            },
+          ],
+        },
+      },
+    },
   },
-});
+})