diff --git a/napcat.webui/src/pages/NetWork.vue b/napcat.webui/src/pages/NetWork.vue
index b08f1f45..65d63160 100644
--- a/napcat.webui/src/pages/NetWork.vue
+++ b/napcat.webui/src/pages/NetWork.vue
@@ -149,8 +149,10 @@
                     </t-select>
                 </t-form-item>
                 <div>
-                    <component :is="resolveDynamicComponent(getComponent(newTab.type as ComponentKey))"
-                        :config="newTab.data" />
+                    <component
+                        :is="resolveDynamicComponent(getComponent(newTab.type as ComponentKey))"
+                        :config="newTab"
+                    />
                 </div>
             </t-form>
         </div>
diff --git a/napcat.webui/src/pages/network/HttpClientComponent.vue b/napcat.webui/src/pages/network/HttpClientComponent.vue
index b0fa36fe..2d2d3fa2 100644
--- a/napcat.webui/src/pages/network/HttpClientComponent.vue
+++ b/napcat.webui/src/pages/network/HttpClientComponent.vue
@@ -2,22 +2,22 @@
     <div>
         <t-form labelAlign="left">
             <t-form-item label="启用">
-                <t-switch v-model="config.enable" />
+                <t-switch v-model="props.config.data.enable" />
             </t-form-item>
             <t-form-item label="URL">
-                <t-input v-model="config.url" />
+                <t-input v-model="props.config.data.url" />
             </t-form-item>
             <t-form-item label="消息格式">
-                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+                <t-select v-model="props.config.data.messagePostFormat" :options="messageFormatOptions" />
             </t-form-item>
             <t-form-item label="报告自身消息">
-                <t-switch v-model="config.reportSelfMessage" />
+                <t-switch v-model="props.config.data.reportSelfMessage" />
             </t-form-item>
             <t-form-item label="Token">
-                <t-input v-model="config.token" />
+                <t-input v-model="props.config.data.token" />
             </t-form-item>
             <t-form-item label="调试模式">
-                <t-switch v-model="config.debug" />
+                <t-switch v-model="props.config.data.debug" />
             </t-form-item>
         </t-form>
     </div>
@@ -34,14 +34,14 @@ const defaultConfig: HttpClientConfig = {
     messagePostFormat: 'array',
     reportSelfMessage: false,
     token: '',
-    debug: false
+    debug: false,
 };
 
 const props = defineProps<{
-    config: HttpClientConfig;
+    config: { data: HttpClientConfig };
 }>();
 
-const config = ref(Object.assign({}, defaultConfig, props.config));
+props.config.data = { ...defaultConfig, ...props.config.data };
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
@@ -49,13 +49,13 @@ const messageFormatOptions = ref([
 ]);
 
 watch(
-    () => config.value.messagePostFormat,
+    () => props.config.data.messagePostFormat,
     (newValue) => {
         if (newValue !== 'array' && newValue !== 'string') {
-            config.value.messagePostFormat = 'array';
+            props.config.data.messagePostFormat = 'array';
         }
     }
 );
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/napcat.webui/src/pages/network/HttpServerComponent.vue b/napcat.webui/src/pages/network/HttpServerComponent.vue
index 36100ce8..51ea5066 100644
--- a/napcat.webui/src/pages/network/HttpServerComponent.vue
+++ b/napcat.webui/src/pages/network/HttpServerComponent.vue
@@ -2,28 +2,28 @@
     <div>
         <t-form labelAlign="left">
             <t-form-item label="启用">
-                <t-switch v-model="config.enable" />
+                <t-switch v-model="props.config.data.enable" />
             </t-form-item>
             <t-form-item label="端口">
-                <t-input v-model.number="config.port" type="number" />
+                <t-input v-model.number="props.config.data.port" type="number" />
             </t-form-item>
             <t-form-item label="主机">
-                <t-input v-model="config.host" type="text" />
+                <t-input v-model="props.config.data.host" type="text" />
             </t-form-item>
             <t-form-item label="启用 CORS">
-                <t-switch v-model="config.enableCors" />
+                <t-switch v-model="props.config.data.enableCors" />
             </t-form-item>
             <t-form-item label="启用 WS">
-                <t-switch v-model="config.enableWebsocket" />
+                <t-switch v-model="props.config.data.enableWebsocket" />
             </t-form-item>
             <t-form-item label="消息格式">
-                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+                <t-select v-model="props.config.data.messagePostFormat" :options="messageFormatOptions" />
             </t-form-item>
             <t-form-item label="Token">
-                <t-input v-model="config.token" type="text" />
+                <t-input v-model="props.config.data.token" type="text" />
             </t-form-item>
             <t-form-item label="调试模式">
