From ecd426bb8073eebbc9f3d2c2a94f26ef0d0e9cf6 Mon Sep 17 00:00:00 2001
From: pk5ls20 <pk5ls20@outlook.com>
Date: Sun, 17 Nov 2024 08:17:09 +0800
Subject: [PATCH] refactor: webui network

---
 napcat.webui/src/pages/NetWork.vue         |  96 ++++----
 napcat.webui/src/pages/new/NetWork.old.vue | 274 ---------------------
 2 files changed, 47 insertions(+), 323 deletions(-)
 delete mode 100644 napcat.webui/src/pages/new/NetWork.old.vue

diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
index a30e800a..fbe7c1bd 100644
--- a/napcat.webui/src/pages/NetWork.vue
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, resolveDynamicComponent, nextTick, Ref, onMounted, reactive, Reactive } from 'vue';
+import { ref, resolveDynamicComponent, nextTick, Ref, onMounted } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import {
     httpServerDefaultConfigs,
@@ -74,44 +74,46 @@ import WebsocketClientComponent from '@/pages/network/WebsocketClientComponent.v
 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<
-    ConfigKey,
+type ComponentUnion =
     | typeof HttpServerComponent
     | typeof HttpClientComponent
     | typeof WebsocketServerComponent
-    | typeof WebsocketClientComponent
-> = {
+    | typeof WebsocketClientComponent;
+
+const componentMap: Record<ConfigKey, ComponentUnion> = {
     httpServers: HttpServerComponent,
     httpClients: HttpClientComponent,
     websocketServers: WebsocketServerComponent,
     websocketClients: WebsocketClientComponent,
 };
 
-interface ClientPanel {
-    name: string;
-    key: ConfigKey;
-    data: Ref<ConfigUnion>;
+const defaultConfigMap: Record<ConfigKey, ConfigUnion> = {
+    httpServers: httpServerDefaultConfigs,
+    httpClients: httpClientDefaultConfigs,
+    websocketServers: websocketServerDefaultConfigs,
+    websocketClients: websocketClientDefaultConfigs,
+};
+
+interface ConfigMap {
+    httpServers: HttpServerConfig;
+    httpClients: HttpClientConfig;
+    websocketServers: WebsocketServerConfig;
+    websocketClients: WebsocketClientConfig;
 }
 
-type ComponentKey = keyof typeof componentMap;
+interface ClientPanel<K extends ConfigKey = ConfigKey> {
+    name: string;
+    key: K;
+    data: ConfigMap[K];
+}
 
-// 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 newTab = ref<{ name: string; type: ConfigKey }>({ name: '', type: 'httpServers' });
+const clientPanelData: Ref<ClientPanel[]> = ref([]);
 
-const getComponent = (type: ComponentKey) => {
+const getComponent = (type: ConfigKey) => {
     return componentMap[type];
 };
 
@@ -135,33 +137,27 @@ const setOB11Config = async (config: OneBotConfig): Promise<boolean> => {
     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 addToPanel = <K extends ConfigKey>(configs: ConfigMap[K][], key: K) => {
+    configs.forEach((config) => clientPanelData.value.push({ name: config.name, data: config, key }));
 };
 
 const addConfigDataToPanel = (data: NetworkConfig) => {
-    Object.entries(data).forEach(([key, configs]) => {
-        if (key in defaultConfigs) {
-            addToPanel(configs as ConfigUnion[], key as ConfigKey);
-        }
+    (Object.keys(data) as ConfigKey[]).forEach((key) => {
+        addToPanel(data[key], key);
     });
 };
 
 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 result: NetworkConfig = {
+        httpServers: [],
+        httpClients: [],
+        websocketServers: [],
+        websocketClients: [],
     };
+    clientPanelData.value.forEach((panel) => {
+        (result[panel.key] as Array<typeof panel.data>).push(panel.data);
+    });
+    return result;
 };
 
 const loadConfig = async () => {
@@ -175,11 +171,13 @@ const loadConfig = async () => {
     }
 };
 
-// It's better to "saveConfig" instead of using deep watch
 const saveConfig = async () => {
     const config = parsePanelData();
     const userConfig = await getOB11Config();
-    if (!userConfig) return;
+    if (!userConfig) {
+        await MessagePlugin.error('无法获取配置！');
+        return;
+    }
     userConfig.network = config;
     const success = await setOB11Config(userConfig);
     if (success) {
@@ -196,21 +194,21 @@ const showAddTabDialog = () => {
 
 const addTab = async () => {
     const { name, type } = newTab.value;
-    if (clientPanelData.some((panel) => panel.name === name)) {
+    if (clientPanelData.value.some((panel) => panel.name === name)) {
         await MessagePlugin.error('选项卡名称已存在');
         return;
     }
-    const defaultConfig = structuredClone(defaultConfigs[type]);
+    const defaultConfig = structuredClone(defaultConfigMap[type]);
     defaultConfig.name = name;
-    clientPanelData.push({ name, data: defaultConfig, key: type });
+    clientPanelData.value.push({ name, data: defaultConfig, key: type });
     isDialogVisible.value = false;
     await nextTick();
-    activeTab.value = clientPanelData.length - 1;
+    activeTab.value = clientPanelData.value.length - 1;
     await MessagePlugin.success('选项卡添加成功');
 };
 
 const removeTab = async (payload: { value: string; index: number; e: PointerEvent }) => {
-    clientPanelData.splice(payload.index, 1);
+    clientPanelData.value.splice(payload.index, 1);
     activeTab.value = Math.max(0, activeTab.value - 1);
     await saveConfig();
 };
diff --git a/napcat.webui/src/pages/new/NetWork.old.vue b/napcat.webui/src/pages/new/NetWork.old.vue
deleted file mode 100644
index f73cf8d8..00000000
--- a/napcat.webui/src/pages/new/NetWork.old.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<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>