feat: 引入prettier

2025-06-29 08:32:17 +08:00
parent dfc817e3e3
commit cae0fe371b
29 changed files with 447 additions and 316 deletions
--- a/web/.prettierignore
+++ b/web/.prettierignore
@@ -0,0 +1,3 @@
+# .prettierignore
+auto-imports.d.ts
+components.d.ts
--- a/web/.prettierrc.json
+++ b/web/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 80,
+  "trailingComma": "none",
+  "ignorePath": ".prettierignore"
+}
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -1,39 +1,36 @@
-import antfu from "@antfu/eslint-config"
+import antfu from "@antfu/eslint-config";

-export default antfu(
-  {
-    formatters: {
-      /**
-       * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
-       * By default uses Prettier
-       */
-      css: true,
-      /**
-       * Format HTML files
-       * By default uses Prettier
-       */
-      html: true,
-      /**
-       * Format Markdown files
-       * Supports Prettier and dprint
-       * By default uses Prettier
-       */
-      markdown: "prettier",
-    },
-    stylistic: {
-      indent: 2,
-      quotes: "double",
-      semi: true,
-    },
-    vue: true,
-    ignores: ["node_modules", "dist"],
-    rules: {
-      "vue/html-self-closing": "off",
-      "antfu/top-level-function": "off",
-      "ts/no-unsafe-function-type": "off",
-      "no-console": "off",
-      "unused-imports/no-unused-vars": "warn",
-    },
+export default antfu({
+  formatters: {
+    /**
+     * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
+     * By default uses Prettier
+     */
+    css: true,
+    /**
+     * Format HTML files
+     * By default uses Prettier
+     */
+    html: true,
+    /**
+     * Format Markdown files
+     * Supports Prettier and dprint
+     * By default uses Prettier
+     */
+    markdown: "prettier"
  },
-
-)
+  stylistic: {
+    indent: 2,
+    quotes: "double",
+    semi: true
+  },
+  vue: true,
+  ignores: ["node_modules", "dist"],
+  rules: {
+    "vue/html-self-closing": "off",
+    "antfu/top-level-function": "off",
+    "ts/no-unsafe-function-type": "off",
+    "no-console": "off",
+    "unused-imports/no-unused-vars": "warn"
+  }
+});
--- a/web/index.html
+++ b/web/index.html
@@ -1,13 +1,16 @@
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>chat</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>chat</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
--- a/web/package.json
+++ b/web/package.json
@@ -34,8 +34,11 @@
    "@vitejs/plugin-vue": "^6.0.0",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
    "eslint-plugin-format": "^1.0.1",
+    "eslint-plugin-prettier": "^5.5.1",
    "naive-ui": "^2.42.0",
+    "prettier": "^3.6.2",
    "typescript": "~5.8.3",
    "unplugin-vue-components": "^0.28.0",
    "vite": "^7.0.0",
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -72,12 +72,21 @@ importers:
      eslint:
        specifier: ^9.29.0
        version: 9.29.0(jiti@2.4.2)
+      eslint-config-prettier:
+        specifier: ^10.1.5
+        version: 10.1.5(eslint@9.29.0(jiti@2.4.2))
      eslint-plugin-format:
        specifier: ^1.0.1
        version: 1.0.1(eslint@9.29.0(jiti@2.4.2))
+      eslint-plugin-prettier:
+        specifier: ^5.5.1
+        version: 5.5.1(eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(prettier@3.6.2)
      naive-ui:
        specifier: ^2.42.0
        version: 2.42.0(vue@3.5.17(typescript@5.8.3))
+      prettier:
+        specifier: ^3.6.2
+        version: 3.6.2
      typescript:
        specifier: ~5.8.3
        version: 5.8.3
@@ -1453,6 +1462,12 @@ packages:
    peerDependencies:
      eslint: ^9.5.0

+  eslint-config-prettier@10.1.5:
+    resolution: {integrity: sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+
  eslint-flat-config-utils@2.1.0:
    resolution: {integrity: sha512-6fjOJ9tS0k28ketkUcQ+kKptB4dBZY2VijMZ9rGn8Cwnn1SH0cZBoPXT8AHBFHxmHcLFQK9zbELDinZ2Mr1rng==}

@@ -1544,6 +1559,20 @@ packages:
    peerDependencies:
      eslint: ^9.0.0

+  eslint-plugin-prettier@5.5.1:
+    resolution: {integrity: sha512-dobTkHT6XaEVOo8IO90Q4DOSxnm3Y151QxPJlM/vKC0bVy+d6cVWQZLlFiuZPP0wS6vZwSKeJgKkcS+KfMBlRw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
  eslint-plugin-regexp@2.9.0:
    resolution: {integrity: sha512-9WqJMnOq8VlE/cK+YAo9C9YHhkOtcEtEk9d12a+H7OSZFwlpI6stiHmYPGa2VE0QhTzodJyhlyprUaXDZLgHBw==}
    engines: {node: ^18 || >=20}
@@ -2433,8 +2462,8 @@ packages:
    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
    engines: {node: '>=6.0.0'}

-  prettier@3.6.1:
-    resolution: {integrity: sha512-5xGWRa90Sp2+x1dQtNpIpeOQpTDBs9cZDmA/qs2vDNN2i18PdapqY7CmBeyLlMuGqXJRIOPaCaVZTLNQRWUH/A==}
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
    engines: {node: '>=14'}
    hasBin: true

@@ -4282,6 +4311,10 @@ snapshots:
      '@eslint/compat': 1.3.1(eslint@9.29.0(jiti@2.4.2))
      eslint: 9.29.0(jiti@2.4.2)

+  eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)):
+    dependencies:
+      eslint: 9.29.0(jiti@2.4.2)
+
  eslint-flat-config-utils@2.1.0:
    dependencies:
      pathe: 2.0.3
@@ -4327,7 +4360,7 @@ snapshots:
      eslint: 9.29.0(jiti@2.4.2)
      eslint-formatting-reporter: 0.0.0(eslint@9.29.0(jiti@2.4.2))
      eslint-parser-plain: 0.1.1
-      prettier: 3.6.1
+      prettier: 3.6.2
      synckit: 0.9.3

  eslint-plugin-import-lite@0.3.0(eslint@9.29.0(jiti@2.4.2))(typescript@5.8.3):
@@ -4407,6 +4440,15 @@ snapshots:
      tinyglobby: 0.2.14
      yaml-eslint-parser: 1.3.0

+  eslint-plugin-prettier@5.5.1(eslint-config-prettier@10.1.5(eslint@9.29.0(jiti@2.4.2)))(eslint@9.29.0(jiti@2.4.2))(prettier@3.6.2):
+    dependencies:
+      eslint: 9.29.0(jiti@2.4.2)
+      prettier: 3.6.2
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.8
+    optionalDependencies:
+      eslint-config-prettier: 10.1.5(eslint@9.29.0(jiti@2.4.2))
+
  eslint-plugin-regexp@2.9.0(eslint@9.29.0(jiti@2.4.2)):
    dependencies:
      '@eslint-community/eslint-utils': 4.7.0(eslint@9.29.0(jiti@2.4.2))
@@ -5465,7 +5507,7 @@ snapshots:
    dependencies:
      fast-diff: 1.3.0

-  prettier@3.6.1: {}
+  prettier@3.6.2: {}

  pretty-ms@9.2.0:
    dependencies:
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { GlobalThemeOverrides } from "naive-ui"
-import { zhCN } from "naive-ui"
-import { useWebSocketStore } from "@/services"
+import type { GlobalThemeOverrides } from "naive-ui";
+import { zhCN } from "naive-ui";
+import { useWebSocketStore } from "@/services";

-const websocketStore = useWebSocketStore()
+const websocketStore = useWebSocketStore();

 onMounted(() => {
-  websocketStore.connect()
-})
+  websocketStore.connect();
+});

 const themeOverrides: GlobalThemeOverrides = {
  common: {
@@ -17,12 +17,12 @@ const themeOverrides: GlobalThemeOverrides = {
    primaryColorSuppl: "#00bfff",
    fontWeightStrong: "600",
    borderRadius: "8px",
-    borderRadiusSmall: "5px",
+    borderRadiusSmall: "5px"
  },
  Button: {
-    textColor: "#0094c5",
-  },
-}
+    textColor: "#0094c5"
+  }
+};
 </script>

 <template>