-                <t-switch v-model="config.debug" />
+                <t-switch v-model="props.config.data.debug" />
             </t-form-item>
         </t-form>
     </div>
@@ -42,14 +42,14 @@ const defaultConfig: HttpServerConfig = {
     enableWebsocket: true,
     messagePostFormat: 'array',
     token: '',
-    debug: false
+    debug: false,
 };
 
 const props = defineProps<{
-    config: HttpServerConfig;
+    config: { data: HttpServerConfig };
 }>();
 
-const config = ref(Object.assign({}, defaultConfig, props.config));
+props.config.data = { ...defaultConfig, ...props.config.data };
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
@@ -57,13 +57,13 @@ const messageFormatOptions = ref([
 ]);
 
 watch(
-    () => config.value.messagePostFormat,
+    () => props.config.data.messagePostFormat,
     (newValue) => {
         if (newValue !== 'array' && newValue !== 'string') {
-            config.value.messagePostFormat = 'array';
+            props.config.data.messagePostFormat = 'array';
         }
     }
 );
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/napcat.webui/src/pages/network/HttpSseServerComponent.vue b/napcat.webui/src/pages/network/HttpSseServerComponent.vue
index 3d1aa715..d86bf39f 100644
--- a/napcat.webui/src/pages/network/HttpSseServerComponent.vue
+++ b/napcat.webui/src/pages/network/HttpSseServerComponent.vue
@@ -2,31 +2,31 @@
     <div>
         <t-form labelAlign="left">
             <t-form-item label="启用">
-                <t-switch v-model="config.enable" />
+                <t-switch v-model="props.config.data.enable" />
             </t-form-item>
             <t-form-item label="端口">
-                <t-input v-model.number="config.port" type="number" />
+                <t-input v-model.number="props.config.data.port" type="number" />
             </t-form-item>
             <t-form-item label="主机">
-                <t-input v-model="config.host" type="text" />
+                <t-input v-model="props.config.data.host" type="text" />
             </t-form-item>
             <t-form-item label="报告自身消息">
-                <t-switch v-model="config.reportSelfMessage" />
+                <t-switch v-model="props.config.data.reportSelfMessage" />
             </t-form-item>
             <t-form-item label="启用 CORS">
-                <t-switch v-model="config.enableCors" />
+                <t-switch v-model="props.config.data.enableCors" />
             </t-form-item>
             <t-form-item label="启用 WS">
-                <t-switch v-model="config.enableWebsocket" />
+                <t-switch v-model="props.config.data.enableWebsocket" />
             </t-form-item>
             <t-form-item label="消息格式">
-                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+                <t-select v-model="props.config.data.messagePostFormat" :options="messageFormatOptions" />
             </t-form-item>
             <t-form-item label="Token">
-                <t-input v-model="config.token" type="text" />
+                <t-input v-model="props.config.data.token" type="text" />
             </t-form-item>
             <t-form-item label="调试模式">
-                <t-switch v-model="config.debug" />
+                <t-switch v-model="props.config.data.debug" />
             </t-form-item>
         </t-form>
     </div>
@@ -46,14 +46,14 @@ const defaultConfig: HttpSseServerConfig = {
     messagePostFormat: 'array',
     token: '',
     debug: false,
-    reportSelfMessage: false
+    reportSelfMessage: false,
 };
 
 const props = defineProps<{
-    config: HttpSseServerConfig;
+    config: { data: HttpSseServerConfig };
 }>();
 
-const config = ref(Object.assign({}, defaultConfig, props.config));
+props.config.data = { ...defaultConfig, ...props.config.data };
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
@@ -61,13 +61,13 @@ const messageFormatOptions = ref([
 ]);
 
 watch(
-    () => config.value.messagePostFormat,
+    () => props.config.data.messagePostFormat,
     (newValue) => {
         if (newValue !== 'array' && newValue !== 'string') {
-            config.value.messagePostFormat = 'array';
+            props.config.data.messagePostFormat = 'array';
         }
     }
 );
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/napcat.webui/src/pages/network/WebsocketClientComponent.vue b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
index 424a86f8..95a3137d 100644
--- a/napcat.webui/src/pages/network/WebsocketClientComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
@@ -2,25 +2,25 @@
     <div>
         <t-form labelAlign="left">
             <t-form-item label="启用">
-                <t-switch v-model="config.enable" />
+                <t-switch v-model="props.config.data.enable" />
             </t-form-item>
             <t-form-item label="URL">
-                <t-input v-model="config.url" />
+                <t-input v-model="props.config.data.url" />
             </t-form-item>
             <t-form-item label="消息格式">
