red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增强预览功能与文件下载逻辑

Browse Source 
- 更新预览弹窗，支持图片、视频和音频格式的展示。
- 添加 fileType 字段以支持不同文件类型的处理。
- 优化下载逻辑，根据文件类型自动设置默认扩展名，并在下载成功提示中显示文件类型。
This commit is contained in:
吴思建
2026-05-22 18:44:34 +08:00
parent e357f93779
commit ce70f86000
1 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/settings/creation/index.vue
View File

@@ -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
}