feat(ai): 创意助手各页下线参考素材上传,图片模式改传 mode(issue 19)

- 聊天页「图片」模式与独立创意助手页都删掉上传入口、上传状态与相关样式;
  上游出图工具只做文生图,开始节点的 file-list 变量没有任何节点消费(issue 16)。
- 图片模式请求体改为 { user_content, mode: 'image' },由后端包装意图声明;
  独立页不传 mode(通用入口,视频/脚本/图片靠用户文字说明)。
- CreativeAssistantRequest 增加 mode 字段,user_files 保留待上游补齐后回退。
This commit is contained in:
2026-10-21 15:42:58 +08:00
parent 00e0e70e85
commit 038e789cb0
3 changed files with 41 additions and 411 deletions
+21 -199
View File
@@ -30,40 +30,6 @@
placeholder="请输入用户的文本指令或需求描述,例如:根据活动照片和通知文档,生成一条公众号推文封面及 60 秒短视频脚本。"
/>
</a-form-item>
<a-form-item label="上传附件">
<a-upload
:multiple="true"
:show-upload-list="false"
:accept="acceptTypes"
:customRequest="handleUpload"
>
<a-button>
<template #icon>
<UploadOutlined />
</template>
添加附件
</a-button>
</a-upload>
<div class="upload-tip">
支持图片、视频、文档、音频。
</div>
<div v-if="uploadedFiles.length" class="file-list">
<div
v-for="(item, index) in uploadedFiles"
:key="`${item.url || item.path || item.name}-${index}`"
class="file-item"
>
<div class="file-main">
<div class="file-badge">{{ getFileTypeLabel(item) }}</div>
<div class="file-text">
<div class="file-name">{{ item.name || getFileName(item) }}</div>
<div class="file-url">{{ resolveFileUrl(item) || '-' }}</div>
</div>
</div>
<a class="file-remove" @click="removeUploadedFile(index)">移除</a>
</div>
</div>
</a-form-item>
</a-form>
<div class="submit-bar">
@@ -97,11 +63,11 @@
则「已执行但失败 / 未识别到输出」时 hasAnyResult 为假,
会落回这个空状态,把下方 result-body 里的 status-alert
(失败文案 / 兜底文案)整个盖住 —— 用户看到的仍是
「填写文本指令并上传附件后执行工作流」,等于什么都没发生(见 issue 10)。
「填写文本指令后执行工作流」,等于什么都没发生(见 issue 10)。
-->
<a-empty
v-if="!loading && !hasAnyResult && !workflowResponse"
description="填写文本指令并上传附件后执行工作流"
description="填写文本指令后执行工作流"
/>
<div v-else class="result-body">
@@ -222,10 +188,8 @@
import 'highlight.js/styles/default.css';
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { messageLoading } from 'ele-admin-pro';
import ByteMdViewer from '@/components/ByteMdViewer/index.vue';
import { creativeAssistant, uploadAiFile } from '@/api/ai/creativeAssistant';
import { creativeAssistant } from '@/api/ai/creativeAssistant';
import type { FileRecord } from '@/api/system/file/model';
import type {
CreativeAssistantOutputs,
@@ -236,8 +200,6 @@
type ExampleType = 'video' | 'script' | 'image';
const acceptTypes =
'image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.md';
const plugins = ref([
gfm({
locale: zh_HansGfm
@@ -247,12 +209,11 @@
const loading = ref(false);
const content = ref('');
const uploadedFiles = ref<Partial<FileRecord>[]>([]);
const workflowResponse = ref<CreativeAssistantResponse | null>(null);
const workflowOutputs = ref<CreativeAssistantOutputs | null>(null);
const canSubmit = computed(() => {
return !!content.value.trim() || uploadedFiles.value.length > 0;
return !!content.value.trim();
});
const videoFiles = computed(() => workflowOutputs.value?.video_result || []);
@@ -316,12 +277,6 @@
return 'default';
});
const loadingTitle = computed(() => {
if (uploadedFiles.value.length && content.value.trim()) {
return '正在分析指令并处理附件';
}
if (uploadedFiles.value.length) {
return '正在解析附件并生成结果';
}
return '正在根据文本指令生成内容';
});
const loadingDescription = computed(() => {
@@ -375,25 +330,6 @@
return name.split('.').pop() || '';
};
const DOCUMENT_FILE_EXTS = new Set([
'TXT',
'MD',
'MARKDOWN',
'PDF',
'HTML',
'XLSX',
'XLS',
'DOCX',
'CSV',
'EML',
'MSG',
'PPTX',
'PPT',
'XML',
'EPUB'
]);
const AUDIO_FILE_EXTS = new Set(['MP3', 'M4A', 'WAV', 'WEBM', 'AMR']);
const VIDEO_FILE_EXTS = new Set(['MP4', 'MOV', 'MPEG', 'MPGA']);
const isImageFile = (file?: Partial<FileRecord> | null) => {
const contentType = String(file?.contentType || '').toLowerCase();
@@ -419,26 +355,6 @@
return ['mp3', 'wav', 'aac', 'm4a', 'ogg'].includes(getFileExt(file));
};
const getUploadFileType = (
file?: Partial<FileRecord> | null
): 'image' | 'document' | 'audio' | 'video' => {
const contentType = String(file?.contentType || '').toLowerCase();
const ext = getFileExt(file).toUpperCase();
if (contentType.startsWith('image/')) {
return 'image';
}
if (AUDIO_FILE_EXTS.has(ext)) {
return 'audio';
}
if (VIDEO_FILE_EXTS.has(ext)) {
return 'video';
}
if (DOCUMENT_FILE_EXTS.has(ext)) {
return 'document';
}
return 'document';
};
const getFileTypeLabel = (file?: Partial<FileRecord> | null) => {
if (isImageFile(file)) {
return '图片';
@@ -459,70 +375,31 @@
const resetAll = () => {
content.value = '';
uploadedFiles.value = [];
clearResult();
};
const removeUploadedFile = (index: number) => {
uploadedFiles.value = uploadedFiles.value.filter((_, current) => current !== index);
};
const handleUpload = async (options: any) => {
const rawFile = options.file as File;
if (rawFile.size / 1024 / 1024 > 100) {
message.error('单个附件不能超过 100MB');
options.onError?.(new Error('文件过大'));
return;
}
const hide = messageLoading({
content: '上传中..',
duration: 0,
mask: true
});
try {
// 必须用创意助手自己的应用凭证上传:Dify 的 /files/upload 按应用鉴权,
// 用别的应用的 Key 上传,工作流的 file-list 变量会报 Invalid upload file。
const result = await uploadAiFile(rawFile, 'creativeAssistant');
uploadedFiles.value = [
...uploadedFiles.value,
{
id: result.id,
name: result.name || rawFile.name,
path: result.path,
url: result.url,
downloadUrl: result.downloadUrl,
contentType: result.contentType
}
];
options.onSuccess?.(result);
message.success('附件上传成功');
} catch (e: any) {
message.error(e.message || '上传失败');
options.onError?.(e);
} finally {
hide();
}
};
/**
* 请求体。
*
* <p>附件已下线:上游出图工具只做文生图,开始节点的 file-list 变量没有任何节点消费
* (见 issue 16),继续传只是让用户白等上传。
*
* <p>不传 {@code mode}:这个页面是通用的创意助手入口,用户可能写视频、脚本或图片需求,
* 由用户的文字自己说明意图;只有聊天页「图片」模式这类**用户显式选了功能**的地方
* 才传 {@code mode=image} 让后端包装提示词(见 issue 19)。
*/
const buildRequestPayload = () => {
const payload: any = {
user_content: content.value.trim(),
user_contentString: content.value.trim()
const value = content.value.trim();
return {
user_content: value,
user_contentString: value
};
if (uploadedFiles.value.length) {
payload.user_files = uploadedFiles.value.map((item) => ({
transfer_method: 'local_file',
type: getUploadFileType(item),
upload_file_id: item.id,
url: ''
}));
}
return payload;
};
const runWorkflow = async () => {
if (!canSubmit.value) {
message.warning('请先输入文本指令或上传附件');
message.warning('请先输入文本指令');
return;
}
loading.value = true;
@@ -557,7 +434,7 @@
const fillExample = (type: ExampleType) => {
if (type === 'video') {
content.value =
'请根据我上传的活动照片和通知文档,生成一条 45 秒校园活动宣传短视频,画面节奏明快,配一段适合配音的解说文案,并输出视频结果。';
'以「青年志愿者进社区」为主题,生成一条 45 秒校园活动宣传短视频,画面节奏明快,配一段适合配音的解说文案,并输出视频结果。';
return;
}
if (type === 'script') {
@@ -566,7 +443,7 @@
return;
}
content.value =
'请根据上传的活动照片、LOGO 和文案素材,生成一套公众号头图与活动海报排版,风格青春、明亮,输出图片文件。';
'以「毕业季」为主题,生成一套公众号头图与活动海报排版,风格青春、明亮,输出图片文件。';
};
</script>
@@ -645,38 +522,6 @@
gap: 8px;
}
.upload-tip {
margin-top: 10px;
color: #88715f;
font-size: 12px;
line-height: 1.7;
}
.file-list {
margin-top: 14px;
display: grid;
gap: 10px;
}
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: #faf5ef;
border: 1px solid #c7e8ff;
}
.file-main {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.file-badge {
flex-shrink: 0;
min-width: 48px;
@@ -689,35 +534,12 @@
font-weight: 600;
}
.file-text {
flex: 1;
min-width: 0;
}
.file-name,
.file-url,
.result-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-name {
color: #3b2c20;
font-weight: 600;
}
.file-url {
margin-top: 4px;
color: #8c7462;
font-size: 12px;
}
.file-remove {
flex-shrink: 0;
color: #ff4d4f;
}
.submit-bar {
display: flex;
justify-content: flex-end;