From 1390ddb36e704271f462e00b4b5f02f3174d0638 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 6 Jun 2025 16:32:03 +0800
Subject: [PATCH]  paragraph

---
 ui/package.json                               |   1 +
 .../dynamics-form/items/slider/Slider.vue     |   5 -
 ui/src/components/index.ts                    |   6 +
 ui/src/components/markdown/EchartsRander.vue  | 119 ++++++++
 ui/src/components/markdown/FormRander.vue     |  92 +++++++
 ui/src/components/markdown/HtmlRander.vue     |  36 +++
 ui/src/components/markdown/MdEditor.vue       |  26 ++
 .../components/markdown/MdEditorMagnify.vue   |  68 +++++
 ui/src/components/markdown/MdPreview.vue      |  23 ++
 ui/src/components/markdown/MdRenderer.vue     | 256 ++++++++++++++++++
 .../components/markdown/ReasoningRander.vue   |  35 +++
 .../markdown/assets/markdown-iconfont.js      |   1 +
 ui/src/locales/lang/en-US/common.ts           |   1 +
 ui/src/locales/lang/zh-CN/common.ts           |   1 +
 ui/src/locales/lang/zh-CN/views/index.ts      |   5 +-
 ui/src/locales/lang/zh-CN/views/knowledge.ts  |   2 +
 ui/src/locales/lang/zh-CN/views/paragraph.ts  |  32 +++
 ui/src/locales/lang/zh-Hant/common.ts         |   1 +
 ui/src/main.ts                                |  34 +++
 ui/src/router/modules/paragraph.ts            |   2 +-
 ui/src/styles/component.scss                  |   6 +
 ui/src/styles/element-plus.scss               |   6 +-
 ui/src/styles/index.scss                      |   2 +
 ui/src/styles/md-editor.scss                  |  46 ++++
 ui/src/views/document/index.vue               |  19 +-
 ui/src/views/knowledge/KnowledgeSetting.vue   | 123 ++++-----
 .../paragraph/component/ParagraphCard.vue     |  85 ++++++
 ui/src/views/paragraph/index.vue              | 211 ++++-----------
 ui/src/views/tool/index.vue                   |   4 +-
 29 files changed, 1009 insertions(+), 239 deletions(-)
 create mode 100644 ui/src/components/markdown/EchartsRander.vue
 create mode 100644 ui/src/components/markdown/FormRander.vue
 create mode 100644 ui/src/components/markdown/HtmlRander.vue
 create mode 100644 ui/src/components/markdown/MdEditor.vue
 create mode 100644 ui/src/components/markdown/MdEditorMagnify.vue
 create mode 100644 ui/src/components/markdown/MdPreview.vue
 create mode 100644 ui/src/components/markdown/MdRenderer.vue
 create mode 100644 ui/src/components/markdown/ReasoningRander.vue
 create mode 100644 ui/src/components/markdown/assets/markdown-iconfont.js
 create mode 100644 ui/src/locales/lang/zh-CN/views/paragraph.ts
 create mode 100644 ui/src/styles/md-editor.scss
 create mode 100644 ui/src/views/paragraph/component/ParagraphCard.vue

diff --git a/ui/package.json b/ui/package.json
index df3f14d24..d17f1fc23 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -20,6 +20,7 @@
     "axios": "^1.8.4",
     "dingtalk-jsapi": "^3.1.0",
     "element-plus": "^2.9.10",
+    "md-editor-v3": "^5.6.1",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.1",
     "use-element-plus-theme": "^0.0.5",
diff --git a/ui/src/components/dynamics-form/items/slider/Slider.vue b/ui/src/components/dynamics-form/items/slider/Slider.vue
index 3892f1563..000245a72 100644
--- a/ui/src/components/dynamics-form/items/slider/Slider.vue
+++ b/ui/src/components/dynamics-form/items/slider/Slider.vue
@@ -3,9 +3,4 @@
 </template>
 <script setup lang="ts"></script>
 <style lang="scss" scoped>
-.custom-slider {
-  .el-input-number.is-without-controls .el-input__wrapper {
-    padding: 0 !important;
-  }
-}
 </style>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 4fe7b5080..dbd79d8a8 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -16,6 +16,9 @@ import InfiniteScroll from './infinite-scroll/index.vue'
 import ModelSelect from './model-select/index.vue'
 import ReadWrite from './read-write/index.vue'
 import AutoTooltip from './auto-tooltip/index.vue'
