优化部分页面的样式

mango-console/src/components/KeyValueList.vue

@@ -36,17 +36,20 @@
             :class="field.className || 'key-input'"
           />
         </div>
-        <!-- 插槽支持额外操作按钮 -->
-        <slot name="extra" :index="index" :item="item"></slot>
-        <a-button
-          size="small"
-          status="danger"
-          type="text"
-          @click="onDelete(index)"
-          class="remove-btn"
-        >
-          移除
-        </a-button>
+        <!-- 按钮容器，确保按钮在同一行 -->
+        <div class="button-container">
+          <!-- 插槽支持额外操作按钮 -->
+          <slot name="extra" :index="index" :item="item"></slot>
+          <a-button
+            size="small"
+            status="danger"
+            type="text"
+            @click="onDelete(index)"
+            class="remove-btn"
+          >
+            移除
+          </a-button>
+        </div>
       </div>
     </div>
     <div v-if="!dataList || dataList.length === 0" class="empty-placeholder">
@@ -134,7 +137,10 @@
     display: flex;
     align-items: flex-start;
     gap: 12px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap; /* 防止换行 */
+    width: 100%;
+    min-width: 0; /* 允许子元素收缩 */
+    overflow-x: hidden; /* 防止水平滚动 */
   }
 
   .key-value-field {
@@ -142,13 +148,24 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-    min-width: 150px;
+    min-width: 100px; /* 减小最小宽度 */
+    overflow: hidden; /* 防止内容溢出 */
+  }
+
+  .button-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    flex-shrink: 0; /* 防止按钮容器被压缩 */
+    white-space: nowrap; /* 防止按钮内文字换行 */
+    min-width: fit-content; /* 确保按钮容器不会收缩 */
   }
 
   .field-label {
     font-size: 12px;
     color: #666;
     font-weight: 500;
+    flex-shrink: 0; /* 防止标签被压缩 */
   }
 
   .key-input,
@@ -156,11 +173,21 @@
   .sql-input,
   .key-cascader {
     width: 100%;
+    min-width: 0; /* 允许输入框收缩 */
   }
 
   .remove-btn {
     align-self: flex-start;
     margin-top: 18px;
+    flex-shrink: 0; /* 防止按钮被压缩 */
+  }
+
+  /* 确保插槽中的按钮也正确对齐 */
+  :deep(.button-container .arco-btn) {
+    align-self: flex-start;
+    margin-top: 18px;
+    flex-shrink: 0; /* 防止按钮被压缩 */
+    min-width: fit-content; /* 确保按钮不会收缩 */
   }
 
   .empty-placeholder {
@@ -172,4 +199,32 @@
     border-radius: 4px;
     margin-top: 10px;
   }
+
+  /* 响应式处理：在小屏幕上允许换行，但保持按钮在同一行 */
+  @media (max-width: 768px) {
+    .key-value-row {
+      flex-wrap: wrap;
+    }
+    
+    .key-value-field {
+      min-width: 120px;
+    }
+    
+    .button-container {
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: 8px;
+    }
+    
+    .remove-btn {
+      margin-top: 0;
+      align-self: center;
+    }
+    
+    /* 确保插槽中的按钮在小屏幕上也正确对齐 */
+    :deep(.button-container .arco-btn) {
+      margin-top: 0;
+      align-self: center;
+    }
+  }
 </style>

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

@@ -665,7 +665,7 @@
                                       size="small"
                                       status="success"
                                       @click="jsonpathTest(item, index)"
-                                      style="margin-top: 18px"
+                                      class="test-btn"
                                     >
                                       测试
                                     </a-button>
@@ -895,22 +895,6 @@
 
   const caseRunning = ref(false)
 
