feat: 优化聊天附件拖拽上传提示

- 不支持格式改用轻量提示并展示支持范围 - 扩展拖拽区域并增加全区上传覆盖层 - 补充文档和图片格式校验测试
2026-07-31 09:19:11 +08:00
parent 2267517fd8
commit 0b764b79de
7 changed files with 242 additions and 67 deletions
--- a/easyflow-ui-admin/app/src/views/ai/agent-chat/index.vue
+++ b/easyflow-ui-admin/app/src/views/ai/agent-chat/index.vue
@@ -19,6 +19,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

 import {
+  CHAT_DOCUMENT_SUPPORTED_FORMATS,
  ChatDocumentAttachments,
  ChatImageAttachments,
  ChatTimeline,
@@ -33,6 +34,7 @@ import {
  Paperclip,
  Plus,
  Promotion,
+  UploadFilled,
 } from '@element-plus/icons-vue';
 import {
  ElButton,
@@ -52,6 +54,7 @@ import {
  loadAgentChatImage,
 } from '#/components/ai-chat/mediaApi';
 import { useAgentComposerDraft } from '#/components/ai-chat/useAgentComposerDraft';
+import { CHAT_IMAGE_SUPPORTED_FORMATS } from '#/components/ai-chat/useChatImageUploads';
 import ChatCapabilityMenu from '#/components/chat-workspace/ChatCapabilityMenu.vue';
 import ChatInputTriggerPanel from '#/components/chat-workspace/ChatInputTriggerPanel.vue';
 import { useChatInputTrigger } from '#/components/chat-workspace/input-triggers/useChatInputTrigger';
@@ -114,6 +117,11 @@ const selectedAgentImageSupport = computed(() =>
    selectedAgent.value?.publishedSnapshotJson?.modelSummary?.supportImage,
  ),
 );
+const supportedAttachmentFormats = computed(() =>
+  selectedAgentImageSupport.value === false
+    ? CHAT_DOCUMENT_SUPPORTED_FORMATS
+    : `${CHAT_DOCUMENT_SUPPORTED_FORMATS}；图片支持 ${CHAT_IMAGE_SUPPORTED_FORMATS}`,
+);
 const interactionDisplay = computed(() =>
  resolveInteractionDisplay(selectedAgent.value),
 );
@@ -747,17 +755,29 @@ async function addImageFiles(files: File[]) {
    return;
  }
  if (selectedAgentImageSupport.value === false) {
-    ElMessage.warning('当前智能体不支持图片');
+    ElMessage.warning({
+      grouping: true,
+      message: `当前智能体不支持图片，支持：${CHAT_DOCUMENT_SUPPORTED_FORMATS}`,
+    });
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.images.addFiles(files, {
-    agentId: selectedAgentId.value,
-    mode: 'FORMAL',
-    sessionId: composer.sessionId.value,
-  });
+  const { rejectedCount, unsupportedCount } = await composer.images.addFiles(
+    files,
+    {
+      agentId: selectedAgentId.value,
+      mode: 'FORMAL',
+      sessionId: composer.sessionId.value,
+    },
+  );
  composer.scheduleSave();
-  if (rejected > 0) {
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该图片格式，支持：${CHAT_IMAGE_SUPPORTED_FORMATS}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每次最多添加 5 张图片');
  }
 }
@@ -768,22 +788,38 @@ async function addDocumentFiles(files: File[]) {
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.documents.addFiles(files, {
-    agentId: selectedAgentId.value,
-    mode: 'FORMAL',
-    sessionId: composer.sessionId.value,
-  });
+  const { rejectedCount, unsupportedCount } = await composer.documents.addFiles(
+    files,
+    {
+      agentId: selectedAgentId.value,
+      mode: 'FORMAL',
+      sessionId: composer.sessionId.value,
+    },
+  );
  composer.scheduleSave();
-  if (rejected > 0) {
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该文件格式，支持：${supportedAttachmentFormats.value}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每轮最多添加 3 份文档');
  }
 }

+function isImageAttachmentFile(file: File) {
+  return (
+    file.type.startsWith('image/') ||
+    /\.(?:bmp|gif|jpe?g|png|webp)$/i.test(file.name)
+  );
+}
+
 function handleAttachmentFiles(event: Event) {
  const target = event.target as HTMLInputElement;
  const files = [...(target.files || [])];
-  const imageFiles = files.filter((file) => file.type.startsWith('image/'));
-  const documentFiles = files.filter((file) => !file.type.startsWith('image/'));
+  const imageFiles = files.filter((file) => isImageAttachmentFile(file));
+  const documentFiles = files.filter((file) => !isImageAttachmentFile(file));
  if (imageFiles.length > 0) void addImageFiles(imageFiles);
  if (documentFiles.length > 0) void addDocumentFiles(documentFiles);
  target.value = '';
@@ -810,6 +846,13 @@ function handleAttachmentDragEnter(event: DragEvent) {
  }
 }

+function handleAttachmentDragOver(event: DragEvent) {
+  handleAttachmentDragEnter(event);
+  if (composerDragActive.value && event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'copy';
+  }
+}
+
 function handleAttachmentDragLeave(event: DragEvent) {
  const container = event.currentTarget as HTMLElement;
  if (
@@ -824,17 +867,8 @@ function handleAttachmentDrop(event: DragEvent) {
  composerDragActive.value = false;
  if (capabilityDisabled.value) return;
  const files = [...(event.dataTransfer?.files || [])];
-  const imageFiles = files.filter(
-    (file) =>
-      file.type.startsWith('image/') &&
-      selectedAgentImageSupport.value !== false &&
-      composer.images.items.value.length < 5,
-  );
-  const documentFiles = files.filter(
-    (file) =>
-      !file.type.startsWith('image/') &&
-      composer.documents.items.value.length < 3,
-  );
+  const imageFiles = files.filter((file) => isImageAttachmentFile(file));
+  const documentFiles = files.filter((file) => !isImageAttachmentFile(file));
  if (imageFiles.length > 0) void addImageFiles(imageFiles);
  if (documentFiles.length > 0) void addDocumentFiles(documentFiles);
 }
@@ -1151,7 +1185,13 @@ onBeforeUnmount(() => {
      </div>
    </aside>

-    <main class="agent-chat__main">
+    <main
+      class="agent-chat__main"
+      @dragenter.prevent="handleAttachmentDragEnter"
+      @dragover.prevent="handleAttachmentDragOver"
+      @dragleave.prevent="handleAttachmentDragLeave"
+      @drop.prevent="handleAttachmentDrop"
+    >
      <header class="agent-chat__main-head">
        <div>
          <div class="agent-chat__main-title">
@@ -1214,14 +1254,7 @@ onBeforeUnmount(() => {
        />
      </div>

-      <div
-        class="agent-chat__composer"
-        :class="{ 'is-dragging': composerDragActive }"
-        @dragenter.prevent="handleAttachmentDragEnter"
-        @dragover.prevent
-        @dragleave.prevent="handleAttachmentDragLeave"
-        @drop.prevent="handleAttachmentDrop"
-      >
+      <div class="agent-chat__composer">
        <ChatCapabilityMenu
          :disabled="capabilityDisabled"
          :extra-knowledge-ids="extraKnowledgeIds"
@@ -1353,6 +1386,24 @@ onBeforeUnmount(() => {
          </div>
        </div>
      </div>
+      <Transition name="agent-chat-drag-fade">
+        <div
+          v-if="composerDragActive"
+          class="agent-chat__drop-overlay"
+          role="status"
+          aria-live="polite"
+        >
+          <div class="agent-chat__drop-overlay-content">
+            <ElIcon class="agent-chat__drop-overlay-icon">
+              <UploadFilled />
+            </ElIcon>
+            <div class="agent-chat__drop-overlay-title">松手上传文件</div>
+            <div class="agent-chat__drop-overlay-formats">
+              支持 {{ supportedAttachmentFormats }}
+            </div>
+          </div>
+        </div>
+      </Transition>
    </main>
  </section>
 </template>
@@ -1526,9 +1577,53 @@ onBeforeUnmount(() => {
  box-shadow: var(--el-box-shadow-light);
 }

-.agent-chat__composer.is-dragging {
+.agent-chat__drop-overlay {
+  position: absolute;
+  inset: 16px;
+  z-index: 20;
+  display: grid;
+  pointer-events: none;
  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary-light-5);
+  border: 2px dashed var(--el-color-primary-light-5);
+  border-radius: 16px;
+  place-items: center;
+}
+
+.agent-chat__drop-overlay-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  max-width: min(560px, calc(100% - 48px));
+  padding: 24px;
+  text-align: center;
+}
+
+.agent-chat__drop-overlay-icon {
+  font-size: 40px;
+  color: var(--el-color-primary);
+}
+
+.agent-chat__drop-overlay-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.agent-chat__drop-overlay-formats {
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--el-text-color-secondary);
+}
+
+.agent-chat-drag-fade-enter-active,
+.agent-chat-drag-fade-leave-active {
+  transition: opacity 160ms ease;
+}
+
+.agent-chat-drag-fade-enter-from,
+.agent-chat-drag-fade-leave-to {
+  opacity: 0;
 }

 .agent-chat__trigger-panel {
--- a/easyflow-ui-admin/app/src/views/ai/agents/components/AgentTryoutPanel.vue
+++ b/easyflow-ui-admin/app/src/views/ai/agents/components/AgentTryoutPanel.vue
@@ -14,7 +14,10 @@ import type {

 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';

-import { ChatTimeline } from '@easyflow/common-ui';
+import {
+  CHAT_DOCUMENT_SUPPORTED_FORMATS,
+  ChatTimeline,
+} from '@easyflow/common-ui';
 import { BrushCleaning } from '@easyflow/icons';
 import { copyTextToClipboard } from '@easyflow/utils';

@@ -26,6 +29,7 @@ import {
  loadAgentChatImage,
 } from '#/components/ai-chat/mediaApi';
 import { useAgentComposerDraft } from '#/components/ai-chat/useAgentComposerDraft';
+import { CHAT_IMAGE_SUPPORTED_FORMATS } from '#/components/ai-chat/useChatImageUploads';

 import { approveAgentRun, rejectAgentRun } from '../api';
 import { useAgentTryoutStream } from '../composables/useAgentTryoutStream';
@@ -214,12 +218,21 @@ async function handleAddImageFiles(files: File[]) {
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.images.addFiles(files, {
-    agentId: String(props.agent.id),
-    mode: 'DRAFT',
-    sessionId: composer.sessionId.value,
-  });
-  if (rejected > 0) {
+  const { rejectedCount, unsupportedCount } = await composer.images.addFiles(
+    files,
+    {
+      agentId: String(props.agent.id),
+      mode: 'DRAFT',
+      sessionId: composer.sessionId.value,
+    },
+  );
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该图片格式，支持：${CHAT_IMAGE_SUPPORTED_FORMATS}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每次最多添加 5 张图片');
  }
  composer.scheduleSave();
@@ -231,12 +244,21 @@ async function handleAddDocumentFiles(files: File[]) {
    return;
  }
  await composer.ensureSession();
-  const rejected = await composer.documents.addFiles(files, {
-    agentId: String(props.agent.id),
-    mode: 'DRAFT',
-    sessionId: composer.sessionId.value,
-  });
-  if (rejected > 0) {
+  const { rejectedCount, unsupportedCount } = await composer.documents.addFiles(
+    files,
+    {
+      agentId: String(props.agent.id),
+      mode: 'DRAFT',
+      sessionId: composer.sessionId.value,
+    },
+  );
+  if (unsupportedCount > 0) {
+    ElMessage.warning({
+      grouping: true,
+      message: `不支持该文件格式，支持：${CHAT_DOCUMENT_SUPPORTED_FORMATS}`,
+    });
+  }
+  if (rejectedCount > 0) {
    ElMessage.warning('每轮最多添加 3 份文档');
  }
  composer.scheduleSave();