fix:修改md

package.json

@@ -17,20 +17,27 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
+    "@vavt/cm-extension": "^1.11.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "13.3.0",
     "axios": "1.9.0",
     "clipboard": "2.0.11",
+    "cropperjs": "^1.6.2",
     "dayjs": "^1.11.18",
     "echarts": "5.6.0",
     "element-plus": "2.10.7",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
+    "highlight.js": "^11.9.0",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "katex": "^0.16.22",
+    "md-editor-v3": "^5.8.4",
+    "mermaid": "^11.12.0",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
+    "screenfull": "^6.0.2",
     "sortablejs": "^1.15.6",
     "splitpanes": "4.0.4",
     "vue": "3.5.16",

src/components/Markdown/MdPreview.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="!$attrs.modelValue"></div>
+  <MdPreview v-else noIconfont noPrettier :codeFoldable="false" v-bind="$attrs"/>
+</template>
+
+<script setup>
+import { MdPreview, config } from 'md-editor-v3'
+// 引入公共库中的语言配置
+import ZH_TW from '@vavt/cm-extension/dist/locale/zh-TW'
+
+defineOptions({ name: 'MdPreview' })
+config({
+  editorConfig: {
+    languageUserDefined: {
+      'zh-Hant': ZH_TW
+    }
+  },
+})
+</script>

src/main.js

@@ -47,6 +47,43 @@ import DictTag from '@/components/DictTag'
 //版本更新检查
 import '@/utils/cachedBuildTime'
 
+// md 编辑器
+import { 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'
+
+config({
+  editorExtensions: {
+    highlight: {
+      instance: highlight
+    },
+    screenfull: {
+      instance: screenfull
+    },
+    katex: {
+      instance: katex
+    },
+    cropper: {
+      instance: Cropper
+    },
+    mermaid: {
+      instance: mermaid
+    }
+  }
+})
+
 const app = createApp(App)
 
 // 全局方法挂载

src/views/tc/eventAnalysisReport/components/basketball.vue

@@ -2,8 +2,8 @@
 	<div>
 		<!-- 搜索区域 -->
 		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
-			<el-form-item label="编号/名称" prop="roleName">
+			<el-form-item label="赛事编号" prop="matchNumStr">
-				<el-input v-model="queryParams.roleName" placeholder="请输入集合编号/球队名称" clearable style="width: 240px"
+				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
 					@keyup.enter="handleQuery" />
 			</el-form-item>
 			<el-form-item label="联赛类型" prop="roleKey">

src/views/tc/eventAnalysisReport/components/soccer.vue

@@ -2,8 +2,8 @@
 	<div>
 		<!-- 搜索区域 -->
 		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
-			<el-form-item label="编号/名称" prop="roleName">
+			<el-form-item label="赛事编号" prop="matchNumStr">
-				<el-input v-model="queryParams.roleName" placeholder="请输入集合编号/球队名称" clearable style="width: 240px"
+				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
 					@keyup.enter="handleQuery" />
 			</el-form-item>
 			<el-form-item label="联赛类型" prop="roleKey">

src/views/tc/eventAnalysisReport/detail.vue

@@ -17,12 +17,17 @@
 						</div>
 					</template>
 					<div class="body">
-						<p v-if="!loading && data && data.report">
+						<MdPreview 
-							{{ data && data.report }}
+							v-if="!loading && data && data.report" 
-						</p>
+							ref="editorRef" 
+							editorId="preview-only" 
+							:modelValue="data.report"
+							class="maxkb-md" 
+						/>
 						<el-empty v-else description="暂无数据"></el-empty>
 					</div>
 				</el-card>
+				
 			</el-col>
 		</el-row>
 	</div>
@@ -30,10 +35,11 @@
 
 <script setup name="EventAnalysisReportDetail">
 import { reportDetail } from '@/api/tc/eventAnalysisReport'
+import MdPreview from '@/components/Markdown/MdPreview'
 const route = useRoute()
 
 let { proxy } = getCurrentInstance()
-
+const editorRef = ref(null)
 const id = ref(0)
 const data = ref({})
 const loading = ref(false)

src/views/tc/videoScript/components/basketball.vue

@@ -2,8 +2,8 @@
 	<div>
 		<!-- 搜索区域 -->
 		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
-			<el-form-item label="编号/名称" prop="roleName">
+			<el-form-item label="赛事编号" prop="matchNumStr">
-				<el-input v-model="queryParams.roleName" placeholder="请输入集合编号/球队名称" clearable style="width: 240px"
+				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
 					@keyup.enter="handleQuery" />
 			</el-form-item>
 			<el-form-item label="联赛类型" prop="roleKey">

src/views/tc/videoScript/components/soccer.vue

@@ -2,8 +2,8 @@
 	<div>
 		<!-- 搜索区域 -->
 		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
-			<el-form-item label="编号/名称" prop="roleName">
+			<el-form-item label="赛事编号" prop="matchNumStr">
-				<el-input v-model="queryParams.roleName" placeholder="请输入集合编号/球队名称" clearable style="width: 240px"
+				<el-input v-model="queryParams.matchNumStr" placeholder="请输入赛事编号" clearable style="width: 240px"
 					@keyup.enter="handleQuery" />
 			</el-form-item>
 			<el-form-item label="联赛类型" prop="roleKey">

src/views/tc/videoScript/detail.vue

@@ -16,9 +16,13 @@
 						</div>
 					</template>
 					<div class="body">
-						<p v-if="!loading && data && data.report">
+						<MdPreview 
-							{{ data && data.report }}
+							v-if="!loading && data && data.report" 
-						</p>
+							ref="editorRef" 
+							editorId="preview-only" 
+							:modelValue="data.report"
+							class="maxkb-md" 
+						/>
 						<el-empty v-else description="暂无数据"></el-empty>
 					</div>
 				</el-card>
@@ -29,10 +33,12 @@
 
 <script setup name="videoScriptDetail">
 import { scriptDetail } from '@/api/tc/videoScript'
+import MdPreview from '@/components/Markdown/MdPreview'
 const route = useRoute()
 
 let { proxy } = getCurrentInstance()
 
+const editorRef = ref(null)
 const id = ref(0)
 const data = ref({})
 const loading = ref(false)