chore: 修复输入区导致的高度问题

components/ai-chat-message/ai-chat-message.vue

@@ -276,7 +276,7 @@
 </template>
 
 <script>
-import nsLoading from '../ns-loading/ns-loading.vue'
+import nsLoading from '@/components/ns-loading/ns-loading.vue'
 
 export default {
   name: 'ai-chat-message',
@@ -774,17 +774,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 .ai-chat-container {
   height: 100%;
   display: flex;
   flex-direction: column;
   background-color: #f8f8f8;
+  overflow: hidden;
 }
 
 .chat-messages {
   flex: 1;
   padding: 20rpx;
-  overflow: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  height: calc(100% - 200rpx); /* 减去输入区域高度 */
 }
 
 .load-more {
@@ -821,6 +825,8 @@ export default {
     flex: 1;
     margin-left: 20rpx;
     max-width: calc(100% - 100rpx);
+    min-width: 0;
+    width: 0; /* 添加这个属性防止flex元素溢出 */
   }
 }
 

pages_tool/ai-chat/index.json

@@ -0,0 +1,11 @@
+{
+  "navigationBarTitleText": "AI智能客服",
+  "navigationBarBackgroundColor": "#ff4544",
+  "navigationBarTextStyle": "white",
+  "backgroundColor": "#f8f8f8",
+  "enablePullDownRefresh": false,
+  "onReachBottomDistance": 50,
+  "usingComponents": {
+    "ai-chat-message": "/components/ai-chat-message/ai-chat-message"
+  }
+}

pages_tool/ai-chat/index.vue

@@ -0,0 +1,398 @@
+<template>
+  <view class="ai-chat-page">
+    <!-- 页面头部 -->
+    <view class="page-header">
+      <view class="header-left">
+        <button class="back-btn" @click="goBack">
+          <text class="iconfont icon-back"></text>
+        </button>
+      </view>
+      <view class="header-center">
+        <text class="header-title">AI智能客服</text>
+        <text class="header-subtitle">在线为您服务</text>
+      </view>
+      <view class="header-right">
+        <button class="menu-btn" @click="showMenu">
+          <text class="iconfont icon-menu"></text>
+        </button>
+      </view>
+    </view>
+
+    <!-- 聊天内容区域 -->
+    <view class="chat-content">
+      <!-- AI聊天组件 -->
+      <ai-chat-message 
+        ref="chat"
+        :initial-messages="initialMessages"
+        :user-avatar="userAvatar"
+        :ai-avatar="aiAvatar"
+        @message-sent="onMessageSent"
+        @ai-response="onAIResponse"
+        @action-click="onActionClick"
+        @history-loaded="onHistoryLoaded"
+        @file-preview="onFilePreview"
+        @audio-play="onAudioPlay"
+        @audio-pause="onAudioPause"
+        @video-play="onVideoPlay"
+        @video-pause="onVideoPause"
+        @link-open="onLinkOpen"
+        @product-view="onProductView"
+        @input-change="onInputChange" />
+    </view>
+    
+    <!-- 底部tabBar占位 -->
+    <!-- <view class="page-bottom" :style="{ height: computedTabBarHeight }"></view> -->
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      initialMessages: [
+        {
+          id: 1,
+          role: 'ai',
+          type: 'text',
+          content: '您好！我是AI智能客服，很高兴为您服务！\n\n我可以帮您：\n• 解答产品相关问题\n• 处理订单问题\n• 提供技术支持\n• 推荐相关商品\n\n请告诉我您需要什么帮助？',
+          timestamp: Date.now() - 60000,
+          actions: [
+            { type: 'like', count: 0 },
+            { type: 'dislike', count: 0 }
+          ]
+        }
+      ],
+      userAvatar: '/static/images/user-avatar.png',
+      aiAvatar: '/static/images/ai-avatar.png',
+      tabBarHeight: '56px'
+    }
+  },
+  
+  computed: {
+    // 获取底部栏高度
+    computedTabBarHeight() {
+      return this.tabBarHeight || '56px'
+    }
+  },
+
+  onLoad() {
+    // 页面加载时初始化
+    this.initChat()
+  },
+
+  methods: {
+    // 初始化聊天
+    initChat() {
+      // 可以在这里加载历史消息
+      console.log('AI聊天页面初始化')
+    },
+
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+
+    // 显示菜单
+    showMenu() {
+      uni.showActionSheet({
+        itemList: ['清空聊天', '导出记录', '设置', '帮助'],
+        success: (res) => {
+          switch (res.tapIndex) {
+            case 0:
+              this.clearChat()
+              break
+            case 1:
+              this.exportChat()
+              break
+            case 2:
+              this.showSettings()
+              break
+            case 3:
+              this.showHelp()
+              break
+          }
+        }
+      })
+    },
+
+    // 清空聊天
+    clearChat() {
+      uni.showModal({
+        title: '提示',
+        content: '确定要清空聊天记录吗？',
+        success: (res) => {
+          if (res.confirm) {
+            this.$refs.chat.clearMessages()
+            // 重新添加欢迎消息
+            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(),
+        role: 'ai',
+        type: 'markdown',
+        content: `# 使用帮助
+
+## 基本功能
+- **发送消息**: 在输入框中输入文字后发送
+- **语音输入**: 点击麦克风图标进行语音输入
+- **附件发送**: 点击+号可以发送图片、文件、位置
+
+## 消息类型
+- **文本消息**: 普通文字对话
+- **Markdown**: 支持格式化的文档内容
+- **文件**: 支持各种文件格式预览
+- **音频**: 支持语音消息播放
+- **视频**: 支持视频播放
+- **链接**: 支持网页链接跳转
+- **商品**: 支持商品卡片展示
+
+## 操作功能
+- **点赞/踩**: 对AI回复进行评价
+- **复制**: 长按消息可复制内容
+- **转发**: 支持消息转发功能`,
+        timestamp: Date.now()
+      }
+      this.$refs.chat.addMessage(helpMessage)
+    },
+
+    // 用户发送消息
+    onMessageSent(message) {
+      console.log('用户发送消息:', message)
+      
+      // 模拟AI回复
+      setTimeout(() => {
+        this.generateAIResponse(message)
+      }, 1000)
+    },
+
+    // AI回复消息
+    onAIResponse(message) {
+      console.log('AI回复消息:', message)
+    },
+
+    // 生成AI回复
+    generateAIResponse(userMessage) {
+      const responses = [
+        '我理解您的需求，让我为您详细解答。',
+        '感谢您的提问，这是一个很好的问题。',
+        '根据您的问题，我建议您可以考虑以下几个方面：',
+        '这个问题很常见，让我为您提供一些解决方案。',
+        '我明白您的困惑，让我帮您分析一下。'
+      ]
+      
+      const randomResponse = responses[Math.floor(Math.random() * responses.length)]
+      
+      const aiMessage = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'text',
+        content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到，正在为您处理中...`,
+        timestamp: Date.now(),
+        actions: [
+          { type: 'like', count: 0 },
+          { type: 'dislike', count: 0 }
+        ]
+      }
+      
+      this.$refs.chat.addMessage(aiMessage)
+      this.$emit('ai-response', aiMessage)
+    },
+
+    // 操作按钮点击
+    onActionClick({ action, message }) {
+      console.log('操作点击:', action, message)
+      
+      switch (action.type) {
+        case 'like':
+          uni.showToast({
+            title: '感谢您的反馈！',
+            icon: 'success'
+          })
+          break
+        case 'dislike':
+          uni.showToast({
+            title: '我们会改进服务',
+            icon: 'none'
+          })
+          break
+      }
+    },
+
+    // 历史消息加载完成
+    onHistoryLoaded(messages) {
+      console.log('历史消息加载完成:', messages.length)
+    },
+
+    // 文件预览
+    onFilePreview(message) {
+      console.log('文件预览:', message)
+      uni.showToast({
+        title: '打开文件: ' + message.fileName,
+        icon: 'none'
+      })
+    },
+
+    // 音频播放
+    onAudioPlay(message) {
+      console.log('音频播放:', message)
+    },
+
+    // 音频暂停
+    onAudioPause(message) {
+      console.log('音频暂停:', message)
+    },
+
+    // 视频播放
+    onVideoPlay(message) {
+      console.log('视频播放:', message)
+    },
+
+    // 视频暂停
+    onVideoPause(message) {
+      console.log('视频暂停:', message)
+    },
+
+    // 链接打开
+    onLinkOpen(message) {
+      console.log('链接打开:', message)
+      uni.showModal({
+        title: '打开链接',
+        content: `确定要打开链接：${message.url} 吗？`,
+        success: (res) => {
+          if (res.confirm) {
+            // #ifdef H5
+            window.open(message.url, '_blank')
+            // #endif
+            // #ifdef APP-PLUS
+            plus.runtime.openURL(message.url)
+            // #endif
+          }
+        }
+      })
+    },
+
+    // 商品查看
+    onProductView(message) {
+      console.log('商品查看:', message)
+      uni.showToast({
+        title: '查看商品: ' + message.title,
+        icon: 'none'
+      })
+    },
+
+    // 输入内容变化
+    onInputChange(value) {
+      console.log('输入内容:', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+/* 引入图标字体 */
+@import url('/common/css/iconfont.css');
+
+/* 页面样式 */
+.ai-chat-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f8f8f8;
+  overflow: hidden;
+}
+
+/* 聊天内容区域 */
+.chat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: calc(100vh - 120rpx); /* 减去头部高度 */
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 30rpx;
+  background-color: white;
+  border-bottom: 2rpx solid #eeeeee;
+  
+  .header-left, .header-right {
+    flex: 1;
+    
+    .back-btn, .menu-btn {
+      width: 60rpx;
+      height: 60rpx;
+      border-radius: 50%;
+      background-color: #f8f8f8;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      .iconfont {
+        font-size: 32rpx;
+        color: #666;
+      }
+    }
+  }
+  
+  .header-center {
+    flex: 2;
+    text-align: center;
+    
+    .header-title {
+      display: block;
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #333;
+    }
+    
+    .header-subtitle {
+      display: block;
+      font-size: 24rpx;
+      color: #999;
+      margin-top: 5rpx;
+    }
+  }
+  
+  .header-right {
+    text-align: right;
+  }
+}
+
+/* 底部tabBar占位样式 */
+.page-bottom {
+  width: 100%;
+  background-color: transparent;
+}
+
+</style>