From 3690307d0b6adc580e0615b7185d712887f11a07 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: Fri, 15 Nov 2024 20:22:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 napcat.webui/src/main.ts           |  4 +++
 napcat.webui/src/pages/NetWork.vue | 41 +++++++++++++++++++++++++-----
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/napcat.webui/src/main.ts b/napcat.webui/src/main.ts
index 59c46f5b..29e8bc7e 100644
--- a/napcat.webui/src/main.ts
+++ b/napcat.webui/src/main.ts
@@ -24,6 +24,8 @@ import {
     TabPanel as TTabPanel,
     Space as TSpace,
     Checkbox as TCheckbox,
+    Popup as TPopup,
+    Dialog as TDialog
 } from 'tdesign-vue-next';
 import { router } from './router';
 import 'tdesign-vue-next/es/style/index.css';
@@ -53,4 +55,6 @@ app.use(TTabs);
 app.use(TTabPanel);
 app.use(TSpace);
 app.use(TCheckbox);
+app.use(TPopup);
+app.use(TDialog);
 app.mount('#app');
\ No newline at end of file
diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
index 851f2a07..b5bbdf12 100644
--- a/napcat.webui/src/pages/NetWork.vue
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -1,16 +1,31 @@
 <template>
     <t-space>
-        <t-tabs v-model="value" theme="card" :addable="true" @add="addTab" @remove="removeTab">
+        <t-tabs v-model="value" theme="card" :addable="true" @add="showAddTabDialog" @remove="removeTab">
             <t-tab-panel v-for="data in panelData" :key="data.value" :value="data.value" :label="data.label"
                 :removable="data.removable">
                 <component :is="data.component" :config="data.config" />
             </t-tab-panel>
         </t-tabs>
     </t-space>
+    <t-dialog :visible.sync="isDialogVisible" header="添加新选项卡" @confirm="addTab">
+        <t-form :model="newTab" ref="form">
+            <t-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入名称' }]">
+                <t-input v-model="newTab.name" />
+            </t-form-item>
+            <t-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]">
+                <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>
 
 <script setup>
-import { ref, shallowRef, onMounted, watch } from 'vue';
+import { ref, shallowRef, onMounted, watch, nextTick } from 'vue';
 import { defaultOnebotConfig, mergeOnebotConfigs } from '../../../src/onebot/config/config';
 import { QQLoginManager } from '../backend/shell';
 import HttpServerComponent from './network/HttpServerComponent.vue';
@@ -21,6 +36,8 @@ import WebsocketClientComponent from './network/WebsocketClientComponent.vue';
 let id = 0;
 const value = ref('first');
 const panelData = ref([]);
+const isDialogVisible = ref(false);
+const newTab = ref({ name: '', type: '' });
 
 const componentMap = {
     'httpServers': shallowRef(HttpServerComponent),
@@ -93,16 +110,26 @@ const loadConfig = async () => {
     }
 };
 
-const addTab = () => {
+const showAddTabDialog = () => {
+    newTab.value = { name: '', type: '' };
+    isDialogVisible.value = true;
+};
+
+const addTab = async () => {
+    const { name, type } = newTab.value;
+    if (!name || !type) return;
     panelData.value.push({
-        value: `new-${id}`,
-        label: `新选项卡${id + 1}`,
+        value: `${type}-${id}`,
+        label: name,
         removable: true,
-        component: null,
+        component: componentMap[type],
         config: {},
     });
-    value.value = `new-${id}`;
+    value.value = `${type}-${id}`;
     id += 1;
+    isDialogVisible.value = false;
+    await nextTick(); // 确保 DOM 更新完成
+    value.value = `${type}-${id - 1}`; // 强制重新渲染选项卡
 };
 
 const removeTab = ({ value: val, index }) => {