1

src/views/system/jd-instruction/index.vue

@@ -9,20 +9,19 @@
         <el-form-item label="输入指令">
           <el-input v-model="form.command" type="textarea" :rows="8" placeholder="例如：京今日统计 / 京昨日订单 / 慢搜关键词 / 录单20250101-20250107" />
         </el-form-item>
-        <el-form-item class="button-group">
+        <el-form-item class="button-group button-group-primary">
           <el-button type="success" size="medium" @click="run" :loading="loading">执行</el-button>
           <el-button type="danger" size="medium" @click="clearAll">清空</el-button>
           <el-button size="warning" @click="fillMan">慢单</el-button>
           <el-button size="success" @click="fillSheng">生</el-button>
         </el-form-item>
-        <el-form-item class="button-group">
+        <el-form-item class="button-group button-group-secondary">
           <el-button size="primary" @click="fillTF">腾峰</el-button>
           <el-button type="primary" size="medium" @click="fillFan">凡</el-button>
           <el-button type="primary" size="medium" @click="fillWen">纹</el-button>
           <el-button type="primary" size="medium" @click="fillHong">鸿</el-button>
           <el-button type="primary" size="medium" @click="fillPDD">拼多多</el-button>
           <el-button type="primary" size="medium" @click="fillPDDWen">拼多多-纹</el-button>
-
         </el-form-item>
       </el-form>
 
@@ -505,26 +504,91 @@ export default {
 </script>
 
 <style scoped>
-.box-card { margin: 20px; }
+.box-card { 
+  margin: 20px; 
+}
+
+/* 移动端卡片优化 */
+@media (max-width: 768px) {
+  .box-card {
+    margin: 10px;
+    border-radius: 8px;
+  }
+  
+  .box-card ::v-deep .el-card__header {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+  
+  .box-card ::v-deep .el-card__body {
+    padding: 16px;
+  }
+}
 .msg-block { margin-bottom: 12px; }
 .msg-header { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
 
 /* 按钮组样式 */
 .button-group {
   margin-bottom: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 
 .button-group .el-button {
-  margin-right: 12px;
+  margin-right: 0;
   padding: 12px 24px;
   font-size: 14px;
   font-weight: 500;
+  flex: 1;
+  min-width: 80px;
 }
 
 .button-group .el-button:last-child {
   margin-right: 0;
 }
 
+/* 移动端按钮优化 */
+@media (max-width: 768px) {
+  .button-group {
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  
+  .button-group .el-button {
+    padding: 12px 8px;
+    font-size: 13px;
+    height: 44px; /* 增大触摸目标 */
+    line-height: 1.2;
+  }
+  
+  /* 第一行按钮组（执行、清空、慢单、生）- 每行2个 */
+  .button-group-primary {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+  
+  .button-group-primary .el-button {
+    width: 100%;
+    margin: 0;
+  }
+  
+  /* 第二行按钮组（腾峰、凡、纹等）- 每行3个 */
+  .button-group-secondary {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+  
+  .button-group-secondary .el-button {
+    width: 100%;
+    margin: 0;
+    padding: 10px 4px;
+    font-size: 12px;
+  }
+}
+
 /* 历史记录控制条 */
 .history-controls {
   display: flex;
@@ -551,6 +615,34 @@ export default {
   margin-top: 8px;
 }
 
+/* 移动端历史记录优化 */
+@media (max-width: 768px) {
+  .history-container {
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .history-column {
+    width: 100%;
+  }
+  
+  .history-content {
+    height: 300px;
+  }
+  
+  .history-controls {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 12px;
+  }
+  
+  .history-label {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+}
+
 .history-column {
   flex: 1;
   border: 1px solid #DCDFE6;