From 8c96c1ffa4daa6e79525059a0588159d45ded76e Mon Sep 17 00:00:00 2001
From: 18278715334 <18278715334@163.com>
Date: Tue, 9 Dec 2025 17:13:29 +0800
Subject: [PATCH] 1

---
 src/pages/api/ApiDebugger.vue | 93 ++++++++++++++++++++++++++++++++---
 1 file changed, 86 insertions(+), 7 deletions(-)

diff --git a/src/pages/api/ApiDebugger.vue b/src/pages/api/ApiDebugger.vue
index 4c9d948..5d4d948 100644
--- a/src/pages/api/ApiDebugger.vue
+++ b/src/pages/api/ApiDebugger.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-col h-screen bg-gray-50 overflow-hidden">
+  <div class="debugger-page flex flex-col h-screen bg-gray-50 overflow-hidden">
     <!-- 主要内容区域 -->
-    <div class="flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
+    <div class="debugger-main flex gap-3 flex-1 p-3 overflow-hidden min-h-0">
       <!-- 左侧产品选择区域 -->
-      <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-64 flex-shrink-0">
+      <div class="panel-left bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full w-72 flex-shrink-0">
         <div class="p-3 flex flex-col h-full">
           <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
             <h3 class="text-base font-semibold text-gray-800 m-0">产品选择</h3>
@@ -58,11 +58,11 @@
       </div>
 
       <!-- 中间调试配置区域 -->
-      <div class="bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
+      <div class="panel-center bg-white rounded-lg shadow-sm overflow-hidden flex flex-col h-full flex-1 min-w-0">
         <div class="p-3 flex flex-col h-full">
-          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0">
+          <div class="flex justify-between items-center mb-3 flex-wrap gap-2 flex-shrink-0 actions-header">
             <h3 class="text-base font-semibold text-gray-800 m-0">调试配置</h3>
-            <div class="flex gap-1.5 items-center">
+            <div class="actions-bar flex gap-1.5 items-center flex-wrap">
               <el-button @click="goToProductDetail" size="default" type="primary" plain>
                 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg">
@@ -534,7 +534,86 @@
 </template>
 
 <style scoped>
-/* 所有样式已使用Tailwind CSS实现 */
+/* 响应式优化 */
+@media (max-width: 1024px) {
+  .debugger-page {
+    height: auto;
+    min-height: 100vh;
+    overflow: auto;
+  }
+
+  .debugger-main {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .panel-left {
+    width: 100%;
+    max-height: 360px;
+    overflow: auto;
+  }
+
+  .panel-center {
+    width: 100%;
+    min-height: auto;
+    overflow: visible;
+  }
+
+  .panel-center .grid.grid-cols-2 {
+    grid-template-columns: 1fr;
+  }
+
+  .panel-center .grid.grid-cols-2 > * {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .debugger-main {
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .panel-left {
+    max-height: 320px;
+  }
+
+  .panel-center {
+    padding: 0;
+  }
+
+  .actions-header {
+    align-items: flex-start;
+  }
+
+  /* 按钮区域：两列折行，避免超出屏幕 */
+  .actions-bar {
+    width: 100%;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  .actions-bar .el-button {
+    flex: 1 1 48%;
+    min-width: 140px;
+  }
+
+  /* 主要按钮独占一行，保证可点 */
+  .actions-bar .el-button:last-child {
+    flex: 1 1 100%;
+  }
+
+  /* 操作按钮区域允许换行且间距更紧凑 */
+  .panel-center .flex-wrap {
+    gap: 8px;
+  }
+
+  /* 表单输入区域保持可读性 */
+  .panel-center :deep(.el-input),
+  .panel-center :deep(.el-select) {
+    width: 100%;
+  }
+}
 </style>
 
 <script setup>