1

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

@@ -31,23 +31,23 @@
         <el-empty description="无响应" />
       </div>
       <div v-else class="response-container">
-        <!-- 左边：完整消息 -->
-        <div class="response-column response-column-full">
+        <!-- 上面：完整消息 -->
+        <div class="response-section response-section-full">
           <div class="response-header">
             <span>完整消息</span>
             <el-button size="mini" type="primary" @click="copyAll">复制全部</el-button>
           </div>
-          <div class="response-content">
-            <el-input :value="fullMessage" type="textarea" :rows="20" readonly />
+          <div class="response-content-full">
+            <el-input :value="fullMessage" type="textarea" :rows="15" readonly />
           </div>
         </div>
 
-        <!-- 右边：独立消息列表 -->
-        <div class="response-column response-column-list">
+        <!-- 下面：独立消息列表 -->
+        <div class="response-section response-section-list">
           <div class="response-header">
             <span>消息列表（共 {{ resultList.length }} 条）</span>
           </div>
-          <div class="response-content">
+          <div class="response-content-list">
             <div class="message-list">
               <div v-for="(msg, idx) in resultList" :key="idx" class="message-item">
                 <div class="message-item-header">
@@ -552,12 +552,12 @@ export default {
 /* 响应容器 */
 .response-container {
   display: flex;
-  gap: 20px;
+  flex-direction: column;
+  gap: 16px;
   margin-top: 8px;
 }
 
-.response-column {
-  flex: 1;
+.response-section {
   border: 1px solid #DCDFE6;
   border-radius: 4px;
   overflow: hidden;
@@ -565,14 +565,6 @@ export default {
   flex-direction: column;
 }
 
-.response-column-full {
-  flex: 1.2;
-}
-
-.response-column-list {
-  flex: 0.8;
-}
-
 .response-header {
   display: flex;
   align-items: center;
@@ -585,31 +577,36 @@ export default {
   font-size: 14px;
 }
 
-.response-content {
-  padding: 16px;
-  background-color: #FFFFFF;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.response-column-full .response-content {
+/* 完整消息区域 */
+.response-content-full {
   padding: 0;
+  background-color: #FFFFFF;
   display: flex;
   flex-direction: column;
 }
 
-.response-column-full .response-content ::v-deep .el-textarea {
+.response-content-full ::v-deep .el-textarea {
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
-.response-column-full .response-content ::v-deep .el-textarea__inner {
+.response-content-full ::v-deep .el-textarea__inner {
   border: none;
   border-radius: 0;
   resize: none;
-  flex: 1;
-  min-height: 500px;
+  min-height: 400px;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+/* 消息列表区域 */
+.response-content-list {
+  padding: 16px;
+  background-color: #FFFFFF;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 /* 消息列表样式 */
@@ -637,6 +634,8 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .message-index {
@@ -651,29 +650,39 @@ export default {
   line-height: 1.6;
   white-space: pre-wrap;
   word-break: break-word;
+  font-family: 'Courier New', monospace;
+}
+
+/* 滚动条美化 */
+.response-content-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.response-content-list::-webkit-scrollbar-track {
+  background: #F5F7FA;
+}
+
+.response-content-list::-webkit-scrollbar-thumb {
+  background: #DCDFE6;
+  border-radius: 4px;
+}
+
+.response-content-list::-webkit-scrollbar-thumb:hover {
+  background: #C0C4CC;
 }
 
 /* 移动端响应容器优化 */
 @media (max-width: 768px) {
   .response-container {
-    flex-direction: column;
     gap: 12px;
   }
 
-  .response-column {
-    width: 100%;
+  .response-content-full ::v-deep .el-textarea__inner {
+    min-height: 250px;
+    font-size: 12px;
   }
 
-  .response-column-full,
-  .response-column-list {
-    flex: 1;
-  }
-
-  .response-column-full .response-content ::v-deep .el-textarea__inner {
-    min-height: 300px;
-  }
-
-  .response-column-list .response-content {
+  .response-content-list {
     max-height: 400px;
     padding: 12px;
   }
@@ -685,6 +694,15 @@ export default {
   .message-content {
     font-size: 12px;
   }
+
+  .message-item-header {
+    margin-bottom: 6px;
+  }
+
+  .response-header {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
 }
 
 .msg-block { margin-bottom: 12px; }