From ce70f86000e603313c70ff4845539678e87dd3f7 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Fri, 22 May 2026 18:44:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=8E=E6=96=87=E4=BB=B6=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新预览弹窗，支持图片、视频和音频格式的展示。
- 添加 fileType 字段以支持不同文件类型的处理。
- 优化下载逻辑，根据文件类型自动设置默认扩展名，并在下载成功提示中显示文件类型。
---
 src/views/settings/creation/index.vue | 28 +++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/views/settings/creation/index.vue b/src/views/settings/creation/index.vue
index 0fa7390..ac4aef2 100644
--- a/src/views/settings/creation/index.vue
+++ b/src/views/settings/creation/index.vue
@@ -769,7 +769,10 @@
 		<!-- 预览弹窗 -->
 		<el-dialog v-model="previewDialogVisible" title="预览" width="95%" top="2vh" :close-on-click-modal="false" destroy-on-close>
 			<div class="preview-container">
-				<iframe v-if="previewUrl" :src="previewUrl" class="preview-iframe" frameborder="0"></iframe>
+				<el-image v-if="previewUrl && previewMode === 'image'" :src="previewUrl" fit="contain" style="width: 100%; height: 100%" />
+				<video v-else-if="previewUrl && previewMode === 'video'" :src="previewUrl" controls style="width: 100%; height: 100%; background: #000"></video>
+				<audio v-else-if="previewUrl && previewMode === 'audio'" :src="previewUrl" controls style="width: 100%"></audio>
+				<iframe v-else-if="previewUrl" :src="previewUrl" class="preview-iframe" frameborder="0"></iframe>
 				<el-empty v-else description="无法加载预览内容" />
 			</div>
 		</el-dialog>
@@ -820,6 +823,7 @@ interface TreeNode {
 	children?: TreeNode[];
 	fileUrl?: string;
 	workflowId?: number | string;
+	fileType?: string;
 	sessionId?: string;
 }
 interface SelectedState {
@@ -891,6 +895,7 @@ const isDraggingMiddleSplitter = ref(false);
 // 预览相关状态
 const previewDialogVisible = ref(false);
 const previewUrl = ref('');
+const previewMode = ref<'iframe' | 'image' | 'video' | 'audio'>('iframe');
 // 模型选择器相关状态
 const showModelSelector = ref(false);
 const selectedModelData = ref<any>(null);
@@ -1262,6 +1267,7 @@ const buildTreeNodes = (tree: ExecutionTreeItem[]): TreeNode[] =>
 				label: item.label || `作品${ii + 1}`,
 				nodeType: 'title',
 				fileUrl: item.content,
+				fileType: item.type,
 				workflowId: f.Id,
 				sessionId: f.sessionId,
 			})),
@@ -2260,9 +2266,21 @@ const handleTreeNodeClick = async (data: TreeNode) => {
 };
 // 预览节点
 const previewNode = (d: TreeNode) => {
-	if (d.nodeType !== 'html' && d.nodeType !== 'image' && d.nodeType !== 'title') return;
+	if (!d.fileUrl) return ElMessage.warning('当前节点没有可用预览地址');
 	const url = buildAssetUrl(d.fileUrl);
 	if (!url) return ElMessage.warning('当前节点没有可用预览地址');
+
+	const type = String(d.fileType || '').toLowerCase();
+	if (type === 'image') {
+		previewMode.value = 'image';
+	} else if (type === 'video') {
+		previewMode.value = 'video';
+	} else if (type === 'audio') {
+		previewMode.value = 'audio';
+	} else {
+		previewMode.value = 'iframe';
+	}
+
 	previewUrl.value = url;
 	previewDialogVisible.value = true;
 };
@@ -2276,7 +2294,9 @@ const downloadNode = async (d: TreeNode) => {
 		const blob = r instanceof Blob ? r : r?.data;
 		if (!(blob instanceof Blob)) throw new Error('invalid blob');
 		const fileName = d.fileUrl.split('/').pop() || '';
-		const fileExt = fileName.split('.').pop()?.toLowerCase() || 'html';
+		const type = String(d.fileType || '').toLowerCase();
+		const defaultExt = type === 'video' ? 'mp4' : type === 'audio' ? 'mp3' : 'html';
+		const fileExt = fileName.split('.').pop()?.toLowerCase() || defaultExt;
 		const name = decodeURIComponent(fileName || `${d.label}.${fileExt}`);
 		const u = URL.createObjectURL(blob);
 		const a = document.createElement('a');
@@ -2286,7 +2306,7 @@ const downloadNode = async (d: TreeNode) => {
 		a.click();
 		document.body.removeChild(a);
 		URL.revokeObjectURL(u);
-		ElMessage.success('下载成功');
+		ElMessage.success(`下载成功${type ? `（${type}）` : ''}`);
 	} catch {
 		// 下载失败由 request 全局提示后端 message
 	}