askbot-dragon 1.7.38-beta → 1.7.41-beta

package/src/components/AiGuide.vue

@@ -1,439 +1,472 @@
-<template>
-    <div id="ai-guide" class="ai-guide" :class="{
-        phoneClass: isPhone,
-        companyClass: isPC,
-    }">
-        <div class="ig-view-cli">
-            <!-- 描述 -->
-            <div v-show="aiGuide.content.descriptionVisible && aiGuide.content.description !== ''" class="ig-types-des">
-                <span v-html="aiGuide.content.description"></span>
-            </div>
-            <!-- 一级分类 -->
-            <div v-show="aiGuide.content.typesVisible && aiGuide.content.options && aiGuide.content.options.length > 0"
-                class="ig-types-f">
-                <span v-for="(fType, fTypeIndex) in aiGuide.content.options" :key="`f_${fTypeIndex}`"
-                    @click="changeFirstType(fTypeIndex)" :class="[
-                        'ig-types-f-cell',
-                        activeFirstTypeIndex === fTypeIndex
-                            ? 'ig-types-f-cell-active'
-                            : '',
-                    ]">{{ fType.name }}</span>
-            </div>
-            <!-- 二级分类 -->
-            <div v-if="aiGuide.content.typesVisible && aiGuide.content.options[activeFirstTypeIndex] && aiGuide.content.options[activeFirstTypeIndex].types && aiGuide.content.options[activeFirstTypeIndex].types.length !== 0"
-                class="ig-types-s">
-                <span v-for="(sType, sTypeIndex) in aiGuide.content.options[
-                    activeFirstTypeIndex
-                ].types" :key="`s_${sTypeIndex}`" @click="changeLastType(sTypeIndex)" :class="[
-    'ig-types-s-cell',
-    activeSecondTypeIndex === sTypeIndex
-        ? 'ig-types-s-cell-active'
-        : '',
-]">{{ sType.name }}</span>
-            </div>
-            <!-- 横向排版 -->
-            <div v-show="activeOtherObj.recommendType == 0 &&
-                aiGuide.content.typesetting === 'horizontal'
-                " class="ig-types-tags">
-                <span v-for="(
-                        intentCell, intentCellIndex
-                    ) in recommendIntentPageList(activeOtherObj)" @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                        " :key="`i_${intentCellIndex}`" class="ig-types-tags-cell">{{ intentCell.questionName }}</span>
-            </div>
-            <!-- 竖向排版 -->
-            <div v-show="activeOtherObj.recommendType == 0 &&
-                aiGuide.content.typesetting === 'vertical'
-                " class="ig-types-list">
-                <span v-for="(
-                        intentCell, intentCellIndex
-                    ) in recommendIntentPageList(activeOtherObj)" @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                        " :key="`i_${intentCellIndex}`" class="ig-types-list-cell">
-                    <span>{{ intentCell.questionName }}</span>
-                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                            xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12">
-                            <path
-                                d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z"
-                                p-id="96726" fill="#366aff"></path>
-                        </svg></span></span>
-            </div>
-            <!-- 横向排版 -->
-            <div v-show="activeOtherObj.recommendType == 1 &&
-                aiGuide.content.typesetting === 'horizontal'
-                " class="ig-types-tags">
-                <span v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`" @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                        " class="ig-types-tags-cell">{{ intentCell.exampleQuestion }}</span>
-            </div>
-            <!-- 竖向排版 -->
-            <div v-show="activeOtherObj.recommendType == 1 &&
-                aiGuide.content.typesetting === 'vertical'
-                " class="ig-types-list">
-                <span v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`" @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                        " class="ig-types-list-cell">
-                    <span>{{ intentCell.exampleQuestion }}</span>
-                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                            xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12">
-                            <path
-                                d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z"
-                                p-id="96726" fill="#366aff"></path>
-                        </svg></span></span>
-            </div>
-            <!-- 横向排版 -->
-            <div v-show="activeOtherObj.recommendType == 2 &&
-                aiGuide.content.typesetting === 'horizontal'
-                " class="ig-types-tags">
-                <span v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`" @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                        " class="ig-types-tags-cell">{{ intentCell.exampleQuestion }}</span>
-            </div>
-            <!-- 竖向排版 -->
-            <div v-show="activeOtherObj.recommendType == 2 &&
-                aiGuide.content.typesetting === 'vertical'
-                " class="ig-types-list">
-                <span v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
-                    :key="`i_${intentCellIndex}`" @click="
-                        sendAiGuideInfo(
-                            activeOtherObj.recommendType,
-                            intentCell
-                        )
-                        " class="ig-types-list-cell">
-                    <span>{{ intentCell.exampleQuestion }}</span>
-                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                            xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12">
-                            <path
-                                d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z"
-                                p-id="96726" fill="#366aff"></path>
-                        </svg></span></span>
-            </div>
-            <div v-if="aiGuide.content.groupVisible && totalPage > 1" class="ig-change-list">
-                <span @click="changeIntellectGuide" class="ig-change-list-btn">
-                    <svg t="1720148246364" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                        xmlns="http://www.w3.org/2000/svg" p-id="136175" width="16" height="16">
-                        <path
-                            d="M225.6 540.8C240 686.4 363.2 800 512 800c76.8 0 150.4-30.4 203.2-84.8 12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8c-64 65.6-153.6 104-248 104-184 0-336-142.4-350.4-323.2l-43.2 41.6c-12.8 12.8-33.6 11.2-44.8 0s-11.2-33.6 0-44.8l99.2-96c12.8-12.8 33.6-11.2 44.8 0l92.8 96c12.8 12.8 11.2 33.6-1.6 44.8-12.8 12.8-33.6 11.2-44.8-1.6l-38.4-40zM800 497.6C792 345.6 665.6 224 512 224c-76.8 0-148.8 30.4-203.2 83.2-12.8 12.8-33.6 12.8-44.8 0-12.8-12.8-12.8-33.6 0-44.8 65.6-64 153.6-102.4 248-102.4 192 0 347.2 153.6 352 342.4l41.6-40c12.8-12.8 33.6-11.2 44.8 1.6 12.8 12.8 11.2 33.6-1.6 44.8l-94.4 89.6c-12.8 11.2-32 11.2-44.8 0l-97.6-96c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l43.2 40z"
-                            p-id="136176" fill="#366aff"></path>
-                    </svg>
-                    换一批</span>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: "aiGuide",
-    data () {
-        return {
-            isPhone: false,
-            isPC: false,
-
-            activeFirstTypeIndex: 0,
-            activeSecondTypeIndex: 0,
-            activeOtherObj: {
-                name: "",
-                recommendType: 0, // 0 关联意图 1 高频推荐意图 2 智能推荐
-                recommendIntentList: [], // recommendType = 0
-                highFrequency: {
-                    // recommendType = 1
-                    rang: [], // 推荐范围
-                    number: 20, // 最多推荐问题数
-                    question: [],
-                },
-                intelligenceRecommend: {
-                    // recommendType = 2
-                    recommendStrategy: [0, 1], // 0 根据与当前用户咨询过相同意图的用户所问的意图进行推荐 1 根据当前用户部门的其他用户咨询过的意图进行推荐
-                    rang: [], // 推荐范围
-                    number: 20, // 最多推荐问题数
-                    question: [],
-                },
-            },
-            activePage: 1,
-            totalPage: 1,
-        };
-    },
-    props: {
-        aiGuide: Object,
-        language: {
-            type: String,
-            default: "cn"
-        }
-    },
-    beforeMount () { },
-    mounted () {
-        this.isMobile();
-        if (this.aiGuide.content.options[0] && this.aiGuide.content.options[0] && this.aiGuide.content.options[0].types && this.aiGuide.content.options[0].types.length === 0) {
-            this.activeOtherObj = this.aiGuide.content.options[0];
-        } else {
-            this.activeSecondTypeIndex = 0;
-            this.activeOtherObj = this.aiGuide.content.options[0] && this.aiGuide.content.options[0].types && this.aiGuide.content.options[0].types[0] ? this.aiGuide.content.options[0].types[0] : [];
-        }
-    },
-    methods: {
-        isMobile () {
-            let flag = navigator.userAgent.match(
-                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-            );
-            if (flag) {
-                this.isPhone = true;
-            } else {
-                this.isPC = true;
-            }
-        },
-        changeIntellectGuide () {
-            if (this.activePage === this.totalPage) {
-                this.activePage = 1;
-            } else {
-                this.activePage++;
-            }
-        },
-        changeFirstType (fTypeIndex) {
-            this.activeFirstTypeIndex = fTypeIndex;
-            if (this.aiGuide.content.options[fTypeIndex].types.length === 0) {
-                this.activeOtherObj = this.aiGuide.content.options[fTypeIndex];
-            } else {
-                this.activeSecondTypeIndex = 0;
-                this.activeOtherObj =
-                    this.aiGuide.content.options[fTypeIndex].types[0];
-            }
-            this.activePage = 1;
-        },
-        changeLastType (sTypeIndex) {
-            this.activeSecondTypeIndex = sTypeIndex;
-            this.activeOtherObj =
-                this.aiGuide.content.options[this.activeFirstTypeIndex].types[
-                sTypeIndex
-                ];
-            this.activePage = 1;
-        },
-        // 根据当前分组数页数返回展示列表
-        recommendIntentPageList (obj) {
-            let list = [];
-            if (obj.recommendType === 0) {
-                list = obj.recommendIntentList;
-            }
-            if (obj.recommendType === 1) {
-                list = obj.highFrequency.question;
-            }
-            if (obj.recommendType === 2) {
-                list = obj.intelligenceRecommend.question;
-            }
-            let arr = [];
-            let len = 0;
-            if (list) {
-                len = list.length;
-
-                // 每组展示数
-                let groupNumber = this.aiGuide.content.groupNumber;
-
-                this.totalPage = Math.ceil(len / groupNumber);
-                if (this.aiGuide.content.groupVisible) {
-                    arr = list.slice(
-                        (this.activePage - 1) * groupNumber,
-                        this.activePage * groupNumber
-                    );
-                } else {
-                    arr = list;
-                }
-            }
-            return arr;
-        },
-        sendAiGuideInfo (recommendType, cell) {
-            console.log("组件-312-3", recommendType, cell);
-            this.$emit('sendAiGuide', recommendType, cell);
-        },
-    },
-};
-</script>
-
-<style scoped lang="less">
-.ig-view-cli {
-    // background: #fbfcfd;
-    font-size: 0.9em;
-    border-radius: 5px;
-    position: relative;
-
-    .ig-view-example {
-        position: absolute;
-        right: -10px;
-        top: -10px;
-        opacity: 0.5;
-
-        img {
-            height: 50px;
-        }
-    }
-
-    .ig-types-des {
-        padding: 12px 16px 0px;
-        text-align: left;
-    }
-
-    .ig-types-f {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        padding: 4px 8px;
-
-        .ig-types-f-cell {
-            height: 1.8em;
-            line-height: 1.8em;
-            padding: 0 12px;
-            margin-left: 5px;
-            margin-right: 5px;
-            margin-top: 4px;
-            background: #ffffff;
-            border: 1px solid #e0e6f7;
-            border-radius: 1em;
-            color: #a3adc6;
-            cursor: pointer;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            &:hover {
-                border: 1px solid #366aff;
-                color: #366aff;
-            }
-
-            &-active {
-                background-color: #366aff;
-                border: 1px solid #366aff;
-                color: white;
-            }
-        }
-
-        .ig-types-f-cell-active {
-            &:hover {
-                color: white;
-            }
-        }
-    }
-
-    .ig-types-s {
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        margin: 0px 16px 4px;
-        border-bottom: solid 1px #e0e6f7;
-
-        .ig-types-s-cell {
-            height: 2.2em;
-            line-height: 2.2em;
-            margin-right: 18px;
-            color: #b2c2d8;
-            cursor: pointer;
-            margin-bottom: -1px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            &:hover {
-                color: #366aff;
-            }
-
-            &-active {
-                border-bottom: 2px solid #366aff;
-                color: #366aff;
-            }
-        }
-    }
-
-    .ig-types-tags {
-        margin: 0 16px;
-        padding: 0 0 12px;
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-
-        .ig-types-tags-cell {
-            line-height: 1.4em;
-            padding: 2px 8px;
-            margin-right: 6px;
-            margin-top: 4px;
-            color: #366aff;
-            background: #ffffff;
-            border: 1px solid #a1b9ff;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-    }
-
-    .ig-high-frequency-empty {
-        margin: 6px 15px;
-        height: 40px;
-        line-height: 40px;
-        background: #fff8f4;
-        border-radius: 5px;
-        color: #ff9555;
-        padding: 0 12px;
-        text-align: left;
-    }
-
-    .ig-types-list {
-        margin: 0 16px;
-        padding: 0 0 8px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-
-        .ig-types-list-cell {
-            line-height: 1.1em;
-            padding: 8px 0;
-            overflow: hidden;
-            display: flex;
-            justify-content: space-between;
-            color: #366aff;
-            cursor: pointer;
-            align-items: center;
-            text-align: left;
-
-            span {
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-
-                i {
-                    // margin-top: 12px;
-                }
-            }
-        }
-    }
-
-    .ig-change-list {
-        padding: 8px 0;
-        margin-top: 4px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        border-top: 1px solid #eeeeee;
-
-        .ig-change-list-btn {
-            font-weight: 600;
-            color: #366aff;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-        }
-    }
-}
+<template>
+    <div
+        id="ai-guide"
+        class="ai-guide"
+        :class="{
+            phoneClass: isPhone,
+            companyClass: isPC,
+        }"
+    >
+        <div class="ig-view-cli">
+            <!-- 描述 -->
+            <div
+                v-show="aiGuide.content.descriptionVisible && aiGuide.content.description !== ''"
+                class="ig-types-des"
+            >
+                <span v-html="aiGuide.content.description"></span>
+            </div>
+            <!-- 一级分类 -->
+            <div v-show="aiGuide.content.typesVisible" class="ig-types-f">
+                <span
+                    v-for="(fType, fTypeIndex) in aiGuide.content.options"
+                    :key="`f_${fTypeIndex}`"
+                    @click="changeFirstType(fTypeIndex)"
+                    :class="[
+                        'ig-types-f-cell',
+                        activeFirstTypeIndex === fTypeIndex
+                            ? 'ig-types-f-cell-active'
+                            : '',
+                    ]"
+                    >{{ fType.name }}</span
+                >
+            </div>
+            <!-- 二级分类 -->
+            <div v-show="aiGuide.content.typesVisible && aiGuide.content.options[
+                        activeFirstTypeIndex
+                    ].types.length !== 0" class="ig-types-s">
+                <span
+                    v-for="(sType, sTypeIndex) in aiGuide.content.options[
+                        activeFirstTypeIndex
+                    ].types"
+                    :key="`s_${sTypeIndex}`"
+                    @click="changeLastType(sTypeIndex)"
+                    :class="[
+                        'ig-types-s-cell',
+                        activeSecondTypeIndex === sTypeIndex
+                            ? 'ig-types-s-cell-active'
+                            : '',
+                    ]"
+                    >{{ sType.name }}</span
+                >
+            </div>
+            <!-- 横向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 0 &&
+                    aiGuide.content.typesetting === 'horizontal'
+                "
+                class="ig-types-tags"
+            >
+                <span
+                    v-for="(
+                        intentCell, intentCellIndex
+                    ) in recommendIntentPageList(activeOtherObj)"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    :key="`i_${intentCellIndex}`"
+                    class="ig-types-tags-cell"
+                    >{{ intentCell.questionName }}</span
+                >
+            </div>
+            <!-- 竖向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 0 &&
+                    aiGuide.content.typesetting === 'vertical'
+                "
+                class="ig-types-list"
+            >
+                <span
+                    v-for="(
+                        intentCell, intentCellIndex
+                    ) in recommendIntentPageList(activeOtherObj)"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    :key="`i_${intentCellIndex}`"
+                    class="ig-types-list-cell"
+                >
+                    <span>{{ intentCell.questionName }}</span>
+                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12"><path d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z" p-id="96726" fill="#366aff"></path></svg></span
+                ></span>
+            </div>
+            <!-- 横向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 1 &&
+                    aiGuide.content.typesetting === 'horizontal'
+                "
+                class="ig-types-tags"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-tags-cell"
+                    >{{ intentCell.exampleQuestion }}</span
+                >
+            </div>
+            <!-- 竖向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 1 &&
+                    aiGuide.content.typesetting === 'vertical'
+                "
+                class="ig-types-list"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-list-cell"
+                >
+                    <span>{{ intentCell.exampleQuestion }}</span>
+                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12"><path d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z" p-id="96726" fill="#366aff"></path></svg></span
+                ></span>
+            </div>
+            <!-- 横向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 2 &&
+                    aiGuide.content.typesetting === 'horizontal'
+                "
+                class="ig-types-tags"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-tags-cell"
+                    >{{ intentCell.exampleQuestion }}</span
+                >
+            </div>
+            <!-- 竖向排版 -->
+            <div
+                v-show="
+                    activeOtherObj.recommendType == 2 &&
+                    aiGuide.content.typesetting === 'vertical'
+                "
+                class="ig-types-list"
+            >
+                <span
+                    v-for="(intentCell, intentCellIndex) in recommendIntentPageList(activeOtherObj)"
+                    :key="`i_${intentCellIndex}`"
+                    @click="
+                        sendAiGuideInfo(
+                            activeOtherObj.recommendType,
+                            intentCell
+                        )
+                    "
+                    class="ig-types-list-cell"
+                >
+                    <span>{{ intentCell.exampleQuestion }}</span>
+                    <span><svg t="1720148108415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="96725" width="12" height="12"><path d="M246.728409 927.106061l414.195993-414.195993-409.542106-417.779487A57.615128 57.615128 0 0 1 256.036184 16.247187a49.377747 49.377747 0 0 1 37.2311-16.335145 48.02812 48.02812 0 0 1 37.231101 16.893611l446.773206 457.616765a57.568589 57.568589 0 0 1-4.653887 78.883394c0 1.489244 0 2.792333-4.653888 4.095421L325.844497 1006.408305a56.218962 56.218962 0 0 1-79.116088-0.605005 62.687865 62.687865 0 0 1 0-78.697239z" p-id="96726" fill="#366aff"></path></svg></span
+                ></span>
+            </div>
+            <div
+                v-if="aiGuide.content.groupVisible && totalPage > 1"
+                class="ig-change-list"
+            >
+                <span @click="changeIntellectGuide" class="ig-change-list-btn">
+                    <svg t="1720148246364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="136175" width="16" height="16"><path d="M225.6 540.8C240 686.4 363.2 800 512 800c76.8 0 150.4-30.4 203.2-84.8 12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8c-64 65.6-153.6 104-248 104-184 0-336-142.4-350.4-323.2l-43.2 41.6c-12.8 12.8-33.6 11.2-44.8 0s-11.2-33.6 0-44.8l99.2-96c12.8-12.8 33.6-11.2 44.8 0l92.8 96c12.8 12.8 11.2 33.6-1.6 44.8-12.8 12.8-33.6 11.2-44.8-1.6l-38.4-40zM800 497.6C792 345.6 665.6 224 512 224c-76.8 0-148.8 30.4-203.2 83.2-12.8 12.8-33.6 12.8-44.8 0-12.8-12.8-12.8-33.6 0-44.8 65.6-64 153.6-102.4 248-102.4 192 0 347.2 153.6 352 342.4l41.6-40c12.8-12.8 33.6-11.2 44.8 1.6 12.8 12.8 11.2 33.6-1.6 44.8l-94.4 89.6c-12.8 11.2-32 11.2-44.8 0l-97.6-96c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l43.2 40z" p-id="136176" fill="#366aff"></path></svg>
+                    换一批</span
+                >
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "aiGuide",
+    data() {
+        return {
+            isPhone: false,
+            isPC: false,
+
+            activeFirstTypeIndex: 0,
+            activeSecondTypeIndex: 0,
+            activeOtherObj: {
+                name: "",
+                recommendType: 0, // 0 关联意图 1 高频推荐意图 2 智能推荐
+                recommendIntentList: [], // recommendType = 0
+                highFrequency: {
+                    // recommendType = 1
+                    rang: [], // 推荐范围
+                    number: 20, // 最多推荐问题数
+                    question: [],
+                },
+                intelligenceRecommend: {
+                    // recommendType = 2
+                    recommendStrategy: [0, 1], // 0 根据与当前用户咨询过相同意图的用户所问的意图进行推荐 1 根据当前用户部门的其他用户咨询过的意图进行推荐
+                    rang: [], // 推荐范围
+                    number: 20, // 最多推荐问题数
+                    question: [],
+                },
+            },
+            activePage: 1,
+            totalPage: 1,
+        };
+    },
+    props: {
+        aiGuide: Object,
+    },
+    beforeMount() {},
+    mounted() {
+        this.isMobile();
+        if (this.aiGuide.content.options[0].types.length === 0) {
+            this.activeOtherObj = this.aiGuide.content.options[0];
+        } else {
+            this.activeSecondTypeIndex = 0;
+            this.activeOtherObj = this.aiGuide.content.options[0].types[0];
+        }
+    },
+    methods: {
+        isMobile() {
+            let flag = navigator.userAgent.match(
+                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+            );
+            if (flag) {
+                this.isPhone = true;
+            } else {
+                this.isPC = true;
+            }
+        },
+        changeIntellectGuide() {
+            if (this.activePage === this.totalPage) {
+                this.activePage = 1;
+            } else {
+                this.activePage++;
+            }
+        },
+        changeFirstType(fTypeIndex) {
+            this.activeFirstTypeIndex = fTypeIndex;
+            if (this.aiGuide.content.options[fTypeIndex].types.length === 0) {
+                this.activeOtherObj = this.aiGuide.content.options[fTypeIndex];
+            } else {
+                this.activeSecondTypeIndex = 0;
+                this.activeOtherObj =
+                    this.aiGuide.content.options[fTypeIndex].types[0];
+            }
+            this.activePage = 1;
+        },
+        changeLastType(sTypeIndex) {
+            this.activeSecondTypeIndex = sTypeIndex;
+            this.activeOtherObj =
+                this.aiGuide.content.options[this.activeFirstTypeIndex].types[
+                    sTypeIndex
+                ];
+            this.activePage = 1;
+        },
+        // 根据当前分组数页数返回展示列表
+        recommendIntentPageList(obj) {
+            let list = [];
+            if (obj.recommendType === 0) {
+                list = obj.recommendIntentList;
+            }
+            if (obj.recommendType === 1) {
+                list = obj.highFrequency.question;
+            }
+            if (obj.recommendType === 2) {
+                list = obj.intelligenceRecommend.question;
+            }
+            let arr = [];
+            let len = 0;
+            if (list) {
+                len = list.length;
+
+                // 每组展示数
+                let groupNumber = this.aiGuide.content.groupNumber;
+
+                this.totalPage = Math.ceil(len / groupNumber);
+                if (this.aiGuide.content.groupVisible) {
+                    arr = list.slice(
+                        (this.activePage - 1) * groupNumber,
+                        this.activePage * groupNumber
+                    );
+                } else {
+                    arr = list;
+                }
+            }
+            return arr;
+        },
+        sendAiGuideInfo(recommendType, cell) {
+          console.log("组件-312-3", recommendType, cell);
+          this.$emit('sendAiGuide', recommendType, cell);
+        },
+    },
+};
+</script>
+
+<style scoped lang="less">
+.ig-view-cli {
+    // background: #fbfcfd;
+    font-size: 0.9em;
+    border-radius: 5px;
+    position: relative;
+    .ig-view-example {
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        opacity: 0.5;
+        img {
+            height: 50px;
+        }
+    }
+    .ig-types-des {
+        padding: 12px 16px 0px;
+        text-align: left;
+    }
+    .ig-types-f {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        padding: 4px 8px;
+        .ig-types-f-cell {
+            height: 1.8em;
+            line-height: 1.8em;
+            padding: 0 12px;
+            margin-left: 5px;
+            margin-right: 5px;
+            margin-top: 4px;
+            background: #ffffff;
+            border: 1px solid #e0e6f7;
+            border-radius: 1em;
+            color: #a3adc6;
+            cursor: pointer;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:hover {
+                border: 1px solid #366aff;
+                color: #366aff;
+            }
+            &-active {
+                background-color: #366aff;
+                border: 1px solid #366aff;
+                color: white;
+            }
+        }
+        .ig-types-f-cell-active {
+            &:hover {
+                color: white;
+            }
+        }
+    }
+    .ig-types-s {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        margin: 0px 16px 4px;
+        border-bottom: solid 1px #e0e6f7;
+        .ig-types-s-cell {
+            height: 2.2em;
+            line-height: 2.2em;
+            margin-right: 18px;
+            color: #b2c2d8;
+            cursor: pointer;
+            margin-bottom: -1px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:hover {
+                color: #366aff;
+            }
+            &-active {
+                border-bottom: 2px solid #366aff;
+                color: #366aff;
+            }
+        }
+    }
+    .ig-types-tags {
+        margin: 0 16px;
+        padding: 0 0 12px;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        .ig-types-tags-cell {
+            line-height: 1.4em;
+            padding: 2px 8px;
+            margin-right: 6px;
+            margin-top: 4px;
+            color: #366aff;
+            background: #ffffff;
+            border: 1px solid #a1b9ff;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    }
+    .ig-high-frequency-empty {
+        margin: 6px 15px;
+        height: 40px;
+        line-height: 40px;
+        background: #fff8f4;
+        border-radius: 5px;
+        color: #ff9555;
+        padding: 0 12px;
+        text-align: left;
+    }
+    .ig-types-list {
+        margin: 0 16px;
+        padding: 0 0 8px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        .ig-types-list-cell {
+            line-height: 1.1em;
+            padding: 8px 0;
+            overflow: hidden;
+            display: flex;
+            justify-content: space-between;
+            color: #366aff;
+            cursor: pointer;
+            align-items: center;
+            text-align: left;
+            span {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                i {
+                    // margin-top: 12px;
+                }
+            }
+        }
+    }
+    .ig-change-list {
+        padding: 8px 0;
+        margin-top: 4px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border-top: 1px solid #eeeeee;
+        .ig-change-list-btn {
+            font-weight: 600;
+            color: #366aff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
 </style>