--- a/web/src/assets/Icons/index.ts
+++ b/web/src/assets/Icons/index.ts
@@ -1,4 +1,4 @@
-export { default as ExclamationTriangleIcon } from "./svg/heroicons/ExclamationTriangleIcon.svg?component"
-export { default as microphone } from "./svg/heroicons/MicrophoneIcon.svg?component"
-export { default as PaperAirplaneIcon } from "./svg/heroicons/PaperAirplaneIcon.svg?component"
-export { default as TrashIcon } from "./svg/heroicons/TrashIcon.svg?component"
+export { default as ExclamationTriangleIcon } from "./svg/heroicons/ExclamationTriangleIcon.svg?component";
+export { default as microphone } from "./svg/heroicons/MicrophoneIcon.svg?component";
+export { default as PaperAirplaneIcon } from "./svg/heroicons/PaperAirplaneIcon.svg?component";
+export { default as TrashIcon } from "./svg/heroicons/TrashIcon.svg?component";
--- a/web/src/components/avatar.vue
+++ b/web/src/components/avatar.vue
@@ -6,8 +6,14 @@ const { avatar } = defineProps<{

 <template>
  <NImage
-    :src="avatar" object-fit="cover" :preview-disabled="true" width="64" height="64" class="!block !w-16 !min-w-16 !h-16" :img-props="{
-      class: 'rounded-lg !block !w-16 !min-w-16 !h-16',
+    :src="avatar"
+    width="64"
+    height="64"
+    :preview-disabled="true"
+    object-fit="cover"
+    class="!block !w-16 !min-w-16 !h-16"
+    :img-props="{
+      class: 'rounded-lg !block !w-16 !min-w-16 !h-16'
    }"
  />
 </template>
--- a/web/src/components/markdown.vue
+++ b/web/src/components/markdown.vue
@@ -17,13 +17,13 @@ const md = markdownit({
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
+        // eslint-disable-next-line unused-imports/no-unused-vars
+      } catch (__) {
      }
-      // eslint-disable-next-line unused-imports/no-unused-vars
-      catch (__) { }
    }

    return ""; // use external default escaping
-  },
+  }
 });

 // // 计算代码块宽度
