chore：改了pages-tool/ai-chat/index.vue

pages_tool/ai-chat/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ai-chat-page" :style="wrapperPageStyle">
+  <view class="container" :style="wrapperPageStyle">
     <!--自定义导航头部 -->
     <view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
       <view class="header-left">
@@ -52,12 +52,7 @@ import { mapGetters, mapMutations } from 'vuex'
 import navigationHelper from '@/common/js/navigation';
 import { EventSafety } from '@/common/js/event-safety';
 
-import aiChatMessage from './ai-chat-message.vue';
-
 export default {
-  components: {
-    aiChatMessage,
-  },
   data() {
     return {
       initialMessages: [
@@ -86,11 +81,11 @@ export default {
       // --- 聊天内容区域 ---  
       scrollViewHeight: '0px',
 
-
       // 事件处理器引用（用于清理）
       safeEventHandlers: new Map()
     }
   },
+  
   computed: {
     ...mapGetters([
       'globalAIKefuConfig'
@@ -105,11 +100,11 @@ export default {
     },
     /// ---- others ----
     containerHeight() {
-      return `calc(100vh - ${this.navBarHeight + this.statusBarHeight}px)`
+      return `calc(100vh -  $ {this.navBarHeight + this.statusBarHeight}px)`
     },
     wrapperPageStyle() {
       // #ifdef H5
-      return `top: ${this.navBarHeight + 'px'};`
+      return `top:  $ {this.navBarHeight + 'px'};`
       // #endif
 
       // #ifdef MP-WEIXIN
@@ -121,35 +116,42 @@ export default {
     wrapperChatContentStyle() {
       return { 
         height: this.containerHeight,
-        paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
+        paddingTop: this.showCustomNavbar ? '0' : (this.navBarHeight + 'px')
       }
     }
   },
 
   async onLoad(options) {
-    await this.initPage(options)
+    // ✅ 新增：权限校验（关键！防止非 AI 类型进入）
+    const hasAccess = this.checkAccessPermission();
+    if (!hasAccess) {
+      // 如果校验失败，不继续初始化
+      return;
+    }
+
+    this. $langConfig.title('AI智能客服');
+    this.initChat();
   },
   
   async onReady() {
-    await this.initNavigation()
+    await this.initNavigation();
   },
 
   onShow() {
-    
+    // 可在此补充逻辑（如刷新未读数）
   },
 
   onHide() {
-
+    // 页面隐藏时可暂停音频等
   },
   
   onUnload() {
-    this.cleanup()
+    this.cleanup();
   },
 
   methods: {
     // ========== 安全事件处理 ==========
     setupSafeEventListeners() {
-      // 使用 EventSafety 包装事件处理器
       const safeHandlers = {
         serviceRequest: EventSafety.wrapEventHandler(
           this.handleServiceRequest.bind(this),
@@ -165,124 +167,100 @@ export default {
         )
       }
       
-      // 注册事件监听
+      this. $on('service.requestComponentInfo', safeHandlers.serviceRequest);
-      this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
+      this. $on('navigation.requestInfo', safeHandlers.navigationRequest);
-      this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
+      this. $on('component.interaction', safeHandlers.componentInteraction);
-      this.$on('component.interaction', safeHandlers.componentInteraction)
       
-      // 保存处理器引用用于清理
+      this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest);
-      this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
+      this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest);
-      this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
+      this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction);
-      this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
     },
 
     setupNavigationEvents() {
-      // 监听窗口大小变化
       uni.onWindowResize((res) => {
-        console.log('窗口大小变化:', res.size)
+        console.log('窗口大小变化:', res.size);
-        this.calculateScrollViewHeight()
+        this.calculateScrollViewHeight();
-      })
+      });
     },   
 
     // ========== 事件处理方法 ========== 
 
     async handleServiceRequest(event) {
-      console.log('处理服务请求:', EventSafety.extractEventData(event))
+      console.log('处理服务请求:', EventSafety.extractEventData(event));
       
-      // 安全地检查事件目标
       if (event.matches('.service-component') || 
           event.detail?.componentType === 'service') {
-        await this.processServiceRequest(event)
+        await this.processServiceRequest(event);
       }
     },
 
     async handleNavigationRequest(event) {
-      console.log('处理导航请求:', event.type)
+      console.log('处理导航请求:', event.type);
-      
+      this.emitNavigationInfo(event);
-      // 提供导航信息
-      this.emitNavigationInfo(event)
     },
 
     handleComponentInteraction(event) {
-      console.log('处理组件交互:', event.detail)
+      console.log('处理组件交互:', event.detail);
-      
+      this.processComponentInteraction(event);
-      // 安全地处理组件交互
-      this.processComponentInteraction(event)
     },
 
     handleEventError(error, event) {
       console.error('事件处理错误:', {
         error: error.message,
         eventType: event?.type,
-        component: this.$options.name
+        component: this. $options.name
-      })
+      });
       
-      this.showError('操作失败，请重试')
+      this.showError('操作失败，请重试');
     },
 
     // ========== 初始化页面 ==========
-    async initPage(options = {}) {
+    initChat() {
-      this.$langConfig.title('AI智能客服');
+      console.log('AI聊天页面初始化');
-      this.initChat()
     },
 
-
-    // 初始化导航栏相关配置
     async initNavigation() {
       try {
-        // 获取导航栏高度
+        this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false});
-        this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
+        this.statusBarHeight = navigationHelper.getStatusBarHeight();
-        
+        this.calculateScrollViewHeight();
-        // 获取状态栏高度
+        this.setupNavigationEvents();
-        this.statusBarHeight = navigationHelper.getStatusBarHeight()
-        
-        // 计算滚动视图高度
-        this.calculateScrollViewHeight()
-
-        // 注册导航相关事件
-        this.setupNavigationEvents()
-        
       } catch (error) {
-        console.error('初始化导航栏失败:', error)
+        console.error('初始化导航栏失败:', error);
-        this.setFallbackNavigationValues()
+        this.setFallbackNavigationValues();
       }
     },
 
-    // 计算滚动视图高度
     calculateScrollViewHeight() {
-      const safeArea = navigationHelper.getSafeAreaInsets()
+      const safeArea = navigationHelper.getSafeAreaInsets();
-      const bottomInset = safeArea.bottom || 0
+      const bottomInset = safeArea.bottom || 0;
-      const inputHeight = 120 // 输入区域高度
+      const inputHeight = 120;
-      
+      this.scrollViewHeight = `calc(100vh -  $ {this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`;
-      this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
     },    
 
-    // 备用高度设置
     setFallbackNavigationValues() {
       // #ifdef MP-WEIXIN
-      this.navBarHeight = 44
+      this.navBarHeight = 44;
-      this.statusBarHeight = 20
+      this.statusBarHeight = 20;
       // #endif
       
       // #ifdef H5
-      this.navBarHeight = 44
+      this.navBarHeight = 44;
-      this.statusBarHeight = 0
+      this.statusBarHeight = 0;
       // #endif
       
       // #ifdef APP-PLUS
-      this.navBarHeight = 88
+      this.navBarHeight = 88;
-      this.statusBarHeight = 44
+      this.statusBarHeight = 44;
       // #endif
     },    
 
     cleanup() {
-      // 清理事件监听器
       this.safeEventHandlers.forEach((handler, eventType) => {
-        this.$off(eventType, handler)
+        this. $off(eventType, handler);
-      })
+      });
-      this.safeEventHandlers.clear()
+      this.safeEventHandlers.clear();
-      
+      console.log('组件清理完成');
-      console.log('组件清理完成')
     },
 
     showError(message) {
@@ -290,19 +268,12 @@ export default {
         title: message,
         icon: 'none',
         duration: 2000
-      })
+      });
-    },    
-
-
-    // 初始化聊天
-    initChat() {
-      // 可以在这里加载历史消息
-      console.log('AI聊天页面初始化')
     },    
 
     // 返回上一页
     goBack() {
-      uni.navigateBack()
+      uni.navigateBack();
     },
 
     // 显示菜单
