chore: 保留ai-chat-popup 及 ai-chat-flaot组件

pages_tool/ai-chat/index.json

@@ -1,5 +1,4 @@
 {
-  "navigationBarTitleText": "AI智能客服",
   "navigationBarBackgroundColor": "#ff4544",
   "navigationBarTextStyle": "white",
   "backgroundColor": "#f8f8f8",

pages_tool/ai-chat/index.vue

@@ -1,24 +1,30 @@
 <template>
-  <view class="ai-chat-page" :style="{ top: navBarHeight + 'px' }">
-    <!-- 页面头部 -->
-    <view class="page-header" ref="pageHeader">
+  <view class="ai-chat-page" :style="wrapperPageStyle">
+    <!--自定义导航头部 -->
+    <view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
       <view class="header-left">
-        <button class="back-btn" @click="goBack">
+        <button class="back-btn" v-show="showBackButton" @click="goBack">
           <text class="iconfont icon-back"></text>
         </button>
+        <!-- 占位元素，确保布局平衡 -->
+        <view v-show="!showBackButton" class="placeholder"></view>
       </view>
       <view class="header-center">
         <text class="header-subtitle">在线为您服务</text>
       </view>
       <view class="header-right">
-        <button class="menu-btn" @click="showMenu">
-          <text class="iconfont icon-menu"></text>
+        <button class="menu-btn" v-show="showMenuButton" @click="showMenu">
+          <text class="iconfont icon-ellipsis"></text>
         </button>
+        <!-- 占位元素，确保布局平衡 -->
+        <view v-show="!showMenuButton" class="placeholder"></view>
       </view>
     </view>
 
     <!-- 聊天内容区域 -->
-    <view class="chat-content" :style="chatContentStyle">
+    <view class="chat-content" 
+      :style="wrapperChatContentStyle"
+      >
       <!-- AI聊天组件 -->
       <ai-chat-message 
         ref="chat"
@@ -38,13 +44,14 @@
         @product-view="onProductView"
         @input-change="onInputChange" />
     </view>
-    
-    <!-- 底部tabBar占位 -->
-    <view v-if="showTabBar" class="page-bottom" :style="{ height: computedTabBarHeight }"></view>
   </view>
 </template>
 
 <script>
+import { mapGetters, mapMutations } from 'vuex'
+import navigationHelper from '@/common/js/navigation';
+import { EventSafety } from '@/common/js/event-safety';
+
 export default {
   data() {
     return {
@@ -56,174 +63,233 @@ export default {
           content: '您好！我是AI智能客服，很高兴为您服务！\n\n我可以帮您：\n• 解答产品相关问题\n• 处理订单问题\n• 提供技术支持\n• 推荐相关商品\n\n请告诉我您需要什么帮助？',
           timestamp: Date.now() - 60000,
           actions: [
-            { type: 'like', count: 0 },
-            { type: 'dislike', count: 0 }
+            { type: 'like', icon: 'icon-dianzan1', text: '喜欢', count: 0 },
+            { type: 'dislike', icon: 'icon-dianzan1', text: '不喜欢', count: 0 }
           ]
         }
       ],
-      userAvatar: '/static/images/user-avatar.png',
-      aiAvatar: '/static/images/ai-avatar.png',
 
-      // 是否显示底部tabBar
-      showTabBar: false,
-      tabBarHeight: '56px',
-      
-      // 页面头部高度
-      headerHeight: 0,
-      
-      // uni-page-head 导航栏高度
-      navBarHeight: 44 // 默认高度为44px
+      // --- 系统导航栏/状态栏相关 ---
+      navBarHeight: 44,   // uni-page-head 系统导航栏，默认高度为44px
+      statusBarHeight: 0, // 状态栏高度，默认0
+
+      // --- 自定义导航栏 ---
+      showCustomNavbar: true,    // 是否显示自定义导航栏
+      showBackButton: false,      // 是否显示返回按钮
+      showMenuButton: true,      // 是否显示设置菜单按钮
+
+      // --- 聊天内容区域 ---  
+      scrollViewHeight: '0px',
+
+
+      // 事件处理器引用（用于清理）
+      safeEventHandlers: new Map()
     }
   },
   
   computed: {
-    // 获取底部栏高度
-    computedTabBarHeight() {
-      return this.tabBarHeight || '56px'
+    ...mapGetters([
+      'globalAIAgentConfig'
+    ]),    
+
+    /// ---- 关于AI客服的配置，支持远程配置 ----
+    userAvatar() {
+      return this.globalAIAgentConfig?.userAvatar || '/static/images/user-avatar.png'
     },
-    
-    // 计算聊天内容区域高度
-    chatContentHeight() {
-      if (this.headerHeight === 0 || this.navBarHeight === 0) {
-        return 'calc(100vh - 120rpx)' // 默认高度
+    aiAvatar() {
+      return this.globalAIAgentConfig?.aiAvatar || '/static/images/ai-avatar.png'
+    },
+    /// ---- others ----
+    containerHeight() {
+      return `calc(100vh - ${this.navBarHeight + this.statusBarHeight}px)`
+    },
+    wrapperPageStyle() {
+      // #ifdef H5
+      return {
+        top: this.navBarHeight + 'px'
+      }      
+      // #endif
+      return {}
+    },
+    wrapperChatContentStyle() {
+      return { 
+        height: this.containerHeight,
+        paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
       }
-      
-      // 直接使用获取到的像素高度进行计算
-      const headerHeightPx = this.headerHeight
-      const tabBarHeightPx = this.showTabBar ? parseInt(this.tabBarHeight) : 0
-      
-      // 计算剩余高度，使用px单位确保一致性（页面已经设置了top值，不需要再减去navBar高度）
-      const remainingHeight = `calc(100vh - ${headerHeightPx}px - ${tabBarHeightPx}px)`
-      return remainingHeight
     }
   },
 
-  onLoad() {
-    // 设置页面标题
-    this.$langConfig.title('AI智能客服');
-    // 页面加载时初始化
-    this.initChat()
+  async onLoad(options) {
+    await this.initPage(options)
   },
   
-  onReady() {
-    // 页面渲染完成后获取头部高度
-    // 使用更长的延迟确保DOM完全渲染完成
-    this.$nextTick(() => {
-      this.$forceUpdate()
-      this.getNavBarHeight()      
-      this.getHeaderHeight()
-    })
-  },
-  
-  onShow() {
-    // 页面显示时再次获取高度，确保布局正确
-    this.$nextTick(() => {
-      this.$forceUpdate()
-      this.getNavBarHeight()      
-      this.getHeaderHeight()
-    })    
+  async onReady() {
+    await this.initNavigation()
   },
 
+  onShow() {
+    
+  },
+
+  onHide() {
+
+  },
+  
+  onUnload() {
+    this.cleanup()
+  },
+
+
+  
+
   methods: {
-    // 获取页面头部高度
-    getHeaderHeight(retryCount = 0) {
-      // 使用Vue ref方式获取元素高度
-      const query = uni.createSelectorQuery().in(this)
-      query.select(this.$refs.pageHeader).boundingClientRect(data => {
-        if (data && data.height > 0) {
-          this.headerHeight = data.height
-          console.log('页面头部高度:', this.headerHeight + 'px')
-          
-          // 高度获取成功后，强制更新视图
-          this.$forceUpdate()
-          
-          // 延迟一段时间后再次检查，确保布局稳定
-          setTimeout(() => {
-            this.checkLayoutStability()
-          }, 100)
-        } else {
-          // 如果获取失败，重试最多3次
-          if (retryCount < 3) {
-            console.log('获取头部高度失败，第' + (retryCount + 1) + '次重试')
-            setTimeout(() => {
-              this.getHeaderHeight(retryCount + 1)
-            }, 300)
-          } else {
-            console.log('获取头部高度失败，使用默认高度')
-            // 使用默认高度
-            this.headerHeight = 60 // 假设默认高度为60px
-          }
-        }
-      }).exec()
+    // ========== 安全事件处理 ==========
+    setupSafeEventListeners() {
+      // 使用 EventSafety 包装事件处理器
+      const safeHandlers = {
+        serviceRequest: EventSafety.wrapEventHandler(
+          this.handleServiceRequest.bind(this),
+          { onError: this.handleEventError.bind(this) }
+        ),
+        navigationRequest: EventSafety.wrapEventHandler(
+          this.handleNavigationRequest.bind(this),
+          { onError: this.handleEventError.bind(this) }
+        ),
+        componentInteraction: EventSafety.wrapEventHandler(
+          this.handleComponentInteraction.bind(this),
+          { onError: this.handleEventError.bind(this) }
+        )
+      }
+      
+      // 注册事件监听
+      this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
+      this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
+      this.$on('component.interaction', safeHandlers.componentInteraction)
+      
+      // 保存处理器引用用于清理
+      this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
+      this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
+      this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
+    },
+
+    setupNavigationEvents() {
+      // 监听窗口大小变化
+      uni.onWindowResize((res) => {
+        console.log('窗口大小变化:', res.size)
+        this.calculateScrollViewHeight()
+      })
+    },   
+
+    // ========== 事件处理方法 ========== 
+
+    async handleServiceRequest(event) {
+      console.log('处理服务请求:', EventSafety.extractEventData(event))
+      
+      // 安全地检查事件目标
+      if (event.matches('.service-component') || 
+          event.detail?.componentType === 'service') {
+        await this.processServiceRequest(event)
+      }
+    },
+
+    async handleNavigationRequest(event) {
+      console.log('处理导航请求:', event.type)
+      
+      // 提供导航信息
+      this.emitNavigationInfo(event)
+    },
+
+    handleComponentInteraction(event) {
+      console.log('处理组件交互:', event.detail)
+      
+      // 安全地处理组件交互
+      this.processComponentInteraction(event)
+    },
+
+    handleEventError(error, event) {
+      console.error('事件处理错误:', {
+        error: error.message,
+        eventType: event?.type,
+        component: this.$options.name
+      })
+      
+      this.showError('操作失败，请重试')
+    },
+
+    // ========== 初始化页面 ==========
+    async initPage(options = {}) {
+      this.$langConfig.title('AI智能客服');
+      this.initChat()
     },
     
-    // 检查布局稳定性
-    checkLayoutStability() {
-      // 再次获取头部高度，确保布局稳定
-      const query = uni.createSelectorQuery().in(this)
-      query.select(this.$refs.pageHeader).boundingClientRect(data => {
-        if (data && data.height > 0 && data.height !== this.headerHeight) {
-          console.log('布局发生变化，更新高度:', data.height + 'px')
-          this.headerHeight = data.height
-          this.$forceUpdate()
-        }
-      }).exec()
+
+    // 初始化导航栏相关配置
+    async initNavigation() {
+      try {
+        // 获取导航栏高度
+        this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
+        
+        // 获取状态栏高度
+        this.statusBarHeight = navigationHelper.getStatusBarHeight()
+        
+        // 计算滚动视图高度
+        this.calculateScrollViewHeight()
+
+        // 注册导航相关事件
+        this.setupNavigationEvents()
+        
+      } catch (error) {
+        console.error('初始化导航栏失败:', error)
+        this.setFallbackNavigationValues()
+      }
     },
-    
-    // 获取uni-page-head导航栏高度
-    getNavBarHeight(retryCount = 0) {
-      // 使用选择器获取uni-page-head元素高度
-      const query = uni.createSelectorQuery().in(this)
-      query.select('.uni-page-head').boundingClientRect(data => {
-        if (data && data.height > 0) {
-          this.navBarHeight = data.height
-          console.log('uni-page-head高度:', this.navBarHeight + 'px')
-          
-          // 高度获取成功后，强制更新视图
-          this.$forceUpdate()
-        } else {
-          // 如果获取失败，重试最多3次
-          if (retryCount < 3) {
-            console.log('获取uni-page-head高度失败，第' + (retryCount + 1) + '次重试')
-            setTimeout(() => {
-              this.getNavBarHeight(retryCount + 1)
-            }, 300)
-          } else {
-            console.log('获取uni-page-head高度失败，使用默认高度')
-            // 使用默认高度（uni-app导航栏默认高度通常为44px）
-            this.navBarHeight = 44
-          }
-        }
-      }).exec()
+
+    // 计算滚动视图高度
+    calculateScrollViewHeight() {
+      const safeArea = navigationHelper.getSafeAreaInsets()
+      const bottomInset = safeArea.bottom || 0
+      const inputHeight = 120 // 输入区域高度
+      
+      this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
+    },    
+
+    // 备用高度设置
+    setFallbackNavigationValues() {
+      // #ifdef MP-WEIXIN
+      this.navBarHeight = 44
+      this.statusBarHeight = 20
+      // #endif
+      
+      // #ifdef H5
+      this.navBarHeight = 44
+      this.statusBarHeight = 0
+      // #endif
+      
+      // #ifdef APP-PLUS
+      this.navBarHeight = 88
+      this.statusBarHeight = 44
+      // #endif
+    },    
+
+    cleanup() {
+      // 清理事件监听器
+      this.safeEventHandlers.forEach((handler, eventType) => {
+        this.$off(eventType, handler)
+      })
+      this.safeEventHandlers.clear()
+      
+      console.log('组件清理完成')
     },
-    
-    // 获取uni-page-head导航栏高度
-    getNavBarHeight(retryCount = 0) {
-      // 使用选择器获取uni-page-head元素高度
-      const query = uni.createSelectorQuery().in(this)
-      query.select('.uni-page-head').boundingClientRect(data => {
-        if (data && data.height > 0) {
-          this.navBarHeight = data.height
-          console.log('uni-page-head高度:', this.navBarHeight + 'px')
-          
-          // 高度获取成功后，强制更新视图
-          this.$forceUpdate()
-        } else {
-          // 如果获取失败，重试最多3次
-          if (retryCount < 3) {
-            console.log('获取uni-page-head高度失败，第' + (retryCount + 1) + '次重试')
-            setTimeout(() => {
-              this.getNavBarHeight(retryCount + 1)
-            }, 300)
-          } else {
-            console.log('获取uni-page-head高度失败，使用默认高度')
-            // 使用默认高度（uni-app导航栏默认高度通常为44px）
-            this.navBarHeight = 44
-          }
-        }
-      }).exec()
-    },
-    
+
+    showError(message) {
+      uni.showToast({
+        title: message,
+        icon: 'none',
+        duration: 2000
+      })
+    },    
+
+
     // 初始化聊天
     initChat() {
       // 可以在这里加载历史消息
@@ -465,19 +531,19 @@ export default {
 
 /* 页面样式 */
 .ai-chat-page {
-  height: calc(100vh - var(--nav-bar-height, 44px));
   display: flex;
   flex-direction: column;
   background-color: #f8f8f8;
   overflow: hidden;
   position: fixed;
+  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
 
-/* 页面头部 */
-.page-header {
+/* 自定义导航头部 */
+.custom-navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -487,6 +553,8 @@ export default {
   
   .header-left {
     flex: 0 0 auto;
+    display: flex;
+    align-items: center;
     
     .back-btn {
       width: 60rpx;
@@ -502,6 +570,11 @@ export default {
         color: #666;
       }
     }
+    
+    .placeholder {
+      width: 120rpx;
+      height: 60rpx;
+    }
   }
   
   .header-center {
@@ -525,6 +598,8 @@ export default {
   
   .header-right {
     flex: 0 0 auto;
+    display: flex;
+    align-items: center;
     
     .menu-btn {
       width: 60rpx;
@@ -540,6 +615,11 @@ export default {
         color: #666;
       }
     }
+    
+    .placeholder {
+      width: 120rpx;
+      height: 60rpx;
+    }
   }
 }
 
@@ -549,6 +629,10 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }