From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/ai/chat/index/components/message/MessageFileUpload.vue | 394 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 394 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/chat/index/components/message/MessageFileUpload.vue b/src/views/ai/chat/index/components/message/MessageFileUpload.vue
new file mode 100644
index 0000000..8d7dc0f
--- /dev/null
+++ b/src/views/ai/chat/index/components/message/MessageFileUpload.vue
@@ -0,0 +1,394 @@
+<template>
+ <div
+ class="relative inline-block"
+ @mouseenter="showTooltipHandler"
+ @mouseleave="hideTooltipHandler"
+ >
+ <!-- 鏂囦欢涓婁紶鎸夐挳 -->
+ <el-button
+ v-if="!disabled"
+ circle
+ size="small"
+ class="upload-btn relative transition-all-200ms"
+ :class="{ 'has-files': fileList.length > 0 }"
+ @click="triggerFileInput"
+ :disabled="fileList.length >= limit"
+ >
+ <Icon icon="ep:paperclip" :size="16" />
+ <!-- 鏂囦欢鏁伴噺寰界珷 -->
+ <span
+ v-if="fileList.length > 0"
+ class="absolute -top-1 -right-1 bg-red-500 text-white text-10px px-1 rounded-8px min-w-4 h-4 flex items-center justify-center leading-none font-medium"
+ >
+ {{ fileList.length }}
+ </span>
+ </el-button>
+
+ <!-- 闅愯棌鐨勬枃浠惰緭鍏ユ -->
+ <input
+ ref="fileInputRef"
+ type="file"
+ multiple
+ style="display: none"
+ :accept="acceptTypes"
+ @change="handleFileSelect"
+ />
+
+ <!-- Hover 鏄剧ず鐨勬枃浠跺垪琛� -->
+ <div
+ v-if="fileList.length > 0 && showTooltip"
+ class="file-tooltip"
+ @mouseenter="showTooltipHandler"
+ @mouseleave="hideTooltipHandler"
+ >
+ <div class="tooltip-arrow"></div>
+ <div class="max-h-200px overflow-y-auto file-list">
+ <div
+ v-for="(file, index) in fileList"
+ :key="index"
+ class="flex items-center justify-between p-2 mb-1 bg-gray-50 rounded-6px text-12px transition-all-200ms last:mb-0 hover:bg-gray-100"
+ :class="{ 'opacity-70': file.uploading }"
+ >
+ <div class="flex items-center flex-1 min-w-0">
+ <Icon :icon="getFileIcon(file.name)" class="text-blue-500 mr-2 flex-shrink-0" />
+ <span
+ class="font-medium text-gray-900 mr-1 overflow-hidden text-ellipsis whitespace-nowrap flex-1"
+ >{{ file.name }}</span
+ >
+ <span class="text-gray-500 flex-shrink-0 text-11px"
+ >({{ formatFileSize(file.size) }})</span
+ >
+ </div>
+ <div class="flex items-center gap-1 flex-shrink-0 ml-2">
+ <el-progress
+ v-if="file.uploading"
+ :percentage="file.progress || 0"
+ :show-text="false"
+ size="small"
+ class="w-60px"
+ />
+ <el-button
+ v-else-if="!disabled"
+ link
+ type="danger"
+ size="small"
+ @click="removeFile(index)"
+ >
+ <Icon icon="ep:close" :size="12" />
+ </el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { formatFileSize, getFileIcon } from '@/utils/file'
+
+export interface FileItem {
+ name: string
+ size: number
+ url?: string
+ uploading?: boolean
+ progress?: number
+ raw?: File
+}
+
+defineOptions({ name: 'MessageFileUpload' })
+
+const props = defineProps({
+ modelValue: {
+ type: Array as PropType<string[]>,
+ default: () => []
+ },
+ limit: {
+ type: Number,
+ default: 5
+ },
+ maxSize: {
+ type: Number,
+ default: 10 // MB
+ },
+ acceptTypes: {
+ type: String,
+ default: '.jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx,.csv,.md'
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ }
+})
+
+const emit = defineEmits(['update:modelValue', 'upload-success', 'upload-error'])
+
+const fileInputRef = ref<HTMLInputElement>()
+const fileList = ref<FileItem[]>([]) // 鍐呴儴绠＄悊鏂囦欢鍒楄〃
+const uploadedUrls = ref<string[]>([]) // 宸蹭笂浼犵殑 URL 鍒楄〃
+const showTooltip = ref(false) // 鎺у埗 tooltip 鏄剧ず
+const hideTimer = ref<NodeJS.Timeout | null>(null) // 闅愯棌寤惰繜瀹氭椂鍣�
+const message = useMessage()
+const { httpRequest } = useUpload()
+
+/** 鐩戝惉 v-model 鍙樺寲 */
+watch(
+ () => props.modelValue,
+ (newVal) => {
+ uploadedUrls.value = [...newVal]
+ // 濡傛灉澶栭儴娓呯┖浜� URLs锛屼篃娓呯┖鍐呴儴鏂囦欢鍒楄〃
+ if (newVal.length === 0) {
+ fileList.value = []
+ }
+ },
+ { immediate: true, deep: true }
+)
+
+/** 瑙﹀彂鏂囦欢閫夋嫨 */
+const triggerFileInput = () => {
+ fileInputRef.value?.click()
+}
+
+/** 鏄剧ず tooltip */
+const showTooltipHandler = () => {
+ if (hideTimer.value) {
+ clearTimeout(hideTimer.value)
+ hideTimer.value = null
+ }
+ showTooltip.value = true
+}
+
+/** 闅愯棌 tooltip */
+const hideTooltipHandler = () => {
+ hideTimer.value = setTimeout(() => {
+ showTooltip.value = false
+ hideTimer.value = null
+ }, 300) // 300ms 寤惰繜闅愯棌
+}
+
+/** 澶勭悊鏂囦欢閫夋嫨 */
+const handleFileSelect = (event: Event) => {
+ const target = event.target as HTMLInputElement
+ const files = Array.from(target.files || [])
+ if (files.length === 0) {
+ return
+ }
+ // 妫�鏌ユ�绘枃浠舵暟鏄惁瓒呰繃闄愬埗
+ if (files.length + fileList.value.length > props.limit) {
+ message.error(`鏈�澶氬彧鑳戒笂浼� ${props.limit} 涓枃浠禶)
+ target.value = '' // 娓呯┖杈撳叆
+ return
+ }
+ // 澶勭悊姣忎釜鏂囦欢
+ files.forEach((file) => {
+ if (file.size > props.maxSize * 1024 * 1024) {
+ message.error(`鏂囦欢 ${file.name} 澶у皬瓒呰繃 ${props.maxSize}MB`)
+ return
+ }
+ const fileItem: FileItem = {
+ name: file.name,
+ size: file.size,
+ uploading: true,
+ progress: 0,
+ raw: file
+ }
+ fileList.value.push(fileItem)
+ // 绔嬪嵆寮�濮嬩笂浼�
+ uploadFile(fileItem)
+ })
+
+ // 娓呯┖ input 鍊硷紝鍏佽閲嶅閫夋嫨鐩稿悓鏂囦欢
+ target.value = ''
+}
+
+/** 涓婁紶鏂囦欢 */
+const uploadFile = async (fileItem: FileItem) => {
+ try {
+ // 妯℃嫙涓婁紶杩涘害
+ const progressInterval = setInterval(() => {
+ if (fileItem.progress! < 90) {
+ fileItem.progress = (fileItem.progress || 0) + Math.random() * 10
+ }
+ }, 100)
+
+ // 璋冪敤涓婁紶鎺ュ彛
+ // const formData = new FormData()
+ // formData.append('file', fileItem.raw!)
+ const response = await httpRequest({
+ file: fileItem.raw!,
+ filename: fileItem.name
+ } as any)
+ fileItem.uploading = false
+ fileItem.progress = 100
+ fileItem.url = (response as any).data
+ // 娣诲姞鍒� URL 鍒楄〃
+ uploadedUrls.value.push(fileItem.url!)
+
+ clearInterval(progressInterval)
+
+ emit('upload-success', fileItem)
+ updateModelValue()
+ } catch (error) {
+ fileItem.uploading = false
+ message.error(`鏂囦欢 ${fileItem.name} 涓婁紶澶辫触`)
+ emit('upload-error', error)
+
+ // 绉婚櫎涓婁紶澶辫触鐨勬枃浠�
+ const index = fileList.value.indexOf(fileItem)
+ if (index > -1) {
+ removeFile(index)
+ }
+ }
+}
+
+/** 鍒犻櫎鏂囦欢 */
+const removeFile = (index: number) => {
+ // 浠� URL 鍒楄〃涓Щ闄�
+ const removedFile = fileList.value[index]
+ fileList.value.splice(index, 1)
+ if (removedFile.url) {
+ const urlIndex = uploadedUrls.value.indexOf(removedFile.url)
+ if (urlIndex > -1) {
+ uploadedUrls.value.splice(urlIndex, 1)
+ }
+ }
+
+ updateModelValue()
+}
+
+/** 鏇存柊 v-model */
+const updateModelValue = () => {
+ emit('update:modelValue', [...uploadedUrls.value])
+}
+
+// 鏆撮湶鏂规硶
+defineExpose({
+ triggerFileInput,
+ clearFiles: () => {
+ fileList.value = []
+ uploadedUrls.value = []
+ updateModelValue()
+ }
+})
+
+// 缁勪欢閿�姣佹椂娓呯悊瀹氭椂鍣�
+onUnmounted(() => {
+ if (hideTimer.value) {
+ clearTimeout(hideTimer.value)
+ }
+})
+</script>
+
+<style scoped>
+/* 涓婁紶鎸夐挳鏍峰紡 */
+.upload-btn {
+ --el-button-bg-color: transparent;
+ --el-button-border-color: transparent;
+ --el-button-hover-bg-color: var(--el-fill-color-light);
+ --el-button-hover-border-color: transparent;
+ color: var(--el-text-color-regular);
+}
+
+.upload-btn.has-files {
+ color: var(--el-color-primary);
+ --el-button-hover-bg-color: var(--el-color-primary-light-9);
+}
+
+.file-tooltip {
+ position: absolute;
+ bottom: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%);
+ background: white;
+ border: 1px solid var(--el-border-color-light);
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ z-index: 1000;
+ min-width: 240px;
+ max-width: 320px;
+ padding: 8px;
+ animation: fadeInDown 0.2s ease;
+}
+
+.tooltip-arrow {
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-top: 5px solid var(--el-border-color-light);
+}
+
+/* Tooltip 绠ご浼厓绱� */
+.tooltip-arrow::after {
+ content: '';
+ position: absolute;
+ bottom: 1px;
+ left: -4px;
+ width: 0;
+ height: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid white;
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translateX(-50%) translateY(4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+ }
+}
+
+/* 婊氬姩鏉℃牱寮� */
+.file-list::-webkit-scrollbar {
+ width: 4px;
+}
+
+.file-list::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.file-list::-webkit-scrollbar-thumb {
+ background: var(--el-border-color-light);
+ border-radius: 2px;
+}
+
+.file-list::-webkit-scrollbar-thumb:hover {
+ background: var(--el-border-color);
+}
+/* 婊氬姩鏉℃牱寮� */
+.file-list::-webkit-scrollbar {
+ width: 4px;
+}
+
+.file-list::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.file-list::-webkit-scrollbar-thumb {
+ background: var(--el-border-color-light);
+ border-radius: 2px;
+}
+
+.file-list::-webkit-scrollbar-thumb:hover {
+ background: var(--el-border-color);
+}
+</style>
--
Gitblit v1.8.0