From dd1fdd16ec3f37e19ac28814f686d007a5829e3f Mon Sep 17 00:00:00 2001
From: wenjinbo <599483010@qq.com>
Date: Mon, 13 Oct 2025 16:09:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chatweb/commQA/index.vue        | 590 ++++++++++++++++++
 .../chatweb/components/CenteredInputArea.vue  | 474 ++++++++++++++
 2 files changed, 1064 insertions(+)
 create mode 100644 chat-client/src/views/chatweb/commQA/index.vue
 create mode 100644 chat-client/src/views/chatweb/components/CenteredInputArea.vue

diff --git a/chat-client/src/views/chatweb/commQA/index.vue b/chat-client/src/views/chatweb/commQA/index.vue
new file mode 100644
index 0000000..a9ba755
--- /dev/null
+++ b/chat-client/src/views/chatweb/commQA/index.vue
@@ -0,0 +1,590 @@
+<template>
+  <div class="main-container" :class="{ 'fullscreen-mode': isFullscreen }">
+    <!-- 全屏按钮 -->
+    <div class="fullscreen-button" @click="toggleFullscreen">
+      <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏显示'" placement="left">
+        <el-icon :size="20">
+          <component :is="isFullscreen ? 'Close' : 'FullScreen'" />
+        </el-icon>
+      </el-tooltip>
+    </div>
+
+    <!-- 知识库选择按钮 -->
+    <div class="knowledge-button" @click="openKnowledgeDialog">
+      <el-tooltip content="选择知识库" placement="left">
+        <el-badge :value="boundKnowledgeBases.length" :hidden="boundKnowledgeBases.length === 0" type="primary">
+          <el-icon :size="20">
+            <Collection />
+          </el-icon>
+        </el-badge>
+      </el-tooltip>
+    </div>
+
+    <ChatBox 
+      v-if="isDataLoaded"
+      :chat-type="chatType"
+      :user-id="userId"
+      :placeholder="placeholder"
+      :recommend-questions="recommendQuestions"
+      @stream-complete="handleStreamComplete"
+      @source-click="handleSourceClick"
+      @message-received="handleMessageReceived"
+      @chat-created="handleChatCreated"
+      @chat-switched="handleChatSwitched"
+    />
+
+    <!-- 知识库选择对话框 -->
+    <el-dialog
+      v-model="knowledgeDialogVisible"
+      title="选择知识库"
+      width="600px"
+      append-to-body
+      :z-index="isFullscreen ? 20000 : 2000"
+      @close="closeKnowledgeDialog"
+    >
+      <div class="knowledge-dialog-content">
+        <div class="bound-knowledge" v-if="boundKnowledgeBases.length > 0">
+          <div class="section-title">已绑定知识库</div>
+          <div class="knowledge-list">
+            <el-tag
+              v-for="kb in boundKnowledgeBases"
+              :key="kb.id"
+              closable
+              @close="removeKnowledgeBase(kb.id)"
+              style="margin-right: 8px; margin-bottom: 8px;"
+              type="success"
+            >
+              {{ kb.name }}
+            </el-tag>
+          </div>
+        </div>
+        <div v-else class="no-binding-hint">
+          <el-empty description="暂未绑定知识库" :image-size="80" />
+        </div>
+        
+        <div class="add-knowledge">
+          <div class="section-title">添加知识库</div>
+          <el-select
+            v-model="selectedKnowledgeBaseIds"
+            placeholder="请选择要绑定的知识库"
+            style="width: 100%"
+            filterable
+            multiple
+            :loading="isLoadingKnowledgeBases"
+            :popper-class="isFullscreen ? 'fullscreen-select-dropdown' : ''"
+            :teleported="true"
+          >
+            <el-option
+              v-for="kb in availableKnowledgeBases"
+              :key="kb.id"
+              :label="kb.name"
+              :value="kb.id"
+            >
+              <div style="display: flex; flex-direction: column;">
+                <span>{{ kb.name }}</span>
+                <span v-if="kb.description" style="font-size: 12px; color: #909399;">
+                  {{ kb.description }}
+                </span>
+              </div>
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeKnowledgeDialog">取消</el-button>
+          <el-button type="primary" @click="confirmBindKnowledgeBases" :loading="isBinding">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import ChatBox from '@/views/chatweb/components/ChatBox.vue'
+import { useAclStore } from '@/store/modules/acl'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import { getRecommendations } from '@/api/prologue'
+import { FullScreen, Close, Collection } from '@element-plus/icons-vue'
+import { 
+  getWorkflowAndDatasetTableData, 
+  getAllUserDatasets, 
+  addDatasetsToWorkflow, 
+  removeDatasetsFromWorkflow 
+} from '@/api/functionKnowledgeConfig'
+
+const { t, locale } = useI18n()
+const aclStore = useAclStore()
+
+// 状态管理
+const placeholder = ref('给AI助手发送消息')
+const chatType = ref('7')
+const userId = computed(() => aclStore.getUserId)
+const recommendQuestions = ref<string[]>([])
+const isDataLoaded = ref(false)
+const isFullscreen = ref(false)
+
+// 固定的 appId
+const APP_ID = '29286309-5c1c-4fea-84a6-406c69936a45'
+
+// 知识库相关状态
+const knowledgeDialogVisible = ref(false)
+const boundKnowledgeBases = ref<Array<{ id: string; name: string; description?: string }>>([])
+const allKnowledgeBases = ref<Array<{ id: string; name: string; description?: string }>>([])
+const selectedKnowledgeBaseIds = ref<string[]>([])
+const isLoadingKnowledgeBases = ref(false)
+const isBinding = ref(false)
+
+// 计算可用的知识库（排除已绑定的）
+const availableKnowledgeBases = computed(() => {
+  const boundIds = boundKnowledgeBases.value.map(kb => kb.id)
+  return allKnowledgeBases.value.filter(kb => !boundIds.includes(kb.id))
+})
+
+// 获取推荐问题
+
+
+// 获取所有可用知识库
+const fetchAllKnowledgeBases = async () => {
+  try {
+    isLoadingKnowledgeBases.value = true
+    const response: any = await getAllUserDatasets()
+    
+    if (response && response.code === 200 && response.data) {
+      const userDatasets = response.data
+      
+      // 提取所有唯一的知识库
+      const knowledgeBasesMap = new Map()
+      userDatasets.forEach((item: any) => {
+        if (!knowledgeBasesMap.has(item.datasetId)) {
+          knowledgeBasesMap.set(item.datasetId, {
+            id: item.datasetId,
+            name: item.datasetName,
+            description: item.datasetDescription,
+            createAt: item.datasetCreateAt,
+            updateAt: item.datasetUpdateAt
+          })
+        }
+      })
+      allKnowledgeBases.value = Array.from(knowledgeBasesMap.values())
+      console.log('获取所有知识库成功:', allKnowledgeBases.value)
+    }
+  } catch (error) {
+    console.error('获取所有知识库失败:', error)
+    ElMessage.error('获取知识库列表失败')
+  } finally {
+    isLoadingKnowledgeBases.value = false
+  }
+}
+
+// 获取当前对话绑定的知识库
+const fetchBoundKnowledgeBases = async () => {
+  try {
+    const response: any = await getWorkflowAndDatasetTableData()
+    
+    if (response && response.code === 200 && response.data) {
+      // 查找当前 APP_ID 对应的数据
+      const currentApp = response.data.find((item: any) => item.appId === APP_ID)
+      
+      if (currentApp && currentApp.datasetIds && currentApp.datasetIds.length > 0) {
+        boundKnowledgeBases.value = []
+        for (let i = 0; i < currentApp.datasetIds.length; i++) {
+          const datasetId = currentApp.datasetIds[i]
+          const datasetName = currentApp.datasetNames[i] || datasetId
+          
+          boundKnowledgeBases.value.push({
+            id: datasetId,
+            name: datasetName
+          })
+        }
+        console.log('获取已绑定知识库成功:', boundKnowledgeBases.value)
+      } else {
+        boundKnowledgeBases.value = []
+        console.log('当前对话未绑定知识库')
+      }
+    }
+  } catch (error) {
+    console.error('获取已绑定知识库失败:', error)
+  }
+}
+
+// 打开知识库选择对话框
+const openKnowledgeDialog = async () => {
+  knowledgeDialogVisible.value = true
+  selectedKnowledgeBaseIds.value = []
+  
+  // 如果还没有加载过知识库列表，则加载
+  if (allKnowledgeBases.value.length === 0) {
+    await fetchAllKnowledgeBases()
+  }
+}
+
+// 关闭知识库选择对话框
+const closeKnowledgeDialog = () => {
+  knowledgeDialogVisible.value = false
+  selectedKnowledgeBaseIds.value = []
+}
+
+// 确认绑定知识库
+const confirmBindKnowledgeBases = async () => {
+  if (!selectedKnowledgeBaseIds.value || selectedKnowledgeBaseIds.value.length === 0) {
+    ElMessage.warning('请选择要绑定的知识库')
+    return
+  }
+  
+  try {
+    isBinding.value = true
+    
+    // 调用API绑定知识库
+    const response: any = await addDatasetsToWorkflow({
+      appId: APP_ID,
+      datasetIds: selectedKnowledgeBaseIds.value
+    })
+    
+    if (response.code === 200) {
+      // 更新本地数据
+      selectedKnowledgeBaseIds.value.forEach(id => {
+        const kb = allKnowledgeBases.value.find(k => k.id === id)
+        if (kb && !boundKnowledgeBases.value.find(b => b.id === id)) {
+          boundKnowledgeBases.value.push(kb)
+        }
+      })
+      
+      ElMessage.success(`成功绑定 ${selectedKnowledgeBaseIds.value.length} 个知识库`)
+      selectedKnowledgeBaseIds.value = []
+      closeKnowledgeDialog()
+    } else {
+      ElMessage.error(response.msg || '绑定失败')
+    }
+  } catch (error: any) {
+    console.error('绑定知识库失败:', error)
+    ElMessage.error('绑定失败：' + (error.message || error))
+  } finally {
+    isBinding.value = false
+  }
+}
+
+// 移除知识库绑定
+const removeKnowledgeBase = async (knowledgeBaseId: string) => {
+  try {
+    // 调用API解绑知识库
+    const response: any = await removeDatasetsFromWorkflow({
+      appId: APP_ID,
+      datasetIds: [knowledgeBaseId]
+    })
+    
+    if (response.code === 200) {
+      // 更新本地数据
+      const index = boundKnowledgeBases.value.findIndex(kb => kb.id === knowledgeBaseId)
+      if (index > -1) {
+        const removedKb = boundKnowledgeBases.value[index]
+        boundKnowledgeBases.value.splice(index, 1)
+        ElMessage({
+          message: `已移除知识库：${removedKb.name}`,
+          type: 'info',
+          duration: 2000,
+          showClose: true,
+          customClass: isFullscreen.value ? 'fullscreen-message' : ''
+        })
+      }
+    } else {
+      ElMessage({
+        message: response.msg || '移除失败',
+        type: 'error',
+        duration: 2000,
+        showClose: true,
+        customClass: isFullscreen.value ? 'fullscreen-message' : ''
+      })
+    }
+  } catch (error: any) {
+    console.error('移除知识库失败:', error)
+    ElMessage({
+      message: '移除失败：' + (error.message || error),
+      type: 'error',
+      duration: 2000,
+      showClose: true,
+      customClass: isFullscreen.value ? 'fullscreen-message' : ''
+    })
+  }
+}
+
+// ChatBox组件事件处理器
+
+// 处理流式请求完成事件
+const handleStreamComplete = (data: {
+  conversationId: string
+  messageId: string
+  content: string
+}) => {
+  console.log('通用问答 - 对话完成:', data)
+}
+
+// 处理文件来源点击事件
+const handleSourceClick = (source: any) => {
+  console.log('通用问答 - 点击文件来源:', source)
+  ElMessage.info(`点击了文件: ${source.fileName}`)
+}
+
+// 处理消息接收事件
+const handleMessageReceived = (message: any) => {
+  console.log('通用问答 - 收到新消息:', message)
+}
+
+// 处理新会话创建事件
+const handleChatCreated = (chatIndex: number) => {
+  console.log('通用问答 - 创建新会话:', chatIndex)
+}
+
+// 处理会话切换事件
+const handleChatSwitched = (chatIndex: number) => {
+  console.log('通用问答 - 切换会话:', chatIndex)
+}
+
+// 全屏功能
+const toggleFullscreen = () => {
+  isFullscreen.value = !isFullscreen.value
+  
+  // 隐藏或显示布局的其他部分
+  const layoutWrapper = document.querySelector('.vue-admin-better-wrapper') as HTMLElement
+  if (layoutWrapper) {
+    if (isFullscreen.value) {
+      layoutWrapper.style.overflow = 'hidden'
+      // 给 body 添加全屏模式类名，用于控制弹出框 z-index
+      document.body.classList.add('chat-fullscreen-mode')
+    } else {
+      layoutWrapper.style.overflow = ''
+      // 移除全屏模式类名
+      document.body.classList.remove('chat-fullscreen-mode')
+    }
+  }
+}
+
+// 监听 ESC 键退出全屏
+const handleEscKey = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isFullscreen.value) {
+    toggleFullscreen()
+  }
+}
+
+// 组件挂载时初始化
+onMounted(async () => {
+  console.log('组件已挂载，开始加载数据...')
+  // await fetchRecommendations()
+  
+  // 加载已绑定的知识库
+  await fetchBoundKnowledgeBases()
+  
+  isDataLoaded.value = true
+  console.log('数据加载完成')
+  
+  // 添加键盘事件监听
+  window.addEventListener('keydown', handleEscKey)
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleEscKey)
+  
+  // 确保退出全屏状态
+  if (isFullscreen.value) {
+    const layoutWrapper = document.querySelector('.vue-admin-better-wrapper') as HTMLElement
+    if (layoutWrapper) {
+      layoutWrapper.style.overflow = ''
+    }
+    // 移除全屏模式类名
+    document.body.classList.remove('chat-fullscreen-mode')
+  }
+})
+</script>
+
+<style scoped>
+.main-container {
+  position: relative;
+  height: 100vh;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* 全屏按钮 */
+.fullscreen-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.fullscreen-button:hover {
+  background: var(--el-color-primary);
+  color: white;
+  border-color: var(--el-color-primary);
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.fullscreen-button :deep(.el-icon) {
+  transition: color 0.3s ease;
+}
+
+.fullscreen-button:hover :deep(.el-icon) {
+  color: white;
+}
+
+/* 知识库按钮 */
+.knowledge-button {
+  position: absolute;
+  top: 16px;
+  right: 64px;
+  z-index: 100;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.knowledge-button:hover {
+  background: var(--el-color-primary);
+  color: white;
+  border-color: var(--el-color-primary);
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.knowledge-button :deep(.el-icon) {
+  transition: color 0.3s ease;
+}
+
+.knowledge-button:hover :deep(.el-icon) {
+  color: white;
+}
+
+.knowledge-button :deep(.el-badge__content) {
+  border: none;
+}
+
+/* 全屏模式样式 */
+.main-container.fullscreen-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background: var(--el-bg-color);
+  padding: 0;
+  margin: 0;
+}
+
+.main-container.fullscreen-mode .fullscreen-button,
+.main-container.fullscreen-mode .knowledge-button {
+  z-index: 10000;
+}
+
+/* 知识库对话框样式 */
+.knowledge-dialog-content {
+  padding: 10px 0;
+}
+
+.section-title {
+  margin-bottom: 12px;
+  font-weight: 500;
+  color: #606266;
+  font-size: 14px;
+}
+
+.bound-knowledge {
+  margin-bottom: 24px;
+  padding: 16px;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+}
+
+.knowledge-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.no-binding-hint {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.add-knowledge {
+  margin-bottom: 10px;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+.el-tag {
+  font-size: 13px;
+  padding: 6px 12px;
+}
+</style>
+
+<style>
+/* 全局样式：全屏模式下的下拉框和弹出框 z-index */
+.fullscreen-select-dropdown {
+  z-index: 20001 !important;
+}
+
+/* 全屏模式下的消息提示框样式 */
+.fullscreen-message {
+  z-index: 20003 !important;
+  position: fixed !important;
+  top: 20px !important;
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  min-width: 380px !important;
+  padding: 15px 20px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* 全屏模式下的其他弹出框 */
+.main-container.fullscreen-mode ~ .el-dialog__wrapper {
+  z-index: 20000 !important;
+}
+
+.main-container.fullscreen-mode ~ .el-loading-mask {
+  z-index: 20001 !important;
+}
+
+.main-container.fullscreen-mode ~ .el-notification {
+  z-index: 20003 !important;
+}
+
+/* 全屏模式下的遮罩层 */
+.main-container.fullscreen-mode ~ .v-modal {
+  z-index: 19999 !important;
+}
+</style>
diff --git a/chat-client/src/views/chatweb/components/CenteredInputArea.vue b/chat-client/src/views/chatweb/components/CenteredInputArea.vue
new file mode 100644
index 0000000..83c87b9
--- /dev/null
+++ b/chat-client/src/views/chatweb/components/CenteredInputArea.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="centered-input-wrapper">
+    <div class="large-input-container">
+      <el-input
+        v-model="localMessage"
+        :placeholder="placeholder"
+        :autosize="{ minRows: 2, maxRows: 6 }"
+        type="textarea"
+        resize="none"
+        @keydown.enter.exact="handleSend"
+        class="large-message-input"
+      />
+      
+      <!-- 底部工具栏 -->
+      <div class="input-toolbar">
+        <!-- 左侧：选择知识库和附件 -->
+        <div class="toolbar-left">
+          <!-- <el-select
+            v-model="selectedKnowledgeBase"
+            placeholder="选择知识库"
+            size="default"
+            class="knowledge-select"
+            clearable
+          >
+            <el-option
+              v-for="kb in knowledgeBases"
+              :key="kb.value"
+              :label="kb.label"
+              :value="kb.value"
+            />
+          </el-select>
+          
+          <el-upload
+            ref="uploadRef"
+            :show-file-list="false"
+            :on-change="handleFileChange"
+            :auto-upload="false"
+            accept="image/*,.pdf,.doc,.docx,.txt"
+            class="upload-wrapper"
+          >
+            <el-button 
+              text
+              :icon="Paperclip"
+              class="attach-btn"
+              title="添加附件"
+            >
+              <span v-if="attachedFiles.length > 0" class="file-count">{{ attachedFiles.length }}</span>
+            </el-button>
+          </el-upload>
+          
+          <div v-if="attachedFiles.length > 0" class="attached-files">
+            <el-tag
+              v-for="(file, index) in attachedFiles"
+              :key="index"
+              closable
+              @close="removeFile(index)"
+              size="small"
+              type="info"
+            >
+              {{ file.name }}
+            </el-tag>
+          </div> -->
+        </div>
+        
+        <!-- 右侧：操作按钮和提示 -->
+        <div class="toolbar-right">
+          <span v-if="localMessage.trim() && !isLoading" class="char-count">{{ localMessage.length }}</span>
+          <span v-if="!isLoading" class="shortcut-hint">Enter</span>
+          <el-button 
+            v-if="!isLoading"
+            circle 
+            text
+            @click="handleVoiceInput"
+            :icon="Microphone"
+            class="action-btn"
+            title="语音输入"
+          />
+          <!-- 发送按钮 / 停止按钮切换 -->
+          <el-button 
+            v-if="!isLoading"
+            circle
+            type="primary"
+            @click="handleSend"
+            :disabled="!localMessage.trim()"
+            :icon="Position"
+            class="send-btn"
+            title="发送消息 (Enter)"
+          />
+          <el-button 
+            v-else
+            circle
+            @click="handleStop"
+            class="stop-btn"
+            title="停止生成"
+          >
+            <svg viewBox="0 0 24 24" class="stop-icon">
+              <rect x="4" y="4" width="15" height="15" rx="3" />
+            </svg>
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Microphone, Position, Paperclip } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import type { UploadFile } from 'element-plus'
+
+interface Props {
+  modelValue: string
+  placeholder?: string
+  isLoading?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+  (e: 'send-message', message: string): void
+  (e: 'stop-stream'): void  
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '给AI助手发送消息',
+  isLoading: false
+})
+
+const emit = defineEmits<Emits>()
+
+const localMessage = ref(props.modelValue)
+const selectedKnowledgeBase = ref('')
+const attachedFiles = ref<UploadFile[]>([])
+const uploadRef = ref()
+
+// 同步双向绑定
+watch(() => props.modelValue, (val) => {
+  localMessage.value = val
+})
+
+watch(localMessage, (val) => {
+  emit('update:modelValue', val)
+})
+
+// 知识库列表
+const knowledgeBases = ref([
+  { label: '通用知识库', value: 'general' },
+  { label: '技术文档库', value: 'tech' },
+  { label: '业务知识库', value: 'business' },
+  { label: '检修手册库', value: 'manual' },
+])
+
+// 处理文件上传
+const handleFileChange = (file: UploadFile) => {
+  if (attachedFiles.value.length >= 5) {
+    ElMessage.warning('最多只能上传5个文件')
+    return
+  }
+  attachedFiles.value.push(file)
+  ElMessage.success(`已添加文件: ${file.name}`)
+}
+
+// 移除文件
+const removeFile = (index: number) => {
+  attachedFiles.value.splice(index, 1)
+}
+
+// 发送消息
+const handleSend = (event?: KeyboardEvent | MouseEvent) => {
+  if (event) {
+    event.preventDefault()
+  }
+  
+  if (!localMessage.value.trim() || props.isLoading) {
+    return
+  }
+
+  emit('send-message', localMessage.value)
+  localMessage.value = ''
+  attachedFiles.value = []
+  selectedKnowledgeBase.value = ''
+}
+
+// 停止生成
+const handleStop = () => {
+  emit('stop-stream')
+}
+
+// 语音输入
+const handleVoiceInput = () => {
+  ElMessage.info('语音输入功能开发中...')
+}
+</script>
+
+<style scoped lang="scss">
+.centered-input-wrapper {
+  width: 100%;
+  max-width: 900px;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.large-input-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  overflow: hidden;
+  
+  &:hover {
+    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
+  }
+  
+  .large-message-input {
+    :deep(.el-textarea__inner) {
+      border: none;
+      border-radius: 16px;
+      padding: 20px 24px;
+      padding-bottom: 70px;
+      font-size: 15px;
+      line-height: 1.8;
+      min-height: 120px;
+      transition: all 0.3s ease;
+      box-shadow: none;
+      background: transparent;
+      
+      &:focus {
+        outline: none;
+        box-shadow: none;
+      }
+      
+      &::placeholder {
+        color: #9ca3af;
+      }
+    }
+  }
+  
+  .input-toolbar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px;
+    background: transparent;
+    
+    .toolbar-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+      
+      .knowledge-select {
+        width: 200px;
+        
+        :deep(.el-input__wrapper) {
+          border-radius: 8px;
+          box-shadow: 0 0 0 1px #e5e7eb inset;
+          
+          &:hover {
+            box-shadow: 0 0 0 1px #6366f1 inset;
+          }
+          
+          &.is-focus {
+            box-shadow: 0 0 0 1px #6366f1 inset;
+          }
+        }
+      }
+      
+      .upload-wrapper {
+        display: inline-block;
+      }
+      
+      .attach-btn {
+        position: relative;
+        font-size: 20px;
+        color: #6b7280;
+        transition: all 0.3s ease;
+        width: 36px;
+        height: 36px;
+        background: rgba(99, 102, 241, 0.08);
+        
+        &:hover {
+          color: #6366f1;
+          background: rgba(99, 102, 241, 0.15);
+        }
+        
+        .file-count {
+          position: absolute;
+          top: -4px;
+          right: -4px;
+          background: #ef4444;
+          color: #ffffff;
+          font-size: 10px;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+        }
+      }
+      
+      .attached-files {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+    }
+    
+    .toolbar-right {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      
+      .char-count {
+        font-size: 12px;
+        color: #9ca3af;
+        padding: 0 8px;
+        animation: fadeIn 0.3s ease;
+      }
+      
+      .shortcut-hint {
+        font-size: 11px;
+        color: #9ca3af;
+        background: rgba(99, 102, 241, 0.06);
+        padding: 4px 8px;
+        border-radius: 6px;
+        font-family: monospace;
+        border: 1px solid rgba(99, 102, 241, 0.1);
+      }
+      
+      .action-btn {
+        font-size: 20px;
+        color: #6b7280;
+        transition: all 0.3s ease;
+        width: 36px;
+        height: 36px;
+        background: rgba(99, 102, 241, 0.08);
+        
+        &:hover {
+          color: #6366f1;
+          transform: scale(1.1);
+          background: rgba(99, 102, 241, 0.15);
+        }
+      }
+      
+      .send-btn {
+        width: 40px;
+        height: 40px;
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+        border: none;
+        transition: all 0.3s ease;
+        
+        &:hover:not(:disabled) {
+          transform: scale(1.05);
+          box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+        }
+        
+        &:disabled {
+          background: #93c5fd;
+          cursor: not-allowed;
+        }
+      }
+
+      .stop-btn {
+        width: 40px;
+        height: 40px;
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        border: none;
+        transition: all 0.3s ease;
+        animation: pulseGlow 2s ease-in-out infinite;
+        
+        &:hover {
+          transform: scale(1.05);
+          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
+          animation: none;
+        }
+
+        &:active {
+          transform: scale(0.95);
+        }
+        
+        .stop-icon {
+          width: 16px;
+          height: 16px;
+          fill: white;
+          transition: all 0.3s ease;
+        }
+
+        &:hover .stop-icon {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+}
+
+@keyframes pulseGlow {
+  0%, 100% {
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+  }
+  50% {
+    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.6);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .large-input-container {
+    .large-message-input {
+      :deep(.el-textarea__inner) {
+        padding: 16px;
+        padding-bottom: 120px;
+        min-height: 100px;
+      }
+    }
+    
+    .input-toolbar {
+      padding: 12px 16px;
+      flex-direction: column;
+      gap: 12px;
+      align-items: stretch;
+      
+      .toolbar-left {
+        width: 100%;
+        
+        .knowledge-select {
+          width: 100%;
+        }
+        
+        .attached-files {
+          width: 100%;
+        }
+      }
+      
+      .toolbar-right {
+        justify-content: space-between;
+        
+        .shortcut-hint {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>
+
+