+import MdEditor from './markdown/MdEditor.vue'
+import MdPreview from './markdown/MdPreview.vue'
+import MdEditorMagnify from './markdown/MdEditorMagnify.vue'
 export default {
   install(app: App) {
     app.component('LogoFull', LogoFull)
@@ -35,5 +38,8 @@ export default {
     app.component('ModelSelect', ModelSelect)
     app.component('ReadWrite', ReadWrite)
     app.component('AutoTooltip', AutoTooltip)
+    app.component('MdPreview', MdPreview)
+    app.component('MdEditor', MdEditor)
+    app.component('MdEditorMagnify', MdEditorMagnify)
   },
 }
diff --git a/ui/src/components/markdown/EchartsRander.vue b/ui/src/components/markdown/EchartsRander.vue
new file mode 100644
index 000000000..f008cdaa0
--- /dev/null
+++ b/ui/src/components/markdown/EchartsRander.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="charts-container">
+    <div ref="chartsRef" :style="style" v-resize="changeChartSize"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue'
+import * as echarts from 'echarts'
+const tmp = ref()
+const props = defineProps<{ option: string }>()
+const chartsRef = ref()
+
+const style = ref({
+  height: '220px',
+  width: '100%'
+})
+
+function initChart() {
+  if (chartsRef.value) {
+    let myChart = echarts?.getInstanceByDom(chartsRef.value)
+    if (myChart === null || myChart === undefined) {
+      myChart = echarts.init(chartsRef.value)
+    }
+    const option = JSON.parse(props.option)
+    if (option.actionType === 'EVAL') {
+      myChart.setOption(evalParseOption(option), true)
+    } else {
+      myChart.setOption(jsonParseOption(option), true)
+    }
+  }
+}
+function jsonParseOption(option: any) {
+  if (option.style) {
+    style.value = option.style
+  }
+
+  if (option.option) {
+    // 渲染数据
+    return option.option
+  }
+  return option
+}
+function evalParseOption(option_json: any) {
+  if (option_json.style) {
+    style.value = option_json.style
+  }
+  let option = {}
+  echarts
+  tmp.value = echarts
+  eval(option_json.option)
+  return option
+}
+
+function changeChartSize() {
+  echarts?.getInstanceByDom(chartsRef.value)?.resize()
+}
+
+watch(
+  () => props.option,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        initChart()
+      })
+    }
+  }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(chartsRef.value)?.dispose()
+})
+</script>
+<style lang="scss" scoped>
+.charts-container {
+  overflow-x: auto;
+}
+.charts-container::-webkit-scrollbar-track-piece {
+  background-color: rgba(0, 0, 0, 0);
+  border-left: 1px solid rgba(0, 0, 0, 0);
+}
+
+.charts-container::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.charts-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.5);
+
+  background-clip: padding-box;
+
+  -webkit-border-radius: 5px;
+
+  -moz-border-radius: 5px;
+
+  border-radius: 5px;
+
+  min-height: 28px;
+}
+
+.charts-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+
+  -webkit-border-radius: 5px;
+
+  -moz-border-radius: 5px;
+
+  border-radius: 5px;
+}
+</style>
diff --git a/ui/src/components/markdown/FormRander.vue b/ui/src/components/markdown/FormRander.vue
new file mode 100644
index 000000000..96c743809
--- /dev/null
+++ b/ui/src/components/markdown/FormRander.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <DynamicsForm
+      :disabled="is_submit || disabled"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormRef"
+      :render_data="form_field_list"
+      label-suffix=":"
+      v-model="form_data"
+      :model="form_data"
+    ></DynamicsForm>
+    <el-button
+      :type="is_submit ? 'info' : 'primary'"
+      :disabled="is_submit || disabled"
+      @click="submit"
+      >{{$t('common.submit')}}</el-button
+    >
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+const props = withDefaults(
+  defineProps<{
+    form_setting: string
+    disabled?: boolean
+    sendMessage?: (question: string, type: 'old' | 'new', other_params_data?: any) => void
+    child_node?: any
+    chat_record_id?: string
+    runtime_node_id?: string
+  }>(),
+  {
+    disabled: false
+  }
+)
+const form_setting_data = computed(() => {
+  if (props.form_setting) {
+    return JSON.parse(props.form_setting)
+  } else {
+    return {}
+  }
+})
+const _submit = ref<boolean>(false)
+/**
+ * 表单字段列表
+ */
+const form_field_list = computed(() => {
+  if (form_setting_data.value.form_field_list) {
+    return form_setting_data.value.form_field_list
+  }
+  return []
+})
+const is_submit = computed(() => {
+  if (_submit.value) {
+    return true
+  }
+  if (form_setting_data.value.is_submit) {
+    return form_setting_data.value.is_submit
+  } else {
+    return false
+  }
+})
+const _form_data = ref<any>({})
+const form_data = computed({
+  get: () => {
+    if (form_setting_data.value.is_submit) {
+      return form_setting_data.value.form_data
+    } else {
+      return _form_data.value
+    }
+  },
+  set: (v) => {
+    _form_data.value = v
+  }
+})
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const submit = () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    _submit.value = true
+    if (props.sendMessage) {
+      props.sendMessage('', 'old', {
+        child_node: props.child_node,
+        runtime_node_id: props.runtime_node_id,
+        chat_record_id: props.chat_record_id,
+        node_data: form_data.value
+      })
+    }
+  })
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/markdown/HtmlRander.vue b/ui/src/components/markdown/HtmlRander.vue
new file mode 100644
index 000000000..a8be05959
--- /dev/null
+++ b/ui/src/components/markdown/HtmlRander.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="htmlRef" :innerHTML="source"></div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+const htmlRef = ref<HTMLElement>()
+const props = withDefaults(
+  defineProps<{
+    source?: string
+    script_exec?: boolean
+  }>(),
+  {
+    source: '',
+    script_exec: true
+  }
+)
+onMounted(() => {
+  if (htmlRef.value && props.script_exec) {
+    const range = document.createRange()
+    range.selectNode(htmlRef.value)
+    const scripts = htmlRef.value.getElementsByTagName('script')
+    if (scripts) {
+      var documentFragment = range.createContextualFragment(
+        [...scripts]
+          .map((item: HTMLElement) => {
+            htmlRef.value?.removeChild(item)
+            return item.outerHTML
+          })
+          .join('\n')
+      )
+      htmlRef.value.appendChild(documentFragment)
+    }
+  }
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/markdown/MdEditor.vue b/ui/src/components/markdown/MdEditor.vue
new file mode 100644
index 000000000..6a621a04e
--- /dev/null
+++ b/ui/src/components/markdown/MdEditor.vue
@@ -0,0 +1,26 @@
+<template>
+  <MdEditor :language="language" noIconfont noPrettier v-bind="$attrs">
+    <template #defFooters>
+      <slot name="defFooters"> </slot>
+    </template>
+  </MdEditor>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { MdEditor, config } from 'md-editor-v3'
+import { getBrowserLang } from '@/locales/index'
+import './assets/markdown-iconfont.js'
+// 引入公共库中的语言配置
+import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
+
+defineOptions({ name: 'MdEditor' })
+const language = computed(() => localStorage.getItem('MaxKB-locale') || getBrowserLang() || '')
+config({
+  editorConfig: {
+    languageUserDefined: {
+      'zh-Hant': ZH_TW
+    }
+  }
+})
+</script>
diff --git a/ui/src/components/markdown/MdEditorMagnify.vue b/ui/src/components/markdown/MdEditorMagnify.vue
new file mode 100644
index 000000000..e8555abe3
--- /dev/null
+++ b/ui/src/components/markdown/MdEditorMagnify.vue
@@ -0,0 +1,68 @@
+<template>
+  <MdEditor
+    v-bind="$attrs"
+    v-model="data"
+    :preview="false"
+    :toolbars="[]"
+    class="magnify-md-editor"
+    :footers="footers"
+  >
+    <template #defFooters>
+      <el-button text type="info" @click="openDialog">
+        <AppIcon class="color-secondary" iconName="app-magnify" style="font-size: 16px"></AppIcon>
+      </el-button>
+    </template>
+  </MdEditor>
+  <!-- 回复内容弹出层 -->
+  <el-dialog v-model="dialogVisible" :title="title" append-to-body align-center>
+    <MdEditor v-model="cloneContent" :preview="false" :toolbars="[]" :footers="[]"></MdEditor>
+    <template #footer>
+      <div class="dialog-footer mt-24">
+        <el-button type="primary" @click="submitDialog"> {{ $t('common.confirm') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+defineOptions({ name: 'MdEditorMagnify' })
+const props = defineProps<{
+  title: String
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue', 'submitDialog'])
+const data = computed({
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+const dialogVisible = ref(false)
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    emit('submitDialog', cloneContent.value)
+  }
+})
+
+const cloneContent = ref('')
+const footers: any = [null, '=', 0]
+function openDialog() {
+  cloneContent.value = props.modelValue
+  dialogVisible.value = true
+}
+function submitDialog() {
+  emit('submitDialog', cloneContent.value)
+  dialogVisible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.magnify-md-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>
diff --git a/ui/src/components/markdown/MdPreview.vue b/ui/src/components/markdown/MdPreview.vue
new file mode 100644
index 000000000..0d8c3ab15
--- /dev/null
+++ b/ui/src/components/markdown/MdPreview.vue
@@ -0,0 +1,23 @@
+<template>
+  <MdPreview :language="language" noIconfont noPrettier :codeFoldable="false" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { MdPreview, config } from 'md-editor-v3'
+import { getBrowserLang } from '@/locales/index'
+import useStore from '@/stores'
+// 引入公共库中的语言配置
+import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
+
+defineOptions({ name: 'MdPreview' })
+const { user } = useStore()
+const language = computed(() => user.getLanguage() || getBrowserLang() || '')
+config({
+  editorConfig: {
+    languageUserDefined: {
+      'zh-Hant': ZH_TW
+    }
+  }
+})
+</script>
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
new file mode 100644
index 000000000..e2fc4ee90
--- /dev/null
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <!-- 推理过程组件 -->
+    <ReasoningRander :content="reasoning_content" v-if="reasoning_content?.trim()" />
+    <template v-for="(item, index) in md_view_list" :key="index">
+      <div
+        v-if="item.type === 'question'"
+        @click="sendMessage ? sendMessage(item.content, 'new') : (content: string) => {}"
+        class="problem-button mt-4 mb-4 flex"
+        :class="sendMessage ? 'cursor' : 'disabled'"
+      >
+        <el-icon class="mr-8" style="margin-top: 2px;">
+          <EditPen />
+        </el-icon>
+        {{ item.content }}
+      </div>
+      <HtmlRander v-else-if="item.type === 'html_rander'" :source="item.content"></HtmlRander>
+      <EchartsRander
+        v-else-if="item.type === 'echarts_rander'"
+        :option="item.content"
+      ></EchartsRander>
+      <FormRander
+        :chat_record_id="chat_record_id"
+        :runtime_node_id="runtime_node_id"
+        :child_node="child_node"
+        :disabled="disabled"
+        :send-message="sendMessage"
+        v-else-if="item.type === 'form_rander'"
+        :form_setting="item.content"
+      ></FormRander>
+      <MdPreview
+        v-else
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="item.content"
+        :key="index"
+        class="maxkb-md"
+      />
+    </template>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { config } from 'md-editor-v3'
+import HtmlRander from './HtmlRander.vue'
+import EchartsRander from './EchartsRander.vue'
+import FormRander from './FormRander.vue'
+import ReasoningRander from './ReasoningRander.vue'
+config({
+  markdownItConfig(md) {
+    md.renderer.rules.image = (tokens, idx, options, env, self) => {
+      tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0')
+      if (tokens[idx].content) {
+        tokens[idx].attrSet('title', tokens[idx].content)
+      }
+      tokens[idx].attrSet(
+        'onerror',
+        'this.src="/ui/assets/load_error.png";this.onerror=null;this.height="33px"'
+      )
+      return md.renderer.renderToken(tokens, idx, options)
+    }
+    md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+      tokens[idx].attrSet('target', '_blank')
+      return md.renderer.renderToken(tokens, idx, options)
+    }
+    document.appendChild
+  }
+})
+const props = withDefaults(
+  defineProps<{
+    source?: string
+    reasoning_content?: string
+    inner_suffix?: boolean
+    sendMessage?: (question: string, type: 'old' | 'new', other_params_data?: any) => void
+    child_node?: any
+    chat_record_id?: string
+    runtime_node_id?: string
+    disabled?: boolean
+  }>(),
+  {
+    source: '',
+    disabled: false
+  }
+)
+const editorRef = ref()
+const md_view_list = computed(() => {
+  const temp_source = props.source
+  return split_form_rander(
+    split_echarts_rander(split_html_rander(split_quick_question([temp_source])))
+  )
+})
+
+const split_quick_question = (result: Array<string>) => {
+  return result
+    .map((item) => split_quick_question_(item))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+const split_quick_question_ = (source: string) => {
+  const temp_md_quick_question_list = source.match(/<quick_question>[\d\D]*?<\/quick_question>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<quick_question>[\d\D]*?<\/quick_question>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: 'md', content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'question',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<quick_question>', '')
+          .replace('</quick_question>', '')
+      }
+    }
+  })
+  return result
+}
+const split_html_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_html_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_html_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<html_rander>[\d\D]*?<\/html_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<html_rander>[\d\D]*?<\/html_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'html_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<html_rander>', '')
+          .replace('</html_rander>', '')
+      }
+    }
+  })
+  return result
+}
+
+const split_echarts_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_echarts_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_echarts_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<echarts_rander>[\d\D]*?<\/echarts_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<echarts_rander>[\d\D]*?<\/echarts_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'echarts_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<echarts_rander>', '')
+          .replace('</echarts_rander>', '')
+      }
+    }
+  })
+  return result
+}
+
+const split_form_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_form_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_form_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<form_rander>[\d\D]*?<\/form_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<form_rander>[\d\D]*?<\/form_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'form_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<form_rander>', '')
+          .replace('</form_rander>', '')
+      }
+    }
+  })
+  return result
+}
+</script>
+<style lang="scss" scoped>
+.problem-button {
+  width: 100%;
+  border: none;
+  border-radius: 8px;
+  background: var(--app-layout-bg-color);
+  padding: 12px;
+  box-sizing: border-box;
+  color: var(--el-text-color-regular);
+  word-break: break-all;
+
+  &:hover {
+    background: var(--el-color-primary-light-9);
+  }
+
+  &.disabled {
+    &:hover {
+      background: var(--app-layout-bg-color);
+    }
+  }
+
+  :deep(.el-icon) {
+    color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/ui/src/components/markdown/ReasoningRander.vue b/ui/src/components/markdown/ReasoningRander.vue
new file mode 100644
index 000000000..b42ae7fed
--- /dev/null
+++ b/ui/src/components/markdown/ReasoningRander.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="reasoning">
+    <el-button text @click="showThink = !showThink" class="reasoning-button">
+      {{ $t('views.applicationWorkflow.nodes.aiChatNode.think') }}
+      <el-icon class="ml-4" :class="showThink ? 'rotate-180' : ''"><ArrowDownBold /> </el-icon>
+    </el-button>
+    <el-collapse-transition>
+      <div class="border-l mt-8" v-show="showThink">
+        <MdPreview
+          ref="editorRef"
+          editorId="preview-only"
+          :modelValue="content"
+          class="reasoning-md"
+        />
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+const props = defineProps<{ content?: string }>()
+const showThink = ref<boolean>(true)
+</script>
+<style lang="scss" scoped>
+.reasoning {
+  .reasoning-button {
+    font-size: 14px;
+    color: var(--app-text-color-secondary) !important;
+  }
+  .reasoning-md {
+    padding-left: 8px;
+    --md-color: var(--app-text-color-secondary) !important;
+  }
+}
+</style>
diff --git a/ui/src/components/markdown/assets/markdown-iconfont.js b/ui/src/components/markdown/assets/markdown-iconfont.js
new file mode 100644
index 000000000..6b8505f21
--- /dev/null
+++ b/ui/src/components/markdown/assets/markdown-iconfont.js
@@ -0,0 +1 @@
+window._iconfont_svg_string_2605852='<svg><symbol id="md-editor-icon-col-resize" viewBox="0 0 1024 1024"><path d="M661.63378906 895.64257813L661.63378906 128.35742187c0-21.09375 17.13867188-38.23242188 38.23242188-38.23242187 21.09375 0 38.23242188 17.13867188 38.23242187 38.23242188l0 766.62597656c0 21.09375-17.13867188 38.23242188-38.23242187 38.23242187-21.09375 0.65917969-38.23242188-16.47949219-38.23242188-37.57324218zM474.42675781 895.64257813L474.42675781 128.35742187c0-21.09375 17.13867188-38.23242188 38.23242188-38.23242187C534.41210938 90.125 551.55078125 107.26367187 551.55078125 128.35742187l0 766.62597657c0 21.09375-17.13867188 38.23242188-38.23242188 38.23242187-21.75292969 0.65917969-38.89160156-16.47949219-38.89160156-37.57324219zM287.87890625 895.64257813L287.87890625 128.35742187C287.87890625 107.26367187 305.01757812 90.125 326.11132812 90.125c21.09375 0 38.23242188 17.13867188 38.23242188 38.23242188l1e-8 766.62597656c0 21.09375-17.13867188 38.23242188-38.23242188 38.23242187-21.09375 0.65917969-38.23242188-16.47949219-38.23242188-37.57324218z"  ></path></symbol><symbol id="md-editor-icon-jump" viewBox="0 0 1024 1024"><path d="M280.25714112 790.09143067a46.39492035 46.39492035 0 0 1-46.34857179-46.34857179V280.25714112a46.39492035 46.39492035 0 0 1 46.34857179-46.34857179h208.56857299v46.34857179H280.25714112v463.48571776h463.48571776V535.17428589h46.34857179V743.74285888a46.39492035 46.39492035 0 0 1-46.34857179 46.34857179H280.25714112zM558.34857177 233.90856933v46.34857179h152.62584688L512 479.23155975 544.76844025 512 743.74285888 313.02558135V465.65142823h46.34857179V257.08285523a23.17428589 23.17428589 0 0 0-23.1742859-23.1742859H558.34857177z" fill="#000000" fill-opacity=".9" ></path></symbol><symbol id="md-editor-icon-copy" viewBox="0 0 1024 1024"><path d="M717.2421875 679.5265625a31.89375 31.89375 0 0 1 0-63.7875 30.8390625 30.8390625 0 0 0 30.8390625-30.8390625V308.4875a30.8390625 30.8390625 0 0 0-30.8390625-30.8390625H440.8296875a30.8390625 30.8390625 0 0 0-30.8390625 30.8390625 31.89375 31.89375 0 1 1-63.7875 0 94.8375 94.8375 0 0 1 94.6265625-94.6265625h276.4125a94.8375 94.8375 0 0 1 94.6265625 94.6265625v276.4125a94.8375 94.8375 0 0 1-94.6265625 94.6265625z"  ></path><path d="M575.8296875 817.775H311.103125a99.815625 99.815625 0 0 1-99.9421875-99.9421875v-265.78125a99.815625 99.815625 0 0 1 99.9421875-99.984375h264.7265625a99.815625 99.815625 0 0 1 99.9421875 99.9421875v265.78125c1.0546875 55.3078125-44.634375 99.984375-99.9421875 99.984375zM311.103125 415.8546875a35.859375 35.859375 0 0 0-36.1546875 36.1546875v265.78125a35.859375 35.859375 0 0 0 36.1546875 36.1546875h264.7265625a35.859375 35.859375 0 0 0 36.1546875-36.1546875v-265.78125a35.859375 35.859375 0 0 0-36.1546875-36.1546875z"  ></path></symbol><symbol id="md-editor-icon-task" viewBox="0 0 1024 1024"><path d="M672.32 672v68.8A59.52 59.52 0 0 1 612.48 800H283.52A59.52 59.52 0 0 1 224 740.48V411.52A59.52 59.52 0 0 1 283.52 352H352V283.52A59.52 59.52 0 0 1 411.52 224h329.28a59.52 59.52 0 0 1 59.52 59.52v329.28A59.52 59.52 0 0 1 740.48 672h-68.16z m0-64H736V288H416v64h196.8a59.52 59.52 0 0 1 59.52 59.52V608zM288 736h320V416H288v320z m128-64a32 32 0 0 1-22.72-9.28l-64-64a32 32 0 0 1 45.12-45.12l41.28 41.28 105.28-105.28a32 32 0 0 1 45.12 45.12l-128 128A32 32 0 0 1 416 672z"  ></path></symbol><symbol id="md-editor-icon-formula" viewBox="0 0 1024 1024"><path d="M539.21819878 548.59683227L575.84284019 512l-36.62464141-36.59683227L361.69158172 298.02254868l374.1024971-0.20161629v-51.77367211l-447.53949164 0.24333001v51.7736721L502.59355736 512 288.20592117 726.20687676v51.50253295l447.53949166 0.24333001v-51.77367211l-374.1024971-0.20161629 177.57528304-177.38061905"  ></path></symbol><symbol id="md-editor-icon-mermaid" viewBox="0 0 1024 1024"><path d="M812.40545039 771.45579978L724.78666362 771.45579978c-13.82543327 0-25.03357536-11.18650107-25.03357537-24.98201882L699.75308825 671.52263255c0-13.79742724 11.2081421-24.98201881 25.03357538-24.98201881l25.03357535 0L749.82023898 534.11611888c0-13.79870023-11.20686909-24.9832918-25.03357536-24.9832918L524.51615118 509.13282707l0 137.40778668 25.03484838-1e-8c13.82543327 0 25.03357536 11.18459157 25.03357536 24.98201882l1e-8 74.95178492c0 13.79551773-11.2081421 24.98201881-25.03357538 24.9820188L461.93284926 771.45643628c-13.82670626 0-25.03357536-11.18650107-25.03357536-24.9820188L436.8992739 671.52263255c0-13.79742724 11.20686909-24.98201881 25.03357537-24.98201881l25.03357537 0 0-137.40778666L299.21333638 509.13282707c-13.82543327 0-25.03357536 11.18459157-25.03357536 24.98329181l0 112.42449486 25.03357536 1e-8c13.82543327 0 25.03357536 11.18459157 25.03357537 24.9820188l0 74.95178493c0 13.79551773-11.2081421 24.98201881-25.03357537 24.98201879L211.59454961 771.45643628c-13.82543327 0-25.03357536-11.18650107-25.03357538-24.9820188L186.56097423 671.52263255c0-13.79742724 11.2081421-24.98201881 25.03357538-24.98201881l25.03357536 0L236.62812497 521.62351822c0-27.59549098 22.41692069-49.96658362 50.06906023-49.9665836L486.96642464 471.65693462 486.96642464 334.25105744l-25.03357538 0c-13.82670626 0-25.03357536-11.18650107-25.03357536-24.98456481L436.8992739 234.3172537c0-13.79870023 11.20686909-24.9832918 25.03357537-24.98329179l87.61878679 0c13.82543327 0 25.03357536 11.18459157 25.03357536 24.9832918l0 74.94860241c0 13.79870023-11.2081421 24.98456481-25.03357536 24.98456482l-25.03484837 0 0 137.40651368 212.78793662 0c27.65023005 0 50.06715074 22.37109264 50.06715072 49.96658361l0 124.91645902 25.03357537 0c13.82543327 0 25.03357536 11.18459157 25.03357537 24.9820188l0 74.95178491C837.43902577 760.26993521 826.23024717 771.45579978 812.40545039 771.45579978z"  ></path></symbol><symbol id="md-editor-icon-layout-one" viewBox="0 0 1024 1024"><path d="M729.2589302 200.59553315A65.17767906 65.17767906 0 0 1 794.43660927 265.77321222v492.45357557a65.17767906 65.17767906 0 0 1-65.17767907 65.17767906H251.28928375A21.72589302 21.72589302 0 0 1 229.56339073 801.67857383V222.32142617A21.72589302 21.72589302 0 0 1 251.28928375 200.59553315z m-325.88839531 43.45178604h-130.35535811v535.90536162h130.35535811v-535.90536162z m325.88839531 0H446.82232094v535.90536162H729.2589302a21.72589302 21.72589302 0 0 0 21.62450575-19.64020728L750.98482322 758.22678778V265.77321222A21.72589302 21.72589302 0 0 0 729.2589302 244.04731919z m-57.93571448 217.2589302a21.72589302 21.72589302 0 0 1 2.08568572 43.35039877L671.32321572 504.75803544H526.48392845a21.72589302 21.72589302 0 0 1-2.08568572-43.35039809L526.48392845 461.30624939h144.83928727z m0-130.35535812a21.72589302 21.72589302 0 0 1 2.08568572 43.35039876L671.32321572 374.40267732H526.48392845a21.72589302 21.72589302 0 0 1-2.08568572-43.3503981L526.48392845 330.95089127h144.83928727z"  ></path></symbol><symbol id="md-editor-icon-delete" viewBox="0 0 1024 1024"><path d="M515.79524194 179.05679987c-68.09641701 0-123.36437311 53.98477055-125.71620103 121.76005169H231.33065634c-17.63803047 0-32.06945491 14.32483177-32.0694549 32.07013384 0 17.63870941 14.32483177 32.07081277 32.07013384 32.07081277h35.38401145v358.75967145c0 67.34755264 45.64678017 122.40164448 102.09132918 122.40164447h287.56256215c56.33795634 0 102.09132917-54.73295599 102.09132917-122.40164447V365.17166244h32.07013384c17.63870941 0 32.07013383-14.32551071 32.07013383-32.07081278 0-17.63870941-14.32483177-32.07013383-32.07013383-32.07013384H641.29689977C639.26552878 233.04224935 583.89098001 179.0574788 515.79524194 179.0574788z m-65.63731748 121.76005169c2.35182792-34.74241867 30.68103455-61.68116815 65.74391014-61.68116814s63.39208222 27.04534214 65.42345322 61.68116814H450.15792446z m-81.45852015 485.33065058c-19.99053732 0-42.01244563-25.65624285-42.01244564-62.43003252V365.17166244h371.58813236V724.03792655c0 36.66719701-22.02190831 62.43071146-42.01244565 62.43071145H368.69940431v-0.32113586z m0 0"  ></path><path d="M411.7804923 709.07218092c14.64460976 0 26.72488523-14.6452887 26.72488522-33.03218354V487.57330692c0-18.38689484-11.97300385-33.03286248-26.72488522-33.03286248-14.64596763 0-26.72556416 14.64596763-26.72556416 33.03286248v188.46669046c0 18.27962325 11.7591396 33.03218354 26.72556416 33.03218355z m96.74540162 1e-8c14.6452887 0 26.72488523-14.6452887 26.72488522-33.03218355V487.57330692c0-18.38689484-11.97300385-33.03286248-26.72488522-33.03286248-14.6452887 0-26.72556416 14.64596763-26.72556415 33.03286248v188.46669046c0 18.27962325 12.08027546 33.03218354 26.72556415 33.03218355z m101.76951438 0c14.6452887 0 26.72556416-14.6452887 26.72556415-33.03218355V487.57330692c0-18.38689484-11.97300385-33.03286248-26.72556415-33.03286248-14.6452887 0-26.72488523 14.64596763-26.72488522 33.03286248v188.46669046c0 18.27962325 11.651868 33.03218354 26.72488522 33.03218355z m0 0"  ></path></symbol><symbol id="md-editor-icon-upload" viewBox="0 0 1024 1024"><path d="M737 371.375a196.875 196.875 0 0 1 0 393.75h-28.125a28.125 28.125 0 0 1 0-56.25h28.125a140.625 140.625 0 0 0 0-281.25 129.375 129.375 0 0 0-24.46875 2.25 28.125 28.125 0 0 1-33.46875-24.1875 168.75 168.75 0 0 0-334.125 0 28.125 28.125 0 0 1-33.46875 24.1875A129.375 129.375 0 0 0 287 427.625a140.625 140.625 0 0 0 0 281.25h28.125a28.125 28.125 0 0 1 0 56.25H287a196.875 196.875 0 0 1 0-393.75h7.3125a225 225 0 0 1 435.375 0z" fill="#808080" ></path><path d="M540.125 849.5a28.125 28.125 0 0 1-56.25 0v-253.125a28.125 28.125 0 0 1 56.25 0z" fill="#808080" ></path><path d="M434.65625 727.4375a28.125 28.125 0 1 1-42.1875-37.125l98.4375-112.5a28.125 28.125 0 0 1 42.1875 0l98.4375 112.5a28.125 28.125 0 0 1-42.1875 37.125L512 639.125z" fill="#808080" ></path></symbol><symbol id="md-editor-icon-close" viewBox="0 0 1024 1024"><path d="M249.6376475 722.01411781l203.49176437-203.49176531-203.49176437-203.52 52.17882281-52.17882281 203.52 203.52 203.52-203.52 52.17882375 52.20705844-203.49176437 203.49176437 203.46352875 203.49176531-52.17882282 52.17882375-203.52-203.49176531-203.49176531 203.49176531-52.17882281-52.17882375z"  ></path></symbol><symbol id="md-editor-icon-prettier" viewBox="0 0 1024 1024"><path d="M211.4140625 248.98730469h601.171875c-7.11914063 0-12.65625-5.53710938-12.65625-12.65625v551.33789062c0-7.11914063 5.53710938-12.65625 12.65625-12.65625H211.4140625c7.11914063 0 12.65625 5.53710938 12.65625 12.65625V236.7265625c0 6.328125-5.14160156 12.26074219-12.65625 12.26074219z m-25.3125 528.79394531c0 20.17089844 16.21582031 36.38671875 36.38671875 36.38671875h579.41894531c20.17089844 0 36.38671875-16.21582031 36.38671875-36.38671875V246.21875c0-20.17089844-16.21582031-36.38671875-36.38671875-36.38671875H222.48828125c-20.17089844 0-36.38671875 16.21582031-36.38671875 36.38671875v531.5625z"  ></path><path d="M614.43652344 542.05859375v-34.8046875l-64.86328125 43.50585938 64.86328125 43.50585937V559.4609375zM722.80566406 464.14355469v101.64550781h-108.36914062v-29.26757813H693.93359375V464.14355469zM309.89550781 421.03320312h249.9609375v43.50585938H309.89550781zM309.89550781 532.96191406h192.21679688v43.50585938H309.89550781zM309.89550781 309.5h394.71679688v43.50585938H309.89550781zM309.89550781 644.890625h394.71679688v43.50585938H309.89550781z"  ></path></symbol><symbol id="md-editor-icon-revoke" viewBox="0 0 1024 1024"><path d="M709.05928138 754.60218462a13.58411482 13.58411482 0 0 1-13.54609472-14.38797265c2.07482258-34.75056609-2.28665003-83.43829236-34.85919514-118.0150511-36.83625182-39.10660745-102.99159607-52.54407248-194.82151398-39.50310477v107.38565752a13.57868292 13.57868292 0 0 1-23.17609681 9.6028445L239.10105777 496.12923514a13.56782041 13.56782041 0 0 1 0-19.20025774l203.55532297-203.5553236a13.56782041 13.56782041 0 0 1 23.1760968 9.60284512V378.16849919c95.28976679 0.92878193 166.90374165 15.58832844 218.73085904 44.73361354 61.22899822 34.43554022 95.41469088 90.29824307 101.60113914 166.03470614 4.31802124 52.87539214-36.97746971 128.96490117-67.17103018 161.34191262a13.54609409 13.54609409 0 0 1-9.93416417 4.32345313zM529.40787157 550.67752126c67.13844069 0 117.94987342 17.79350638 151.01668239 52.89711782 27.24426985 28.91716382 38.15066794 65.03646055 41.47473019 97.83169628 21.83995374-34.84290073 39.61716572-80.67910352 37.20559159-110.25890729-10.3578197-126.80317462-106.65784052-185.46851705-303.04905007-185.46851704l-3.76401095 0.40736049H452.25379398c-3.5956355 0-7.03918933-1.81954375-9.58655009-4.36147324-2.55822391-2.54736075-3.99213284-6.40913824-3.99213283-10.01563625V315.7608715L267.90416064 486.5318219 438.67511105 657.30277231V569.68767723c0-7.4737074 6.03979847-11.52015477 13.51350526-11.52015477h0.96137076c1.72177723 0 3.07421407-1.01025402 4.18766588-0.98852772l1.67289397-0.49426448 0.59203037-0.27157324c24.80553815-3.63365561 48.31838587-5.73563577 69.80529428-5.73563576z"  ></path></symbol><symbol id="md-editor-icon-next" viewBox="0 0 1024 1024"><path d="M316.87975457 753.70055965c-3.68797013 0-7.31076321-1.04827413-9.93416417-3.86720876-33.80548974-36.24422082-68.66468488-112.71936467-64.71600404-161.11379136 14.88223651-182.26937949 180.49871902-208.76953731 310.5010318-210.50217706V282.97649892a13.57868292 13.57868292 0 0 1 23.18152742-9.60284512l203.55532361 203.5553236a13.56782041 13.56782041 0 0 1 0 19.20025774L575.91757748 699.68455812a13.57868292 13.57868292 0 0 1-23.18152807-9.6028445V582.02255299c-88.61991785-11.81345433-152.26592144 1.5642643-187.86379674 39.3618869-31.77411855 33.72944891-36.40716502 81.98808899-34.53330737 117.15144685 0.14664978 0.80385784 0.22812188 1.18949265 0.22812188 2.03680246 0 7.49543309-6.07238731 13.12787107-13.56238851 13.12787045h-0.1249241z m250.04873446-347.61428813c-0.1629442 0-0.33675155-0.39649733-0.505127-0.39106607-195.03877333 0.20096431-286.64600125 57.31833747-297.12331318 185.65861881-2.41157412 29.57980313 14.28477487 74.9380365 34.71797726 109.17804369 3.99756411-39.78010991 17.91299859-73.11849276 41.0836635-97.71763533 32.5562507-34.54960117 82.71047472-52.10412315 149.0667839-52.10412253 21.42716198 0 44.91285214 1.83040627 69.79986238 5.47492505l1.34700558-0.03802073a13.58954608 13.58954608 0 0 1 14.58350569 13.54609471v87.61509509l170.77095041-170.77095104L579.8934159 315.7608715v70.52224875c0.71695447 1.6457364 1.92274152 3.45441698 1.92274153 5.3608641 0.02172568 4.53527996-1.92274152 13.03010455-12.78568825 13.61127177v0.8310154h-2.10198015z"  ></path></symbol><symbol id="md-editor-icon-sup" viewBox="0 0 1024 1024"><path d="M401.58302857 293.51116466L244.06698906 726.81901058h69.54765466l33.27904506-96.88337376h164.35444469L544.83150545 726.81901058h69.24332776L456.55879369 293.51116466H401.58302857zM365.92307279 571.68388177l62.70924952-189.30925308h1.18150456l62.70924951 189.30925308H365.92307279zM699.96663427 601.50792108L619.40950529 726.81901058h161.11425794zM658.8466953 365.13540311a186.98204713 186.98204713 0 0 0-41.10203733 44.7897637c-10.83045846 16.72007966-16.23673687 34.12041952-16.23673689 52.20101956h161.11425793v-44.80766529h-88.77395612c3.29389149-6.03283387 12.74592797-15.198445 28.3561094-27.53263651 21.91153908-17.25712718 36.71614922-31.30987079 44.39592885-42.12242766 7.67977963-10.81255689 11.51071865-23.3615674 11.51071865-37.61122844 0-19.99606957-6.64148775-36.08959379-19.94236482-48.2984742S707.00195686 243.47623678 684.53546867 243.47623678c-43.28603063 0-69.86988319 19.17259671-79.73365609 57.53569167l53.43622887 8.62856359c3.29389149-14.24966103 10.95576954-21.37449155 23.0214373-21.37449155 6.03283387 0 11.02737588 1.9154695 15.00152758 5.76431011 3.97415169 3.83093903 5.96122755 8.89708735 5.96122754 15.19844501 0 8.21682714-3.07907248 16.30834322-9.25511903 24.2566466-6.17604655 7.9483034-17.54355253 18.4923365-34.12041954 31.6500009z"  ></path></symbol><symbol id="md-editor-icon-italic" viewBox="0 0 1024 1024"><path d="M664.76018531 257.6733865h-171.85520848a19.09502317 19.09502317 0 0 0 0 38.19004632h57.47601974l-137.44597674 420.09050958H359.23981469a19.09502317 19.09502317 0 0 0 0 38.19004633h171.85520848a19.09502317 19.09502317 0 0 0 0-38.19004633h-55.92932285l137.56054686-420.09050958H664.76018531a19.09502317 19.09502317 0 0 0 0-38.19004632z"  ></path></symbol><symbol id="md-editor-icon-sub" viewBox="0 0 1024 1024"><path d="M762.62217901 279.2794052h-161.11425793l80.55712896 125.31108951zM401.58302856 275.60958042L244.06698906 708.91742636h69.54765466l33.27904506-96.88337377h164.35444469L544.83150545 708.91742636h69.24332775L456.55879368 275.60958042H401.58302856zM365.92307279 553.78229757l62.70924952-189.30925308h1.18150456l62.70924951 189.30925308H365.92307279zM691.7498071 721.66335433c3.29389149-6.03283387 12.74592797-15.198445 28.3561094-27.53263652 21.91153908-17.25712718 36.71614922-31.3098708 44.39592885-42.12242766 7.67977963-10.81255688 11.51071865-23.3615674 11.51071865-37.61122844 0-19.99606957-6.64148775-36.08959379-19.9423648-48.29847422S724.90354107 547.80316842 702.43705288 547.80316842c-43.28603063 0-69.86988319 19.17259671-79.7336561 57.53569169l53.43622888 8.62856357c3.29389149-14.24966104 10.95576954-21.37449155 23.02143731-21.37449154 6.03283387 0 11.02737588 1.9154695 15.00152756 5.76431011 3.97415169 3.83093903 5.96122755 8.89708735 5.96122754 15.19844501 0 8.21682714-3.07907248 16.30834322-9.25511902 24.25664661-6.15814497 7.9483034-17.52565094 18.4923365-34.12041952 31.65000089a186.98204712 186.98204712 0 0 0-41.10203736 44.78976371c-10.83045846 16.72007966-16.23673688 34.12041952-16.23673688 52.20101956h161.11425793v-44.80766529h-88.77395611z"  ></path></symbol><symbol id="md-editor-icon-preview" viewBox="0 0 1024 1024"><path d="M512 790.09143067C337.63667297 790.09143067 164.38571167 638.02176667 164.38571167 512S337.63667297 233.90856933 512 233.90856933c174.50237274 0 347.61428833 151.79157258 347.61428833 278.09143067s-173.11191561 278.09143067-347.61428833 278.09143067z m0-46.34857179c150.16937257 0 301.26571655-132.51056672 301.26571655-231.74285888S662.16937257 280.25714112 512 280.25714112C362.01602173 280.25714112 210.73428345 412.99945068 210.73428345 512s151.28173828 231.74285888 301.26571655 231.74285888z m0-92.69714355a139.04571533 139.04571533 0 1 1 0-278.09143066 139.04571533 139.04571533 0 0 1 0 278.09143066z m0-46.34857178a92.69714356 92.69714356 0 1 0 0-185.3942871 92.69714356 92.69714356 0 0 0 0 185.3942871z"  ></path></symbol><symbol id="md-editor-icon-coding" viewBox="0 0 1024 1024"><path d="M729.27590356 801.6842314H294.72409644a72.40832783 72.40832783 0 0 1-72.40832784-72.40832784V294.72409644A72.40832783 72.40832783 0 0 1 294.72409644 222.3157686h434.55180712a72.40832783 72.40832783 0 0 1 72.40832784 72.40832784v434.55180712a72.40832783 72.40832783 0 0 1-72.40832784 72.40832784z m36.61152442-510.26993897a34.82932226 34.82932226 0 0 0-36.25508398-33.30172041H294.36765601a34.82932226 34.82932226 0 0 0-36.25508399 33.30172041v39.92132842h507.77485596z m0 75.7690519H258.11257202v361.83795892a36.50968429 36.50968429 0 0 0 36.25508398 36.86612473h435.26468799a36.50968429 36.50968429 0 0 0 36.25508399-36.86612473zM646.7854035 661.39946122a15.73429909 15.73429909 0 0 1-22.04838675 0 15.27601854 15.27601854 0 0 1 0-21.6919463l80.25001735-65.48319944-80.25001735-65.43227937a15.27601854 15.27601854 0 0 1 0-21.74286638 15.83613921 15.83613921 0 0 1 22.04838675 0l92.5726723 75.56537166a17.51650124 17.51650124 0 0 1 0 23.27046824z m-156.78287018 46.33725622c-4.27728519 7.28156883-11.15149353 8.50365032-21.13182564 5.60120679-8.14720987-2.3932429-10.18401235-13.5956565-5.65212685-20.92814539l77.29665375-259.69231501s13.64657656-9.82757192 21.08090558-5.60120679a15.27601854 15.27601854 0 0 1 5.65212686 20.87722532z m-90.79047013-46.33725622a15.68337903 15.68337903 0 0 1-21.99746669 0L284.6419242 585.88500963a17.51650124 17.51650124 0 0 1 0-23.27046824L377.2145965 487.04916973a15.78521916 15.78521916 0 0 1 21.99746669 0 15.27601854 15.27601854 0 0 1 0 21.74286638L319.0129659 574.22431548l80.19909729 65.48319944a15.27601854 15.27601854 0 0 1 0 21.6919463z"  ></path></symbol><symbol id="md-editor-icon-underline" viewBox="0 0 1024 1024"><path d="M737.94928742 744.79869207H286.05071258c-3.18646431 0-5.79357148 2.46226788-5.79357146 5.50389289v44.03114319c0 3.04162503 2.60710716 5.5038929 5.79357147 5.5038929h451.89857483c3.18646431 0 5.79357148-2.46226788 5.79357146-5.5038929v-44.03114319c0-3.04162503-2.60710716-5.5038929-5.79357146-5.50389289z m-225.94928742-55.038929c50.25923252 0 97.47684002-19.62572336 133.10730458-55.18376827C680.73776912 599.0179499 700.29107285 551.72792276 700.29107285 501.46869024V275.51940282c0-4.77969646-3.91066074-8.69035719-8.69035722-8.69035721h-43.45178604c-4.77969646 0-8.69035719 3.91066074-8.6903572 8.69035721v225.94928742c0 70.2470541-57.21151829 127.45857239-127.45857239 127.45857238s-127.45857239-57.21151829-127.45857239-127.45857238V275.51940282c0-4.77969646-3.91066074-8.69035719-8.6903572-8.69035721h-43.45178605c-4.77969646 0-8.69035719 3.91066074-8.69035721 8.69035721v225.94928742c0 50.25923252 19.62572336 97.47684002 55.18376827 133.10730457C414.45074033 670.20645936 461.74076748 689.75976308 512 689.75976308z"  ></path></symbol><symbol id="md-editor-icon-fangda" viewBox="0 0 1024 1024"><path d="M482.03564834 541.96435166a23.17428589 23.17428589 0 0 1 1.92346573 30.59005737l-1.92346573 2.17838287L336.22304153 720.568573l105.72109223 0.02317427a23.17428589 23.17428589 0 0 1 23.01206588 20.46289445l0.16222001 2.71139145a23.17428589 23.17428589 0 0 1-20.48606872 23.01206589l-2.68821717 0.16222H280.25714112l-1.73807145-0.06952286-2.91996002-0.39396285-2.57234574-0.69522858-2.57234572-1.01966859-2.27108002-1.20506286-2.22473145-1.55267715-2.08568573-1.85394287a23.40602875 23.40602875 0 0 1-2.24790573-2.59552002l-1.6453743-2.54917146-1.25141143-2.64186859-0.81110002-2.43330001-0.69522858-3.47614289L257.08285523 743.74285888v-162.31269836a23.17428589 23.17428589 0 0 1 46.18635177-2.68821716l0.16222 2.68821716-0.02317427 106.34679795 145.85895537-145.81260681a23.17428589 23.17428589 0 0 1 32.76844024 0zM582.05586624 257.08285523H743.74285888l1.73807145 0.06952285 2.91996002 0.39396286 2.57234574 0.69522859 2.57234572 1.01966857 2.27108002 1.20506287 2.22473145 1.55267715 2.08568573 1.85394287c0.83427429 0.81110001 1.57585145 1.69172287 2.24790573 2.59552002l1.6453743 2.54917145 1.25141143 2.64186859 0.81110002 2.43330001 0.69522858 3.47614289L766.91714477 280.25714112v162.31269836a23.17428589 23.17428589 0 0 1-46.18635177 2.68821716L720.568573 442.56983948v-106.36997224l-145.83578111 145.8357811a23.17428589 23.17428589 0 0 1-34.69190596-30.59005737l1.92346573-2.17838287L687.75378418 303.431427h-105.67474366a23.17428589 23.17428589 0 0 1-23.03524017-20.46289443L558.88158035 280.25714112a23.17428589 23.17428589 0 0 1 20.48606872-23.0120659L582.05586624 257.08285523z"  ></path></symbol><symbol id="md-editor-icon-suoxiao" viewBox="0 0 1024 1024"><path d="M303.96443558 535.17428589H465.65142823l1.73807144 0.06952285 2.91996001 0.39396287 2.57234574 0.69522858 2.57234573 1.01966857 2.27108002 1.20506288 2.22473145 1.55267715 2.08568572 1.85394287c0.83427429 0.81110001 1.57585145 1.69172287 2.24790574 2.59552002l1.64537429 2.54917143 1.25141144 2.6418686 0.81110001 2.43330002 0.69522859 3.47614288L488.82571411 558.34857177v162.31269837a23.17428589 23.17428589 0 0 1-46.18635178 2.68821717L442.47714234 720.66127014v-106.36997223l-145.83578111 145.83578109a23.17428589 23.17428589 0 0 1-34.69190596-30.59005737l1.92346573-2.17838286L409.66235353 581.52285766h-105.67474366a23.17428589 23.17428589 0 0 1-23.0352402-20.46289443L280.79014969 558.34857177a23.17428589 23.17428589 0 0 1 20.48606873-23.01206588L303.96443558 535.17428589zM760.12707901 263.87292099a23.17428589 23.17428589 0 0 1 1.92346572 30.59005738l-1.92346572 2.17838286L614.3144722 442.47714234l105.72109222 0.02317428a23.17428589 23.17428589 0 0 1 23.01206589 20.46289444l0.16222 2.71139145a23.17428589 23.17428589 0 0 1-20.48606873 23.01206588l-2.68821716 0.16222002-163.42506409-0.06952287-2.91996001-0.39396286-2.57234574-0.69522858-2.57234573-1.01966857-2.27108002-1.20506287-2.22473145-1.55267716-2.08568572-1.85394287a23.40602875 23.40602875 0 0 1-2.24790574-2.59552002l-1.64537429-2.54917145-1.25141144-2.64186859-0.81110001-2.43330001-0.69522857-3.47614289L535.17428589 465.65142823V303.33872986a23.17428589 23.17428589 0 0 1 46.18635178-2.68821717l0.16221999 2.68821717v106.32362365l145.83578111-145.78943252a23.17428589 23.17428589 0 0 1 32.76844023 0z"  ></path></symbol><symbol id="md-editor-icon-baocun" viewBox="0 0 1024 1024"><path d="M695.19287847 245.2663952H328.80712153c-46.06674339 0-83.54072633 37.47398295-83.54072633 83.54072634v366.38575693c0 46.06674339 37.47398295 83.54072633 83.54072634 83.54072633h366.38575693c46.06674339 0 83.54072633-37.47398295 83.54072633-83.54072634V328.80712153c0-46.06674339-37.47398295-83.54072633-83.54072634-83.54072633z m-274.13292629 47.7375579h181.88009564v155.62443878c0 18.85633538-15.33569047 34.2516978-34.25169781 34.25169782H455.25197803c-18.85633538 0-34.2516978-15.33569047-34.2516978-34.25169782V293.0039531zM730.9960469 695.19287847c0 19.7514146-16.05175385 35.80316842-35.80316844 35.80316843H328.80712153c-19.7514146 0-35.80316842-16.05175385-35.80316843-35.80316844V328.80712153c0-19.7514146 16.05175385-35.80316842 35.80316844-35.80316843h44.51527274v155.62443878c0 45.17166417 36.75791959 81.9892557 81.98925571 81.9892557h113.43637198c45.17166417 0 81.9892557-36.75791959 81.9892557-81.9892557V293.0039531H695.19287847c19.7514146 0 35.80316842 16.05175385 35.80316843 35.80316844v366.38575693z"  ></path><path d="M549.17562323 441.05005455c13.18750038 0 23.86877897-10.68127858 23.86877894-23.86877894v-55.97228664c0-13.18750038-10.68127858-23.86877897-23.86877894-23.86877898s-23.86877897 10.68127858-23.86877896 23.86877898v55.97228664c0 13.12782842 10.68127858 23.86877897 23.86877896 23.86877894z"  ></path></symbol><symbol id="md-editor-icon-bold" viewBox="0 0 1024 1024"><path d="M337.99948597 263.41195693h174.00051403c21.78711731 0 38.3868257 0 59.06235508 6.22489056 18.82288355 5.6320438 32.7547819 12.44978111 49.72501888 24.82545665 12.52388741 9.18912433 23.04691639 22.30585777 31.05034721 37.27523849 8.522172 16.00686163 12.44978111 34.16279285 12.44978184 55.94990944 0 27.9379023-9.3373362 52.83746453-24.82545665 68.39969128-15.56222675 18.67467168-37.27523777 31.0503472-62.17480072 40.38768268 15.56222675 0 27.9379023 6.22489056 43.50012832 12.44978184 12.44978111 6.22489056 23.78797502 13.78368649 34.16279285 25.27009153 18.23003678 20.23089449 18.52646053 25.49240898 24.45492736 39.9430478 7.18826662 17.63719003 6.66952544 31.0503472 6.66952544 46.61257398 0 21.78711731-3.11244563 43.50012832-12.44978112 59.06235508-9.3373362 15.56222675-21.78711731 31.0503472-37.27523776 43.50012832-15.56222675 12.44978111-34.16279285 21.78711731-55.94990944 27.9379023-24.82545666 6.22489056-46.61257397 9.3373362-71.43803062 9.3373362H337.99948597V263.41195693z m68.32558498 205.05086195h93.22514794c12.44978111 0 24.82545666 0 37.27523777-3.11244563 12.44978111-3.11244563 21.19427055-6.81773731 27.93790229-12.44978112 9.55965365-8.00343082 14.00600393-13.11673417 18.67467167-21.78711731 6.96594917-12.9685223 6.22489056-21.78711731 6.22489056-34.16279284 0-18.67467168-6.81773731-36.68239102-18.67467167-49.7250189-18.00771935-19.86036517-31.34677095-25.19598596-59.06235509-24.82545664H406.32507095v146.06261244z m0 233.13697468h99.45003849c9.3373362 0 21.78711731 0 34.16279286-3.11244563 12.44978111-3.11244563 21.12016426-5.18740892 34.16279213-12.44978111 14.1542158-7.85521895 21.63890544-14.1542158 27.9379023-24.82545665 5.7061501-9.63375922 12.44978111-24.82545666 12.44978112-43.50012834 0-27.9379023-5.40972637-49.87323076-26.7522088-65.8800924-21.416588-16.00686163-47.79826748-24.2326099-81.96105961-24.23260988H406.32507095v174.00051401z m0 0"  ></path></symbol><symbol id="md-editor-icon-strike-through" viewBox="0 0 1024 1024"><path d="M821.59397555 532.97906546V490.95304114c0-1.15418807-0.33946708-2.03680247-1.56154857-2.03680247H552.46447575l-0.33946708-0.06789342c-7.26459548-1.42576173-14.66497778-2.85152347-22.0653601-4.20939176-11.47398726-2.10469589-15.75127245-2.91941687-21.59010619-4.07360495-36.05140373-7.06091523-57.98097699-14.05393705-75.76905189-24.30584283-25.73160455-15.00444487-38.22399303-35.44036299-38.22399305-62.46194242 0-26.95368604 11.13452018-49.42640662 32.11358562-64.97399882 20.43591813-15.1402317 49.42640662-23.08376134 83.71258155-23.08376133 39.24239426 0 69.6586445 10.38769261 90.36613628 30.89150413 10.59137286 10.45558601 18.39911565 23.28744158 23.08376133 38.15609962 1.08629466 3.32677737 2.10469589 7.73984939 3.12309713 12.76396216 0.33946708 1.6973354 1.83312222 2.91941687 3.59835103 2.91941687h50.92006176c1.96890906 0 3.66624444-1.56154857 3.66624445-3.53045762v-0.54314732c-0.67893415-4.61675227-0.88261441-8.21510331-1.35786832-10.7950531-4.95621935-29.73731607-19.01015639-55.67260087-40.668156-75.22590458-30.34835681-27.7005136-75.22590458-42.36549139-129.67642395-42.3654914-49.83376713 0-94.64342148 12.42449508-126.21385978 34.96510909-17.51650124 12.62817532-30.95939755 28.1078741-39.92132841 46.09962925-9.09771771 18.46700907-13.78236339 39.85343501-13.7823634 63.48034367 0 20.02855763 3.80203127 37.00191157 11.67766752 51.938463 5.56726009 10.52347943 13.10342924 19.82487738 23.08376132 28.44734118l6.9251284 5.97462057H204.57861375c-1.22208149 0-2.85152347 0.95050781-2.85152344 2.10469588V533.04695886c0 1.22208149 1.62944197 2.03680247 2.85152345 2.03680247h303.27988789l0.33946706 0.13578683c0.88261441 0.20368026 1.76522881 0.40736049 2.5799498 0.54314733 0.54314733 0.13578683 1.01840124 0.20368026 1.56154856 0.33946708 22.40482718 4.48096543 35.10089591 7.40038231 46.84645683 10.72715968 16.49810002 4.68464569 29.05838191 9.57297162 39.3781811 15.34391195 26.27475187 14.80076462 39.03871403 36.11929715 39.03871402 65.17767906 0 25.73160455-11.27030701 48.74747246-31.77411854 64.77031856-21.86167985 17.10914076-54.11105231 26.20685845-93.35344657 26.20685845-30.95939755 0-57.43782967-6.04251399-78.7563622-17.92386173-20.97906546-11.74556092-35.57614982-28.71891485-43.31599921-50.44480786-0.61104074-1.62944197-1.22208149-3.9378181-1.96890907-6.72144816-0.40736049-1.56154857-1.90101564-2.91941687-3.5304576-2.91941687h-55.74049428c-2.03680247 0-3.8699247 2.03680247-3.8699247 4.07360495v0.54314733c0 1.49365514 0.33946708 2.78363004 0.47525392 3.66624444 4.41307203 33.19988027 20.63959838 60.42513997 48.13643172 80.79316466 32.31726588 23.89848233 78.07742804 36.52665764 132.12058694 36.52665765 58.11676383 0 106.8642363-13.64657655 140.74305072-39.3781811 16.97335391-12.83185556 30.07678315-28.65102142 38.90292718-47.05013708 8.89403746-18.6027959 13.44289631-39.64975477 13.4428963-62.52983584 0-21.72589302-3.9378181-39.78554159-12.08502797-55.3331338-3.8699247-7.53616914-8.82614404-14.52919095-14.73287122-20.8432786l-5.36357984-5.77094033h152.96386556c1.35786832 0.06789342 1.6973354-0.88261441 1.69733538-2.03680248z"  ></path></symbol><symbol id="md-editor-icon-link" viewBox="0 0 1024 1024"><path d="M457.68526766 662.72338284l-48.06853829 46.71067021a67.07869491 67.07869491 0 0 1-95.05078242-95.0507824l123.29444312-123.56601632a66.80712103 66.80712103 0 0 1 92.06347167-2.44416299l3.25888393 2.71573683a27.15736647 27.15736647 0 0 0 38.0203126-38.83503419 74.68275705 74.68275705 0 0 0-4.88832593-5.70304691 121.12185338 121.12185338 0 0 0-165.38836062 5.97462079l-124.92388445 123.56601634a121.66500113 121.66500113 0 0 0 171.90612853 171.90612853L494.89085924 702.10156414A27.15736647 27.15736647 0 0 0 457.68526766 662.72338284zM747.99751273 276.00248727a121.93657437 121.93657437 0 0 0-171.90612853 0L529.10914076 321.89843586A27.15736647 27.15736647 0 0 0 566.31473234 361.27661716l46.98224407-46.71067021a67.07869491 67.07869491 0 0 1 95.05078177 95.0507824l-123.2944431 123.56601632a66.80712103 66.80712103 0 0 1-92.06347169 2.44416299l-3.25888393-2.71573683a27.15736647 27.15736647 0 0 0-38.02031258 38.83503419 74.68275705 74.68275705 0 0 0 6.24619402 5.70304691 121.39342726 121.39342726 0 0 0 165.38836061-5.97462079l123.56601699-123.56601634a121.93657437 121.93657437 0 0 0 1.08629423-171.90612853z"  ></path></symbol><symbol id="md-editor-icon-ordered-list" viewBox="0 0 1024 1024"><path d="M409.96096997 282.85972205h366.38575693v48.33427738H409.96096997zM409.96096997 486.9377821h366.38575693v47.73755791H409.96096997zM409.96096997 691.01584214h366.38575693v47.14083844H409.96096997zM297.77770889 278.68268574v104.42590792h26.25565684V231.54184731h-20.407806l-0.47737559 1.19343893c-4.89309968 15.21634658-18.91600732 27.74745553-41.7106912 37.35463906l-1.25311091 0.41770364v26.85237632l2.98359738-1.13376699c14.14225153-5.72850695 25.0622179-11.69570169 34.60972948-17.54355253zM350.88574206 563.31787476H283.57578541c7.0412898-8.95079212 17.84191227-18.67731953 32.22285159-29.35859814 26.79270438-17.2451928 39.14479748-35.92251232 36.75791959-55.31589522-1.96917426-27.32975191-18.25961589-41.88970707-48.45362128-43.32183378-26.13631296 0-44.03789716 12.47143702-53.22737705 37.17562321l-0.65639144 1.84983038 26.4346727 11.51668583 0.59671947-2.32720594c3.99802047-14.6196271 11.87471753-21.95927664 24.10746675-22.37698027 15.87273801 0 23.27205949 6.02686669 23.27205948 19.21436705 0.83540725 10.44259079-8.77177627 22.85435586-28.70220669 36.87726348-20.82550964 15.09700268-36.87726348 32.64055522-47.7375579 52.39196982l-0.23868779 16.94683305H350.88574206v-23.27205948zM328.80712153 710.70758479c13.36651621-6.56391422 20.10944627-16.70814527 20.10944627-30.31334927-1.01442311-27.80712749-17.2451928-42.24773874-48.45362129-42.72511433-26.25565685 0.53704752-42.96380213 14.02290766-49.7664041 40.21889253l-0.53704753 2.02884622 28.04581529 6.62358616 0.41770361-2.08851817c2.68523764-13.66487594 10.08455913-20.70616575 22.5559961-21.541573 12.5907809 0.41770364 18.67731953 5.72850695 19.15469512 16.70814528C319.43862579 693.40272004 310.84586537 699.96663427 294.19739205 699.96663427h-13.7245479v25.06221789h19.27403902c16.29044163 0.59671947 24.82353011 6.80260199 26.13631294 19.63207069 0.17901585 7.99604095-1.73048647 13.66487594-5.60916306 17.60322446-3.99802047 3.99802047-10.44259079 5.72850695-19.03535122 5.72850697h-1.43212672c-14.38093932-0.59671947-22.31730832-7.87669705-24.04779481-23.27205949l-0.29835973-2.14819011-28.04581527 6.62358617 0.41770363 1.96917426c5.31080332 26.73303243 23.27205949 40.57692423 53.4063929 41.0542998 33.41629054-1.43212673 51.31787476-17.00650501 53.28704902-46.42477508-0.41770364-15.39536242-9.070136-27.210408-25.71860932-35.08710505z"  ></path></symbol><symbol id="md-editor-icon-unordered-list" viewBox="0 0 1024 1024"><path d="M270.51669908 316.14107442m-42.36549141 1e-8a42.36549139 42.36549139 0 1 0 84.7309828 0 42.36549139 42.36549139 0 1 0-84.7309828 0Z"  ></path><path d="M798.43634618 287.18914938l-433.25558604 0.22812188-0.02607106 53.75203192 433.30121039-0.22812188-0.0195533-53.75203191z"  ></path><path d="M270.51669908 512m-42.36549141 0a42.36549139 42.36549139 0 1 0 84.7309828 0 42.36549139 42.36549139 0 1 0-84.7309828 0Z"  ></path><path d="M365.18076014 483.27619684l-0.02607106 53.75203192 433.30121039-0.22812188-0.0195533-53.75203191-433.25558603 0.22812187z"  ></path><path d="M270.51669908 707.85892558m-42.36549141-1e-8a42.36549139 42.36549139 0 1 0 84.7309828 0 42.36549139 42.36549139 0 1 0-84.7309828 0Z"  ></path><path d="M365.18076014 679.78038143l-0.02607106 53.75203194 433.30121039-0.22812188-0.0195533-53.75203193-433.25558603 0.22812187z"  ></path></symbol><symbol id="md-editor-icon-code-row" viewBox="0 0 1024 1024"><path d="M616.98155188 365.94904204c-8.48396123-8.48464016-8.48396123-22.24052512 0-30.72516528 8.48464016-8.48396123 22.24052512-8.48396123 30.72516527 0L809.01332562 496.53048523c8.48464016 8.48464016 8.48464016 22.24052512 1e-8 30.72516527L647.70671715 688.56225897c-8.48464016 8.48464016-22.24052512 8.48464016-30.72516529 0-8.48396123-8.48464016-8.48396123-22.24052512 0-30.72516526L759.08518666 515.73413788a5.43147326 5.43147326 0 0 0 0-7.68146107L616.98155188 365.94904204zM264.30241473 515.73413788L406.40537059 657.83709371c8.48464016 8.48464016 8.48464016 22.24052512-1e-8 30.72516526s-22.24052512 8.48464016-30.72516528 0L214.37359684 527.25565051c-8.48396123-8.48464016-8.48396123-22.24052512 0-30.72516529l161.30660846-161.30660846c8.48464016-8.48396123 22.24052512-8.48396123 30.72516529 0 8.48464016 8.48464016 8.48464016 22.24052512 0 30.72516528L264.30241473 508.05267681a5.43147326 5.43147326 0 0 0 0 7.68146106zM558.43909632 310.49098437c11.69124619 2.69944222 18.98096223 14.36556783 16.28152003 26.05681399L491.33188639 697.74484345c-2.69876327 11.69124619-14.3648889 18.98096223-26.05613506 16.28152001-11.69124619-2.69876327-18.98096223-14.3648889-16.28219896-26.05613507L532.38296127 326.77318332c2.69876327-11.69124619 14.3648889-18.98096223 26.05613505-16.28219895z"  ></path></symbol><symbol id="md-editor-icon-quote" viewBox="0 0 1024 1024"><path d="M478.2078125 305.82124999l0 81.2025c0 11.0109375-8.926875 19.9378125-19.9378125 19.93781251-39.2934375 0-60.665625 40.2975-63.6271875 119.8378125l63.6271875 0c11.0109375 0 19.9378125 8.9353125 19.9378125 19.9378125l0 171.45c0 11.0109375-8.926875 19.9378125-19.9378125 19.9378125L288.625625 738.125c-11.019375 0-19.9378125-8.9353125-19.9378125-19.9378125l0-171.45c0-38.1290625 3.8390625-73.119375 11.4075-104.0090625 7.7625-31.674375 19.67625001-59.36624999 35.40375-82.31625 16.183125-23.5828125 36.4246875-42.08625001 60.1678125-54.97875 23.9034375-12.9684375 51.6965625-19.5496875 82.6115625-19.5496875C469.2809375 285.8834375 478.2078125 294.8103125 478.2078125 305.82124999zM735.374375 406.9615625c11.0109375 0 19.9378125-8.9353125 19.9378125-19.93781249l0-81.2025c0-11.0109375-8.926875-19.9378125-19.9378125-19.93781251-30.9065625 0-58.6996875 6.58125001-82.60312499 19.5496875-23.743125 12.8925-43.993125 31.3959375-60.17625001 54.97875-15.7275 22.95-27.64124999 50.641875-35.40375001 82.3246875-7.56 30.898125-11.3990625 65.8884375-11.39906249 104.000625l0 171.45c0 11.0109375 8.926875 19.9378125 19.9378125 19.9378125l169.6359375 0c11.0109375 0 19.9378125-8.9353125 19.93781251-19.9378125l0-171.45c0-11.0109375-8.926875-19.9378125-19.93781251-19.9378125L672.65 526.799375C675.569375 447.2590625 696.629375 406.9615625 735.374375 406.9615625z"  ></path></symbol><symbol id="md-editor-icon-title" viewBox="0 0 1024 1024"><path d="M314.24609375 264.80761693h81.01318385v206.32324271h250.65307617V264.80761693h81.01318309v494.38476563h-81.01318309v-218.81469727H395.2592776V759.19238256H314.24609375z"  ></path></symbol><symbol id="md-editor-icon-github" viewBox="0 0 1024 1024"><path d="M620.62946531 837.8883953a27.15736647 27.15736647 0 0 1-27.15736649-27.15736647v-105.09900749a64.36295809 64.36295809 0 0 0-17.92386174-51.87056937 27.15736647 27.15736647 0 0 1-5.97462079-27.15736649 27.15736647 27.15736647 0 0 1 22.54061444-17.65228787c78.21321488-8.96193087 150.72338284-34.76142862 150.72338282-162.94419766a121.39342726 121.39342726 0 0 0-33.13198727-83.10154081 27.15736647 27.15736647 0 0 1-5.97462017-27.15736648A108.62946531 108.62946531 0 0 0 707.53303719 267.58370352a228.66502383 228.66502383 0 0 0-71.69544698 35.0330025 27.15736647 27.15736647 0 0 1-22.26904054 3.80203107 333.49245808 333.49245808 0 0 0-175.97973347 0 27.15736647 27.15736647 0 0 1-22.26903993-3.80203107A217.25893001 217.25893001 0 0 0 343.62432931 267.58370352a108.62946531 108.62946531 0 0 0 3.80203106 64.90610521 27.15736647 27.15736647 0 0 1-5.97462079 27.15736647A119.76398527 119.76398527 0 0 0 308.31975294 445.19287897c0 127.09647417 72.51016795 153.71069291 150.9949567 162.94419765a27.15736647 27.15736647 0 0 1 22.26903992 17.92386173 27.15736647 27.15736647 0 0 1-5.97462016 27.15736648 63.54823709 63.54823709 0 0 0-17.92386174 50.51270128V810.73102883a27.15736647 27.15736647 0 0 1-54.31473297 0v-47.52539057A133.88581595 133.88581595 0 0 1 262.96695146 702.10156414c-10.59137286-13.57868292-19.82487759-24.98477676-29.05838233-27.15736648a27.15736647 27.15736647 0 1 1 13.0355358-54.31473235 112.43149638 112.43149638 0 0 1 58.65991117 47.25381732c22.5406138 28.78680846 41.00762327 52.14214327 97.76651859 40.46447552v-2.71573681a115.14723321 115.14723321 0 0 1 8.14720989-50.24112739c-76.5837729-17.38071462-157.51272461-64.36295809-157.512724-209.92644112a173.26399663 173.26399663 0 0 1 37.47716547-108.62946531 162.94419766 162.94419766 0 0 1 7.87563601-106.72844947A27.15736647 27.15736647 0 0 1 316.73853669 213.26897117C326.51518855 211.36795532 363.44920627 205.93648228 435.4162271 251.28928375a396.49754741 396.49754741 0 0 1 180.32491228 0C687.70815959 205.93648228 724.64217794 211.36795532 734.41882979 213.26897117a27.15736647 27.15736647 0 0 1 17.38071463 15.47969877 162.94419766 162.94419766 0 0 1 7.87563601 106.72844948 174.07871762 174.07871762 0 0 1 37.47716547 108.62946468c0 154.25384065-93.69291365 196.8909053-157.24115074 210.74116271a117.59139619 117.59139619 0 0 1 7.87563601 52.95686425V810.73102883a27.15736647 27.15736647 0 0 1-27.15736586 27.15736647z"  ></path></symbol><symbol id="md-editor-icon-fullscreen-exit" viewBox="0 0 1024 1024"><path d="M663.00853518 634.20814825H736.04827177a20.36802471 20.36802471 0 1 0 0-40.73604942H613.84012354a20.36802471 20.36802471 0 0 0-20.36802471 20.36802471v122.20814823a20.36802471 20.36802471 0 1 0 40.7360494 0v-73.0397366l87.42974607 87.42974606a20.36802471 20.36802471 0 1 0 28.79020292-28.81057095L663.00853518 634.20814825zM389.79185175 663.00853518V736.04827177a20.36802471 20.36802471 0 1 0 40.73604942 0V613.84012354a20.36802471 20.36802471 0 0 0-20.36802471-20.36802471H287.95172823a20.36802471 20.36802471 0 1 0 0 40.7360494h73.0397366l-87.42974606 87.42974607a20.36802471 20.36802471 0 1 0 28.81057095 28.79020292L389.79185175 663.00853518zM663.00853518 389.79185175H736.04827177a20.36802471 20.36802471 0 1 1 0 40.73604942H613.84012354a20.36802471 20.36802471 0 0 1-20.36802471-20.36802471V287.95172823a20.36802471 20.36802471 0 1 1 40.7360494 0v73.0397366l87.42974607-87.42974606a20.36802471 20.36802471 0 1 1 28.79020292 28.81057095L663.00853518 389.79185175zM389.79185175 360.99146482V287.95172823a20.36802471 20.36802471 0 1 1 40.73604942 0v122.20814823a20.36802471 20.36802471 0 0 1-20.36802471 20.36802471H287.95172823a20.36802471 20.36802471 0 1 1 0-40.7360494h73.0397366l-87.42974606-87.42974607a20.36802471 20.36802471 0 1 1 28.81057095-28.79020293L389.79185175 360.99146482z"  ></path></symbol><symbol id="md-editor-icon-fullscreen" viewBox="0 0 1024 1024"><path d="M585.86803606 585.86803606a20.36802471 20.36802471 0 0 1 28.78680846 0l101.02540254 100.97108801V627.41880646l0.19010178-2.77005136A20.36802471 20.36802471 0 0 1 756.41629648 627.41880646v115.41880708l-0.21725872 2.44416298a13.57868292 13.57868292 0 0 1-13.36142422 11.13451996h-115.41880708l-2.77005136-0.19010177a20.36802471 20.36802471 0 0 1-17.59797334-20.17792294l0.19010177-2.77005135a20.36802471 20.36802471 0 0 1 20.17792293-17.59797336h59.47463215l-101.02540255-101.02540254-1.98248732-2.28121876a20.36802471 20.36802471 0 0 1 1.98248732-26.5055897z m-147.73607212 0a20.36802471 20.36802471 0 0 1 1.98248732 26.5055897l-1.98248732 2.28121876-101.02540255 101.02540254h59.47463215a20.36802471 20.36802471 0 0 1 20.17792293 17.59797336l0.19010177 2.77005135a20.36802471 20.36802471 0 0 1-17.59797334 20.17792294L396.58119354 756.41629648H281.16238646a13.57868292 13.57868292 0 0 1-13.36142422-11.13451996L267.58370352 742.83761354v-115.41880708a20.36802471 20.36802471 0 0 1 40.54594764-2.77005136l0.19010178 2.77005136v59.42031763l101.02540253-100.97108803a20.36802471 20.36802471 0 0 1 28.78680847 0zM742.83761354 267.58370352a13.57868292 13.57868292 0 0 1 13.36142422 11.13451996L756.41629648 281.16238646v115.41880708a20.36802471 20.36802471 0 0 1-40.54594764 2.77005136L715.68024706 396.58119354V337.16087593L614.65484453 438.13196394a20.36802471 20.36802471 0 0 1-30.76929579-26.5055897l1.98248732-2.28121876 101.02540255-101.02540254h-59.47463215a20.36802471 20.36802471 0 0 1-20.17792294-17.59797336L607.05078176 287.95172823a20.36802471 20.36802471 0 0 1 17.59797334-20.17792294L627.41880646 267.58370352h115.41880708zM396.58119354 267.58370352l2.77005136 0.19010177a20.36802471 20.36802471 0 0 1 17.59797334 20.17792294l-0.19010177 2.77005135a20.36802471 20.36802471 0 0 1-20.17792293 17.59797336H337.1065614l101.02540254 101.02540253 1.98248732 2.28121877a20.36802471 20.36802471 0 0 1-30.76929578 26.5055897L308.31975294 337.16087593V396.58119354l-0.19010178 2.77005136A20.36802471 20.36802471 0 0 1 267.58370352 396.58119354V281.16238646l0.21725872-2.44416298A13.57868292 13.57868292 0 0 1 281.16238646 267.58370352h115.41880708z"  ></path></symbol><symbol id="md-editor-icon-code" viewBox="0 0 1024 1024"><path d="M286.78396126 504.04289189A27.04873681 27.04873681 0 0 0 294.74107001 484.84263353V349.05580234a27.15736647 27.15736647 0 0 1 27.15736585-27.15736648 27.15736647 27.15736647 0 0 0 0-54.31473234C276.98015246 267.58370352 240.42633703 304.13751833 240.42633703 349.05580234v124.54368154l-19.20025774 19.20025837a27.15736647 27.15736647 0 0 0 0 38.4005155l19.20025774 19.20025837V674.94419766c0 44.91828402 36.55381479 81.47209883 81.47209883 81.47209882a27.15736647 27.15736647 0 0 0 0-54.31473234 27.15736647 27.15736647 0 0 1-27.15736585-27.15736648v-135.78683119a27.04873681 27.04873681 0 0 0-7.95710875-19.20025836L278.82685316 512l7.9571081-7.95710811zM808.6670694 501.59872892a27.18452343 27.18452343 0 0 0-5.89314869-8.79898667L783.57366297 473.59948388V349.05580234c0-44.91828402-36.55381479-81.47209883-81.47209883-81.47209882a27.15736647 27.15736647 0 1 0 0 54.31473234 27.15736647 27.15736647 0 0 1 27.15736585 27.15736648v135.78683119a27.10305134 27.10305134 0 0 0 7.95710875 19.20025836l7.9571081 7.95710811-7.9571081 7.95710811A27.04873681 27.04873681 0 0 0 729.25892999 539.15736647v135.78683119a27.15736647 27.15736647 0 0 1-27.15736585 27.15736648 27.15736647 27.15736647 0 1 0 0 54.31473233c44.91828402 0 81.47209883-36.55381479 81.47209883-81.47209881v-124.54368154l19.20025774-19.20025837a27.18452343 27.18452343 0 0 0 5.89314869-29.60152883zM612.40078333 329.6111283a27.211681 27.211681 0 0 0-44.26650723 9.39644832l-162.835568 325.88839529a27.13020891 27.13020891 0 0 0 15.20812492 35.27741881 27.32031068 27.32031068 0 0 0 35.35889088-15.12665281l162.80841104-325.88839531a27.07589439 27.07589439 0 0 0-6.24619466-29.5472143z"  ></path></symbol><symbol id="md-editor-icon-catalog" viewBox="0 0 1024 1024"><path d="M683.13318788 654.61099014c0 9.12710341-7.98621522 17.11331865-17.11331864 17.11331864H380.79788896c-9.12710341 0-17.11331865-7.98621522-17.11331863-17.11331864s7.98621522-17.11331865 17.11331863-17.11331864h285.22198028c9.12710341 0 17.11331865 7.98621522 17.11331864 17.11331864zM683.13318788 515.42266388c0 9.12710341-7.98621522 17.11331865-17.11331864 17.11331864H380.79788896c-9.12710341 0-17.11331865-7.98621522-17.11331863-17.11331864s7.98621522-17.11331865 17.11331863-17.11331864h285.22198028c9.12710341 0 17.11331865 6.84532775 17.11331864 17.11331863zM683.13318788 375.09344941c0 9.12710341-7.98621522 17.11331865-17.11331864 17.11331864H380.79788896c-9.12710341 0-17.11331865-7.98621522-17.11331863-17.11331865S371.67078554 357.98013076 380.79788896 357.98013076h285.22198028c9.12710341 0 17.11331865 7.98621522 17.11331864 17.11331864z"  ></path><path d="M723.06426543 859.97081603H322.61260528c-59.32617188 0-107.24346465-47.91729278-107.24346466-107.24346466V294.09040684c0-59.32617188 47.91729278-107.24346465 107.24346466-107.24346395H723.06426543c59.32617188 0 107.24346465 47.91729278 107.24346466 107.24346392v457.49605637c1.1408882 60.46706009-46.77640459 108.38435213-107.24346466 108.38435285zM322.61260528 221.07358017c-39.93107754 0-73.01682665 33.08574982-73.01682737 73.01682664v457.49605637c0 39.93107754 33.08574982 73.01682665 73.01682737 73.01682737H723.06426543c39.93107754 0 73.01682665-33.08574982 73.01682666-73.01682737V294.09040684C797.22198028 254.15932999 764.13623047 221.07358017 723.06426543 221.07358017H322.61260528z"  ></path></symbol><symbol id="md-editor-icon-table" viewBox="0 0 1024 1024"><path d="M836.44000244 553.03908539V391.93144989c0-0.20856857 0.11587143-0.37078857 0.11587143-0.55618286s-0.11587143-0.37078857-0.11587143-0.55618286V263.77764893a23.17428589 23.17428589 0 0 0-23.17428589-23.17428589H210.73428345a23.17428589 23.17428589 0 0 0-23.17428589 23.17428589v127.04143524c0 0.20856857-0.11587143 0.37078857-0.11587143 0.55618285s0.11587143 0.34761428 0.11587143 0.55618287v161.1076355c0 0.20856857-0.11587143 0.37078857-0.11587143 0.55618286s0.11587143 0.34761428 0.11587143 0.55618286V750.43765258a23.17428589 23.17428589 0 0 0 23.17428589 23.17428589h602.5314331a23.17428589 23.17428589 0 0 0 23.17428589-23.17428589V554.15145111c0-0.20856857 0.11587143-0.37078857 0.11587143-0.55618285s-0.11587143-0.37078857-0.11587143-0.55618287z m-405.55000305-22.61810302v-115.87142946h150.63285827v115.87142946H430.88999939z m150.63285827 46.34857177V727.2633667H430.88999939V576.76955414h150.63285827z m-347.61428831-162.22000123h150.63285826v115.87142946H233.90856933v-115.87142946z m393.9628601 1e-8h162.22000122v115.87142945H627.87142945v-115.87142945zM790.09143067 286.95193482v81.24904633H233.90856933V286.95193482h556.18286132zM233.90856933 576.76955414h150.63285828V727.2633667H233.90856933V576.76955414zM627.87142945 727.2633667V576.76955414h162.2200012V727.2633667H627.87142945z"  ></path></symbol><symbol id="md-editor-icon-image" viewBox="0 0 1024 1024"><path d="M731.17724609 241.57153319H293.64672852c-41.85791017 0-75.80566406 33.94775391-75.80566407 75.80566408v358.42895507c-0.98876953 3.95507813-0.98876953 7.74536134 0 11.53564455v19.44580077c0 41.85791017 33.94775391 75.80566406 75.80566407 75.80566406h437.53051757c41.85791017 0 75.80566406-33.94775391 75.80566406-75.80566406V317.37719727c0-41.85791017-33.94775391-75.80566406-75.80566406-75.80566408z m-437.53051757 46.14257814h437.53051757c16.31469727 0 29.66308594 13.34838867 29.66308595 29.66308594v287.89672851c-17.13867188-23.23608398-37.90283203-48.61450195-59.49096681-68.71948242-12.85400391-12.0300293-28.83911133-16.97387695-46.30737304-14.50195313-27.52075195 3.95507813-57.67822266 26.86157227-92.12036133 69.87304688-8.23974609 10.21728516-15.65551758 20.43457031-21.75292969 29.16870117-30.32226563-41.85791017-89.97802734-119.14672852-140.57006836-154.74243163-14.99633789-10.546875-31.80541991-13.01879883-48.94409179-7.41577149-18.62182617 6.09741211-36.74926758 21.91772461-55.20629883 48.28491211-10.71166992 15.16113281-21.58813477 33.94775391-32.62939452 56.03027343V317.37719727c0.16479492-16.47949219 13.34838867-29.66308594 29.82788085-29.66308594z"  ></path><path d="M610.87695313 398.95068359a51.91040039 51.91040039 0 1 0 103.82080078 0 51.91040039 51.91040039 0 1 0-103.82080078 0z"  ></path></symbol></svg>',function(l){var a=(a=document.getElementsByTagName("script"))[a.length-1],c=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var o,t,i,e,h,d=function(a,c){c.parentNode.insertBefore(a,c)};if(c&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}o=function(){var a,c=document.createElement("div");c.innerHTML=l._iconfont_svg_string_2605852,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?d(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),o()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(i=o,e=l.document,h=!1,v(),e.onreadystatechange=function(){"complete"==e.readyState&&(e.onreadystatechange=null,m())})}function m(){h||(h=!0,i())}function v(){try{e.documentElement.doScroll("left")}catch(a){return void setTimeout(v,50)}m()}}(window);
\ No newline at end of file
diff --git a/ui/src/locales/lang/en-US/common.ts b/ui/src/locales/lang/en-US/common.ts
index a91c1a7b5..afabb61fd 100644
--- a/ui/src/locales/lang/en-US/common.ts
+++ b/ui/src/locales/lang/en-US/common.ts
@@ -80,4 +80,5 @@ export default {
     uploadImagePrompt: 'Please upload an image',
   },
   info: 'Base Information',
+  otherSetting: 'Other Settings',
 }
diff --git a/ui/src/locales/lang/zh-CN/common.ts b/ui/src/locales/lang/zh-CN/common.ts
index 1dc493640..c7fb3fd9e 100644
--- a/ui/src/locales/lang/zh-CN/common.ts
+++ b/ui/src/locales/lang/zh-CN/common.ts
@@ -84,4 +84,5 @@ export default {
     uploadImagePrompt: '请上传一张图片',
   },
   info: '基本信息',
+  otherSetting: '其他设置',
 }
