feat(app): 添加AI Call组件控制功能- 在app模块中新增showAICall状态用于控制AI Call组件显示

- 添加对应的mutation和action来修改showAICall状态
- 在App.vue中引入并条件渲染AICall组件
- 新增AICaseConsult组件用于触发AI Call显示
- 在Detail.vue页面中集成AICaseConsult组件-修复sendMessage.vue中conversationId的sessionStorage存储问题
- 调整AICall.vue组件的窗口显示逻辑

src/App.vue

@@ -2,18 +2,36 @@
   <div id="app">
     <keep-alive :include="['case']">
       <router-view />
+      12312
     </keep-alive>
+    <!-- 添加AI Call组件 -->
+    <AICall 
+      :dialogVisible="showAICall" 
+      @close="onCloseAICall" 
+    />
   </div>
 </template>
 
 <script>
-  import { mapGetters } from 'vuex';
+  import { mapGetters, mapState } from 'vuex';
+  import AICall from '@/views/portal/case/AICall.vue';
+  
   export default{
     name:  'App',
-    computed: {
-      ...mapGetters(['userInfo'])
+    components: {
+      AICall
     },
-  mounted() {
+    computed: {
+      ...mapGetters(['userInfo']),
+      ...mapState('app', ['showAICall'])
+    },
+    methods: {
+      onCloseAICall() {
+        // 通过Vuex关闭AI Call组件
+        this.$store.dispatch('app/setShowAICall', false);
+      }
+    },
+    mounted() {
       //从状态值中取,因为登录处理，所以移动watch中
       // console.log(this.userInfo);
       // if(this.userInfo && this.userInfo.name!=''){
@@ -38,5 +56,4 @@
     border: 1px solid #e7e7e7 !important;
     box-shadow: 0px 1px 5px 1px rgba(92,98,111,.3);
 }
-</style>
-
+</style>

src/store/modules/app.js

@@ -7,7 +7,9 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',//默认是桌面，以后会有android,ios,minapp
-  size: Cookies.get('size') || 'medium' //字段大小
+  size: Cookies.get('size') || 'medium', //字段大小
+  // 添加AI Call组件显示控制状态
+  showAICall: false
 }
 
 const mutations = {
@@ -34,6 +36,10 @@ const mutations = {
   SET_SIZE: (state, size) => {
     state.size = size
     Cookies.set('size', size)
+  },
+  // 添加控制AI Call组件显示的mutation
+  SET_SHOW_AI_CALL: (state, show) => {
+    state.showAICall = show
   }
 }
 
@@ -49,6 +55,10 @@ const actions = {
   },
   setSize({ commit }, size) {
     commit('SET_SIZE', size)
+  },
+  // 添加控制AI Call组件显示的action
+  setShowAICall({ commit }, show) {
+    commit('SET_SHOW_AI_CALL', show)
   }
 }
 
@@ -57,4 +67,4 @@ export default {
   state,
   mutations,
   actions
-}
+}

src/views/portal/case/AICall.vue

@@ -69,7 +69,6 @@
 
     <!-- 最小化状态的弹窗 -->
     <div
-      v-if="dialogVisible"
       class="minimized-window"
       v-show="windowState === 'minimized'"
       @click="maximizeWindow"
@@ -133,6 +132,7 @@ export default {
   },
   watch: {
     dialogVisible(newVal) {
+      console.log(newVal);
       if (newVal) {
         // 每次打开时默认最大化
         this.windowState = 'maximized';

src/views/portal/case/Detail.vue

@@ -109,6 +109,7 @@
           </div>
         </div>
         <div class="xcontent2-minor" :style="{ display: zoomShow ? '' : 'none' }">
+          <AICaseConsult />
           <div id="fixd-box">
             <router-link class="the_charts" to="/case/charts">
               <div class="text">排行榜</div>
@@ -237,9 +238,10 @@ import { formatDate } from "@/utils/datetime.js"
 import { cutFullName } from "@/utils/tools.js";
 import apiPlace from "@/api/phase2/place.js"
 import portalFloatTools from "@/components/PortalFloatTools.vue";
+import AICaseConsult from "@/views/portal/case/components/AICaseConsult.vue";
 export default {
   name: 'atticle',
-  components: { portalHeader, portalFloatTools, portalFooter, interactBar, author, comments, pdfPreview },
+  components: {AICaseConsult, portalHeader, portalFloatTools, portalFooter, interactBar, author, comments, pdfPreview },
   computed: {
     ...mapGetters(['userInfo'])
   },

src/views/portal/case/components/AICaseConsult.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="AI-case" style="position: relative; margin-bottom: 10px;" v-if="showAiCase" @click.stop="getAICase()">
+      <img src="../../../../../public/images/case-logo.png" alt="">
+      <span @click="getAICase()" style="position: absolute; bottom: 65px;left: 15px;z-index: 1;width: 40%;height: 30px;"></span>
+    </div>
+    <!-- 移除直接使用的AICall组件 -->
+  </div>
+</template>
+
+<script>
+import { showCaseAiEntrance } from '@/api/boe/aiChat.js'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AICaseConsult',
+  data() {
+    return {
+      showAiCase: false
+    }
+  },
+  computed: {
+    // 从Vuex中获取showAICall状态（虽然当前组件不使用，但保持连接）
+    ...mapState('app', ['showAICall'])
+  },
+  mounted() {
+    this.getShowAiCase()
+  },
+  methods: {
+    // 是否展示入口
+    getShowAiCase() {
+      showCaseAiEntrance().then(res => {
+        this.showAiCase = res.result
+      })
+    },
+    // 案例立即咨询
+    getAICase() {
+      // 通过Vuex控制AICall组件显示
+      this.$store.dispatch('app/setShowAICall', true)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.AI-case {
+  margin-bottom: 10px;
+  position: relative;
+
+  img {
+    width: 100%;
+  }
+
+  span {
+    width: 160px;
+    height: 40px;
+    position: absolute;
+    left: 20px;
+    top: 105px;
+    cursor: pointer;
+  }
+}
+</style>

src/views/portal/case/components/sendMessage.vue

@@ -230,6 +230,7 @@ export default {
                       // 从响应中获取并保存conversationId
                       if (jsonData.conversationId) {
                         this.conversationId = jsonData.conversationId;
+                        sessionStorage.setItem('conversationId', jsonData.conversationId);
                       }
                       break;