首页工作流表单卡片化闭环：执行进度、输入禁用与取消入口

- socket 节点事件推进表单卡片执行进度，失败详情展示详细原因
- 工作流执行时禁用输入框，取消入口移到卡片 footer，卡片定格可重试
- 工作流 ModelRequestParams 按详情原样透传后端
- 会话内产出文件卡片展示（预览/下载/删除），移除顶部结果卡片区

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/home/components/WorkflowOutputCard.vue

@@ -0,0 +1,148 @@
+<template>
+	<div class="workflow-output-card">
+		<div v-for="(out, i) in outputs" :key="i" class="output-item">
+			<el-icon class="output-icon" :class="`is-${out.type || 'file'}`">
+				<component :is="getIcon(out.type)" />
+			</el-icon>
+			<span class="output-name" :title="out.name">{{ out.name }}</span>
+			<span class="output-actions">
+				<button v-if="out.type !== 'text'" type="button" class="output-action" title="预览" @click="emit('preview', out)">
+					<el-icon><View /></el-icon>
+				</button>
+				<button type="button" class="output-action" title="下载" @click="emit('download', out)">
+					<el-icon><Download /></el-icon>
+				</button>
+				<button type="button" class="output-action is-danger" title="删除" @click="emit('delete', out)">
+					<el-icon><Delete /></el-icon>
+				</button>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Picture, VideoPlay, Headset, Document, View, Download, Delete } from '@element-plus/icons-vue';
+
+// 产出文件：url 文件地址（相对/绝对）、name 展示名、type 预览类型（image/video/audio/text/file）、backendId 执行记录 id
+interface WorkflowOutput {
+	url: string;
+	name: string;
+	type: string;
+	backendId: string;
+}
+
+interface Props {
+	outputs: WorkflowOutput[];
+}
+
+interface Emits {
+	(e: 'preview', output: WorkflowOutput): void;
+	(e: 'download', output: WorkflowOutput): void;
+	(e: 'delete', output: WorkflowOutput): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 按文件类型选图标（与工作空间侧边栏一致）
+const getIcon = (type: string) => {
+	const t = String(type || '').toLowerCase();
+	if (t === 'image') return Picture;
+	if (t === 'video') return VideoPlay;
+	if (t === 'audio') return Headset;
+	return Document;
+};
+</script>
+
+<style scoped lang="scss">
+.workflow-output-card {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin-top: 10px;
+	background: #f8fafc;
+	border: 1px solid #f1f5f9;
+	border-radius: 10px;
+	padding: 8px;
+}
+
+.output-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 8px;
+	border-radius: 8px;
+	transition: background 0.15s;
+
+	&:hover {
+		background: #eef2f7;
+		.output-actions {
+			opacity: 1;
+		}
+	}
+}
+
+.output-icon {
+	font-size: 16px;
+	flex-shrink: 0;
+
+	&.is-image {
+		color: #2563eb;
+	}
+	&.is-video {
+		color: #7c3aed;
+	}
+	&.is-audio {
+		color: #d97706;
+	}
+	&.is-file,
+	&.is-text {
+		color: #64748b;
+	}
+}
+
+.output-name {
+	flex: 1;
+	font-size: 13px;
+	color: #334155;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.output-actions {
+	display: flex;
+	gap: 2px;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.15s;
+}
+
+.output-action {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	color: #94a3b8;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+
+	&:hover {
+		background: #e2e8f0;
+		color: #475569;
+	}
+
+	&.is-danger:hover {
+		background: #fef2f2;
+		color: #dc2626;
+	}
+
+	.el-icon {
+		font-size: 13px;
+	}
+}
+</style>