diff --git a/ui/src/locales/lang/zh-CN/views/index.ts b/ui/src/locales/lang/zh-CN/views/index.ts
index ac04f79ff..49e68cf92 100644
--- a/ui/src/locales/lang/zh-CN/views/index.ts
+++ b/ui/src/locales/lang/zh-CN/views/index.ts
@@ -10,10 +10,9 @@ import application from './application'
 import problem from './problem'
 import applicationOverview from './application-overview'
 import applicationWorkflow from './application-workflow'
+import paragraph from './paragraph'
 // import notFound from './404'
 
-// import paragraph from './paragraph'
-
 // import log from './log'
 
 // import operateLog from './operate-log'
@@ -30,8 +29,8 @@ export default {
   problem,
   applicationOverview,
   applicationWorkflow,
+  paragraph,
   // notFound,
-  // paragraph,
 
   // log,
 
diff --git a/ui/src/locales/lang/zh-CN/views/knowledge.ts b/ui/src/locales/lang/zh-CN/views/knowledge.ts
index 8f0e67fe4..f7c44f32d 100644
--- a/ui/src/locales/lang/zh-CN/views/knowledge.ts
+++ b/ui/src/locales/lang/zh-CN/views/knowledge.ts
@@ -64,6 +64,8 @@ export default {
       label: '选择器',
       placeholder: '默认为 body，可输入 .classname/#idname/tagname',
     },
+
+
   },
 
   ResultSuccess: {
diff --git a/ui/src/locales/lang/zh-CN/views/paragraph.ts b/ui/src/locales/lang/zh-CN/views/paragraph.ts
new file mode 100644
index 000000000..cf38b908f
--- /dev/null
+++ b/ui/src/locales/lang/zh-CN/views/paragraph.ts
@@ -0,0 +1,32 @@
+export default {
+  title: '段落',
+  paragraph_count: '段落',
+  editParagraph: '编辑分段',
+  addParagraph: '添加分段',
+  paragraphDetail: '分段详情',
+  character_count: '个字符',
+  setting: {
+    batchSelected: '批量选择',
+    cancelSelected: '取消选择'
+  },
+  delete: {
+    confirmTitle: '是否删除段落：',
+    confirmMessage: '删除后无法恢复，请谨慎操作。'
+  },
+  relatedProblem: {
+    title: '关联问题',
+    placeholder: '请选择问题'
+  },
+  form: {
+    paragraphTitle: {
+      label: '分段标题',
+      placeholder: '请输入分段标题'
+    },
+    content: {
+      label: '分段内容',
+      placeholder: '请输入分段内容',
+      requiredMessage1: '请输入分段内容',
+      requiredMessage2: '内容最多不超过 100000 个字'
+    }
+  }
+}
diff --git a/ui/src/locales/lang/zh-Hant/common.ts b/ui/src/locales/lang/zh-Hant/common.ts
index e6a99e91a..a89aabed5 100644
--- a/ui/src/locales/lang/zh-Hant/common.ts
+++ b/ui/src/locales/lang/zh-Hant/common.ts
@@ -80,4 +80,5 @@ export default {
     uploadImagePrompt: '請上傳一張圖片',
   },
   info: '使用者資訊',
+  otherSetting: '其他設定',
 }
