Claw 项目完整结构提交

Claw/client/wechat_app/pages/chat/chat.js

@@ -0,0 +1,436 @@
+// 聊天页面逻辑
+const { API, WebSocketManager, util, constants } = require('../../utils/api.js')
+const { formatRelativeTime } = util
+const { MESSAGE_TYPE, WS_MESSAGE_TYPE } = constants
+
+Page({
+  data: {
+    messages: [],
+    inputValue: '',
+    sending: false,
+    websocketManager: null,
+    lastMessageId: '',
+    isConnected: false
+  },
+
+  onLoad() {
+    this.initWebSocket()
+    this.loadChatHistory()
+  },
+
+  onUnload() {
+    if (this.data.websocketManager) {
+      this.data.websocketManager.disconnect()
+    }
+  },
+
+  // 初始化WebSocket连接
+  initWebSocket() {
+    const manager = new WebSocketManager()
+    const app = getApp()
+    
+    manager.onMessage(WS_MESSAGE_TYPE.MESSAGE, (data) => {
+      this.handleNewMessage(data)
+    })
+    
+    manager.onMessage(WS_MESSAGE_TYPE.SYSTEM, (data) => {
+      this.handleSystemMessage(data)
+    })
+    
+    manager.connect(app.globalData.websocketUrl)
+    
+    this.setData({
+      websocketManager: manager,
+      isConnected: true
+    })
+  },
+
+  // 加载聊天记录
+  async loadChatHistory() {
+    try {
+      const result = await API.getChatHistory(1, 50)
+      if (result.success && result.data) {
+        const messages = result.data.messages.map(msg => ({
+          id: msg.id,
+          content: msg.content,
+          type: msg.type || MESSAGE_TYPE.TEXT,
+          isMe: msg.isMe || false,
+          nickname: msg.nickname || 'AI助手',
+          avatar: msg.avatar || '/assets/images/ai-avatar.png',
+          time: formatRelativeTime(new Date(msg.timestamp))
+        }))
+        
+        this.setData({
+          messages: messages.reverse()
+        })
+        
+        this.scrollToBottom()
+      }
+    } catch (error) {
+      console.error('加载聊天记录失败:', error)
+    }
+  },
+
+  // 处理新消息
+  handleNewMessage(data) {
+    const message = {
+      id: data.id || util.generateUniqueId(),
+      content: data.content,
+      type: data.type || MESSAGE_TYPE.TEXT,
+      isMe: false,
+      nickname: data.nickname || 'AI助手',
+      avatar: data.avatar || '/assets/images/ai-avatar.png',
+      time: formatRelativeTime(new Date())
+    }
+    
+    this.addMessage(message)
+  },
+
+  // 处理系统消息
+  handleSystemMessage(data) {
+    const message = {
+      id: data.id || util.generateUniqueId(),
+      content: data.content,
+      type: MESSAGE_TYPE.SYSTEM,
+      isMe: false,
+      nickname: '系统',
+      avatar: '/assets/images/system-avatar.png',
+      time: formatRelativeTime(new Date())
+    }
+    
+    this.addMessage(message)
+  },
+
+  // 添加消息
+  addMessage(message) {
+    const messages = [...this.data.messages, message]
+    this.setData({
+      messages: messages,
+      lastMessageId: message.id
+    })
+    
+    this.scrollToBottom()
+  },
+
+  // 滚动到底部
+  scrollToBottom() {
+    if (this.data.messages.length > 0) {
+      const lastMessage = this.data.messages[this.data.messages.length - 1]
+      this.setData({
+        lastMessageId: lastMessage.id
+      })
+    }
+  },
+
+  // 输入变化
+  onInputChange(e) {
+    this.setData({
+      inputValue: e.detail.value
+    })
+  },
+
+  // 发送消息
+  async sendMessage() {
+    const content = this.data.inputValue.trim()
+    if (!content || this.data.sending) {
+      return
+    }
+    
+    this.setData({
+      sending: true
+    })
+    
+    // 添加用户消息到界面
+    const userMessage = {
+      id: util.generateUniqueId(),
+      content: content,
+      type: MESSAGE_TYPE.TEXT,
+      isMe: true,
+      nickname: '我',
+      avatar: '/assets/images/user-avatar.png',
+      time: formatRelativeTime(new Date())
+    }
+    
+    this.addMessage(userMessage)
+    
+    try {
+      // 通过WebSocket发送消息
+      if (this.data.websocketManager && this.data.isConnected) {
+        this.data.websocketManager.send({
+          type: WS_MESSAGE_TYPE.MESSAGE,
+          content: content,
+          messageType: MESSAGE_TYPE.TEXT,
+          timestamp: Date.now()
+        })
+      } else {
+        // 通过HTTP API发送消息
+        await API.sendMessage(content, MESSAGE_TYPE.TEXT)
+      }
+      
+      this.setData({
+        inputValue: '',
+        sending: false
+      })
+    } catch (error) {
+      console.error('发送消息失败:', error)
+      util.showError('发送失败，请重试')
+      this.setData({
+        sending: false
+      })
+    }
+  },
+
+  // 选择图片
+  chooseImage() {
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        this.uploadImage(res.tempFilePaths[0])
+      },
+      fail: (error) => {
+        console.error('选择图片失败:', error)
+      }
+    })
+  },
+
+  // 上传图片
+  async uploadImage(filePath) {
+    try {
+      util.showLoading('上传中...')
+      
+      const result = await API.uploadFile(filePath, {
+        type: 'image',
+        messageType: MESSAGE_TYPE.IMAGE
+      })
+      
+      util.hideLoading()
+      
+      if (result.success) {
+        // 发送图片消息
+        const imageMessage = {
+          id: util.generateUniqueId(),
+          content: result.data.url,
+          type: MESSAGE_TYPE.IMAGE,
+          isMe: true,
+          nickname: '我',
+          avatar: '/assets/images/user-avatar.png',
+          time: formatRelativeTime(new Date())
+        }
+        
+        this.addMessage(imageMessage)
+        
+        // 通过WebSocket发送图片消息
+        if (this.data.websocketManager && this.data.isConnected) {
+          this.data.websocketManager.send({
+            type: WS_MESSAGE_TYPE.MESSAGE,
+            content: result.data.url,
+            messageType: MESSAGE_TYPE.IMAGE,
+            timestamp: Date.now()
+          })
+        }
+      }
+    } catch (error) {
+      util.hideLoading()
+      console.error('上传图片失败:', error)
+      util.showError('上传失败')
+    }
+  },
+
+  // 显示更多操作
+  showMoreActions() {
+    wx.showActionSheet({
+      itemList: ['发送文件', '语音输入', '清空聊天记录'],
+      success: (res) => {
+        switch (res.tapIndex) {
+          case 0:
+            this.chooseFile()
+            break
+          case 1:
+            this.startVoiceInput()
+            break
+          case 2:
+            this.clearChatHistory()
+            break
+        }
+      }
+    })
+  },
+
+  // 选择文件
+  chooseFile() {
+    wx.chooseMessageFile({
+      count: 1,
+      type: 'file',
+      success: (res) => {
+        this.uploadFile(res.tempFiles[0])
+      },
+      fail: (error) => {
+        console.error('选择文件失败:', error)
+      }
+    })
+  },
+
+  // 上传文件
+  async uploadFile(file) {
+    try {
+      util.showLoading('上传中...')
+      
+      const result = await API.uploadFile(file.path, {
+        type: 'file',
+        messageType: MESSAGE_TYPE.FILE,
+        fileName: file.name,
+        fileSize: file.size
+      })
+      
+      util.hideLoading()
+      
+      if (result.success) {
+        // 发送文件消息
+        const fileMessage = {
+          id: util.generateUniqueId(),
+          content: result.data.url,
+          type: MESSAGE_TYPE.FILE,
+          isMe: true,
+          nickname: '我',
+          avatar: '/assets/images/user-avatar.png',
+          time: formatRelativeTime(new Date()),
+          fileName: file.name,
+          fileSize: util.formatFileSize(file.size)
+        }
+        
+        this.addMessage(fileMessage)
+        
+        // 通过WebSocket发送文件消息
+        if (this.data.websocketManager && this.data.isConnected) {
+          this.data.websocketManager.send({
+            type: WS_MESSAGE_TYPE.MESSAGE,
+            content: result.data.url,
+            messageType: MESSAGE_TYPE.FILE,
+            fileName: file.name,
+            fileSize: file.size,
+            timestamp: Date.now()
+          })
+        }
+      }
+    } catch (error) {
+      util.hideLoading()
+      console.error('上传文件失败:', error)
+      util.showError('上传失败')
+    }
+  },
+
+  // 开始语音输入
+  startVoiceInput() {
+    wx.showModal({
+      title: '语音输入',
+      content: '按住录音按钮开始录音',
+      showCancel: true,
+      confirmText: '开始录音',
+      success: (res) => {
+        if (res.confirm) {
+          this.startRecording()
+        }
+      }
+    })
+  },
+
+  // 开始录音
+  startRecording() {
+    const recorderManager = wx.getRecorderManager()
+    
+    recorderManager.onStart(() => {
+      console.log('录音开始')
+    })
+    
+    recorderManager.onStop((res) => {
+      console.log('录音结束', res)
+      if (res.tempFilePath) {
+        this.uploadAudio(res.tempFilePath)
+      }
+    })
+    
+    recorderManager.start({
+      duration: 60000, // 最长60秒
+      sampleRate: 16000,
+      numberOfChannels: 1,
+      encodeBitRate: 96000,
+      format: 'mp3'
+    })
+    
+    // 5秒后自动停止录音
+    setTimeout(() => {
+      recorderManager.stop()
+    }, 5000)
+  },
+
+  // 上传音频文件
+  async uploadAudio(filePath) {
+    try {
+      util.showLoading('处理中...')
+      
+      const result = await API.uploadFile(filePath, {
+        type: 'audio',
+        messageType: MESSAGE_TYPE.AUDIO
+      })
+      
+      util.hideLoading()
+      
+      if (result.success) {
+        // 发送音频消息
+        const audioMessage = {
+          id: util.generateUniqueId(),
+          content: result.data.url,
+          type: MESSAGE_TYPE.AUDIO,
+          isMe: true,
+          nickname: '我',
+          avatar: '/assets/images/user-avatar.png',
+          time: formatRelativeTime(new Date())
+        }
+        
+        this.addMessage(audioMessage)
+        
+        // 通过WebSocket发送音频消息
+        if (this.data.websocketManager && this.data.isConnected) {
+          this.data.websocketManager.send({
+            type: WS_MESSAGE_TYPE.MESSAGE,
+            content: result.data.url,
+            messageType: MESSAGE_TYPE.AUDIO,
+            timestamp: Date.now()
+          })
+        }
+      }
+    } catch (error) {
+      util.hideLoading()
+      console.error('上传音频失败:', error)
+      util.showError('处理失败')
+    }
+  },
+
+  // 清空聊天记录
+  clearChatHistory() {
+    wx.showModal({
+      title: '清空聊天记录',
+      content: '确定要清空所有聊天记录吗？此操作不可恢复。',
+      confirmText: '清空',
+      confirmColor: '#dd524d',
+      success: (res) => {
+        if (res.confirm) {
+          this.setData({
+            messages: [],
+            lastMessageId: ''
+          })
+          
+          // 清空本地存储
+          wx.removeStorageSync('chatHistory')
+          
+          wx.showToast({
+            title: '已清空',
+            icon: 'success'
+          })
+        }
+      }
+    })
+  }
+})

