askbot-dragon 1.6.78-beta → 1.6.78

package/src/components/AnswerDocknowledge.vue

@@ -5,7 +5,7 @@
 <template>
     <div class="answer-docknowledge">
         <div :class="['answer-docknowledge-header', msg.content.isKnowledgeSummary ? 'bgc' : '']">
-            <div v-if="msg.content.isKnowledgeSummary" class="tips">AI为您总结生成了以下摘要</div>
+            <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>
@@ -16,22 +16,60 @@
                 <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>
-            <div v-if="msg.content.images && msg.content.images.length != 0" class="answer-kn-image-box">
-                <img v-for="(imageItem, imageItemIndex) in msg.content.images"
-                    style="max-width: 230px;border-radius: 25px;margin-bottom: 15px" :src="imageItem.url"
-                    :key="imageItemIndex" alt @click="lookAttach(imageItem.url, imageItem, $event)" />
-            </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 ? 'ad-list-recognition' : ''">
+            <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" class="ad-list-cell">
+                    <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">出自</span>
+                                    <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>
@@ -51,39 +89,39 @@
                                     {{ docSource[item.source] }}
                                 </div>
                                 <div v-show="item.url" class="alc-content-text">
-                                    <span @click="lookAttach(item.url, item, $event)" class="aci-view">查看 ></span>
+                                    <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>
+                                <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.viewOriginal')}} ></span>
                             </div>
-                            <span v-if="!isPC" class="alc-title-updateTime">最后更新时间: {{ item.updateTime }}</span>
+                            <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">所有者: {{ item.owner }}</span>
-                                    <span class="aci-enterprise">所属企业: {{ item.enterprise }}</span>
-                                    <span class="aci-source">文件来源: {{ item.source }}</span>
+                                    <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">
-                    <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex" class="ad-list-cell-recognition">
+                <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;
+                            <span class="alc-title-from">{{ item.from }}</span>
                             <div v-show="docSource[item.source]" class="upload-source">
-                                {{ docSource[item.source] }}
+                                -{{ docSource[item.source] }}
                             </div>
                             <i class="iconfont guoran-right"></i>
                         </div>
                     </div>
                 </template>
-                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">查看更多</div>
+                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">{{$t('dragonCommon.viewMore')}}</div>
             </div>
         </template>
         <template v-if="isLiBang">
@@ -93,7 +131,7 @@
                         <div class="libang_title">
                             <div class="libang_box">
                                 <div class="libang_source_left">