diff --git a/ui/src/main.ts b/ui/src/main.ts
index c8e6c0329..9180a5325 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -11,6 +11,40 @@ import router from '@/router'
 import i18n from '@/locales'
 import Components from '@/components'
 import directives from '@/directives'
+
+import { config } from 'md-editor-v3'
+import screenfull from 'screenfull'
+
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+
+import mermaid from 'mermaid'
+
+import highlight from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
+
+config({
+  editorExtensions: {
+    highlight: {
+      instance: highlight
+    },
+    screenfull: {
+      instance: screenfull
+    },
+    katex: {
+      instance: katex
+    },
+    cropper: {
+      instance: Cropper
+    },
+    mermaid: {
+      instance: mermaid
+    }
+  }
+})
 const app = createApp(App)
 app.use(createPinia())
 for (const [key, component] of Object.entries(ElementPlusIcons)) {
diff --git a/ui/src/router/modules/paragraph.ts b/ui/src/router/modules/paragraph.ts
index db2f64b85..102822b45 100644
--- a/ui/src/router/modules/paragraph.ts
+++ b/ui/src/router/modules/paragraph.ts
@@ -7,7 +7,7 @@ const ParagraphRouter = {
   children: [
     {
       path: '/paragraph/:id/:documentId',
-      name: 'Paragraph1',
+      name: 'ParagraphIndex',
       meta: { activeMenu: '/knowledge' },
       component: () => import('@/views/paragraph/index.vue'),
     },
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
index 36cf3e79c..8366a4ed1 100644
--- a/ui/src/styles/component.scss
+++ b/ui/src/styles/component.scss
@@ -93,3 +93,9 @@
     }
   }
 }
