wecom_it_smart_desk/frontend-h5/src/components/chat/InputBox.vue

<!-- =============================================================================
// 企微IT智能服务台 — H5用户端输入框组件
// =============================================================================
// 说明：底部输入框组件，包含：
//    - 输入框默认3行高度，自动扩展（max-height: 150px）
//    - 底部显示字数统计（当前/最大，如：120/500）
//    - 右下角发送按钮（icon）
//    - Enter键发送，Shift+Enter换行
//    - 空内容时禁用发送按钮
//    - 支持粘贴图片上传
//    - 支持图片/文件选择上传
// ============================================================================= -->

<template>
  <div class="input-box">
    <!-- 工具栏：表情/图片/文件/拍照/截图 -->
    <div class="input-box__toolbar">
      <button class="input-box__tool-btn" title="表情" @click="handleEmoji">
        <span>😊</span>
      </button>
      <button class="input-box__tool-btn" title="图片" @click="handleImage">
        <span>🖼️</span>
      </button>
      <button class="input-box__tool-btn" title="文件" @click="handleFile">
        <span>📎</span>
      </button>
      <button class="input-box__tool-btn" title="拍照" @click="handleCamera">
        <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">
      🔔 摇铃通道已开启，点击标题栏传菜铃呼叫 IT 坐席
    </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"
    />

    <!-- 隐藏的拍照输入框（移动端直接调用摄像头） -->
    <input
      ref="cameraInputRef"
      type="file"
      accept="image/*"
      capture="environment"
      style="display: none"
      @change="handleCameraCapture"
    />

    <!-- 截图区域选择编辑器 -->
    <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 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)

/** 隐藏拍照输入框 DOM 引用 */
const cameraInputRef = ref<HTMLInputElement | null>(null)

/** 最大字符数 */
const maxChars = 500

/** textarea 高度 */
const textareaHeight = ref(60)

/** 是否显示表情面板 */
const showEmojiPanel = ref(false)

/** 截图编辑器是否可见 */
const showScreenshotEditor = 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 级别粘贴监听
// ============================================================================
async function handleDocPaste(event: ClipboardEvent): Promise<void> {
  const target = event.target as HTMLElement
  if (target.tagName === 'TEXTAREA' || target.isContentEditable) return

  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 handleImageUpload(file)
      } else {
        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)
}

// ============================================================================
// 文件上传
// ============================================================================
async function handlePaste(event: ClipboardEvent): Promise<void> {
  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 handleImageUpload(file)
      } else {
        await handleFileUpload(file)
      }
      return
    }
  }
}

async function handleImageUpload(file: File | Blob): Promise<void> {
  try {
    showToast('图片上传中...')
    const result = await uploadFile(file)
    const fileName = file instanceof File ? file.name : '截图'
    await store.sendNewMessage(`[图片] ${fileName}`, {
      msg_type: 'image',
      media_url: result.url,
      file_name: result.filename,
      file_size: result.file_size,
    })
    showToast('图片发送成功')
  } catch (error: any) {
    console.error('图片上传失败:', error)
    showToast(
      formatErrorDetail(error?.response?.data?.detail) ||
      error?.message ||
      '图片上传失败，请重试'
    )
  }
}

async function handleFileUpload(file: File | Blob): Promise<void> {
  try {
    const fileName = file instanceof File ? file.name : '文件'
    showToast(`文件上传中: ${fileName}`)
    const result = await uploadFile(file)
    await store.sendNewMessage(`[文件] ${result.filename}`, {
      msg_type: 'file',
      media_url: result.url,
      file_name: result.filename,
      file_size: result.file_size,
    })
    showToast('文件发送成功')
  } catch (error: any) {
    console.error('文件上传失败:', 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 = ''
}

function handleImage(): void {
  if (fileInputRef.value) {
    fileInputRef.value.accept = 'image/*'
    fileInputRef.value.multiple = true
    fileInputRef.value.click()
  }
}

function handleFile(): void {
  if (fileInputRef.value) {
    fileInputRef.value.accept = ''
    fileInputRef.value.multiple = true
    fileInputRef.value.click()
  }
}

function handleCamera(): void {
  if (cameraInputRef.value) {
    cameraInputRef.value.value = ''
    cameraInputRef.value.click()
  }
}

async function handleCameraCapture(event: Event): Promise<void> {
  const input = event.target as HTMLInputElement
  const files = input.files
  if (!files || files.length === 0) return

  const file = files[0]
  if (file.type.startsWith('image/')) {
    await handleImageUpload(file)
  }

  input.value = ''
}

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
}

// ============================================================================
// 快捷申请按钮
// ============================================================================
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__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>