diff --git a/napcat.webui/package.json b/napcat.webui/package.json
index 98d32e61..eec25b08 100644
--- a/napcat.webui/package.json
+++ b/napcat.webui/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "webui:lint": "eslint . --fix",
+    "webui:lint": "eslint --fix src/**/*.{js,ts,vue}",
     "webui:dev": "vite",
     "webui:build": "vue-tsc -b && vite build",
     "webui:preview": "vite preview"
diff --git a/napcat.webui/src/pages/AboutUs.vue b/napcat.webui/src/pages/AboutUs.vue
index 63a45fb2..4bdcf6fa 100644
--- a/napcat.webui/src/pages/AboutUs.vue
+++ b/napcat.webui/src/pages/AboutUs.vue
@@ -23,9 +23,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .about-us {
diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
index a2b5119e..a30e800a 100644
--- a/napcat.webui/src/pages/NetWork.vue
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -1,52 +1,59 @@
 <template>
     <t-space class="full-space">
-      <template v-if="clientPanelData.length > 0">
-        <t-tabs v-model="activeTab" :addable="true" theme="card" @add="showAddTabDialog" @remove="removeTab" class="full-tabs">
-          <t-tab-panel
-            v-for="(config, idx) in clientPanelData"
-            :key="idx"
-            :label="config.name"
-            :removable="true"
-            :value="idx"
-            class="full-tab-panel"
-          >
-            <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
-            <div class="button-container">
-              <t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
-            </div>
-          </t-tab-panel>
-        </t-tabs>
-      </template>
-      <template v-else>
-        <EmptyStateComponent :showAddTabDialog="showAddTabDialog" />
-      </template>
-      <t-dialog
-        v-model:visible="isDialogVisible"
-        header="添加网络配置"
-        @close="isDialogVisible = false"
-        @confirm="addTab"
-      >
-        <t-form ref="form" :model="newTab">
-          <t-form-item :rules="[{ required: true, message: '请输入名称' }]" label="名称" name="name">
-            <t-input v-model="newTab.name" />
-          </t-form-item>
-          <t-form-item :rules="[{ required: true, message: '请选择类型' }]" label="类型" name="type">
-            <t-select v-model="newTab.type">
-              <t-option value="httpServers">HTTP 服务器</t-option>
-              <t-option value="httpClients">HTTP 客户端</t-option>
-              <t-option value="websocketServers">WebSocket 服务器</t-option>
-              <t-option value="websocketClients">WebSocket 客户端</t-option>
-            </t-select>
-          </t-form-item>
-        </t-form>
-      </t-dialog>
+        <template v-if="clientPanelData.length > 0">
+            <t-tabs
+                v-model="activeTab"
+                :addable="true"
+                theme="card"
+                @add="showAddTabDialog"
+                @remove="removeTab"
+                class="full-tabs"
+            >
+                <t-tab-panel
+                    v-for="(config, idx) in clientPanelData"
+                    :key="idx"
+                    :label="config.name"
+                    :removable="true"
+                    :value="idx"
+                    class="full-tab-panel"
+                >
+                    <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
+                    <div class="button-container">
+                        <t-button @click="saveConfig" style="width: 100px; height: 40px">保存</t-button>
+                    </div>
+                </t-tab-panel>
+            </t-tabs>
+        </template>
+        <template v-else>
+            <EmptyStateComponent :showAddTabDialog="showAddTabDialog" />
+        </template>
+        <t-dialog
+            v-model:visible="isDialogVisible"
+            header="添加网络配置"
+            @close="isDialogVisible = false"
+            @confirm="addTab"
+        >
+            <t-form ref="form" :model="newTab">
+                <t-form-item :rules="[{ required: true, message: '请输入名称' }]" label="名称" name="name">
+                    <t-input v-model="newTab.name" />
+                </t-form-item>
+                <t-form-item :rules="[{ required: true, message: '请选择类型' }]" label="类型" name="type">
+                    <t-select v-model="newTab.type">
+                        <t-option value="httpServers">HTTP 服务器</t-option>
+                        <t-option value="httpClients">HTTP 客户端</t-option>
+                        <t-option value="websocketServers">WebSocket 服务器</t-option>
+                        <t-option value="websocketClients">WebSocket 客户端</t-option>
+                    </t-select>
+                </t-form-item>
+            </t-form>
+        </t-dialog>
     </t-space>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue';
-  import { MessagePlugin } from 'tdesign-vue-next';
-  import {
+</template>
+
+<script setup lang="ts">
+import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import {
     httpServerDefaultConfigs,
     httpClientDefaultConfigs,
     websocketServerDefaultConfigs,
@@ -58,140 +65,140 @@
     NetworkConfig,
     OneBotConfig,
     mergeOneBotConfigs,
-  } from '../../../src/onebot/config/config';
-  import { QQLoginManager } from '@/backend/shell';
-  import HttpServerComponent from '@/pages/network/HttpServerComponent.vue';
-  import HttpClientComponent from '@/pages/network/HttpClientComponent.vue';
-  import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue';
-  import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue';
-  import EmptyStateComponent from '@/pages/network/EmptyStateComponent.vue';
-  
-  type ConfigKey = 'httpServers' | 'httpClients' | 'websocketServers' | 'websocketClients';
-  
-  type ConfigUnion = HttpClientConfig | HttpServerConfig | WebsocketServerConfig | WebsocketClientConfig;
-  
-  const defaultConfigs: Record<ConfigKey, ConfigUnion> = {
+} from '../../../src/onebot/config/config';
+import { QQLoginManager } from '@/backend/shell';
+import HttpServerComponent from '@/pages/network/HttpServerComponent.vue';
+import HttpClientComponent from '@/pages/network/HttpClientComponent.vue';
+import WebsocketServerComponent from '@/pages/network/WebsocketServerComponent.vue';
+import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.vue';
+import EmptyStateComponent from '@/pages/network/EmptyStateComponent.vue';
+
+type ConfigKey = 'httpServers' | 'httpClients' | 'websocketServers' | 'websocketClients';
+
+type ConfigUnion = HttpClientConfig | HttpServerConfig | WebsocketServerConfig | WebsocketClientConfig;
+
+const defaultConfigs: Record<ConfigKey, ConfigUnion> = {
     httpServers: httpServerDefaultConfigs,
     httpClients: httpClientDefaultConfigs,
     websocketServers: websocketServerDefaultConfigs,
     websocketClients: websocketClientDefaultConfigs,
-  };
-  
-  const componentMap: Record<
+};
+
+const componentMap: Record<
     ConfigKey,
     | typeof HttpServerComponent
     | typeof HttpClientComponent
     | typeof WebsocketServerComponent
     | typeof WebsocketClientComponent
-  > = {
+> = {
     httpServers: HttpServerComponent,
     httpClients: HttpClientComponent,
     websocketServers: WebsocketServerComponent,
     websocketClients: WebsocketClientComponent,
-  };
-  
-  interface ClientPanel {
+};
+
+interface ClientPanel {
     name: string;
     key: ConfigKey;
     data: Ref<ConfigUnion>;
-  }
-  
-  type ComponentKey = keyof typeof componentMap;
-  
-  // TODO: store these state in global store (aka pinia)
-  const activeTab = ref<number>(0);
-  const isDialogVisible = ref(false);
-  const newTab = ref<{ name: string; type: ComponentKey }>({ name: '', type: 'httpServers' });
-  const clientPanelData: Reactive<Array<ClientPanel>> = reactive([]);
-  
-  const getComponent = (type: ComponentKey) => {
+}
+
+type ComponentKey = keyof typeof componentMap;
+
+// TODO: store these state in global store (aka pinia)
+const activeTab = ref<number>(0);
+const isDialogVisible = ref(false);
+const newTab = ref<{ name: string; type: ComponentKey }>({ name: '', type: 'httpServers' });
+const clientPanelData: Reactive<Array<ClientPanel>> = reactive([]);
+
+const getComponent = (type: ComponentKey) => {
     return componentMap[type];
-  };
-  
-  const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
+};
+
+const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
     const storedCredential = localStorage.getItem('auth');
     if (!storedCredential) {
-      console.error('No stored credential found');
-      return;
+        console.error('No stored credential found');
+        return;
     }
     const loginManager = new QQLoginManager(storedCredential);
     return await loginManager.GetOB11Config();
-  };
-  
-  const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
+};
+
+const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
     const storedCredential = localStorage.getItem('auth');
     if (!storedCredential) {
-      console.error('No stored credential found');
-      return false;
+        console.error('No stored credential found');
+        return false;
     }
     const loginManager = new QQLoginManager(storedCredential);
     return await loginManager.SetOB11Config(config);
