perf: 优化markdown支持离线部署(#231)

ui/env.d.ts

@@ -7,6 +7,7 @@ declare module 'markdown-it-footnote'
 declare module 'markdown-it-sub'
 declare module 'markdown-it-sup'
 declare module 'markdown-it-toc-done-right'
+declare module 'katex'
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }

ui/package.json

@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "axios": "^0.28.0",
+    "cropperjs": "^1.6.2",
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "install": "^0.13.0",
+    "katex": "^0.16.10",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",
     "markdown-it-abbr": "^1.0.4",
@@ -29,12 +31,14 @@
     "markdown-it-toc-done-right": "^4.2.0",
     "md-editor-v3": "^4.12.1",
     "medium-zoom": "^1.1.0",
+    "mermaid": "^10.9.0",
     "mitt": "^3.0.0",
     "moment": "^2.30.1",
     "npm": "^10.2.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.6",
     "pinyin-pro": "^3.18.2",
+    "screenfull": "^6.0.2",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vue-router": "^4.2.4"

ui/src/components/markdown-editor/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <MdEditor noIconfont v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { MdEditor, config } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+
+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'
+
+// >=3.0
+import * as prettier from 'prettier'
+import parserMarkdown from 'prettier/plugins/markdown'
+
+// https://at.alicdn.com/t/c/font_2605852_u82y61ve02.js
+import './assets/font_prouiefeic.js'
+
+config({
+  editorExtensions: {
+    prettier: {
+      prettierInstance: prettier,
+      parserMarkdownInstance: parserMarkdown
+    },
+    highlight: {
+      instance: highlight
+    },
+    screenfull: {
+      instance: screenfull
+    },
+    katex: {
+      instance: katex
+    },
+    cropper: {
+      instance: Cropper
+    },
+    mermaid: {
+      instance: mermaid
+    }
+  }
+})
+</script>

ui/src/views/paragraph/component/ParagraphForm.vue

@@ -22,7 +22,7 @@
         type="textarea"
       > 
      </el-input>-->
-      <MdEditor
+      <MarkdownEditor
         v-if="isEdit"
         v-model="form.content"
         placeholder="请输入分段内容"
@@ -46,7 +46,8 @@
 <script setup lang="ts">
 import { ref, reactive, onUnmounted, watch, nextTick } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import { MdEditor, MdPreview } from 'md-editor-v3'
+import { MdPreview } from 'md-editor-v3'
+import MarkdownEditor from '@/components/markdown-editor/index.vue'
 import imageApi from '@/api/image'
 const props = defineProps({
   data: {