From 41db435ef514a556a0d6f418672c6ae427f7d828 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 11:08:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 napcat.webui/src/pages/NetWork.vue            | 10 ++-
 .../src/pages/network/HttpClientComponent.vue | 58 +++++++++-----
 .../src/pages/network/HttpServerComponent.vue | 76 ++++++++++++-------
 .../network/WebsocketClientComponent.vue      | 64 ++++++++++------
 .../network/WebsocketServerComponent.vue      | 76 ++++++++++++-------
 5 files changed, 186 insertions(+), 98 deletions(-)

diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
index 50ef203b..07ad85a4 100644
--- a/napcat.webui/src/pages/NetWork.vue
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -10,7 +10,9 @@
                 class="full-tab-panel"
             >
                 <component :is="resolveDynamicComponent(getComponent(config.key))" :config="config.data" />
-                <t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
+                <div class="button-container">
+                    <t-button @click="saveConfig" style="width: 100px; height: 40px;">保存</t-button>
+                </div>
             </t-tab-panel>
         </t-tabs>
         <t-dialog
@@ -222,4 +224,10 @@ onMounted(() => {
     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/napcat.webui/src/pages/network/HttpClientComponent.vue b/napcat.webui/src/pages/network/HttpClientComponent.vue
index cbae98d0..1bdc58a9 100644
--- a/napcat.webui/src/pages/network/HttpClientComponent.vue
+++ b/napcat.webui/src/pages/network/HttpClientComponent.vue
@@ -1,23 +1,25 @@
 <template>
-    <div>
-        <h3>HTTP Client 配置</h3>
-        <t-form>
-            <t-form-item label="URL">
-                <t-input v-model="config.url" />
-            </t-form-item>
-            <t-form-item label="消息格式">
-                <t-input v-model="config.messagePostFormat" />
-            </t-form-item>
-            <t-form-item label="报告自身消息">
-                <t-checkbox v-model="config.reportSelfMessage" />
-            </t-form-item>
-            <t-form-item label="Token">
-                <t-input v-model="config.token" />
-            </t-form-item>
-            <t-form-item label="调试模式">
-                <t-checkbox v-model="config.debug" />
-            </t-form-item>
-        </t-form>
+    <div class="container">
+        <div class="form-container">
+            <h3>HTTP Client 配置</h3>
+            <t-form>
+                <t-form-item label="URL">
+                    <t-input v-model="config.url" />
+                </t-form-item>
+                <t-form-item label="消息格式">
+                    <t-input v-model="config.messagePostFormat" />
+                </t-form-item>
+                <t-form-item label="报告自身消息">
+                    <t-checkbox v-model="config.reportSelfMessage" />
+                </t-form-item>
+                <t-form-item label="Token">
+                    <t-input v-model="config.token" />
+                </t-form-item>
+                <t-form-item label="调试模式">
+                    <t-checkbox v-model="config.debug" />
+                </t-form-item>
+            </t-form>
+        </div>
     </div>
 </template>
 
@@ -28,3 +30,21 @@ defineProps<{
     config: HttpClientConfig;
 }>();
 </script>
+
+<style scoped>
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 600px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/napcat.webui/src/pages/network/HttpServerComponent.vue b/napcat.webui/src/pages/network/HttpServerComponent.vue
index a9f4df05..cc5ba90f 100644
--- a/napcat.webui/src/pages/network/HttpServerComponent.vue
+++ b/napcat.webui/src/pages/network/HttpServerComponent.vue
@@ -1,32 +1,34 @@
 <template>
-    <div>
-        <h3>HTTP Server 配置</h3>
-        <t-form>
-            <t-form-item label="端口">
-                <t-input v-model.number="config.port" type="number" />
-            </t-form-item>
-            <t-form-item label="主机">
-                <t-input v-model="config.host" type="text" />
-            </t-form-item>
-            <t-form-item label="启用 CORS">
-                <t-checkbox v-model="config.enableCors" />
-            </t-form-item>
-            <t-form-item label="启用 WebSocket">
-                <t-checkbox v-model="config.enableWebsocket" />
-            </t-form-item>
-            <t-form-item label="消息格式">
-                <t-input v-model="config.messagePostFormat" type="text" />
-            </t-form-item>
-            <t-form-item label="报告自身消息">
-                <t-checkbox v-model="config.reportSelfMessage" />
-            </t-form-item>
-            <t-form-item label="Token">
-                <t-input v-model="config.token" type="text" />
-            </t-form-item>
-            <t-form-item label="调试模式">
-                <t-checkbox v-model="config.debug" />
-            </t-form-item>
-        </t-form>
+    <div class="container">
+        <div class="form-container">
+            <h3>HTTP Server 配置</h3>
+            <t-form>
+                <t-form-item label="端口">
+                    <t-input v-model.number="config.port" type="number" />
+                </t-form-item>
+                <t-form-item label="主机">
+                    <t-input v-model="config.host" type="text" />
+                </t-form-item>
+                <t-form-item label="启用 CORS">
+                    <t-checkbox v-model="config.enableCors" />
+                </t-form-item>
+                <t-form-item label="启用 WS">
+                    <t-checkbox v-model="config.enableWebsocket" />
+                </t-form-item>
+                <t-form-item label="消息格式">
+                    <t-input v-model="config.messagePostFormat" type="text" />
+                </t-form-item>
+                <t-form-item label="报告自身消息">
+                    <t-checkbox v-model="config.reportSelfMessage" />
+                </t-form-item>
+                <t-form-item label="Token">
+                    <t-input v-model="config.token" type="text" />
+                </t-form-item>
+                <t-form-item label="调试模式">
+                    <t-checkbox v-model="config.debug" />
+                </t-form-item>
+            </t-form>
+        </div>
     </div>
 </template>
 
@@ -37,3 +39,21 @@ defineProps<{
     config: HttpServerConfig;
 }>();
 </script>
+
+<style scoped>
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 600px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/napcat.webui/src/pages/network/WebsocketClientComponent.vue b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
index 5d602f16..9d2e89fe 100644
--- a/napcat.webui/src/pages/network/WebsocketClientComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
@@ -1,26 +1,28 @@
 <template>
-    <div>
-        <h3>WebSocket Client 配置</h3>
-        <t-form>
-            <t-form-item label="URL">
-                <t-input v-model="config.url" />
-            </t-form-item>
-            <t-form-item label="消息格式">
-                <t-input v-model="config.messagePostFormat" />
-            </t-form-item>
-            <t-form-item label="报告自身消息">
-                <t-checkbox v-model="config.reportSelfMessage" />
-            </t-form-item>
-            <t-form-item label="Token">
-                <t-input v-model="config.token" />
-            </t-form-item>
-            <t-form-item label="调试模式">
-                <t-checkbox v-model="config.debug" />
-            </t-form-item>
-            <t-form-item label="心跳间隔">
-                <t-input v-model.number="config.heartInterval" type="number" />
-            </t-form-item>
-        </t-form>
+    <div class="container">
+        <div class="form-container">
+            <h3>WebSocket Client 配置</h3>
+            <t-form>
+                <t-form-item label="URL">
+                    <t-input v-model="config.url" />
+                </t-form-item>
+                <t-form-item label="消息格式">
+                    <t-input v-model="config.messagePostFormat" />
+                </t-form-item>
+                <t-form-item label="报告自身消息">
+                    <t-checkbox v-model="config.reportSelfMessage" />
+                </t-form-item>
+                <t-form-item label="Token">
+                    <t-input v-model="config.token" />
+                </t-form-item>
+                <t-form-item label="调试模式">
+                    <t-checkbox v-model="config.debug" />
+                </t-form-item>
+                <t-form-item label="心跳间隔">
+                    <t-input v-model.number="config.heartInterval" type="number" />
+                </t-form-item>
+            </t-form>
+        </div>
     </div>
 </template>
 
@@ -31,3 +33,21 @@ defineProps<{
     config: WebsocketClientConfig;
 }>();
 </script>
+
+<style scoped>
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 600px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/napcat.webui/src/pages/network/WebsocketServerComponent.vue b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
index 7ab633a6..a30af7e0 100644
--- a/napcat.webui/src/pages/network/WebsocketServerComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
@@ -1,32 +1,34 @@
 <template>
-    <div>
-        <h3>WebSocket Server 配置</h3>
-        <t-form>
-            <t-form-item label="主机">
-                <t-input v-model="config.host" />
-            </t-form-item>
-            <t-form-item label="端口">
-                <t-input v-model.number="config.port" type="number" />
-            </t-form-item>
-            <t-form-item label="消息格式">
-                <t-input v-model="config.messagePostFormat" />
-            </t-form-item>
-            <t-form-item label="报告自身消息">
-                <t-checkbox v-model="config.reportSelfMessage" />
-            </t-form-item>
-            <t-form-item label="Token">
-                <t-input v-model="config.token" />
-            </t-form-item>
-            <t-form-item label="启用推送事件">
-                <t-checkbox v-model="config.enablePushEvent" />
-            </t-form-item>
-            <t-form-item label="调试模式">
-                <t-checkbox v-model="config.debug" />
-            </t-form-item>
-            <t-form-item label="心跳间隔">
-                <t-input v-model.number="config.heartInterval" type="number" />
-            </t-form-item>
-        </t-form>
+    <div class="container">
+        <div class="form-container">
+            <h3>WebSocket Server 配置</h3>
+            <t-form>
+                <t-form-item label="主机">
+                    <t-input v-model="config.host" />
+                </t-form-item>
+                <t-form-item label="端口">
+                    <t-input v-model.number="config.port" type="number" />
+                </t-form-item>
+                <t-form-item label="消息格式">
+                    <t-input v-model="config.messagePostFormat" />
+                </t-form-item>
+                <t-form-item label="报告自身消息">
+                    <t-checkbox v-model="config.reportSelfMessage" />
+                </t-form-item>
+                <t-form-item label="Token">
+                    <t-input v-model="config.token" />
+                </t-form-item>
+                <t-form-item label="启用推送事件">
+                    <t-checkbox v-model="config.enablePushEvent" />
+                </t-form-item>
+                <t-form-item label="调试模式">
+                    <t-checkbox v-model="config.debug" />
+                </t-form-item>
+                <t-form-item label="心跳间隔">
+                    <t-input v-model.number="config.heartInterval" type="number" />
+                </t-form-item>
+            </t-form>
+        </div>
     </div>
 </template>
 
@@ -37,3 +39,21 @@ defineProps<{
     config: WebsocketServerConfig;
 }>();
 </script>
+
+<style scoped>
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.form-container {
+    width: 100%;
+    max-width: 600px;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+</style>
\ No newline at end of file