feat: 增强预览功能与文件下载逻辑
- 更新预览弹窗,支持图片、视频和音频格式的展示。 - 添加 fileType 字段以支持不同文件类型的处理。 - 优化下载逻辑,根据文件类型自动设置默认扩展名,并在下载成功提示中显示文件类型。
This commit is contained in:
@@ -769,7 +769,10 @@
|
|||||||
<!-- 预览弹窗 -->
|
<!-- 预览弹窗 -->
|
||||||
<el-dialog v-model="previewDialogVisible" title="预览" width="95%" top="2vh" :close-on-click-modal="false" destroy-on-close>
|
<el-dialog v-model="previewDialogVisible" title="预览" width="95%" top="2vh" :close-on-click-modal="false" destroy-on-close>
|
||||||
<div class="preview-container">
|
<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="无法加载预览内容" />
|
<el-empty v-else description="无法加载预览内容" />
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -820,6 +823,7 @@ interface TreeNode {
|
|||||||
children?: TreeNode[];
|
children?: TreeNode[];
|
||||||
fileUrl?: string;
|
fileUrl?: string;
|
||||||
workflowId?: number | string;
|
workflowId?: number | string;
|
||||||
|
fileType?: string;
|
||||||
sessionId?: string;
|
sessionId?: string;
|
||||||
}
|
}
|
||||||
interface SelectedState {
|
interface SelectedState {
|
||||||
@@ -891,6 +895,7 @@ const isDraggingMiddleSplitter = ref(false);
|
|||||||
// 预览相关状态
|
// 预览相关状态
|
||||||
const previewDialogVisible = ref(false);
|
const previewDialogVisible = ref(false);
|
||||||
const previewUrl = ref('');
|
const previewUrl = ref('');
|
||||||
|
const previewMode = ref<'iframe' | 'image' | 'video' | 'audio'>('iframe');
|
||||||
// 模型选择器相关状态
|
// 模型选择器相关状态
|
||||||
const showModelSelector = ref(false);
|
const showModelSelector = ref(false);
|
||||||
const selectedModelData = ref<any>(null);
|
const selectedModelData = ref<any>(null);
|
||||||
@@ -1262,6 +1267,7 @@ const buildTreeNodes = (tree: ExecutionTreeItem[]): TreeNode[] =>
|
|||||||
label: item.label || `作品${ii + 1}`,
|
label: item.label || `作品${ii + 1}`,
|
||||||
nodeType: 'title',
|
nodeType: 'title',
|
||||||
fileUrl: item.content,
|
fileUrl: item.content,
|
||||||
|
fileType: item.type,
|
||||||
workflowId: f.Id,
|
workflowId: f.Id,
|
||||||
sessionId: f.sessionId,
|
sessionId: f.sessionId,
|
||||||
})),
|
})),
|
||||||
@@ -2260,9 +2266,21 @@ const handleTreeNodeClick = async (data: TreeNode) => {
|
|||||||
};
|
};
|
||||||
// 预览节点
|
// 预览节点
|
||||||
const previewNode = (d: 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);
|
const url = buildAssetUrl(d.fileUrl);
|
||||||
if (!url) return ElMessage.warning('当前节点没有可用预览地址');
|
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;
|
previewUrl.value = url;
|
||||||
previewDialogVisible.value = true;
|
previewDialogVisible.value = true;
|
||||||
};
|
};
|
||||||
@@ -2276,7 +2294,9 @@ const downloadNode = async (d: TreeNode) => {
|
|||||||
const blob = r instanceof Blob ? r : r?.data;
|
const blob = r instanceof Blob ? r : r?.data;
|
||||||
if (!(blob instanceof Blob)) throw new Error('invalid blob');
|
if (!(blob instanceof Blob)) throw new Error('invalid blob');
|
||||||
const fileName = d.fileUrl.split('/').pop() || '';
|
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 name = decodeURIComponent(fileName || `${d.label}.${fileExt}`);
|
||||||
const u = URL.createObjectURL(blob);
|
const u = URL.createObjectURL(blob);
|
||||||
const a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
@@ -2286,7 +2306,7 @@ const downloadNode = async (d: TreeNode) => {
|
|||||||
a.click();
|
a.click();
|
||||||
document.body.removeChild(a);
|
document.body.removeChild(a);
|
||||||
URL.revokeObjectURL(u);
|
URL.revokeObjectURL(u);
|
||||||
ElMessage.success('下载成功');
|
ElMessage.success(`下载成功${type ? `(${type})` : ''}`);
|
||||||
} catch {
|
} catch {
|
||||||
// 下载失败由 request 全局提示后端 message
|
// 下载失败由 request 全局提示后端 message
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user