-  };
-  
-  const addToPanel = <T extends ConfigUnion>(configs: T[], key: ConfigKey) => {
+};
+
+const addToPanel = <T extends ConfigUnion>(configs: T[], key: ConfigKey) => {
     configs.forEach((config) => clientPanelData.push({ name: config.name, data: config, key: key }));
-  };
-  
-  const addConfigDataToPanel = (data: NetworkConfig) => {
+};
+
+const addConfigDataToPanel = (data: NetworkConfig) => {
     Object.entries(data).forEach(([key, configs]) => {
-      if (key in defaultConfigs) {
-        addToPanel(configs as ConfigUnion[], key as ConfigKey);
-      }
+        if (key in defaultConfigs) {
+            addToPanel(configs as ConfigUnion[], key as ConfigKey);
+        }
     });
-  };
-  
-  const parsePanelData = (): NetworkConfig => {
+};
+
+const parsePanelData = (): NetworkConfig => {
     return {
-      websocketClients: clientPanelData
-        .filter((panel) => panel.key === 'websocketClients')
-        .map((panel) => panel.data as WebsocketClientConfig),
-      websocketServers: clientPanelData
-        .filter((panel) => panel.key === 'websocketServers')
-        .map((panel) => panel.data as WebsocketServerConfig),
-      httpClients: clientPanelData
-        .filter((panel) => panel.key === 'httpClients')
-        .map((panel) => panel.data as HttpClientConfig),
-      httpServers: clientPanelData
-        .filter((panel) => panel.key === 'httpServers')
-        .map((panel) => panel.data as HttpServerConfig),
+        websocketClients: clientPanelData
+            .filter((panel) => panel.key === 'websocketClients')
+            .map((panel) => panel.data as WebsocketClientConfig),
+        websocketServers: clientPanelData
+            .filter((panel) => panel.key === 'websocketServers')
+            .map((panel) => panel.data as WebsocketServerConfig),
+        httpClients: clientPanelData
+            .filter((panel) => panel.key === 'httpClients')
+            .map((panel) => panel.data as HttpClientConfig),
+        httpServers: clientPanelData
+            .filter((panel) => panel.key === 'httpServers')
+            .map((panel) => panel.data as HttpServerConfig),
     };
-  };
-  
-  const loadConfig = async () => {
+};
+
+const loadConfig = async () => {
     try {
-      const userConfig = await getOB11Config();
-      if (!userConfig) return;
-      const mergedConfig = mergeOneBotConfigs(userConfig);
-      addConfigDataToPanel(mergedConfig.network);
+        const userConfig = await getOB11Config();
+        if (!userConfig) return;
+        const mergedConfig = mergeOneBotConfigs(userConfig);
+        addConfigDataToPanel(mergedConfig.network);
     } catch (error) {
-      console.error('Error loading config:', error);
+        console.error('Error loading config:', error);
     }
-  };
-  
-  // It's better to "saveConfig" instead of using deep watch
-  const saveConfig = async () => {
+};
+
+// It's better to "saveConfig" instead of using deep watch
+const saveConfig = async () => {
     const config = parsePanelData();
     const userConfig = await getOB11Config();
     if (!userConfig) return;
     userConfig.network = config;
     const success = await setOB11Config(userConfig);
     if (success) {
-      MessagePlugin.success('配置保存成功');
+        await MessagePlugin.success('配置保存成功');
     } else {
-      MessagePlugin.error('配置保存失败');
+        await MessagePlugin.error('配置保存失败');
     }
-  };
-  
-  const showAddTabDialog = () => {
+};
+
+const showAddTabDialog = () => {
     newTab.value = { name: '', type: 'httpServers' };
     isDialogVisible.value = true;
-  };
-  
-  const addTab = async () => {
+};
+
+const addTab = async () => {
     const { name, type } = newTab.value;
-    if (clientPanelData.some(panel => panel.name === name)) {
-      MessagePlugin.error('选项卡名称已存在');
-      return;
+    if (clientPanelData.some((panel) => panel.name === name)) {
+        await MessagePlugin.error('选项卡名称已存在');
+        return;
     }
     const defaultConfig = structuredClone(defaultConfigs[type]);
     defaultConfig.name = name;
@@ -199,46 +206,46 @@
     isDialogVisible.value = false;
     await nextTick();
     activeTab.value = clientPanelData.length - 1;
-    MessagePlugin.success('选项卡添加成功');
-  };
-  
-  const removeTab = async (payload: { value: string; index: number; e: PointerEvent }) => {
+    await MessagePlugin.success('选项卡添加成功');
+};
+
+const removeTab = async (payload: { value: string; index: number; e: PointerEvent }) => {
     clientPanelData.splice(payload.index, 1);
     activeTab.value = Math.max(0, activeTab.value - 1);
     await saveConfig();
-  };
-  
-  onMounted(() => {
+};
+
+onMounted(() => {
     loadConfig();
-  });
-  </script>
-  
-  <style scoped>
-  .full-space {
+});
+</script>
+
+<style scoped>
+.full-space {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-  }
-  
-  .full-tabs {
+}
+
+.full-tabs {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-  }
-  
-  .full-tab-panel {
+}
+
+.full-tab-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
-  }
-  
-  .button-container {
+}
+
+.button-container {
     display: flex;
     justify-content: center;
     margin-top: 20px;
-  }
-  </style>
\ No newline at end of file
+}
+</style>
diff --git a/napcat.webui/src/pages/OtherConfig.vue b/napcat.webui/src/pages/OtherConfig.vue
index f2e4dc66..685c2dd5 100644
--- a/napcat.webui/src/pages/OtherConfig.vue
+++ b/napcat.webui/src/pages/OtherConfig.vue
@@ -131,4 +131,4 @@ onMounted(() => {
         margin-left: 20px;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/napcat.webui/src/pages/network/EmptyStateComponent.vue b/napcat.webui/src/pages/network/EmptyStateComponent.vue
index 6ce5e6a4..29fb8e9b 100644
--- a/napcat.webui/src/pages/network/EmptyStateComponent.vue
+++ b/napcat.webui/src/pages/network/EmptyStateComponent.vue
@@ -19,4 +19,4 @@ defineProps<{ showAddTabDialog: () => void }>();
     height: 100%;
     text-align: center;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/napcat.webui/src/pages/network/HttpClientComponent.vue b/napcat.webui/src/pages/network/HttpClientComponent.vue
index 2ef667c2..71cd8d14 100644
--- a/napcat.webui/src/pages/network/HttpClientComponent.vue
+++ b/napcat.webui/src/pages/network/HttpClientComponent.vue
@@ -36,14 +36,17 @@ const props = defineProps<{
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
-    { label: 'String', value: 'string' }
+    { label: 'String', value: 'string' },
 ]);
 
-watch(() => props.config.messagePostFormat, (newValue) => {
-    if (newValue !== 'array' && newValue !== 'string') {
-        props.config.messagePostFormat = 'array';
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
     }
-});
+);
 </script>
 
 <style scoped>
