From 83f28795f293bb12b65a88ab5dfb49f181d84fb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?=
 <nanaeonn@outlook.com>
Date: Sat, 16 Nov 2024 12:45:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 napcat.webui/src/pages/AboutUs.vue            |   4 +-
 napcat.webui/src/pages/NetWork.vue            | 329 ++++++++----------
 .../src/pages/network/EmptyStateComponent.vue |  22 ++
 napcat.webui/src/pages/new/NetWork.old.vue    | 267 ++++++++++++++
 script/checkVersion.cjs                       |   1 -
 5 files changed, 444 insertions(+), 179 deletions(-)
 create mode 100644 napcat.webui/src/pages/network/EmptyStateComponent.vue
 create mode 100644 napcat.webui/src/pages/new/NetWork.old.vue

diff --git a/napcat.webui/src/pages/AboutUs.vue b/napcat.webui/src/pages/AboutUs.vue
index 72adee33..63a45fb2 100644
--- a/napcat.webui/src/pages/AboutUs.vue
+++ b/napcat.webui/src/pages/AboutUs.vue
@@ -14,8 +14,8 @@
                     <span class="item-label">版本信息:</span>
                     <span class="item-content">
                         <t-tag class="tag-item" theme="success"> WebUi: 1.0.0 </t-tag>
-                        <t-tag class="tag-item" theme="success"> NapCat: 1.0.0 </t-tag>
-                        <t-tag class="tag-item" theme="success"> Tdesign: 1.0.0 </t-tag>
+                        <t-tag class="tag-item" theme="success"> NapCat: 4.?.? </t-tag>
+                        <t-tag class="tag-item" theme="success"> Tdesign: 1.10.3 </t-tag>
                     </span>
                 </t-list-item>
             </t-list>
diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
index d9c51114..a2b5119e 100644
--- a/napcat.webui/src/pages/NetWork.vue
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -1,47 +1,52 @@
 <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-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>
-        <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>
+      <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,
@@ -53,139 +58,140 @@ import {
     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';
-
-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('配置保存成功');
+      MessagePlugin.success('配置保存成功');
     } else {
-        MessagePlugin.error('配置保存失败');
+      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;
+      MessagePlugin.error('选项卡名称已存在');
+      return;
     }
     const defaultConfig = structuredClone(defaultConfigs[type]);
     defaultConfig.name = name;
@@ -194,74 +200,45 @@ const addTab = async () => {
     await nextTick();
     activeTab.value = clientPanelData.length - 1;
     MessagePlugin.success('选项卡添加成功');
-};
-
-const removeTab = async (payload: { value: string; index: number; e: PointerEvent }) => {
+  };
+  
+  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>
-<style scoped>
-.full-space {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-}
-
-.full-tabs {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.full-tab-panel {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.button-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-}
-</style>
\ No newline at end of file
+  }
+  </style>
\ No newline at end of file
diff --git a/napcat.webui/src/pages/network/EmptyStateComponent.vue b/napcat.webui/src/pages/network/EmptyStateComponent.vue
new file mode 100644
index 00000000..6ce5e6a4
--- /dev/null
+++ b/napcat.webui/src/pages/network/EmptyStateComponent.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="empty-state">
+        <p>当前没有网络配置</p>
+        <t-button @click="showAddTabDialog">添加网络配置</t-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+defineProps<{ showAddTabDialog: () => void }>();
+</script>
+
+<style scoped>
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/napcat.webui/src/pages/new/NetWork.old.vue b/napcat.webui/src/pages/new/NetWork.old.vue
new file mode 100644
index 00000000..09534da4
--- /dev/null
+++ b/napcat.webui/src/pages/new/NetWork.old.vue
@@ -0,0 +1,267 @@
+<template>
+    <t-space class="full-space">
+        <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>
+        <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 {
+    httpServerDefaultConfigs,
+    httpClientDefaultConfigs,
+    websocketServerDefaultConfigs,
+    websocketClientDefaultConfigs,
+    HttpClientConfig,
+    HttpServerConfig,
+    WebsocketClientConfig,
+    WebsocketServerConfig,
+    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';
+
+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<
+    ConfigKey,
+    | typeof HttpServerComponent
+    | typeof HttpClientComponent
+    | typeof WebsocketServerComponent
+    | typeof WebsocketClientComponent
+> = {
+    httpServers: HttpServerComponent,
+    httpClients: HttpClientComponent,
+    websocketServers: WebsocketServerComponent,
+    websocketClients: WebsocketClientComponent,
+};
+
+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) => {
+    return componentMap[type];
+};
+
+const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        console.error('No stored credential found');
+        return;
+    }
+    const loginManager = new QQLoginManager(storedCredential);
+    return await loginManager.GetOB11Config();
+};
+
+const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
+    const storedCredential = localStorage.getItem('auth');
+    if (!storedCredential) {
+        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) => {
+    configs.forEach((config) => clientPanelData.push({ name: config.name, data: config, key: key }));
+};
+
+const addConfigDataToPanel = (data: NetworkConfig) => {
+    Object.entries(data).forEach(([key, configs]) => {
+        if (key in defaultConfigs) {
+            addToPanel(configs as ConfigUnion[], key as ConfigKey);
+        }
+    });
+};
+
+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),
+    };
+};
+
+const loadConfig = async () => {
+    try {
+        const userConfig = await getOB11Config();
+        if (!userConfig) return;
+        const mergedConfig = mergeOneBotConfigs(userConfig);
+        addConfigDataToPanel(mergedConfig.network);
+    } catch (error) {
+        console.error('Error loading config:', error);
+    }
+};
+
+// 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('配置保存成功');
+    } else {
+        MessagePlugin.error('配置保存失败');
+    }
+};
+
+const showAddTabDialog = () => {
+    newTab.value = { name: '', type: 'httpServers' };
+    isDialogVisible.value = true;
+};
+
+const addTab = async () => {
+    const { name, type } = newTab.value;
+    if (clientPanelData.some(panel => panel.name === name)) {
+        MessagePlugin.error('选项卡名称已存在');
+        return;
+    }
+    const defaultConfig = structuredClone(defaultConfigs[type]);
+    defaultConfig.name = name;
+    clientPanelData.push({ name, data: defaultConfig, key: type });
+    isDialogVisible.value = false;
+    await nextTick();
+    activeTab.value = clientPanelData.length - 1;
+    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(() => {
+    loadConfig();
+});
+</script>
+
+<style scoped>
+.full-space {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.full-tabs {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.full-tab-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+</style>
+<style scoped>
+.full-space {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.full-tabs {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.full-tab-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/script/checkVersion.cjs b/script/checkVersion.cjs
index 2b8f1d8f..40d53f4d 100644
--- a/script/checkVersion.cjs
+++ b/script/checkVersion.cjs
@@ -45,7 +45,6 @@ try {
     sed -i "s/\\"version\\": \\"${currentVersion}\\"/\\"version\\": \\"${targetVersion}\\"/g" package.json
     sed -i "s/\\"version\\": \\"${manifestCurrentVersion}\\"/\\"version\\": \\"${targetVersion}\\"/g" manifest.json
     sed -i "s/napCatVersion = '.*'/napCatVersion = '${targetVersion}'/g" ./src/common/version.ts
-    sed -i "s/SettingButton(\\"V.*\\", \\"napcat-update-button\\", \\"secondary\\")/SettingButton(\\"V${targetVersion}\\", \\"napcat-update-button\\", \\"secondary\\")/g" ./static/assets/renderer.js
     git add .
     git commit -m "release: v${targetVersion}"
     git push -u origin main`;