@@ -312,59 +283,54 @@ export default {
         success: (res) => {
           switch (res.tapIndex) {
             case 0:
-              this.clearChat()
+              this.clearChat();
-              break
+              break;
             case 1:
-              this.exportChat()
+              this.exportChat();
-              break
+              break;
             case 2:
-              this.showSettings()
+              this.showSettings();
-              break
+              break;
             case 3:
-              this.showHelp()
+              this.showHelp();
-              break
+              break;
           }
         }
-      })
+      });
     },
 
-    // 清空聊天
     clearChat() {
       uni.showModal({
         title: '提示',
         content: '确定要清空聊天记录吗？',
         success: (res) => {
           if (res.confirm) {
-            this.$refs.chat.clearMessages()
+            this. $refs.chat.clearMessages();
-            // 重新添加欢迎消息
+            this. $refs.chat.addMessage({
-            this.$refs.chat.addMessage({
               id: Date.now(),
               role: 'ai',
               type: 'text',
               content: '聊天记录已清空，有什么可以帮助您的吗？',
               timestamp: Date.now()
-            })
+            });
           }
         }
-      })
+      });
     },
 
-    // 导出聊天记录
     exportChat() {
       uni.showToast({
         title: '功能开发中',
         icon: 'none'
-      })
+      });
     },
 