Claw/client/wechat_app/pages/chat/chat.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "智能聊天"
+}

Claw/client/wechat_app/pages/chat/chat.wxml

@@ -0,0 +1,63 @@
+<!-- 聊天页面 -->
+<view class="chat-container">
+  <!-- 消息列表 -->
+  <scroll-view 
+    class="message-list" 
+    scroll-y="{{true}}" 
+    scroll-into-view="{{lastMessageId}}"
+    enable-back-to-top="{{true}}"
+  >
+    <view 
+      wx:for="{{messages}}" 
+      wx:key="id" 
+      id="{{item.id}}"
+      class="message-item {{item.isMe ? 'message-right' : 'message-left'}}"
+    >
+      <view class="message-avatar">
+        <image src="{{item.avatar}}" mode="aspectFill"></image>
+      </view>
+      <view class="message-content">
+        <view class="message-header">
+          <text class="message-nickname">{{item.nickname}}</text>
+          <text class="message-time">{{item.time}}</text>
+        </view>
+        <view class="message-body">
+          <text class="message-text" wx:if="{{item.type === 'text'}}">{{item.content}}</text>
+          <image class="message-image" wx:if="{{item.type === 'image'}}" src="{{item.content}}" mode="widthFix"></image>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+  
+  <!-- 输入区域 -->
+  <view class="input-container">
+    <view class="input-wrapper">
+      <input 
+        class="message-input" 
+        placeholder="请输入消息..."
+        value="{{inputValue}}"
+        bindinput="onInputChange"
+        bindconfirm="sendMessage"
+        confirm-type="send"
+        adjust-position="{{true}}"
+      />
+      <button 
+        class="send-btn" 
+        bindtap="sendMessage"
+        disabled="{{!inputValue.trim()}}"
+        loading="{{sending}}"
+      >
+        发送
+      </button>
+    </view>
+    
+    <view class="action-buttons">
+      <button class="action-btn" bindtap="chooseImage">
+        <image src="/assets/icons/image.png" mode="aspectFit"></image>
+      </button>
+      <button class="action-btn" bindtap="showMoreActions">
+        <image src="/assets/icons/more.png" mode="aspectFit"></image>
+      </button>
+    </view>
+  </view>
+</view>

