P2-1(部分): 删除孤儿组件 InputBox.vue/MessageItem.vue + store死代码 showApprovalCard/closeApprovalCard/approvalCardVisible（P0-3误报确认，组件备份于.workbuddy/tmp/orphan-backup）
This commit is contained in:
Simon
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user