cd-aichat 1.0.0

package/src/components/AiChat.vue

@@ -0,0 +1,2206 @@
+<template>
+  <div class="im-container" :class="{ 'im-container--mobile': isMobile }" @click="handleContainerClick">
+    <!-- 头部 -->
+    <div class="header">
+      <i v-if="showBackButton" class="ri-arrow-left-line" @click="handleBack"></i>
+      <div class="user-info">
+        <div class="user-avatar" v-if="chatUser.avatar">
+          <img :src="chatUser.avatar" alt="avatar" />
+        </div>
+        <div class="user-details">
+          <div class="user-name">{{ chatUser.name || '聊天' }}</div>
+          <div class="user-account" v-if="chatUser.account">@{{ chatUser.account }}</div>
+          <div class="user-status" v-if="chatType === 'group'">{{ groupMemberCount }}人</div>
+        </div>
+      </div>
+      <div class="header-actions">
+        <i class="header-more-icon ri-more-line" title="更多操作" @click="handleMore"></i>
+        <i v-if="showCloseButton" class="header-close-icon ri-close-line" title="关闭" @click="handleClose"></i>
+      </div>
+    </div>
+    <!-- 聊天区域 -->
+    <div class="main">
+      <div class="chatBox">
+        <!-- 消息列表 -->
+        <div class="chatList" ref="chatListRef" :style="{ height: `${chatListHeight}%` }">
+          <div class="chatList-item" v-for="(item, index) in messages" :key="index" :class="{
+            'chatList-item--mine': item.userId === currentUserId,
+            'chatList-item--compact': shouldHideHeader(item, index)
+          }" @contextmenu.prevent="showContextMenu($event, item)">
+            <!-- 时间戳 -->
+            <div class="chatList-time" v-if="shouldShowTime(item, index)">
+              {{ formatTime(item.dateTime) }}
+            </div>
+            <div class="chatList-wrapper">
+              <!-- 左侧头像（其他人） -->
+              <div class="chatList-avatar" v-if="item.userId !== currentUserId && !shouldHideHeader(item, index)">
+                <img :src="item.avatar || defaultAvatar" alt="avatar" />
+              </div>
+              <div class="chatList-avatar chatList-avatar--placeholder"
+                v-if="shouldHideHeader(item, index) && item.userId !== currentUserId"></div>
+              <!-- 消息内容 -->
+              <div class="chatList-content">
+                <!-- 群聊显示发送者名字 -->
+                <div v-if="chatType === 'group' && item.userId !== currentUserId && !shouldHideHeader(item, index)"
+                  class="chatList-sender-name">
+                  {{ item.senderName || '群成员' }}
+                </div>
+                <div class="chatList-text" :class="{
+                  'chatList-text--mine': item.userId === currentUserId && item.messageType === 'text',
+                  'chatList-text--ai': chatType === 'ai' && item.userId !== currentUserId && item.messageType === 'text',
+                  'chatList-text--group': chatType === 'group' && item.messageType === 'text',
+                  'chatList-text--no-bg': item.messageType !== 'text'
+                }">
+                  <div class="chatList-arrow" v-if="item.messageType === 'text'"></div>
+                  <!-- 文本消息 -->
+                  <p v-if="item.messageType === 'text'" v-html="item.message" class="chatList__msg--text"></p>
+                  <!-- 图片消息 -->
+                  <img v-if="item.messageType === 'image'" :src="item.message" class="chatList__msg--img"
+                    @click="handlePreview(item.message)" />
+                  <!-- 文件消息 -->
+                  <div v-if="item.messageType === 'file'" class="chatList__msg--file">
+                    <i class="ri-file-text-line file-icon"></i>
+                    <div class="file-info">
+                      <div class="file-name">{{ item.message }}</div>
+                      <div class="file-size" v-if="item.file">{{ formatFileSize(item.file.size) }}</div>
+                    </div>
+                  </div>
+                  <!-- 语音消息 -->
+                  <div v-if="item.messageType === 'voice'" class="chatList__msg--voice"
+                    @click="playVoiceMessage(item.messageId)">
+                    <i class="ri-play-circle-line voice-play-icon"></i>
+                    <span class="voice-duration">{{ item.duration }}"</span>
+                    <audio :data-message-id="item.messageId" :src="item.audioUrl || item.message"
+                      style="display: none;"></audio>
+                  </div>
+                  <!-- 视频消息 -->
+                  <video v-if="item.messageType === 'video'" :src="item.message" controls
+                    class="chatList__msg--video"></video>
+                  <!-- 流式消息加载指示器 -->
+                  <span v-if="item.isStreaming" class="streaming-indicator">▊</span>
+                </div>
+              </div>
+              <!-- 右侧头像（自己） -->
+              <div class="chatList-avatar" v-if="item.userId === currentUserId && !shouldHideHeader(item, index)">
+                <img :src="currentUserAvatar || defaultAvatar" alt="avatar" />
+              </div>
+              <div class="chatList-avatar chatList-avatar--placeholder"
+                v-if="shouldHideHeader(item, index) && item.userId === currentUserId"></div>
+            </div>
+          </div>
+          <!-- 加载中 -->
+          <div v-if="loading" class="chatList-loading">
+            <div class="loading-dots">
+              <span></span><span></span><span></span>
+            </div>
+          </div>
+          <!-- 录音对话框 -->
+          <div v-if="isRecording" class="recording-dialog-overlay">
+            <div class="recording-dialog-content">
+              <div class="recording-icon"
+                :class="{ 'cancel-mode': recordingCancelMode, 'voice-to-text-mode': voiceToTextModeRef }">
+                <i class="ri-mic-line"></i>
+              </div>
+              <div class="recording-time">{{ recordingTime }}"</div>
+              <div class="recording-hints">
+                <div class="hint-item" :class="{ active: recordingCancelMode }">
+                  <i class="ri-arrow-up-line"></i>
+                  <span>上滑取消</span>
+                </div>
+                <div class="hint-item" :class="{ active: voiceToTextModeRef }">
+                  <i class="ri-arrow-down-line"></i>
+                  <span>下滑转文字</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 拖拽调整高度 -->
+        <div class="resize-handle" @mousedown="startResize" :class="{ 'resizing': isResizing }">
+          <div class="resize-line"></div>
+        </div>
+        <!-- 工具栏 -->
+        <div class="toolBox">
+          <div class="toolBox-left">
+            <!-- 表情 -->
+            <i v-if="!hiddenTools.includes('emoji')" class="tool-icon ri-emotion-line" title="表情"
+              @click.stop="toggleEmoji"></i>
+            <!-- 收藏 -->
+            <i v-if="!hiddenTools.includes('favorite')" class="tool-icon ri-star-line" title="收藏"
+              @click="handleFavorite"></i>
+            <!-- 截屏 -->
+            <i v-if="enableScreenshot && !hiddenTools.includes('screenshot')" class="tool-icon ri-screenshot-line"
+              title="截屏 (Ctrl+Alt+Q)" @click="handleScreenshotClick"></i>
+            <!-- 图片 -->
+            <i v-if="!hiddenTools.includes('image')" class="tool-icon ri-image-line" title="图片"
+              @click="handleSendImage"></i>
+            <!-- 文件夹 -->
+            <i v-if="!hiddenTools.includes('file')" class="tool-icon ri-folder-line" title="文件夹"
+              @click="handleSendFile"></i>
+            <!-- 位置 -->
+            <i v-if="!hiddenTools.includes('location')" class="tool-icon ri-map-pin-line" title="位置"
+              @click="handleSendLocation"></i>
+            <!-- 名片 -->
+            <i v-if="!hiddenTools.includes('card')" class="tool-icon ri-contacts-line" title="名片"
+              @click="handleSendCard"></i>
+            <!-- 语音消息（长按） -->
+            <i v-if="!hiddenTools.includes('voice')" class="tool-icon ri-mic-line" title="按住说话"
+              @mousedown="startVoiceRecording" @touchstart="startVoiceRecording"
+              @touchcancel="cancelVoiceRecording"></i>
+          </div>
+          <div class="toolBox-right">
+            <!-- 语音通话 -->
+            <i v-if="!hiddenTools.includes('voiceCall')" class="tool-icon ri-phone-line" title="语音通话"
+              @click="handleVoiceCall"></i>
+            <!-- 视频通话 -->
+            <i v-if="!hiddenTools.includes('videoCall')" class="tool-icon ri-vidicon-line" title="视频通话"
+              @click="handleVideoCall"></i>
+          </div>
+        </div>
+        <!-- 输入框 -->
+        <div class="writeBox">
+          <div class="input-wrapper">
+            <!-- @ 提及定位锚点 -->
+            <!-- 富文本编辑器 -->
+            <RichTextEditor ref="messageInputRef" v-model="messageContent" :placeholder="'输入消息...'"
+              :members="chatType === 'group' && chatUser.members ? chatUser.members : []" :resources="resources"
+              :chatType="chatType" @submit="sendMessage" @openPersonSelector="handleOpenPersonSelector"
+              @openResourceSelector="handleOpenResourceSelector" />
+            <div class="input-actions">
+              <!-- 发送按钮 -->
+              <t-button class="send-btn" @click="sendMessage" :disabled="!messageContent.trim() || loading" title="发送 ">
+                发送(S)
+              </t-button>
+              <!-- 发送选项下拉菜单 -->
+              <t-dropdown :options="sendOptions" @click="handleSendOptionClick" trigger="click">
+                <template #default>
+                  <t-button class="send-options-btn" :disabled="!messageContent.trim() || loading" title="发送选项">
+                    <i class="ri-arrow-down-s-line"></i>
+                  </t-button>
+                </template>
+              </t-dropdown>
+            </div>
+          </div>
+          <!-- 延时发送消息列表 -->
+          <div v-if="scheduledMessages.length > 0" class="scheduled-messages">
+            <div class="scheduled-messages-header">
+              <i class="ri-time-line"></i>
+              <span>待发送消息 ({{ scheduledMessages.length }})</span>
+            </div>
+            <div v-for="(msg, index) in scheduledMessages" :key="msg.id" class="scheduled-message-item">
+              <div class="scheduled-message-content">
+                <div class="scheduled-message-text">{{ msg.content }}</div>
+                <div class="scheduled-message-time">
+                  <i class="ri-timer-line"></i>
+                  {{ msg.scheduledTime }}
+                </div>
+              </div>
+              <div class="scheduled-message-actions">
+                <button class="scheduled-action-btn edit-btn" @click="editScheduledMessage(index)" title="修改">
+                  <i class="ri-edit-line"></i>
+                </button>
+                <button class="scheduled-action-btn cancel-btn" @click="cancelScheduledMessage(index)" title="撤销">
+                  <i class="ri-close-line"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 消息模板选择器 -->
+    <div v-if="showTemplateDialog" class="template-dialog-overlay" @click="closeTemplateDialog">
+      <div class="template-dialog" @click.stop>
+        <div class="template-dialog-header">
+          <span>消息模板</span>
+          <div class="template-header-actions">
+            <i class="ri-add-line" @click="openTemplateEditor()" title="添加模板"></i>
+            <i class="ri-close-line" @click="closeTemplateDialog" title="关闭"></i>
+          </div>
+        </div>
+        <div class="template-dialog-body">
+          <!-- 搜索和分类 -->
+          <div class="template-filters">
+            <input v-model="templateSearchQuery" type="text" placeholder="搜索模板..." class="template-search" />
+            <div class="template-categories">
+              <button :class="['category-btn', { active: selectedCategory === 'all' }]"
+                @click="selectedCategory = 'all'">
+                全部
+              </button>
+              <button v-for="cat in templateCategories" :key="cat.id"
+                :class="['category-btn', { active: selectedCategory === cat.id }]" @click="selectedCategory = cat.id">
+                {{ cat.icon }} {{ cat.name }}
+              </button>
+            </div>
+          </div>
+          <!-- 模板列表 -->
+          <div class="template-list">
+            <div v-for="template in filteredTemplates" :key="template.id" class="template-item">
+              <div class="template-content" @click="useTemplate(template, 'insert')">
+                <div class="template-name">{{ template.name }}</div>
+                <div class="template-preview">{{ template.content }}</div>
+                <div class="template-meta">
+                  <span class="template-category">{{ getCategoryName(template.category) }}</span>
+                  <span class="template-usage">使用 {{ template.usageCount }} 次</span>
+                </div>
+              </div>
+              <div class="template-actions">
+                <i class="ri-send-plane-line" @click="useTemplate(template, 'send')" title="直接发送"></i>
+                <i class="ri-edit-line" @click="openTemplateEditor(template)" title="编辑"></i>
+                <i class="ri-delete-bin-line" @click="deleteTemplate(template)" title="删除"></i>
+              </div>
+            </div>
+            <div v-if="filteredTemplates.length === 0" class="template-empty">
+              <i class="ri-inbox-line"></i>
+              <p>暂无模板</p>
+              <button @click="openTemplateEditor()" class="add-template-btn">添加模板</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 模板编辑器 -->
+    <div v-if="showTemplateEditor" class="template-editor-overlay" @click="closeTemplateEditor">
+      <div class="template-editor" @click.stop>
+        <div class="template-editor-header">
+          <span>{{ editingTemplate?.id ? '编辑模板' : '添加模板' }}</span>
+          <i class="ri-close-line" @click="closeTemplateEditor"></i>
+        </div>
+        <div class="template-editor-body">
+          <div class="form-group">
+            <label>模板名称</label>
+            <input v-model="editingTemplate.name" type="text" placeholder="输入模板名称" class="form-input" />
+          </div>
+          <div class="form-group">
+            <label>分类</label>
+            <div class="category-selector">
+              <button v-for="cat in templateCategories" :key="cat.id"
+                :class="['category-option', { active: editingTemplate.category === cat.id }]"
+                @click="editingTemplate.category = cat.id">
+                {{ cat.icon }} {{ cat.name }}
+              </button>
+            </div>
+          </div>
+          <div class="form-group">
+            <label>内容</label>
+            <textarea v-model="editingTemplate.content"
+              placeholder="输入模板内容&#10;&#10;支持变量：&#10;{time} - 时间&#10;{date} - 日期&#10;{name} - 姓名&#10;{weekday} - 星期"
+              class="form-textarea" rows="6"></textarea>
+          </div>
+          <div class="variable-hint">
+            <i class="ri-information-line"></i>
+            <span>提示：使用 {变量名} 插入动态内容</span>
+          </div>
+        </div>
+        <div class="template-editor-footer">
+          <button class="btn-cancel" @click="closeTemplateEditor">取消</button>
+          <button class="btn-save" @click="saveTemplateData">保存</button>
+        </div>
+      </div>
+    </div>
+    <!-- 表情选择器 -->
+    <div class="emoji-picker" v-if="showEmojiPicker" @click.stop>
+      <!-- 分类标签 -->
+      <div class="emoji-tabs">
+        <div v-for="category in emojiCategories" :key="category.key"
+          :class="['emoji-tab', { active: activeEmojiTab === category.key }]" @click="activeEmojiTab = category.key"
+          :title="category.name">
+          {{ category.icon }}
+        </div>
+      </div>
+      <!-- 表情列表 -->
+      <div class="emoji-list">
+        <div v-for="emoji in currentEmojis" :key="emoji.id" @click="selectCustomEmoji(emoji)" class="emoji-item"
+          :title="emoji.name">
+          <img :src="getEmojiUrl(emoji.url, currentCategory.folder)" :alt="emoji.name" />
+        </div>
+      </div>
+    </div>
+    <!-- 上下文菜单 -->
+    <div v-if="showContextMenuFlag" class="context-menu" :style="{
+      top: contextMenuPosition.y + 'px',
+      left: contextMenuPosition.x + 'px'
+    }" @click.stop>
+      <div class="context-menu-item" @click="handleCopy">
+        <i class="ri-file-copy-line"></i>
+        <span>复制</span>
+      </div>
+      <div class="context-menu-item" @click="handleRecall" v-if="canRecall">
+        <i class="ri-delete-back-2-line"></i>
+        <span>撤回</span>
+      </div>
+      <div class="context-menu-item" @click="handleForward">
+        <i class="ri-share-forward-line"></i>
+        <span>转发</span>
+      </div>
+      <div class="context-menu-item" @click="handleFavorite">
+        <i class="ri-star-line"></i>
+        <span>收藏</span>
+      </div>
+    </div>
+    <!-- 收藏对话框 -->
+    <div v-if="showFavoriteDialog" class="favorite-dialog-overlay" @click="closeFavoriteDialog">
+      <div class="favorite-dialog" @click.stop>
+        <div class="favorite-dialog-header">
+          <span class="favorite-dialog-title">收藏</span>
+          <i class="ri-close-line favorite-dialog-close" @click="closeFavoriteDialog"></i>
+        </div>
+        <div class="favorite-dialog-content">
+          <!-- 使用插槽让父组件自定义内容 -->
+          <slot name="favorite-content" :message="selectedMessage">
+            <!-- 默认内容 -->
+            <div class="favorite-default-content">
+              <div class="favorite-message-preview" v-if="selectedMessage">
+                <div class="favorite-message-type">
+                  <i class="ri-chat-3-line"></i>
+                  <span>聊天记录</span>
+                </div>
+                <div class="favorite-message-text" v-if="selectedMessage.messageType === 'text'">
+                  {{ selectedMessage.message }}
+                </div>
+                <div class="favorite-message-image" v-if="selectedMessage.messageType === 'image'">
+                  <img :src="selectedMessage.message" alt="图片" />
+                </div>
+              </div>
+              <div class="favorite-note">
+                <textarea v-model="favoriteNote" placeholder="添加备注（选填）" class="favorite-note-input" rows="3"></textarea>
+              </div>
+            </div>
+          </slot>
+        </div>
+        <div class="favorite-dialog-footer">
+          <button class="favorite-btn favorite-btn-cancel" @click="closeFavoriteDialog">取消</button>
+          <button class="favorite-btn favorite-btn-confirm" @click="confirmFavorite">确定</button>
+        </div>
+      </div>
+    </div>
+    <!-- 收藏列表对话框 -->
+    <div v-if="showFavoritesListDialog" class="favorites-list-dialog-overlay" @click="closeFavoritesListDialog">
+      <div class="favorites-list-dialog" @click.stop>
+        <div class="favorites-list-header">
+          <span class="favorites-list-title">我的收藏</span>
+          <i class="ri-close-line favorites-list-close" @click="closeFavoritesListDialog"></i>
+        </div>
+        <div class="favorites-list-content">
+          <div v-if="favoritesList.length === 0" class="favorites-list-empty">
+            <i class="ri-star-line"></i>
+            <p>暂无收藏</p>
+          </div>
+          <div v-else class="favorites-list-items">
+            <div v-for="item in favoritesList" :key="item.id" class="favorites-list-item"
+              @click="sendFavoriteItem(item)">
+              <div class="favorite-item-icon">
+                <i v-if="item.type === 'text'" class="ri-file-text-line"></i>
+                <i v-else-if="item.type === 'image'" class="ri-image-line"></i>
+                <i v-else-if="item.type === 'link'" class="ri-link"></i>
+                <i v-else class="ri-file-line"></i>
+              </div>
+              <div class="favorite-item-content">
+                <div class="favorite-item-title">{{ item.title || '无标题' }}</div>
+                <div class="favorite-item-preview">{{ item.content }}</div>
+                <div class="favorite-item-time">{{ item.time }}</div>
+              </div>
+              <i class="ri-arrow-right-s-line favorite-item-arrow"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 私聊：用户操作抽屉 -->
+    <slot name="user-action-drawer" :visible="showUserDrawer" :userInfo="chatUser" :handlers="drawerHandlers">
+      <!-- 默认实现，父组件可以通过插槽自定义 -->
+    </slot>
+    <!-- 群聊：群聊信息对话框 -->
+    <slot name="group-info-dialog" :visible="showUserDrawer" :groupId="chatUser.id" :handlers="groupDialogHandlers">
+      <!-- 默认实现，父组件可以通过插槽自定义 -->
+    </slot>
+    <!-- 发起群聊对话框 -->
+    <slot name="create-group-dialog" :visible="createGroupDialogVisible" :preselectedUsers="preselectedUsersForGroup"
+      :groupId="targetGroupIdForAddMember" :existingMemberIds="existingGroupMemberIds" :handlers="createGroupHandlers">
+      <!-- 默认实现，父组件可以通过插槽自定义 -->
+    </slot>
+    <!-- 截屏工具 -->
+    <ScreenshotTool v-if="enableScreenshot" ref="screenshotToolRef" @screenshot="handleScreenshot"
+      @cancel="() => console.log('Screenshot cancelled')" />
+  </div>
+</template>
+<script>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, h } from 'vue';
+import { Popup } from 'tdesign-vue-next';
+import 'tdesign-vue-next/es/style/index.css';
+import DifyApiService from '../services/dify-api';
+import { replaceEmoji } from '../utils/emoji';
+import { emojiCategories, getEmojiUrl, replaceEmojiInText } from '../utils/emojiData';
+import { ScreenshotTool } from '@diycom/cd-screencut';
+import '@diycom/cd-screencut/style.css';
+import RichTextEditor from './RichTextEditor.vue';
+export default {
+  name: 'CdAiChat',
+  components: {
+    ScreenshotTool,
+    RichTextEditor
+  },
+  props: {
+    // 聊天类型: 'person' | 'ai' | 'group'
+    chatType: {
+      type: String,
+      default: 'ai',
+      validator: (value) => ['person', 'ai', 'group'].includes(value)
+    },
+    // 聊天用户信息
+    chatUser: {
+      type: Object,
+      default: () => ({
+        id: '',
+        name: 'AI助手',
+        avatar: '',
+        account: ''
+      })
+    },
+    // 当前用户ID
+    currentUserId: {
+      type: String,
+      required: true
+    },
+    // 当前用户头像
+    currentUserAvatar: {
+      type: String,
+      default: ''
+    },
+    // 初始消息列表
+    initialMessages: {
+      type: Array,
+      default: () => []
+    },
+    // AI配置（仅AI模式需要）
+    aiConfig: {
+      type: Object,
+      default: () => ({
+        // 基础配置（向后兼容）
+        url: '',
+        agentId: '',
+        apiKey: '',
+        // 平台和场景上下文（新增）
+        platform: '',
+        scene: '',
+        // 知识库配置（新增）
+        knowledgeBase: null,
+        // 输入变量（新增）
+        inputVariables: {},
+        // 会话配置（新增）
+        conversation: {
+          id: '',
+          autoCreate: true,
+          timeout: 1800000
+        },
+        // 响应配置（新增）
+        response: {
+          mode: 'blocking',
+          timeout: 30000,
+          maxRetries: 3
+        }
+      })
+    },
+    // 是否启用 AI 配置热更新（新增）
+    enableAiConfigHotReload: {
+      type: Boolean,
+      default: true
+    },
+    // 隐藏的工具按钮（新增）
+    hiddenTools: {
+      type: Array,
+      default: () => []
+    },
+    // 群组成员数量（仅群聊模式）
+    groupMemberCount: {
+      type: Number,
+      default: 0
+    },
+    // 是否显示工具栏
+    showToolbar: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示返回按钮
+    showBackButton: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示关闭按钮
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+    // 是否移动端
+    isMobile: {
+      type: Boolean,
+      default: false
+    },
+    // 截屏工具配置
+    enableScreenshot: {
+      type: Boolean,
+      default: false
+    },
+    screenshotConfig: {
+      type: Object,
+      default: () => ({
+        shortcutKey: 'ctrl+alt+q',
+        ocrConfig: {
+          language: 'ch'
+        }
+      })
+    },
+    // 收藏列表
+    favoritesList: {
+      type: Array,
+      default: () => []
+      // 格式: [{ id: '1', type: 'text', content: '收藏内容', title: '标题', time: '2025-01-01' }]
+    },
+    // 资源列表（用于#引用）
+    resources: {
+      type: Array,
+      default: () => []
+      // 格式: [{ id: '1', type: 'dataset', name: '数据集名称', code: '0001' }]
+    }
+  },
+  emits: [
+    'send', 'back', 'close', 'more', 'preview', 'voiceCall', 'videoCall', 'recall', 'forward', 'favorite', 'sendFavorite', 'sendLocation', 'sendCard',
+    'userProfile', 'clearHistory', 'muteUser', 'blockUser', 'searchHistory', 'toggleTop', 'remind', 'qinglongRecord', 'complain',
+    'createGroup', 'groupInfoUpdated', 'addGroupMember', 'createGroupConfirm',
+    // AI 相关事件
+    'aiResponseStart', 'aiResponseComplete', 'aiResponseError', 'aiResponseFeedback',
+    'conversationUpdate', 'aiConfigUpdate',
+    // 发送选项相关事件
+    'scheduledSend', 'scheduledMessageEdited', 'scheduledMessageCancelled',
+    'burnAfterReadSend', 'prioritySend', 'repeatSend',
+    // 人员选择器事件（用于@分享）
+    'personSelector',
+    // 资源选择器事件（用于#引用）
+    'resourceSelector'
+  ],
+  setup(props, { emit }) {
+    const messages = ref(props.initialMessages ? [...props.initialMessages] : []);
+    const messageContent = ref('');
+    const loading = ref(false);
+    const chatListRef = ref(null);
+    const screenshotToolRef = ref(null);
+    const isRecording = ref(false);
+    const recordingTime = ref(0);
+    const recordingTimer = ref(null);
+    const showEmojiPicker = ref(false);
+    const activeEmojiTab = ref('classic'); // 默认显示经典表情
+    const showContextMenuFlag = ref(false);
+    const showFavoriteDialog = ref(false);
+    const showFavoritesListDialog = ref(false);
+    const favoriteNote = ref('');
+    const contextMenuPosition = ref({ x: 0, y: 0 });
+    const selectedMessage = ref(null);
+    const chatListHeight = ref(70); // 聊天列表高度百分比
+    const isResizing = ref(false);
+    const defaultAvatar = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23999" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/%3E%3C/svg%3E';
+    // @ 提及相关
+    const showMentionPopup = ref(false);
+    const mentionSearchText = ref('');
+    const mentionCursorPosition = ref(0);
+    const mentionPopupPosition = ref({ top: 0, left: 0 });
+    const selectedMentionIndex = ref(0);
+    const messageInputRef = ref(null);
+    const mentionAnchorRef = ref(null);
+    const isSelectingMention = ref(false); // 标志：正在选择提及成员
+    // 动态创建 @ 提及弹窗组件
+    const mentionPopupComponent = computed(() => {
+      if (!showMentionPopup.value || filteredMembers.value.length === 0 || !mentionAnchorRef.value) {
+        return null;
+      }
+      return h(Popup, {
+        modelValue: showMentionPopup.value,
+        'onUpdate:modelValue': (val) => {
+          showMentionPopup.value = val;
+        },
+        placement: 'top',
+        showArrow: true,
+        attach: () => mentionAnchorRef.value,
+        zIndex: 99999,
+        destroyOnClose: true,
+        overlayInnerStyle: {
+          padding: 0,
+          maxHeight: '200px',
+          overflowY: 'auto',
+          minWidth: '220px',
+          pointerEvents: 'auto',
+          zIndex: 99999
+        },
+        overlayStyle: {
+          zIndex: 99999
+        }
+      }, {
+        content: () => h('div', {
+          class: 'mention-list-container',
+          style: {
+            pointerEvents: 'auto'
+          }
+        }, filteredMembers.value.map((member, index) =>
+          h('div', {
+            key: member.id,
+            class: ['mention-item', { 'mention-item-selected': index === selectedMentionIndex.value }],
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              selectMention(member);
+            },
+            onMouseenter: () => {
+              selectedMentionIndex.value = index;
+            },
+            style: {
+              cursor: 'pointer',
+              pointerEvents: 'auto'
+            }
+          }, [
+            member.avatar
+              ? h('img', {
+                src: member.avatar,
+                class: 'mention-avatar',
+                alt: member.name
+              })
+              : h('div', { class: 'mention-avatar mention-avatar-placeholder' }, member.name.charAt(0)),
+            h('div', { class: 'mention-info' }, [
+              h('div', { class: 'mention-name' }, member.name),
+              member.account ? h('div', { class: 'mention-account' }, member.account) : null
+            ])
+          ])
+        ))
+      });
+    });
+    // 用户操作抽屉和群聊对话框状态
+    const showUserDrawer = ref(false);
+    const createGroupDialogVisible = ref(false);
+    const preselectedUsersForGroup = ref([]);
+    const existingGroupMemberIds = ref([]);
+    const targetGroupIdForAddMember = ref('');
+    // 发送选项相关状态
+    const showSendOptions = ref(false);
+    const scheduledSendTime = ref('');
+    const burnAfterReadDelay = ref(10); // 默认10秒
+    const messagePriority = ref('normal'); // normal | high | low
+    const repeatCount = ref(1);
+    const repeatInterval = ref(0);
+    // 延时发送消息列表
+    const scheduledMessages = ref([]);
+    const scheduledTimers = ref({}); // 存储定时器
+    // 语音转文字相关状态
+    const showVoiceToTextDialog = ref(false);
+    const isVoiceToTextRecording = ref(false);
+    const voiceToTextTime = ref(0);
+    const voiceTranscript = ref('');
+    const voiceSendMode = ref('text'); // 'text' | 'voice' | 'both'
+    let voiceToTextTimer = null;
+    let speechRecognition = null;
+    // 截屏工具处理方法
+    const handleScreenshot = (data) => {
+      console.log('截屏完成:', data);
+      // 可以将截图插入到消息中或上传
+      if (data.blob) {
+        // 将 blob 转换为文件对象
+        const file = new File([data.blob], 'screenshot.png', { type: 'image/png' });
+        // 这里可以调用发送图片消息的逻辑
+        console.log('截图文件:', file);
+      }
+      emit('screenshot', data);
+    };
+    const handleOcrResult = (data) => {
+      console.log('OCR 识别完成:', data.text);
+      emit('ocrResult', data);
+    };
+    const handleInsertScreenshotText = (text) => {
+      messageContent.value += text;
+    };
+    const handleScreenshotError = (error) => {
+      console.error('截屏工具错误:', error);
+      emit('error', error);
+    };
+    // 点击截屏图标触发截屏
+    const handleScreenshotClick = async () => {
+      if (screenshotToolRef.value) {
+        screenshotToolRef.value.startCapture();
+      }
+    };
+    // 消息模板相关状态
+    const showTemplateDialog = ref(false);
+    const showTemplateEditor = ref(false);
+    const messageTemplates = ref([]);
+    const selectedCategory = ref('all');
+    const editingTemplate = ref(null);
+    const templateSearchQuery = ref('');
+    const templateCategories = [
+      { id: 'greeting', name: '问候语', icon: '👋' },
+      { id: 'work', name: '工作用语', icon: '💼' },
+      { id: 'service', name: '客服用语', icon: '🎧' },
+      { id: 'personal', name: '个人常用', icon: '👤' }
+    ];
+    // 当前分类的表情列表
+    const currentEmojis = computed(() => {
+      const category = emojiCategories.find(c => c.key === activeEmojiTab.value);
+      return category ? category.emojis : [];
+    });
+    // 当前分类对象
+    const currentCategory = computed(() => {
+      return emojiCategories.find(c => c.key === activeEmojiTab.value) || emojiCategories[0];
+    });
+    // 过滤后的成员列表（用于 @ 提及）
+    const filteredMembers = computed(() => {
+      if (!showMentionPopup.value || !props.chatUser.members) {
+        return [];
+      }
+      const searchText = mentionSearchText.value.toLowerCase();
+      return props.chatUser.members.filter(member => {
+        return member.name.toLowerCase().includes(searchText) ||
+          (member.account && member.account.toLowerCase().includes(searchText));
+      }).slice(0, 8); // 最多显示8个成员
+    });
+    // 表情列表 - 精简常用表情
+    const emojiList = [
+      '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂',
+      '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍', '🤩',
+      '😘', '😗', '😚', '😙', '😋', '😛', '😜', '🤪',
+      '😝', '🤑', '🤗', '🤭', '🤫', '🤔', '🤐', '😐',
+      '😑', '😶', '😏', '😒', '🙄', '😬', '😌', '😔',
+      '😪', '😴', '😷', '🤒', '🤕', '🤢', '🤮', '🥵',
+      '🥶', '😎', '🤓', '🧐', '😕', '😟', '🙁', '😮',
+      '😯', '😲', '😳', '🥺', '😦', '😧', '😨', '😰',
+      '😥', '😢', '😭', '😱', '😖', '😣', '😞', '😓',
+      '😩', '😫', '🥱', '😤', '😡', '😠', '🤬', '👍',
+      '👎', '👏', '🙌', '👋', '🤝', '🙏', '💪', '❤️',
+      '💔', '💯', '✨', '🎉', '🎊', '🔥', '💥', '⭐'
+    ];
+    // 选择自定义表情
+    const selectCustomEmoji = (emoji) => {
+      messageContent.value += emoji.name;
+      showEmojiPicker.value = false;
+    };
+    // AI服务实例
+    const apiService = ref(null);
+    if (props.chatType === 'ai' && props.aiConfig.url && props.aiConfig.agentId) {
+      // 使用新的配置对象初始化
+      apiService.value = new DifyApiService(props.aiConfig);
+    }
+    // 监听 aiConfig 变化，实现热更新
+    watch(() => props.aiConfig, (newConfig, oldConfig) => {
+      if (!props.enableAiConfigHotReload) return;
+      if (props.chatType !== 'ai') return;
+      try {
+        if (apiService.value) {
+          // 更新现有服务
+          apiService.value.updateConfig(newConfig);
+        } else if (newConfig.url && newConfig.agentId) {
+          // 创建新服务
+          apiService.value = new DifyApiService(newConfig);
+        }
+        // 触发配置更新事件
+        emit('aiConfigUpdate', {
+          config: newConfig,
+          success: true
+        });
+      } catch (error) {
+        console.error('AI 配置更新失败:', error);
+        emit('aiConfigUpdate', {
+          config: newConfig,
+          success: false,
+          error
+        });
+      }
+    }, { deep: true });
+    // 监听 chatUser 变化，重置会话
+    watch(() => props.chatUser, (newUser, oldUser) => {
+      if (newUser?.id !== oldUser?.id && apiService.value) {
+        apiService.value.resetConversation();
+        emit('conversationUpdate', {
+          conversationId: '',
+          action: 'reset'
+        });
+      }
+    });
+    // 时间工具函数
+    const parseDate = (dateTime) => {
+      if (typeof dateTime === 'string') {
+        // 处理 'YYYY-MM-DD HH:mm:ss' 格式的字符串
+        return new Date(dateTime.replace(/-/g, '/'));
+      }
+      return new Date(dateTime);
+    };
+    const formatDate = (date, format) => {
+      const d = new Date(date);
+      if (isNaN(d.getTime())) {
+        return 'NaN-NaN NaN:NaN';
+      }
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      const hours = String(d.getHours()).padStart(2, '0');
+      const minutes = String(d.getMinutes()).padStart(2, '0');
+      const seconds = String(d.getSeconds()).padStart(2, '0');
+      return format
+        .replace('YYYY', year)
+        .replace('MM', month)
+        .replace('DD', day)
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds);
+    };
+    const isSameDay = (date1, date2) => {
+      const d1 = parseDate(date1);
+      const d2 = parseDate(date2);
+      if (isNaN(d1.getTime()) || isNaN(d2.getTime())) {
+        return false;
+      }
+      return d1.getFullYear() === d2.getFullYear() &&
+        d1.getMonth() === d2.getMonth() &&
+        d1.getDate() === d2.getDate();
+    };
+    const getMinutesDiff = (date1, date2) => {
+      const d1 = parseDate(date1);
+      const d2 = parseDate(date2);
+      if (isNaN(d1.getTime()) || isNaN(d2.getTime())) {
+        return 0;
+      }
+      return Math.floor((d1 - d2) / (1000 * 60));
+    };
+    // 判断是否显示时间
+    const shouldShowTime = (item, index) => {
+      if (index === 0) return true;
+      const prevItem = messages.value[index - 1];
+      if (!prevItem) return true;
+      const diffMinutes = getMinutesDiff(item.dateTime, prevItem.dateTime);
+      return diffMinutes >= 5;
+    };
+    // 判断是否隐藏头像
+    const shouldHideHeader = (item, index) => {
+      // 始终显示头像，不隐藏
+      return false;
+    };
+    // 格式化时间
+    const formatTime = (dateTime) => {
+      const msgTime = parseDate(dateTime);
+      if (isNaN(msgTime.getTime())) {
+        return 'NaN-NaN NaN:NaN';
+      }
+      const now = new Date();
+      // 今天的消息只显示时间
+      if (isSameDay(msgTime, now)) {
+        return formatDate(msgTime, 'HH:mm');
+      }
+      // 昨天的消息
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+      if (isSameDay(msgTime, yesterday)) {
+        return `昨天 ${formatDate(msgTime, 'HH:mm')}`;
+      }
+      // 本周的消息
+      const weekStart = new Date(now);
+      weekStart.setDate(now.getDate() - now.getDay());
+      if (msgTime >= weekStart) {
+        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+        return `星期${weekdays[msgTime.getDay()]} ${formatDate(msgTime, 'HH:mm')}`;
+      }
+      // 更早的消息
+      return formatDate(msgTime, 'MM-DD HH:mm');
+    };
+    // 格式化文件大小
+    const formatFileSize = (bytes) => {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    };
+    // 滚动到底部
+    const scrollToBottom = async () => {
+      await nextTick();
+      if (chatListRef.value) {
+        chatListRef.value.scrollTop = chatListRef.value.scrollHeight;
+      }
+    };
+    // 发送消息
+    const sendMessage = async () => {
+      if (!messageContent.value.trim() || loading.value) return;
+      const content = messageContent.value.trim();
+      // 解析平台标识（如：（cdplatform））
+      const platformMatch = content.match(/[（(]([^）)]+)[）)]/);
+      const platform = platformMatch ? platformMatch[1] : null;
+      // 解析@提及的人员
+      const mentionMatches = content.matchAll(/@([^@\s,，]+)/g);
+      const mentions = Array.from(mentionMatches, m => m[1]);
+      // 解析#引用的资源
+      const resourceMatches = content.matchAll(/#([^#\s,，]+:[^\s,，]+)/g);
+      const resources = Array.from(resourceMatches, m => m[1]);
+      const messageId = `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      const newMessage = {
+        userId: props.currentUserId,
+        messageType: 'text',
+        message: content,
+        dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+        messageId,
+        avatar: props.currentUserAvatar,
+        // 添加解析的元数据
+        metadata: {
+          platform,
+          mentions,
+          resources
+        }
+      };
+      messages.value.push(newMessage);
+      messageContent.value = '';
+      await scrollToBottom();
+      // 触发发送事件，包含解析的元数据
+      emit('send', {
+        message: newMessage,
+        content,
+        platform,
+        mentions,
+        resources
+      });
+      // AI模式自动回复
+      if (props.chatType === 'ai' && apiService.value) {
+        loading.value = true;
+        const aiMessageId = `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        // 触发 AI 响应开始事件
+        emit('aiResponseStart', {
+          messageId: aiMessageId,
+          timestamp: Date.now()
+        });
+        try {
+          // 检查会话是否超时
+          if (apiService.value.isConversationExpired()) {
+            apiService.value.resetConversation();
+            emit('conversationUpdate', {
+              conversationId: '',
+              action: 'timeout'
+            });
+          }
+          // 发送消息到 AI
+          const response = await apiService.value.sendMessage(
+            content,
+            props.currentUserId,
+            {
+              inputVariables: props.aiConfig.inputVariables || {},
+              conversationId: props.aiConfig.conversation?.id
+            }
+          );
+          const aiMessage = {
+            userId: props.chatUser.id,
+            messageType: 'text',
+            message: response.answer,
+            dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+            messageId: aiMessageId,
+            avatar: props.chatUser.avatar,
+            // 添加 AI 元数据
+            conversationId: response.conversation_id,
+            aiMetadata: {
+              platform: props.aiConfig.platform,
+              scene: props.aiConfig.scene,
+              inputVariables: props.aiConfig.inputVariables,
+              responseTime: Date.now()
+            }
+          };
+          messages.value.push(aiMessage);
+          await scrollToBottom();
+          // 触发 AI 响应完成事件
+          emit('aiResponseComplete', {
+            messageId: aiMessageId,
+            response: response.answer,
+            conversationId: response.conversation_id,
+            timestamp: Date.now()
+          });
+          // 如果是新会话，触发会话创建事件
+          if (response.conversation_id && !apiService.value.currentConversationId) {
+            emit('conversationUpdate', {
+              conversationId: response.conversation_id,
+              action: 'create'
+            });
+          }
+        } catch (error) {
+          console.error('AI回复失败:', error);
+          // 触发 AI 响应错误事件
+          emit('aiResponseError', {
+            messageId: aiMessageId,
+            error,
+            timestamp: Date.now()
+          });
+          // 显示错误提示消息
+          const errorMessage = {
+            userId: props.chatUser.id,
+            messageType: 'text',
+            message: '抱歉，AI 服务暂时不可用，请稍后重试。',
+            dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+            messageId: `msg_error_${Date.now()}`,
+            avatar: props.chatUser.avatar,
+            isError: true
+          };
+          messages.value.push(errorMessage);
+          await scrollToBottom();
+        } finally {
+          loading.value = false;
+        }
+      }
+    };
+    // 键盘事件
+    const handleKeyDown = (e) => {
+      // 如果 @ 提及弹窗打开，先处理提及导航
+      if (showMentionPopup.value) {
+        handleMentionKeydown(e);
+        if (['ArrowDown', 'ArrowUp', 'Escape'].includes(e.key)) {
+          return;
+        }
+        if (e.key === 'Enter') {
+          return;
+        }
+      }
+      // 原有的发送逻辑
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    };
+    // 输入事件
+    const handleInput = (e) => {
+      // 如果正在选择提及成员，忽略输入事件，避免干扰
+      if (isSelectingMention.value) {
+        return;
+      }
+      // 仅在群聊模式下处理 @ 提及
+      if (props.chatType !== 'group' || !props.chatUser.members || props.chatUser.members.length === 0) {
+        return;
+      }
+      const textarea = messageInputRef.value;
+      if (!textarea) return;
+      const cursorPosition = textarea.selectionStart;
+      const textBeforeCursor = messageContent.value.substring(0, cursorPosition);
+      // 检测最后一个 @ 符号的位置
+      const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+      if (lastAtIndex !== -1) {
+        // 检查 @ 之后到光标位置之间是否只有字母、数字、下划线或中文
+        const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
+        const isValidMentionText = /^[\w\u4e00-\u9fa5]*$/.test(textAfterAt);
+        if (isValidMentionText) {
+          // 显示提及弹窗
+          mentionSearchText.value = textAfterAt;
+          mentionCursorPosition.value = lastAtIndex;
+          selectedMentionIndex.value = 0;
+          // 计算 @ 锚点位置 - 相对于 input-wrapper
+          nextTick(() => {
+            const textareaRect = textarea.getBoundingClientRect();
+            const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight) || 20;
+            // 创建临时元素来测量光标位置
+            const mirror = document.createElement('div');
+            const styles = window.getComputedStyle(textarea);
+            // 复制 textarea 的样式
+            mirror.style.cssText = `
+              position: absolute;
+              visibility: hidden;
+              white-space: pre-wrap;
+              word-wrap: break-word;
+              overflow-wrap: break-word;
+              font-family: ${styles.fontFamily};
+              font-size: ${styles.fontSize};
+              font-weight: ${styles.fontWeight};
+              line-height: ${styles.lineHeight};
+              padding: ${styles.padding};
+              border: ${styles.border};
+              width: ${textarea.clientWidth}px;
+              top: -9999px;
+              left: -9999px;
+            `;
+            mirror.textContent = textBeforeCursor;
+            document.body.appendChild(mirror);
+            // 获取文本高度和估算的光标位置
+            const mirrorRect = mirror.getBoundingClientRect();
+            const lines = Math.floor(mirrorRect.height / lineHeight);
+            const lastLineWidth = mirrorRect.width % textarea.clientWidth;
+            document.body.removeChild(mirror);
+            // 计算锚点相对于 textarea 的位置
+            const padding = parseInt(styles.paddingLeft) || 0;
+            const anchorTop = (lines * lineHeight) + parseInt(styles.paddingTop || 0);
+            const anchorLeft = padding + (lastLineWidth || 0);
+            // 设置锚点位置（相对于 input-wrapper）
+            mentionPopupPosition.value = {
+              top: anchorTop,
+              left: anchorLeft
+            };
+            showMentionPopup.value = true;
+          });
+        } else {
+          showMentionPopup.value = false;
+        }
+      } else {
+        showMentionPopup.value = false;
+      }
+    };
+    // 切换发送选项菜单
+    const toggleSendOptions = () => {
+      showSendOptions.value = !showSendOptions.value;
+    };
+    // 发送选项列表
+    const sendOptions = [
+      {
+        content: '延时发送',
+        value: 'scheduled',
+        prefixIcon: 'ri-time-line'
+      },
+      {
+        content: '阅后即焚',
+        value: 'burn',
+        prefixIcon: 'ri-fire-line'
+      },
+      {
+        content: '标记紧急',
+        value: 'priority',
+        prefixIcon: 'ri-alarm-warning-line'
+      }
+    ];
+    // 处理发送选项点击
+    const handleSendOptionClick = (data) => {
+      const value = data.value;
+      if (value === 'scheduled') {
+        handleScheduledSend();
+      } else if (value === 'burn') {
+        handleBurnAfterRead();
+      } else if (value === 'priority') {
+        handlePrioritySend('high');
+      }
+    };
+    // 延时发送
+    const handleScheduledSend = () => {
+      showSendOptions.value = false;
+      const content = messageContent.value.trim();
+      if (!content) return;
+      // 获取延时时间（分钟）
+      const delayMinutes = prompt('请输入延时时间（分钟）', '1');
+      if (!delayMinutes || isNaN(delayMinutes)) return;
+      const delay = parseInt(delayMinutes);
+      const scheduledTime = new Date(Date.now() + delay * 60 * 1000);
+      const messageId = `scheduled_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+      // 添加到延时消息列表
+      const scheduledMsg = {
+        id: messageId,
+        content,
+        scheduledTime: formatDate(scheduledTime, 'YYYY-MM-DD HH:mm:ss'),
+        timestamp: scheduledTime.getTime(),
+        delay: delay * 60 * 1000 // 毫秒
+      };
+      scheduledMessages.value.push(scheduledMsg);
+      messageContent.value = '';
+      // 设置定时器
+      const timer = setTimeout(() => {
+        // 发送消息
+        const newMessage = {
+          userId: props.currentUserId,
+          messageType: 'text',
+          message: content,
+          dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+          messageId: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+          avatar: props.currentUserAvatar
+        };
+        messages.value.push(newMessage);
+        scrollToBottom();
+        emit('send', { message: newMessage, content, scheduled: true });
+        // 从列表中移除
+        const index = scheduledMessages.value.findIndex(m => m.id === messageId);
+        if (index > -1) {
+          scheduledMessages.value.splice(index, 1);
+        }
+        delete scheduledTimers.value[messageId];
+      }, delay * 60 * 1000);
+      scheduledTimers.value[messageId] = timer;
+      emit('scheduledSend', {
+        messageId,
+        content,
+        scheduledTime: scheduledMsg.scheduledTime,
+        delay: delay * 60 * 1000
+      });
+    };
+    // 修改延时消息
+    const editScheduledMessage = (index) => {
+      const msg = scheduledMessages.value[index];
+      // 将内容放回输入框
+      messageContent.value = msg.content;
+      // 取消原定时器
+      if (scheduledTimers.value[msg.id]) {
+        clearTimeout(scheduledTimers.value[msg.id]);
+        delete scheduledTimers.value[msg.id];
+      }
+      // 从列表移除
+      scheduledMessages.value.splice(index, 1);
+      emit('scheduledMessageEdited', {
+        messageId: msg.id,
+        content: msg.content
+      });
+    };
+    // 撤销延时消息
+    const cancelScheduledMessage = (index) => {
+      const msg = scheduledMessages.value[index];
+      // 取消定时器
+      if (scheduledTimers.value[msg.id]) {
+        clearTimeout(scheduledTimers.value[msg.id]);
+        delete scheduledTimers.value[msg.id];
+      }
+      // 从列表移除
+      scheduledMessages.value.splice(index, 1);
+      emit('scheduledMessageCancelled', {
+        messageId: msg.id,
+        content: msg.content
+      });
+    };
+    // 阅后即焚
+    const handleBurnAfterRead = () => {
+      showSendOptions.value = false;
+      const delay = prompt('请输入阅读后销毁时间（秒）', '10');
+      if (delay) {
+        burnAfterReadDelay.value = parseInt(delay);
+        const content = messageContent.value.trim();
+        if (!content) return;
+        const newMessage = {
+          userId: props.currentUserId,
+          messageType: 'text',
+          message: content + ' 🔥',
+          dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+          messageId: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+          avatar: props.currentUserAvatar,
+          burnAfterRead: true,
+          burnDelay: parseInt(delay)
+        };
+        messages.value.push(newMessage);
+        messageContent.value = '';
+        scrollToBottom();
+        emit('burnAfterReadSend', {
+          message: newMessage,
+          burnDelay: parseInt(delay)
+        });
+      }
+    };
+    // 优先级发送
+    const handlePrioritySend = (priority) => {
+      showSendOptions.value = false;
+      messagePriority.value = priority;
+      const content = messageContent.value.trim();
+      if (!content) return;
+      const priorityIcon = priority === 'high' ? '❗' : '';
+      const newMessage = {
+        userId: props.currentUserId,
+        messageType: 'text',
+        message: priorityIcon + content,
+        dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+        messageId: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        avatar: props.currentUserAvatar,
+        priority
+      };
+      messages.value.push(newMessage);
+      messageContent.value = '';
+      scrollToBottom();
+      emit('prioritySend', {
+        message: newMessage,
+        priority
+      });
+    };
+    // 处理容器点击（关闭菜单）
+    const handleContainerClick = () => {
+      showEmojiPicker.value = false;
+      showSendOptions.value = false;
+      showContextMenuFlag.value = false;
+    };
+    // 表情选择
+    const toggleEmoji = () => {
+      showEmojiPicker.value = !showEmojiPicker.value;
+    };
+    const selectEmoji = (emoji) => {
+      messageContent.value += emoji;
+      showEmojiPicker.value = false;
+    };
+    // 发送图片
+    const handleSendImage = () => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            const imageMessage = {
+              userId: props.currentUserId,
+              messageType: 'image',
+              message: event.target.result,
+              dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+              messageId: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+              avatar: props.currentUserAvatar
+            };
+            messages.value.push(imageMessage);
+            scrollToBottom();
+            emit('send', { message: imageMessage, type: 'image' });
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      input.click();
+    };
+    // 发送文件
+    const handleSendFile = () => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '*/*'; // 接受所有文件类型
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            const fileMessage = {
+              userId: props.currentUserId,
+              messageType: 'file',
+              message: file.name,
+              dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+              messageId: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+              avatar: props.currentUserAvatar,
+              file: {
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                data: event.target.result
+              }
+            };
+            messages.value.push(fileMessage);
+            scrollToBottom();
+            emit('send', { message: fileMessage, type: 'file', file });
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      input.click();
+    };
+    // 发送位置
+    const handleSendLocation = () => {
+      emit('sendLocation');
+    };
+    // 发送名片
+    const handleSendCard = () => {
+      emit('sendCard');
+    };
+    // 语音录制
+    const recordingCancelMode = ref(false);
+    const recordingStartY = ref(0);
+    const voiceToTextModeRef = ref(false);
+    let mediaRecorder = null;
+    let audioChunks = [];
+    let voiceToTextMode = false; // 标记是否进入语音转文字模式
+    let recordingHandlers = null; // 保存事件处理器引用
+    let recordingStartTime = 0; // 记录录音开始的时间戳
+    // 开始录音（按住）
+    const startVoiceRecording = (e) => {
+      e.preventDefault();
+      isRecording.value = true;
+      recordingCancelMode.value = false;
+      voiceToTextMode = false;
+      recordingTime.value = 0;
+      recordingStartTime = Date.now(); // 记录开始时间
+      recordingStartY.value = e.clientY || (e.touches && e.touches[0].clientY) || 0;
+      audioChunks = []; // 重置音频块
+      // 尝试获取麦克风权限并开始录音
+      navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(stream => {
+          mediaRecorder = new MediaRecorder(stream);
+          // 当有音频数据可用时
+          mediaRecorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+              audioChunks.push(event.data);
+            }
+          };
+          mediaRecorder.start();
+          console.log('开始录音，时间戳:', recordingStartTime);
+        })
+        .catch(err => {
+          console.error('无法访问麦克风:', err);
+          isRecording.value = false;
+          alert('无法访问麦克风，请检查权限设置');
+        });
+      recordingTimer.value = setInterval(() => {
+        // 使用时间戳计算实际经过的时间
+        const elapsedTime = Math.floor((Date.now() - recordingStartTime) / 1000);
+        recordingTime.value = elapsedTime;
+        console.log('录音时长:', elapsedTime, '秒');
+        // 60秒自动停止
+        if (elapsedTime >= 60) {
+          stopVoiceRecording();
+        }
+      }, 100); // 改为 100ms 更新一次，确保实时性
+      // 监听鼠标/触摸移动，判断是否上滑取消或下滑转文字
+      const handleMove = (moveEvent) => {
+        if (!isRecording.value) return;
+        const currentY = moveEvent.clientY || (moveEvent.touches && moveEvent.touches[0].clientY) || 0;
+        const deltaY = recordingStartY.value - currentY; // 正值表示上滑，负值表示下滑
+        console.log('[移动] deltaY:', deltaY, '起始Y:', recordingStartY.value, '当前Y:', currentY);
+        // 上滑超过 30px 进入取消模式
+        if (deltaY > 30) {
+          if (!recordingCancelMode.value) {
+            recordingCancelMode.value = true;
+            voiceToTextMode = false;
+            voiceToTextModeRef.value = false;
+            console.log('✅ 进入上滑取消模式，deltaY:', deltaY);
+          }
+        }
+        // 下滑超过 30px 进入语音转文字模式（deltaY < -30 表示向下）
+        else if (deltaY < -30) {
+          if (!voiceToTextMode) {
+            voiceToTextMode = true;
+            voiceToTextModeRef.value = true;
+            recordingCancelMode.value = false;
+            console.log('✅ 进入下滑转文字模式，deltaY:', deltaY);
+          }
+        }
+        // 在中间位置（-30 到 30px），取消两种模式
+        else {
+          if (recordingCancelMode.value || voiceToTextMode) {
+            recordingCancelMode.value = false;
+            voiceToTextMode = false;
+            voiceToTextModeRef.value = false;
+            console.log('⚠️ 退出特殊模式，deltaY:', deltaY);
+          }
+        }
+      };
+      // 全局监听鼠标/触摸松开事件
+      const handleMouseUp = () => {
+        stopVoiceRecording();
+      };
+      const handleTouchEnd = () => {
+        stopVoiceRecording();
+      };
+      // 保存处理器引用以便后续清理
+      recordingHandlers = {
+        handleMove,
+        handleMouseUp,
+        handleTouchEnd,
+        cleanup: () => {
+          document.removeEventListener('mousemove', handleMove);
+          document.removeEventListener('touchmove', handleMove);
+          document.removeEventListener('mouseup', handleMouseUp);
+          document.removeEventListener('touchend', handleTouchEnd);
+        }
+      };
+      // 监听移动和松开事件
+      document.addEventListener('mousemove', handleMove);
+      document.addEventListener('touchmove', handleMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchend', handleTouchEnd);
+    };
+    // 停止录音（松开发送）
+    const stopVoiceRecording = () => {
+      if (!isRecording.value) return;
+      // 立即设置为 false，防止重复调用
+      isRecording.value = false;
+      // ⚠️ 重要：先保存当前模式状态，再清空
+      const shouldCancel = recordingCancelMode.value;
+      const shouldConvertToText = voiceToTextMode;
+      // 使用时间戳计算实际的录音时长（秒）
+      const actualDuration = Math.floor((Date.now() - recordingStartTime) / 1000);
+      console.log('========== 停止录音 ==========');
+      console.log('实际时长:', actualDuration, '秒');
+      console.log('上滑取消模式 (shouldCancel):', shouldCancel);
+      console.log('下滑转文字模式 (shouldConvertToText):', shouldConvertToText);
+      console.log('=============================');
+      // 清理定时器和事件监听器（在保存状态之后）
+      recordingCancelMode.value = false;
+      voiceToTextMode = false;
+      voiceToTextModeRef.value = false;
+      if (recordingTimer.value) {
+        clearInterval(recordingTimer.value);
+        recordingTimer.value = null;
+      }
+      // 清理事件监听器
+      if (recordingHandlers && recordingHandlers.cleanup) {
+        recordingHandlers.cleanup();
+        recordingHandlers = null;
+      }
+      recordingTime.value = 0;
+      // 处理录音数据的函数
+      const processRecording = () => {
+        console.log('处理录音数据，音频块数:', audioChunks.length);
+        if (audioChunks.length === 0) {
+          console.warn('没有录制到音频数据');
+          return;
+        }
+        const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+        const audioUrl = URL.createObjectURL(audioBlob);
+        console.log('生成音频 URL:', audioUrl);
+        // 如果下滑进入语音转文字模式
+        if (shouldConvertToText && actualDuration >= 1) {
+          console.log('进入语音转文字模式，时长:', actualDuration);
+          // 注意：Web Speech API 不支持从音频文件识别，只能实时识别
+          // 这里提示用户功能限制，或者可以集成第三方语音识别服务
+          alert('语音转文字功能需要集成第三方API（如阿里云、百度AI等）\n\nWeb Speech API 仅支持实时识别，不支持已录制音频。');
+          console.warn('需要集成第三方语音识别服务');
+          // TODO: 集成第三方语音识别API
+          // 示例：可以将 audioBlob 上传到服务器，使用阿里云/百度/腾讯的语音识别服务
+        }
+        // 如果不是取消模式，且录音时长大于1秒，则发送语音消息
+        else if (!shouldCancel && actualDuration >= 1) {
+          // 发送语音消息
+          const voiceMessage = {
+            userId: props.currentUserId,
+            messageType: 'voice',
+            message: `语音消息 ${actualDuration}"`,
+            audioUrl: audioUrl,
+            dateTime: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+            messageId: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            avatar: props.currentUserAvatar,
+            duration: actualDuration
+          };
+          messages.value.push(voiceMessage);
+          scrollToBottom();
+          emit('send', { message: voiceMessage, type: 'voice', duration: actualDuration });
+          console.log('语音消息已发送，时长:', actualDuration);
+        } else if (shouldCancel) {
+          console.log('录音已取消（上滑）');
+        } else if (actualDuration < 1) {
+          console.log('录音时间太短（<1秒），实际时长:', actualDuration);
+        }
+      };
+      // 停止录音并生成音频 URL
+      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        // 设置 onstop 回调
+        mediaRecorder.onstop = () => {
+          console.log('录音已停止');
+          processRecording();
+        };
+        // 停止录音
+        mediaRecorder.stop();
+        // 停止所有音频轨道
+        if (mediaRecorder.stream) {
+          mediaRecorder.stream.getTracks().forEach(track => track.stop());
+        }
+      } else {
+        // 如果 mediaRecorder 不存在或已停止，直接处理
+        console.warn('mediaRecorder 不可用或已停止');
+        processRecording();
+      }
+    };
+    // 取消录音（鼠标移出）
+    const cancelVoiceRecording = () => {
+      if (!isRecording.value) return;
+      // 如果在语音转文字模式，不取消
+      if (voiceToTextMode) {
+        console.log('在语音转文字模式，不取消');
+        return;
+      }
+      recordingCancelMode.value = true;
+      console.log('触发取消录音');
+      stopVoiceRecording();
+    };
+    // 旧的函数保留兼容
+    const handleVoice = () => {
+      startVoiceRecording({ clientY: 0, preventDefault: () => { } });
+    };
+    const stopRecording = () => {
+      stopVoiceRecording();
+    };
+    // 播放语音消息
+    const playVoiceMessage = (messageId) => {
+      const audioElement = document.querySelector(`audio[data-message-id="${messageId}"]`);
+      if (audioElement) {
+        if (audioElement.paused) {
+          audioElement.play();
+        } else {
+          audioElement.pause();
+        }
+      }
+    };
+    // 预览图片
+    const handlePreview = (url) => {
+      emit('preview', url);
+    };
+    // 上下文菜单
+    const showContextMenu = (e, message) => {
+      e.preventDefault();
+      selectedMessage.value = message;
+      contextMenuPosition.value = { x: e.clientX, y: e.clientY };
+      showContextMenuFlag.value = true;
+    };
+    const closeContextMenu = () => {
+      showContextMenuFlag.value = false;
+      selectedMessage.value = null;
+    };
+    const canRecall = computed(() => {
+      if (!selectedMessage.value) return false;
+      if (selectedMessage.value.userId !== props.currentUserId) return false;
+      const diffMinutes = getMinutesDiff(new Date(), selectedMessage.value.dateTime);
+      return diffMinutes <= 2;
+    });
+    const handleCopy = () => {
+      if (selectedMessage.value && selectedMessage.value.messageType === 'text') {
+        navigator.clipboard.writeText(selectedMessage.value.message);
+      }
+      closeContextMenu();
+    };
+    const handleRecall = () => {
+      if (canRecall.value) {
+        emit('recall', selectedMessage.value);
+        messages.value = messages.value.filter(m => m.messageId !== selectedMessage.value.messageId);
+      }
+      closeContextMenu();
+    };
+    const handleForward = () => {
+      emit('forward', selectedMessage.value);
+      closeContextMenu();
+    };
+    // 收藏消息
+    const handleFavorite = () => {
+      // 打开收藏列表选择对话框
+      showFavoritesListDialog.value = true;
+      showContextMenuFlag.value = false;
+    };
+    const closeFavoriteDialog = () => {
+      showFavoriteDialog.value = false;
+      favoriteNote.value = '';
+    };
+    const closeFavoritesListDialog = () => {
+      showFavoritesListDialog.value = false;
+    };
+    const sendFavoriteItem = (item) => {
+      // 发送收藏的内容到聊天
+      emit('sendFavorite', item);
+      closeFavoritesListDialog();
+    };
+    const confirmFavorite = () => {
+      if (selectedMessage.value) {
+        emit('favorite', {
+          message: selectedMessage.value,
+          note: favoriteNote.value
+        });
+      }
+      closeFavoriteDialog();
+    };
+    // @ 提及相关函数
+    const selectMention = (member, index = null) => {
+      // 设置标志，阻止 handleInput 干扰
+      isSelectingMention.value = true;
+      // 保存当前光标位置，后面要用
+      const savedCursorPosition = mentionCursorPosition.value;
+      // 立即关闭弹窗
+      showMentionPopup.value = false;
+      mentionSearchText.value = '';
+      if (index !== null) {
+        selectedMentionIndex.value = index;
+      }
+      // 替换 @ 后的文本为成员名称（使用保存的光标位置）
+      const beforeMention = messageContent.value.substring(0, savedCursorPosition);
+      const afterMention = messageContent.value.substring(messageContent.value.indexOf(' ', savedCursorPosition) > 0
+        ? messageContent.value.indexOf(' ', savedCursorPosition)
+        : messageContent.value.length);
+      const newText = beforeMention + '@' + member.name + ' ' + afterMention;
+      messageContent.value = newText;
+      // 使用 setTimeout 确保执行，避免被 Vue 错误链阻断
+      setTimeout(() => {
+        const textarea = messageInputRef.value;
+        if (textarea) {
+          // 直接设置 textarea 的值，确保同步
+          textarea.value = newText;
+          // 触发 input 事件，让 v-model 同步
+          const event = new Event('input', { bubbles: true });
+          textarea.dispatchEvent(event);
+          textarea.focus();
+          const newPosition = beforeMention.length + member.name.length + 2;
+          textarea.setSelectionRange(newPosition, newPosition);
+        }
+        // 重置标志
+        isSelectingMention.value = false;
+      }, 50);
+    };
+    const handleMentionKeydown = (e) => {
+      if (!showMentionPopup.value || filteredMembers.value.length === 0) {
+        return;
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        selectedMentionIndex.value = Math.min(
+          selectedMentionIndex.value + 1,
+          filteredMembers.value.length - 1
+        );
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedMentionIndex.value = Math.max(selectedMentionIndex.value - 1, 0);
+      } else if (e.key === 'Enter' && showMentionPopup.value) {
+        e.preventDefault();
+        if (filteredMembers.value[selectedMentionIndex.value]) {
+          selectMention(filteredMembers.value[selectedMentionIndex.value]);
+        }
+      } else if (e.key === 'Escape') {
+        showMentionPopup.value = false;
+      }
+    };
+    const closeMentionPopup = () => {
+      showMentionPopup.value = false;
+      mentionSearchText.value = '';
+    };
+    // 拖拽调整聊天列表高度
+    const startResize = (e) => {
+      isResizing.value = true;
+      const startY = e.clientY;
+      const startHeight = chatListHeight.value;
+      const handleMouseMove = (moveEvent) => {
+        if (!isResizing.value) return;
+        const deltaY = moveEvent.clientY - startY;
+        const containerHeight = chatListRef.value?.parentElement?.clientHeight || 600;
+        const deltaPercent = (deltaY / containerHeight) * 100;
+        const newHeight = Math.max(30, Math.min(85, startHeight + deltaPercent));
+        chatListHeight.value = newHeight;
+      };
+      const handleMouseUp = () => {
+        isResizing.value = false;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+    // 快捷键支持
+    const handleGlobalKeydown = (e) => {
+      // Alt + S 发送消息
+      if (e.altKey && e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        sendMessage();
+      }
+      // Ctrl/Cmd + Enter 发送消息
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        sendMessage();
+      }
+      // Esc 关闭表情选择器或上下文菜单
+      if (e.key === 'Escape') {
+        showEmojiPicker.value = false;
+        closeContextMenu();
+      }
+    };
+    // 其他操作
+    const handleBack = () => emit('back');
+    const handleClose = () => emit('close');
+    const handleMore = () => {
+      console.log('[AiChat] 点击更多操作按钮');
+      console.log('[AiChat] showUserDrawer 当前值:', showUserDrawer.value);
+      console.log('[AiChat] chatType:', props.chatType);
+      console.log('[AiChat] chatUser:', props.chatUser);
+      showUserDrawer.value = true;
+      console.log('[AiChat] showUserDrawer 设置后:', showUserDrawer.value);
+      emit('more');
+    };
+    const handleVoiceCall = () => emit('voiceCall');
+    const handleVideoCall = () => emit('videoCall');
+    // 用户操作抽屉事件处理
+    const handleUserProfile = () => {
+      emit('userProfile', chatUser);
+    };
+    const handleClearHistory = () => {
+      emit('clearHistory', chatUser);
+    };
+    const handleMuteUser = (value) => {
+      emit('muteUser', { user: chatUser, muted: value });
+    };
+    const handleBlockUser = (value) => {
+      emit('blockUser', { user: chatUser, blocked: value });
+    };
+    const handleSearchHistory = () => {
+      emit('searchHistory', chatUser);
+    };
+    const handleToggleTop = (value) => {
+      emit('toggleTop', { user: chatUser, topped: value });
+    };
+    const handleRemind = (value) => {
+      emit('remind', { user: chatUser, reminded: value });
+    };
+    const handleQinglongRecord = () => {
+      emit('qinglongRecord', chatUser);
+    };
+    const handleComplain = () => {
+      emit('complain', chatUser);
+    };
+    const handleCreateGroupFromDrawer = (user) => {
+      // 关闭用户操作抽屉
+      showUserDrawer.value = false;
+      // 设置预选用户
+      preselectedUsersForGroup.value = user ? [user] : [];
+      // 打开创建群聊对话框
+      createGroupDialogVisible.value = true;
+    };
+    // 从@提及触发打开人员选择器（用于分享内容）
+    const handleOpenPersonSelector = () => {
+      console.log('[AiChat] 从@提及触发打开人员选择器');
+      // 打开创建群聊对话框（实际上是人员选择器，用于分享）
+      createGroupDialogVisible.value = true;
+      // 触发personSelector事件，让父组件知道用户想要选择人员进行分享
+      emit('personSelector');
+    };
+    // 从#标签触发打开资源选择器（用于引用资源）
+    const handleOpenResourceSelector = () => {
+      console.log('[AiChat] 从#标签触发打开资源选择器');
+      // 触发resourceSelector事件，让父组件知道用户想要选择资源进行引用
+      emit('resourceSelector');
+    };
+    // 群聊信息对话框事件处理
+    const handleGroupInfoUpdated = () => {
+      emit('groupInfoUpdated', chatUser);
+    };
+    const handleAddGroupMember = (groupId, existingMembers) => {
+      // 设置目标群组ID和现有成员列表
+      targetGroupIdForAddMember.value = groupId;
+      existingGroupMemberIds.value = (existingMembers || []).map(m => m.id);
+      // 打开创建群聊对话框（添加成员模式）
+      createGroupDialogVisible.value = true;
+    };
+    // 创建群聊/添加成员确认
+    const handleCreateGroupConfirm = (result) => {
+      createGroupDialogVisible.value = false;
+      emit('createGroupConfirm', result);
+      // 重置状态
+      preselectedUsersForGroup.value = [];
+      existingGroupMemberIds.value = [];
+      targetGroupIdForAddMember.value = '';
+    };
+    // 抽屉和对话框处理器对象（供插槽使用）
+    const drawerHandlers = {
+      onUserProfile: handleUserProfile,
+      onClearHistory: handleClearHistory,
+      onMuteUser: handleMuteUser,
+      onBlockUser: handleBlockUser,
+      onSearchHistory: handleSearchHistory,
+      onToggleTop: handleToggleTop,
+      onRemind: handleRemind,
+      onQinglongRecord: handleQinglongRecord,
+      onComplain: handleComplain,
+      onCreateGroup: handleCreateGroupFromDrawer,
+      onUpdateVisible: (value) => { showUserDrawer.value = value; }
+    };
+    const groupDialogHandlers = {
+      onUpdated: handleGroupInfoUpdated,
+      onAddMember: handleAddGroupMember,
+      onUpdateVisible: (value) => { showUserDrawer.value = value; }
+    };
+    const createGroupHandlers = {
+      onConfirm: handleCreateGroupConfirm,
+      onUpdateVisible: (value) => { createGroupDialogVisible.value = value; }
+    };
+    // 监听初始消息变化
+    watch(() => props.initialMessages, (newMessages) => {
+      messages.value = [...newMessages];
+      nextTick(() => scrollToBottom());
+    }, { deep: true });
+    // 点击外部关闭菜单
+    onMounted(() => {
+      document.addEventListener('click', closeContextMenu);
+      document.addEventListener('keydown', handleGlobalKeydown);
+      scrollToBottom();
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener('click', closeContextMenu);
+      document.removeEventListener('keydown', handleGlobalKeydown);
+      if (recordingTimer.value) {
+        clearInterval(recordingTimer.value);
+      }
+    });
+    // 消息模板相关方法
+    const filteredTemplates = computed(() => {
+      return messageTemplates.value.filter(template => {
+        const matchesCategory = selectedCategory.value === 'all' || template.category === selectedCategory.value;
+        const matchesSearch = !templateSearchQuery.value ||
+          template.name.includes(templateSearchQuery.value) ||
+          template.content.includes(templateSearchQuery.value);
+        return matchesCategory && matchesSearch;
+      });
+    });
+    const getCategoryName = (categoryId) => {
+      const category = templateCategories.find(c => c.id === categoryId);
+      return category ? category.name : '未分类';
+    };
+    const openTemplateEditor = (template = null) => {
+      if (template) {
+        editingTemplate.value = { ...template };
+      } else {
+        editingTemplate.value = {
+          id: null,
+          name: '',
+          category: 'personal',
+          content: '',
+          usageCount: 0
+        };
+      }
+      showTemplateEditor.value = true;
+    };
+    const closeTemplateEditor = () => {
+      showTemplateEditor.value = false;
+      editingTemplate.value = null;
+    };
+    const closeTemplateDialog = () => {
+      showTemplateDialog.value = false;
+    };
+    const saveTemplateData = () => {
+      if (!editingTemplate.value.name || !editingTemplate.value.content) {
+        alert('请填写模板名称和内容');
+        return;
+      }
+      if (editingTemplate.value.id) {
+        // 编辑现有模板
+        const index = messageTemplates.value.findIndex(t => t.id === editingTemplate.value.id);
+        if (index > -1) {
+          messageTemplates.value[index] = { ...editingTemplate.value };
+        }
+      } else {
+        // 添加新模板
+        editingTemplate.value.id = `template_${Date.now()}`;
+        editingTemplate.value.usageCount = 0;
+        messageTemplates.value.push({ ...editingTemplate.value });
+      }
+      closeTemplateEditor();
+    };
+    const useTemplate = (template, mode = 'insert') => {
+      if (mode === 'insert') {
+        messageContent.value += template.content;
+        showTemplateDialog.value = false;
+      } else if (mode === 'send') {
+        messageContent.value = template.content;
+        showTemplateDialog.value = false;
+        sendMessage();
+      }
+      // 增加使用次数
+      template.usageCount = (template.usageCount || 0) + 1;
+    };
+    const deleteTemplate = (template) => {
+      if (confirm('确定要删除此模板吗？')) {
+        const index = messageTemplates.value.findIndex(t => t.id === template.id);
+        if (index > -1) {
+          messageTemplates.value.splice(index, 1);
+        }
+      }
+    };
+    // 语音转文字相关方法
+    const startVoiceToText = () => {
+      showVoiceToTextDialog.value = true;
+      isVoiceToTextRecording.value = true;
+      voiceToTextTime.value = 0;
+      voiceTranscript.value = '';
+      // 启动计时器
+      voiceToTextTimer = setInterval(() => {
+        voiceToTextTime.value++;
+      }, 1000);
+      // 初始化语音识别
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (SpeechRecognition) {
+        speechRecognition = new SpeechRecognition();
+        speechRecognition.lang = 'zh-CN';
+        speechRecognition.continuous = true;
+        speechRecognition.interimResults = true;
+        let interimTranscript = '';
+        speechRecognition.onresult = (event) => {
+          interimTranscript = '';
+          for (let i = event.resultIndex; i < event.results.length; i++) {
+            const transcript = event.results[i][0].transcript;
+            if (event.results[i].isFinal) {
+              voiceTranscript.value += transcript;
+            } else {
+              interimTranscript += transcript;
+            }
+          }
+        };
+        speechRecognition.onerror = (event) => {
+          console.error('语音识别错误:', event.error);
+        };
+        speechRecognition.start();
+      }
+    };
+    const stopVoiceToText = () => {
+      isVoiceToTextRecording.value = false;
+      if (voiceToTextTimer) {
+        clearInterval(voiceToTextTimer);
+      }
+      if (speechRecognition) {
+        speechRecognition.stop();
+      }
+    };
+    const cancelVoiceToText = () => {
+      showVoiceToTextDialog.value = false;
+      isVoiceToTextRecording.value = false;
+      voiceToTextTime.value = 0;
+      voiceTranscript.value = '';
+      voiceSendMode.value = 'text';
+      if (voiceToTextTimer) {
+        clearInterval(voiceToTextTimer);
+      }
+      if (speechRecognition) {
+        speechRecognition.stop();
+      }
+    };
+    const sendVoiceToTextMessage = () => {
+      if (!voiceTranscript.value.trim()) return;
+      if (voiceSendMode.value === 'text' || voiceSendMode.value === 'both') {
+        messageContent.value = voiceTranscript.value;
+        sendMessage();
+      }
+      cancelVoiceToText();
+    };
+    // 暴露方法
+    const addMessage = (message) => {
+      messages.value.push(message);
+      scrollToBottom();
+    };
+    const clearMessages = () => {
+      messages.value = [];
+    };
+    return {
+      messages,
+      messageContent,
+      loading,
+      chatListRef,
+      isRecording,
+      recordingTime,
+      recordingCancelMode,
+      voiceToTextModeRef,
+      showEmojiPicker,
+      showContextMenuFlag,
+      contextMenuPosition,
+      selectedMessage,
+      defaultAvatar,
+      emojiList,
+      shouldShowTime,
+      shouldHideHeader,
+      formatTime,
+      formatFileSize,
+      sendMessage,
+      handleKeyDown,
+      handleInput,
+      toggleEmoji,
+      selectEmoji,
+      handleSendImage,
+      handleSendFile,
+      handleSendLocation,
+      handleSendCard,
+      startVoiceRecording,
+      stopVoiceRecording,
+      cancelVoiceRecording,
+      handleVoice,
+      stopRecording,
+      playVoiceMessage,
+      handlePreview,
+      showContextMenu,
+      canRecall,
+      handleCopy,
+      handleRecall,
+      handleForward,
+      handleBack,
+      handleClose,
+      handleMore,
+      handleVoiceCall,
+      handleVideoCall,
+      handleFavorite,
+      startResize,
+      chatListHeight,
+      isResizing,
+      emojiCategories,
+      activeEmojiTab,
+      currentEmojis,
+      currentCategory,
+      getEmojiUrl,
+      selectCustomEmoji,
+      handleContainerClick,
+      showFavoriteDialog,
+      showFavoritesListDialog,
+      favoriteNote,
+      closeFavoriteDialog,
+      closeFavoritesListDialog,
+      confirmFavorite,
+      sendFavoriteItem,
+      addMessage,
+      clearMessages,
+      // 用户操作抽屉和群聊对话框
+      showUserDrawer,
+      createGroupDialogVisible,
+      preselectedUsersForGroup,
+      existingGroupMemberIds,
+      targetGroupIdForAddMember,
+      handleUserProfile,
+      handleClearHistory,
+      handleMuteUser,
+      handleBlockUser,
+      handleSearchHistory,
+      handleToggleTop,
+      handleRemind,
+      handleQinglongRecord,
+      handleComplain,
+      handleCreateGroupFromDrawer,
+      handleOpenPersonSelector,
+      handleOpenResourceSelector,
+      handleGroupInfoUpdated,
+      handleAddGroupMember,
+      handleCreateGroupConfirm,
+      drawerHandlers,
+      groupDialogHandlers,
+      createGroupHandlers,
+      // 发送选项相关
+      showSendOptions,
+      scheduledMessages,
+      scheduledSendTime,
+      burnAfterReadDelay,
+      messagePriority,
+      repeatCount,
+      repeatInterval,
+      sendOptions,
+      handleSendOptionClick,
+      handleScheduledSend,
+      handleBurnAfterRead,
+      handlePrioritySend,
+      editScheduledMessage,
+      cancelScheduledMessage,
+      toggleSendOptions,
+      // 语音转文字相关
+      showVoiceToTextDialog,
+      isVoiceToTextRecording,
+      voiceToTextTime,
+      voiceTranscript,
+      voiceSendMode,
+      startVoiceToText,
+      stopVoiceToText,
+      cancelVoiceToText,
+      sendVoiceToTextMessage,
+      // 消息模板相关
+      showTemplateDialog,
+      showTemplateEditor,
+      messageTemplates,
+      selectedCategory,
+      editingTemplate,
+      templateSearchQuery,
+      templateCategories,
+      filteredTemplates,
+      openTemplateEditor,
+      closeTemplateEditor,
+      closeTemplateDialog,
+      useTemplate,
+      deleteTemplate,
+      saveTemplateData,
+      getCategoryName,
+      // 截屏工具相关
+      handleScreenshot,
+      handleOcrResult,
+      handleInsertScreenshotText,
+      handleScreenshotError,
+      handleScreenshotClick,
+      screenshotToolRef,
+      // @ 提及成员相关
+      showMentionPopup,
+      mentionSearchText,
+      mentionCursorPosition,
+      mentionPopupPosition,
+      selectedMentionIndex,
+      filteredMembers,
+      selectMention,
+      handleMentionKeydown,
+      messageInputRef,
+      mentionAnchorRef,
+      mentionPopupComponent
+    };
+  }
+};
+</script>
+<style scoped>
+@import '../styles/index.css';
+</style>