feat: 添加 card 容器支持

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@better-scroll/core": "^2.5.1",
+    "@gerhobbelt/markdown-it-container": "^3.0.0-10",
     "@isaacs/cliui": "^8.0.2",
     "axios": "^0.19.0",
     "core-js": "^3.43.0",

src/views/AI-new/components/card/index.vue

@@ -0,0 +1,43 @@
+<script>
+export default {
+    name: "card",
+    props: {
+        content: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    computed: {
+        cardContent() {
+            const markup = this.content.markup.replace(/(\w+)\s?:/gmi, '"$1":')
+
+            try {
+                const content = JSON.parse(markup)
+                return content
+            } catch (e) {
+                console.log(e)
+                return {}
+            }
+        }
+    },
+    mounted() {
+        console.log(`------`, this.content.markup);
+    }
+}
+</script>
+
+<template>
+    <div class="card">
+        <div><img :src="cardContent.img" alt=""></div>
+        <section>
+            <div>{{ cardContent.title }}</div>
+            <div>
+                <div v-for="tag in cardContent.tags">
+                    {{ tag }}
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<style lang="css" scoped></style>

src/views/AI-new/components/js/markdown-it-container.js

@@ -0,0 +1,46 @@
+import container from "@gerhobbelt/markdown-it-container"
+import Vue from "vue";
+import KnowledgeCard from "../card/index.vue"
+
+export function markdownContainer(markdownIt) {
+    console.log(markdownIt);
+    console.log(container);
+
+    container(markdownIt, "card", {
+        validate: function (params) {
+            console.log(params.trim(), "title line");
+            return "card"
+            // return params.trim().match(/^card\b/);
+        },
+        render: function (tokens, idx) {
+            // console.log(`tokens, idx`, tokens, idx);
+            return tokens[idx].content
+        },
+        content: function (tokens, idx, options, env, self) {
+
+
+            console.log(`args`, tokens, idx, options, env, self);
+            // return [...args]
+            console.log(`tokens[idx]`, tokens[idx]);
+
+            const { markup } = tokens[idx]
+            console.log(`markup`, markup);
+            setTimeout(() => {
+                const dom = document.getElementById("cardTest");
+                // if (dom) return
+                const vm = new Vue({
+                    el: "#cardTest",
+                    render: h => h(KnowledgeCard, {
+                        props: {
+                            content: tokens[idx]
+                        }
+                    })
+                })
+                // console.log(`vue instance`, vm);
+            })
+
+            // return tokens[idx]
+            return "<div id='cardTest'></div>"
+        }
+    })
+}

src/views/AI-new/components/message.vue

@@ -50,11 +50,13 @@ import { Icon } from 'vant'
 import TreasureBox from '@/views/AI/components/treasureBox.vue'
 import MarkdownIt from 'markdown-it'
 import markdownItKatex from 'markdown-it-katex'
+import { markdownContainer } from './js/markdown-it-container'
+
 const md = new MarkdownIt({
   html: true,
   linkify: true,
   typographer: true
-}).use(markdownItKatex)
+}).use(markdownItKatex).use(markdownContainer)
 
 export default {
   name: 'message',

src/views/AI-new/index.vue

@@ -84,11 +84,11 @@ export default {
       // 可以调用接口展示 名字 或者存在session里
 
       let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
-      console.log(sesstions)
+      // console.log(sesstions)
       let text = sesstions.map((item) => {
         return item.productName + '<br/>'
       })
-      console.log(text)
+      // console.log(text)
       let other = '对比产品 <br/>' + text.join('')
 
       this.messages.push({
@@ -103,7 +103,7 @@ export default {
       this.isThink = e
     },
     getHotProducts(e) {
-      console.log(e)
+      // console.log(e)
       this.hotList = e
     },
 

src/views/AI-new/views/productKnowledge/index.vue

@@ -1,26 +1,15 @@
 <template>
   <div class="chat-page">
     <van-nav-bar title="产品知识助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-    <sticky
-      :hotList="hotList"
-      :productName="productName"
-      :messagesList.sync="messages"
-      :autoScrollEnabled.sync="autoScrollEnabled"
-      @setProductName="setProductName"
-      :isDisabled="messageStatus === 'send'"
-      :conversationId="conversationId"
-    ></sticky>
+    <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
 
     <main class="chat-main">
       <div class="chat-content">
         <div class="message-area" ref="messageArea" @scroll="handleScroll">
-          <messageComponent
-            :messagesList="messages"
-            :is-deep="isDeep"
-            :is-search="isSearching"
-            :think-ok="isThink"
-            @setProductName="setProductName"
-          ></messageComponent>
+          <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching" :think-ok="isThink"
+            @setProductName="setProductName"></messageComponent>
           <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
         </div>
       </div>
@@ -29,19 +18,10 @@
         <van-icon name="upgrade" size="2em" @click="scrollToTop" />
       </div>
     </main>
-
-    <chatMessage
-      :messages.sync="messages"
-      :messageStatus.sync="messageStatus"
-      :is-deep.sync="isDeep"
-      :conversation-id.sync="conversationId"
-      :is-searching.sync="isSearching"
-      :product-name.sync="productName"
-      :autoScrollEnabled.sync="autoScrollEnabled"
-      @getIsThink="getIsThink"
-      action="chat"
-      @initBotMessage="initBotMessage"
-    />
+    <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
+      :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="chat"
+      @initBotMessage="initBotMessage" />
   </div>
 </template>
 
@@ -90,11 +70,11 @@ export default {
       // 可以调用接口展示 名字 或者存在session里
 
       let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
-      console.log(sesstions)
+      // console.log(sesstions)
       let text = sesstions.map(item => {
         return item.productName + '<br/>'
       })
-      console.log(text)
+      // console.log(text)
       let other = '对比产品 <br/>' + text.join('')
 
       this.messages.push({
@@ -109,7 +89,7 @@ export default {
       this.isThink = e
     },
     getHotProducts(e) {
-      console.log(e)
+      // console.log(e)
       this.hotList = e
     },
 
@@ -142,7 +122,14 @@ export default {
     initBotMessage() {
       this.messages.splice(0, this.messages.length, {
         type: 'bot',
-        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`
+        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~ \n\n`
+        /* ::: card
+              {
+                "img": "/family.png",
+                "title": "标题",
+                "tags": ["标签1", "标签2", "标签3"]
+              }
+        ::: */
       })
     }
   },