+
+.custom-slider {
+  .el-input-number.is-without-controls .el-input__wrapper {
+    padding: 0 !important;
+  }
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 9323fb8fb..4daca04d5 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -23,9 +23,13 @@
 // card
 .el-card {
   --el-card-padding: calc(var(--app-base-px) * 2);
-  --el-card-border-radius: 8px;
+  --el-card-border-radius: 6px;
   box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12) !important;
   border: none;
+  &.is-never-shadow {
+    border: 1px solid var(--el-card-border-color);
+    box-shadow: none !important;
+  }
 }
 
 // tree
diff --git a/ui/src/styles/index.scss b/ui/src/styles/index.scss
index 7f452a1a3..0d5b82957 100644
--- a/ui/src/styles/index.scss
+++ b/ui/src/styles/index.scss
@@ -4,3 +4,5 @@
 @use './app.scss';
 @use './component.scss';
 @import 'nprogress/nprogress.css';
+@import 'md-editor-v3/lib/style.css';
+@import './md-editor.scss';
diff --git a/ui/src/styles/md-editor.scss b/ui/src/styles/md-editor.scss
new file mode 100644
index 000000000..c60f51f4e
--- /dev/null
+++ b/ui/src/styles/md-editor.scss
@@ -0,0 +1,46 @@
+.md-editor {
+  font-weight: 400;
+}
+
+.md-editor-preview {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  word-break: break-word;
+  table {
+    display: block;
+  }
+  p {
+    padding: 0 !important;
+  }
+  .md-editor-admonition {
+    margin: 0;
+    padding: 0;
+  }
+  img {
+    border: 0 !important;
+    max-width: 360px !important;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .md-editor-preview {
+    img {
+      max-width: 100% !important;
+    }
+  }
+}
+
+.md-editor-preview-wrapper {
+  padding: 0;
+}
+
+.md-editor-footer {
+  height: auto !important;
+}
+
+.ͼ1 .cm-placeholder {
+  color: var(--app-input-color-placeholder);
+  font-size: 14px;
+  font-weight: 400;
+}
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index b506b2df5..e1a21e380 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -502,12 +502,6 @@
             </el-table-column>
           </app-table>
         </div>
-
-        <ImportDocumentDialog ref="ImportDocumentDialogRef" :title="title" @refresh="refresh" />
-        <SyncWebDialog ref="SyncWebDialogRef" @refresh="refresh" />
-        <!-- 选择知识库 -->
-        <SelectDatasetDialog ref="SelectDatasetDialogRef" @refresh="refreshMigrate" />
-        <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="getList" />
       </div>
     </el-card>
     <div class="mul-operation w-full flex" v-if="multipleSelection.length !== 0">
@@ -525,7 +519,14 @@
         {{ $t('common.clear') }}
       </el-button>
     </div>
+
     <EmbeddingContentDialog ref="embeddingContentDialogRef"></EmbeddingContentDialog>
+
+    <ImportDocumentDialog ref="ImportDocumentDialogRef" :title="title" @refresh="refresh" />
+    <SyncWebDialog ref="SyncWebDialogRef" @refresh="refresh" />
+    <!-- 选择知识库 -->
+    <SelectDatasetDialog ref="SelectDatasetDialogRef" @refresh="refreshMigrate" />
+    <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="getList" />
   </div>
 </template>
 <script setup lang="ts">
@@ -768,7 +769,7 @@ function rowClickHandle(row: any, column: any) {
     return
   }
 
-  router.push({ path: `/knowledge/${id}/${row.id}` })
+  router.push({ path: `/paragraph/${id}/${row.id}` })
 }
 
 /*
@@ -930,7 +931,7 @@ function getList(bool?: boolean) {
     folder_id: folderId,
   }
   documentApi
-    .getDocument( id as string, paginationConfig.value, param, bool ? undefined : loading)
+    .getDocument(id as string, paginationConfig.value, param, bool ? undefined : loading)
     .then((res) => {
       documentData.value = res.data.records
       paginationConfig.value.total = res.data.total
@@ -938,7 +939,7 @@ function getList(bool?: boolean) {
 }
 
 function getDetail() {
-  knowledge.asyncGetDatasetDetail( id, loading).then((res: any) => {
+  knowledge.asyncGetDatasetDetail(id, loading).then((res: any) => {
     datasetDetail.value = res.data
   })
 }
diff --git a/ui/src/views/knowledge/KnowledgeSetting.vue b/ui/src/views/knowledge/KnowledgeSetting.vue
index ca1392d59..596336fe0 100644
--- a/ui/src/views/knowledge/KnowledgeSetting.vue
+++ b/ui/src/views/knowledge/KnowledgeSetting.vue
@@ -8,7 +8,7 @@
             <h4 class="title-decoration-1 mb-16">
               {{ $t('common.info') }}
             </h4>
-            <BaseForm ref="BaseFormRef" :data="detail"/>
+            <BaseForm ref="BaseFormRef" :data="detail" />
 
             <el-form
               ref="webFormRef"
@@ -18,23 +18,33 @@
               require-asterisk-position="right"
             >
               <el-form-item :label="$t('views.knowledge.knowledgeType.label')" required>
-                <el-card shadow="never" class="mb-8" style="width: 50%" v-if="detail.type === 0">
+                <el-card
+                  shadow="never"
+                  class="mb-8 w-full"
+                  style="line-height: 22px"
+                  v-if="detail.type === 0"
+                >
                   <div class="flex align-center">
                     <el-avatar class="mr-8 avatar-blue" shape="square" :size="32">
-                      <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt=""/>
+                      <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
                     </el-avatar>
                     <div>
                       <div>{{ $t('views.knowledge.knowledgeType.generalKnowledge') }}</div>
                       <el-text type="info"
-                      >{{ $t('views.knowledge.knowledgeType.generalInfo') }}
+                        >{{ $t('views.knowledge.knowledgeType.generalInfo') }}
                       </el-text>
                     </div>
                   </div>
                 </el-card>
-                <el-card shadow="never" class="mb-8" style="width: 50%" v-if="detail?.type === 1">
+                <el-card
+                  shadow="never"
+                  class="mb-8 w-full"
+                  style="line-height: 22px"
+                  v-if="detail?.type === 1"
+                >
                   <div class="flex align-center">
                     <el-avatar class="mr-8 avatar-purple" shape="square" :size="32">
-                      <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt=""/>
+                      <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
                     </el-avatar>
                     <div>
                       <div>{{ $t('views.knowledge.knowledgeType.webKnowledge') }}</div>
@@ -44,17 +54,22 @@
                     </div>
                   </div>
                 </el-card>
-                <el-card shadow="never" class="mb-8" style="width: 50%" v-if="detail?.type === 2">
+                <el-card
+                  shadow="never"
+                  class="mb-8 w-full"
+                  style="line-height: 22px"
+                  v-if="detail?.type === 2"
+                >
                   <div class="flex align-center">
                     <el-avatar shape="square" :size="32" style="background: none">
-                      <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt=""/>
+                      <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
                     </el-avatar>
                     <div>
                       <p>
                         <el-text>{{ $t('views.knowledge.knowledgeType.larkKnowledge') }}</el-text>
                       </p>
                       <el-text type="info"
-                      >{{ $t('views.knowledge.knowledgeType.larkInfo') }}
+                        >{{ $t('views.knowledge.knowledgeType.larkInfo') }}
                       </el-text>
                     </div>
                   </div>
@@ -107,48 +122,23 @@
                   "
                 />
               </el-form-item>
-            </el-form>
-            <div v-if="application_id_list.length > 0">
-              <h4 class="title-decoration-1 mb-16">
-                {{ $t('views.dataset.relatedApplications') }}
-              </h4>
-              <el-row :gutter="12">
-                <el-col
-                  :span="12"
-                  v-for="(item, index) in application_list.filter((obj: any) =>
-                    application_id_list.some((v: any) => v === obj?.id),
-                  )"
-                  :key="index"
-                  class="mb-16"
-                >
-                  <el-card shadow="never">
-                    <div class="flex-between">
-                      <div class="flex align-center">
-                        <el-avatar
-                          v-if="isAppIcon(item?.icon)"
-                          shape="square"
-                          :size="32"
-                          style="background: none"
-                          class="mr-12"
-                        >
-                          <img :src="item?.icon" alt=""/>
-                        </el-avatar>
-                        <el-avatar
-                          v-else-if="item?.name"
-                          :name="item?.name"
-                          pinyinColor
-                          shape="square"
-                          :size="32"
-                          class="mr-12"
-                        />
-                        {{ item.name }}
-                      </div>
-                    </div>
-                  </el-card>
-                </el-col>
-              </el-row>
-            </div>
 
+              <div v-if="detail.type === 0">
+                <h4 class="title-decoration-1 mb-16">
+                  {{ $t('common.otherSetting') }}
+                </h4>
+              </div>
+              <el-form-item :label="$t('上传的每个文档最大限制')">
+                <el-slider
+                  v-model="form.max_paragraph_char_number"
+                  show-input
+                  :show-input-controls="false"
+                  :min="500"
+                  :max="100000"
+                  class="custom-slider"
+                />
+              </el-form-item>
+            </el-form>
             <div class="text-right">
               <el-button @click="submit" type="primary"> {{ $t('common.save') }}</el-button>
             </div>
@@ -159,22 +149,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref, onMounted, reactive} from 'vue'
-import {useRoute} from 'vue-router'
+import { ref, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
 import BaseForm from '@/views/knowledge/component/BaseForm.vue'
 import KnowledgeApi from '@/api/knowledge/knowledge'
-import type {ApplicationFormType} from '@/api/type/application'
-import {MsgSuccess, MsgConfirm} from '@/utils/message'
-import {isAppIcon} from '@/utils/common'
+import type { ApplicationFormType } from '@/api/type/application'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { isAppIcon } from '@/utils/common'
 import useStore from '@/stores'
-import {t} from '@/locales'
+import { t } from '@/locales'
 
 const route = useRoute()
 const {
-  params: {id},
+  params: { id },
 } = route as any
 
-const {knowledge} = useStore()
+const { knowledge } = useStore()
 const webFormRef = ref()
 const BaseFormRef = ref()
 const loading = ref(false)
@@ -229,14 +219,14 @@ async function submit() {
         const obj =
           detail.value.type === '1' || detail.value.type === '2'
             ? {
-              application_id_list: application_id_list.value,
-              meta: form.value,
-              ...BaseFormRef.value.form,
-            }
+                application_id_list: application_id_list.value,
+                meta: form.value,
+                ...BaseFormRef.value.form,
+              }
             : {
-              application_id_list: application_id_list.value,
-              ...BaseFormRef.value.form,
-            }
+                application_id_list: application_id_list.value,
+                ...BaseFormRef.value.form,
+              }
 
         if (cloneModelId.value !== BaseFormRef.value.form.embedding_mode_id) {
           MsgConfirm(t('common.tip'), t('views.knowledge.tip.updateModeMessage'), {
@@ -257,8 +247,7 @@ async function submit() {
                 })
               }
             })
-            .catch(() => {
-            })
+            .catch(() => {})
         } else {
           if (detail.value.type === 2) {
             KnowledgeApi.putLarkDataset(id, obj, loading).then((res) => {
diff --git a/ui/src/views/paragraph/component/ParagraphCard.vue b/ui/src/views/paragraph/component/ParagraphCard.vue
new file mode 100644
index 000000000..265c80732
--- /dev/null
+++ b/ui/src/views/paragraph/component/ParagraphCard.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-card shadow="hover" class="paragraph-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
+    <div class="card-header">
+      <h2>{{ 1111 }}</h2>
+    </div>
+    <MdPreview
+      ref="editorRef"
+      editorId="preview-only"
+      :modelValue="form.content"
+      class="maxkb-md"
+    />
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, useSlots } from 'vue'
+import { t } from '@/locales'
+defineOptions({ name: 'CardBox' })
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 标题
+     */
+    title?: string
+    /**
+     * 描述
+     */
+    description?: string
+    /**
+     * 是否展示icon
+     */
+    showIcon?: boolean
+  }>(),
+  { title: t('common.title'), description: '', showIcon: true, border: true },
+)
+
+const show = ref(false)
+// card上面存在dropdown菜单
+const subHovered = ref(false)
+function cardEnter() {
+  show.value = true
+  subHovered.value = false
+}
+
+function cardLeave() {
+  show.value = subHovered.value
+}
+
+function subHoveredEnter() {
+  subHovered.value = true
+}
+</script>
+<style lang="scss" scoped>
+.card-box {
+  font-size: 14px;
+  position: relative;
+  min-height: var(--card-min-height);
+  min-width: var(--card-min-width);
+  .card-header {
+    margin-top: -5px;
+  }
+  .description {
+    line-height: 22px;
+    font-weight: 400;
+    min-height: 70px;
+    .content {
+      display: -webkit-box;
+      height: var(--app-card-box-description-height, 40px);
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+  }
+
+  .card-footer {
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    min-height: 30px;
+    font-weight: 400;
+    padding: 0 16px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index aa7b3d999..36539e459 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -1,39 +1,34 @@
 <template>
-  <LayoutContainer back-to="-1" class="document-detail">
-    <template #header>
-      <div style="width: 78%">
-        <h3 style="display: inline-block">{{ documentDetail?.name }}</h3>
-        <el-text type="info" v-if="documentDetail?.type === '1'"
-          >（{{ $t('views.document.form.source_url.label') }}：<el-link
-            :href="documentDetail?.meta?.source_url"
-            target="_blank"
-          >
-            <span class="break-all">{{ documentDetail?.meta?.source_url }} </span></el-link
-          >）
-        </el-text>
-      </div>
-      <div class="header-button">
-        <el-button @click="batchSelectedHandle(true)" v-if="isBatch === false">
-          {{ $t('views.paragraph.setting.batchSelected') }}
-        </el-button>
-        <el-button @click="batchSelectedHandle(false)" v-if="isBatch === true">
-          {{ $t('views.paragraph.setting.cancelSelected') }}
-        </el-button>
-        <el-button
-          @click="addParagraph"
-          type="primary"
-          :disabled="loading"
-          v-if="isBatch === false"
+  <div class="paragraph p-12-24">
+    <div class="flex align-center" style="width: 78%">
+      <back-button to="-1" style="margin-left: -4px"></back-button>
+      <h3 style="display: inline-block">{{ documentDetail?.name }}</h3>
+      <el-text type="info" v-if="documentDetail?.type === '1'"
+        >（{{ $t('views.document.form.source_url.label') }}：<el-link
+          :href="documentDetail?.meta?.source_url"
+          target="_blank"
         >
-          {{ $t('views.paragraph.addParagraph') }}
-        </el-button>
-      </div>
-    </template>
-    <div
-      class="document-detail__main p-16"
+          <span class="break-all">{{ documentDetail?.meta?.source_url }} </span></el-link
+        >）
+      </el-text>
+    </div>
+    <div class="header-button">
+      <el-button @click="batchSelectedHandle(true)" v-if="isBatch === false">
+        {{ $t('views.paragraph.setting.batchSelected') }}
+      </el-button>
+      <el-button @click="batchSelectedHandle(false)" v-if="isBatch === true">
+        {{ $t('views.paragraph.setting.cancelSelected') }}
+      </el-button>
+      <el-button @click="addParagraph" type="primary" :disabled="loading" v-if="isBatch === false">
+        {{ $t('views.paragraph.addParagraph') }}
+      </el-button>
+    </div>
+    <el-card
+      style="--el-card-padding: 0"
+      class="paragraph-detail__main mt-16"
       v-loading="(paginationConfig.current_page === 1 && loading) || changeStateloading"
     >
-      <div class="flex-between p-8">
+      <div class="flex-between p-12-16 border-b">
         <span>{{ paginationConfig.total }} {{ $t('views.paragraph.paragraph_count') }}</span>
         <el-input
           v-model="search"
@@ -51,111 +46,23 @@
           </template>
         </el-input>
       </div>
-      <el-scrollbar>
-        <div class="document-detail-height">
-          <el-empty v-if="paragraphDetail.length == 0" :description="$t('common.noData')" />
+      <el-empty v-if="paragraphDetail.length == 0" :description="$t('common.noData')" />
+      <div v-else>
+        <el-scrollbar>
+          <div class="paragraph-detail-height">
+            <InfiniteScroll
+              :size="paragraphDetail.length"
+              :total="paginationConfig.total"
+              :page_size="paginationConfig.page_size"
+              v-model:current_page="paginationConfig.current_page"
+              @load="getParagraphList"
+              :loading="loading"
+            >
 
-          <InfiniteScroll
-            v-else
-            :size="paragraphDetail.length"
-            :total="paginationConfig.total"
-            :page_size="paginationConfig.page_size"
-            v-model:current_page="paginationConfig.current_page"
-            @load="getParagraphList"
-            :loading="loading"
-          >
-            <el-row>
-              <el-col
-                :xs="24"
-                :sm="12"
-                :md="8"
-                :lg="6"
-                :xl="6"
-                v-for="(item, index) in paragraphDetail"
-                :key="index"
-                class="p-8"
-              >
-                <!-- 批量操作card -->
-                <CardBox
-                  v-if="isBatch === true"
-                  shadow="hover"
-                  :title="item.title || '-'"
-                  :description="item.content"
-                  class="document-card cursor"
-                  :class="multipleSelection.includes(item.id) ? 'selected' : ''"
-                  :showIcon="false"
-                  @click="selectHandle(item.id)"
-                >
-                  <div class="active-button" @click.stop></div>
-
-                  <template #footer>
-                    <div class="footer-content flex-between">
-                      <span>
-                        {{ numberFormat(item?.content.length) || 0 }}
-                        {{ $t('views.paragraph.character_count') }}
-                      </span>
-                    </div>
-                  </template>
-                </CardBox>
-                <!-- 非批量操作card -->
-                <CardBox
-                  v-else
-                  shadow="hover"
-                  :title="item.title || '-'"
-                  :description="item.content"
-                  class="document-card cursor"
-                  :class="item.is_active ? '' : 'disabled'"
-                  :showIcon="false"
-                  @click="editParagraph(item)"
-                >
-                  <div class="active-button" @click.stop>
-                    <el-switch
-                      :loading="loading"
-                      v-model="item.is_active"
-                      :before-change="() => changeState(item)"
-                      size="small"
-                    />
-                  </div>
-
-                  <template #footer>
-                    <div class="footer-content flex-between">
-                      <span>
-                        {{ numberFormat(item?.content.length) || 0 }}
-                        {{ $t('views.paragraph.character_count') }}
-                      </span>
-
-                      <span @click.stop>
-                        <el-dropdown trigger="click">
-                          <el-button text>
-                            <el-icon><MoreFilled /></el-icon>
-                          </el-button>
-                          <template #dropdown>
-                            <el-dropdown-menu>
-                              <el-dropdown-item @click="openGenerateDialog(item)">
-                                <el-icon><Connection /></el-icon>
-                                {{
-                                  $t('views.document.generateQuestion.title')
-                                }}</el-dropdown-item
-                              >
-                              <el-dropdown-item @click="openSelectDocumentDialog(item)">
-                                <AppIcon iconName="app-migrate"></AppIcon>
-                                {{ $t('views.document.setting.migration') }}</el-dropdown-item
-                              >
-                              <el-dropdown-item icon="Delete" @click.stop="deleteParagraph(item)">{{
-                                $t('common.delete')
-                              }}</el-dropdown-item>
-                            </el-dropdown-menu>
-                          </template>
-                        </el-dropdown>
-                      </span>
-                    </div>
-                  </template>
-                </CardBox>
-              </el-col>
-            </el-row>
-          </InfiniteScroll>
-        </div>
-      </el-scrollbar>
+            </InfiniteScroll>
+          </div>
+        </el-scrollbar>
+      </div>
 
       <div class="mul-operation border-t w-full" v-if="isBatch === true">
         <el-button :disabled="multipleSelection.length === 0" @click="openGenerateDialog()">
@@ -173,11 +80,11 @@
           {{ $t('views.document.items') }}
         </span>
       </div>
-    </div>
+    </el-card>
     <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
     <SelectDocumentDialog ref="SelectDocumentDialogRef" @refresh="refreshMigrateParagraph" />
     <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" />
-  </LayoutContainer>
+  </div>
 </template>
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed } from 'vue'
@@ -194,7 +101,7 @@ import { t } from '@/locales'
 const { paragraph } = useStore()
 const route = useRoute()
 const {
-  params: { id, documentId }
+  params: { id, documentId },
 } = route as any
 
 const SelectDocumentDialogRef = ref()
@@ -214,12 +121,12 @@ const multipleSelection = ref<any[]>([])
 const paginationConfig = reactive({
   current_page: 1,
   page_size: 30,
-  total: 0
+  total: 0,
 })
 
 function refreshMigrateParagraph() {
   paragraphDetail.value = paragraphDetail.value.filter(
-    (v) => !multipleSelection.value.includes(v.id)
+    (v) => !multipleSelection.value.includes(v.id),
   )
   multipleSelection.value = []
   MsgSuccess(t('views.document.tip.migrationSuccess'))
@@ -237,15 +144,15 @@ function deleteMulParagraph() {
     t('views.paragraph.delete.confirmMessage'),
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger'
-    }
+      confirmButtonClass: 'danger',
+    },
   )
     .then(() => {
       paragraphApi
         .delMulParagraph(id, documentId, multipleSelection.value, changeStateloading)
         .then(() => {
           paragraphDetail.value = paragraphDetail.value.filter(
-            (v) => !multipleSelection.value.includes(v.id)
+            (v) => !multipleSelection.value.includes(v.id),
           )
           multipleSelection.value = []
           MsgSuccess(t('views.document.delete.successMessage'))
@@ -275,7 +182,7 @@ function searchHandle() {
 
 function changeState(row: any) {
   const obj = {
-    is_active: !row.is_active
+    is_active: !row.is_active,
   }
   paragraph
     .asyncPutParagraph(id, documentId, row.id, obj, changeStateloading)
@@ -295,8 +202,8 @@ function deleteParagraph(row: any) {
     t('views.paragraph.delete.confirmMessage'),
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger'
-    }
+      confirmButtonClass: 'danger',
+    },
   )
     .then(() => {
       paragraph.asyncDelParagraph(id, documentId, row.id, loading).then(() => {
@@ -337,7 +244,7 @@ function getParagraphList() {
       documentId,
       paginationConfig,
       search.value && { [searchType.value]: search.value },
-      loading
+      loading,
     )
     .then((res) => {
       paragraphDetail.value = [...paragraphDetail.value, ...res.data.records]
@@ -378,16 +285,18 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
-.document-detail {
+.paragraph {
+  position: relative;
   .header-button {
     position: absolute;
     right: calc(var(--app-base-px) * 3);
+    top: calc(var(--app-base-px) + 4px);
   }
 
-  .document-detail-height {
+  .paragraph-detail-height {
     height: calc(var(--app-main-height) - 75px);
   }
-  .document-card {
+  .paragraph-card {
     height: 210px;
     background: var(--app-layout-bg-color);
     border: 1px solid var(--app-layout-bg-color);
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index cb34d34c2..ea7a28a07 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -141,7 +141,7 @@
                             </el-icon>
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
-                          <!-- <el-dropdown-item
+                          <el-dropdown-item
                             :disabled="!canEdit(item)"
                             v-if="!item.template_id"
                             @click.stop="copytool(item)"
@@ -172,7 +172,7 @@
                           >
                             <el-icon><Delete /></el-icon>
                             {{ $t('common.delete') }}
-                          </el-dropdown-item> -->
+                          </el-dropdown-item>
                         </el-dropdown-menu>
                       </template>
                     </el-dropdown>