markdown变量替换

src/components/czr-ui/CzrMarkdown/CzrMarkdown.vue

@@ -66,6 +66,12 @@ const renderer: any = new marked.Renderer()
 renderer.link = ({ href, text }) => {
   return `<a href="${href}">${text}</a>`
 }
+renderer.text = ({ text }) => {
+  if (props.rendererFunc) {
+    return props.rendererFunc({ text })
+  }
+  return text
+}
 DOMPurify.addHook('afterSanitizeAttributes', (node) => {
   if (node.tagName === 'A') {
     node.setAttribute('target', '_blank')
@@ -82,6 +88,7 @@ const props = defineProps({
     type: String,
     default: 'x',
   },
+  rendererFunc: <any>{},
 })
 const Menus: any = [
   {

src/views/manage/app/index.vue

@@ -1,39 +1,57 @@
 <template>
   <div>
-    <template v-if="state.isSpeak">
-      <el-button @click="stop">停止录音</el-button>
-    </template>
-    <template v-else>
-      <el-button @click="speak">开始录音</el-button>
-    </template>
-    <div class="w-full h-6 bg-[#fff] relative">
-      <div class="h-6 bg-[red] absolute" :style="{ width: volume + '%' }"></div>
-    </div>
+    <el-card>
+      {{ state.text }}
+    </el-card>
+    <el-card>
+      <div class="h-[400px]">
+        <CzrMarkdown
+          v-model="state.text"
+          :rendererFunc="
+            ({ text }) => {
+              return text.replace(/\$\{([^}]+)\}/g, (match, p1) => {
+                return `<span class='vars-params'>${state.optionsMap.get(p1)?.label}</span>`
+              })
+            }
+          "
+        />
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
 import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-import useSpeechToAudio from '@/utils/useSpeechToAudio'
+import CzrMarkdown from '@/components/czr-ui/CzrMarkdown/CzrMarkdown.vue'
 
 const props = defineProps({})
 const state: any = reactive({
-  isSpeak: false,
-})
-const onEnd = (audio) => {
-  state.isSpeak = false
-  console.log(audio)
-}
-const onSpeak = ({ duration }) => {
-  state.isSpeak = true
-  // console.log('duration', duration)
-}
-const { speak, stop, volume } = useSpeechToAudio({
-  onEnd,
-  onSpeak,
-  timeout: 3,
+  text: '',
+  optionsMap: new Map([
+    ['123', { label: '变量1', id: '123', type: 'String' }],
+    ['223', { label: '变量变量变量变量变量2', id: '223', type: 'String' }],
+    [
+      '333',
+      {
+        label: '变量变量变量变量变量变量变量变量变量变量变量3',
+        id: '333',
+        type: 'Number',
+      },
+    ],
+  ]),
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.vars-params) {
+  margin: 0 10px;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  background-color: #ffffff;
+  border-radius: 4px;
+  padding: 2px 8px;
+  .svg-icon {
+    margin-right: 4px;
+  }
+}
+</style>