From 5dd8436cde8893b72cf969262610d77c434c1000 Mon Sep 17 00:00:00 2001
From: Simon <simon@local>
Date: Sat, 18 Jul 2026 01:17:08 +0800
Subject: [PATCH] =?UTF-8?q?P2-1(=E9=83=A8=E5=88=86):=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=AD=A4=E5=84=BF=E7=BB=84=E4=BB=B6=20InputBox.vue/MessageItem?=
 =?UTF-8?q?.vue=20+=20store=E6=AD=BB=E4=BB=A3=E7=A0=81=20showApprovalCard/?=
 =?UTF-8?q?closeApprovalCard/approvalCardVisible=EF=BC=88P0-3=E8=AF=AF?=
 =?UTF-8?q?=E6=8A=A5=E7=A1=AE=E8=AE=A4=EF=BC=8C=E7=BB=84=E4=BB=B6=E5=A4=87?=
 =?UTF-8?q?=E4=BB=BD=E4=BA=8E.workbuddy/tmp/orphan-backup=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend-h5/src/components/chat/InputBox.vue  | 748 ------------------
 .../src/components/chat/MessageItem.vue       | 659 ---------------
 frontend-h5/src/stores/conversation.ts        |  61 +-
 3 files changed, 5 insertions(+), 1463 deletions(-)
 delete mode 100644 frontend-h5/src/components/chat/InputBox.vue
 delete mode 100644 frontend-h5/src/components/chat/MessageItem.vue

