askbot-dragon 1.7.83-beta → 1.7.85-beta

package/src/components/AnswerDocknowledge.vue

@@ -1,1203 +1,1203 @@
-<!--
-    isLiBang 字段判断 是否为立邦主体
-    立邦有自己单独的组件分支，但考虑到后期结构改动如果较大改动会不方便，所以还是在推荐知识消息中 在此判断是否是立邦主体。方便后期维护
--->
-<template>
-    <div class="answer-docknowledge">
-        <div :class="['answer-docknowledge-header', msg.content.isKnowledgeSummary ? 'bgc' : '']">
-            <div v-if="msg.content.isKnowledgeSummary" class="tips">{{$t('dragonCommon.summaryGeneratedByAI')}}</div>
-            <!-- <div v-if="msg.content.type == 0" class="answer-text">
-                <template v-if="msg.content.renderType == 1">
-                    <p v-html="msg.content.text"></p>
-                </template>
-                <template v-else>{{ msg.content.text }}</template>
-            </div> -->
-            <div class="answer-text">
-                <template v-if="msg.content.renderType == 1">
-                    <p v-html="msg.content.text"></p>
-                </template>
-                <template v-else-if="msg.content.renderType == 2">
-                    <!-- <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText> -->
-                    <markDownText
-                        :chainValues="msg.content.text || ''"
-                        :whetherRequestStream="msg.content.whetherRequestStream"
-                        @sseOtherInfo="sseOtherInfo"
-                        @answerDocKnowledgeFn="answerDocKnowledgeFn"
-                        :streamRequestUrl="msg.content.streamRequestUrl"
-                        :msgId="msg.id"
-                        :isHistory="isHistory">
-                    </markDownText>
-                </template>
-                <template v-else-if="msg.content.renderType == null">
-                    <!-- <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText> -->
-                    <markDownText
-                        :chainValues="msg.content.text || ''"
-                        :whetherRequestStream="msg.content.whetherRequestStream"
-                        @sseOtherInfo="sseOtherInfo"
-                        @answerDocKnowledgeFn="answerDocKnowledgeFn"
-                        :streamRequestUrl="msg.content.streamRequestUrl"
-                        :msgId="msg.id"
-                        :isHistory="isHistory">
-                    </markDownText>
-                </template>
-                <template v-else>{{ msg.content.text }}</template>
-            </div>
-            <template v-if="isPC">
-                <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box-pc">
-                    <img v-for="(imageItem, imageItemIndex) in msg.content.images"
-                        style="max-width: 230px;" :src="imageItem.url"
-                        v-show="showImage || imageItemIndex < 2"
-                        :key="imageItemIndex" alt @click="lookAttach(imageItem.url, imageItem, $event)" />
-                    <div  class="img-placeholder" v-if="msg.content.images.length > 2 && !showImage" @click="showImage = true">
-                        +{{ msg.content.images.length - 2 }}
-                    </div>    
-                </div>
-            </template>
-            <template v-else>
-                <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box-mobile">
-                    <img v-for="(imageItem, imageItemIndex) in msg.content.images"
-                        style="max-width: 230px;" :src="imageItem.url"
-                        :key="imageItemIndex" alt @click="lookAttach(imageItem.url, imageItem, $event)" />
-                </div>
-            </template>
-        </div>
-        <template v-if="!isLiBang">
-            <div class="ad-list" :class="msg.content.type == 0 || msg.content.type == 2 ? 'ad-list-recognition' : ''">
-                <template v-if="msg.content.type == 1">
-                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex"
-                        :style="{ paddingBottom: itemIndex === msg.content.list.length - 1 ? 0 : '10px' }" class="ad-list-cell">
-                        <div class="alc-title">
-                            <div class="alc-box">
-                                <div class="alc-source-left">
-                                    <span class="source-form">{{$t('dragonCommon.from')}}</span>
-                                    <img class="alc-title-icon" height="24px" width="24px" :src="getIconSrc(item)" alt=""
-                                        srcset="">
-                                    <span class="alc-title-from">{{ item.from }}</span>
-                                </div>
-                            </div>
-                            <div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="alc-box-introduction">
-                            </div>
-                            <div v-else class="alc-box-introduction">
-                                <img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
-                            </div>
-                            <div v-if="item.previewImage" class="alc-box-introduction-previewImage">
-                                <img :src="item.previewImage" alt=""
-                                    @click="lookAttach(item.previewImage, { url: item.previewImage }, $event)">
-                            </div>
-                            <div class="alc-updateTime">
-                                <div v-show="docSource[item.source]" class="upload-source">
-                                    {{ docSource[item.source] }}
-                                </div>
-                                <div v-show="item.url" class="alc-content-text">
-                                    <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.check')}} ></span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="alc-content" v-if="false">
-                            <div v-if="msg.content.type == 1" class="alc-content-text">
-                                {{ item.introduction }}
-                                <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.viewOriginal')}} ></span>
-                            </div>
-                            <span v-if="!isPC" class="alc-title-updateTime">{{$t('dragonCommon.lastUpdateTime')}}: {{ item.updateTime }}</span>
-                            <div v-if="false" class="alc-content-info">
-                                <div class="alcc-box">
-                                    <span class="aci-owner">{{$t('dragonCommon.owner')}}: {{ item.owner }}</span>
-                                    <span class="aci-enterprise">{{$t('dragonCommon.enterprise')}}: {{ item.enterprise }}</span>
-                                    <span class="aci-source">{{$t('dragonCommon.source')}}: {{ item.source }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template v-if="msg.content.type == 0 || msg.content.type == 2">
-                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex" class="ad-list-cell-recognition" :id="item.knowledgeId + knowledgeIndex">
-                        <div class="alc-source-name" @click="lookAttach(item.url, item, $event)">
-                            <img class="alc-title-icon" height="18px" width="18px" :src="getIconSrc(item)" alt srcset />
-                            <span class="alc-title-from">{{ item.from }}</span>&nbsp;-&nbsp;
-                            <div v-show="docSource[item.source]" class="upload-source">
-                                {{ docSource[item.source] }}
-                            </div>
-                            <i class="iconfont guoran-right"></i>
-                        </div>
-                    </div>
-                </template>
-                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">{{$t('dragonCommon.viewMore')}}</div>
-            </div>
-        </template>
-        <template v-if="isLiBang">
-            <div class="libang_list" :class="msg.content.type == 0 ? 'libang_list_recognition' : ''">
-                <template v-if="msg.content.type == 1">
-                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex" class="libang_list_cell">
-                        <div class="libang_title">
-                            <div class="libang_box">
-                                <div class="libang_source_left">
-                                    <span class="source-form">{{$t('dragonCommon.from')}}</span>
-                                    <img class="libang_title_icon" height="24px" width="24px" :src="getIconSrc(item)" alt=""
-                                        srcset="">
-                                    <span class="libang_title_from">{{ item.from }}</span>
-                                </div>
-                            </div>
-                            <div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="libang_box_introduction">
-                            </div>
-                            <div v-else class="libang_box_introduction">
-                                <img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
-                            </div>
-                            <div v-if="item.previewImage" class="libang_box_introduction_previewImage">
-                                <img :src="item.previewImage" alt=""
-                                    @click="lookAttach(item.previewImage, { url: item.previewImage }, $event)">
-                            </div>
-                            <div class="libang_updateTime">
-                                <div class="libang_updataTime_left">
-                                    <div v-show="docSource[item.source]" class="upload-source">
-                                        {{ docSource[item.source] }}
-                                    </div>
-                                    <div class="libang_floder" @click.stop="clickFloder(item)">
-                                        <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
-                                        {{ item.folderName }}
-                                    </div>
-                                </div>
-                                <div v-show="item.url" class="libang_content_text">
-                                    <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.check')}} ></span>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- <div class="alc-content" v-if="false">
-                            <div v-if="msg.content.type == 1" class="alc-content-text">
-                                {{ item.introduction }}
-                                <span @click="lookAttach(item.url, item, $event)" class="aci-view">查看原文 ></span>
-                            </div>
-                            <span v-if="!isPC" class="alc-title-updateTime">最后更新时间: {{ item.updateTime }}</span>
-                            <div v-if="false" class="alc-content-info">
-                                <div class="alcc-box">
-                                    <span class="aci-owner">所有者: {{ item.owner }}</span>
-                                    <span class="aci-enterprise">所属企业: {{ item.enterprise }}</span>
-                                    <span class="aci-source">文件来源: {{ item.source }}</span>
-                                </div>
-                            </div>
-                        </div> -->
-                    </div>
-                </template>
-                <template v-if="msg.content.type == 0 || msg.content.type == 2">
-                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex"
-                        class="libang_list_cell_recognition" @click="lookAttach(item.url, item, $event)" :id="item.knowledgeId + knowledgeIndex">
-                        <div class="libang_list_cell_left" >
-                            <div class="libang_source_name" >
-                                <img class="libang_title_icon" height="18px" width="18px" :src="getIconSrc(item)" alt srcset />
-                                <span class="libang_title_from">{{ item.from }}</span>&nbsp;-&nbsp;
-                                <div v-show="docSource[item.source]" class="upload_source">
-                                    {{ docSource[item.source] }}
-                                </div>
-                            </div>
-                            <div class="libang_source_floder" @click.stop="clickFloder(item)">
-                                <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
-                                {{ item.folderName }}
-                            </div>
-                        </div>
-                        <i class="iconfont guoran-right" @click="lookAttach(item.url, item, $event)"></i>
-                    </div>
-                </template>
-                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">{{$t('dragonCommon.viewMore')}}</div>
-            </div>
-        </template>
-
-        <previewPdf ref="previewPdf" :url="previewHref" :previewOssPath="previewOssPath" :title="title"
-            :folderName="folderName" :folderUrl="folderUrl"
-            :sourceFileType="sourceFileType" officePreviewType="pdf" @previewToDialog="previewToDialog"
-            @recommendQues="recommendQues" @close="close" @open="open" :isHasChat="isHasChat"
-            :knowledgeId="previewKnowledgeId" :isLiBang="isLiBang" @previewClickFloder="previewClickFloder"></previewPdf>
-    </div>
-</template>
-
-<script>
-/* eslint-disable */
-import previewPdf from "./previewPdf";
-import { isMobile } from "../assets/js/common";
-import markDownText from "./markDownText.vue";
-export default {
-    name: "answerDocknowledge",
-    components: { previewPdf, markDownText },
-    data () {
-        return {
-            isPC: true,
-            previewHref: "",
-            sourceFileType: '',
-            // docSource: {
-            //     LOCAL_FILE: "来源于本地文件",
-            //     CREATED_BY_ONESELF: "来源于自建知识",
-            //     WECHAT: "来源于微信",
-            //     AUTO_SYN_FROM_LOCAL_FILE: "自动同步于本地",
-            //     YUQUE: "来源于语雀",
-            //     CORP_LOCAL_FILE: '来源于企业知识库',
-            //     FEISHU: '来源于飞书-云文档'
-            // },
-            docSource: {},
-            imageObj: {
-                PDF: 'pdf1',
-                pdf: 'pdf1',
-                TXT: 'txt1',
-                txt: 'txt1',
-                selfadd: 'selfadd1',
-                md: "md2",
-                html: 'selfadd1',
-                mode: "mode",
-                general: 'general',
-                word: "word1",
-                Word: "word1",
-                docx: "word1",
-                doc: "word1",
-                WORD: "word1",
-                Excel: 'excel1',
-                EXCEL: 'excel1',
-                excel: 'excel1',
-                PPT: 'ppt1',
-                ppt: 'ppt1',
-                pptx: 'ppt1',
-                img: "image1",
-                image: "image1",
-                video: "video",
-                audio: 'audio',
-                link: "link",
-                wechat: "wechat",
-                mp4: "video",
-                MP4: "video",
-                xlsx: "excel1",
-                SLSX: "excel1",
-                xls: "excel1",
-                XLS: "excel1",
-                jpg: "image1",
-                JPG: "image1",
-                jpeg: "image1",
-                JPEG: "image1",
-                png: "image1",
-                PNG: "image1",
-                webp: "image1",
-                WEBP: "image1",
-                gif: "image1",
-                GIF: "image1",
-                svg: "image1",
-                SVG: "image1",
-                bmp: "image1",
-                BMP: "image1",
-                avi: "video",
-                AVI: "video",
-                mov: "video",
-                MOV: "video",
-                rmvb: "video",
-                RMVB: "video",
-                wav: "audio",
-                WAV: "audio",
-                mp3: "audio",
-                MP3: "audio",
-                yqhtml: "yqhtml",
-                feishuhtml: "feishuhtml"
-            },
-            allKnowledgeList: [],
-            loadMoreFlag: false,
-            title: '',
-            folderName: '',
-            folderUrl: '',
-            previewKnowledgeId: "",
-            previewKnowledge: {},
-            previewOssPath: "",
-            showImage: false
-        }
-    },
-    props: ['msg', 'isAskLightning', 'isMessageRecord', "isApp", "isHasChat", "activeKnowledgeId", "isLiBang","language","isHistory","knowledgeIndex"],
-    beforeMounted () {
-    },
-    watch: {
-        // msg: {
-        //     handler (n) {
-        //         console.log(n, 'answerDocknowledge');
-        //         n.content.list.forEach(element => {
-        //             console.log(this.imageObj[element.format], 1111);
-        //             element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
-        //             if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
-        //                 element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
-        //             }
-        //         });
-        //     },
-        //     deep: true,
-        //     immediate: true
-        // }
-    },
-    created () {
-        // var system = {};
-        // system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform);
-        // if (system.pingtai) {
-        //     //电脑
-        //     this.isPC = true;
-        // } else {
-        //     //手机
-        //     this.isPC = false;
-        // }
-        this.isPC = !isMobile() 
-        // this.msg.content.list.forEach(element => {
-        //   console.log(this.imageObj[element.format],1111);
-        //     element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
-        //     if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
-        //       element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
-        //     }
-        // });
-    },
-    mounted () {
-        this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
-        this.docSource = {
-            LOCAL_FILE: this.$t('dragonCommon.personalknowledge'),
-            CREATED_BY_ONESELF: this.$t('dragonCommon.personalknowledge'),
-            WECHAT: this.$t('dragonCommon.personalknowledge'),
-            AUTO_SYN_FROM_LOCAL_FILE: this.$t('dragonCommon.personalknowledge'),
-            YUQUE: this.$t('dragonCommon.enterpriseknowledge'),
-            CORP_LOCAL_FILE: this.$t('dragonCommon.enterpriseknowledge'),
-            FEISHU: this.$t('dragonCommon.enterpriseknowledge'),
-        }
-        console.log(this.msg.content, 'this.msg.content');
-        // if(this.msg.content.type == 1) {
-
-        // }
-        if (this.msg.content.list && this.msg.content.list.length > 0) {
-            this.loadMoreFlag = true
-            this.allKnowledgeList = JSON.parse(JSON.stringify(this.msg.content.list))
-            // console.log(this.allKnowledgeList.length, 'this.allKnowledgeList');
-            this.msg.content.list = []
-            this.lazyLoadKnowledegList()
-        }
-    },
-    methods: {
-        answerDocKnowledgeFn(){
-            console.log(
-                "answerDocKnowledgeFn 2"
-            );
-            this.$emit('answerDocKnowledgeFn');
-        },
-        // 知识类型消息 推荐、关联文档、图片
-        sseOtherInfo(msgId, eventId, data){
-            if (eventId === "matched") {
-                console.log("matched: ", this.msg.content.type);
-
-                if (JSON.parse(data.content).length > 0) {
-                    this.$set(this.msg.content, "list", JSON.parse(data.content));
-                }
-            } else {
-                this.$emit("sseOtherInfo",msgId, eventId, data);
-            }
-        },
-        getIconSrc (element) {
-            if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
-                return require("../assets/image/filtType/wechat.png")
-            } else {
-                return require("../assets/image/filtType/" + this.imageObj[element.format] + '.png')
-
-            }
-        },
-        //预览图片
-        lookAttach (url, item, event) {
-            // console.log(item.knowledgeId);
-            // this.$http.get("/knowledge-api/internal/knowledgeBaseStructure/" + "642ffbccde420e2772f7787b")
-            // debugger
-            event.preventDefault();
-            if (this.isAskLightning == 1 && !this.isApp) {
-                window.parent.postMessage({
-                    data: "bot_preview",
-                    item: JSON.stringify(item),
-                    url: url
-                }, "*");
-            } else {
-                // if (isMobile()) {
-                //   this.$refs.previewPdf.drawer = true;
-                //   this.$refs.previewPdf.previewShowPopup = false;
-                // } else {
-                //   this.$refs.previewPdf.drawer = false;
-                // }
-                //该事件是为了打开新的弹框时关闭上一个弹框
-                window.parent.postMessage({
-                  type: "close_drawer",
-                  data:this.knowledgeIndex
-                }, "*");
-                this.title = item.from || item.name
-                this.folderName = item.folderName
-                this.folderUrl = item.folderUrl
-                this.previewKnowledge = item;
-                this.previewKnowledgeId = item.knowledgeId
-                this.$refs.previewPdf.previewShowPopup = false;
-                this.$refs.previewPdf.drawer = false;
-                this.previewOssPath = url;
-                let index = url.lastIndexOf('?')
-                let type = ''
-                let httpUrl = '/knowledge-api/knowledge/getTemporaryCertificate'
-                if (index !== -1) {
-                    url = url.substring(0, index)
-                    type = this.fileType(url)
-                } else {
-                    type = this.fileType(url)
-                }
-                if (type === '' || type === 'OTHER' || type == 'IMAGE') {
-                    httpUrl = httpUrl += '?needEncrypt=true'
-                } else {
-                    httpUrl = httpUrl += '?needEncrypt=false'
-                }
-                this.$refs.previewPdf.getOssPath(url);
-                this.$http.post(httpUrl, {
-                    "fileInOssPath": url
-                }).then(res => {
-                    if (res.data.code == '0') {
-                        this.previewHref = res.data.data;
-                        this.sourceFileType = url.substring(url.lastIndexOf('.'))
-                        let isOhmPc = sessionStorage.getItem('isOhmPc')
-                        if (isMobile() || isOhmPc == 'true') {
-                            this.$refs.previewPdf.drawer = true;
-                            this.$refs.previewPdf.previewShowPopup = true;
-                        } else {
-                            this.$refs.previewPdf.previewShowPopup = false;
-                            this.$refs.previewPdf.drawer = true;
-                        }
-                        //聊一聊按钮的选中状态
-                        if (this.activeKnowledgeId == item.knowledgeId) {
-                            this.$refs.previewPdf.previewKnowledgeId = this.activeKnowledgeId
-                        } else {
-                            this.$refs.previewPdf.previewKnowledgeId = ""
-                        }
-                        this.$refs.previewPdf.fileType = type
-                        this.$refs.previewPdf.tagIds = item.tagIds;
-                        if (item.tagIds && item.tagIds.length > 0){
-                          this.$refs.previewPdf.getLocationInfo();
-                        }
-                        this.$refs.previewPdf.isMessageRecord = this.isMessageRecord ? true : false;
-                        let index = url.indexOf("?");
-                        let newFileInOssPath = url;
-                        if (index !== -1) {
-                            newFileInOssPath = url.substring(0, url.indexOf("?"))
-                        }
-                        let fileName = newFileInOssPath.substring(newFileInOssPath.lastIndexOf('.'))
-                        if (fileName === '.doc' || fileName === '.docx' || fileName === '.txt' || fileName === '.html') {
-                            this.$refs.previewPdf.fileName = fileName;
-                        } else {
-                            this.$refs.previewPdf.fileName = '';
-                        }
-                        if (item.tagIds && item.tagIds.length != 0 && this.$refs.previewPdf.newFileType !== 'PPT') {
-                            this.$refs.previewPdf.loading = false
-                            return
-                        }
-                        this.$nextTick(() => {
-                            if (item.source == 'CREATED_BY_ONESELF' || type === 'HTML') {
-                                this.$refs.previewPdf.getBolb(item)
-                            }
-                            this.$refs.previewPdf.loadIframe(item)
-                            this.$refs.previewPdf.showSummary = false;
-                        })
-                    }
-                })
-            }
-        },
-        open () {
-            this.$emit('openPreviewDialog')
-        },
-        close () {
-            this.$emit('closePreviewDialog')
-        },
-        fileType (url) {
-            const fileType = url.substring(url.lastIndexOf('.'));
-            if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.MOVC' || fileType === '.mov' || fileType === '.movc' || fileType === '.mav' || fileType === '.MAV' || fileType == '.mp3' || fileType == '.MP3' || fileType === '.wav') {
-                return 'VIDEO'
-            } else if (fileType === '.html') {
-                return 'HTML'
-            } else if (fileType === '.png' || fileType === '.jpg' || fileType === '.jpeg') {
-                return 'IMAGE'
-            } else {
-                return 'OTHER'
-            }
-        },
-        srcContentTypeIMG (item) {
-            let url = item.url || '';
-            const type = url.substring(url.lastIndexOf('.'));
-            if (type === '.jpg' || type === '.jpeg' || type === '.png' || type === '.gif') {
-                this.getSrc(item)
-                return true
-            } else {
-                return false
-            }
-        },
-        getSrc (item) {
-            // let imgurl = ''
-            this.$http.post(
-                '/knowledge-api/temporary-certificate/or-origin?expired=30',
-                item.url,
-                {
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                }).then(res => {
-                    console.log(res, '=====');
-                    // imgurl = await res.bodyText
-                    this.$set(item, 'expiredUrl', res.data ? res.data : res.bodyText)
-                    // return res.data
-                })
-            // return imgurl
-        },
-        lazyLoadKnowledegList () {
-            if (this.allKnowledgeList.length !== 0) {
-                let arr = this.allKnowledgeList.splice(0, 5)
-                if (arr.length < 5) {
-                    this.loadMoreFlag = false
-                    this.msg.content.list = [...this.msg.content.list, ...arr]
-                    return
-                }
-                if (this.allKnowledgeList.length == 0) {
-                    this.loadMoreFlag = false
-                }
-                this.msg.content.list = [...this.msg.content.list, ...arr]
-                return
-            }
-        },
-        previewToDialog (flag) {
-            if (!flag) {
-                this.$refs.previewPdf.previewKnowledgeId = ""
-            } else {
-                this.$refs.previewPdf.previewKnowledgeId = this.previewKnowledgeId
-            }
-            this.$emit('previewToDialog', flag, this.previewKnowledgeId, this.previewKnowledge)
-        },
-        clearKnowledgeId () {
-            this.previewKnowledgeId = "";
-        },
-        recommendQues (item, knowledgeId) {
-            this.$emit('recommendQues', item, knowledgeId)
-        },
-        clickFloder (item) {
-            this.$emit('clickFloder', item)
-        },
-        previewClickFloder () {
-            let item = null
-            this.msg.content.list.forEach(element => {
-                if (element.knowledgeId == this.previewKnowledgeId) {
-                    item = element
-                }
-            });
-            this.$emit('clickFloder', item)
-        }
-    }
-}
-</script>
-
-<style scoped lang="less">
-.answer-docknowledge {
-    min-width: 100px;
-    background: #ffffff;
-
-    .answer-docknowledge-header {
-        .tips {
-            width: 154px;
-            height: 22px;
-            background: #366aff;
-            border-radius: 5px;
-            text-align: center;
-            line-height: 22px;
-            color: #fff;
-            font-size: 12px;
-            margin-bottom: 7px;
-        }
-
-        .answer-text {
-            // font-size: 13px;
-            text-align: left;
-            line-height: 25px;
-            padding: 0px 0px 12px 0px;
-
-            .aci-view {
-                // font-size: 13px;
-                display: inline-block;
-                // margin-left: 5px;
-                color: #366aff;
-                cursor: pointer;
-            }
-        }
-
-        &.bgc {
-            padding: 10px;
-            background: #eef1ff;
-            border-radius: 10px;
-            margin-bottom: 16px;
-
-            .answer-text {
-                padding: 0;
-            }
-        }
-
-        // .answer-kn-image-box {
-        //     margin-bottom: 10px;
-        // }
-        .answer-kn-image-box-pc {
-            margin-bottom: 10px;
-            display: flex;
-            width: 100%;
-            overflow: hidden;
-            overflow-x: auto;
-            img {
-                width: 120px;
-                height: 120px;
-                border-radius: 5px;
-                object-fit: cover;
-                margin-right: 10px;
-                margin-bottom: 10px;
-                cursor: pointer;
-                flex: none;
-            }
-            .img-placeholder {
-                width: 120px;
-                height: 120px;
-                border-radius: 5px;
-                margin-right: 10px;
-                margin-bottom: 10px;
-                cursor: pointer;
-                border: 1px dashed #d9d9d9;
-                color: #366aff;
-                flex: none;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 22px;
-            }
-            .img-placeholder:hover {
-                border: 1px dashed #366aff;
-            }
-        }
-        .answer-kn-image-box-mobile {
-            margin-bottom: 10px;
-            display: flex;
-            width: 100%;
-            overflow: hidden;
-            overflow-x: auto;
-            img {
-                width: 35vw;
-                height: 35vw;
-                border-radius: 5px;
-                object-fit: cover;
-                margin-right: 10px;
-                margin-bottom: 10px;
-                flex: none;
-            }
-        }
-    }
-
-
-    .ad-list-recognition {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .libang_list_recognition {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .ad-list {
-        .ad-list-cell {
-            border-top: solid 1px #eeeeee;
-            padding: 10px 0 10px;
-
-            .alc-title {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: center;
-                justify-content: space-between;
-                line-height: 16px;
-
-                .alc-box {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    // font-size: 12px;
-                    width: 100%;
-
-                    .alc-source-left {
-                        display: flex;
-                        align-items: center;
-
-                        .source-form {
-                            width: 34px;
-                            flex: none;
-                            color: #a9b3c6;
-                        }
-                    }
-
-                    .alc-content-text {
-                        width: 55px;
-                        flex: none;
-
-                        .aci-view {
-                            color: #366aff;
-                            cursor: pointer;
-                        }
-                    }
-
-                    .alc-title-from {
-                        line-height: 22px;
-                        word-break: break-all !important;
-                        text-align: left;
-                        flex: auto;
-                        display: flex;
-                        justify-content: flex-start;
-                    }
-                    .upload-source {
-                        // flex: none;
-                    }
-                }
-
-                .alc-box-introduction {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 3;
-                    -webkit-box-orient: vertical;
-                    margin-top: 10px;
-                    color: #616161;
-                    // font-size: 12px;
-                    line-height: 24px;
-                    text-align: left;
-
-                    img {
-                        width: 50px;
-                        height: 50px;
-                        margin: 10px;
-                        cursor: pointer;
-                    }
-                }
-
-                .alc-box-introduction-previewImage {
-                    width: 100%;
-                    display: block;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 3;
-                    -webkit-box-orient: vertical;
-                    margin-top: 10px;
-                    color: #616161;
-                    // font-size: 12px;
-                    line-height: 24px;
-                    text-align: left;
-
-                    img {
-                        max-width: 300px;
-                        width: 100%;
-                        max-height: 150px;
-                        margin: 10px;
-                        cursor: pointer;
-                    }
-                }
-
-                .alc-updateTime {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    font-size: 13px;
-                    width: 100%;
-                    margin-top: 10px;
-
-                    .upload-source {
-                        flex: none;
-                        height: 18px;
-                        line-height: 18px;
-                        background: #e9f9f8;
-                        border: 1px solid #aff2cd;
-                        border-radius: 2px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        padding: 0 8px;
-                        color: #00c2bb;
-                    }
-
-                    .time {
-                        color: #999999;
-                        margin-left: 10px;
-                    }
-
-                    .alc-content-text {
-                        color: #366aff;
-                        cursor: pointer;
-                    }
-                }
-
-                .alc-title-icon {
-                    margin: 0 2px;
-                    width: 18px;
-                    height: 18px;
-                    flex: none;
-                }
-
-                .alc-title-updateTime {
-                    text-align: right;
-                    color: #999999;
-                    // font-size: 13px;
-                }
-            }
-
-            .alc-content {
-                .alc-title-updateTime {
-                    margin-top: 6px;
-                    display: block;
-                    text-align: right;
-                    color: #999999;
-                    // font-size: 13px;
-                }
-
-                .alc-content-text {
-                    margin-bottom: 6px;
-                    width: 55px;
-                    flex: none;
-
-                    .aci-view {
-                        display: inline-block;
-                        margin-left: 30px;
-                        color: #366aff;
-                        cursor: pointer;
-                    }
-                }
-
-                .alc-content-info {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
-
-                    .alcc-box {
-                        display: flex;
-                        flex-wrap: wrap;
-                        color: #999999;
-
-                        .aci-owner {
-                            margin-right: 20px;
-                        }
-
-                        .aci-enterprise {
-                            margin-right: 20px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .ad-list-cell-recognition {
-            max-width: 270px;
-            margin-right: 12px;
-            font-size: 12px;
-            .alc-source-name {
-                flex: none;
-                padding: 3px;
-                margin-right: 5px;
-                margin-bottom: 5px;
-                background: #f2f6ff;
-                border-radius: 5px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                cursor: pointer;
-
-                img {
-                    vertical-align: middle;
-                    // width: 16px;
-                    // height: 16px;
-                    margin: 0 3px 0 5px;
-                }
-
-                .alc-title-from {
-                    // margin-right: 5px;
-                    max-width: 240px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
-
-                .upload-source {
-                    margin-right: 5px;
-                    flex: none;
-                }
-
-                i {
-                    font-size: 12px;
-                }
-            }
-        }
-
-        .ad-loadmore {
-            width: 100%;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            // background: #FFFFFF;
-            color: #366aff;
-            font-size: 14px;
-            margin-top: 8px;
-            cursor: pointer;
-        }
-    }
-
-    .libang_list {
-        .libang_list_cell {
-            border-top: solid 1px #eeeeee;
-            padding: 10px 0 10px;
-            font-size: 12px;
-            .libang_title {
-                display: flex;
-                flex-wrap: wrap;
-                align-items: center;
-                justify-content: space-between;
-                line-height: 16px;
-
-                .libang_box {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    // font-size: 12px;
-                    width: 100%;
-
-                    .libang_source_left {
-                        display: flex;
-                        align-items: center;
-
-                        .source-form {
-                            width: 34px;
-                            flex: none;
-                            color: #a9b3c6;
-                        }
-                    }
-
-                    .alc-content-text {
-                        width: 55px;
-                        flex: none;
-
-                        .aci-view {
-                            color: #366aff;
-                            cursor: pointer;
-                        }
-                    }
-
-                    .libang_title_from {
-                        line-height: 22px;
-                        word-break: break-all !important;
-                        text-align: left;
-                        flex: auto;
-                        display: flex;
-                        justify-content: flex-start;
-                    }
-                }
-
-                .libang_box_introduction {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 3;
-                    -webkit-box-orient: vertical;
-                    margin-top: 10px;
-                    color: #616161;
-                    // font-size: 12px;
-                    line-height: 24px;
-                    text-align: left;
-
-                    img {
-                        width: 50px;
-                        height: 50px;
-                        margin: 10px;
-                        cursor: pointer;
-                    }
-                }
-
-                .libang_box_introduction_previewImage {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 3;
-                    -webkit-box-orient: vertical;
-                    margin-top: 10px;
-                    color: #616161;
-                    // font-size: 12px;
-                    line-height: 24px;
-                    text-align: left;
-
-                    img {
-                        max-width: 300px;
-                        width: 100%;
-                        max-height: 150px;
-                        margin: 10px;
-                        cursor: pointer;
-                    }
-                }
-
-                .libang_updateTime {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    font-size: 13px;
-                    width: 100%;
-                    margin-top: 10px;
-                    .libang_updataTime_left {
-                        width: calc(100% - 40px);
-                        display: flex;
-                        align-items: center;
-                        .upload-source {
-                            flex: none;
-                            height: 18px;
-                            line-height: 18px;
-                            background: #e9f9f8;
-                            border: 1px solid #aff2cd;
-                            border-radius: 2px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            padding: 0 8px;
-                            color: #00c2bb;
-                        }
-                        .libang_floder {
-                            width:calc(100% - 90px);
-                            // margin-left: 10px;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                            color: #366aff;
-                            cursor: pointer;
-                            text-align: left;
-                            i {
-                                margin-left: 8px;
-                            }
-                        }
-                    }
-                    .libang_content_text {
-                        color: #366aff;
-                        cursor: pointer;
-                    }
-                    .time {
-                        color: #999999;
-                        margin-left: 10px;
-                    }
-                }
-                .alc-title-icon {
-                    margin: 0 2px;
-                    width: 18px;
-                    height: 18px;
-                    flex: none;
-                }
-
-                .alc-title-updateTime {
-                    text-align: right;
-                    color: #999999;
-                    // font-size: 13px;
-                }
-            }
-
-            .alc-content {
-                .alc-title-updateTime {
-                    margin-top: 6px;
-                    display: block;
-                    text-align: right;
-                    color: #999999;
-                    // font-size: 13px;
-                }
-
-                .alc-content-text {
-                    margin-bottom: 6px;
-                    width: 55px;
-                    flex: none;
-
-                    .aci-view {
-                        display: inline-block;
-                        margin-left: 30px;
-                        color: #366aff;
-                        cursor: pointer;
-                    }
-                }
-
-                .alc-content-info {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
-
-                    .alcc-box {
-                        display: flex;
-                        flex-wrap: wrap;
-                        color: #999999;
-
-                        .aci-owner {
-                            margin-right: 20px;
-                        }
-
-                        .aci-enterprise {
-                            margin-right: 20px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .libang_list_cell_recognition {
-            background: #f2f6ff;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 3px;
-            margin-right: 5px;
-            margin-bottom: 5px;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 12px;
-
-            .libang_list_cell_left {
-                margin-right: 5px;
-                .libang_source_name {
-                    display: flex;
-                    align-items: center;
-                    height: 20px;
-                    margin-bottom: 2px;
-                    img {
-                        vertical-align: middle;
-                        // width: 16px;
-                        // height: 16px;
-                        margin: 0 3px;
-                    }
-
-                    .libang_title_from {
-                        max-width: 226px;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        line-height: 20px;
-                    }
-                    .upload_source {
-                        flex: none;
-                    }
-                }
-                .libang_source_floder {
-                    max-width: calc(226px - 24px);
-                    text-align: left;
-                    color: #366aff;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    cursor: pointer;
-                    .iconfont {
-                        margin: 0 5px;
-                        font-size: 14px
-                    }
-                }
-            }
-            i {
-                font-size: 12px;
-            }
-        }
-
-        .ad-loadmore {
-            width: 100%;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            // background: #FFFFFF;
-            color: #366aff;
-            font-size: 14px;
-            margin-top: 8px;
-            cursor: pointer;
-        }
-    }
-}</style>
+<!--
+    isLiBang 字段判断 是否为立邦主体
+    立邦有自己单独的组件分支，但考虑到后期结构改动如果较大改动会不方便，所以还是在推荐知识消息中 在此判断是否是立邦主体。方便后期维护
+-->
+<template>
+    <div class="answer-docknowledge">
+        <div :class="['answer-docknowledge-header', msg.content.isKnowledgeSummary ? 'bgc' : '']">
+            <div v-if="msg.content.isKnowledgeSummary" class="tips">{{$t('dragonCommon.summaryGeneratedByAI')}}</div>
+            <!-- <div v-if="msg.content.type == 0" class="answer-text">
+                <template v-if="msg.content.renderType == 1">
+                    <p v-html="msg.content.text"></p>
+                </template>
+                <template v-else>{{ msg.content.text }}</template>
+            </div> -->
+            <div class="answer-text">
+                <template v-if="msg.content.renderType == 1">
+                    <p v-html="msg.content.text"></p>
+                </template>
+                <template v-else-if="msg.content.renderType == 2">
+                    <!-- <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText> -->
+                    <markDownText
+                        :chainValues="msg.content.text || ''"
+                        :whetherRequestStream="msg.content.whetherRequestStream"
+                        @sseOtherInfo="sseOtherInfo"
+                        @answerDocKnowledgeFn="answerDocKnowledgeFn"
+                        :streamRequestUrl="msg.content.streamRequestUrl"
+                        :msgId="msg.id"
+                        :isHistory="isHistory">
+                    </markDownText>
+                </template>
+                <template v-else-if="msg.content.renderType == null">
+                    <!-- <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText> -->
+                    <markDownText
+                        :chainValues="msg.content.text || ''"
+                        :whetherRequestStream="msg.content.whetherRequestStream"
+                        @sseOtherInfo="sseOtherInfo"
+                        @answerDocKnowledgeFn="answerDocKnowledgeFn"
+                        :streamRequestUrl="msg.content.streamRequestUrl"
+                        :msgId="msg.id"
+                        :isHistory="isHistory">
+                    </markDownText>
+                </template>
+                <template v-else>{{ msg.content.text }}</template>
+            </div>
+            <template v-if="isPC">
+                <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box-pc">
+                    <img v-for="(imageItem, imageItemIndex) in msg.content.images"
+                        style="max-width: 230px;" :src="imageItem.url"
+                        v-show="showImage || imageItemIndex < 2"
+                        :key="imageItemIndex" alt @click="lookAttach(imageItem.url, imageItem, $event)" />
+                    <div  class="img-placeholder" v-if="msg.content.images.length > 2 && !showImage" @click="showImage = true">
+                        +{{ msg.content.images.length - 2 }}
+                    </div>    
+                </div>
+            </template>
+            <template v-else>
+                <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box-mobile">
+                    <img v-for="(imageItem, imageItemIndex) in msg.content.images"
+                        style="max-width: 230px;" :src="imageItem.url"
+                        :key="imageItemIndex" alt @click="lookAttach(imageItem.url, imageItem, $event)" />
+                </div>
+            </template>
+        </div>
+        <template v-if="!isLiBang">
+            <div class="ad-list" :class="msg.content.type == 0 || msg.content.type == 2 ? 'ad-list-recognition' : ''">
+                <template v-if="msg.content.type == 1">
+                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex"
+                        :style="{ paddingBottom: itemIndex === msg.content.list.length - 1 ? 0 : '10px' }" class="ad-list-cell">
+                        <div class="alc-title">
+                            <div class="alc-box">
+                                <div class="alc-source-left">
+                                    <span class="source-form">{{$t('dragonCommon.from')}}</span>
+                                    <img class="alc-title-icon" height="24px" width="24px" :src="getIconSrc(item)" alt=""
+                                        srcset="">
+                                    <span class="alc-title-from">{{ item.from }}</span>
+                                </div>
+                            </div>
+                            <div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="alc-box-introduction">
+                            </div>
+                            <div v-else class="alc-box-introduction">
+                                <img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
+                            </div>
+                            <div v-if="item.previewImage" class="alc-box-introduction-previewImage">
+                                <img :src="item.previewImage" alt=""
+                                    @click="lookAttach(item.previewImage, { url: item.previewImage }, $event)">
+                            </div>
+                            <div class="alc-updateTime">
+                                <div v-show="docSource[item.source]" class="upload-source">
+                                    {{ docSource[item.source] }}
+                                </div>
+                                <div v-show="item.url" class="alc-content-text">
+                                    <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.check')}} ></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="alc-content" v-if="false">
+                            <div v-if="msg.content.type == 1" class="alc-content-text">
+                                {{ item.introduction }}
+                                <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.viewOriginal')}} ></span>
+                            </div>
+                            <span v-if="!isPC" class="alc-title-updateTime">{{$t('dragonCommon.lastUpdateTime')}}: {{ item.updateTime }}</span>
+                            <div v-if="false" class="alc-content-info">
+                                <div class="alcc-box">
+                                    <span class="aci-owner">{{$t('dragonCommon.owner')}}: {{ item.owner }}</span>
+                                    <span class="aci-enterprise">{{$t('dragonCommon.enterprise')}}: {{ item.enterprise }}</span>
+                                    <span class="aci-source">{{$t('dragonCommon.source')}}: {{ item.source }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <template v-if="msg.content.type == 0 || msg.content.type == 2">
+                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex" class="ad-list-cell-recognition" :id="item.knowledgeId + knowledgeIndex">
+                        <div class="alc-source-name" @click="lookAttach(item.url, item, $event)">
+                            <img class="alc-title-icon" height="18px" width="18px" :src="getIconSrc(item)" alt srcset />
+                            <span class="alc-title-from">{{ item.from }}</span>&nbsp;-&nbsp;
+                            <div v-show="docSource[item.source]" class="upload-source">
+                                {{ docSource[item.source] }}
+                            </div>
+                            <i class="iconfont guoran-right"></i>
+                        </div>
+                    </div>
+                </template>
+                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">{{$t('dragonCommon.viewMore')}}</div>
+            </div>
+        </template>
+        <template v-if="isLiBang">
+            <div class="libang_list" :class="msg.content.type == 0 ? 'libang_list_recognition' : ''">
+                <template v-if="msg.content.type == 1">
+                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex" class="libang_list_cell">
+                        <div class="libang_title">
+                            <div class="libang_box">
+                                <div class="libang_source_left">
+                                    <span class="source-form">{{$t('dragonCommon.from')}}</span>
+                                    <img class="libang_title_icon" height="24px" width="24px" :src="getIconSrc(item)" alt=""
+                                        srcset="">
+                                    <span class="libang_title_from">{{ item.from }}</span>
+                                </div>
+                            </div>
+                            <div v-html="item.introduction" v-if="!srcContentTypeIMG(item)" class="libang_box_introduction">
+                            </div>
+                            <div v-else class="libang_box_introduction">
+                                <img :src="item.expiredUrl" alt="" @click="lookAttach(item.url, item, $event)">
+                            </div>
+                            <div v-if="item.previewImage" class="libang_box_introduction_previewImage">
+                                <img :src="item.previewImage" alt=""
+                                    @click="lookAttach(item.previewImage, { url: item.previewImage }, $event)">
+                            </div>
+                            <div class="libang_updateTime">
+                                <div class="libang_updataTime_left">
+                                    <div v-show="docSource[item.source]" class="upload-source">
+                                        {{ docSource[item.source] }}
+                                    </div>
+                                    <div class="libang_floder" @click.stop="clickFloder(item)">
+                                        <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
+                                        {{ item.folderName }}
+                                    </div>
+                                </div>
+                                <div v-show="item.url" class="libang_content_text">
+                                    <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.check')}} ></span>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- <div class="alc-content" v-if="false">
+                            <div v-if="msg.content.type == 1" class="alc-content-text">
+                                {{ item.introduction }}
+                                <span @click="lookAttach(item.url, item, $event)" class="aci-view">查看原文 ></span>
+                            </div>
+                            <span v-if="!isPC" class="alc-title-updateTime">最后更新时间: {{ item.updateTime }}</span>
+                            <div v-if="false" class="alc-content-info">
+                                <div class="alcc-box">
+                                    <span class="aci-owner">所有者: {{ item.owner }}</span>
+                                    <span class="aci-enterprise">所属企业: {{ item.enterprise }}</span>
+                                    <span class="aci-source">文件来源: {{ item.source }}</span>
+                                </div>
+                            </div>
+                        </div> -->
+                    </div>
+                </template>
+                <template v-if="msg.content.type == 0 || msg.content.type == 2">
+                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex"
+                        class="libang_list_cell_recognition" @click="lookAttach(item.url, item, $event)" :id="item.knowledgeId + knowledgeIndex">
+                        <div class="libang_list_cell_left" >
+                            <div class="libang_source_name" >
+                                <img class="libang_title_icon" height="18px" width="18px" :src="getIconSrc(item)" alt srcset />
+                                <span class="libang_title_from">{{ item.from }}</span>&nbsp;-&nbsp;
+                                <div v-show="docSource[item.source]" class="upload_source">
+                                    {{ docSource[item.source] }}
+                                </div>
+                            </div>
+                            <div class="libang_source_floder" @click.stop="clickFloder(item)">
+                                <i class="iconfont guoran-tongyichicun-wenjianjia-zhankaizhuangtai--folderOpen"></i>
+                                {{ item.folderName }}
+                            </div>
+                        </div>
+                        <i class="iconfont guoran-right" @click="lookAttach(item.url, item, $event)"></i>
+                    </div>
+                </template>
+                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">{{$t('dragonCommon.viewMore')}}</div>
+            </div>
+        </template>
+
+        <previewPdf ref="previewPdf" :url="previewHref" :previewOssPath="previewOssPath" :title="title"
+            :folderName="folderName" :folderUrl="folderUrl"
+            :sourceFileType="sourceFileType" officePreviewType="pdf" @previewToDialog="previewToDialog"
+            @recommendQues="recommendQues" @close="close" @open="open" :isHasChat="isHasChat"
+            :knowledgeId="previewKnowledgeId" :isLiBang="isLiBang" @previewClickFloder="previewClickFloder"></previewPdf>
+    </div>
+</template>
+
+<script>
+/* eslint-disable */
+import previewPdf from "./previewPdf";
+import { isMobile } from "../assets/js/common";
+import markDownText from "./markDownText.vue";
+export default {
+    name: "answerDocknowledge",
+    components: { previewPdf, markDownText },
+    data () {
+        return {
+            isPC: true,
+            previewHref: "",
+            sourceFileType: '',
+            // docSource: {
+            //     LOCAL_FILE: "来源于本地文件",
+            //     CREATED_BY_ONESELF: "来源于自建知识",
+            //     WECHAT: "来源于微信",
+            //     AUTO_SYN_FROM_LOCAL_FILE: "自动同步于本地",
+            //     YUQUE: "来源于语雀",
+            //     CORP_LOCAL_FILE: '来源于企业知识库',
+            //     FEISHU: '来源于飞书-云文档'
+            // },
+            docSource: {},
+            imageObj: {
+                PDF: 'pdf1',
+                pdf: 'pdf1',
+                TXT: 'txt1',
+                txt: 'txt1',
+                selfadd: 'selfadd1',
+                md: "md2",
+                html: 'selfadd1',
+                mode: "mode",
+                general: 'general',
+                word: "word1",
+                Word: "word1",
+                docx: "word1",
+                doc: "word1",
+                WORD: "word1",
+                Excel: 'excel1',
+                EXCEL: 'excel1',
+                excel: 'excel1',
+                PPT: 'ppt1',
+                ppt: 'ppt1',
+                pptx: 'ppt1',
+                img: "image1",
+                image: "image1",
+                video: "video",
+                audio: 'audio',
+                link: "link",
+                wechat: "wechat",
+                mp4: "video",
+                MP4: "video",
+                xlsx: "excel1",
+                SLSX: "excel1",
+                xls: "excel1",
+                XLS: "excel1",
+                jpg: "image1",
+                JPG: "image1",
+                jpeg: "image1",
+                JPEG: "image1",
+                png: "image1",
+                PNG: "image1",
+                webp: "image1",
+                WEBP: "image1",
+                gif: "image1",
+                GIF: "image1",
+                svg: "image1",
+                SVG: "image1",
+                bmp: "image1",
+                BMP: "image1",
+                avi: "video",
+                AVI: "video",
+                mov: "video",
+                MOV: "video",
+                rmvb: "video",
+                RMVB: "video",
+                wav: "audio",
+                WAV: "audio",
+                mp3: "audio",
+                MP3: "audio",
+                yqhtml: "yqhtml",
+                feishuhtml: "feishuhtml"
+            },
+            allKnowledgeList: [],
+            loadMoreFlag: false,
+            title: '',
+            folderName: '',
+            folderUrl: '',
+            previewKnowledgeId: "",
+            previewKnowledge: {},
+            previewOssPath: "",
+            showImage: false
+        }
+    },
+    props: ['msg', 'isAskLightning', 'isMessageRecord', "isApp", "isHasChat", "activeKnowledgeId", "isLiBang","language","isHistory","knowledgeIndex"],
+    beforeMounted () {
+    },
+    watch: {
+        // msg: {
+        //     handler (n) {
+        //         console.log(n, 'answerDocknowledge');
+        //         n.content.list.forEach(element => {
+        //             console.log(this.imageObj[element.format], 1111);
+        //             element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
+        //             if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
+        //                 element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
+        //             }
+        //         });
+        //     },
+        //     deep: true,
+        //     immediate: true
+        // }
+    },
+    created () {
+        // var system = {};
+        // system.pingtai = /(Win32|Win16|WinCE|Mac68K|MacIntel|MacIntel|MacPPC|Linux mips64)/i.test(navigator.platform);
+        // if (system.pingtai) {
+        //     //电脑
+        //     this.isPC = true;
+        // } else {
+        //     //手机
+        //     this.isPC = false;
+        // }
+        this.isPC = !isMobile() 
+        // this.msg.content.list.forEach(element => {
+        //   console.log(this.imageObj[element.format],1111);
+        //     element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png';
+        //     if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
+        //       element.src = 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png';
+        //     }
+        // });
+    },
+    mounted () {
+        this.$i18n.locale = sessionStorage.getItem("systemLanguage") || 'cn';
+        this.docSource = {
+            LOCAL_FILE: this.$t('dragonCommon.personalknowledge'),
+            CREATED_BY_ONESELF: this.$t('dragonCommon.personalknowledge'),
+            WECHAT: this.$t('dragonCommon.personalknowledge'),
+            AUTO_SYN_FROM_LOCAL_FILE: this.$t('dragonCommon.personalknowledge'),
+            YUQUE: this.$t('dragonCommon.enterpriseknowledge'),
+            CORP_LOCAL_FILE: this.$t('dragonCommon.enterpriseknowledge'),
+            FEISHU: this.$t('dragonCommon.enterpriseknowledge'),
+        }
+        console.log(this.msg.content, 'this.msg.content');
+        // if(this.msg.content.type == 1) {
+
+        // }
+        if (this.msg.content.list && this.msg.content.list.length > 0) {
+            this.loadMoreFlag = true
+            this.allKnowledgeList = JSON.parse(JSON.stringify(this.msg.content.list))
+            // console.log(this.allKnowledgeList.length, 'this.allKnowledgeList');
+            this.msg.content.list = []
+            this.lazyLoadKnowledegList()
+        }
+    },
+    methods: {
+        answerDocKnowledgeFn(){
+            console.log(
+                "answerDocKnowledgeFn 2"
+            );
+            this.$emit('answerDocKnowledgeFn');
+        },
+        // 知识类型消息 推荐、关联文档、图片
+        sseOtherInfo(msgId, eventId, data){
+            if (eventId === "matched") {
+                console.log("matched: ", this.msg.content.type);
+
+                if (JSON.parse(data.content).length > 0) {
+                    this.$set(this.msg.content, "list", JSON.parse(data.content));
+                }
+            } else {
+                this.$emit("sseOtherInfo",msgId, eventId, data);
+            }
+        },
+        getIconSrc (element) {
+            if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
+                return require("../assets/image/filtType/wechat.png")
+            } else {
+                return require("../assets/image/filtType/" + this.imageObj[element.format] + '.png')
+
+            }
+        },
+        //预览图片
+        lookAttach (url, item, event) {
+            // console.log(item.knowledgeId);
+            // this.$http.get("/knowledge-api/internal/knowledgeBaseStructure/" + "642ffbccde420e2772f7787b")
+            // debugger
+            event.preventDefault();
+            if (this.isAskLightning == 1 && !this.isApp) {
+                window.parent.postMessage({
+                    data: "bot_preview",
+                    item: JSON.stringify(item),
+                    url: url
+                }, "*");
+            } else {
+                // if (isMobile()) {
+                //   this.$refs.previewPdf.drawer = true;
+                //   this.$refs.previewPdf.previewShowPopup = false;
+                // } else {
+                //   this.$refs.previewPdf.drawer = false;
+                // }
+                //该事件是为了打开新的弹框时关闭上一个弹框
+                window.parent.postMessage({
+                  type: "close_drawer",
+                  data:this.knowledgeIndex
+                }, "*");
+                this.title = item.from || item.name
+                this.folderName = item.folderName
+                this.folderUrl = item.folderUrl
+                this.previewKnowledge = item;
+                this.previewKnowledgeId = item.knowledgeId
+                this.$refs.previewPdf.previewShowPopup = false;
+                this.$refs.previewPdf.drawer = false;
+                this.previewOssPath = url;
+                let index = url.lastIndexOf('?')
+                let type = ''
+                let httpUrl = '/knowledge-api/knowledge/getTemporaryCertificate'
+                if (index !== -1) {
+                    url = url.substring(0, index)
+                    type = this.fileType(url)
+                } else {
+                    type = this.fileType(url)
+                }
+                if (type === '' || type === 'OTHER' || type == 'IMAGE') {
+                    httpUrl = httpUrl += '?needEncrypt=true'
+                } else {
+                    httpUrl = httpUrl += '?needEncrypt=false'
+                }
+                this.$refs.previewPdf.getOssPath(url);
+                this.$http.post(httpUrl, {
+                    "fileInOssPath": url
+                }).then(res => {
+                    if (res.data.code == '0') {
+                        this.previewHref = res.data.data;
+                        this.sourceFileType = url.substring(url.lastIndexOf('.'))
+                        let isOhmPc = sessionStorage.getItem('isOhmPc')
+                        if (isMobile() || isOhmPc == 'true') {
+                            this.$refs.previewPdf.drawer = true;
+                            this.$refs.previewPdf.previewShowPopup = true;
+                        } else {
+                            this.$refs.previewPdf.previewShowPopup = false;
+                            this.$refs.previewPdf.drawer = true;
+                        }
+                        //聊一聊按钮的选中状态
+                        if (this.activeKnowledgeId == item.knowledgeId) {
+                            this.$refs.previewPdf.previewKnowledgeId = this.activeKnowledgeId
+                        } else {
+                            this.$refs.previewPdf.previewKnowledgeId = ""
+                        }
+                        this.$refs.previewPdf.fileType = type
+                        this.$refs.previewPdf.tagIds = item.tagIds;
+                        if (item.tagIds && item.tagIds.length > 0){
+                          this.$refs.previewPdf.getLocationInfo();
+                        }
+                        this.$refs.previewPdf.isMessageRecord = this.isMessageRecord ? true : false;
+                        let index = url.indexOf("?");
+                        let newFileInOssPath = url;
+                        if (index !== -1) {
+                            newFileInOssPath = url.substring(0, url.indexOf("?"))
+                        }
+                        let fileName = newFileInOssPath.substring(newFileInOssPath.lastIndexOf('.'))
+                        if (fileName === '.doc' || fileName === '.docx' || fileName === '.txt' || fileName === '.html') {
+                            this.$refs.previewPdf.fileName = fileName;
+                        } else {
+                            this.$refs.previewPdf.fileName = '';
+                        }
+                        if (item.tagIds && item.tagIds.length != 0 && this.$refs.previewPdf.newFileType !== 'PPT') {
+                            this.$refs.previewPdf.loading = false
+                            return
+                        }
+                        this.$nextTick(() => {
+                            if (item.source == 'CREATED_BY_ONESELF' || type === 'HTML') {
+                                this.$refs.previewPdf.getBolb(item)
+                            }
+                            this.$refs.previewPdf.loadIframe(item)
+                            this.$refs.previewPdf.showSummary = false;
+                        })
+                    }
+                })
+            }
+        },
+        open () {
+            this.$emit('openPreviewDialog')
+        },
+        close () {
+            this.$emit('closePreviewDialog')
+        },
+        fileType (url) {
+            const fileType = url.substring(url.lastIndexOf('.'));
+            if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.MOVC' || fileType === '.mov' || fileType === '.movc' || fileType === '.mav' || fileType === '.MAV' || fileType == '.mp3' || fileType == '.MP3' || fileType === '.wav') {
+                return 'VIDEO'
+            } else if (fileType === '.html') {
+                return 'HTML'
+            } else if (fileType === '.png' || fileType === '.jpg' || fileType === '.jpeg') {
+                return 'IMAGE'
+            } else {
+                return 'OTHER'
+            }
+        },
+        srcContentTypeIMG (item) {
+            let url = item.url || '';
+            const type = url.substring(url.lastIndexOf('.'));
+            if (type === '.jpg' || type === '.jpeg' || type === '.png' || type === '.gif') {
+                this.getSrc(item)
+                return true
+            } else {
+                return false
+            }
+        },
+        getSrc (item) {
+            // let imgurl = ''
+            this.$http.post(
+                '/knowledge-api/temporary-certificate/or-origin?expired=30',
+                item.url,
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                }).then(res => {
+                    console.log(res, '=====');
+                    // imgurl = await res.bodyText
+                    this.$set(item, 'expiredUrl', res.data ? res.data : res.bodyText)
+                    // return res.data
+                })
+            // return imgurl
+        },
+        lazyLoadKnowledegList () {
+            if (this.allKnowledgeList.length !== 0) {
+                let arr = this.allKnowledgeList.splice(0, 5)
+                if (arr.length < 5) {
+                    this.loadMoreFlag = false
+                    this.msg.content.list = [...this.msg.content.list, ...arr]
+                    return
+                }
+                if (this.allKnowledgeList.length == 0) {
+                    this.loadMoreFlag = false
+                }
+                this.msg.content.list = [...this.msg.content.list, ...arr]
+                return
+            }
+        },
+        previewToDialog (flag) {
+            if (!flag) {
+                this.$refs.previewPdf.previewKnowledgeId = ""
+            } else {
+                this.$refs.previewPdf.previewKnowledgeId = this.previewKnowledgeId
+            }
+            this.$emit('previewToDialog', flag, this.previewKnowledgeId, this.previewKnowledge)
+        },
+        clearKnowledgeId () {
+            this.previewKnowledgeId = "";
+        },
+        recommendQues (item, knowledgeId) {
+            this.$emit('recommendQues', item, knowledgeId)
+        },
+        clickFloder (item) {
+            this.$emit('clickFloder', item)
+        },
+        previewClickFloder () {
+            let item = null
+            this.msg.content.list.forEach(element => {
+                if (element.knowledgeId == this.previewKnowledgeId) {
+                    item = element
+                }
+            });
+            this.$emit('clickFloder', item)
+        }
+    }
+}
+</script>
+
+<style scoped lang="less">
+.answer-docknowledge {
+    min-width: 100px;
+    background: #ffffff;
+
+    .answer-docknowledge-header {
+        .tips {
+            width: 154px;
+            height: 22px;
+            background: #366aff;
+            border-radius: 5px;
+            text-align: center;
+            line-height: 22px;
+            color: #fff;
+            font-size: 12px;
+            margin-bottom: 7px;
+        }
+
+        .answer-text {
+            // font-size: 13px;
+            text-align: left;
+            line-height: 25px;
+            padding: 0px 0px 12px 0px;
+
+            .aci-view {
+                // font-size: 13px;
+                display: inline-block;
+                // margin-left: 5px;
+                color: #366aff;
+                cursor: pointer;
+            }
+        }
+
+        &.bgc {
+            padding: 10px;
+            background: #eef1ff;
+            border-radius: 10px;
+            margin-bottom: 16px;
+
+            .answer-text {
+                padding: 0;
+            }
+        }
+
+        // .answer-kn-image-box {
+        //     margin-bottom: 10px;
+        // }
+        .answer-kn-image-box-pc {
+            margin-bottom: 10px;
+            display: flex;
+            width: 100%;
+            overflow: hidden;
+            overflow-x: auto;
+            img {
+                width: 120px;
+                height: 120px;
+                border-radius: 5px;
+                object-fit: cover;
+                margin-right: 10px;
+                margin-bottom: 10px;
+                cursor: pointer;
+                flex: none;
+            }
+            .img-placeholder {
+                width: 120px;
+                height: 120px;
+                border-radius: 5px;
+                margin-right: 10px;
+                margin-bottom: 10px;
+                cursor: pointer;
+                border: 1px dashed #d9d9d9;
+                color: #366aff;
+                flex: none;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 22px;
+            }
+            .img-placeholder:hover {
+                border: 1px dashed #366aff;
+            }
+        }
+        .answer-kn-image-box-mobile {
+            margin-bottom: 10px;
+            display: flex;
+            width: 100%;
+            overflow: hidden;
+            overflow-x: auto;
+            img {
+                width: 35vw;
+                height: 35vw;
+                border-radius: 5px;
+                object-fit: cover;
+                margin-right: 10px;
+                margin-bottom: 10px;
+                flex: none;
+            }
+        }
+    }
+
+
+    .ad-list-recognition {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .libang_list_recognition {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .ad-list {
+        .ad-list-cell {
+            border-top: solid 1px #eeeeee;
+            padding: 10px 0 10px;
+
+            .alc-title {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                line-height: 16px;
+
+                .alc-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    // font-size: 12px;
+                    width: 100%;
+
+                    .alc-source-left {
+                        display: flex;
+                        align-items: center;
+
+                        .source-form {
+                            width: 34px;
+                            flex: none;
+                            color: #a9b3c6;
+                        }
+                    }
+
+                    .alc-content-text {
+                        width: 55px;
+                        flex: none;
+
+                        .aci-view {
+                            color: #366aff;
+                            cursor: pointer;
+                        }
+                    }
+
+                    .alc-title-from {
+                        line-height: 22px;
+                        word-break: break-all !important;
+                        text-align: left;
+                        flex: auto;
+                        display: flex;
+                        justify-content: flex-start;
+                    }
+                    .upload-source {
+                        // flex: none;
+                    }
+                }
+
+                .alc-box-introduction {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    margin-top: 10px;
+                    color: #616161;
+                    // font-size: 12px;
+                    line-height: 24px;
+                    text-align: left;
+
+                    img {
+                        width: 50px;
+                        height: 50px;
+                        margin: 10px;
+                        cursor: pointer;
+                    }
+                }
+
+                .alc-box-introduction-previewImage {
+                    width: 100%;
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    margin-top: 10px;
+                    color: #616161;
+                    // font-size: 12px;
+                    line-height: 24px;
+                    text-align: left;
+
+                    img {
+                        max-width: 300px;
+                        width: 100%;
+                        max-height: 150px;
+                        margin: 10px;
+                        cursor: pointer;
+                    }
+                }
+
+                .alc-updateTime {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-size: 13px;
+                    width: 100%;
+                    margin-top: 10px;
+
+                    .upload-source {
+                        flex: none;
+                        height: 18px;
+                        line-height: 18px;
+                        background: #e9f9f8;
+                        border: 1px solid #aff2cd;
+                        border-radius: 2px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        padding: 0 8px;
+                        color: #00c2bb;
+                    }
+
+                    .time {
+                        color: #999999;
+                        margin-left: 10px;
+                    }
+
+                    .alc-content-text {
+                        color: #366aff;
+                        cursor: pointer;
+                    }
+                }
+
+                .alc-title-icon {
+                    margin: 0 2px;
+                    width: 18px;
+                    height: 18px;
+                    flex: none;
+                }
+
+                .alc-title-updateTime {
+                    text-align: right;
+                    color: #999999;
+                    // font-size: 13px;
+                }
+            }
+
+            .alc-content {
+                .alc-title-updateTime {
+                    margin-top: 6px;
+                    display: block;
+                    text-align: right;
+                    color: #999999;
+                    // font-size: 13px;
+                }
+
+                .alc-content-text {
+                    margin-bottom: 6px;
+                    width: 55px;
+                    flex: none;
+
+                    .aci-view {
+                        display: inline-block;
+                        margin-left: 30px;
+                        color: #366aff;
+                        cursor: pointer;
+                    }
+                }
+
+                .alc-content-info {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .alcc-box {
+                        display: flex;
+                        flex-wrap: wrap;
+                        color: #999999;
+
+                        .aci-owner {
+                            margin-right: 20px;
+                        }
+
+                        .aci-enterprise {
+                            margin-right: 20px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .ad-list-cell-recognition {
+            max-width: 270px;
+            margin-right: 12px;
+            font-size: 12px;
+            .alc-source-name {
+                flex: none;
+                padding: 3px;
+                margin-right: 5px;
+                margin-bottom: 5px;
+                background: #f2f6ff;
+                border-radius: 5px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                cursor: pointer;
+
+                img {
+                    vertical-align: middle;
+                    // width: 16px;
+                    // height: 16px;
+                    margin: 0 3px 0 5px;
+                }
+
+                .alc-title-from {
+                    // margin-right: 5px;
+                    max-width: 240px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+
+                .upload-source {
+                    margin-right: 5px;
+                    flex: none;
+                }
+
+                i {
+                    font-size: 12px;
+                }
+            }
+        }
+
+        .ad-loadmore {
+            width: 100%;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            // background: #FFFFFF;
+            color: #366aff;
+            font-size: 14px;
+            margin-top: 8px;
+            cursor: pointer;
+        }
+    }
+
+    .libang_list {
+        .libang_list_cell {
+            border-top: solid 1px #eeeeee;
+            padding: 10px 0 10px;
+            font-size: 12px;
+            .libang_title {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: space-between;
+                line-height: 16px;
+
+                .libang_box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    // font-size: 12px;
+                    width: 100%;
+
+                    .libang_source_left {
+                        display: flex;
+                        align-items: center;
+
+                        .source-form {
+                            width: 34px;
+                            flex: none;
+                            color: #a9b3c6;
+                        }
+                    }
+
+                    .alc-content-text {
+                        width: 55px;
+                        flex: none;
+
+                        .aci-view {
+                            color: #366aff;
+                            cursor: pointer;
+                        }
+                    }
+
+                    .libang_title_from {
+                        line-height: 22px;
+                        word-break: break-all !important;
+                        text-align: left;
+                        flex: auto;
+                        display: flex;
+                        justify-content: flex-start;
+                    }
+                }
+
+                .libang_box_introduction {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    margin-top: 10px;
+                    color: #616161;
+                    // font-size: 12px;
+                    line-height: 24px;
+                    text-align: left;
+
+                    img {
+                        width: 50px;
+                        height: 50px;
+                        margin: 10px;
+                        cursor: pointer;
+                    }
+                }
+
+                .libang_box_introduction_previewImage {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    margin-top: 10px;
+                    color: #616161;
+                    // font-size: 12px;
+                    line-height: 24px;
+                    text-align: left;
+
+                    img {
+                        max-width: 300px;
+                        width: 100%;
+                        max-height: 150px;
+                        margin: 10px;
+                        cursor: pointer;
+                    }
+                }
+
+                .libang_updateTime {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-size: 13px;
+                    width: 100%;
+                    margin-top: 10px;
+                    .libang_updataTime_left {
+                        width: calc(100% - 40px);
+                        display: flex;
+                        align-items: center;
+                        .upload-source {
+                            flex: none;
+                            height: 18px;
+                            line-height: 18px;
+                            background: #e9f9f8;
+                            border: 1px solid #aff2cd;
+                            border-radius: 2px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            padding: 0 8px;
+                            color: #00c2bb;
+                        }
+                        .libang_floder {
+                            width:calc(100% - 90px);
+                            // margin-left: 10px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            color: #366aff;
+                            cursor: pointer;
+                            text-align: left;
+                            i {
+                                margin-left: 8px;
+                            }
+                        }
+                    }
+                    .libang_content_text {
+                        color: #366aff;
+                        cursor: pointer;
+                    }
+                    .time {
+                        color: #999999;
+                        margin-left: 10px;
+                    }
+                }
+                .alc-title-icon {
+                    margin: 0 2px;
+                    width: 18px;
+                    height: 18px;
+                    flex: none;
+                }
+
+                .alc-title-updateTime {
+                    text-align: right;
+                    color: #999999;
+                    // font-size: 13px;
+                }
+            }
+
+            .alc-content {
+                .alc-title-updateTime {
+                    margin-top: 6px;
+                    display: block;
+                    text-align: right;
+                    color: #999999;
+                    // font-size: 13px;
+                }
+
+                .alc-content-text {
+                    margin-bottom: 6px;
+                    width: 55px;
+                    flex: none;
+
+                    .aci-view {
+                        display: inline-block;
+                        margin-left: 30px;
+                        color: #366aff;
+                        cursor: pointer;
+                    }
+                }
+
+                .alc-content-info {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .alcc-box {
+                        display: flex;
+                        flex-wrap: wrap;
+                        color: #999999;
+
+                        .aci-owner {
+                            margin-right: 20px;
+                        }
+
+                        .aci-enterprise {
+                            margin-right: 20px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .libang_list_cell_recognition {
+            background: #f2f6ff;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 3px;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 12px;
+
+            .libang_list_cell_left {
+                margin-right: 5px;
+                .libang_source_name {
+                    display: flex;
+                    align-items: center;
+                    height: 20px;
+                    margin-bottom: 2px;
+                    img {
+                        vertical-align: middle;
+                        // width: 16px;
+                        // height: 16px;
+                        margin: 0 3px;
+                    }
+
+                    .libang_title_from {
+                        max-width: 226px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        line-height: 20px;
+                    }
+                    .upload_source {
+                        flex: none;
+                    }
+                }
+                .libang_source_floder {
+                    max-width: calc(226px - 24px);
+                    text-align: left;
+                    color: #366aff;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    cursor: pointer;
+                    .iconfont {
+                        margin: 0 5px;
+                        font-size: 14px
+                    }
+                }
+            }
+            i {
+                font-size: 12px;
+            }
+        }
+
+        .ad-loadmore {
+            width: 100%;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            // background: #FFFFFF;
+            color: #366aff;
+            font-size: 14px;
+            margin-top: 8px;
+            cursor: pointer;
+        }
+    }
+}</style>