优化部分页面的样式

mango-console/src/views/apitest/info/details/index.vue

@@ -169,6 +169,7 @@
           </a-tab-pane>
           <a-tab-pane key="8" title="响应结果">
             <a-tabs default-active-key="3">
+              1
               <a-tab-pane key="2" title="请求信息">
                 <div class="response-section">
                   <div

mango-console/src/views/system/settings/index.vue

@@ -4,93 +4,101 @@
       <TableHeader :show-filter="true" title="全局系统设置" />
     </template>
     <template #default>
-      <div style="text-align: right; margin-bottom: 3px">
+      <div style="margin-bottom: 10px; text-align: right">
         <a-button size="small" type="primary" @click="handleClick" :loading="loading">
           {{ settingsData.editing ? '保存配置' : '修改配置' }}
         </a-button>
       </div>
-      <a-card :bordered="false">
-        <a-space>
-          <span>设置系统debug级别日志：</span>
-          <a-switch v-model="settingsData.isDebug" @change="doPostSystemSetDebugLog" />
-        </a-space>
-      </a-card>
-      <a-card v-if="hasConfig('host')" title="域名配置" :bordered="false">
-        <a-space direction="vertical" size="large">
-          <div v-for="item in filteredConfig('host')" :key="item.key">
-            <a-space>
-              <div>{{ item.describe }}:</div>
-              <a-input
-                v-if="settingsData.editing"
-                v-model="item.value"
-                :placeholder="`请输入${item.describe}`"
-                allow-clear
-              />
-              <div v-else>
-                {{ item.value || '未配置' }}
-              </div></a-space
-            >
+      
+      <a-space direction="vertical" size="mini" style="width: 100%">
+        <!-- Debug日志设置 -->
+        <a-card :bordered="false" style="border-radius: 4px; background-color: var(--color-fill-1)">
+          <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px">
+            <span style="color: var(--color-text-1)">设置系统debug级别日志</span>
+            <a-switch v-model="settingsData.isDebug" @change="doPostSystemSetDebugLog" size="small" />
           </div>
-        </a-space>
-      </a-card>
+        </a-card>
+        
+        <!-- 域名配置 -->
+        <a-card v-if="hasConfig('host')" title="域名配置" :bordered="false" style="border-radius: 4px; background-color: var(--color-fill-1)">
+          <div style="padding: 8px">
+            <a-space direction="vertical" size="mini" style="width: 100%">
+              <div v-for="item in filteredConfig('host')" :key="item.key" style="display: flex; align-items: center; gap: 12px; padding: 4px 0">
+                <span style="color: var(--color-text-1); min-width: 110px">{{ item.describe }}:</span>
+                <a-input
+                  v-if="settingsData.editing"
+                  v-model="item.value"
+                  :placeholder="`请输入${item.describe}`"
+                  allow-clear
+                  size="small"
+                  style="flex: 1"
+                />
+                <span v-else style="color: var(--color-text-2); flex: 1">{{ item.value || '未配置' }}</span>
+              </div>
+            </a-space>
+          </div>
+        </a-card>
 
-      <a-card v-if="hasConfig('email')" title="邮箱配置" :bordered="false">
-        <a-space direction="vertical" size="large">
-          <div v-for="item in filteredConfig('email')" :key="item.key">
-            <a-space>
-              <div>{{ item.describe }}:</div>
-              <a-input
-                v-if="settingsData.editing"
-                v-model="item.value"
-                :placeholder="`请输入${item.describe}`"
-                allow-clear
-              />
-              <div v-else>
-                {{ item.value || '未配置' }}
-              </div></a-space
-            >
+        <!-- 邮箱配置 -->
+        <a-card v-if="hasConfig('email')" title="邮箱配置" :bordered="false" style="border-radius: 4px; background-color: var(--color-fill-1)">
+          <div style="padding: 8px">
+            <a-space direction="vertical" size="mini" style="width: 100%">
+              <div v-for="item in filteredConfig('email')" :key="item.key" style="display: flex; align-items: center; gap: 12px; padding: 4px 0">
+                <span style="color: var(--color-text-1); min-width: 110px">{{ item.describe }}:</span>
+                <a-input
+                  v-if="settingsData.editing"
+                  v-model="item.value"
+                  :placeholder="`请输入${item.describe}`"
+                  allow-clear
+                  size="small"
+                  style="flex: 1"
+                />
+                <span v-else style="color: var(--color-text-2); flex: 1">{{ item.value || '未配置' }}</span>
+              </div>
+            </a-space>
           </div>