diff --git a/frontend-h5/src/components/chat/InputBox.vue b/frontend-h5/src/components/chat/InputBox.vue
deleted file mode 100644
index 36256a3..0000000
--- a/frontend-h5/src/components/chat/InputBox.vue
+++ /dev/null
@@ -1,748 +0,0 @@
-<!-- =============================================================================
-// 企微IT智能服务台 — H5用户端输入框组件
-// =============================================================================
-// 说明：底部输入框组件，包含：
-//    - 输入框默认3行高度，自动扩展（max-height: 150px）
-//    - 底部显示字数统计（当前/最大，如：120/500）
-//    - 右下角发送按钮（icon）
-//    - Enter键发送，Shift+Enter换行
-//    - 空内容时禁用发送按钮
-//    - 支持文件上传
-//    - 2026-07-05: 移除图片/拍照功能（用户端仅支持文字和文件）
-// ============================================================================= -->
-
-<template>
-  <div class="input-box">
-    <!-- 工具栏：摇人按钮/表情/文件/截图/快捷申请 (2026-07-05移除图片和拍照) -->
-    <div class="input-box__toolbar">
-      <!-- 摇人按钮 - 输入框左侧，橙色渐变铃铛图标 -->
-      <button 
-        v-if="store.canCallAgent" 
-        class="input-box__tool-btn input-box__tool-btn--yaoren" 
-        :class="{ 'input-box__tool-btn--calling': isCallingAgent }"
-        title="呼叫IT坐席"
-        :disabled="isCallingAgent"
-        @click="handleCallAgent"
-      >
-        <svg v-if="!isCallingAgent" class="yaoren-icon" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 2C10.9 2 10 2.9 10 4V8C10 9.1 10.9 10 12 10C13.1 10 14 9.1 14 8V4C14 2.9 13.1 2 12 2ZM12 12C10.9 12 10 12.9 10 14V16C10 17.1 10.9 18 12 18C13.1 18 14 17.1 14 16V14C14 12.9 13.1 12 12 12ZM6 6H18V8H6V6ZM4 4V20H20V4H4Z"/>
-        </svg>
-        <span v-else class="yaoren-text">呼叫中...</span>
-      </button>
-      <button class="input-box__tool-btn" title="表情" @click="handleEmoji">
-        <span>😊</span>
-      </button>
-      <button class="input-box__tool-btn" title="文件" @click="handleFile">
-        <span>📎</span>
-      </button>
-      <button class="input-box__tool-btn" title="截图" @click="handleScreenshot">
-        <span>📷</span>
-      </button>
-      <button class="input-box__tool-btn input-box__tool-btn--accent" title="快捷申请" @click="handleQuickApply">
-        <span>📝</span>
-      </button>
-    </div>
-
-    <!-- 表情选择面板（简易版：常用 Emoji 网格） -->
-    <div v-if="showEmojiPanel" class="emoji-panel">
-      <div class="emoji-panel__grid">
-        <button
-          v-for="emoji in commonEmojis"
-          :key="emoji"
-          class="emoji-panel__item"
-          @click="onEmojiClick(emoji)"
-        >{{ emoji }}</button>
-      </div>
-    </div>
-
-    <!-- 输入区域 -->
-    <div class="input-box__area">
-      <!-- 文本输入框 — 默认3行，自适应内容高度 -->
-      <textarea
-        ref="inputRef"
-        v-model="inputText"
-        class="input-box__textarea"
-        placeholder="请输入消息..."
-        :rows="3"
-        :style="{ height: textareaHeight + 'px' }"
-        :disabled="!store.isLoggedIn"
-        @keydown="handleEnterKey"
-        @input="handleInput"
-        @paste="handlePaste"
-      ></textarea>
-
-      <!-- 发送按钮 — 右下角，icon样式 -->
-      <button
-        class="input-box__send-btn"
-        :class="{ 'input-box__send-btn--active': canSend }"
-        :disabled="!canSend"
-        :loading="store.loading"
-        @click="handleSend"
-      >
-        <svg v-if="!store.loading" class="send-icon" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M2.01 21L23 12 2.01 3 2 10l15-2-15-2z"/>
-        </svg>
-      </button>
-    </div>
-
-    <!-- 字数统计 -->
-    <div class="input-box__counter">
-      {{ charCount }}/{{ maxChars }}
-    </div>
-
-    <!-- 底部引导条 -->
-    <div v-if="store.canCallAgent" class="input-box__guide input-box__guide--active">
-      点击【呼叫】召唤人工坐席
-    </div>
-    <div v-else class="input-box__guide">
-      请描述你遇到的问题，AI 助手会帮你分析 💡
-    </div>
-
-    <!-- 表情面板打开时的半透明遮罩（点击关闭表情面板） -->
-    <div v-if="showEmojiPanel" class="emoji-panel__overlay" @click="showEmojiPanel = false"></div>
-
-    <!-- 隐藏的文件输入框（文件上传用，由工具栏按钮触发） -->
-    <input
-      ref="fileInputRef"
-      type="file"
-      style="display: none"
-      @change="handleFileSelect"
-    />
-
-    <!-- 截图区域选择编辑器 -->
-    <ScreenshotEditor
-      v-if="showScreenshotEditor"
-      :screenshot-canvas="screenshotCanvas"
-      @confirm="onScreenshotConfirm"
-      @cancel="onScreenshotCancel"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * InputBox 输入框组件
- * 输入框默认3行高度，自动扩展（max-height: 150px）
- * 底部显示字数统计，右下角发送按钮
- * Enter发送，Shift+Enter换行
- */
-import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
-import { showToast } from 'vant'
-import html2canvas from 'html2canvas-pro'
-import { useConversationStore } from '@/stores/conversation'
-import { uploadFile } from '@/api/upload'
-import { callAgent } from '@/api/conversation'
-import ScreenshotEditor from './ScreenshotEditor.vue'
-
-// ============================================================================
-// 工具函数：安全提取错误详情
-// ============================================================================
-function formatErrorDetail(detail: any): string {
-  if (!detail) return ''
-  if (typeof detail === 'string') return detail
-  if (Array.isArray(detail)) {
-    return detail.map((d: any) => {
-      if (d.loc && d.msg) return `${d.loc.slice(1).join('.')}: ${d.msg}`
-      if (d.msg) return d.msg
-      return JSON.stringify(d)
-    }).join('; ')
-  }
-  if (typeof detail === 'object') return JSON.stringify(detail)
-  return String(detail)
-}
-
-const store = useConversationStore()
-
-/** 输入框文本 */
-const inputText = ref<string>('')
-
-/** 输入框 DOM 引用 */
-const inputRef = ref<HTMLTextAreaElement | null>(null)
-
-/** 隐藏文件输入框 DOM 引用 */
-const fileInputRef = ref<HTMLInputElement | null>(null)
-
-// 移除 cameraInputRef 声明，拍照功能已禁用
-
-/** 最大字符数 */
-const maxChars = 500
-
-/** textarea 高度 */
-const textareaHeight = ref(60)
-
-/** 是否显示表情面板 */
-const showEmojiPanel = ref(false)
-
-/** 截图编辑器是否可见 */
-const showScreenshotEditor = ref(false)
-
-/** 是否正在呼叫坐席中 */
-const isCallingAgent = ref(false)
-
-/** html2canvas 生成的截图 Canvas */
-let screenshotCanvas: HTMLCanvasElement | null = null
-
-/** 当前字符数 */
-const charCount = computed(() => inputText.value.length)
-
-/** 是否可以发送消息 */
-const canSend = computed(() => {
-  return inputText.value.trim().length > 0 && !store.loading && store.isLoggedIn && charCount.value <= maxChars
-})
-
-// ============================================================================
-// 常用表情列表
-// ============================================================================
-const commonEmojis = [
-  '😀','😃','😄','😁','😆','😅','🤣','😂',
-  '🙂','😊','😇','🥰','😍','🤩','😘','😗',
-  '😚','😙','😋','😛','😜','🤪','😝','🤑',
-  '🤗','🤭','🤫','🤔','🤐','🤨','😐','😑',
-  '😶','😏','😒','🙄','😬','😮','🤯','😲',
-  '😳','🥺','😢','😭','😤','😠','😡','🤬',
-  '👍','👎','👏','🙌','🤝','💪','✌️','🤞',
-  '❤️','🧡','💛','💚','💙','💜','💯','✅',
-]
-
-// ============================================================================
-// 生命周期
-// ============================================================================
-onMounted(() => {
-  document.addEventListener('paste', handleDocPaste)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('paste', handleDocPaste)
-})
-
-// ============================================================================
-// 输入框高度自适应
-// ============================================================================
-function handleInput(): void {
-  // 计算内容高度
-  nextTick(() => {
-    if (inputRef.value) {
-      const scrollHeight = inputRef.value.scrollHeight
-      const newHeight = Math.min(Math.max(scrollHeight, 60), 150)
-      textareaHeight.value = newHeight
-    }
-  })
-}
-
-// ============================================================================
-// Document 级别粘贴监听
-// 说明：用于捕获 textarea 上未触发的 paste 事件（如某些 H5 环境）
-// ============================================================================
-async function handleDocPaste(event: ClipboardEvent): Promise<void> {
-  // 不再检查 target 是否为 textarea
-  // 原因：van-field 或原生 textarea 的 @paste 事件在某些 H5 环境下可能不触发
-  // 此时 document 级别的监听可以作为后备方案
-
-  // 优先使用 clipboardData.files（兼容性更好）
-  const files = event.clipboardData?.files
-  if (files && files.length > 0) {
-    event.preventDefault()
-    console.log('[InputBox] Document级别粘贴检测到文件, 数量:', files.length)
-
-    for (const file of Array.from(files)) {
-      // 跳过图片文件，仅处理非图片文件
-      if (!file.type.startsWith('image/')) {
-        await handleFileUpload(file)
-      }
-    }
-    return
-  }
-
-  // 兼容 clipboardData.items
-  const items = event.clipboardData?.items
-  if (!items) return
-
-  for (const item of Array.from(items)) {
-    if (item.kind === 'file') {
-      event.preventDefault()
-      const file = item.getAsFile()
-      if (!file) continue
-
-      // 跳过图片文件，仅处理非图片文件
-      if (!file.type.startsWith('image/')) {
-        await handleFileUpload(file)
-      }
-      return
-    }
-  }
-}
-
-// ============================================================================
-// 表情处理
-// ============================================================================
-function onEmojiClick(emoji: string): void {
-  inputText.value += emoji
-  showEmojiPanel.value = false
-  nextTick(() => {
-    inputRef.value?.focus()
-  })
-}
-
-function handleEmoji(): void {
-  showEmojiPanel.value = !showEmojiPanel.value
-}
-
-// ============================================================================
-// 键盘事件
-// ============================================================================
-function handleEnterKey(event: KeyboardEvent): void {
-  const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
-  if (isMobile) return
-
-  // 桌面端：Shift+Enter 换行，Enter 发送
-  if (!event.shiftKey) {
-    event.preventDefault()
-    handleSend()
-  }
-}
-
-// ============================================================================
-// 发送消息
-// ============================================================================
-async function handleSend(): Promise<void> {
-  const content = inputText.value.trim()
-  if (!content || store.loading) return
-
-  inputText.value = ''
-  textareaHeight.value = 60
-
-  await store.sendNewMessage(content)
-}
-
-// ============================================================================
-// 文件上传（2026-07-05移除图片粘贴和上传功能）
-// ============================================================================
-async function handlePaste(event: ClipboardEvent): Promise<void> {
-  // 用户端不再支持粘贴图片，仅支持粘贴文件
-  // 2026-07-05: 移除图片处理，仅处理文件
-
-  // 优先使用 clipboardData.files（兼容性更好）
-  const files = event.clipboardData?.files
-  if (files && files.length > 0) {
-    event.preventDefault()
-    console.log('[InputBox] 检测到粘贴文件, 数量:', files.length)
-
-    for (const file of Array.from(files)) {
-      // 跳过图片文件，仅处理非图片文件
-      if (!file.type.startsWith('image/')) {
-        console.log('[InputBox] 开始上传文件:', file.name, '类型:', file.type)
-        await handleFileUpload(file)
-      } else {
-        console.log('[InputBox] 跳过图片文件:', file.name, '（图片粘贴功能已禁用）')
-      }
-    }
-    return
-  }
-
-  // 兼容 clipboardData.items（部分浏览器使用这种方式）
-  const items = event.clipboardData?.items
-  if (!items) {
-    console.log('[InputBox] clipboardData.items 为空，无法处理粘贴')
-    return
-  }
-
-  for (const item of Array.from(items)) {
-    if (item.kind === 'file') {
-      event.preventDefault()
-      const file = item.getAsFile()
-      if (!file) continue
-
-      // 跳过图片文件，仅处理非图片文件
-      if (!file.type.startsWith('image/')) {
-        await handleFileUpload(file)
-      }
-      return
-    }
-  }
-}
-
-// 移除 handleImageUpload 函数，图片功能已禁用
-// 保留 handleFileUpload 处理文件上传
-
-async function handleFileUpload(file: File | Blob): Promise<void> {
-  try {
-    const fileName = file instanceof File ? file.name : '文件'
-    console.log('[InputBox] handleFileUpload 开始, 文件名:', fileName, '大小:', file instanceof File ? file.size : 'unknown')
-    showToast(`文件上传中: ${fileName}`)
-
-    const result = await uploadFile(file)
-    console.log('[InputBox] 文件上传成功, url:', result.url, 'filename:', result.filename)
-
-    await store.sendNewMessage(`[文件] ${result.filename}`, {
-      msg_type: 'file',
-      media_url: result.url,
-      file_name: result.filename,
-      file_size: result.file_size,
-    })
-    console.log('[InputBox] 文件消息发送成功')
-    showToast('文件发送成功')
-  } catch (error: any) {
-    console.error('[InputBox] 文件上传失败:', error)
-    showToast(
-      formatErrorDetail(error?.response?.data?.detail) ||
-      error?.message ||
-      '文件上传失败，请重试'
-    )
-  }
-}
-
-async function handleFileSelect(event: Event): Promise<void> {
-  const input = event.target as HTMLInputElement
-  const files = input.files
-  if (!files || files.length === 0) return
-
-  for (const file of Array.from(files)) {
-    try {
-      showToast(`正在上传: ${file.name}`)
-      const result = await uploadFile(file)
-      showToast(`${file.name} 上传成功`)
-      console.log('[InputBox] 文件上传成功:', result.url)
-    } catch (error: any) {
-      console.error('文件上传失败:', error)
-      showToast(`${file.name} 上传失败`)
-    }
-  }
-
-  input.value = ''
-}
-
-// 移除 handleImage 函数，图片上传功能已禁用
-// 移除 handleCamera 函数，拍照功能已禁用
-
-function handleFile(): void {
-  if (fileInputRef.value) {
-    fileInputRef.value.accept = ''
-    fileInputRef.value.multiple = true
-    fileInputRef.value.click()
-  }
-}
-
-// 移除 handleCamera 和 handleCameraCapture 函数，拍照功能已禁用
-
-async function handleScreenshot(): Promise<void> {
-  try {
-    showToast('正在截取页面...')
-    const canvas = await html2canvas(document.body, {
-      useCORS: true,
-      allowTaint: true,
-      scale: window.devicePixelRatio || 1,
-      logging: false,
-      backgroundColor: '#ffffff',
-      foreignObjectRendering: false,
-      removeContainer: true,
-    })
-    screenshotCanvas = canvas
-    showScreenshotEditor.value = true
-  } catch (error) {
-    console.error('截图失败:', error)
-    showToast('截图失败，请重试')
-  }
-}
-
-async function onScreenshotConfirm(blob: Blob): Promise<void> {
-  try {
-    showToast('截图上传中...')
-    const result = await uploadFile(blob, 'screenshot')
-    await store.sendNewMessage('[截图]', {
-      msg_type: 'image',
-      media_url: result.url,
-      file_name: result.filename,
-      file_size: result.file_size,
-    })
-    showToast('截图发送成功')
-  } catch (error: any) {
-    console.error('[InputBox] 截图发送失败:', error)
-    showToast(
-      `截图发送失败：${
-        formatErrorDetail(error?.response?.data?.detail) ||
-        error?.message ||
-        '未知错误'
-      }`
-    )
-  } finally {
-    showScreenshotEditor.value = false
-    screenshotCanvas = null
-  }
-}
-
-function onScreenshotCancel(): void {
-  showScreenshotEditor.value = false
-  screenshotCanvas = null
-}
-
-// ============================================================================
-// 摇人按钮 - 呼叫坐席
-// ============================================================================
-async function handleCallAgent(): Promise<void> {
-  if (isCallingAgent.value) return // 防止重复点击
-  
-  isCallingAgent.value = true
-  try {
-    // 调用后端API触发转人工
-    const resp = await callAgent()
-    if (resp.code === 0) {
-      showToast({ message: '已为您呼叫坐席，请稍候...', position: 'bottom' })
-    } else {
-      showToast({ message: resp.message || '呼叫失败，请重试', position: 'bottom' })
-    }
-  } catch (error: any) {
-    console.error('呼叫坐席失败:', error)
-    showToast({ message: '呼叫失败，请重试', position: 'bottom' })
-  } finally {
-    isCallingAgent.value = false
-  }
-}
-
-// ============================================================================
-// 快捷申请按钮
-// ============================================================================
-function handleQuickApply(): void {
-  // 触发审批卡片弹窗
-  store.showApprovalCard('')
-}
-</script>
-
-<style scoped>
-/* ==========================================================================
-   输入框容器
-   ========================================================================== */
-.input-box {
-  background-color: var(--bg-tertiary);
-  border-top: 1px solid var(--border-color);
-  padding: 8px 12px;
-  padding-bottom: calc(8px + env(safe-area-inset-bottom));
-  flex-shrink: 0;
-  position: relative;
-}
-
-/* 工具栏 */
-.input-box__toolbar {
-  display: flex;
-  gap: 4px;
-  padding-bottom: 8px;
-}
-
-.input-box__tool-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  transition: all 0.2s;
-  outline: none;
-}
-
-.input-box__tool-btn:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--accent);
-}
-
-/* 快捷申请按钮 - 强调样式 */
-.input-box__tool-btn--accent {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-.input-box__tool-btn--accent:hover {
-  background: var(--accent-hover, #06ad56);
-  border-color: var(--accent-hover, #06ad56);
-}
-
-/* 摇人按钮 - 橙色渐变铃铛图标 */
-.input-box__tool-btn--yaoren {
-  width: 40px;
-  height: 32px;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #FF6B35 0%, #FF8F5E 100%);
-  border: none;
-  cursor: pointer;
-}
-
-.input-box__tool-btn--yaoren:hover {
-  transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
-}
-
-.input-box__tool-btn--yaoren:active {
-  transform: scale(0.95);
-}
-
-/* 呼叫中状态 */
-.input-box__tool-btn--calling {
-  animation: shake 0.6s ease-in-out infinite;
-}
-
-@keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-2px); }
-  75% { transform: translateX(2px); }
-}
-
-.yaoren-icon {
-  width: 18px;
-  height: 18px;
-  color: white;
-}
-
-.yaoren-text {
-  font-size: 10px;
-  color: white;
-  font-weight: 500;
-}
-
-/* 输入区域 */
-.input-box__area {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  position: relative;
-}
-
-.input-box__textarea {
-  flex: 1;
-  background-color: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 8px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  color: var(--text-primary);
-  resize: none;
-  line-height: 1.5;
-  min-height: 60px;
-  max-height: 150px;
-  overflow-y: auto;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.input-box__textarea:focus {
-  border-color: var(--accent);
-}
-
-.input-box__textarea:disabled {
-  background-color: var(--bg-tertiary);
-  color: var(--text-placeholder);
-}
-
-/* 发送按钮 */
-.input-box__send-btn {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: none;
-  background: var(--bg-tertiary);
-  cursor: not-allowed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all 0.2s;
-  padding: 0;
-}
-
-.input-box__send-btn--active {
-  background: var(--accent);
-  cursor: pointer;
-}
-
-.input-box__send-btn--active:hover {
-  opacity: 0.9;
-}
-
-.send-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--text-placeholder);
-}
-
-.input-box__send-btn--active .send-icon {
-  color: white;
-}
-
-/* 字数统计 */
-.input-box__counter {
-  text-align: right;
-  font-size: 11px;
-  color: var(--text-placeholder);
-  margin-top: 4px;
-}
-
-/* 底部引导条 */
-.input-box__guide {
-  text-align: center;
-  font-size: 11px;
-  color: var(--text-placeholder);
-  margin-top: 6px;
-}
-
-.input-box__guide--active {
-  color: var(--color-warning);
-  font-weight: 500;
-}
-
-/* 表情选择面板 */
-.emoji-panel {
-  position: relative;
-  z-index: 200;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 8px;
-  max-height: 200px;
-  overflow-y: auto;
-  width: fit-content;
-  max-width: 100%;
-  margin: 0 auto;
-}
-
-.emoji-panel__grid {
-  display: grid;
-  grid-template-columns: repeat(8, 36px);
-  gap: 2px;
-  justify-content: center;
-}
-
-.emoji-panel__item {
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.15s;
-  outline: none;
-}
-
-.emoji-panel__item:hover {
-  background: var(--bg-tertiary);
-}
-
-.emoji-panel__item:active {
-  background: var(--accent-soft, rgba(59,130,246,0.15));
-  transform: scale(1.2);
-}
-
-.emoji-panel__overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-}
-</style>
\ No newline at end of file
diff --git a/frontend-h5/src/components/chat/MessageItem.vue b/frontend-h5/src/components/chat/MessageItem.vue
deleted file mode 100644
index ed3502d..0000000
--- a/frontend-h5/src/components/chat/MessageItem.vue
+++ /dev/null
@@ -1,659 +0,0 @@
-<!-- =============================================================================
-// 企微IT智能服务台 — H5用户端消息气泡组件
-// =============================================================================
-// 说明：单条消息的气泡展示
-// 功能：
-//    - 长按/右键弹出操作菜单：复制、撤回（2分钟内）、删除
-//    - 消息状态显示：发送中、已发送、已送达、已读
-//    - 时间戳显示规则：同日期只显示时间，不同日期显示月日时间
-//    - 消息类型：文本、图片、文件、语音、系统消息
-// ============================================================================= -->
-
-<template>
-  <!-- 系统消息：居中灰色文字 -->
-  <div v-if="msg.message_type === 'system'" class="message-item message-item--system">
-    <span class="message-item__system-text">{{ msg.content }}</span>
-  </div>
-
-  <!-- 非系统消息 -->
-  <div
-    v-else
-    class="message-item"
-    :class="bubbleClass"
-    @contextmenu.prevent="showContextMenu"
-    @longpress="showContextMenu"
-  >
-    <!-- 发送者名称（坐席和 AI 消息显示在左侧） -->
-    <div v-if="msg.message_type !== 'employee'" class="message-item__sender">
-      <!-- AI 消息显示达寇拉头像和名称 -->
-      <img v-if="msg.message_type === 'ai'" src="/duckula.webp" class="message-item__ai-avatar" alt="Duckula" />
-      <span class="message-item__sender-name">{{ senderName }}</span>
-    </div>
-
-    <!-- 消息内容气泡 -->
-    <div class="message-item__content" :class="contentClass">
-      <!-- 文本消息 -->
-      <template v-if="!msg.msg_type || msg.msg_type === 'text'">
-        <p class="message-item__text" style="white-space: pre-wrap;">{{ msg.content }}</p>
-      </template>
-
-      <!-- 图片消息：显示缩略图（可点击查看大图） -->
-      <template v-else-if="msg.msg_type === 'image'">
-        <div class="image-message" @click="previewImage" style="max-width: 100px !important;">
-          <img
-            v-if="msg.media_url || msg.extra_data?.pic_url"
-            :src="msg.media_url || msg.extra_data?.pic_url"
-            :alt="msg.file_name || '图片'"
-            class="image-message__thumbnail"
-            loading="lazy"
-            style="max-width: 100px !important;"
-          />
-          <div v-else class="media-card">
-            <div class="media-card__icon">🖼️</div>
-            <div class="media-card__info">
-              <span class="media-card__label">图片消息</span>
-              <span v-if="msg.file_name" class="media-card__name">{{ msg.file_name }}</span>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <!-- 文件消息：显示文件卡片 -->
-      <template v-else-if="msg.msg_type === 'file'">
-        <a
-          v-if="msg.media_url"
-          :href="msg.media_url"
-          target="_blank"
-          class="media-card media-card--link"
-        >
-          <div class="media-card__icon">📎</div>
-          <div class="media-card__info">
-            <span class="media-card__label">{{ msg.file_name || '文件消息' }}</span>
-            <span v-if="msg.file_size" class="media-card__size">{{ formatFileSize(msg.file_size) }}</span>
-          </div>
-        </a>
-        <div v-else class="media-card">
-          <div class="media-card__icon">📎</div>
-          <div class="media-card__info">
-            <span class="media-card__label">{{ msg.file_name || '文件消息' }}</span>
-            <span v-if="msg.file_size" class="media-card__size">{{ formatFileSize(msg.file_size) }}</span>
-          </div>
-        </div>
-      </template>
-
-      <!-- 其他非文本消息 -->
-      <template v-else>
-        <div class="media-card">
-          <div class="media-card__icon">{{ mediaIcon }}</div>
-          <div class="media-card__info">
-            <span class="media-card__label">{{ mediaTypeLabel }}</span>
-            <span v-if="msg.file_name" class="media-card__name">{{ msg.file_name }}</span>
-            <span v-if="msg.file_size" class="media-card__size">{{ formatFileSize(msg.file_size) }}</span>
-          </div>
-        </div>
-      </template>
-
-      <!-- 消息状态图标 -->
-      <div v-if="showStatusIcon" class="message-item__status">
-        {{ statusIcon }}
-      </div>
-    </div>
-
-    <!-- 时间戳 -->
-    <div class="message-item__time" :class="timeClass">
-      {{ formatTime(msg.created_at) }}
-    </div>
-
-    <!-- 操作菜单（长按/右键显示） -->
-    <div v-if="contextMenuVisible" class="context-menu" :style="contextMenuStyle">
-      <button class="context-menu__item" @click.stop="copyMessage">
-        📋 复制
-      </button>
-      <button
-        v-if="canRecall"
-        class="context-menu__item"
-        @click.stop="recallMessage"
-      >
-        ↩️ 撤回
-      </button>
-      <button
-        v-if="msg.message_type === 'employee'"
-        class="context-menu__item context-menu__item--danger"
-        @click.stop="deleteMessage"
-      >
-        🗑️ 删除
-      </button>
-    </div>
-
-    <!-- 遮罩层（点击关闭菜单） -->
-    <div v-if="contextMenuVisible" class="context-menu__overlay" @click="closeContextMenu"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * MessageItem 消息气泡组件
- * 长按/右键弹出操作菜单：复制、撤回（2分钟内）、删除
- * 消息状态显示：发送中、已发送、已送达、已读
- * 时间戳显示规则：同日期只显示时间，不同日期显示月日时间
- */
-import { computed, ref } from 'vue'
-import { useClipboard } from '@vueuse/core'
-import { showToast } from 'vant'
-import type { Message } from '@/api/conversation'
-
-const props = defineProps<{
-  /** 消息对象 */
-  msg: Message
-}>()
-
-const emit = defineEmits<{
-  /** 撤回消息 */
-  (e: 'recall', messageId: string): void
-  /** 删除消息 */
-  (e: 'delete', messageId: string): void
-}>()
-
-// ============================================================================
-// 剪贴板相关
-// ============================================================================
-const { copy } = useClipboard()
-
-/** 是否显示操作菜单 */
-const contextMenuVisible = ref(false)
-
-/** 操作菜单位置 */
-const contextMenuStyle = ref<Record<string, string>>({})
-
-/** 复制成功反馈 */
-const copySuccess = ref(false)
-
-// ============================================================================
-// 计算属性
-// ============================================================================
-
-/** 气泡容器的 CSS 类名 */
-const bubbleClass = computed(() => {
-  const classes = [`message-item--${props.msg.message_type}`]
-  if (props.msg.status === 'sending') {
-    classes.push('message-item--sending')
-  } else if (props.msg.status === 'failed') {
-    classes.push('message-item--failed')
-  }
-  return classes.join(' ')
-})
-
-/** 消息内容的 CSS 类名 */
-const contentClass = computed(() => {
-  return `message-item__content--${props.msg.message_type}`
-})
-
-/** 时间的 CSS 类名 */
-const timeClass = computed(() => {
-  return props.msg.message_type === 'employee'
-    ? 'message-item__time--right'
-    : 'message-item__time--left'
-})
-
-/** 发送者名称 */
-const senderName = computed(() => {
-  if (props.msg.message_type === 'agent') {
-    return props.msg.sender_name || 'IT坐席'
-  }
-  if (props.msg.message_type === 'ai') {
-    return 'Duckula（达寇拉）'
-  }
-  return props.msg.sender_name
-})
-
-/** 是否显示状态图标 */
-const showStatusIcon = computed(() => {
-  return props.msg.message_type === 'employee' && props.msg.status
-})
-
-/** 状态图标 */
-const statusIcon = computed(() => {
-  const statusMap: Record<string, string> = {
-    sending: '⏳',
-    sent: '✓',
-    delivered: '✓✓',
-    read: '✓✓',
-  }
-  return statusMap[props.msg.status || ''] || ''
-})
-
-/** 是否可以撤回（2分钟内） */
-const canRecall = computed(() => {
-  if (props.msg.message_type !== 'employee') return false
-  if (!props.msg.created_at) return false
-  const createdAt = new Date(props.msg.created_at)
-  const now = new Date()
-  const diffMs = now.getTime() - createdAt.getTime()
-  const diffMinutes = diffMs / (1000 * 60)
-  return diffMinutes <= 2
-})
-
-/** 消息类型对应的 Emoji 图标 */
-const mediaIcon = computed(() => {
-  const icons: Record<string, string> = {
-    image: '🖼️',
-    voice: '🎤',
-    video: '🎬',
-    file: '📎',
-    location: '📍',
-  }
-  return icons[props.msg.msg_type || ''] || '📄'
-})
-
-/** 消息类型对应的中文标签 */
-const mediaTypeLabel = computed(() => {
-  const labels: Record<string, string> = {
-    image: '图片消息',
-    voice: '语音消息',
-    video: '视频消息',
-    file: '文件消息',
-    location: '位置消息',
-  }
-  return labels[props.msg.msg_type || ''] || '媒体消息'
-})
-
-// ============================================================================
-// 操作菜单
-// ============================================================================
-function showContextMenu(event: MouseEvent | TouchEvent): void {
-  // 计算菜单位置
-  let clientX = 0
-  let clientY = 0
-
-  if ('clientX' in event) {
-    clientX = event.clientX
-    clientY = event.clientY
-  } else {
-    clientX = event.touches[0].clientX
-    clientY = event.touches[0].clientY
-  }
-
-  contextMenuStyle.value = {
-    left: `${clientX}px`,
-    top: `${clientY}px`,
-  }
-  contextMenuVisible.value = true
-}
-
-function closeContextMenu(): void {
-  contextMenuVisible.value = false
-}
-
-// ============================================================================
-// 消息操作
-// ============================================================================
-async function copyMessage(): Promise<void> {
-  try {
-    await copy(props.msg.content)
-    copySuccess.value = true
-    showToast('已复制')
-    closeContextMenu()
-    setTimeout(() => {
-      copySuccess.value = false
-    }, 1500)
-  } catch (err) {
-    console.error('复制失败:', err)
-  }
-}
-
-function recallMessage(): void {
-  emit('recall', props.msg.message_id)
-  closeContextMenu()
-}
-
-function deleteMessage(): void {
-  emit('delete', props.msg.message_id)
-  closeContextMenu()
-}
-
-// ============================================================================
-// 工具方法
-// ============================================================================
-
-/**
- * 格式化时间显示
- * 同日期只显示时间（HH:mm），不同日期显示月日时间（MM-DD HH:mm）
- */
-function formatTime(isoTime: string): string {
-  if (!isoTime) return ''
-  const date = new Date(isoTime)
-  const now = new Date()
-  const isSameDay = date.toDateString() === now.toDateString()
-
-  const hours = date.getHours().toString().padStart(2, '0')
-  const minutes = date.getMinutes().toString().padStart(2, '0')
-
-  if (isSameDay) {
-    return `${hours}:${minutes}`
-  } else {
-    const month = (date.getMonth() + 1).toString().padStart(2, '0')
-    const day = date.getDate().toString().padStart(2, '0')
-    return `${month}-${day} ${hours}:${minutes}`
-  }
-}
-
-/**
- * 格式化文件大小
- */
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
-/**
- * 图片预览
- */
-function previewImage(): void {
-  const url = props.msg.media_url || props.msg.extra_data?.pic_url
-  if (url) {
-    window.open(url, '_blank')
-  }
-}
-</script>
-
-<style scoped>
-/* ============================================================================
-// 消息气泡容器
-// ============================================================================ */
-.message-item {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 16px;
-  max-width: 100%;
-  position: relative;
-}
-
-/* 员工消息：靠右 */
-.message-item--employee {
-  align-items: flex-end;
-}
-
-/* 坐席消息：靠左 */
-.message-item--agent {
-  align-items: flex-start;
-}
-
-/* AI 消息：靠左 */
-.message-item--ai {
-  align-items: flex-start;
-}
-
-/* 系统消息：居中 */
-.message-item--system {
-  align-items: center;
-  padding: 8px 16px;
-}
-
-/* ============================================================================
-// 系统消息
-// ============================================================================ */
-.message-item__system-text {
-  font-size: 12px;
-  color: var(--color-system-text);
-  background-color: var(--color-system-bg);
-  padding: 4px 12px;
-  border-radius: 10px;
-  max-width: 80%;
-  text-align: center;
-  line-height: 1.5;
-}
-
-/* ============================================================================
-// 发送者信息
-// ============================================================================ */
-.message-item__sender {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 3px;
-  padding-left: 4px;
-}
-
-/* AI 头像 */
-.message-item__ai-avatar {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.message-item__ai-tag {
-  display: inline-block;
-  font-size: 10px;
-  color: var(--color-ai-tag-text);
-  background-color: var(--color-ai-tag-bg);
-  padding: 1px 6px;
-  border-radius: 3px;
-  font-weight: 500;
-}
-
-.message-item__sender-name {
-  font-size: 12px;
-  color: var(--text-tertiary);
-}
-
-/* ============================================================================
-// 消息内容气泡
-// ============================================================================ */
-.message-item__content {
-  max-width: 75%;
-  padding: 10px 14px;
-  border-radius: 12px;
-  word-break: break-word;
-  line-height: 1.5;
-  position: relative;
-}
-
-/* 员工消息内容：蓝底白字 */
-.message-item__content--employee {
-  background-color: var(--color-employee-bg);
-  border-top-right-radius: 4px;
-}
-
-/* 坐席消息内容：白底+边框 */
-.message-item__content--agent {
-  background-color: var(--color-agent-bg);
-  border-top-left-radius: 4px;
-  border: 1px solid var(--color-agent-border);
-}
-
-/* AI 消息内容：绿底 */
-.message-item__content--ai {
-  background-color: var(--color-ai-bg);
-  border-top-left-radius: 4px;
-}
-
-/* ============================================================================
-// 消息文字颜色
-// ============================================================================ */
-.message-item__text {
-  font-size: 14px;
-  margin: 0;
-}
-
-.message-item__content--employee .message-item__text {
-  color: var(--bg-secondary);
-}
-
-.message-item__content--agent .message-item__text {
-  color: var(--text-primary);
-}
-
-.message-item__content--ai .message-item__text {
-  color: var(--color-ai-text);
-}
-
-/* ============================================================================
-// 消息状态
-// ============================================================================ */
-.message-item__status {
-  position: absolute;
-  bottom: 4px;
-  right: 8px;
-  font-size: 10px;
-  color: var(--text-placeholder);
-}
-
-/* ============================================================================
-// 消息时间
-// ============================================================================ */
-.message-item__time {
-  font-size: 10px;
-  color: var(--text-placeholder);
-  margin-top: 3px;
-}
-
-.message-item__time--right {
-  text-align: right;
-  padding-right: 4px;
-}
-
-.message-item__time--left {
-  text-align: left;
-  padding-left: 4px;
-}
-
-/* ============================================================================
-// 图片消息样式
-// ============================================================================ */
-.image-message {
-  cursor: pointer;
-  border-radius: 8px;
-  overflow: hidden;
-  max-width: 100px !important;
-}
-
-.image-message__thumbnail {
-  display: block;
-  max-width: 100px !important;
-  max-height: 180px;
-  object-fit: contain;
-  border-radius: 6px;
-  transition: opacity 0.2s;
-}
-
-.image-message__thumbnail:hover {
-  opacity: 0.9;
-}
-
-/* ============================================================================
-// 文件消息媒体卡片样式
-// ============================================================================ */
-.media-card {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  min-width: 160px;
-  max-width: 240px;
-}
-
-.media-card__icon {
-  font-size: 24px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.media-card__info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.media-card__label {
-  font-size: 14px;
-  color: var(--text-primary);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.media-card__name {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.media-card__size {
-  font-size: 11px;
-  color: var(--text-placeholder);
-}
-
-.media-card--link {
-  text-decoration: none;
-  color: inherit;
-}
-
-.media-card--link:hover {
-  background: var(--accent-soft);
-  border-color: var(--accent);
-}
-
-/* ============================================================================
-// 操作菜单
-// ============================================================================ */
-.context-menu {
-  position: fixed;
-  z-index: 1000;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.context-menu__item {
-  display: block;
-  width: 100%;
-  padding: 8px 16px;
-  border: none;
-  background: transparent;
-  text-align: left;
-  font-size: 14px;
-  color: var(--text-primary);
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.context-menu__item:hover {
-  background: var(--bg-tertiary);
-}
-
-.context-menu__item--danger {
-  color: #ee0a24;
-}
-
-.context-menu__overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999;
-}
-
-/* ============================================================================
-// 发送状态样式
-// ============================================================================ */
-.message-item--sending .message-item__content {
-  opacity: 0.6;
-}
-
-.message-item--failed .message-item__content {
-  border: 2px solid #ee0a24;
-}
-</style>
\ No newline at end of file
diff --git a/frontend-h5/src/stores/conversation.ts b/frontend-h5/src/stores/conversation.ts
index eebf8e9..765b0b3 100644
--- a/frontend-h5/src/stores/conversation.ts
+++ b/frontend-h5/src/stores/conversation.ts
@@ -150,12 +150,6 @@ export const useConversationStore = defineStore('conversation', () => {
   /** 审批流程链接列表 */
   const approvalLinks = ref<ApprovalLink[]>([])
 
-  /** 审批卡片弹窗是否显示（关键词触发） */
-  const approvalCardVisible = ref<boolean>(false)
-
-  /** 触发审批卡片的关键词文本 */
-  const approvalCardTriggerText = ref<string>('')
-
   /** 软件下载列表 */
   const softwareDownloads = ref<SoftwareDownload[]>([])
 
@@ -898,52 +892,10 @@ export const useConversationStore = defineStore('conversation', () => {
   // 结果通过 WS dynamic_recommend 推送到侧边栏 DynamicRecommend 组件
   // 前端不再独立调用 /approval/detect-intent 接口
 
-  /** 关闭审批卡片弹窗（兼容旧调用，新流程中审批卡片为内联消息，无需关闭） */
-  function closeApprovalCard(): void {
-    approvalCardVisible.value = false
-    approvalCardTriggerText.value = ''
-  }
-
-  // v4.0 P0-3: 缓存全量审批卡片（首次点击拉取，后续复用）
-  let _allCategoriesCardCache: any = null
-
-  /**
-   * 显示审批卡片（快捷按钮触发）
-   * v4.0 P0-3: 改为 async 拉取后端 /approval/all-categories-card，
-   *   修复旧版构造 {approval_type:'',confidence:0} 导致的空白气泡（F1）
-   *
-   * @param _triggerText 触发文本（可选，新流程中不再使用关键词匹配）
-   */
-  async function showApprovalCard(_triggerText: string = ''): Promise<void> {
-    // 首次拉取并缓存
-    if (!_allCategoriesCardCache) {
-      try {
-        const { getAllCategoriesCard } = await import('@/api/conversation')
-        _allCategoriesCardCache = await getAllCategoriesCard()
-      } catch (e) {
-        console.error('[Store] 拉取全量审批卡片失败:', e)
-        return
-      }
-    }
-
-    // 插入审批卡片消息（action.card_data 为后端标准化数据，前端纯渲染）
-    const approvalCardMessage: Message = {
-      message_id: `approval_card_${Date.now()}`,
-      conversation_id: currentConversation.value?.conversation_id || '',
-      message_type: 'system',
-      msg_type: 'approval_card',
-      content: '',
-      sender_name: '',
-      created_at: new Date().toISOString(),
-      extra_data: {
-        action: {
-          card_data: _allCategoriesCardCache,
-        },
-      },
-    }
-    messages.value.push(approvalCardMessage)
-    console.log('[Store] 手动插入审批卡片消息（快捷按钮触发，v4.0 全量卡片）')
-  }
+  // v4.0 P1-2：showApprovalCard/closeApprovalCard 已删除
+  // 原因：唯一调用方 InputBox.vue 是孤儿组件（已移除），
+  //   "快捷申请按钮"在当前产品中不存在（P0-3 误报确认）
+  // 后端 /approval/all-categories-card 端点保留备用
 
   /**
    * 加载软件下载列表
@@ -1714,8 +1666,6 @@ export const useConversationStore = defineStore('conversation', () => {
     agentOnline,
     assistantPanelVisible,
     approvalLinks,
-    approvalCardVisible,
-    approvalCardTriggerText,
     softwareDownloads,
     lastMessageId,
     initialized,
@@ -1745,8 +1695,7 @@ export const useConversationStore = defineStore('conversation', () => {
     shakeAgent,
     fetchApprovalLinks,
     // v2.0: checkApprovalIntent 已删除（审批意图识别统一由后端处理）
-    closeApprovalCard,
-    showApprovalCard,
+    // v4.0 P1-2: showApprovalCard/closeApprovalCard 已删除（孤儿组件 InputBox 的唯一调用方）
     fetchSoftwareDownloads,
     toggleAssistantPanel,
     switchToConversation,