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/MessageFiles.vue | 66 +++++++++++++++++++++++++++++++++
1 files changed, 66 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/chat/index/components/message/MessageFiles.vue b/src/views/ai/chat/index/components/message/MessageFiles.vue
new file mode 100644
index 0000000..71969f1
--- /dev/null
+++ b/src/views/ai/chat/index/components/message/MessageFiles.vue
@@ -0,0 +1,66 @@
+<template>
+ <div v-if="attachmentUrls && attachmentUrls.length > 0" class="mt-2">
+ <div class="flex flex-wrap gap-2">
+ <div
+ v-for="(url, index) in attachmentUrls"
+ :key="index"
+ class="flex items-center p-3 bg-gray-1 rounded-2 cursor-pointer transition-all duration-200 min-w-40 max-w-70 border border-transparent hover:(bg-gray-2 -translate-y-1 shadow-lg)"
+ @click="handleFileClick(url)"
+ >
+ <div class="mr-3 flex-shrink-0">
+ <div
+ class="flex items-center justify-center w-8 h-8 rounded-1.5 text-white font-bold"
+ :class="getFileTypeClass(getFileNameFromUrl(url))"
+ >
+ <Icon :icon="getFileIcon(getFileNameFromUrl(url))" :size="20" />
+ </div>
+ </div>
+ <div class="flex-1 min-w-0">
+ <div
+ class="text-sm font-medium text-gray-8 leading-tight mb-1 overflow-hidden text-ellipsis whitespace-nowrap"
+ :title="getFileNameFromUrl(url)"
+ >
+ {{ getFileNameFromUrl(url) }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { getFileIcon, getFileNameFromUrl, isImage } from '@/utils/file'
+
+defineOptions({ name: 'MessageFiles' })
+
+defineProps<{
+ attachmentUrls?: string[]
+}>()
+
+/** 鑾峰彇鏂囦欢绫诲瀷鏍峰紡绫� */
+const getFileTypeClass = (filename: string): string => {
+ const ext = filename.split('.').pop()?.toLowerCase() || ''
+ if (isImage(ext)) {
+ return 'bg-gradient-to-br from-yellow-4 to-orange-5'
+ } else if (['pdf'].includes(ext)) {
+ return 'bg-gradient-to-br from-red-5 to-red-7'
+ } else if (['doc', 'docx'].includes(ext)) {
+ return 'bg-gradient-to-br from-blue-6 to-blue-8'
+ } else if (['xls', 'xlsx'].includes(ext)) {
+ return 'bg-gradient-to-br from-green-6 to-green-8'
+ } else if (['ppt', 'pptx'].includes(ext)) {
+ return 'bg-gradient-to-br from-orange-6 to-orange-8'
+ } else if (['mp3', 'wav', 'm4a', 'aac'].includes(ext)) {
+ return 'bg-gradient-to-br from-purple-5 to-purple-7'
+ } else if (['mp4', 'avi', 'mov', 'wmv'].includes(ext)) {
+ return 'bg-gradient-to-br from-red-5 to-red-7'
+ } else {
+ return 'bg-gradient-to-br from-gray-5 to-gray-7'
+ }
+}
+
+/** 鐐瑰嚮鏂囦欢 */
+const handleFileClick = (url: string) => {
+ window.open(url, '_blank')
+}
+</script>
--
Gitblit v1.8.0