|
|
@@ -1,49 +1,146 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
-import normalPng from '../image/score_normal.png'
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import normalPng from '../image/icon_ai_robot24_b@2x.png'
|
|
|
+import emitter from '@/utils/bus'
|
|
|
|
|
|
const clickSrc = ref(normalPng)
|
|
|
const visible = ref(false)
|
|
|
const AIRobotHoverVisible = ref(false)
|
|
|
-const AIRobotClickVisible = ref(false)
|
|
|
const clicked = ref(false)
|
|
|
+const isShowDefault = ref(false)
|
|
|
+const isShowAIRobotTop = ref(false)
|
|
|
+const DeQuestions = ref([
|
|
|
+ {
|
|
|
+ label: 'List shipments with ETA changes in the last 30 days.',
|
|
|
+ value: 'List shipments with ETA changes in the last 30 days.',
|
|
|
+ isLong: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Shipments arriving in the next 7 days.',
|
|
|
+ value: 'Shipments arriving in the next 7 days.',
|
|
|
+ isLong: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Show shipments delayed in the last 30 days.',
|
|
|
+ value: 'Show shipments delayed in the last 30 days.',
|
|
|
+ isLong: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'List shipments with milestone updates in the last 7 days.',
|
|
|
+ value: 'List shipments with milestone updates in the last 7 days.',
|
|
|
+ isLong: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'List shipments with milestone in the last 7 days2sdsa.',
|
|
|
+ value: 'List shipments with milestone in the last 7 days2sdsa.',
|
|
|
+ isLong: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'List shipments with milestone updates 7 days3fef.',
|
|
|
+ value: 'List shipments with milestone updates 7 days3fef.',
|
|
|
+ isLong: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'List shipments with ETA changes in the last 30 days11111111111111111111111111111111111.',
|
|
|
+ value: 'List shipments with ETA changes in the last 30 days11111111111111111111111111111111111.',
|
|
|
+ isLong: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111122.',
|
|
|
+ value: 'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111122.',
|
|
|
+ isLong: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111133.',
|
|
|
+ value: 'List shipments with ETA changes in the last 30 days1111111111111111111111111111111111133.',
|
|
|
+ isLong: true
|
|
|
+ },
|
|
|
+])
|
|
|
+const itemGroups = ref([]);
|
|
|
+
|
|
|
// 鼠标hover AIRobot图标
|
|
|
const AvatarMouseEnter = () => {
|
|
|
- if (!clicked.value) {
|
|
|
+ if (clicked.value) {
|
|
|
AIRobotHoverVisible.value = true
|
|
|
visible.value = true
|
|
|
}
|
|
|
}
|
|
|
// 鼠标move AIRobot图标
|
|
|
const AvatarMouseLeave = () => {
|
|
|
- if (!clicked.value) {
|
|
|
+ if (clicked.value) {
|
|
|
visible.value = false
|
|
|
AIRobotHoverVisible.value = false
|
|
|
}
|
|
|
}
|
|
|
// 点击AIRobot图标
|
|
|
const AvatarClick = () => {
|
|
|
+ clicked.value = true
|
|
|
AIRobotHoverVisible.value = false
|
|
|
- if(AIRobotClickVisible.value == true && visible.value) {
|
|
|
- AIRobotClickVisible.value = false
|
|
|
- visible.value = false
|
|
|
- clicked.value = false
|
|
|
- } else {
|
|
|
- visible.value = true
|
|
|
- AIRobotClickVisible.value = true
|
|
|
- clicked.value = true
|
|
|
+ isShowDefault.value = false
|
|
|
+ isShowAIRobotTop.value = false
|
|
|
+}
|
|
|
+// 隐藏上方弹窗
|
|
|
+const HideAIRobotTop = () => {
|
|
|
+ isShowDefault.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 隐藏上方弹窗
|
|
|
+const HideAIRobotTopTwo = () => {
|
|
|
+ isShowAIRobotTop.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 随机显示方法
|
|
|
+const prepareGroups = () => {
|
|
|
+ const groups = [];
|
|
|
+ let currentGroup = [];
|
|
|
+ let currentHeight = 0;
|
|
|
+
|
|
|
+ DeQuestions.value.forEach(item => {
|
|
|
+ const itemHeight = item.isLong ? 2 : 1;
|
|
|
+
|
|
|
+ if (currentHeight + itemHeight > 4) {
|
|
|
+ groups.push(currentGroup);
|
|
|
+ currentGroup = [];
|
|
|
+ currentHeight = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ currentGroup.push(item);
|
|
|
+ currentHeight += itemHeight;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加最后一组
|
|
|
+ if (currentGroup.length > 0) {
|
|
|
+ groups.push(currentGroup);
|
|
|
}
|
|
|
+
|
|
|
+ itemGroups.value = groups;
|
|
|
}
|
|
|
-const handlePopoverHide = () => {
|
|
|
- clicked.value = false
|
|
|
- AIRobotHoverVisible.value = false
|
|
|
- AIRobotClickVisible.value = false
|
|
|
+
|
|
|
+const isShowLogin = () => {
|
|
|
+ isShowDefault.value = true
|
|
|
+ setTimeout(() => {
|
|
|
+ isShowDefault.value = false
|
|
|
+ isShowAIRobotTop.value = true
|
|
|
+ }, 5000);
|
|
|
}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ prepareGroups()
|
|
|
+ emitter.on('login-success', isShowLogin);
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ emitter.off('login-success', isShowLogin);
|
|
|
+});
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ isShowLogin
|
|
|
+})
|
|
|
</script>
|
|
|
<template>
|
|
|
<!-- 上方显示的弹窗 -->
|
|
|
- <div class="AIRobot-top">
|
|
|
- <div class="flex_end">
|
|
|
+ <div class="AIRobot-top" v-if="isShowDefault">
|
|
|
+ <div class="flex_end" @click="HideAIRobotTop">
|
|
|
<div class="icon flex_center">
|
|
|
<span class="iconfont_icon icon_dark">
|
|
|
<svg class="iconfont" aria-hidden="true">
|
|
|
@@ -52,19 +149,55 @@ const handlePopoverHide = () => {
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="dialogue_title">
|
|
|
- Hi! I'm your Freight Assistant, always on call
|
|
|
+ <div class="flex_title">
|
|
|
+ <div class="AIAvator">
|
|
|
+ <img width="40px" src="../image/icon_ai_robot36_b@2x.png" />
|
|
|
+ </div>
|
|
|
+ <div class="dialogue_title">
|
|
|
+ Hi! I'm your Freight Assistant, always on call
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="dialogue_content">
|
|
|
- <div class="dialogue_content_title">
|
|
|
- <div class="dialogue_title_left">
|
|
|
- Frequently Asked Questions
|
|
|
- </div>
|
|
|
- <div class="dialogue_title_right">
|
|
|
- Refresh Questions
|
|
|
+ <div class="flex_end">
|
|
|
+ <div class="dialogue_content ">
|
|
|
+ <div class="dialogue_content_title">
|
|
|
+ <div class="dialogue_title_left">
|
|
|
+ <img src="../image/icon_faq_b@2x.png" width="24px" />
|
|
|
+ Frequently Asked Questions
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-carousel class="carousel" :autoplay="false" height="190px" style="width: 452px;" >
|
|
|
+ <el-carousel-item
|
|
|
+ v-for="(group, index) in itemGroups "
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="dialogue_container">
|
|
|
+ <div
|
|
|
+ class="dialogue_content_item"
|
|
|
+ v-for="item in group"
|
|
|
+ :key="item.label"
|
|
|
+ :class="{ 'long_item': item.isLong }"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="AIRobot-top" v-if="isShowAIRobotTop">
|
|
|
+ <div class="flex_end" @click="HideAIRobotTopTwo">
|
|
|
+ <div class="icon flex_center">
|
|
|
+ <span class="iconfont_icon icon_dark">
|
|
|
+ <svg class="iconfont" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-icon_reject_b"></use>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="dialogue_title">
|
|
|
+ Hi! I'm your Freight Assistant, always on call
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 悬浮icon -->
|
|
|
<div class="AIRobot flex_center">
|
|
|
@@ -72,15 +205,12 @@ const handlePopoverHide = () => {
|
|
|
:visible="visible"
|
|
|
placement="top-end"
|
|
|
width="auto"
|
|
|
- @hide="handlePopoverHide"
|
|
|
>
|
|
|
<template #reference>
|
|
|
- <el-avatar @click="AvatarClick" @mouseenter="AvatarMouseEnter" @mouseleave="AvatarMouseLeave" :size="46" shape="square" :src="clickSrc" />
|
|
|
+ <el-avatar @click="AvatarClick" @mouseenter="AvatarMouseEnter" @mouseleave="AvatarMouseLeave" :size="46" shape="square" class="avatar_bg" :src="clickSrc" />
|
|
|
</template>
|
|
|
<!-- hover时显示的对话框 -->
|
|
|
<div v-if="AIRobotHoverVisible" class="AIRobot_dialog">Continue the conversation</div>
|
|
|
- <!-- click时显示的对话框 -->
|
|
|
- <div v-if="AIRobotClickVisible" class="AIRobot_dialog">Continue the conversation 156468482</div>
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -98,19 +228,24 @@ const handlePopoverHide = () => {
|
|
|
display: flex;
|
|
|
justify-content: end;
|
|
|
}
|
|
|
+.flex_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 500px;
|
|
|
+}
|
|
|
.AIRobot-top {
|
|
|
position: absolute;
|
|
|
z-index: 2013;
|
|
|
- right: 20px;
|
|
|
- bottom: 250px;
|
|
|
+ right: 50px;
|
|
|
+ bottom: 230px;
|
|
|
}
|
|
|
.dialogue_content_title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ padding-left: 8px;
|
|
|
}
|
|
|
.dialogue_title_left {
|
|
|
- margin-right: 80px;
|
|
|
background: linear-gradient(90deg, #A71549 1.77%, #06256E 46.77%);
|
|
|
-webkit-background-clip: text;
|
|
|
background-clip: text;
|
|
|
@@ -118,12 +253,22 @@ const handlePopoverHide = () => {
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
+.dialogue_title_right {
|
|
|
+ color: var(--color-theme);
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+.icon_theme {
|
|
|
+ fill: var(--color-theme);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
.icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
background-color: var(--management-bg-color);
|
|
|
box-shadow: -2px 2px 12px rgba(0, 0, 0, 15%);
|
|
|
border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.AIRobot {
|
|
|
width: 64px;
|
|
|
@@ -151,7 +296,42 @@ const handlePopoverHide = () => {
|
|
|
}
|
|
|
.dialogue_content {
|
|
|
background: linear-gradient(92deg, #EAECFF 1.33%, #F1E3FB 99.63%);
|
|
|
- padding: 8px;
|
|
|
+ padding: 8px 0 0 0;
|
|
|
border-radius: 12px;
|
|
|
}
|
|
|
+.AIAvator {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: radial-gradient(50% 43% at 50% 54.79%, #D5B4F3 0%, #FFF9FC 100%);
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+.dialogue_container {
|
|
|
+ width: 420px;
|
|
|
+ height: 156px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid #FFF;
|
|
|
+ padding: 8px;
|
|
|
+ background: rgba(255, 255, 255, 0.50);
|
|
|
+}
|
|
|
+.dialogue_content_item {
|
|
|
+ width: 404px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 5.5px 8px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: var(--color-dialogue-bg);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ word-break: break-word;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+.itemLable {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.long_item {
|
|
|
+ height: 64px;
|
|
|
+}
|
|
|
</style>
|
AmandaG