@@ -35,9 +35,9 @@ const codeWidth = computed(() => {
 <template>
  <div
    class="markdown-body w-full text-base break-words whitespace-normal"
-    :style="{ '--code-width': `${codeWidth}px` }" v-html="md.render(content)"
-  >
-  </div>
+    :style="{ '--code-width': `${codeWidth}px` }"
+    v-html="md.render(content)"
+  ></div>
 </template>

 <style scoped>
--- a/web/src/interfaces/index.ts
+++ b/web/src/interfaces/index.ts
@@ -1,9 +1,9 @@
 export interface ICommonResponse<T> {
-  code: number
-  msg: string
-  data: T
+  code: number;
+  msg: string;
+  data: T;
 }

-export type IMsgOnlyResponse = ICommonResponse<{ msg: string }>
+export type IMsgOnlyResponse = ICommonResponse<{ msg: string }>;

-export * from "./chat_service"
+export * from "./chat_service";
--- a/web/src/layouts/BasicLayout.vue
+++ b/web/src/layouts/BasicLayout.vue
@@ -11,15 +11,23 @@ const { onlineCount } = storeToRefs(chatStore);
  <div class="h-screen flex overflow-hidden">
    <div class="flex-none w-[200px] h-full flex flex-col">
      <router-link class="w-full my-6 cursor-pointer" to="/">
-        <NImage class="w-full object-cover" :src="logo" alt="logo" :preview-disabled="true" />
+        <NImage
+          class="w-full object-cover"
+          :src="logo"
+          alt="logo"
+          :preview-disabled="true"
+        />
      </router-link>
      <router-link
-        class="w-full h-[52px] px-8 flex items-center cursor-pointer" :class="$route.path === '/'
-          ? [
-            'bg-[rgba(37,99,235,0.04)] text-[#0094c5] border-r-2 border-[#0094c5]',
-          ]
-          : []
-        " to="/"
+        class="w-full h-[52px] px-8 flex items-center cursor-pointer"
+        :class="
+          $route.path === '/'
+            ? [
+                'bg-[rgba(37,99,235,0.04)] text-[#0094c5] border-r-2 border-[#0094c5]'
+              ]
+            : []
+        "
+        to="/"
      >
        聊天
      </router-link>
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,14 +1,14 @@
-import { createPinia } from 'pinia'
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createPinia } from "pinia";
+import { createApp } from "vue";
+import App from "./App.vue";

-import router from './router'
-import './style.css'
+import router from "./router";
+import "./style.css";

-const pinia = createPinia()
-const app = createApp(App)
+const pinia = createPinia();
+const app = createApp(App);

-app.use(pinia)
-app.use(router)
+app.use(pinia);
+app.use(router);

-app.mount('#app')
+app.mount("#app");
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,28 +1,28 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";

-import BasicLayout from '@/layouts/BasicLayout.vue'
-import { resetDescription, setTitle } from '@/utils'
-import community from '@/views/CommunityView.vue'
+import BasicLayout from "@/layouts/BasicLayout.vue";
+import { resetDescription, setTitle } from "@/utils";
+import community from "@/views/CommunityView.vue";

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
-      path: '/',
+      path: "/",
      component: BasicLayout,
      children: [
        {
-          path: '',
-          name: 'community',
+          path: "",
+          name: "community",
          component: community,
          meta: {
-            title: '社区',
-          },
-        },
-      ],
-    },
-  ],
-})
+            title: "社区"
+          }
+        }
+      ]
+    }
+  ]
+});

 // // 权限检查函数，检查并决定是否允许访问
 // const checkPermission: NavigationGuard = (to, from, next) => {
@@ -64,17 +64,17 @@ const router = createRouter({
 // // 添加导航守卫

 router.beforeEach((to, from, next) => {
-  setTitle(to.meta.title as string)
-  resetDescription()
+  setTitle(to.meta.title as string);
+  resetDescription();

  // context.loadingBar?.start();
  // 在每个路由导航前执行权限检查
  // checkPermission(to, from, next);
-  next()
-})
+  next();
+});

 // router.afterEach(() => {
 //   context.loadingBar?.finish();
 // });

-export default router
+export default router;
--- a/web/src/services/base_service.ts
+++ b/web/src/services/base_service.ts
@@ -5,27 +5,33 @@ import { context } from "@/utils";
 const BaseClientService = axios.create();

 // 添加请求拦截器