Claw/client/wechat_app/pages/chat/chat.wxss

@@ -0,0 +1,167 @@
+/* 聊天页面样式 */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.message-list {
+  flex: 1;
+  padding: 20rpx;
+  overflow-y: auto;
+  padding-bottom: 120rpx; /* 为输入区域预留空间 */
+}
+
+.message-item {
+  display: flex;
+  margin: 20rpx 0;
+  align-items: flex-start;
+}
+
+.message-left {
+  flex-direction: row;
+}
+
+.message-right {
+  flex-direction: row-reverse;
+}
+
+.message-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  margin: 0 20rpx;
+  flex-shrink: 0;
+}
+
+.message-avatar image {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.message-content {
+  max-width: 70%;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10rpx;
+}
+
+.message-nickname {
+  font-size: 24rpx;
+  color: #999;
+  margin-right: 10rpx;
+}
+
+.message-time {
+  font-size: 20rpx;
+  color: #ccc;
+}
+
+.message-body {
+  background-color: #f0f0f0;
+  border-radius: 10rpx;
+  padding: 20rpx;
+  word-wrap: break-word;
+}
+
+.message-right .message-body {
+  background-color: #95ec69;
+}
+
+.message-text {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.5;
+}
+
+.message-right .message-text {
+  color: #000;
+}
+
+.message-image {
+  max-width: 300rpx;
+  max-height: 300rpx;
+  border-radius: 10rpx;
+}
+
+.input-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  border-top: 1rpx solid #e0e0e0;
+  padding: 20rpx;
+  z-index: 1000;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.message-input {
+  flex: 1;
+  border: 1rpx solid #e0e0e0;
+  border-radius: 50rpx;
+  padding: 20rpx 30rpx;
+  font-size: 28rpx;
+  background-color: #f8f8f8;
+  margin-right: 20rpx;
+}
+
+.message-input:focus {
+  border-color: #07c160;
+  background-color: white;
+}
+
+.send-btn {
+  background: linear-gradient(135deg, #07c160 0%, #06a050 100%);
+  color: white;
+  border: none;
+  border-radius: 50rpx;
+  padding: 20rpx 40rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  min-width: 120rpx;
+}
+
+.send-btn:active {
+  transform: scale(0.95);
+}
+
+.send-btn:disabled {
+  background: #ccc;
+  color: #999;
+  transform: none;
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+}
+
+.action-btn {
+  background: none;
+  border: none;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  transition: background-color 0.3s;
+}
+
+.action-btn:active {
+  background-color: #f0f0f0;
+}
+
+.action-btn image {
+  width: 60rpx;
+  height: 60rpx;
+}