-        </a-space>
-      </a-card>
+        </a-card>
 
-      <a-card v-if="hasConfig('api')" title="接口自动化配置" :bordered="false">
-        <a-space direction="vertical" size="large">
-          <div v-for="item in filteredConfig('api')" :key="item.key">
-            <a-space>
-              <div>{{ item.describe }}:</div>
-              <a-input
-                v-if="settingsData.editing"
-                v-model="item.value"
-                :placeholder="`请输入${item.describe}`"
-                allow-clear
-              />
-              <div v-else>
-                {{ item.value || '未配置' }}
-              </div></a-space
-            >
+        <!-- 接口自动化配置 -->
+        <a-card v-if="hasConfig('api')" title="接口自动化配置" :bordered="false" style="border-radius: 4px; background-color: var(--color-fill-1)">
+          <div style="padding: 8px">
+            <a-space direction="vertical" size="mini" style="width: 100%">
+              <div v-for="item in filteredConfig('api')" :key="item.key" style="display: flex; align-items: center; gap: 12px; padding: 4px 0">
+                <span style="color: var(--color-text-1); min-width: 110px">{{ item.describe }}:</span>
+                <a-input
+                  v-if="settingsData.editing"
+                  v-model="item.value"
+                  :placeholder="`请输入${item.describe}`"
+                  allow-clear
+                  size="small"
+                  style="flex: 1"
+                />
+                <span v-else style="color: var(--color-text-2); flex: 1">{{ item.value || '未配置' }}</span>
+              </div>
+            </a-space>
           </div>
-        </a-space>
-      </a-card>
+        </a-card>
 
-      <a-card v-if="hasConfig('pytest')" title="单元自动化配置" :bordered="false">
-        <a-space direction="vertical" size="large">
-          <div v-for="item in filteredConfig('pytest')" :key="item.key">
-            <a-space>
-              <div>{{ item.describe }}:</div>
-              <a-input
-                v-if="settingsData.editing"
-                v-model="item.value"
-                :placeholder="`请输入${item.describe}`"
-                allow-clear
-                style="width: 600px"
-              />
-              <div v-else>
-                {{ item.value || '未配置' }}
-              </div></a-space
-            >
+        <!-- 单元自动化配置 -->
+        <a-card v-if="hasConfig('pytest')" title="单元自动化配置" :bordered="false" style="border-radius: 4px; background-color: var(--color-fill-1)">
+          <div style="padding: 8px">
+            <a-space direction="vertical" size="mini" style="width: 100%">
+              <div v-for="item in filteredConfig('pytest')" :key="item.key" style="display: flex; align-items: center; gap: 12px; padding: 4px 0">
+                <span style="color: var(--color-text-1); min-width: 110px">{{ item.describe }}:</span>
+                <a-input
+                  v-if="settingsData.editing"
+                  v-model="item.value"
+                  :placeholder="`请输入${item.describe}`"
+                  allow-clear
+                  size="small"
+                  style="flex: 1; max-width: 450px"
+                />
+                <span v-else style="color: var(--color-text-2); flex: 1">{{ item.value || '未配置' }}</span>
+              </div>
+            </a-space>
           </div>
-        </a-space>
-      </a-card>
+        </a-card>
+      </a-space>
     </template>
   </TableBody>
 </template>