feat: markdown编辑器

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;
+}

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">

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-col :span="18">
-        <el-scrollbar height="370" wrap-class="paragraph-scrollbar">
+        <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"

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>
+     </el-input>-->
-      <span v-else class="break-all lighter">{{ form.content }}</span>
+      <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>()