-                                    <span class="source-form">出自</span>
+                                    <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>
@@ -114,11 +152,12 @@
                                         {{ 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">查看 ></span>
+                                    <span @click="lookAttach(item.url, item, $event)" class="aci-view">{{$t('dragonCommon.check')}} ></span>
                                 </div>
                             </div>
                         </div>
@@ -138,25 +177,26 @@
                         </div> -->
                     </div>
                 </template>
-                <template v-if="msg.content.type == 0">
+                <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">
-                        <div class="libang_list_cell_left" @click="lookAttach(item.url, item, $event)">
+                        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;
+                                <span class="libang_title_from">{{ item.from }}</span>
                                 <div v-show="docSource[item.source]" class="upload_source">
-                                    {{ docSource[item.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"></i>
+                        <i class="iconfont guoran-right" @click="lookAttach(item.url, item, $event)"></i>
                     </div>
                 </template>
-                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">查看更多</div>
+                <div class="ad-loadmore" v-if="loadMoreFlag" @click="lazyLoadKnowledegList">{{$t('dragonCommon.viewMore')}}</div>
             </div>
         </template>
 
@@ -172,9 +212,10 @@
 /* eslint-disable */
 import previewPdf from "./previewPdf";
 import { isMobile } from "../assets/js/common";
+import markDownText from "./markDownText.vue";
 export default {
     name: "answerDocknowledge",
-    components: { previewPdf },
+    components: { previewPdf, markDownText },
     data () {
         return {
             isPC: true,
@@ -189,15 +230,7 @@ export default {
             //     CORP_LOCAL_FILE: '来源于企业知识库',
             //     FEISHU: '来源于飞书-云文档'
             // },
-            docSource: {
-                LOCAL_FILE: "个人知识",
-                CREATED_BY_ONESELF: "个人知识",
-                WECHAT: "个人知识",
-                AUTO_SYN_FROM_LOCAL_FILE: "个人知识",
-                YUQUE: "企业知识",
-                CORP_LOCAL_FILE: '企业知识',
-                FEISHU: '企业知识'
-            },
+            docSource: {},
             imageObj: {
                 PDF: 'pdf1',
                 pdf: 'pdf1',
@@ -228,7 +261,7 @@ export default {
                 mp4: "video",
                 MP4: "video",
                 xlsx: "excel1",
-                SLSX: "excel1",
+                XLSX: "excel1",
                 xls: "excel1",
                 XLS: "excel1",
                 jpg: "image1",
@@ -261,14 +294,15 @@ export default {
             allKnowledgeList: [],
             loadMoreFlag: false,
             title: '',
-            folderName:'',
-            folderUrl:'',
+            folderName: '',
+            folderUrl: '',
             previewKnowledgeId: "",
             previewKnowledge: {},
-            previewOssPath: ""
+            previewOssPath: "",
+            showImage: false
         }
     },
-    props: ['msg', 'isAskLightning', 'isMessageRecord', "isApp", "isHasChat", "activeKnowledgeId", "isLiBang"],
+    props: ['msg', 'isAskLightning', 'isMessageRecord', "isApp", "isHasChat", "activeKnowledgeId", "isLiBang","isHistory","knowledgeIndex"],
     beforeMounted () {
     },
     watch: {
@@ -288,15 +322,16 @@ export default {
         // }
     },
     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;
-        }
+        // 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';
@@ -306,6 +341,16 @@ export default {
         // });
     },
     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) {
 
@@ -319,89 +364,119 @@ export default {
         }
     },
     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 'https://static.guoranbot.com/cdn-office-website/askbot_doc/wechat.png'
-            } else {
-                return 'https://static.guoranbot.com/cdn-office-website/askbot_doc/' + this.imageObj[element.format] + '.png'
+                return require("../assets/image/filtType/wechat.png")
+            } else if (element.format !== 'url'){
+                return require("../assets/image/filtType/" + this.imageObj[element.format] + '.png')
+
+            } else if (element.format === 'url'){
+              return require("../assets/image/filtType/" + 'html.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;
-            // }
-            this.title = item.from || item.name
-            this.folderName = item.folderName
+            // 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') {
-              httpUrl = httpUrl += '?needEncrypt=true'
-            } else {
-              httpUrl = httpUrl += '?needEncrypt=false'
-            }
-            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;
+                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 {
-                  this.$refs.previewPdf.previewShowPopup = false;
-                  this.$refs.previewPdf.drawer = true;
+                    type = this.fileType(url)
                 }
-                //聊一聊按钮的选中状态
-                if (this.activeKnowledgeId == item.knowledgeId){
-                  this.$refs.previewPdf.previewKnowledgeId = this.activeKnowledgeId
+                if (type === '' || type === 'OTHER' || type == 'IMAGE') {
+                    httpUrl = httpUrl += '?needEncrypt=true'
                 } else {
-                  this.$refs.previewPdf.previewKnowledgeId = ""
-                }
-                this.$refs.previewPdf.fileType = type
-                this.$refs.previewPdf.tagIds = item.tagIds
-                this.$refs.previewPdf.isMessageRecord = this.isMessageRecord ? true : false ;
-                let index = url.indexOf("?");
-                let newFileInOssPath = url;
-                if (index !== -1){
-                  newFileInOssPath =  url.substring(0, url.indexOf("?"))
+                    httpUrl = httpUrl += '?needEncrypt=false'
                 }
-                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.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
                         }
@@ -410,7 +485,7 @@ export default {
                                 this.$refs.previewPdf.getBolb(item)
                             }
                             this.$refs.previewPdf.loadIframe(item)
-                            this.$refs.previewPdf.showSummary = true;
+                            this.$refs.previewPdf.showSummary = false;
                         })
                     }
                 })
@@ -428,6 +503,8 @@ export default {
                 return 'VIDEO'
             } else if (fileType === '.html') {
                 return 'HTML'
+            } else if (fileType === '.png' || fileType === '.jpg' || fileType === '.jpeg') {
+                return 'IMAGE'
             } else {
                 return 'OTHER'
             }
@@ -488,13 +565,13 @@ export default {
         recommendQues (item, knowledgeId) {
             this.$emit('recommendQues', item, knowledgeId)
         },
-        clickFloder(item) {
+        clickFloder (item) {
             this.$emit('clickFloder', item)
         },
-        previewClickFloder() {
+        previewClickFloder () {
             let item = null
             this.msg.content.list.forEach(element => {
-                if(element.knowledgeId == this.previewKnowledgeId) {
+                if (element.knowledgeId == this.previewKnowledgeId) {
                     item = element
                 }
             });
@@ -505,6 +582,8 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import "../assets/less/variables.less";
+
 .answer-docknowledge {
     min-width: 100px;
     background: #ffffff;
@@ -513,11 +592,11 @@ export default {
         .tips {
             width: 154px;
             height: 22px;
-            background: #366aff;
+            background: @primary-color;
             border-radius: 5px;
             text-align: center;
             line-height: 22px;
-            color: #fff;
+            color: @font-primary-light-color;
             font-size: 12px;
             margin-bottom: 7px;
         }
@@ -532,7 +611,7 @@ export default {
                 // font-size: 13px;
                 display: inline-block;
                 // margin-left: 5px;
-                color: #366aff;
+                color: @font-primary-accent-color;
                 cursor: pointer;
             }
         }
@@ -548,8 +627,59 @@ export default {
             }
         }
 
-        .answer-kn-image-box {
+        // .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 @border-color-r4;
+                color: @font-primary-accent-color;
+                flex: none;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 22px;
+            }
+            .img-placeholder:hover {
+                border: 1px dashed @border-color-primary;
+            }
+        }
+        .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;
+            }
         }
     }
 
@@ -568,7 +698,7 @@ export default {
 
     .ad-list {
         .ad-list-cell {
-            border-top: solid 1px #eeeeee;
+            border-top: solid 1px @border-color-r3;
             padding: 10px 0 10px;
 
             .alc-title {
@@ -592,7 +722,7 @@ export default {
                         .source-form {
                             width: 34px;
                             flex: none;
-                            color: #a9b3c6;
+                            color: @font-primary-color-r4;
                         }
                     }
 
@@ -601,7 +731,7 @@ export default {
                         flex: none;
 
                         .aci-view {
-                            color: #366aff;
+                            color: @font-primary-accent-color;
                             cursor: pointer;
                         }
                     }
@@ -614,6 +744,9 @@ export default {
                         display: flex;
                         justify-content: flex-start;
                     }
+                    .upload-source {
+                        // flex: none;
+                    }
                 }
 
                 .alc-box-introduction {
@@ -623,7 +756,7 @@ export default {
                     -webkit-line-clamp: 3;
                     -webkit-box-orient: vertical;
                     margin-top: 10px;
-                    color: #616161;
+                    color: @font-secondary-color;
                     // font-size: 12px;
                     line-height: 24px;
                     text-align: left;
@@ -638,24 +771,25 @@ export default {
 
                 .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;
-                  }
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 3;
+                    -webkit-box-orient: vertical;
+                    margin-top: 10px;
+                    color: @font-secondary-color;
+                    // font-size: 12px;
+                    line-height: 24px;
+                    text-align: left;
+
+                    img {
+                        max-width: 300px;
+                        width: 100%;
+                        max-height: 150px;
+                        margin: 10px;
+                        cursor: pointer;
+                    }
                 }
 
                 .alc-updateTime {
@@ -670,8 +804,8 @@ export default {
                         flex: none;
                         height: 18px;
                         line-height: 18px;
-                        background: #e9f9f8;
-                        border: 1px solid #aff2cd;
+                        background: @background-color-alc;
+                        border: 1px solid @border-color-alc;
                         border-radius: 2px;
                         display: flex;
                         align-items: center;
@@ -681,12 +815,12 @@ export default {
                     }
 
                     .time {
-                        color: #999999;
+                        color: @font-primary-color-r1;
                         margin-left: 10px;
                     }
 
                     .alc-content-text {
-                        color: #366aff;
+                        color: @font-primary-accent-color;
                         cursor: pointer;
                     }
                 }
@@ -700,7 +834,7 @@ export default {
 
                 .alc-title-updateTime {
                     text-align: right;
-                    color: #999999;
+                    color: @font-primary-color-r1;
                     // font-size: 13px;
                 }
             }
@@ -710,7 +844,7 @@ export default {
                     margin-top: 6px;
                     display: block;
                     text-align: right;
-                    color: #999999;
+                    color: @font-primary-color-r1;
                     // font-size: 13px;
                 }
 
@@ -722,7 +856,7 @@ export default {
                     .aci-view {
                         display: inline-block;
                         margin-left: 30px;
-                        color: #366aff;
+                        color: @font-primary-accent-color;
                         cursor: pointer;
                     }
                 }
@@ -735,7 +869,7 @@ export default {
                     .alcc-box {
                         display: flex;
                         flex-wrap: wrap;
-                        color: #999999;
+                        color: @font-primary-color-r1;
 
                         .aci-owner {
                             margin-right: 20px;
@@ -750,12 +884,15 @@ export default {
         }
 
         .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;
+                background: @background-color-alc-source;
                 border-radius: 5px;
                 display: flex;
                 align-items: center;
@@ -779,6 +916,7 @@ export default {
 
                 .upload-source {
                     margin-right: 5px;
+                    flex: none;
                 }
 
                 i {
@@ -794,7 +932,7 @@ export default {
             align-items: center;
             justify-content: center;
             // background: #FFFFFF;
-            color: #366aff;
+            color: @font-primary-accent-color;
             font-size: 14px;
             margin-top: 8px;
             cursor: pointer;
@@ -803,9 +941,9 @@ export default {
 
     .libang_list {
         .libang_list_cell {
-            border-top: solid 1px #eeeeee;
+            border-top: solid 1px @border-color-r3;
             padding: 10px 0 10px;
-
+            font-size: 12px;
             .libang_title {
                 display: flex;
                 flex-wrap: wrap;
@@ -827,7 +965,7 @@ export default {
                         .source-form {
                             width: 34px;
                             flex: none;
-                            color: #a9b3c6;
+                            color: @font-primary-color-r4;
                         }
                     }
 
@@ -836,7 +974,7 @@ export default {
                         flex: none;
 
                         .aci-view {
-                            color: #366aff;
+                            color: @font-primary-accent-color;
                             cursor: pointer;
                         }
                     }
@@ -858,7 +996,7 @@ export default {
                     -webkit-line-clamp: 3;
                     -webkit-box-orient: vertical;
                     margin-top: 10px;
-                    color: #616161;
+                    color: @font-secondary-color;
                     // font-size: 12px;
                     line-height: 24px;
                     text-align: left;
@@ -878,7 +1016,7 @@ export default {
                     -webkit-line-clamp: 3;
                     -webkit-box-orient: vertical;
                     margin-top: 10px;
-                    color: #616161;
+                    color: @font-secondary-color;
                     // font-size: 12px;
                     line-height: 24px;
                     text-align: left;
@@ -914,24 +1052,28 @@ export default {
                             align-items: center;
                             justify-content: center;
                             padding: 0 8px;
-                            color: #00c2bb;
+                            color: @font-alc-color;
                         }
                         .libang_floder {
                             width:calc(100% - 90px);
-                            margin-left: 10px;
+                            // margin-left: 10px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             white-space: nowrap;
-                            color: #366aff;
+                            color: @font-primary-accent-color;
                             cursor: pointer;
+                            text-align: left;
+                            i {
+                                margin-left: 8px;
+                            }
                         }
                     }
                     .libang_content_text {
-                        color: #366aff;
+                        color: @font-primary-accent-color;
                         cursor: pointer;
                     }
                     .time {
-                        color: #999999;
+                        color: @font-primary-color-r1;
                         margin-left: 10px;
                     }
                 }
@@ -944,7 +1086,7 @@ export default {
 
                 .alc-title-updateTime {
                     text-align: right;
-                    color: #999999;
+                    color: @font-primary-color-r1;
                     // font-size: 13px;
                 }
             }
@@ -954,7 +1096,7 @@ export default {
                     margin-top: 6px;
                     display: block;
                     text-align: right;
-                    color: #999999;
+                    color: @font-primary-color-r1;
                     // font-size: 13px;
                 }
 
@@ -966,7 +1108,7 @@ export default {
                     .aci-view {
                         display: inline-block;
                         margin-left: 30px;
-                        color: #366aff;
+                        color: @font-primary-accent-color;
                         cursor: pointer;
                     }
                 }
@@ -979,7 +1121,7 @@ export default {
                     .alcc-box {
                         display: flex;
                         flex-wrap: wrap;
-                        color: #999999;
+                        color: @font-primary-color-r1;
 
                         .aci-owner {
                             margin-right: 20px;
@@ -994,7 +1136,7 @@ export default {
         }
 
         .libang_list_cell_recognition {
-            background: #f2f6ff;
+            background: @background-color-alc-source;
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -1003,7 +1145,7 @@ export default {
             margin-bottom: 5px;
             border-radius: 5px;
             cursor: pointer;
-            font-size: 14px;
+            font-size: 12px;
 
             .libang_list_cell_left {
                 margin-right: 5px;
@@ -1026,16 +1168,22 @@ export default {
                         white-space: nowrap;
                         line-height: 20px;
                     }
+                    .upload_source {
+                        flex: none;
+                    }
                 }
                 .libang_source_floder {
                     max-width: calc(226px - 24px);
-                    margin-left: 24px;
                     text-align: left;
-                    color: #366aff;
+                    color: @font-primary-accent-color;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     cursor: pointer;
+                    .iconfont {
+                        margin: 0 5px;
+                        font-size: 14px
+                    }
                 }
             }
             i {
@@ -1050,7 +1198,7 @@ export default {
             align-items: center;
             justify-content: center;
             // background: #FFFFFF;
-            color: #366aff;
+            color: @font-primary-accent-color;
             font-size: 14px;
             margin-top: 8px;
             cursor: pointer;