调整自动引入

components/AiHighlight/AiHighlight.vue

@@ -0,0 +1,55 @@
+<template>
+  <section class="AiHighlight" :class="{bold,color}" v-html="html"/>
+</template>
+
+<script>
+export default {
+  name: "AiHighlight",
+  props: {
+    value: {default: ""},
+    content: {default: ""},
+    keywords: {default: () => []},
+    color: {default: ""},
+    bold: Boolean
+  },
+  computed: {
+    words: v => [v.keywords].flat(),
+    html() {
+      let {content, words, value} = this
+      const reg = new RegExp(`(${words.join("|")})`, 'g')
+      content = content?.replace(/(@v)/g, this.keywordRender(value))
+      return !!words.join("|") ? content?.replace(reg, this.keywordRender('$1')) : content
+    }
+  },
+  methods: {
+    keywordRender(word) {
+      const {color} = this
+      return `<p class="keyword" style="color:${color}">${word}</p>`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep.AiHighlight {
+  display: flex;
+  align-items: baseline;
+
+  .keyword {
+    display: block;
+    width: auto;
+    color: #26f;
+  }
+
+  &.color {
+    .keyword {
+    }
+  }
+
+  &.bold {
+    .keyword {
+      font-weight: bold;
+    }
+  }
+}
+</style>