优化展示

src/components/feed/AIRecipeReviewDialog.vue

@@ -2,9 +2,10 @@
   <el-dialog
     v-model="dialogVisible"
     title="AI点评配方"
-    width="600px"
+    width="80%"
     :before-close="handleClose"
     destroy-on-close
+    align-center
   >
     <el-form label-width="100px">
       <el-form-item label="配方名称:">
@@ -28,8 +29,12 @@
           ></el-option>
         </el-select>
       </el-form-item>
+    </el-form>
 
-      <el-form-item label="AI点评结果:" v-if="aiReviewResult || error">
+    <!-- 将AI点评结果移出el-form -->
+    <div v-if="aiReviewResult || error" style="margin-top: 20px;">
+      <label class="el-form-item__label" style="width: 100px;">AI点评结果:</label>
+      <div class="ai-review-content-wrapper" style="margin-top: 10px;">
         <el-alert
           v-if="error"
           :title="error"
@@ -37,15 +42,14 @@
           show-icon
           :closable="false"
         ></el-alert>
-        <el-input
-          v-else-if="aiReviewResult"
-          type="textarea"
-          :rows="8"
-          :value="`AI模型: ${aiReviewResult.ai_model}\n\n点评内容:\n${aiReviewResult.review_message}`"
-          readonly
-        ></el-input>
-      </el-form-item>
-    </el-form>
+        <div v-else-if="aiReviewResult" class="ai-review-content">
+          <p style="text-align: center; margin-bottom: 20px; color: #888;">
+            由 <strong>{{ aiReviewResult.ai_model }}</strong> 生成
+          </p>
+          <div v-html="renderedReview" class="markdown-body"></div>
+        </div>
+      </div>
+    </div>
 
     <template #footer>
       <span class="dialog-footer">
@@ -66,6 +70,7 @@
 <script>
 import { getPigTypes, aiDiagnoseRecipe } from '../../api/feed';
 import { ElMessage } from 'element-plus';
+import { marked } from 'marked';
 
 export default {
   name: 'AIRecipeReviewDialog',
@@ -91,6 +96,14 @@ export default {
       error: null,
     };
   },
+  computed: {
+    renderedReview() {
+      if (this.aiReviewResult && this.aiReviewResult.review_message) {
+        return marked(this.aiReviewResult.review_message);
+      }
+      return '';
+    },
+  },
   watch: {
     visible(newVal) {
       this.dialogVisible = newVal;
@@ -184,5 +197,87 @@ export default {
 </script>
 
 <style scoped>
-/* 可以根据需要添加样式 */
+.ai-review-content {
+  background-color: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.markdown-body {
+  line-height: 1.6;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3) {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body :deep(h1) {
+  font-size: 2em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: .3em;
+}
+
+.markdown-body :deep(h2) {
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: .3em;
+}
+
+.markdown-body :deep(h3) {
+  font-size: 1.25em;
+}
+
+.markdown-body :deep(p) {
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(ul),
+.markdown-body :deep(ol) {
+  padding-left: 2em;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(li) {
+  margin-bottom: .5em;
+}
+
+.markdown-body :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(th),
+.markdown-body :deep(td) {
+  border: 1px solid #dfe2e5;
+  padding: 8px 12px;
+}
+
+.markdown-body :deep(th) {
+  background-color: #f6f8fa;
+  font-weight: 600;
+}
+
+.markdown-body :deep(blockquote) {
+  color: #6a737d;
+  border-left: .25em solid #dfe2e5;
+  padding: 0 1em;
+  margin-left: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body :deep(code) {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27,31,35,.05);
+  border-radius: 3px;
+}
 </style>