From ba9305c405a0e4d16c6dee1e983789c8a3f35679 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 13 Mar 2024 16:03:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20markdown=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/styles/app.scss                        |  8 +++++++
 .../dataset/component/EditParagraphDialog.vue |  2 +-
 .../paragraph/component/ParagraphDialog.vue   |  8 +++----
 .../paragraph/component/ParagraphForm.vue     | 24 ++++++++++++++-----
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index b47dd0ff8..7690099a6 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -518,3 +518,11 @@ h4 {
     }
   }
 }
+
+// markdown
+
+.ͼ1 .cm-placeholder {
+  color: var(--app-input-color-placeholder);
+  font-size: 14px;
+  font-weight: 400;
+}
diff --git a/ui/src/views/dataset/component/EditParagraphDialog.vue b/ui/src/views/dataset/component/EditParagraphDialog.vue
index f5808378d..d82ef305e 100644
--- a/ui/src/views/dataset/component/EditParagraphDialog.vue
+++ b/ui/src/views/dataset/component/EditParagraphDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="编辑分段" v-model="dialogVisible" width="600" destroy-on-close>
+  <el-dialog title="编辑分段" v-model="dialogVisible" width="80%" destroy-on-close>
     <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
     <template #footer>
       <span class="dialog-footer">
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index 89de8e7f3..a429c9fc5 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -2,13 +2,13 @@
   <el-dialog
     :title="title"
     v-model="dialogVisible"
-    width="800"
+    width="80%"
     class="paragraph-dialog"
     destroy-on-close
   >
     <el-row v-loading="loading">
-      <el-col :span="16">
-        <el-scrollbar height="370" wrap-class="paragraph-scrollbar">
+      <el-col :span="18">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
           <div class="p-24" style="padding-bottom: 8px">
             <div class="flex-between mb-16">
               <div class="bold title align-center">分段内容</div>
@@ -27,7 +27,7 @@
           </el-button>
         </div>
       </el-col>
-      <el-col :span="8" class="border-l">
+      <el-col :span="6" class="border-l">
         <!-- 关联问题 -->
         <ProblemComponent
           :problemId="problemId"
diff --git a/ui/src/views/paragraph/component/ParagraphForm.vue b/ui/src/views/paragraph/component/ParagraphForm.vue
index ab565366a..3876fb365 100644
--- a/ui/src/views/paragraph/component/ParagraphForm.vue
+++ b/ui/src/views/paragraph/component/ParagraphForm.vue
@@ -12,7 +12,7 @@
       <span class="lighter" v-else>{{ form.title || '-' }}</span>
     </el-form-item>
     <el-form-item label="分段内容" prop="content">
-      <el-input
+      <!-- <el-input
         v-if="isEdit"
         v-model="form.content"
         placeholder="请输入分段内容"
@@ -20,16 +20,25 @@
         show-word-limit
         :rows="8"
         type="textarea"
-      >
-      </el-input>
-      <span v-else class="break-all lighter">{{ form.content }}</span>
+      > 
+     </el-input>-->
+      <MdEditor
+        v-if="isEdit"
+        v-model="form.content"
+        placeholder="请输入分段内容"
+        :maxLength="4096"
+        :preview="false"
+        style="height: 300px;"
+      />
+      <MdPreview v-else ref="editorRef" editorId="preview-only" :modelValue="form.content" />
+      <!-- <span v-else class="break-all lighter">{{ form.content }}</span> -->
     </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onUnmounted, watch } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
-
+import { MdEditor, MdPreview } from 'md-editor-v3'
 const props = defineProps({
   data: {
     type: Object,
@@ -44,7 +53,10 @@ const form = ref<any>({
 })
 
 const rules = reactive<FormRules>({
-  content: [{ required: true, message: '请输入分段内容', trigger: 'blur' }]
+  content: [
+    { required: true, message: '请输入分段内容', trigger: 'blur' },
+    { max: 4096, message: '内容最多不超过 4096 个字', trigger: 'blur' }
+  ]
 })
 
 const paragraphFormRef = ref<FormInstance>()