修改webui

napcat.webui/src/pages/OtherConfig.vue

@@ -1,25 +1,24 @@
 <template>
-    <div>
+    <div class="title">
         <t-divider content="其余配置" align="left" />
     </div>
-    <div class="other-config-container">
-        <div class="other-config">
-            <t-form ref="form" :model="otherConfig" class="form">
-                <t-form-item label="音乐签名地址" name="musicSignUrl" class="form-item">
-                    <t-input v-model="otherConfig.musicSignUrl" />
-                </t-form-item>
-                <t-form-item label="启用本地文件到URL" name="enableLocalFile2Url" class="form-item">
-                    <t-switch v-model="otherConfig.enableLocalFile2Url" />
-                </t-form-item>
-                <t-form-item label="启用上报解析合并消息" name="parseMultMsg" class="form-item">
-                    <t-switch v-model="otherConfig.parseMultMsg" />
-                </t-form-item>
-            </t-form>
-            <div class="button-container">
-                <t-button @click="saveConfig">保存</t-button>
+    <t-card class="card">
+        <div class="other-config-container">
+            <div class="other-config">
+                <t-form ref="form" :model="otherConfig" :label-align="labelAlign" label-width="auto" colon>
+                    <t-form-item label="音乐签名地址" name="musicSignUrl" class="form-item">
+                        <t-input v-model="otherConfig.musicSignUrl" />
+                    </t-form-item>
+                    <t-form-item label="启用本地文件到URL" name="enableLocalFile2Url" class="form-item">
+                        <t-switch v-model="otherConfig.enableLocalFile2Url" />
+                    </t-form-item>
+                </t-form>
+                <div class="button-container">
+                    <t-button @click="saveConfig">保存</t-button>
+                </div>
             </div>
         </div>
-    </div>
+    </t-card>
 </template>
 
 <script setup lang="ts">
@@ -31,9 +30,9 @@ import { QQLoginManager } from '@/backend/shell';
 const otherConfig = ref<Partial<OneBotConfig>>({
     musicSignUrl: '',
     enableLocalFile2Url: false,
-    parseMultMsg: true
 });
 
+const labelAlign = ref<string>();
 const getOB11Config = async (): Promise<OneBotConfig | undefined> => {
     const storedCredential = localStorage.getItem('auth');
     if (!storedCredential) {
@@ -60,7 +59,6 @@ const loadConfig = async () => {
         if (userConfig) {
             otherConfig.value.musicSignUrl = userConfig.musicSignUrl;
             otherConfig.value.enableLocalFile2Url = userConfig.enableLocalFile2Url;
-            otherConfig.value.parseMultMsg = userConfig.parseMultMsg;
         }
     } catch (error) {
         console.error('Error loading config:', error);
@@ -73,7 +71,6 @@ const saveConfig = async () => {
         if (userConfig) {
             userConfig.musicSignUrl = otherConfig.value.musicSignUrl || '';
             userConfig.enableLocalFile2Url = otherConfig.value.enableLocalFile2Url ?? false;
-            userConfig.parseMultMsg = otherConfig.value.parseMultMsg ?? true;
             const success = await setOB11Config(userConfig);
             if (success) {
                 MessagePlugin.success('配置保存成功');
@@ -86,55 +83,62 @@ const saveConfig = async () => {
         MessagePlugin.error('配置保存失败');
     }
 };
-
 onMounted(() => {
     loadConfig();
+    const mediaQuery = window.matchMedia('(max-width: 768px)');
+    const handleMediaChange = (e: MediaQueryListEvent) => {
+        if (e.matches) {
+            labelAlign.value = 'top';
+        }
+        else {
+            labelAlign.value = 'left';
+        }
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+    const event = new Event('change');
+    Object.defineProperty(event,'matches', {
+        value: mediaQuery.matches,
+        writable: false
+    });
+    mediaQuery.dispatchEvent(event);
+    return () => {
+        mediaQuery.removeEventListener('change', handleMediaChange);
+    };
 });
 </script>
 
 <style scoped>
+.title{
+    padding: 20px 20px 0 20px;
+}
+.card{
+    margin: 0 20px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
 .other-config-container {
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    padding: 20px;
     box-sizing: border-box;
 }
 
 .other-config {
     width: 100%;
-    max-width: 600px;
-    background: #fff;
-    padding: 20px;
+    max-width: 500px;
+
     border-radius: 8px;
 }
 
-.form {
-    display: flex;
-    flex-direction: column;
-}
-
 .form-item {
-    display: flex;
-    flex-direction: column;
     margin-bottom: 20px;
+    text-align: left;
 }
 
 .button-container {
     display: flex;
     justify-content: center;
+    margin-top: 20px;
 }
 
-@media (min-width: 768px) {
-    .form-item {
-        flex-direction: row;
-        align-items: center;
-    }
-
-    .form-item t-input,
-    .form-item t-switch {
-        flex: 1;
-        margin-left: 20px;
-    }
-}
 </style>