智能问答页面画写完成

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^0.19.0",
         "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
         "dayjs": "^1.10.7",
+        "dompurify": "^3.2.6",
         "echarts": "^5.6.0",
         "echarts-gl": "^2.0.9",
         "element-theme": "^2.0.1",
@@ -2298,6 +2299,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
     "node_modules/@types/webpack-dev-server": {
       "version": "4.7.2",
       "resolved": "https://registry.npmmirror.com/@types/webpack-dev-server/-/webpack-dev-server-4.7.2.tgz",
@@ -6793,6 +6800,14 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domready": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/domready/-/domready-1.0.8.tgz",
@@ -23478,6 +23493,12 @@
         "@types/node": "*"
       }
     },
+    "@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
     "@types/webpack-dev-server": {
       "version": "4.7.2",
       "resolved": "https://registry.npmmirror.com/@types/webpack-dev-server/-/webpack-dev-server-4.7.2.tgz",
@@ -26930,6 +26951,14 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "requires": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "domready": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/domready/-/domready-1.0.8.tgz",

package.json

@@ -19,6 +19,7 @@
     "axios": "^0.19.0",
     "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
     "dayjs": "^1.10.7",
+    "dompurify": "^3.2.6",
     "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
     "element-theme": "^2.0.1",

src/views/modules/agent/dialog.vue

@@ -1,167 +1,449 @@
 <template>
     <div class="page">
-        <div class="box">
-            <div class="title">{{helloWord}}</div>
-            <div class="tip">{{helloTip}}</div>
-            <div class="ask">
-                <div class="question">
-                    <el-input type="textarea" :rows="2" v-model="question" placeholder="有什么问题，您可以对我提问！" resize="none"></el-input>
-                </div>
-                <div class="btns">
-                    <div class="left">
-                        <div class="copy">
-                            <img src="@/assets/images/agent/link.png">
+        <div class="box adffcacjc" v-if="dialogList.length===0">
+            <img src="@/assets/images/agent/dialog_logo2.gif">
+            <div class="title">Hi，我是AI团队教练助手～</div>
+            <div class="tip">任何关于团队、分析报告、教练的问题，你都可以向我提问，可以为你提供全方位多角度的PREILL团队分析，我正在快速学习和进化中，有新功能时，我一定第一时间告诉你～ </div>
+            <div class="items">
+                <template v-if="!idx">
+                    <div class="item" :class="{'active':idx===1}" @click="handleChange(1)">
+                        <div class="i_top adfac">
+                            <img src="@/assets/images/agent/dialog_zndh.png">
+                            <span>智能对话</span>
+                        </div> 
+                        <p>解答关于团队、分析报告、教练的问题</p>
+                    </div>
+                    <div class="item" :class="{'active':idx===2}" @click="handleChange(2)">
+                        <div class="i_top adfac">
+                            <img src="@/assets/images/agent/dialog_bgfx.png">
+                            <span>报告分析</span>
+                        </div> 
+                        <p>智能解读报告，快速找到关键信息，提出教练重点</p>
+                    </div>
+                    <div class="item" :class="{'active':idx===3}" @click="handleChange(3)">
+                        <div class="i_top adfac">
+                            <img src="@/assets/images/agent/dialog_wdwd.png">
+                            <span>文档问答</span>
+                        </div> 
+                        <p>提供全方位多角度的PREILL团队分析</p>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div class="dialog" v-else>
+            <div class="list">
+                <div class="l_item" v-for="(item,index) in dialogList" :key="index">
+                    <div class="li_pre my adfac" v-if="item.type===1">
+                        <div class="text">{{ item.question }}</div>
+                        <img class="img" src="@/assets/images/agent/dialog_avatar.png">
+                    </div>
+                    <div class="li_pre ai" v-else-if="item.type===2">
+                        <div class="adfac">
+                            <img class="img" src="@/assets/images/agent/dialog_logo.png">
+                            <!-- <div class="text" v-if="item.answer">{{ item.answer }}</div> -->
+                            <div class="text" v-if="item.answer" v-html="sanitizeHtml(item.answer)"></div>
+                            <div class="text" v-else>
+                                <img src="@/assets/images/agent/dialog_loading.gif">
+                                <span>正在思考中</span>
+                            </div>
+                        </div>
+                        <div class="icons adfac" v-if="item.answer">
+                            <img :src="isSx?require('@/assets/images/agent/dialog_sx2.png'):require('@/assets/images/agent/dialog_sx1.png')" @click="handleSx" class="f">
+                            <img :src="isFz?require('@/assets/images/agent/dialog_fz2.png'):require('@/assets/images/agent/dialog_fz1.png')" @click="handleFz">
+                            <img :src="isDz?require('@/assets/images/agent/dialog_dz2.png'):require('@/assets/images/agent/dialog_dz1.png')" @click="handleDz">
+                            <img :src="isPl?require('@/assets/images/agent/dialog_pl2.png'):require('@/assets/images/agent/dialog_pl1.png')" @click="handlePl">
+                        </div>
+                    </div>
+                    <div class="li_pre ai adfac" v-else-if="item.type===3">
+                        <img class="img" src="@/assets/images/agent/dialog_logo.png">
+                        <div class="text">
+                            <div class="title">报告分析</div>
+                            <div class="tip">智能解读报告，快速找到关键信息，提出教练重点</div>
+                            <div class="upload adfac">
+                                <img src="@/assets/images/agent/upload.png">
+                                <div class="span">上传报告</div>
+                            </div>
                         </div>
-                        <div class="think" :class="{'active':deepThink}" @click="toDeepThink">
-                            <img src="@/assets/images/agent/think.png">
-                            <span>深度思考</span>
+                    </div>
+                    <div class="li_pre ai adfac" v-else-if="item.type===4">
+                        <img class="img" src="@/assets/images/agent/dialog_logo.png">
+                        <div class="text">
+                            <div class="title">文档问答</div>
+                            <div class="tip">提供全方位多角度的PREILL团队分析</div>
+                            <div class="upload adfac">
+                                <img src="@/assets/images/agent/upload.png">
+                                <div class="span">上传文档</div>
+                            </div>
                         </div>
                     </div>
-                    <div class="right">
-                        <img src="@/assets/images/agent/photo.png">
-                        <img src="@/assets/images/agent/upload.png">
-                        <img src="@/assets/images/agent/input_hou.png" v-if="question" @click="handleQuestion">
-                        <img src="@/assets/images/agent/input_qian.png" v-else>
+                </div>
+            </div>
+        </div>
+        <div class="ask">
+            <div class="a_top">
+                <el-input type="textarea" :rows="3" :placeholder="placeholder" v-model="question" resize="none" @keyup.enter.native="handleQuestion"></el-input>
+            </div>
+            <div class="a_bottom adfacjb">
+                <div class="ab_l adfac">
+                    <div class="abl_pre adfac" :class="{'active':isChzq}" @click="isChzq=!isChzq">
+                        <img src="@/assets/images/agent/think.png" v-if="!isChzq">
+                        <img src="@/assets/images/agent/think2.png" v-else>
+                        <span>创衡增强</span>
+                    </div>
+                    <div class="abl_pre adfac" :class="{'active':isLwss}" @click="isLwss=!isLwss">
+                        <img src="@/assets/images/agent/intenet.png" v-if="!isLwss">
+                        <img src="@/assets/images/agent/intenet2.png" v-else>
+                        <span>联网搜索</span>
+                    </div>
+                    <div class="abl_pre adfac" :class="{'active':isScwd}" @click="isScwd=!isScwd">
+                        <img src="@/assets/images/agent/upload.png" v-if="!isScwd">
+                        <img src="@/assets/images/agent/upload2.png" v-else>
+                        <span>上传文档</span>
                     </div>
                 </div>
+                <div class="ab_r">
+                    <img src="@/assets/images/agent/input_hou.png" v-if="question" @click="handleQuestion" style="cursor: pointer;">
+                    <img src="@/assets/images/agent/input_qian.png" v-else style="cursor: not-allowed;">
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup name="">
-    import { getContractList } from '@/api/agent/index.js'
+    import DOMPurify from 'dompurify';
     import { ref, getCurrentInstance } from 'vue'
     const { proxy } = getCurrentInstance();
     
-    const helloWord = ref('Hi～，我是PERILL Coach')
-    const helloTip = ref('可以为你提供PERILL模型，个人教练、团队教练相关的理论、案例、分析报告等知识的查询和解答')
+    const idx = ref('')
+    const placeholder = ref('有什么问题，可以向我提问！')
     const question = ref('')
-    const deepThink = ref(false)
+    const isChzq = ref(false)
+    const isLwss = ref(false)
+    const isScwd = ref(false)
+    const isSx = ref(false)
+    const isFz = ref(false)
+    const isDz = ref(false)
+    const isPl = ref(false)
+    const dialogList = ref([])
 
-    const toDeepThink = () => {
-        deepThink.value = !deepThink.value
+    const handleChange = (val) => {
+        idx.value = val;
+        dialogList.value = []
+        if(val===1) placeholder.value = '有什么问题，可以向我提问！';
+        else if(val===2){
+            placeholder.value = '上传报告并输入问题提问';
+            let obj = {type:3}
+            dialogList.value.unshift(obj)
+        } 
+        else if(val===3){
+            placeholder.value = '上传文件并输入问题提问';
+            let obj = {type:4}
+            dialogList.value.unshift(obj)
+        } 
     }
 
     const handleQuestion = () => {
-        getContractList(question.value).then(res=>{
-            console.log(res,'res')
-        })
+        if(question.value.trim()=='') return proxy.$message.warning('请输入问题');
+        let obj1 = {
+            question: question.value.trim(),
+            type: 1
+        }
+        dialogList.value = [...dialogList.value,obj1]
+        question.value = '';
+        let obj2 = {
+            answer: '',
+            type: 2
+        }
+        dialogList.value = [...dialogList.value,obj2]
+        setTimeout(() => {
+            dialogList.value[dialogList.value.length-1].answer = `你好哇，很高兴认识你，我是<b>AI团队教练助手～</b>有什么问题可以问我哦～`;
+        },3000)
+    }
 
-        proxy.$router.push({
-            path: '/agentDialogResult',
-            query: {
-                question: question.value,
-                deepThink: deepThink.value
-            }
-        })
+    const sanitizeHtml = (html) => {
+      if (!html) return '';
+      return DOMPurify.sanitize(html);
+    }
+
+    const handleSx = () => {
+        isSx.value = !isSx.value;
+    }
+    const handleFz = () => {
+        isFz.value = !isFz.value;
+    }
+    const handleDz = () => {
+        isDz.value = !isDz.value;
+    }
+    const handlePl = () => {
+        isPl.value = !isPl.value;
     }
 </script>
 
 <style scoped lang="scss">
-    ::v-deep .el-textarea__inner{
-        background: #FFFFFF;
-        border-radius: 10px !important;
+    ::v-deep .el-textarea textarea{
         border: none !important;
         padding: 0 !important;
     }
 
     .page{
         width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        padding: 40px 290px;
+        box-sizing: border-box;
+
         .box{
+            width: 100%;
+            height: calc(100vh - 228px);
+            &>img{
+                width: 99px;
+                height: 94px;
+            }
             .title{
-                font-family: DingTalk, DingTalk;
-                font-weight: normal;
+                font-family: PingFang-SC, PingFang-SC;
+                font-weight: bold;
                 font-size: 24px;
-                color: #111111;
-                line-height: 29px;
+                color: #252525;
+                line-height: 33px;
+                text-align: center;
+                margin-top: 30px;
             }
             .tip{
+                max-width: 647px;
                 font-family: PingFangSC, PingFang SC;
                 font-weight: 400;
                 font-size: 14px;
-                color: #9CA3AF;
+                color: #646464;
                 line-height: 20px;
-                margin-top: 11px;
+                text-align: center;
+                margin-top: 16px;
             }
+            .items{
+                width: 700px;
+                min-height: 124px;
+                margin-top: 40px;
+                display: flex;
+                justify-content: space-between;
+                .item{
+                    width: calc(100% / 3 - 13px);
+                    padding: 17px 16px;
+                    box-sizing: border-box;
+                    background: #FFFFFF;
+                    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.04);
+                    border-radius: 10px;
+                    cursor: pointer;
+                    &.active,&:hover{
+                        border: 1px solid #833478;
+                        padding: 16px 15px;
+                    }
+                    .i_top{
+                        img{
+                            width: 32px;
+                            height: 32px;
+                        }
+                        span{
+                            font-family: PingFang-SC, PingFang-SC;
+                            font-weight: bold;
+                            font-size: 16px;
+                            color: #252525;
+                            line-height: 22px;
+                            margin-left: 12px;
+                        }
+                    }
+                    p{
+                        font-family: PingFangSC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #999999;
+                        line-height: 20px;
+                        margin-top: 18px;
+                    }
+                }
+            }
+        }
 
-            .ask{
-                width: 980px;
-                height: 148px;
-                background: #FFFFFF;
-                border-radius: 10px;
-                border: 1px solid #E5E7EB;
-                padding: 20px;
-                box-sizing: border-box;
-                margin-top: 80px;
-                position: relative;
-                .btns{
-                    width: 940px;
-                    position: absolute;
-                    left: 20px;
-                    bottom: 20px;
-                    display: flex;
-                    justify-content: space-between;
-                    .left{
-                        display: flex;
-                        .copy{
-                            width: 36px;
-                            height: 36px;
+        .dialog{
+            width: 100%;
+            height: calc(100vh - 228px);
+            padding: 24px 0;
+            position: relative;
+            .list{
+                .l_item{
+                    margin-top: 36px;
+                    &:first-child{
+                        margin-top: 0;
+                    }
+                    .li_pre{
+                        .text{
+                            max-width: calc(100% - 60px);
+                            padding: 14px 16px;
+                            box-sizing: border-box;
+                            border-radius: 8px;
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                            line-height: 20px;
+                            .title{
+                                font-family: PingFang-SC, PingFang-SC;
+                                font-weight: bold;
+                                font-size: 16px;
+                                color: #393939;
+                                line-height: 16px;
+                            }
+                            .tip{
+                                font-family: PingFangSC, PingFang SC;
+                                font-weight: 400;
+                                font-size: 14px;
+                                color: #999999;
+                                line-height: 14px;
+                                margin-top: 16px;
+                            }
+                            .upload{
+                                width: 112px;
+                                background: #FFFFFF;
+                                border-radius: 18px;
+                                border: 1px solid #E5E7EB;
+                                margin-top: 24px;
+                                padding: 8px 12px;
+                                box-sizing: border-box;
+                                cursor: pointer;
+                                img{
+                                    width: 14px;
+                                    height: 14px;
+                                    margin: 0;
+                                }
+                                .span{
+                                    font-family: PingFangSC, PingFang SC;
+                                    font-weight: 400;
+                                    font-size: 14px;
+                                    color: #252525;
+                                    line-height: 20px;
+                                    margin-left: 11px;
+                                }
+                            }
+                        }
+                        .icons{
+                            width: 216px;
+                            margin-top: 16px;
+                            margin-left: 60px;
+                            padding: 10px 20px 10px 0;
                             background: #FFFFFF;
-                            border-radius: 6px;
-                            border: 1px solid #E5E7EB;
-                            cursor: pointer;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
+                            border-radius: 8px;
+                            border: 1px solid #EFEFEF;
                             img{
-                                width: 14px;
-                                height: 16px;
+                                width: 24px;
+                                height: 24px;
+                                margin: 0;
+                                margin-left: 20px;
+                                cursor: pointer;
+                                &.f{
+                                    width: 44px;
+                                    padding-right: 20px;
+                                    border-right: 1px solid #E5E7EB;
+                                }
+                            }
+                            .line{
+                                width: 1px;
+                                height: 20px;
+                                background: #E5E7EB;
                             }
                         }
-                        .think{
-                            width: 96px;
+                        .img{
+                            width: 36px;
                             height: 36px;
-                            background: #FFFFFF;
-                            border-radius: 6px;
-                            border: 1px solid #E5E7EB;
-                            margin-left: 8px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            cursor: pointer;
-                            img{
-                                width: 14px;
-                                height: 14px;
+                        }
+                        &.my{
+                            justify-content: flex-end;
+                            .text{
+                                border: 1px solid #833478;
+                                background: #833478;
+                                color: #FFFFFF;
                             }
-                            span{
-                                font-family: PingFangSC, PingFang SC;
-                                font-weight: 400;
-                                font-size: 14px;
-                                color: #111111;
-                                line-height: 20px;
-                                margin-left: 3px;
+                            .img{
+                                margin-left: 24px;
                             }
-                            &.active{
-                                border: 1px solid #70b2df;
+                        }
+                        &.ai{
+                            .text{
+                                border: 1px solid #EFEFEF;
+                                background: #FFFFFF;
+                                color: #393939;
+                                &>img{
+                                    width: 18px;
+                                    height: 18px;
+                                }
                                 span{
-                                    color: #70b2df;
+                                    font-family: PingFang-SC, PingFang-SC;
+                                    font-weight: bold;
+                                    font-size: 14px;
+                                    color: #393939;
+                                    line-height: 20px;
+                                    margin-left: 10px;
                                 }
                             }
+                            .img{
+                                width: 42px;
+                                margin-right: 18px;
+                            }
                         }
                     }
-                    .right{
-                        display: flex;
+                }
+            }
+        }
+
+        .ask{
+            width: 100%;
+            height: 148px;
+            background: #FFFFFF;
+            box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.04);
+            border-radius: 16px;
+            padding: 20px 24px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            .a_top{
+                flex: 1;
+                padding-bottom: 10px;
+            }
+
+            .a_bottom{
+                .ab_l{
+                    .abl_pre{
+                        background: #FFFFFF;
+                        border-radius: 18px;
+                        border: 1px solid #E0E0E0;
+                        padding: 10px 13px;
+                        margin-left: 16px;
+                        cursor: pointer;
+                        &:first-child{
+                            margin-left: 0;
+                        }
                         img{
-                            width: 30px;
-                            height: 30px;
-                            margin-left: 33px;
-                            cursor: pointer;
+                            width: 16px;
+                            height: 16px;
                         }
+                        span{
+                            font-family: PingFangSC, PingFang SC;
+                            font-weight: 400;
+                            font-size: 15px;
+                            color: #393939;
+                            line-height: 15px;
+                            margin-left: 7px;
+                        }
+                        &.active{
+                            background: rgba(118,30,106,0.06);
+                            span{
+                                color: #761E6A;
+                            }
+                        }
+                    }
+                }
+                .ab_r{
+                    img{
+                        width: 32px;
+                        height: 32px;
+                        border-radius: 7px;
                     }
                 }
             }

yarn.lock

@@ -1315,6 +1315,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/trusted-types@^2.0.7":
+  "integrity" "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+  "resolved" "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz"
+  "version" "2.0.7"
+
 "@types/webpack-dev-server@^4.1.0":
   "integrity" "sha512-Y3p0Fmfvp0MHBDoCzo+xFJaWTw0/z37mWIo6P15j+OtmUDLvznJWdZNeD7Q004R+MpQlys12oXbXsrXRmxwg4Q=="
   "resolved" "https://registry.npmmirror.com/@types/webpack-dev-server/-/webpack-dev-server-4.7.2.tgz"
@@ -4100,6 +4105,13 @@
   dependencies:
     "domelementtype" "^2.2.0"
 
+"dompurify@^3.2.6":
+  "integrity" "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ=="
+  "resolved" "https://registry.npmmirror.com/dompurify/-/dompurify-3.2.6.tgz"
+  "version" "3.2.6"
+  optionalDependencies:
+    "@types/trusted-types" "^2.0.7"
+
 "domready@1.0.8":
   "integrity" "sha512-uIzsOJUNk+AdGE9a6VDeessoMCzF8RrZvJCX/W8QtyfgdR6Uofn/MvRonih3OtCO79b2VDzDOymuiABrQ4z3XA=="
   "resolved" "https://registry.npmmirror.com/domready/-/domready-1.0.8.tgz"