-  function changeGeneralAss(value, index, item) {
-    const inputItem = findItemByValue(data.ass, value.method)
-    if (inputItem && Array.isArray(inputItem.parameter)) {
-      inputItem.parameter.forEach((param) => {
-        if (typeof param.v === 'object' && param.v !== null) {
-          try {
-            param.v = JSON.stringify(param.v)
-          } catch {
-            param.v = ''
-          }
-        }
-      })
-    }
-    item.ass_general[index].value = inputItem
-  }
-
   function findItemByValue(data: any, value: string) {
     for (let i = 0; i < data.length; i++) {
       const item = data[i]
@@ -1487,16 +1471,16 @@ removeFrontSql(item.ass_general, index, 'ass_general', item.id)
     padding: 5px;
     box-sizing: border-box;
     display: flex;
+  }
 
-    .left {
-      padding: 5px;
-      width: 45%;
-    }
+  .left {
+    padding: 5px;
+    width: 45%;
+  }
 
-    .right {
-      padding: 5px;
-      width: 55%;
-    }
+  .right {
+    padding: 5px;
+    width: 55%;
   }
 
   .custom-header {
@@ -1559,13 +1543,37 @@ removeFrontSql(item.ass_general, index, 'ass_general', item.id)
 
   /* 确保KeyValueList中的所有元素都在一行 */
   :deep(.key-value-row) {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: flex-start;
+    width: 100%;
+    min-width: 0; /* 允许子元素收缩 */
+    overflow-x: hidden; /* 防止水平滚动 */
   }
 
   :deep(.key-value-field) {
     flex: 1;
-    min-width: 200px;
+    min-width: 100px; /* 减小最小宽度 */
+    overflow: hidden; /* 防止内容溢出 */
+  }
+
+  :deep(.button-container) {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    flex-shrink: 0;
+    white-space: nowrap; /* 防止按钮内文字换行 */
+    min-width: fit-content; /* 确保按钮容器不会收缩 */
+  }
+
+  :deep(.remove-btn) {
+    flex-shrink: 0;
+    margin-top: 18px;
+  }
+
+  :deep(.test-btn) {
+    flex-shrink: 0;
+    margin-top: 18px;
+    min-width: fit-content; /* 确保按钮不会收缩 */
   }
 
   :deep(.assertion-parameters-inline) {
@@ -1576,4 +1584,40 @@ removeFrontSql(item.ass_general, index, 'ass_general', item.id)
     min-width: 300px;
     margin-top: 0;
   }
+
+  /* 响应式处理：在小屏幕上允许换行，但保持按钮在同一行 */
+  @media (max-width: 768px) {
+    :deep(.key-value-row) {
+      flex-wrap: wrap;
+    }
+
+    :deep(.key-value-field) {
+      min-width: 120px;
+    }
+
+    :deep(.button-container) {
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: 8px;
+    }
+
+    :deep(.remove-btn) {
+      margin-top: 0;
+      align-self: center;
+    }
+
+    :deep(.test-btn) {
+      margin-top: 0;
+      align-self: center;
+    }
+
+    .main_box {
+      flex-direction: column;
+    }
+
+    .left,
+    .right {
+      width: 100%;
+    }
+  }
 </style>

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

@@ -506,4 +506,56 @@
     margin-right: 12px;
     margin-bottom: 0;
   }
+
+  /* 确保KeyValueList中的所有元素都在一行 */
+  :deep(.key-value-row) {
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 0; /* 允许子元素收缩 */
+    overflow-x: hidden; /* 防止水平滚动 */
+  }
+
+  :deep(.key-value-field) {
+    flex: 1;
+    min-width: 100px; /* 减小最小宽度 */
+    overflow: hidden; /* 防止内容溢出 */
+  }
+
+  :deep(.button-container) {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    flex-shrink: 0;
+    white-space: nowrap; /* 防止按钮内文字换行 */
+    min-width: fit-content; /* 确保按钮容器不会收缩 */
+  }
+
+  :deep(.remove-btn) {
+    flex-shrink: 0;
+    margin-top: 18px;
+    min-width: fit-content; /* 确保按钮不会收缩 */
+  }
+
+  /* 响应式处理：在小屏幕上允许换行，但保持按钮在同一行 */
+  @media (max-width: 768px) {
+    :deep(.key-value-row) {
+      flex-wrap: wrap;
+    }
+    
+    :deep(.key-value-field) {
+      min-width: 120px;
+    }
+    
+    :deep(.button-container) {
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: 8px;
+    }
+    
+    :deep(.remove-btn) {
+      margin-top: 0;
+      align-self: center;
+    }
+  }
 </style>

mango-console/src/views/uitest/case/details/index.vue

@@ -975,4 +975,56 @@
   .save-btn {
     align-self: flex-start;
   }
+
+  /* 确保KeyValueList中的所有元素都在一行 */
+  :deep(.key-value-row) {
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 0; /* 允许子元素收缩 */
+    overflow-x: hidden; /* 防止水平滚动 */
+  }
+
+  :deep(.key-value-field) {
+    flex: 1;
+    min-width: 100px; /* 减小最小宽度 */
+    overflow: hidden; /* 防止内容溢出 */
+  }
+
+  :deep(.button-container) {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    flex-shrink: 0;
+    white-space: nowrap; /* 防止按钮内文字换行 */
+    min-width: fit-content; /* 确保按钮容器不会收缩 */
+  }
+
+  :deep(.remove-btn) {
+    flex-shrink: 0;
+    margin-top: 18px;
+    min-width: fit-content; /* 确保按钮不会收缩 */
+  }
+
+  /* 响应式处理：在小屏幕上允许换行，但保持按钮在同一行 */
+  @media (max-width: 768px) {
+    :deep(.key-value-row) {
+      flex-wrap: wrap;
+    }
+    
+    :deep(.key-value-field) {
+      min-width: 120px;
+    }
+    
+    :deep(.button-container) {
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: 8px;
+    }
+    
+    :deep(.remove-btn) {
+      margin-top: 0;
+      align-self: center;
+    }
+  }
 </style>