-    // 显示设置
     showSettings() {
       uni.navigateTo({
         url: '/pages/settings/index'
-      })
+      });
     },
 
-    // 显示帮助
     showHelp() {
       const helpMessage = {
         id: Date.now(),
@@ -391,27 +357,18 @@ export default {
 - **复制**: 长按消息可复制内容
 - **转发**: 支持消息转发功能`,
         timestamp: Date.now()
-      }
+      };
-      this.$refs.chat.addMessage(helpMessage)
+      this. $refs.chat.addMessage(helpMessage);
     },
 
-    // 用户发送消息
     onMessageSent(message) {
-      console.log('用户发送消息:', message)
+      console.log('用户发送消息:', message);
-      
-      // 使用AI服务获取回复
-      // AI聊天组件内部已经集成了AI服务，这里只需要监听事件
     },
 
-    // AI回复消息
     onAIResponse(message) {
-      console.log('AI回复消息:', message)
+      console.log('AI回复消息:', message);
-      
-      // 可以在这里处理AI回复后的逻辑
-      // 比如记录对话、更新状态等
     },
 
-    // 生成AI回复
     generateAIResponse(userMessage) {
       const responses = [
         '我理解您的需求，让我为您详细解答。',
@@ -419,133 +376,142 @@ export default {
         '根据您的问题，我建议您可以考虑以下几个方面：',
         '这个问题很常见，让我为您提供一些解决方案。',
         '我明白您的困惑，让我帮您分析一下。'
-      ]
+      ];
       
-      const randomResponse = responses[Math.floor(Math.random() * responses.length)]
+      const randomResponse = responses[Math.floor(Math.random() * responses.length)];
       
       const aiMessage = {
         id: Date.now(),
         role: 'ai',
         type: 'text',
-        content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到，正在为您处理中...`,
+        content: ` $ {randomResponse}\n\n您的问题" $ {userMessage.content}"我已经收到，正在为您处理中...`,
         timestamp: Date.now(),
         actions: [
           { type: 'like', count: 0 },
           { type: 'dislike', count: 0 }
         ]
-      }
+      };
       
-      this.$refs.chat.addMessage(aiMessage)
+      this. $refs.chat.addMessage(aiMessage);
-      this.$emit('ai-response', aiMessage)
+      this. $emit('ai-response', aiMessage);
     },
 
-    // 操作按钮点击
     onActionClick({ action, message }) {
-      console.log('操作点击:', action, message)
-      
       switch (action.type) {
         case 'like':
-          uni.showToast({
+          uni.showToast({ title: '感谢您的反馈！', icon: 'success' });
-            title: '感谢您的反馈！',
+          break;
-            icon: 'success'
-          })
-          break
         case 'dislike':
-          uni.showToast({
+          uni.showToast({ title: '我们会改进服务', icon: 'none' });
-            title: '我们会改进服务',
+          break;
-            icon: 'none'
-          })
-          break
       }
     },
 
-    // 历史消息加载完成
     onHistoryLoaded(messages) {
-      console.log('历史消息加载完成:', messages.length)
+      console.log('历史消息加载完成:', messages.length);
     },
 
-    // 文件预览
     onFilePreview(message) {
-      console.log('文件预览:', message)
+      uni.showToast({ title: '打开文件: ' + message.fileName, icon: 'none' });
-      uni.showToast({
-        title: '打开文件: ' + message.fileName,
-        icon: 'none'
-      })
     },
 
