diff --git a/napcat.webui/src/pages/network/HttpClientComponent.vue b/napcat.webui/src/pages/network/HttpClientComponent.vue
index 7014c888..b36d36e1 100644
--- a/napcat.webui/src/pages/network/HttpClientComponent.vue
+++ b/napcat.webui/src/pages/network/HttpClientComponent.vue
@@ -7,7 +7,7 @@
                     <t-input v-model="config.url" />
                 </t-form-item>
                 <t-form-item label="消息格式">
-                    <t-input v-model="config.messagePostFormat" />
+                    <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
                 </t-form-item>
                 <t-form-item label="报告自身消息">
                     <t-checkbox v-model="config.reportSelfMessage" />
@@ -27,11 +27,23 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps, ref, watch } from 'vue';
 import { HttpClientConfig } from '../../../../src/onebot/config/config';
-defineProps<{
+
+const props = defineProps<{
     config: HttpClientConfig;
 }>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' }
+]);
+
+watch(() => props.config.messagePostFormat, (newValue) => {
+    if (newValue !== 'array' && newValue !== 'string') {
+        props.config.messagePostFormat = 'array';
+    }
+});
 </script>
 
 <style scoped>
diff --git a/napcat.webui/src/pages/network/HttpServerComponent.vue b/napcat.webui/src/pages/network/HttpServerComponent.vue
index d0495ee3..8aa40809 100644
--- a/napcat.webui/src/pages/network/HttpServerComponent.vue
+++ b/napcat.webui/src/pages/network/HttpServerComponent.vue
@@ -10,7 +10,7 @@
                     <t-input v-model.number="config.port" type="number" />
                 </t-form-item>
                 <t-form-item label="消息格式">
-                    <t-input v-model="config.messagePostFormat" />
+                    <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
                 </t-form-item>
                 <t-form-item label="报告自身消息">
                     <t-checkbox v-model="config.reportSelfMessage" />
@@ -36,11 +36,23 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps, ref, watch } from 'vue';
 import { WebsocketServerConfig } from '../../../../src/onebot/config/config';
-defineProps<{
+
+const props = defineProps<{
     config: WebsocketServerConfig;
 }>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' }
+]);
+
+watch(() => props.config.messagePostFormat, (newValue) => {
+    if (newValue !== 'array' && newValue !== 'string') {
+        props.config.messagePostFormat = 'array';
+    }
+});
 </script>
 
 <style scoped>
diff --git a/napcat.webui/src/pages/network/WebsocketClientComponent.vue b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
index 92700863..3215bcac 100644
--- a/napcat.webui/src/pages/network/WebsocketClientComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketClientComponent.vue
@@ -7,7 +7,7 @@
                     <t-input v-model="config.url" />
                 </t-form-item>
                 <t-form-item label="消息格式">
-                    <t-input v-model="config.messagePostFormat" />
+                    <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
                 </t-form-item>
                 <t-form-item label="报告自身消息">
                     <t-checkbox v-model="config.reportSelfMessage" />
@@ -30,11 +30,23 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps, ref, watch } from 'vue';
 import { WebsocketClientConfig } from '../../../../src/onebot/config/config';
-defineProps<{
+
+const props = defineProps<{
     config: WebsocketClientConfig;
 }>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' }
+]);
+
+watch(() => props.config.messagePostFormat, (newValue) => {
+    if (newValue !== 'array' && newValue !== 'string') {
+        props.config.messagePostFormat = 'array';
+    }
+});
 </script>
 
 <style scoped>
diff --git a/napcat.webui/src/pages/network/WebsocketServerComponent.vue b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
index dc922c16..7525536d 100644
--- a/napcat.webui/src/pages/network/WebsocketServerComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
@@ -16,7 +16,7 @@
                     <t-checkbox v-model="config.enableWebsocket" />
                 </t-form-item>
                 <t-form-item label="消息格式">
-                    <t-input v-model="config.messagePostFormat" type="text" />
+                    <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
                 </t-form-item>
                 <t-form-item label="Token">
                     <t-input v-model="config.token" type="text" />
@@ -33,11 +33,23 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { defineProps, ref, watch } from 'vue';
 import { HttpServerConfig } from '../../../../src/onebot/config/config';
-defineProps<{
+
+const props = defineProps<{
     config: HttpServerConfig;
 }>();
+
+const messageFormatOptions = ref([
+    { label: 'Array', value: 'array' },
+    { label: 'String', value: 'string' }
+]);
+
+watch(() => props.config.messagePostFormat, (newValue) => {
+    if (newValue !== 'array' && newValue !== 'string') {
+        props.config.messagePostFormat = 'array';
+    }
+});
 </script>
 
 <style scoped>