From 2dfb2e03161b64aa9e870c77951935c22ff0ef58 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 3 Nov 2025 16:31:53 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0AI=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ai-chat-float/README.md            |  238 +++
 components/ai-chat-float/ai-chat-float.json   |    6 +
 components/ai-chat-float/ai-chat-float.vue    |  546 +++++++
 components/ai-chat-message/README.md          |  271 ++++
 .../ai-chat-message/ai-chat-message.json      |    6 +
 .../ai-chat-message/ai-chat-message.vue       | 1424 +++++++++++++++++
 components/ai-chat-message/demo.vue           |  288 ++++
 7 files changed, 2779 insertions(+)
 create mode 100644 components/ai-chat-float/README.md
 create mode 100644 components/ai-chat-float/ai-chat-float.json
 create mode 100644 components/ai-chat-float/ai-chat-float.vue
 create mode 100644 components/ai-chat-message/README.md
 create mode 100644 components/ai-chat-message/ai-chat-message.json
 create mode 100644 components/ai-chat-message/ai-chat-message.vue
 create mode 100644 components/ai-chat-message/demo.vue

diff --git a/components/ai-chat-float/README.md b/components/ai-chat-float/README.md
new file mode 100644
index 0000000..2f1e15c
--- /dev/null
+++ b/components/ai-chat-float/README.md
@@ -0,0 +1,238 @@
+# AI智能客服浮动按钮组件
+
+## 组件介绍
+
+AI智能客服浮动按钮组件是一个可以在任何页面中使用的浮动AI客服按钮，点击按钮可以弹出完整的AI智能客服聊天界面。该组件基于现有的AI聊天消息组件，提供了丰富的交互功能和配置选项。
+
+## 功能特性
+
+- ✅ **浮动按钮** - 可自定义位置的浮动AI客服按钮
+- ✅ **聊天弹窗** - 点击按钮弹出完整的AI聊天界面
+- ✅ **全屏模式** - 支持全屏/窗口模式切换
+- ✅ **未读消息** - 显示未读消息数量小红点
+- ✅ **多种消息类型** - 支持文本、文件、图片、音频、视频、链接等
+- ✅ **流式对话** - 支持流式AI回复效果
+- ✅ **响应式设计** - 适配不同屏幕尺寸
+- ✅ **自定义配置** - 丰富的配置选项
+
+## 安装使用
+
+### 1. 引入组件
+
+在需要使用AI客服浮动按钮的页面中引入组件：
+
+```json
+// 页面配置文件 pages/xxx/xxx.json
+{
+  "usingComponents": {
+    "ai-chat-float": "@/components/ai-chat-float/ai-chat-float"
+  }
+}
+```
+
+### 2. 在页面中使用
+
+```vue
+<!-- 页面模板 pages/xxx/xxx.vue -->
+<template>
+  <view class="page">
+    <!-- 页面内容 -->
+    <view class="content">
+      <!-- 您的页面内容 -->
+    </view>
+    
+    <!-- AI客服浮动按钮 -->
+    <ai-chat-float
+      ref="aiChatFloat"
+      :position="position"
+      :show-float-button="showButton"
+      :auto-open="autoOpen"
+      :initial-messages="initialMessages"
+      @chat-open="onChatOpen"
+      @chat-close="onChatClose"
+      @message-sent="onMessageSent"
+      @ai-response="onAIResponse"
+      @unread-update="onUnreadUpdate" />
+  </view>
+</template>
+
+<script>
+import aiChatFloat from '@/components/ai-chat-float/ai-chat-float.vue'
+
+export default {
+  components: {
+    aiChatFloat
+  },
+  data() {
+    return {
+      position: 'bottom-right',
+      showButton: true,
+      autoOpen: false,
+      initialMessages: []
+    }
+  },
+  methods: {
+    onChatOpen() {
+      console.log('AI客服聊天窗口打开')
+    },
+    onChatClose() {
+      console.log('AI客服聊天窗口关闭')
+    },
+    onMessageSent(message) {
+      console.log('用户发送消息:', message)
+    },
+    onAIResponse(message) {
+      console.log('AI回复消息:', message)
+    },
+    onUnreadUpdate(count) {
+      console.log('未读消息数量:', count)
+    }
+  }
+}
+</script>
+```
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| position | String | 'bottom-right' | 按钮位置，可选值：'bottom-right', 'bottom-left', 'top-right', 'top-left' |
+| offset | Object | { bottom: '100rpx', right: '40rpx', top: '100rpx', left: '40rpx' } | 按钮距离边缘的距离 |
+| userAvatar | String | '/static/images/default-avatar.png' | 用户头像 |
+| aiAvatar | String | '/static/images/ai-avatar.png' | AI头像 |
+| initialMessages | Array | [] | 初始聊天消息 |
+| showFloatButton | Boolean | true | 是否显示浮动按钮 |
+| autoOpen | Boolean | false | 是否自动打开聊天窗口 |
+
+## 事件监听
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| chat-open | - | 聊天窗口打开事件 |
+| chat-close | - | 聊天窗口关闭事件 |
+| message-sent | message | 用户发送消息事件 |
+| ai-response | message | AI回复消息事件 |
+| unread-update | count | 未读消息数量更新事件 |
+| history-loaded | messages | 历史消息加载完成事件 |
+| file-preview | message | 文件预览事件 |
+| audio-play | message | 音频播放事件 |
+| video-play | message | 视频播放事件 |
+| link-open | message | 链接打开事件 |
+| product-view | message | 商品查看事件 |
+| action-click | {action, message} | 操作按钮点击事件 |
+| input-change | value | 输入内容变化事件 |
+
+## 方法调用
+
+通过组件引用可以调用以下方法：
+
+```javascript
+// 获取组件引用
+const aiChatFloat = this.$refs.aiChatFloat
+
+// 打开聊天窗口
+aiChatFloat.openChat()
+
+// 关闭聊天窗口
+aiChatFloat.closeChat()
+
+// 添加消息
+aiChatFloat.addMessage({
+  role: 'ai',
+  type: 'text',
+  content: '这是一条新消息',
+  read: false
+})
+
+// 清空聊天记录
+aiChatFloat.clearMessages()
+
+// 标记所有消息为已读
+aiChatFloat.markAllAsRead()
+```
+
+## 配置示例
+
+### 基本配置
+
+```vue
+<ai-chat-float
+  position="bottom-right"
+  :show-float-button="true"
+  :auto-open="false" />
+```
+
+### 自定义位置
+
+```vue
+<ai-chat-float
+  position="top-left"
+  :offset="{ top: '200rpx', left: '60rpx' }" />
+```
+
+### 自定义头像
+
+```vue
+<ai-chat-float
+  :user-avatar="/static/avatars/user.jpg"
+  :ai-avatar="/static/avatars/ai.jpg" />
+```
+
+### 初始消息
+
+```vue
+<ai-chat-float
+  :initial-messages="[
+    {
+      id: 1,
+      role: 'ai',
+      type: 'text',
+      content: '欢迎使用AI客服！',
+      timestamp: Date.now(),
+      read: false
+    }
+  ]" />
+```
+
+## 样式定制
+
+组件支持通过CSS变量进行样式定制：
+
+```css
+/* 自定义主题色 */
+.ai-float-button {
+  --primary-color: #ff4544;
+  --primary-gradient: linear-gradient(135deg, #ff4544, #ff6b6b);
+}
+
+/* 自定义尺寸 */
+.ai-float-button {
+  --button-size: 120rpx;
+  --icon-size: 48rpx;
+}
+```
+
+## 注意事项
+
+1. **依赖组件**：本组件依赖 `ai-chat-message` 组件，请确保该组件已正确安装
+2. **图标字体**：组件使用了 iconfont 图标，请确保项目中已引入相应的图标字体
+3. **响应式设计**：组件已适配移动端和PC端，但在特殊场景下可能需要额外调整
+4. **性能优化**：在大量消息时建议启用消息数量限制
+
+## 演示页面
+
+访问 `/pages/ai-chat-float/index` 查看完整的演示效果，包含所有配置选项的实时预览。
+
+## 更新日志
+
+### v1.0.0 (2024-11-03)
+- ✨ 初始版本发布
+- ✨ 支持浮动按钮和聊天弹窗
+- ✨ 支持多种消息类型
+- ✨ 支持流式对话
+- ✨ 支持全屏模式
+- ✨ 支持未读消息提示
+
+## 技术支持
+
+如有问题或建议，请联系开发团队。
\ No newline at end of file
diff --git a/components/ai-chat-float/ai-chat-float.json b/components/ai-chat-float/ai-chat-float.json
new file mode 100644
index 0000000..ceb093a
--- /dev/null
+++ b/components/ai-chat-float/ai-chat-float.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ai-chat-message": "../ai-chat-message/ai-chat-message"
+  }
+}
\ No newline at end of file
diff --git a/components/ai-chat-float/ai-chat-float.vue b/components/ai-chat-float/ai-chat-float.vue
new file mode 100644
index 0000000..353575f
--- /dev/null
+++ b/components/ai-chat-float/ai-chat-float.vue
@@ -0,0 +1,546 @@
+<template>
+  <view>
+    <!-- 浮动AI客服按钮 -->
+    <view 
+      v-if="showFloatButton" 
+      class="ai-float-button"
+      :class="{ 'ai-float-button-mini': isChatOpen }"
+      :style="buttonStyle"
+      @click="toggleChat">
+      
+      <!-- 按钮图标 -->
+      <view class="ai-float-icon">
+        <text class="iconfont" :class="isChatOpen ? 'icon-close' : 'icon-ai'"></text>
+      </view>
+      
+      <!-- 未读消息小红点 -->
+      <view v-if="unreadCount > 0" class="ai-float-badge">
+        {{ unreadCount > 99 ? '99+' : unreadCount }}
+      </view>
+      
+      <!-- 按钮文字 -->
+      <view v-if="!isChatOpen" class="ai-float-text">AI客服</view>
+    </view>
+    
+    <!-- AI聊天弹窗 -->
+    <view 
+      v-if="isChatOpen" 
+      class="ai-chat-modal"
+      :class="{ 'ai-chat-modal-fullscreen': isFullscreen }">
+      
+      <!-- 遮罩层 -->
+      <view class="ai-chat-mask" @click="closeChat"></view>
+      
+      <!-- 聊天窗口 -->
+      <view class="ai-chat-window">
+        
+        <!-- 聊天窗口头部 -->
+        <view class="ai-chat-header">
+          <view class="ai-chat-title">
+            <text class="iconfont icon-ai"></text>
+            <text>AI智能客服</text>
+          </view>
+          
+          <view class="ai-chat-actions">
+            <!-- 全屏/最小化按钮 -->
+            <button class="action-btn" @click="toggleFullscreen">
+              <text class="iconfont" :class="isFullscreen ? 'icon-minimize' : 'icon-fullscreen'"></text>
+            </button>
+            
+            <!-- 关闭按钮 -->
+            <button class="action-btn" @click="closeChat">
+              <text class="iconfont icon-close"></text>
+            </button>
+          </view>
+        </view>
+        
+        <!-- 聊天内容区域 -->
+        <view class="ai-chat-content">
+          <ai-chat-message
+            ref="chatMessage"
+            :initial-messages="chatMessages"
+            :user-avatar="userAvatar"
+            :ai-avatar="aiAvatar"
+            :enable-streaming="true"
+            @message-sent="onMessageSent"
+            @ai-response="onAIResponse"
+            @history-loaded="onHistoryLoaded"
+            @file-preview="onFilePreview"
+            @audio-play="onAudioPlay"
+            @video-play="onVideoPlay"
+            @link-open="onLinkOpen"
+            @product-view="onProductView"
+            @action-click="onActionClick"
+            @input-change="onInputChange" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import aiChatMessage from '../ai-chat-message/ai-chat-message.vue'
+
+export default {
+  name: 'ai-chat-float',
+  components: {
+    aiChatMessage
+  },
+  props: {
+    // 浮动按钮位置
+    position: {
+      type: String,
+      default: 'bottom-right', // bottom-right, bottom-left, top-right, top-left
+      validator: (value) => {
+        return ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(value)
+      }
+    },
+    // 按钮距离边缘的距离
+    offset: {
+      type: Object,
+      default: () => ({
+        bottom: '100rpx',
+        right: '40rpx',
+        top: '100rpx',
+        left: '40rpx'
+      })
+    },
+    // 用户头像
+    userAvatar: {
+      type: String,
+      default: '/static/images/default-avatar.png'
+    },
+    // AI头像
+    aiAvatar: {
+      type: String,
+      default: '/static/images/ai-avatar.png'
+    },
+    // 初始聊天消息
+    initialMessages: {
+      type: Array,
+      default: () => []
+    },
+    // 是否显示浮动按钮
+    showFloatButton: {
+      type: Boolean,
+      default: true
+    },
+    // 是否自动打开聊天窗口
+    autoOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      isChatOpen: false, // 聊天窗口是否打开
+      isFullscreen: false, // 是否全屏
+      unreadCount: 0, // 未读消息数量
+      chatMessages: [], // 聊天消息列表
+      messageId: 0 // 消息ID计数器
+    }
+  },
+  computed: {
+    // 按钮样式
+    buttonStyle() {
+      const style = {}
+      
+      // 根据位置设置样式
+      if (this.position.includes('bottom')) {
+        style.bottom = this.offset.bottom
+      } else {
+        style.top = this.offset.top
+      }
+      
+      if (this.position.includes('right')) {
+        style.right = this.offset.right
+      } else {
+        style.left = this.offset.left
+      }
+      
+      return style
+    }
+  },
+  created() {
+    // 初始化聊天消息
+    this.chatMessages = [...this.initialMessages]
+    this.messageId = this.chatMessages.length
+    
+    // 如果有初始消息，计算未读数量
+    this.updateUnreadCount()
+    
+    // 如果设置了自动打开，则打开聊天窗口
+    if (this.autoOpen) {
+      this.openChat()
+    }
+  },
+  methods: {
+    // 切换聊天窗口
+    toggleChat() {
+      if (this.isChatOpen) {
+        this.closeChat()
+      } else {
+        this.openChat()
+      }
+    },
+    
+    // 打开聊天窗口
+    openChat() {
+      this.isChatOpen = true
+      this.unreadCount = 0 // 打开后清空未读消息
+      this.$emit('chat-open')
+    },
+    
+    // 关闭聊天窗口
+    closeChat() {
+      this.isChatOpen = false
+      this.isFullscreen = false
+      this.$emit('chat-close')
+    },
+    
+    // 切换全屏模式
+    toggleFullscreen() {
+      this.isFullscreen = !this.isFullscreen
+      this.$emit('fullscreen-toggle', this.isFullscreen)
+    },
+    
+    // 更新未读消息数量
+    updateUnreadCount() {
+      // 计算AI发送的未读消息数量
+      this.unreadCount = this.chatMessages.filter(msg => 
+        msg.role === 'ai' && !msg.read
+      ).length
+      
+      this.$emit('unread-update', this.unreadCount)
+    },
+    
+    // 发送欢迎消息
+    sendWelcomeMessage() {
+      const welcomeMessage = {
+        id: ++this.messageId,
+        role: 'ai',
+        type: 'text',
+        content: '您好！我是AI智能客服，很高兴为您服务！有什么可以帮助您的吗？',
+        timestamp: Date.now(),
+        read: false
+      }
+      
+      this.chatMessages.push(welcomeMessage)
+      this.updateUnreadCount()
+    },
+    
+    // 消息发送事件
+    onMessageSent(message) {
+      this.$emit('message-sent', message)
+    },
+    
+    // AI回复事件
+    onAIResponse(message) {
+      // 标记为未读
+      message.read = false
+      this.updateUnreadCount()
+      this.$emit('ai-response', message)
+    },
+    
+    // 历史消息加载事件
+    onHistoryLoaded(messages) {
+      this.$emit('history-loaded', messages)
+    },
+    
+    // 文件预览事件
+    onFilePreview(message) {
+      this.$emit('file-preview', message)
+    },
+    
+    // 音频播放事件
+    onAudioPlay(message) {
+      this.$emit('audio-play', message)
+    },
+    
+    // 视频播放事件
+    onVideoPlay(message) {
+      this.$emit('video-play', message)
+    },
+    
+    // 链接打开事件
+    onLinkOpen(message) {
+      this.$emit('link-open', message)
+    },
+    
+    // 商品查看事件
+    onProductView(message) {
+      this.$emit('product-view', message)
+    },
+    
+    // 操作点击事件
+    onActionClick(data) {
+      this.$emit('action-click', data)
+    },
+    
+    // 输入变化事件
+    onInputChange(value) {
+      this.$emit('input-change', value)
+    },
+    
+    // 添加消息到聊天
+    addMessage(message) {
+      this.chatMessages.push({
+        ...message,
+        id: ++this.messageId,
+        timestamp: message.timestamp || Date.now()
+      })
+      
+      // 如果是AI消息，增加未读计数
+      if (message.role === 'ai' && !message.read) {
+        this.updateUnreadCount()
+      }
+    },
+    
+    // 清空聊天记录
+    clearMessages() {
+      this.chatMessages = []
+      this.messageId = 0
+      this.unreadCount = 0
+      this.$emit('messages-clear')
+    },
+    
+    // 标记所有消息为已读
+    markAllAsRead() {
+      this.chatMessages.forEach(msg => {
+        if (msg.role === 'ai') {
+          msg.read = true
+        }
+      })
+      this.updateUnreadCount()
+      this.$emit('messages-read')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 浮动按钮样式 */
+.ai-float-button {
+  position: fixed;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #ff4544, #ff6b6b);
+  border-radius: 50rpx;
+  padding: 20rpx 30rpx;
+  box-shadow: 0 8rpx 30rpx rgba(255, 69, 68, 0.3);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  
+  &.ai-float-button-mini {
+    padding: 20rpx;
+    border-radius: 50%;
+    
+    .ai-float-text {
+      display: none;
+    }
+  }
+  
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 4rpx 15rpx rgba(255, 69, 68, 0.5);
+  }
+}
+
+.ai-float-icon {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15rpx;
+  
+  .iconfont {
+    font-size: 40rpx;
+    color: white;
+  }
+}
+
+.ai-float-badge {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  background-color: #ff4544;
+  color: white;
+  border-radius: 30rpx;
+  padding: 4rpx 12rpx;
+  font-size: 20rpx;
+  font-weight: bold;
+  min-width: 30rpx;
+  text-align: center;
+  border: 2rpx solid white;
+}
+
+.ai-float-text {
+  color: white;
+  font-size: 28rpx;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+/* 聊天弹窗样式 */
+.ai-chat-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  
+  &.ai-chat-modal-fullscreen {
+    .ai-chat-window {
+      width: 100vw;
+      height: 100vh;
+      border-radius: 0;
+      max-width: none;
+      max-height: none;
+    }
+  }
+}
+
+.ai-chat-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.3s ease;
+}
+
+.ai-chat-window {
+  position: absolute;
+  bottom: 150rpx;
+  right: 40rpx;
+  width: 600rpx;
+  height: 800rpx;
+  max-width: 90vw;
+  max-height: 80vh;
+  background-color: white;
+  border-radius: 20rpx;
+  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideUp 0.3s ease;
+  
+  /* 响应式调整 */
+  @media (max-width: 750rpx) {
+    width: 90vw;
+    height: 70vh;
+    bottom: 100rpx;
+    right: 5vw;
+  }
+}
+
+/* 聊天窗口头部 */
+.ai-chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  background: linear-gradient(135deg, #ff4544, #ff6b6b);
+  color: white;
+  
+  .ai-chat-title {
+    display: flex;
+    align-items: center;
+    font-size: 32rpx;
+    font-weight: bold;
+    
+    .iconfont {
+      font-size: 36rpx;
+      margin-right: 15rpx;
+    }
+  }
+  
+  .ai-chat-actions {
+    display: flex;
+    gap: 15rpx;
+    
+    .action-btn {
+      width: 60rpx;
+      height: 60rpx;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      
+      .iconfont {
+        font-size: 28rpx;
+        color: white;
+      }
+      
+      &:active {
+        background-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+}
+
+/* 聊天内容区域 */
+.ai-chat-content {
+  flex: 1;
+  overflow: hidden;
+  
+  /* 确保聊天组件充满整个区域 */
+  ::v-deep .ai-chat-container {
+    height: 100%;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100rpx) scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 750rpx) {
+  .ai-float-button {
+    padding: 25rpx;
+    
+    &.ai-float-button-mini {
+      padding: 25rpx;
+    }
+    
+    .ai-float-text {
+      font-size: 24rpx;
+    }
+  }
+  
+  .ai-chat-window {
+    border-radius: 15rpx;
+  }
+  
+  .ai-chat-header {
+    padding: 25rpx;
+    
+    .ai-chat-title {
+      font-size: 28rpx;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/ai-chat-message/README.md b/components/ai-chat-message/README.md
new file mode 100644
index 0000000..0f999a8
--- /dev/null
+++ b/components/ai-chat-message/README.md
@@ -0,0 +1,271 @@
+# AI智能客服组件
+
+一个功能完整的AI智能客服对话组件，支持多种消息类型和交互功能。
+
+## 功能特性
+
+- ✅ 支持对话上下文管理
+- ✅ 支持多种消息类型：文本、Markdown、文件、音频、视频、链接、商品卡片
+- ✅ 支持语音输入和录音
+- ✅ 支持图片、文件、位置等附件发送
+- ✅ 支持消息操作按钮（点赞、踩等）
+- ✅ 支持历史消息加载
+- ✅ 响应式设计，适配多端
+
+## 安装使用
+
+### 1. 引入组件
+
+在 `pages.json` 中注册组件：
+
+```json
+{
+  "usingComponents": {
+    "ai-chat-message": "/components/ai-chat-message/ai-chat-message"
+  }
+}
+```
+
+### 2. 在页面中使用
+
+```vue
+<template>
+  <view class="container">
+    <ai-chat-message 
+      ref="chat"
+      :initial-messages="messages"
+      @message-sent="onMessageSent"
+      @ai-response="onAIResponse"
+      @action-click="onActionClick" />
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      messages: [
+        {
+          id: 1,
+          role: 'ai',
+          type: 'text',
+          content: '您好！我是AI智能客服，有什么可以帮助您的吗？',
+          timestamp: Date.now()
+        }
+      ]
+    }
+  },
+  methods: {
+    onMessageSent(message) {
+      console.log('用户发送消息:', message)
+    },
+    onAIResponse(message) {
+      console.log('AI回复消息:', message)
+    },
+    onActionClick({ action, message }) {
+      console.log('操作点击:', action, message)
+    }
+  }
+}
+</script>
+```
+
+## Props 配置
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| initialMessages | Array | [] | 初始消息列表 |
+| userAvatar | String | '/static/images/default-avatar.png' | 用户头像 |
+| aiAvatar | String | '/static/images/ai-avatar.png' | AI头像 |
+| showLoadMore | Boolean | true | 是否显示加载更多 |
+| maxMessages | Number | 100 | 最大消息数量 |
+
+## Events 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| message-sent | message | 用户发送消息 |
+| ai-response | message | AI回复消息 |
+| action-click | {action, message} | 操作按钮点击 |
+| history-loaded | messages | 历史消息加载完成 |
+| file-preview | message | 文件预览 |
+| audio-play | message | 音频播放 |
+| audio-pause | message | 音频暂停 |
+| video-play | message | 视频播放 |
+| video-pause | message | 视频暂停 |
+| link-open | message | 链接打开 |
+| product-view | message | 商品查看 |
+| input-change | value | 输入内容变化 |
+
+## 消息类型格式
+
+### 文本消息
+```javascript
+{
+  id: 1,
+  role: 'user', // 或 'ai'
+  type: 'text',
+  content: '消息内容',
+  timestamp: Date.now()
+}
+```
+
+### Markdown消息
+```javascript
+{
+  id: 2,
+  role: 'ai',
+  type: 'markdown',
+  content: '# 标题\n**粗体** *斜体* `代码`',
+  timestamp: Date.now()
+}
+```
+
+### 文件消息
+```javascript
+{
+  id: 3,
+  role: 'ai',
+  type: 'file',
+  fileName: '文档.pdf',
+  fileSize: 1024000,
+  url: '文件地址',
+  timestamp: Date.now()
+}
+```
+
+### 音频消息
+```javascript
+{
+  id: 4,
+  role: 'ai',
+  type: 'audio',
+  title: '语音消息',
+  duration: 60, // 秒
+  url: '音频地址',
+  timestamp: Date.now()
+}
+```
+
+### 视频消息
+```javascript
+{
+  id: 5,
+  role: 'ai',
+  type: 'video',
+  title: '产品介绍',
+  duration: 120, // 秒
+  url: '视频地址',
+  cover: '封面图',
+  timestamp: Date.now()
+}
+```
+
+### 链接消息
+```javascript
+{
+  id: 6,
+  role: 'ai',
+  type: 'link',
+  title: '帮助文档',
+  description: '详细的使用说明',
+  url: 'https://example.com',
+  image: '缩略图',
+  timestamp: Date.now()
+}
+```
+
+### 商品卡片
+```javascript
+{
+  id: 7,
+  role: 'ai',
+  type: 'product',
+  title: '商品名称',
+  price: 299,
+  description: '商品描述',
+  image: '商品图片',
+  timestamp: Date.now()
+}
+```
+
+## 方法
+
+通过 ref 调用组件方法：
+
+```javascript
+// 添加消息
+this.$refs.chat.addMessage(message)
+
+// 清空消息
+this.$refs.chat.clearMessages()
+
+// 滚动到底部
+this.$refs.chat.scrollToBottom()
+```
+
+## 样式定制
+
+组件使用 SCSS 编写，可以通过 CSS 变量进行主题定制：
+
+```css
+.ai-chat-container {
+  --primary-color: #ff4544;
+  --bg-color: #f8f8f8;
+  --text-color: #333;
+}
+```
+
+## 方法
+
+通过 ref 调用组件方法：
+
+```javascript
+// 添加消息
+this.$refs.chat.addMessage(message)
+
+// 清空消息
+this.$refs.chat.clearMessages()
+
+// 滚动到底部
+this.$refs.chat.scrollToBottom()
+
+// 开始语音输入
+this.$refs.chat.startVoiceInput()
+
+// 停止语音输入
+this.$refs.chat.stopVoiceInput()
+```
+
+## 样式定制
+
+组件使用 SCSS 编写，可以通过 CSS 变量进行主题定制：
+
+```css
+.ai-chat-container {
+  --primary-color: #ff4544;
+  --bg-color: #f8f8f8;
+  --text-color: #333;
+  --border-color: #eeeeee;
+  --user-bg: #e6f7ff;
+  --ai-bg: #f6f6f6;
+}
+```
+
+## 图标字体
+
+组件使用自定义图标字体，需要在页面中引入：
+
+```html
+<style>
+@import url('/components/ai-chat-message/iconfont.css');
+</style>
+```
+
+## 注意事项
+
+1. 组件已适配项目中已有的 `ns-loading` 组件
+2. 需要配置对应的图标字体文件
+3. 音频播放功能在 H5 和 APP 端支持较好
+4. 文件预览功能依赖平台能力
+5. 语音输入功能需要用户授权麦克风权限
\ No newline at end of file
diff --git a/components/ai-chat-message/ai-chat-message.json b/components/ai-chat-message/ai-chat-message.json
new file mode 100644
index 0000000..d806736
--- /dev/null
+++ b/components/ai-chat-message/ai-chat-message.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ns-loading": "../ns-loading/ns-loading"
+  }
+}
\ No newline at end of file
diff --git a/components/ai-chat-message/ai-chat-message.vue b/components/ai-chat-message/ai-chat-message.vue
new file mode 100644
index 0000000..444afcf
--- /dev/null
+++ b/components/ai-chat-message/ai-chat-message.vue
@@ -0,0 +1,1424 @@
+<template>
+  <view class="ai-chat-container">
+    <!-- 聊天消息列表 -->
+    <scroll-view 
+      class="chat-messages" 
+      scroll-y 
+      :scroll-top="scrollTop"
+      @scrolltoupper="loadMoreHistory"
+      :scroll-with-animation="true">
+      
+      <!-- 加载更多历史消息 -->
+      <view class="load-more" v-if="hasMoreHistory">
+        <ns-loading :down-text="loadingText" :is-rotate="true" />
+      </view>
+      
+      <!-- 消息列表 -->
+      <view 
+        v-for="(message, index) in messages" 
+        :key="message.id" 
+        class="message-item"
+        :class="[message.role, { 'first-message': index === 0 }]">
+        
+        <!-- 用户消息 -->
+        <view v-if="message.role === 'user'" class="user-message">
+          <view class="avatar">
+            <image :src="userAvatar" mode="aspectFill" />
+          </view>
+          <view class="message-content">
+            <view class="message-bubble">
+              <text class="message-text">{{ message.content }}</text>
+            </view>
+            <view class="message-time">{{ formatTime(message.timestamp) }}</view>
+          </view>
+        </view>
+        
+        <!-- AI消息 -->
+        <view v-else class="ai-message">
+          <view class="avatar">
+            <image :src="aiAvatar" mode="aspectFill" />
+          </view>
+          <view class="message-content">
+            <view class="message-bubble">
+              <!-- 文本消息 -->
+              <view v-if="message.type === 'text'" class="text-content">
+                <rich-text :nodes="parseMarkdown(message.content)" />
+              </view>
+              
+              <!-- Markdown文档 -->
+              <view v-else-if="message.type === 'markdown'" class="markdown-content">
+                <view class="markdown-header">
+                  <text class="iconfont icon-markdown"></text>
+                  <text class="markdown-title">文档内容</text>
+                </view>
+                <view class="markdown-body">
+                  <rich-text :nodes="parseMarkdown(message.content)" />
+                </view>
+              </view>
+              
+              <!-- 文件链接 -->
+              <view v-else-if="message.type === 'file'" class="file-content">
+                <view class="file-item" @click="previewFile(message)">
+                  <view class="file-icon">
+                    <text class="iconfont icon-file"></text>
+                  </view>
+                  <view class="file-info">
+                    <text class="file-name">{{ message.fileName }}</text>
+                    <text class="file-size">{{ formatFileSize(message.fileSize) }}</text>
+                  </view>
+                  <view class="file-action">
+                    <text class="iconfont icon-download"></text>
+                  </view>
+                </view>
+              </view>
+              
+              <!-- 音频消息 -->
+              <view v-else-if="message.type === 'audio'" class="audio-content">
+                <view class="audio-player">
+                  <view class="audio-info">
+                    <text class="audio-title">{{ message.title || '语音消息' }}</text>
+                    <text class="audio-duration">{{ formatDuration(message.duration) }}</text>
+                  </view>
+                  <view class="audio-controls">
+                    <button 
+                      class="play-btn" 
+                      :class="{ playing: message.playing }"
+                      @click="toggleAudio(message)">
+                      <text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
+                    </button>
+                    <slider 
+                      class="audio-slider" 
+                      :value="message.currentTime || 0" 
+                      :max="message.duration || 0"
+                      @changing="onAudioSliderChange"
+                      @change="onAudioSliderChangeEnd"
+                      activeColor="#ff4544"
+                      backgroundColor="#eeeeee"
+                      block-size="12" />
+                  </view>
+                </view>
+              </view>
+              
+              <!-- 视频消息 -->
+              <view v-else-if="message.type === 'video'" class="video-content">
+                <view class="video-player">
+                  <video 
+                    :src="message.url" 
+                    :poster="message.cover"
+                    :controls="true"
+                    :autoplay="false"
+                    class="video-element"
+                    @play="onVideoPlay(message)"
+                    @pause="onVideoPause(message)">
+                  </video>
+                  <view class="video-info">
+                    <text class="video-title">{{ message.title || '视频消息' }}</text>
+                    <text class="video-duration">{{ formatDuration(message.duration) }}</text>
+                  </view>
+                </view>
+              </view>
+              
+              <!-- 跳转链接 -->
+              <view v-else-if="message.type === 'link'" class="link-content">
+                <view class="link-card" @click="openLink(message)">
+                  <view class="link-image" v-if="message.image">
+                    <image :src="message.image" mode="aspectFill" />
+                  </view>
+                  <view class="link-info">
+                    <text class="link-title">{{ message.title }}</text>
+                    <text class="link-desc">{{ message.description }}</text>
+                    <text class="link-url">{{ message.url }}</text>
+                  </view>
+                </view>
+              </view>
+              
+              <!-- 商品卡片 -->
+              <view v-else-if="message.type === 'product'" class="product-content">
+                <view class="product-card" @click="viewProduct(message)">
+                  <view class="product-image">
+                    <image :src="message.image" mode="aspectFill" />
+                  </view>
+                  <view class="product-info">
+                    <text class="product-title">{{ message.title }}</text>
+                    <text class="product-price color-base-text">¥{{ message.price }}</text>
+                    <text class="product-desc">{{ message.description }}</text>
+                  </view>
+                </view>
+              </view>
+              
+              <!-- 加载中状态 -->
+              <view v-else-if="message.type === 'loading'" class="loading-content">
+                <view class="loading-dots">
+                  <text class="dot"></text>
+                  <text class="dot"></text>
+                  <text class="dot"></text>
+                </view>
+                <text class="loading-text">AI正在思考中...</text>
+              </view>
+              
+              <!-- 操作按钮 -->
+              <view class="message-actions" v-if="message.actions && message.actions.length > 0">
+                <button 
+                  v-for="action in message.actions" 
+                  :key="action.id"
+                  class="action-btn"
+                  :class="action.type"
+                  @click="handleAction(action, message)">
+                  {{ action.text }}
+                </button>
+              </view>
+            </view>
+            <view class="message-time">{{ formatTime(message.timestamp) }}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    
+    <!-- 输入区域 -->
+    <view class="input-area">
+      <view class="input-tools">
+        <button class="tool-btn" @click="showMoreTools">
+          <text class="iconfont icon-plus"></text>
+        </button>
+        <button class="tool-btn" @click="toggleVoiceInput">
+          <text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
+        </button>
+      </view>
+      
+      <view class="input-container">
+        <textarea 
+          v-model="inputText" 
+          class="message-input"
+          placeholder="请输入您的问题..."
+          :maxlength="500"
+          :auto-height="true"
+          :show-confirm-bar="false"
+          @confirm="sendMessage"
+          @input="onInput" />
+        
+        <button 
+          class="send-btn" 
+          :class="{ disabled: !inputText.trim() }"
+          @click="sendMessage"
+          :disabled="!inputText.trim()">
+          <text class="iconfont icon-send"></text>
+        </button>
+      </view>
+    </view>
+    
+    <!-- 更多工具面板 -->
+    <view v-if="showToolsPanel" class="tools-popup">
+      <view class="tools-mask" @click="hideToolsPanel"></view>
+      <view class="tools-panel">
+        <view class="tools-header">
+          <text>更多功能</text>
+          <button class="close-btn" @click="hideToolsPanel">
+            <text class="iconfont icon-close"></text>
+          </button>
+        </view>
+        <view class="tools-grid">
+          <view class="tool-item" @click="selectImage">
+            <view class="tool-icon">
+              <text class="iconfont icon-image"></text>
+            </view>
+            <text class="tool-text">图片</text>
+          </view>
+          <view class="tool-item" @click="selectFile">
+            <view class="tool-icon">
+              <text class="iconfont icon-file"></text>
+            </view>
+            <text class="tool-text">文件</text>
+          </view>
+          <view class="tool-item" @click="startRecord">
+            <view class="tool-icon">
+              <text class="iconfont icon-voice"></text>
+            </view>
+            <text class="tool-text">语音</text>
+          </view>
+          <view class="tool-item" @click="selectLocation">
+            <view class="tool-icon">
+              <text class="iconfont icon-location"></text>
+            </view>
+            <text class="tool-text">位置</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 语音输入面板 -->
+    <view v-if="showVoicePanel" class="voice-popup">
+      <view class="voice-mask" @click="hideVoicePanel"></view>
+      <view class="voice-input-panel">
+        <view class="voice-header">
+          <text>语音输入</text>
+          <button class="close-btn" @click="hideVoicePanel">
+            <text class="iconfont icon-close"></text>
+          </button>
+        </view>
+        <view class="voice-content">
+          <view class="voice-wave" :class="{ recording: voiceInputing }">
+            <view 
+              v-for="i in 8" 
+              :key="i" 
+              class="wave-bar"
+              :style="{ animationDelay: (i * 0.1) + 's' }"></view>
+          </view>
+          <text class="voice-tip">{{ voiceInputing ? '正在录音，松开结束' : '点击开始录音' }}</text>
+        </view>
+        <view class="voice-actions">
+          <button class="voice-btn" @click="toggleVoiceInput">
+            <text class="iconfont" :class="voiceInputing ? 'icon-stop' : 'icon-voice'"></text>
+          </button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import nsLoading from '../ns-loading/ns-loading.vue'
+
+export default {
+  name: 'ai-chat-message',
+  components: {
+    nsLoading
+  },
+  props: {
+    // 初始消息列表
+    initialMessages: {
+      type: Array,
+      default: () => []
+    },
+    // 用户头像
+    userAvatar: {
+      type: String,
+      default: '/static/images/default-avatar.png'
+    },
+    // AI头像
+    aiAvatar: {
+      type: String,
+      default: '/static/images/ai-avatar.png'
+    },
+    // 是否显示加载更多
+    showLoadMore: {
+      type: Boolean,
+      default: true
+    },
+    // 最大消息数量
+    maxMessages: {
+      type: Number,
+      default: 100
+    },
+    // 是否启用流式响应
+    enableStreaming: {
+      type: Boolean,
+      default: true
+    },
+    // 流式响应速度（字符/秒）
+    streamSpeed: {
+      type: Number,
+      default: 20
+    }
+  },
+  data() {
+    return {
+      messages: [],
+      inputText: '',
+      scrollTop: 0,
+      hasMoreHistory: false,
+      loadingText: '加载更多历史消息',
+      voiceInputing: false,
+      audioContext: null,
+      currentAudio: null,
+      messageId: 0,
+      showToolsPanel: false,
+      showVoicePanel: false,
+      streamingMessage: null, // 流式消息对象
+      streamInterval: null, // 流式更新定时器
+      streamContent: '', // 流式内容缓存
+      isStreaming: false // 是否正在流式输出
+    }
+  },
+  created() {
+    this.messages = [...this.initialMessages]
+    this.messageId = this.messages.length
+    
+    // 初始化音频上下文
+    this.initAudioContext()
+  },
+  mounted() {
+    this.scrollToBottom()
+  },
+  watch: {
+    messages: {
+      handler() {
+        this.$nextTick(() => {
+          this.scrollToBottom()
+        })
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 初始化音频上下文
+    initAudioContext() {
+      // #ifdef H5
+      if (window.AudioContext) {
+        this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
+      }
+      // #endif
+    },
+    
+    // 发送消息
+    sendMessage() {
+      if (!this.inputText.trim()) return
+      
+      const userMessage = {
+        id: ++this.messageId,
+        role: 'user',
+        type: 'text',
+        content: this.inputText.trim(),
+        timestamp: Date.now()
+      }
+      
+      this.messages.push(userMessage)
+      this.inputText = ''
+      
+      // 显示AI正在输入
+      const loadingMessage = {
+        id: ++this.messageId,
+        role: 'ai',
+        type: 'loading',
+        content: '',
+        timestamp: Date.now()
+      }
+      this.messages.push(loadingMessage)
+      
+      // 模拟AI回复
+      setTimeout(() => {
+        this.messages = this.messages.filter(msg => msg.type !== 'loading')
+        
+        const aiMessage = {
+          id: ++this.messageId,
+          role: 'ai',
+          type: 'text',
+          content: this.generateAIResponse(userMessage.content),
+          timestamp: Date.now(),
+          actions: [
+            { id: 1, text: '有帮助', type: 'like' },
+            { id: 2, text: '没帮助', type: 'dislike' }
+          ]
+        }
+        
+        this.messages.push(aiMessage)
+        
+        // 触发消息发送事件
+        this.$emit('message-sent', userMessage)
+        this.$emit('ai-response', aiMessage)
+      }, 1000)
+    },
+    
+    // 生成AI回复（模拟）
+    generateAIResponse(userMessage) {
+      // 这里可以集成真实的AI服务
+      const responses = {
+        '你好': '您好！我是AI智能客服，很高兴为您服务！有什么可以帮助您的吗？',
+        '价格': '我们的产品价格根据型号和配置有所不同，具体价格请查看商品详情页面。',
+        '发货': '一般情况下，订单会在24小时内发货，具体时效请查看物流信息。',
+        '退货': '支持7天无理由退货，请确保商品完好无损。',
+        '客服': '我们的客服工作时间是9:00-18:00，有问题可以随时联系我们。'
+      }
+      
+      for (let key in responses) {
+        if (userMessage.includes(key)) {
+          return responses[key]
+        }
+      }
+      
+      return `感谢您的咨询！关于"${userMessage}"的问题，我们的专业客服会尽快为您解答。您也可以查看我们的帮助文档获取更多信息。`
+    },
+    
+    // 解析Markdown
+    parseMarkdown(content) {
+      if (!content) return ''
+      
+      // 简单的Markdown解析
+      let html = content
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 粗体
+        .replace(/\*(.*?)\*/g, '<em>$1</em>') // 斜体
+        .replace(/`(.*?)`/g, '<code>$1</code>') // 代码
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>') // 链接
+        .replace(/\n/g, '<br>') // 换行
+      
+      return html
+    },
+    
+    // 格式化时间
+    formatTime(timestamp) {
+      const date = new Date(timestamp)
+      const now = new Date()
+      const diff = now - date
+      
+      if (diff < 60000) { // 1分钟内
+        return '刚刚'
+      } else if (diff < 3600000) { // 1小时内
+        return Math.floor(diff / 60000) + '分钟前'
+      } else if (diff < 86400000) { // 1天内
+        return Math.floor(diff / 3600000) + '小时前'
+      } else {
+        return date.getMonth() + 1 + '月' + date.getDate() + '日 ' + 
+               date.getHours().toString().padStart(2, '0') + ':' + 
+               date.getMinutes().toString().padStart(2, '0')
+      }
+    },
+    
+    // 格式化文件大小
+    formatFileSize(bytes) {
+      if (!bytes) return '0B'
+      const k = 1024
+      const sizes = ['B', 'KB', 'MB', 'GB']
+      const i = Math.floor(Math.log(bytes) / Math.log(k))
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + sizes[i]
+    },
+    
+    // 格式化时长
+    formatDuration(seconds) {
+      if (!seconds) return '00:00'
+      const mins = Math.floor(seconds / 60)
+      const secs = Math.floor(seconds % 60)
+      return mins.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0')
+    },
+    
+    // 滚动到底部
+    scrollToBottom() {
+      setTimeout(() => {
+        this.scrollTop = 999999
+      }, 100)
+    },
+    
+    // 加载更多历史消息
+    loadMoreHistory() {
+      if (!this.showLoadMore) return
+      
+      this.hasMoreHistory = true
+      this.loadingText = '加载历史消息中...'
+      
+      // 模拟加载历史消息
+      setTimeout(() => {
+        const historyMessages = [
+          {
+            id: --this.messageId,
+            role: 'ai',
+            type: 'text',
+            content: '这是历史消息1',
+            timestamp: Date.now() - 86400000
+          },
+          {
+            id: --this.messageId,
+            role: 'user',
+            type: 'text',
+            content: '这是历史消息2',
+            timestamp: Date.now() - 86400000
+          }
+        ]
+        
+        this.messages = [...historyMessages, ...this.messages]
+        this.hasMoreHistory = false
+        this.$emit('history-loaded', historyMessages)
+      }, 1000)
+    },
+    
+    // 显示更多工具
+    showMoreTools() {
+      this.showToolsPanel = true
+    },
+    
+    // 隐藏工具面板
+    hideToolsPanel() {
+      this.showToolsPanel = false
+    },
+    
+    // 显示语音面板
+    showVoicePanel() {
+      this.showVoicePanel = true
+    },
+    
+    // 隐藏语音面板
+    hideVoicePanel() {
+      this.showVoicePanel = false
+      this.voiceInputing = false
+    },
+    
+    // 切换语音输入
+    toggleVoiceInput() {
+      this.voiceInputing = !this.voiceInputing
+      
+      if (this.voiceInputing) {
+        this.showVoicePanel()
+        this.startVoiceInput()
+      } else {
+        this.stopVoiceInput()
+        this.hideVoicePanel()
+      }
+    },
+    
+    // 开始语音输入
+    startVoiceInput() {
+      // #ifdef H5
+      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices.getUserMedia({ audio: true })
+          .then(stream => {
+            // 语音输入处理
+            console.log('语音输入开始')
+          })
+          .catch(error => {
+            console.error('语音输入错误:', error)
+            uni.showToast({
+              title: '语音输入失败',
+              icon: 'none'
+            })
+          })
+      }
+      // #endif
+    },
+    
+    // 停止语音输入
+    stopVoiceInput() {
+      this.voiceInputing = false
+      // 停止语音输入逻辑
+    },
+    
+    // 预览文件
+    previewFile(message) {
+      uni.showLoading({ title: '打开文件中...' })
+      
+      // #ifdef H5
+      window.open(message.url, '_blank')
+      // #endif
+      
+      // #ifdef APP-PLUS
+      plus.runtime.openFile(message.url, {
+        error: (e) => {
+          uni.showToast({
+            title: '文件打开失败',
+            icon: 'none'
+          })
+        }
+      })
+      // #endif
+      
+      uni.hideLoading()
+      this.$emit('file-preview', message)
+    },
+    
+    // 切换音频播放
+    toggleAudio(message) {
+      if (message.playing) {
+        this.pauseAudio(message)
+      } else {
+        this.playAudio(message)
+      }
+    },
+    
+    // 播放音频
+    playAudio(message) {
+      if (this.currentAudio && this.currentAudio !== message) {
+        this.pauseAudio(this.currentAudio)
+      }
+      
+      // 模拟音频播放
+      message.playing = true
+      message.currentTime = message.currentTime || 0
+      
+      this.currentAudio = message
+      this.$emit('audio-play', message)
+    },
+    
+    // 暂停音频
+    pauseAudio(message) {
+      message.playing = false
+      this.$emit('audio-pause', message)
+    },
+    
+    // 音频滑块变化
+    onAudioSliderChange(e) {
+      if (this.currentAudio) {
+        this.currentAudio.currentTime = e.detail.value
+      }
+    },
+    
+    onAudioSliderChangeEnd(e) {
+      if (this.currentAudio) {
+        this.currentAudio.currentTime = e.detail.value
+        this.$emit('audio-seek', this.currentAudio)
+      }
+    },
+    
+    // 视频播放
+    onVideoPlay(message) {
+      this.$emit('video-play', message)
+    },
+    
+    // 视频暂停
+    onVideoPause(message) {
+      this.$emit('video-pause', message)
+    },
+    
+    // 打开链接
+    openLink(message) {
+      // #ifdef H5
+      window.open(message.url, '_blank')
+      // #endif
+      
+      // #ifdef APP-PLUS
+      plus.runtime.openURL(message.url)
+      // #endif
+      
+      this.$emit('link-open', message)
+    },
+    
+    // 查看商品
+    viewProduct(message) {
+      this.$emit('product-view', message)
+    },
+    
+    // 处理操作
+    handleAction(action, message) {
+      this.$emit('action-click', { action, message })
+    },
+    
+    // 输入事件
+    onInput(e) {
+      this.$emit('input-change', e.detail.value)
+    },
+    
+    // 选择图片
+    selectImage() {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          const tempFilePaths = res.tempFilePaths
+          const imageMessage = {
+            id: ++this.messageId,
+            role: 'user',
+            type: 'image',
+            content: '',
+            imageUrl: tempFilePaths[0],
+            timestamp: Date.now()
+          }
+          this.messages.push(imageMessage)
+          this.hideToolsPanel()
+          this.$emit('image-selected', imageMessage)
+        }
+      })
+    },
+    
+    // 选择文件
+    selectFile() {
+      // #ifdef H5
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = '*/*'
+      input.onchange = (e) => {
+        const file = e.target.files[0]
+        if (file) {
+          const fileMessage = {
+            id: ++this.messageId,
+            role: 'user',
+            type: 'file',
+            content: '',
+            fileName: file.name,
+            fileSize: file.size,
+            fileType: file.type,
+            timestamp: Date.now()
+          }
+          this.messages.push(fileMessage)
+          this.hideToolsPanel()
+          this.$emit('file-selected', fileMessage)
+        }
+      }
+      input.click()
+      // #endif
+    },
+    
+    // 开始录音
+    startRecord() {
+      this.toggleVoiceInput()
+    },
+    
+    // 选择位置
+    selectLocation() {
+      uni.chooseLocation({
+        success: (res) => {
+          const locationMessage = {
+            id: ++this.messageId,
+            role: 'user',
+            type: 'location',
+            content: '',
+            latitude: res.latitude,
+            longitude: res.longitude,
+            address: res.address,
+            name: res.name,
+            timestamp: Date.now()
+          }
+          this.messages.push(locationMessage)
+          this.hideToolsPanel()
+          this.$emit('location-selected', locationMessage)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-chat-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #f8f8f8;
+}
+
+.chat-messages {
+  flex: 1;
+  padding: 20rpx;
+  overflow: hidden;
+}
+
+.load-more {
+  text-align: center;
+  padding: 20rpx 0;
+}
+
+.message-item {
+  margin-bottom: 30rpx;
+  
+  &.first-message {
+    margin-top: 20rpx;
+  }
+}
+
+.user-message, .ai-message {
+  display: flex;
+  align-items: flex-start;
+  
+  .avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .message-content {
+    flex: 1;
+    margin-left: 20rpx;
+    max-width: calc(100% - 100rpx);
+  }
+}
+
+.user-message {
+  flex-direction: row-reverse;
+  
+  .message-content {
+    margin-left: 0;
+    margin-right: 20rpx;
+    text-align: right;
+  }
+  
+  .message-bubble {
+    background-color: #ff4544;
+    color: white;
+    border-radius: 20rpx 20rpx 0 20rpx;
+    padding: 20rpx;
+    display: inline-block;
+    max-width: 100%;
+    word-break: break-word;
+  }
+}
+
+.ai-message {
+  .message-bubble {
+    background-color: white;
+    border-radius: 20rpx 20rpx 20rpx 0;
+    padding: 20rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+    max-width: 100%;
+    word-break: break-word;
+  }
+}
+
+.message-time {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 10rpx;
+}
+
+/* 各种消息类型样式 */
+.markdown-content {
+  .markdown-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15rpx;
+    
+    .icon-markdown {
+      color: #ff4544;
+      margin-right: 10rpx;
+    }
+    
+    .markdown-title {
+      font-weight: bold;
+      color: #333;
+    }
+  }
+  
+  .markdown-body {
+    line-height: 1.6;
+    
+    strong {
+      font-weight: bold;
+    }
+    
+    em {
+      font-style: italic;
+    }
+    
+    code {
+      background-color: #f5f5f5;
+      padding: 4rpx 8rpx;
+      border-radius: 4rpx;
+      font-family: monospace;
+    }
+    
+    a {
+      color: #ff4544;
+      text-decoration: underline;
+    }
+  }
+}
+
+.file-content {
+  .file-item {
+    display: flex;
+    align-items: center;
+    padding: 20rpx;
+    background-color: #f8f9fa;
+    border-radius: 10rpx;
+    border: 2rpx solid #e9ecef;
+    
+    .file-icon {
+      margin-right: 20rpx;
+      
+      .icon-file {
+        font-size: 48rpx;
+        color: #ff4544;
+      }
+    }
+    
+    .file-info {
+      flex: 1;
+      
+      .file-name {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+      
+      .file-size {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+    
+    .file-action {
+      .icon-download {
+        font-size: 36rpx;
+        color: #ff4544;
+      }
+    }
+  }
+}
+
+.audio-content {
+  .audio-player {
+    .audio-info {
+      margin-bottom: 15rpx;
+      
+      .audio-title {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+      
+      .audio-duration {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+    
+    .audio-controls {
+      display: flex;
+      align-items: center;
+      
+      .play-btn {
+        width: 60rpx;
+        height: 60rpx;
+        border-radius: 50%;
+        background-color: #ff4544;
+        color: white;
+        margin-right: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &.playing {
+          background-color: #999;
+        }
+      }
+      
+      .audio-slider {
+        flex: 1;
+      }
+    }
+  }
+}
+
+.video-content {
+  .video-player {
+    .video-element {
+      width: 100%;
+      height: 400rpx;
+      border-radius: 10rpx;
+    }
+    
+    .video-info {
+      margin-top: 15rpx;
+      
+      .video-title {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+      
+      .video-duration {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+}
+
+.link-content {
+  .link-card {
+    display: flex;
+    background-color: #f8f9fa;
+    border-radius: 10rpx;
+    overflow: hidden;
+    border: 2rpx solid #e9ecef;
+    
+    .link-image {
+      width: 120rpx;
+      height: 120rpx;
+      flex-shrink: 0;
+      
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    
+    .link-info {
+      flex: 1;
+      padding: 20rpx;
+      
+      .link-title {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+      
+      .link-desc {
+        display: block;
+        font-size: 24rpx;
+        color: #666;
+        margin-bottom: 5rpx;
+      }
+      
+      .link-url {
+        display: block;
+        font-size: 22rpx;
+        color: #ff4544;
+      }
+    }
+  }
+}
+
+.product-content {
+  .product-card {
+    display: flex;
+    background-color: white;
+    border-radius: 10rpx;
+    overflow: hidden;
+    border: 2rpx solid #e9ecef;
+    
+    .product-image {
+      width: 120rpx;
+      height: 120rpx;
+      flex-shrink: 0;
+      
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    
+    .product-info {
+      flex: 1;
+      padding: 20rpx;
+      
+      .product-title {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+      
+      .product-price {
+        display: block;
+        font-size: 28rpx;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+      
+      .product-desc {
+        display: block;
+        font-size: 24rpx;
+        color: #666;
+      }
+    }
+  }
+}
+
+.loading-content {
+  display: flex;
+  align-items: center;
+  
+  .loading-dots {
+    display: flex;
+    margin-right: 15rpx;
+    
+    .dot {
+      width: 12rpx;
+      height: 12rpx;
+      border-radius: 50%;
+      background-color: #999;
+      margin: 0 4rpx;
+      animation: dotPulse 1.5s infinite ease-in-out;
+      
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+      
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+    }
+  }
+  
+  .loading-text {
+    color: #999;
+  }
+}
+
+@keyframes dotPulse {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.message-actions {
+  margin-top: 15rpx;
+  display: flex;
+  gap: 10rpx;
+  
+  .action-btn {
+    padding: 8rpx 16rpx;
+    border-radius: 20rpx;
+    font-size: 24rpx;
+    border: 2rpx solid #e9ecef;
+    background-color: white;
+    
+    &.like {
+      color: #ff4544;
+      border-color: #ff4544;
+    }
+    
+    &.dislike {
+      color: #999;
+      border-color: #999;
+    }
+  }
+}
+
+/* 输入区域样式 */
+.input-area {
+  background-color: white;
+  border-top: 2rpx solid #eeeeee;
+  padding: 20rpx;
+}
+
+.input-tools {
+  display: flex;
+  margin-bottom: 15rpx;
+  
+  .tool-btn {
+    width: 60rpx;
+    height: 60rpx;
+    border-radius: 50%;
+    background-color: #f8f8f8;
+    margin-right: 15rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .iconfont {
+      font-size: 32rpx;
+      color: #666;
+    }
+  }
+}
+
+.input-container {
+  display: flex;
+  align-items: flex-end;
+  
+  .message-input {
+    flex: 1;
+    min-height: 80rpx;
+    max-height: 200rpx;
+    background-color: #f8f8f8;
+    border-radius: 40rpx;
+    padding: 20rpx 30rpx;
+    font-size: 28rpx;
+    line-height: 1.4;
+  }
+  
+  .send-btn {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    background-color: #ff4544;
+    margin-left: 15rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &.disabled {
+      background-color: #cccccc;
+    }
+    
+    .iconfont {
+      font-size: 36rpx;
+      color: white;
+    }
+  }
+}
+
+/* 弹窗样式 */
+.tools-popup, .voice-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+
+.tools-mask, .voice-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* 工具面板样式 */
+.tools-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border-radius: 20rpx 20rpx 0 0;
+  
+  .tools-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30rpx;
+    border-bottom: 2rpx solid #eeeeee;
+    
+    .close-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;
+      }
+    }
+  }
+  
+  .tools-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    padding: 30rpx;
+    gap: 30rpx;
+    
+    .tool-item {
+      text-align: center;
+      
+      .tool-icon {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 20rpx;
+        background-color: #f8f8f8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 15rpx;
+        
+        .iconfont {
+          font-size: 48rpx;
+          color: #666;
+        }
+      }
+      
+      .tool-text {
+        font-size: 24rpx;
+        color: #666;
+      }
+    }
+  }
+}
+
+/* 语音输入面板样式 */
+.voice-input-panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  width: 500rpx;
+  
+  .voice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30rpx;
+    
+    .close-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;
+      }
+    }
+  }
+  
+  .voice-content {
+    text-align: center;
+    margin-bottom: 30rpx;
+    
+    .voice-wave {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100rpx;
+      margin-bottom: 20rpx;
+      
+      .wave-bar {
+        width: 6rpx;
+        height: 30rpx;
+        background-color: #ff4544;
+        margin: 0 3rpx;
+        border-radius: 3rpx;
+        animation: wavePulse 1.5s infinite ease-in-out;
+      }
+      
+      &.recording .wave-bar {
+        animation: wavePulseRecording 0.5s infinite ease-in-out;
+      }
+    }
+    
+    .voice-tip {
+      font-size: 28rpx;
+      color: #666;
+    }
+  }
+  
+  .voice-actions {
+    text-align: center;
+    
+    .voice-btn {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 50%;
+      background-color: #ff4544;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+      
+      .iconfont {
+        font-size: 48rpx;
+        color: white;
+      }
+    }
+  }
+}
+
+@keyframes wavePulse {
+  0%, 100% {
+    transform: scaleY(0.5);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes wavePulseRecording {
+  0%, 100% {
+    transform: scaleY(0.3);
+  }
+  50% {
+    transform: scaleY(2);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/ai-chat-message/demo.vue b/components/ai-chat-message/demo.vue
new file mode 100644
index 0000000..dad9d5f
--- /dev/null
+++ b/components/ai-chat-message/demo.vue
@@ -0,0 +1,288 @@
+<template>
+  <view class="demo-container">
+    <view class="demo-header">
+      <text class="demo-title">AI智能客服组件演示</text>
+    </view>
+    
+    <ai-chat-message 
+      ref="chat"
+      :initial-messages="demoMessages"
+      user-avatar="/static/images/demo-user.png"
+      ai-avatar="/static/images/demo-ai.png"
+      @message-sent="onMessageSent"
+      @ai-response="onAIResponse"
+      @action-click="onActionClick"
+      @file-preview="onFilePreview"
+      @audio-play="onAudioPlay"
+      @video-play="onVideoPlay"
+      @link-open="onLinkOpen"
+      @product-view="onProductView" />
+      
+    <view class="demo-controls">
+      <button class="control-btn" @click="addTextMessage">添加文本消息</button>
+      <button class="control-btn" @click="addMarkdownMessage">添加Markdown</button>
+      <button class="control-btn" @click="addFileMessage">添加文件</button>
+      <button class="control-btn" @click="addAudioMessage">添加音频</button>
+      <button class="control-btn" @click="addVideoMessage">添加视频</button>
+      <button class="control-btn" @click="addLinkMessage">添加链接</button>
+      <button class="control-btn" @click="addProductMessage">添加商品</button>
+      <button class="control-btn" @click="clearMessages">清空消息</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      demoMessages: [
+        {
+          id: 1,
+          role: 'ai',
+          type: 'text',
+          content: '您好！我是AI智能客服演示程序，我可以展示多种消息类型。请点击下方的按钮体验不同功能！',
+          timestamp: Date.now() - 300000,
+          actions: [
+            { id: 1, text: '开始体验', type: 'like' }
+          ]
+        }
+      ]
+    }
+  },
+  
+  methods: {
+    // 添加文本消息
+    addTextMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'text',
+        content: '这是一个文本消息示例，支持**粗体**、*斜体*和`代码`格式。也可以包含换行符\n这是第二行内容。',
+        timestamp: Date.now(),
+        actions: [
+          { id: 1, text: '有帮助', type: 'like' },
+          { id: 2, text: '没帮助', type: 'dislike' }
+        ]
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 添加Markdown消息
+    addMarkdownMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'markdown',
+        content: `# Markdown文档示例
+
+## 二级标题
+
+这是一个支持**粗体**、*斜体*和\`代码\`的Markdown消息。
+
+### 功能特性
+- ✅ 支持标题层级
+- ✅ 支持列表展示
+- ✅ 支持代码高亮
+- ✅ 支持链接跳转
+
+[查看详细文档](https://example.com)\n\n**注意：** 这是一个演示内容，实际使用时可以集成真实的文档系统。`,
+        timestamp: Date.now(),
+        actions: [
+          { id: 1, text: '查看文档', type: 'like' }
+        ]
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 添加文件消息
+    addFileMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'file',
+        fileName: '产品介绍文档.pdf',
+        fileSize: 2048000,
+        url: 'https://example.com/document.pdf',
+        timestamp: Date.now()
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 添加音频消息
+    addAudioMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'audio',
+        title: '产品功能介绍',
+        duration: 89,
+        url: 'https://example.com/audio.mp3',
+        timestamp: Date.now(),
+        playing: false,
+        currentTime: 0
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 添加视频消息
+    addVideoMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'video',
+        title: '产品演示视频',
+        duration: 180,
+        url: 'https://example.com/video.mp4',
+        cover: '/static/images/video-cover.jpg',
+        timestamp: Date.now()
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 添加链接消息
+    addLinkMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'link',
+        title: '帮助中心',
+        description: '详细的产品使用说明和常见问题解答',
+        url: 'https://example.com/help',
+        image: '/static/images/link-thumbnail.jpg',
+        timestamp: Date.now()
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 添加商品消息
+    addProductMessage() {
+      const message = {
+        id: Date.now(),
+        role: 'ai',
+        type: 'product',
+        title: '智能手表 X1',
+        price: 1299,
+        description: '全新一代智能手表，支持心率监测、运动追踪、消息提醒等功能',
+        image: '/static/images/product-demo.jpg',
+        timestamp: Date.now(),
+        actions: [
+          { id: 1, text: '立即购买', type: 'like' },
+          { id: 2, text: '查看详情', type: 'dislike' }
+        ]
+      }
+      this.$refs.chat.messages.push(message)
+    },
+    
+    // 清空消息
+    clearMessages() {
+      this.$refs.chat.messages = [
+        {
+          id: 1,
+          role: 'ai',
+          type: 'text',
+          content: '消息已清空，可以重新开始体验！',
+          timestamp: Date.now()
+        }
+      ]
+    },
+    
+    // 事件处理
+    onMessageSent(message) {
+      console.log('用户发送消息:', message)
+      uni.showToast({
+        title: '消息发送成功',
+        icon: 'success'
+      })
+    },
+    
+    onAIResponse(message) {
+      console.log('AI回复消息:', message)
+    },
+    
+    onActionClick({ action, message }) {
+      console.log('操作点击:', action, message)
+      uni.showToast({
+        title: `点击了: ${action.text}`,
+        icon: 'none'
+      })
+    },
+    
+    onFilePreview(message) {
+      console.log('文件预览:', message)
+      uni.showToast({
+        title: '正在打开文件...',
+        icon: 'none'
+      })
+    },
+    
+    onAudioPlay(message) {
+      console.log('音频播放:', message)
+    },
+    
+    onVideoPlay(message) {
+      console.log('视频播放:', message)
+    },
+    
+    onLinkOpen(message) {
+      console.log('链接打开:', message)
+      uni.showToast({
+        title: '正在打开链接...',
+        icon: 'none'
+      })
+    },
+    
+    onProductView(message) {
+      console.log('商品查看:', message)
+      uni.showToast({
+        title: '正在查看商品...',
+        icon: 'none'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+.demo-header {
+  background-color: #ff4544;
+  color: white;
+  padding: 30rpx;
+  text-align: center;
+  
+  .demo-title {
+    font-size: 32rpx;
+    font-weight: bold;
+  }
+}
+
+.demo-controls {
+  background-color: white;
+  padding: 20rpx;
+  border-top: 2rpx solid #eeeeee;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  
+  .control-btn {
+    flex: 1;
+    min-width: 150rpx;
+    height: 60rpx;
+    background-color: #f8f8f8;
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    color: #333;
+    border: none;
+    
+    &:active {
+      background-color: #eeeeee;
+    }
+  }
+}
+</style>
\ No newline at end of file