feat:修改AI Robot

src/components/AIRobot/src/AIRobot.vue

@@ -9,6 +9,7 @@ const AIRobotHoverVisible = ref(false)
 const clicked = ref(false)
 const isShowDefault = ref(false)
 const isShowAIRobotTop = ref(false)
+const AIIconVisible = ref(false)
 const DeQuestions = ref([
   {
     label: 'List shipments with ETA changes in the last 30 days.',
@@ -72,7 +73,7 @@ const AvatarMouseLeave = () => {
     AIRobotHoverVisible.value = false
   }
 }
-const emit = defineEmits(['AvatarClick'])
+const emit = defineEmits(['AvatarClick', 'handelClickAIDefault'])
 // 点击AIRobot图标
 const AvatarClick = () => {
   clicked.value = true
@@ -117,13 +118,31 @@ const prepareGroups = () => {
 
   itemGroups.value = groups;
 }
-
 const isShowLogin = () => {
+  const LoginDays = 0
+  let settimeouttime = 0
+  AIIconVisible.value = true
   isShowDefault.value = true
+  if(LoginDays == 0) {
+    settimeouttime = 45000
+  } else if (LoginDays == 2) {
+    settimeouttime = 15000
+  } else {
+    settimeouttime = 10000
+  }
   setTimeout(() => {
     isShowDefault.value = false
     isShowAIRobotTop.value = true
-  }, 5000);
+  }, settimeouttime);
+}
+
+// 点击问题
+const handelClick = (item: any) => {
+  emit('handelClickAIDefault',item)
+  clicked.value = true
+  AIRobotHoverVisible.value = false
+  isShowDefault.value = false
+  isShowAIRobotTop.value = false
 }
 
 onMounted(() => {
@@ -144,7 +163,7 @@ defineExpose({
   <div class="AIRobot-top" v-if="isShowDefault">
     <div class="flex_end" @click="HideAIRobotTop">
       <div class="icon flex_center">
-        <span class="iconfont_icon icon_dark">
+        <span class="iconfont_icon icon_dark AI_icon">
             <svg class="iconfont" aria-hidden="true">
               <use xlink:href="#icon-icon_reject_b"></use>
             </svg>
@@ -177,6 +196,7 @@ defineExpose({
                 class="dialogue_content_item"
                 v-for="item in group"
                 :key="item.label"
+                @click="handelClick(item.label)"
                 :class="{ 'long_item': item.isLong }"
               >
                 {{ item.label }}
@@ -190,7 +210,7 @@ defineExpose({
   <div class="AIRobot-top" v-if="isShowAIRobotTop">
     <div class="flex_end" @click="HideAIRobotTopTwo">
       <div class="icon flex_center">
-        <span class="iconfont_icon icon_dark">
+        <span class="iconfont_icon icon_dark AI_icon">
             <svg class="iconfont" aria-hidden="true">
               <use xlink:href="#icon-icon_reject_b"></use>
             </svg>
@@ -202,7 +222,7 @@ defineExpose({
     </div>
   </div>
   <!-- 悬浮icon -->
-  <div class="AIRobot flex_center">
+  <div class="AIRobot flex_center" v-if="AIIconVisible">
     <el-popover
       :visible="visible"
       placement="top-end"
@@ -218,7 +238,7 @@ defineExpose({
 </template>
 
 <style lang="scss">
-.iconfont_icon {
+.AI_icon {
   margin-right: 0;
 }
 .flex_center {
@@ -328,6 +348,11 @@ defineExpose({
   word-break: break-word;
   overflow: hidden;
   transition: all 0.3s ease;
+  cursor: pointer;
+}
+.dialogue_content_item:hover {
+  background-color: var(--color-arrow-hoverL);
+  color: var(--color-theme);
 }
 .itemLable { 
   width: 100%;

src/styles/elementui.scss

@@ -832,4 +832,11 @@ div .carousel .el-carousel__arrow--right {
 div .carousel .el-icon {
   fill: black;
   color: black;
+}
+div .carousel .el-carousel__arrow:hover {
+  background-color: var(--color-arrow-hoverL);
+  .el-icon {
+    fill: var(--color-theme);
+    color: var(--color-theme);
+  }
 }

src/styles/theme-g.scss

@@ -90,5 +90,6 @@
   --color-dialogue_container-bg:rgba(255, 255, 255, 0.10);
   --color-dialogue_title: linear-gradient(90deg, var(--1-gradient-ai-robot-faq-0, #FFA8C7) 1.77%, var(--1-gradient-ai-robot-faq-46, #5988f3) 46.77%);
   --color-dialogue_content-bg:linear-gradient(117deg, var(--1-gradient-ai-robot-0, #525CBA) 4.31%, var(--1-gradient-ai-robot-15, #5A57B2) 14.24%, var(--1-gradient-ai-robot-38, #5F54AD) 29.71%, var(--1-gradient-ai-robot-59, #664EA2) 43.72%, var(--1-gradient-ai-robot-83, #694CA0) 59.35%, var(--1-gradient-ai-robot-100, #724493) 70.56%);
+  --color-arrow-hoverL: #FCEEE3;
 
 }

src/styles/theme.scss

@@ -296,6 +296,7 @@
   --color-ai-user-bubble-bg-gradient-end: #f2f4f7;
   --input-border: #eaebed;
   --color-pause-btn-bg: #fff1e6;
+  --color-arrow-hoverL: #FCEEE3;
 }
 
 :root.dark {

src/views/AIRobotChat/src/AIRobotChat.vue

@@ -124,6 +124,33 @@ const handleClose = () => {
   progressInterval.value && clearInterval(progressInterval.value)
   emit('close')
 }
+// 点击问题
+const handelClickAI = (item: any) => {
+  messages.value = []
+  messages.value.push({
+    type: 'user',
+    content: item
+  })
+  messages.value.push({
+    type: 'robot',
+    content: item + '123'
+  })
+}
+// 点击问题
+const handelClickAIQuestion = (item: any) => {
+  messages.value.push({
+    type: 'user',
+    content: item
+  })
+  messages.value.push({
+    type: 'robot',
+    content: item + '123'
+  })
+}
+
+defineExpose({
+  handelClickAI
+})
 </script>
 
 <template>
@@ -145,7 +172,7 @@ const handleClose = () => {
           <span @click="handleClose" class="font_family icon-icon_collapsed__to_widget_b"></span>
         </div>
       </div>
-      <AIQuestions :modalSize="modalSize"></AIQuestions>
+      <AIQuestions :modalSize="modalSize" @handelClickAIQuestion="handelClickAIQuestion"></AIQuestions>
     </div>
     <div class="chat-messages" ref="messagesRef" :style="{ marginTop: modalSize === 'large' ? '81px' : '151px' }">
       <div

src/views/AIRobotChat/src/components/AIQuestions.vue

@@ -133,7 +133,12 @@ const generatePages = () => {
     currentPage = { row1: [], row2: [] };
   }
   pages.value = result.filter(p => p.row1.length > 0);
-  console.log(pages.value)
+}
+
+// 点击问题
+const emits = defineEmits(['handelClickAIQuestion'])
+const handelClick = (item: any) => {
+  emits('handelClickAIQuestion',item)
 }
 onMounted(() => {
   prepareGroups()
@@ -159,7 +164,7 @@ onMounted(() => {
               <!-- 第一排 -->
               <div class="row first-row">
                 <template v-for="item in page.row1" :key="item.id">
-                  <div class="dialogue_content_item" :class="{ 'long-item': item.isLong }">
+                  <div @click="handelClick(item.label)" class="dialogue_content_item" :class="{ 'long-item': item.isLong }">
                     {{ item.label }}
                   </div>
                 </template>
@@ -167,7 +172,7 @@ onMounted(() => {
               <!-- 第二排 -->
               <div class="row second-row">
                 <template v-for="item in page.row2" :key="item.id">
-                  <div class="dialogue_content_item" :class="{ 'long-item': item.isLong }">
+                  <div @click="handelClick(item.label)"  class="dialogue_content_item" :class="{ 'long-item': item.isLong }">
                     {{ item.label }}
                   </div>
                 </template>
@@ -186,6 +191,7 @@ onMounted(() => {
               class="dialogue_content_item"
               v-for="item in group"
               :key="item.label"
+              @click="handelClick(item.label)"
               :class="{ 'long_item': item.isLong }"
             >
               {{ item.label }}
@@ -234,6 +240,10 @@ onMounted(() => {
   display: flex;
   min-height: 0; /* 防止内容溢出 */
 }
+.dialogue_content_item:hover {
+  background-color: var(--color-arrow-hoverL);
+  color: var(--color-theme);
+}
 .long-item {
   grid-column: span 2;
 }
@@ -254,6 +264,7 @@ onMounted(() => {
   align-items: center;
   justify-content: start;
   text-align: center;
+  cursor: pointer;
   min-width: 0; /* 防止文本溢出 */
 }
 :deep(.el-carousel__item--card, .el-carousel__item.is-animating) {

src/views/Layout/src/LayoutView.vue

@@ -22,10 +22,19 @@ const handleColseRobotChat = () => {
 const onClick = () => {
   isShowAIRobotChat.value = true
 }
-
 const AvatarClick = () => {
   isShowAIRobotChat.value = true
 }
+
+const AIRobotChatref = ref()
+// 点击问题
+const handelClickAIDefault = async  (item :any) => {
+  isShowAIRobotChat.value = true
+  await nextTick();
+  if (AIRobotChatref.value) {
+    AIRobotChatref.value.handelClickAI(item);
+  }
+}
 </script>
 <template>
   <el-container class="layout-container">
@@ -56,8 +65,8 @@ const AvatarClick = () => {
         <router-view />
       </el-main>
     </el-container>
-    <AIRobot @AvatarClick="AvatarClick"></AIRobot>
-    <AIRobotChat v-if="isShowAIRobotChat" @close="handleColseRobotChat"></AIRobotChat>
+    <AIRobot @AvatarClick="AvatarClick" @handelClickAIDefault="handelClickAIDefault"></AIRobot>
+    <AIRobotChat ref="AIRobotChatref" v-if="isShowAIRobotChat" @close="handleColseRobotChat"></AIRobotChat>
     <ScoringGrade></ScoringGrade>
   </el-container>
 </template>