-                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+                <t-select v-model="props.config.data.messagePostFormat" :options="messageFormatOptions" />
             </t-form-item>
             <t-form-item label="报告自身消息">
-                <t-switch v-model="config.reportSelfMessage" />
+                <t-switch v-model="props.config.data.reportSelfMessage" />
             </t-form-item>
             <t-form-item label="Token">
-                <t-input v-model="config.token" />
+                <t-input v-model="props.config.data.token" />
             </t-form-item>
             <t-form-item label="调试模式">
-                <t-switch v-model="config.debug" />
+                <t-switch v-model="props.config.data.debug" />
             </t-form-item>
             <t-form-item label="心跳间隔">
-                <t-input v-model.number="config.heartInterval" type="number" />
+                <t-input v-model.number="props.config.data.heartInterval" type="number" />
             </t-form-item>
         </t-form>
     </div>
@@ -39,14 +39,14 @@ const defaultConfig: WebsocketClientConfig = {
     reconnectInterval: 5000,
     token: '',
     debug: false,
-    heartInterval: 30000
+    heartInterval: 30000,
 };
 
 const props = defineProps<{
-    config: WebsocketClientConfig;
+    config: { data: WebsocketClientConfig };
 }>();
 
-const config = ref(Object.assign({}, defaultConfig, props.config));
+props.config.data = { ...defaultConfig, ...props.config.data };
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
@@ -54,13 +54,13 @@ const messageFormatOptions = ref([
 ]);
 
 watch(
-    () => config.value.messagePostFormat,
+    () => props.config.data.messagePostFormat,
     (newValue) => {
         if (newValue !== 'array' && newValue !== 'string') {
-            config.value.messagePostFormat = 'array';
+            props.config.data.messagePostFormat = 'array';
         }
     }
 );
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>
diff --git a/napcat.webui/src/pages/network/WebsocketServerComponent.vue b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
index 6f93191c..41d1c5b7 100644
--- a/napcat.webui/src/pages/network/WebsocketServerComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
@@ -2,31 +2,31 @@
     <div>
         <t-form labelAlign="left">
             <t-form-item label="启用">
-                <t-switch v-model="config.enable" />
+                <t-switch v-model="props.config.data.enable" />
             </t-form-item>
             <t-form-item label="主机">
-                <t-input v-model="config.host" />
+                <t-input v-model="props.config.data.host" />
             </t-form-item>
             <t-form-item label="端口">
-                <t-input v-model.number="config.port" type="number" />
+                <t-input v-model.number="props.config.data.port" type="number" />
             </t-form-item>
             <t-form-item label="消息格式">
-                <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
+                <t-select v-model="props.config.data.messagePostFormat" :options="messageFormatOptions" />
             </t-form-item>
             <t-form-item label="上报自身消息">
-                <t-switch v-model="config.reportSelfMessage" />
+                <t-switch v-model="props.config.data.reportSelfMessage" />
             </t-form-item>
             <t-form-item label="Token">
-                <t-input v-model="config.token" />
+                <t-input v-model="props.config.data.token" />
             </t-form-item>
             <t-form-item label="强制推送事件">
-                <t-switch v-model="config.enableForcePushEvent" />
+                <t-switch v-model="props.config.data.enableForcePushEvent" />
             </t-form-item>
             <t-form-item label="调试模式">
-                <t-switch v-model="config.debug" />
+                <t-switch v-model="props.config.data.debug" />
             </t-form-item>
             <t-form-item label="心跳间隔">
-                <t-input v-model.number="config.heartInterval" type="number" />
+                <t-input v-model.number="props.config.data.heartInterval" type="number" />
             </t-form-item>
         </t-form>
     </div>
@@ -46,14 +46,14 @@ const defaultConfig: WebsocketServerConfig = {
     token: '',
     enableForcePushEvent: true,
     debug: false,
-    heartInterval: 30000
+    heartInterval: 30000,
 };
 
 const props = defineProps<{
-    config: WebsocketServerConfig;
+    config: { data: WebsocketServerConfig };
 }>();
 
-const config = ref(Object.assign({}, defaultConfig, props.config));
+props.config.data = { ...defaultConfig, ...props.config.data };
 
 const messageFormatOptions = ref([
     { label: 'Array', value: 'array' },
@@ -61,13 +61,13 @@ const messageFormatOptions = ref([
 ]);
 
 watch(
-    () => config.value.messagePostFormat,
+    () => props.config.data.messagePostFormat,
     (newValue) => {
         if (newValue !== 'array' && newValue !== 'string') {
-            config.value.messagePostFormat = 'array';
+            props.config.data.messagePostFormat = 'array';
         }
     }
 );
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>