-BaseClientService.interceptors.request.use((config) => {
-  // 在发送请求之前做些什么
-  return config;
-}, (e) => {
-  // 对请求错误做些什么
-  return Promise.reject(e);
-});
-
-// 添加响应拦截器
-BaseClientService.interceptors.response.use((response) => {
-  // 2xx 范围内的状态码都会触发该函数。
-  // 对响应数据做点什么
-  return response;
-}, (e) => {
-  // “50”开头统一处理
-  if (e.response?.status >= 500 && e.response?.status < 600) {
-    context.message?.error("服务器开小差了，请稍后再试");
+BaseClientService.interceptors.request.use(
+  (config) => {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  (e) => {
+    // 对请求错误做些什么
    return Promise.reject(e);
  }
-  return Promise.reject(e);
-});
+);
+
+// 添加响应拦截器
+BaseClientService.interceptors.response.use(
+  (response) => {
+    // 2xx 范围内的状态码都会触发该函数。
+    // 对响应数据做点什么
+    return response;
+  },
+  (e) => {
+    // “50”开头统一处理
+    if (e.response?.status >= 500 && e.response?.status < 600) {
+      context.message?.error("服务器开小差了，请稍后再试");
+      return Promise.reject(e);
+    }
+    return Promise.reject(e);
+  }
+);

 /** 基础URL */
 export const BaseUrl = "/v1";
--- a/web/src/services/chat_service.ts
+++ b/web/src/services/chat_service.ts
@@ -11,7 +11,7 @@ export class ChatService {
    accessToken: string,
    request: IChatWithLLMRequest,
    onProgress: (content: string) => void,
-    getUsageInfo: (object: UsageInfo) => void = () => { },
+    getUsageInfo: (object: UsageInfo) => void = () => {}
  ) {
    let response;
    let buffer = "";
@@ -20,10 +20,10 @@ export class ChatService {
      response = await fetch("/v1/chat/completions", {
        method: "POST",
        headers: {
-          "Authorization": `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
+          Authorization: `Bearer ${accessToken}`,
+          "Content-Type": "application/json"
        },
-        body: JSON.stringify(request),
+        body: JSON.stringify(request)
      });

      if (!response.ok) {
@@ -37,8 +37,7 @@ export class ChatService {
      while (true) {
        const { done, value } = await reader!.read();

-        if (done)
-          break;
+        if (done) break;

        // 将二进制数据转为字符串并存入缓冲区
        buffer += decoder.decode(value);
@@ -52,8 +51,7 @@ export class ChatService {
        // 处理每一行
        for (const line of lines) {
          const trimmedLine = line.trim();
-          if (!trimmedLine)
-            continue;
+          if (!trimmedLine) continue;

          if (trimmedLine.startsWith("data: ")) {
            const jsonStr = trimmedLine.slice(6);
@@ -77,18 +75,21 @@ export class ChatService {

              // 处理使用信息
              if (data.usage) {
-                const { prompt_tokens, completion_tokens, total_tokens } = data.usage;
-                getUsageInfo({ prompt_tokens, completion_tokens, total_tokens });
+                const { prompt_tokens, completion_tokens, total_tokens } =
+                  data.usage;
+                getUsageInfo({
+                  prompt_tokens,
+                  completion_tokens,
+                  total_tokens
+                });
              }
-            }
-            catch (err) {
+            } catch (err) {
              console.error("JSON解析失败:", err);
            }
          }
        }
      }
-    }
-    catch (err) {
+    } catch (err) {
      console.error("Error:", err);
    }
  }
--- a/web/src/services/index.ts
+++ b/web/src/services/index.ts
@@ -1,3 +1,3 @@
-export * from "./base_service"
-export * from "./chat_service"
-export * from "./websocket"
+export * from "./base_service";
+export * from "./chat_service";
+export * from "./websocket";
--- a/web/src/services/websocket.ts
+++ b/web/src/services/websocket.ts
@@ -36,8 +36,7 @@ export const useWebSocketStore = defineStore("websocket", () => {

      let pingIntervalId: NodeJS.Timeout | undefined;

-      if (pingIntervalId)
-        clearInterval(pingIntervalId);
+      if (pingIntervalId) clearInterval(pingIntervalId);
      pingIntervalId = setInterval(() => send("ping"), 30 * 1000);

      if (websocket.value) {
@@ -61,6 +60,6 @@ export const useWebSocketStore = defineStore("websocket", () => {
    connected,
    send,
    close,
-    connect,
+    connect
  };
 });
--- a/web/src/stores/asr_store.ts
+++ b/web/src/stores/asr_store.ts
@@ -23,8 +23,7 @@ export const useAsrStore = defineStore("asr", () => {
    if (webSocketStore.connected) {
      if (typeof data === "string") {
        webSocketStore.send(data);
-      }
-      else {
+      } else {
        webSocketStore.websocket?.send(data);
      }
    }
@@ -53,8 +52,7 @@ export const useAsrStore = defineStore("asr", () => {
   * 开始录音
   */
  const startRecording = async () => {
-    if (isRecording.value)
-      return;
+    if (isRecording.value) return;
    messages.value = [];
    // 确保 WebSocket 已连接
    if (!webSocketStore.connected) {
@@ -62,8 +60,7 @@ export const useAsrStore = defineStore("asr", () => {
      // 等待连接建立
      await new Promise<void>((resolve) => {
        const check = () => {
-          if (webSocketStore.connected)
-            resolve();
+          if (webSocketStore.connected) resolve();
          else setTimeout(check, 100);
        };
        check();
@@ -73,11 +70,14 @@ export const useAsrStore = defineStore("asr", () => {
      // 获取麦克风音频流
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      // 创建音频上下文，采样率16kHz
-      audioContext = new (window.AudioContext || (window as any).webkitAudioContext)({
-        sampleRate: 16000,
+      audioContext = new (window.AudioContext ||
+        (window as any).webkitAudioContext)({
+        sampleRate: 16000
      });
      // 用Blob方式创建AudioWorklet模块的URL
-      const blob = new Blob([audioProcessorCode], { type: "application/javascript" });
+      const blob = new Blob([audioProcessorCode], {
+        type: "application/javascript"
+      });
      const processorUrl = URL.createObjectURL(blob);
      // 加载AudioWorklet模块
      await audioContext.audioWorklet.addModule(processorUrl);
@@ -89,7 +89,7 @@ export const useAsrStore = defineStore("asr", () => {
      workletNode = new AudioWorkletNode(audioContext, "audio-processor", {
        numberOfInputs: 1,
        numberOfOutputs: 1,
-        channelCount: 1,
+        channelCount: 1
      });
      // 监听来自AudioWorklet的音频数据
      workletNode.port.onmessage = (event) => {
@@ -104,8 +104,7 @@ export const useAsrStore = defineStore("asr", () => {
      mediaStreamSource.connect(workletNode);
      workletNode.connect(audioContext.destination);
      isRecording.value = true;
-    }
-    catch (err) {
+    } catch (err) {
      // 麦克风权限失败或AudioWorklet加载失败
      console.error("需要麦克风权限才能录音", err);
    }
@@ -115,8 +114,7 @@ export const useAsrStore = defineStore("asr", () => {
   * 停止录音
   */
  const stopRecording = () => {
-    if (!isRecording.value)
-      return;
+    if (!isRecording.value) return;

    // 通知后端录音结束
    sendMessage(JSON.stringify({ type: "asr_end" }));
@@ -124,7 +122,7 @@ export const useAsrStore = defineStore("asr", () => {
    // 停止所有音轨
    if (mediaStreamSource?.mediaStream) {
      const tracks = mediaStreamSource.mediaStream.getTracks();
-      tracks.forEach(track => track.stop());
+      tracks.forEach((track) => track.stop());
    }

    // 断开音频节点
@@ -149,6 +147,6 @@ export const useAsrStore = defineStore("asr", () => {
    messages,
    startRecording,
    stopRecording,
-    sendMessage,
+    sendMessage
  };
 });
--- a/web/src/stores/chat_store.ts
+++ b/web/src/stores/chat_store.ts
@@ -1,8 +1,13 @@
-import type { IChatWithLLMRequest, ModelInfo, ModelListInfo, UsageInfo } from "@/interfaces";
+import type {
+  IChatWithLLMRequest,
+  ModelInfo,
+  ModelListInfo,
+  UsageInfo
+} from "@/interfaces";
 import { ChatService } from "@/services";

 export const useChatStore = defineStore("chat", () => {
-  const token = ("sk-fkGVZBrAqvIxLjlF3b5f19EfBb63486c90Fa5a1fBd7076Ee");
+  const token = "sk-fkGVZBrAqvIxLjlF3b5f19EfBb63486c90Fa5a1fBd7076Ee";
  // 默认模型
  const modelInfo = ref<ModelInfo | null>(null);
  // 历史消息
@@ -16,23 +21,25 @@ export const useChatStore = defineStore("chat", () => {
  const chatWithLLM = async (
    request: IChatWithLLMRequest,
    onProgress: (content: string) => void, // 接收进度回调
-    getUsageInfo: (object: UsageInfo) => void = () => { },
+    getUsageInfo: (object: UsageInfo) => void = () => {}
  ) => {
-    if (completing.value)
-      throw new Error("正在响应中");
+    if (completing.value) throw new Error("正在响应中");

    completing.value = true; // 开始请求
    try {
-      await ChatService.ChatWithLLM(token, request, (content) => {
-        onProgress(content);
-      }, (object: UsageInfo) => {
-        getUsageInfo(object);
-      });
-    }
-    catch (error) {
+      await ChatService.ChatWithLLM(
+        token,
+        request,
+        (content) => {
+          onProgress(content);
+        },
+        (object: UsageInfo) => {
+          getUsageInfo(object);
+        }
+      );
+    } catch (error) {
      console.error("请求失败:", error);
-    }
-    finally {
+    } finally {
      completing.value = false;
    }
  };
@@ -40,12 +47,11 @@ export const useChatStore = defineStore("chat", () => {
  // 添加消息到历史记录
  const addMessageToHistory = (message: string) => {
    const content = message.trim();
-    if (!content)
-      return;
+    if (!content) return;

    historyMessages.value.push({
      role: "user",
-      content,
+      content
    });
  };

@@ -54,39 +60,51 @@ export const useChatStore = defineStore("chat", () => {
    historyMessages.value = [];
  };

-  watch(historyMessages, (newVal) => {
-    // 当历史消息变化时，发送请求
-    if (newVal.length > 0) {
-      const lastMessage = newVal[newVal.length - 1];
-      if (lastMessage.role === "user" && modelInfo.value) {
-        chatWithLLM({
-          messages: newVal,
-          model: modelInfo.value?.model_id,
-        }, (content) => {
-          // 处理进度回调
-          if (
-            historyMessages.value.length === 0
-            || historyMessages.value[historyMessages.value.length - 1].role !== "assistant"
-          ) {
-            historyMessages.value.push({
-              role: "assistant",
-              content: "",
-            });
-          }
-          historyMessages.value[historyMessages.value.length - 1].content = content;
-        }, (usageInfo: UsageInfo) => {
-          // 处理使用usage信息回调
-          // 如果最后一条消息是助手的回复，则更新使用信息
-          if (
-            historyMessages.value.length > 0
-            && historyMessages.value[historyMessages.value.length - 1].role === "assistant"
-          ) {
-            historyMessages.value[historyMessages.value.length - 1].usage = usageInfo;
-          }
-        });
+  watch(
+    historyMessages,
+    (newVal) => {
+      // 当历史消息变化时，发送请求
+      if (newVal.length > 0) {
+        const lastMessage = newVal[newVal.length - 1];
+        if (lastMessage.role === "user" && modelInfo.value) {
+          chatWithLLM(
+            {
+              messages: newVal,
+              model: modelInfo.value?.model_id
+            },
+            (content) => {
+              // 处理进度回调
+              if (
+                historyMessages.value.length === 0 ||
+                historyMessages.value[historyMessages.value.length - 1].role !==
+                  "assistant"
+              ) {
+                historyMessages.value.push({
+                  role: "assistant",
+                  content: ""
+                });
+              }
+              historyMessages.value[historyMessages.value.length - 1].content =
+                content;
+            },
+            (usageInfo: UsageInfo) => {
+              // 处理使用usage信息回调
+              // 如果最后一条消息是助手的回复，则更新使用信息
+              if (
+                historyMessages.value.length > 0 &&
+                historyMessages.value[historyMessages.value.length - 1].role ===
+                  "assistant"
+              ) {
+                historyMessages.value[historyMessages.value.length - 1].usage =
+                  usageInfo;
+              }
+            }
+          );
+        }
      }
-    }
-  }, { deep: true });
+    },
+    { deep: true }
+  );

  // 模型列表
  const modelList = ref<ModelListInfo[]>([]);
@@ -96,11 +114,21 @@ export const useChatStore = defineStore("chat", () => {
    try {
      const response = await ChatService.GetModelList();
      modelList.value = response.data.data;
-    }
-    catch (error) {
+    } catch (error) {
      console.error("获取模型列表失败:", error);
    }
  };

-  return { token, completing, chatWithLLM, historyMessages, addMessageToHistory, clearHistoryMessages, getModelList, modelList, modelInfo, onlineCount };
+  return {
+    token,
+    completing,
+    chatWithLLM,
+    historyMessages,
+    addMessageToHistory,
+    clearHistoryMessages,
+    getModelList,
+    modelList,
+    modelInfo,
+    onlineCount
+  };
 });
--- a/web/src/stores/user_store.ts
+++ b/web/src/stores/user_store.ts
@@ -1,5 +1,3 @@
 export const useUserStore = defineStore("user", () => {
-  return {
-
-  };
+  return {};
 });
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,2 +1,2 @@
-@import 'tailwindcss';
-@import 'highlight.js/styles/github.css';
+@import "tailwindcss";
+@import "highlight.js/styles/github.css";
--- a/web/src/utils/context.ts
+++ b/web/src/utils/context.ts
@@ -1,9 +1,9 @@
-import type { LoadingBarApiInjection } from "naive-ui/es/loading-bar/src/LoadingBarProvider"
-import type { MessageApiInjection } from "naive-ui/es/message/src/MessageProvider"
-import type { NotificationApiInjection } from "naive-ui/es/notification/src/NotificationProvider"
+import type { LoadingBarApiInjection } from "naive-ui/es/loading-bar/src/LoadingBarProvider";
+import type { MessageApiInjection } from "naive-ui/es/message/src/MessageProvider";
+import type { NotificationApiInjection } from "naive-ui/es/notification/src/NotificationProvider";

 export const context: {
-  message?: MessageApiInjection
-  notification?: NotificationApiInjection
-  loadingBar?: LoadingBarApiInjection
-} = {}
+  message?: MessageApiInjection;
+  notification?: NotificationApiInjection;
+  loadingBar?: LoadingBarApiInjection;
+} = {};
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -1,6 +1,6 @@
-export * from "./context"
-export * from "./media"
-export * from "./pcm"
-export * from "./title"
-export * from "./title"
-export * from "./url"
+export * from "./context";
+export * from "./media";
+export * from "./pcm";
+export * from "./title";
+export * from "./title";
+export * from "./url";
--- a/web/src/utils/media.ts
+++ b/web/src/utils/media.ts
@@ -2,41 +2,34 @@
 export const matchMedia = (
  type: "sm" | "md" | "lg" | string,
  matchFunc?: Function,
-  mismatchFunc?: Function,
+  mismatchFunc?: Function
 ) => {
  if (type === "sm") {
    if (window.matchMedia("(max-width: 767.98px)").matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
-    }
-    else {
+    } else {
      mismatchFunc?.();
    }
-  }
-  else if (type === "md") {
+  } else if (type === "md") {
    if (window.matchMedia("(max-width: 992px)").matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
-    }
-    else {
+    } else {
      mismatchFunc?.();
    }
-  }
-  else if (type === "lg") {
+  } else if (type === "lg") {
    if (window.matchMedia("(max-width: 1200px)").matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
-    }
-    else {
+    } else {
      mismatchFunc?.();
    }
-  }
-  else {
+  } else {
    if (window.matchMedia(`(max-width: ${type}px)`).matches) {
      /* 窗口小于或等于 */
      matchFunc?.();
-    }
-    else {
+    } else {
      mismatchFunc?.();
    }
  }
--- a/web/src/utils/pcm.ts
+++ b/web/src/utils/pcm.ts
@@ -1,12 +1,12 @@
 export const convertToPCM16 = (float32Array: Float32Array): Uint8Array => {
-  const int16Buffer = new Int16Array(float32Array.length)
+  const int16Buffer = new Int16Array(float32Array.length);
  for (let i = 0; i < float32Array.length; i++) {
-    int16Buffer[i] = Math.max(-1, Math.min(1, float32Array[i])) * 0x7FFF
+    int16Buffer[i] = Math.max(-1, Math.min(1, float32Array[i])) * 0x7FFF;
  }
-  const buffer = new ArrayBuffer(int16Buffer.length * 2)
-  const view = new DataView(buffer)
+  const buffer = new ArrayBuffer(int16Buffer.length * 2);
+  const view = new DataView(buffer);
  for (let i = 0; i < int16Buffer.length; i++) {
-    view.setInt16(i * 2, int16Buffer[i], true)
+    view.setInt16(i * 2, int16Buffer[i], true);
  }
-  return new Uint8Array(buffer)
-}
+  return new Uint8Array(buffer);
+};
--- a/web/src/utils/title.ts
+++ b/web/src/utils/title.ts
@@ -1,25 +1,24 @@
-import { useTitle } from "@vueuse/core"
+import { useTitle } from "@vueuse/core";

-const DEFAULT_TITLE = "Agent"
+const DEFAULT_TITLE = "Agent";

 const DEFAULT_DESCRIPTION = document
  .querySelector("meta[name='description']")
-  ?.getAttribute("content")
+  ?.getAttribute("content");

 export function setTitle(title?: string) {
-  useTitle().value = (title ? `${title} | ` : "") + DEFAULT_TITLE
+  useTitle().value = (title ? `${title} | ` : "") + DEFAULT_TITLE;
 }

 export function resetDescription() {
  document
    .querySelector("meta[name='description']")
-    ?.setAttribute("content", DEFAULT_DESCRIPTION!)
+    ?.setAttribute("content", DEFAULT_DESCRIPTION!);
 }

 export function setDescription(description?: string) {
-  if (!description)
-    return
+  if (!description) return;
  document
    .querySelector("meta[name='description']")
-    ?.setAttribute("content", `${description} | ${DEFAULT_TITLE}`)
+    ?.setAttribute("content", `${description} | ${DEFAULT_TITLE}`);
 }
--- a/web/src/utils/url.ts
+++ b/web/src/utils/url.ts
@@ -1,15 +1,15 @@
 /** 直接当前页面跳转到指定url */
 export const jump = (url: string) => {
-  window.location.href = url
-}
+  window.location.href = url;
+};

 /** 在新标签页中跳转到指定url */
 export const jumpBlank = (url: string) => {
-  window.open(url, "_blank")
-}
+  window.open(url, "_blank");
+};

 /** 将对象转换为url查询字符串 */
 export const queryFormat = (query: Record<string, any>) => {
-  const params = new URLSearchParams(query)
-  return params.toString() ? `?${params}` : ""
-}
+  const params = new URLSearchParams(query);
+  return params.toString() ? `?${params}` : "";
+};
--- a/web/src/views/CommunityView.vue
+++ b/web/src/views/CommunityView.vue
@@ -2,7 +2,12 @@
 import type { SelectGroupOption, SelectOption } from "naive-ui";
 import { throttle } from "lodash-es";
 import AIAvatar from "@/assets/ai_avatar.png";
-import { ExclamationTriangleIcon, microphone, PaperAirplaneIcon, TrashIcon } from "@/assets/Icons";
+import {
+  ExclamationTriangleIcon,
+  microphone,
+  PaperAirplaneIcon,
+  TrashIcon
+} from "@/assets/Icons";
 import UserAvatar from "@/assets/user_avatar.jpg";
 import markdown from "@/components/markdown.vue";
 import { useAsrStore, useChatStore } from "@/stores";
@@ -10,7 +15,8 @@ import { useAsrStore, useChatStore } from "@/stores";
 const chatStore = useChatStore();
 const asrStore = useAsrStore();

-const { historyMessages, completing, modelList, modelInfo } = storeToRefs(chatStore);
+const { historyMessages, completing, modelList, modelInfo } =
+  storeToRefs(chatStore);
 const { isRecording } = storeToRefs(asrStore);

 const inputData = ref("");
@@ -22,40 +28,43 @@ const selectedModelId = computed({
  get: () => modelInfo.value?.model_id ?? null,
  set: (id: string | null) => {
    for (const vendor of modelList.value) {
-      const found = vendor.models.find(model => model.model_id === id);
+      const found = vendor.models.find((model) => model.model_id === id);
      if (found) {
        modelInfo.value = found;
        return;
      }
    }
    modelInfo.value = null;
-  },
+  }
 });

 // 监听模型列表变化，更新选项
-watch(() => modelList.value, (newVal) => {
-  if (newVal) {
-    options.value = newVal.map(vendor => ({
-      type: "group",
-      label: vendor.vendor,
-      key: vendor.vendor,
-      children: vendor.models.map(model => ({
-        label: model.model_name,
-        value: model.model_id,
-        type: model.model_type,
-      })),
-    }));
+watch(
+  () => modelList.value,
+  (newVal) => {
+    if (newVal) {
+      options.value = newVal.map((vendor) => ({
+        type: "group",
+        label: vendor.vendor,
+        key: vendor.vendor,
+        children: vendor.models.map((model) => ({
+          label: model.model_name,
+          value: model.model_id,
+          type: model.model_type
+        }))
+      }));

-    if (newVal.length > 0 && newVal[0].models.length > 0) {
-      modelInfo.value = newVal[0].models[0];
+      if (newVal.length > 0 && newVal[0].models.length > 0) {
+        modelInfo.value = newVal[0].models[0];
+      }
    }
-  }
-}, { immediate: true, deep: true });
+  },
+  { immediate: true, deep: true }
+);

 // 发送消息
 const handleSendMessage = () => {
-  if (inputData.value.trim() === "")
-    return;
+  if (inputData.value.trim() === "") return;
  chatStore.addMessageToHistory(inputData.value);
  inputData.value = "";
 };
@@ -64,8 +73,7 @@ const handleSendMessage = () => {
 const toggleRecording = throttle(() => {
  if (isRecording.value) {
    asrStore.stopRecording();
-  }
-  else {
+  } else {
    asrStore.startRecording();
  }
 }, 500);
@@ -84,7 +92,9 @@ onMounted(() => {
 </script>

 <template>
-  <div class="p-8 !pr-4 h-full w-full flex flex-col gap-4 border-l-[24px] border-l-[#FAFAFA] text-base">
+  <div
+    class="p-8 !pr-4 h-full w-full flex flex-col gap-4 border-l-[24px] border-l-[#FAFAFA] text-base"
+  >
    <!-- 历史消息区 -->
    <NScrollbar ref="scrollbarRef" class="flex-1 pr-4 relative">
      <div class="flex items-start mb-4">
@@ -93,20 +103,34 @@ onMounted(() => {
        </span>
        <div class="text-base w-full max-w-full ml-2 flex flex-col items-start">
          <span class="text-base font-bold mb-4">助手：</span>
-          <span class="text-base">你好，我是你的智能助手，请问有什么可以帮助你的吗？</span>
+          <span class="text-base"
+            >你好，我是你的智能助手，请问有什么可以帮助你的吗？</span
+          >
          <NDivider />
        </div>
      </div>
-      <div v-for="(msg, idx) in historyMessages" :key="idx" class="flex items-start mb-4">
-        <span v-if="msg.role === 'user'" class="rounded-lg overflow-hidden !w-16 !min-w-16 !h-16">
+      <div
+        v-for="(msg, idx) in historyMessages"
+        :key="idx"
+        class="flex items-start mb-4"
+      >
+        <span
+          v-if="msg.role === 'user'"
+          class="rounded-lg overflow-hidden !w-16 !min-w-16 !h-16"
+        >
          <avatar :avatar="UserAvatar" />
        </span>
        <span v-else class="rounded-lg overflow-hidden">
          <avatar :avatar="AIAvatar" />
        </span>
        <div class="text-base w-full max-w-full ml-2 flex flex-col items-start">
-          <span class="text-base font-bold">{{ msg.role === 'user' ? '你：' : '助手：' }}</span>
-          <div v-if="msg.role !== 'user'" class="text-[12px] text-[#7A7A7A] mb-[2px]">
+          <span class="text-base font-bold">{{
+            msg.role === "user" ? "你：" : "助手："
+          }}</span>
+          <div
+            v-if="msg.role !== 'user'"
+            class="text-[12px] text-[#7A7A7A] mb-[2px]"
+          >
            Tokens: <span class="mr-1">{{ msg.usage?.total_tokens }}</span>
          </div>
          <div class="w-full max-w-full">
@@ -124,23 +148,34 @@ onMounted(() => {
    </NScrollbar>
    <!-- 输入框 -->
    <NInput
-      v-model:value="inputData" type="textarea" placeholder="输入内容，Enter发送，Shift+Enter换行" :autosize="{
+      v-model:value="inputData"
+      type="textarea"
+      placeholder="输入内容，Enter发送，Shift+Enter换行"
+      :autosize="{
        minRows: 3,
-        maxRows: 15,
-      }" @keyup.enter="handleSendMessage"
+        maxRows: 15
+      }"
+      @keyup.enter="handleSendMessage"
    />
    <!-- 操作区 -->
    <div class="flex justify-between items-center gap-2">
      <div class="flex items-center gap-2">
        <NSelect
-          v-model:value="selectedModelId" label-field="label" value-field="value" children-field="children"
-          filterable :options="options"
+          v-model:value="selectedModelId"
+          label-field="label"
+          value-field="value"
+          children-field="children"
+          filterable
+          :options="options"
        />
      </div>
      <div class="flex items-center gap-2">
        <NPopconfirm
-          :positive-button-props="{ type: 'error' }" positive-text="清除" negative-text="取消"
-          @positive-click="chatStore.clearHistoryMessages" @negative-click="() => { }"
+          :positive-button-props="{ type: 'error' }"
+          positive-text="清除"
+          negative-text="取消"
+          @positive-click="chatStore.clearHistoryMessages"
+          @negative-click="() => {}"
        >
          <template #icon>
            <ExclamationTriangleIcon class="!w-6 !h-6 text-[#d03050]" />
@@ -158,7 +193,11 @@ onMounted(() => {
          {{ isRecording ? "停止输入" : "语音输入" }}
          <microphone class="!w-4 !h-4 ml-1" />
        </NButton>
-        <NButton :disabled="isRecording" :loading="completing" @click="handleSendMessage">
+        <NButton
+          :disabled="isRecording"
+          :loading="completing"
+          @click="handleSendMessage"
+        >
          发送
          <PaperAirplaneIcon class="!w-4 !h-4 ml-1" />
        </NButton>