-    // 音频播放
     onAudioPlay(message) {
-      console.log('音频播放:', message)
+      console.log('音频播放:', message);
     },
 
-    // 音频暂停
     onAudioPause(message) {
-      console.log('音频暂停:', message)
+      console.log('音频暂停:', message);
     },
 
-    // 视频播放
     onVideoPlay(message) {
-      console.log('视频播放:', message)
+      console.log('视频播放:', message);
     },
 
-    // 视频暂停
     onVideoPause(message) {
-      console.log('视频暂停:', message)
+      console.log('视频暂停:', message);
     },
 
-    // 链接打开
     onLinkOpen(message) {
-      console.log('链接打开:', message)
       uni.showModal({
         title: '打开链接',
-        content: `确定要打开链接：${message.url} 吗？`,
+        content: `确定要打开链接： $ {message.url} 吗？`,
         success: (res) => {
           if (res.confirm) {
             // #ifdef H5
-            window.open(message.url, '_blank')
+            window.open(message.url, '_blank');
             // #endif
             // #ifdef APP-PLUS
-            plus.runtime.openURL(message.url)
+            plus.runtime.openURL(message.url);
             // #endif
           }
         }
-      })
+      });
     },
 
-    // 商品查看
     onProductView(message) {
-      console.log('商品查看:', message)
+      uni.showToast({ title: '查看商品: ' + message.title, icon: 'none' });
-      uni.showToast({
-        title: '查看商品: ' + message.title,
-        icon: 'none'
-      })
     },
 
-    // 输入内容变化
     onInputChange(value) {
-      console.log('输入内容:', value)
+      console.log('输入内容:', value);
+    },
+
+    // ✅ 新增：权限校验（核心修复）
+    checkAccessPermission() {
+      const servicerConfig = this. $store.state.servicerConfig;
+      
+      // 如果配置未加载，延迟重试（最多3次，防白屏）
+      if (!servicerConfig) {
+        console.warn('【AI客服】servicerConfig 未加载，200ms后重试...');
+        setTimeout(() => {
+          this.checkAccessPermission();
+        }, 200);
+        return false;
+      }
+
+      let currentType = 'none';
+      // #ifdef MP-WEIXIN
+      currentType = servicerConfig?.weapp?.type || 'none';
+      // #endif
+      // #ifdef H5
+      currentType = servicerConfig?.h5?.type || 'none';
+      // #endif
+
+      if (currentType !== 'aikefu') {
+        uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
+        setTimeout(() => {
+          const pages = getCurrentPages();
+          if (pages.length > 1) {
+            uni.navigateBack();
+          } else {
+            // 回到首页（假设首页是 tab 页）
+            uni.switchTab({ url: '/pages/index/index' });
+          }
+        }, 1500);
+        return false;
+      }
+      return true;
     }
   }
 }
 </script>
 
 <style lang="scss">
-
 /* 引入图标字体 */
-@import url('@/common/css/iconfont.css');
+@import url('/common/css/iconfont.css');
 
 /* 页面样式 */
-.ai-chat-page {
+  .container {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  background-color: #f8f8f8;
+    background-color: white; /* 白色 */
-  overflow: hidden;
+    overflow: hidden;
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  bottom: 0;
+    bottom: 0;
-}
+  }
 
 /* 自定义导航头部 */
 .custom-navbar {
@@ -553,7 +519,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 30rpx;
-  background-color: white;
+  background-color: #c4e0ff; /* 浅蓝色 */
   border-bottom: 2rpx solid #eeeeee;
   
   .header-left {
@@ -565,7 +531,7 @@ export default {
       width: 60rpx;
       height: 60rpx;
       border-radius: 50%;
-      background-color: #f8f8f8;
+      background-color: #ffffff; /* 白色按钮 */
       display: flex;
       align-items: center;
       justify-content: center;
@@ -610,7 +576,7 @@ export default {
       width: 60rpx;
       height: 60rpx;
       border-radius: 50%;
-      background-color: #f8f8f8;
+      background-color: #ffffff; /* 白色按钮 */
       display: flex;
       align-items: center;
       justify-content: center;
@@ -640,12 +606,9 @@ export default {
   bottom: 0;
 }
 
-
-
 /* 底部tabBar占位样式 */
 .page-bottom {
   width: 100%;
   background-color: transparent;
 }
-
 </style>