@@ -62,4 +65,4 @@ watch(() => props.config.messagePostFormat, (newValue) => {
     padding: 20px;
     border-radius: 8px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/napcat.webui/src/pages/network/HttpServerComponent.vue b/napcat.webui/src/pages/network/HttpServerComponent.vue
index 56b7f0f2..5e61b253 100644
--- a/napcat.webui/src/pages/network/HttpServerComponent.vue
+++ b/napcat.webui/src/pages/network/HttpServerComponent.vue
@@ -42,14 +42,17 @@ const props = defineProps<{
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
-    { label: 'String', value: 'string' }
+    { label: 'String', value: 'string' },
 ]);
 
-watch(() => props.config.messagePostFormat, (newValue) => {
-    if (newValue !== 'array' && newValue !== 'string') {
-        props.config.messagePostFormat = 'array';
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
     }
-});
+);
 </script>
 
 <style scoped>
@@ -68,4 +71,4 @@ watch(() => props.config.messagePostFormat, (newValue) => {
     padding: 20px;
     border-radius: 8px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/napcat.webui/src/pages/network/WebsocketClientComponent.vue b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
index 3b2a516a..d7c2f657 100644
--- a/napcat.webui/src/pages/network/WebsocketClientComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
@@ -39,14 +39,17 @@ const props = defineProps<{
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
-    { label: 'String', value: 'string' }
+    { label: 'String', value: 'string' },
 ]);
 
-watch(() => props.config.messagePostFormat, (newValue) => {
-    if (newValue !== 'array' && newValue !== 'string') {
-        props.config.messagePostFormat = 'array';
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
     }
-});
+);
 </script>
 
 <style scoped>
@@ -65,4 +68,4 @@ watch(() => props.config.messagePostFormat, (newValue) => {
     padding: 20px;
     border-radius: 8px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/napcat.webui/src/pages/network/WebsocketServerComponent.vue b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
index 58c5fdc9..88830ffa 100644
--- a/napcat.webui/src/pages/network/WebsocketServerComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
@@ -45,14 +45,17 @@ const props = defineProps<{
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
-    { label: 'String', value: 'string' }
+    { label: 'String', value: 'string' },
 ]);
 
-watch(() => props.config.messagePostFormat, (newValue) => {
-    if (newValue !== 'array' && newValue !== 'string') {
-        props.config.messagePostFormat = 'array';
+watch(
+    () => props.config.messagePostFormat,
+    (newValue) => {
+        if (newValue !== 'array' && newValue !== 'string') {
+            props.config.messagePostFormat = 'array';
+        }
     }
-});
+);
 </script>
 
 <style scoped>
@@ -71,4 +74,4 @@ watch(() => props.config.messagePostFormat, (newValue) => {
     padding: 20px;
     border-radius: 8px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/napcat.webui/src/pages/new/NetWork.old.vue b/napcat.webui/src/pages/new/NetWork.old.vue
index 09534da4..f73cf8d8 100644
--- a/napcat.webui/src/pages/new/NetWork.old.vue
+++ b/napcat.webui/src/pages/new/NetWork.old.vue
@@ -1,6 +1,13 @@
 <template>
     <t-space class="full-space">
-        <t-tabs v-model="activeTab" :addable="true" theme="card" @add="showAddTabDialog" @remove="removeTab" class="full-tabs">
+        <t-tabs
+            v-model="activeTab"
+            :addable="true"
+            theme="card"
+            @add="showAddTabDialog"
+            @remove="removeTab"
+            class="full-tabs"
+        >
             <t-tab-panel
                 v-for="(config, idx) in clientPanelData"
                 :key="idx"
@@ -11,7 +18,7 @@
             >
                 <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
                 <div class="button-container">
-                    <t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
+                    <t-button @click="saveConfig" style="width: 100px; height: 40px">保存</t-button>
                 </div>
             </t-tab-panel>
         </t-tabs>
@@ -183,7 +190,7 @@ const showAddTabDialog = () => {
 
 const addTab = async () => {
     const { name, type } = newTab.value;
-    if (clientPanelData.some(panel => panel.name === name)) {
+    if (clientPanelData.some((panel) => panel.name === name)) {
         MessagePlugin.error('选项卡名称已存在');
         return;
     }
@@ -264,4 +271,4 @@ onMounted(() => {
     justify-content: center;
     margin-top: 20px;
 }
-</style>
\ No newline at end of file
+</style>