diff --git a/src/views/system/jd-instruction/index.vue b/src/views/system/jd-instruction/index.vue index df03fa5..cecc9aa 100644 --- a/src/views/system/jd-instruction/index.vue +++ b/src/views/system/jd-instruction/index.vue @@ -30,16 +30,34 @@
-
-
-
- 第 {{ idx + 1 }} 段 - 复制此段 +
+ +
+
+ 完整消息 + 复制全部 +
+
+
-
-
- 复制全部 + + +
+
+ 消息列表(共 {{ resultList.length }} 条) +
+
+
+
+
+ 第 {{ idx + 1 }} 条 + 复制 +
+
{{ msg }}
+
+
+
@@ -173,6 +191,13 @@ export default { pendingCommand: '' // 待执行的命令(验证通过后执行) } }, + computed: { + // 生成完整消息,用三个空行分隔 + fullMessage() { + if (!this.resultList || this.resultList.length === 0) return '' + return this.resultList.join('\n\n\n') + } + }, mounted() { this.loadHistory() }, @@ -183,7 +208,7 @@ export default { }, copyAll() { if (!this.resultList || this.resultList.length === 0) return - const text = this.resultList.join('\n\n') + const text = this.resultList.join('\n\n\n') this.doCopy(text) }, copyHistory(type) { @@ -524,6 +549,144 @@ export default { padding: 16px; } } +/* 响应容器 */ +.response-container { + display: flex; + gap: 20px; + margin-top: 8px; +} + +.response-column { + flex: 1; + border: 1px solid #DCDFE6; + border-radius: 4px; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.response-column-full { + flex: 1.2; +} + +.response-column-list { + flex: 0.8; +} + +.response-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background-color: #F5F7FA; + border-bottom: 1px solid #DCDFE6; + font-weight: 600; + color: #303133; + font-size: 14px; +} + +.response-content { + padding: 16px; + background-color: #FFFFFF; + flex: 1; + overflow-y: auto; +} + +.response-column-full .response-content { + padding: 0; + display: flex; + flex-direction: column; +} + +.response-column-full .response-content ::v-deep .el-textarea { + flex: 1; + display: flex; + flex-direction: column; +} + +.response-column-full .response-content ::v-deep .el-textarea__inner { + border: none; + border-radius: 0; + resize: none; + flex: 1; + min-height: 500px; +} + +/* 消息列表样式 */ +.message-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.message-item { + padding: 12px; + border-radius: 4px; + background-color: #F9FAFC; + border-left: 3px solid #409EFF; + transition: all 0.3s; +} + +.message-item:hover { + background-color: #ECF5FF; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.message-item-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.message-index { + font-size: 12px; + color: #909399; + font-weight: 500; +} + +.message-content { + font-size: 13px; + color: #303133; + line-height: 1.6; + white-space: pre-wrap; + word-break: break-word; +} + +/* 移动端响应容器优化 */ +@media (max-width: 768px) { + .response-container { + flex-direction: column; + gap: 12px; + } + + .response-column { + width: 100%; + } + + .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 { + max-height: 400px; + padding: 12px; + } + + .message-item { + padding: 10px; + } + + .message-content { + font-size: 12px; + } +} + .msg-block { margin-bottom: 12px; } .msg-header { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }