From 542895c61cf8dc04a84fb15b3fa91a9f10fe44a8 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Fri, 29 May 2026 16:56:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B7=A5=E4=BD=9C=E7=A9=BA?=
 =?UTF-8?q?=E9=97=B4=E9=9D=A2=E6=9D=BF=EF=BC=8C=E6=94=AF=E6=8C=81=E6=A0=91?=
 =?UTF-8?q?=E5=BD=A2=E7=BB=93=E6=9E=84=E5=B1=95=E7=A4=BA=E5=92=8C=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD=EF=BC=9B=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E8=BE=93=E5=85=A5=E6=A0=8F=E4=BB=A5=E9=9B=86=E6=88=90?=
 =?UTF-8?q?=E5=B8=B8=E7=94=A8=E5=B7=A5=E4=BD=9C=E6=B5=81=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=EF=BC=9B=E6=9B=B4=E6=96=B0=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E4=BB=A5=E7=AE=80=E5=8C=96=E5=8E=86=E5=8F=B2=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E7=AE=A1=E7=90=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/InputBar.vue | 128 ++++++++-
 src/views/home/components/Sidebar.vue  | 275 +------------------
 src/views/home/index.vue               | 365 ++++++++++++++++++++++++-
 3 files changed, 490 insertions(+), 278 deletions(-)

diff --git a/src/views/home/components/InputBar.vue b/src/views/home/components/InputBar.vue
index 57202c4..7329380 100644
--- a/src/views/home/components/InputBar.vue
+++ b/src/views/home/components/InputBar.vue
@@ -36,22 +36,49 @@
 					</el-button>
 				</div>
 			</div>
+
+			<!-- 常用工作流胶囊 -->
+			<div class="workflow-pills" v-if="commonWorkflows.length > 0">
+				<div
+					v-for="wf in commonWorkflows"
+					:key="wf.id"
+					class="workflow-pill"
+					:class="{ active: selectedWorkflowId === wf.id }"
+					@click="selectWorkflow(wf)"
+				>
+					<el-icon class="pill-icon">
+						<component :is="wf.icon" />
+					</el-icon>
+					<span class="pill-text">{{ wf.name }}</span>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { Top, Plus } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
+import { Top, Plus, MagicStick, Document, CircleCheck } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
 interface Emits {
 	(e: 'send', message: string): void;
 }
 
+interface Workflow {
+	id: number;
+	name: string;
+	icon: any;
+	prefix: string;
+	editPath: string;
+}
+
 const emit = defineEmits<Emits>();
+const router = useRouter();
 const message = ref('');
 const selectedSkill = ref('default');
+const selectedWorkflowId = ref<number | null>(null);
 
 const skillLabels: Record<string, string> = {
 	default: '选择技能',
@@ -61,9 +88,7 @@ const skillLabels: Record<string, string> = {
 };
 
 const currentSkillDisplay = computed(() => {
-	return selectedSkill.value === 'default'
-		? '选择技能'
-		: skillLabels[selectedSkill.value];
+	return selectedSkill.value === 'default' ? '选择技能' : skillLabels[selectedSkill.value];
 });
 
 const skills: Record<string, string> = {
@@ -73,14 +98,49 @@ const skills: Record<string, string> = {
 	writing: '[技能：内容写作] 请根据下面的需求帮我创作内容：\n',
 };
 
+// 常用工作流列表
+const commonWorkflows: Workflow[] = [
+	{
+		id: 1,
+		name: '审查+测试',
+		icon: Document,
+		prefix: '[工作流：审查+测试] 完成后请自动生成单元测试：\n',
+		editPath: '/settings/workflow',
+	},
+	{
+		id: 2,
+		name: '文档再编码',
+		icon: Document,
+		prefix: '[工作流：文档再编码] 请先编写接口文档，再实现代码：\n',
+		editPath: '/settings/workflow',
+	},
+	{
+		id: 3,
+		name: '代码重构',
+		icon: Document,
+		prefix: '[工作流：代码重构] 请帮我重构这段代码：\n',
+		editPath: '/settings/workflow',
+	},
+	{
+		id: 4,
+		name: '需求分析',
+		icon: Document,
+		prefix: '[工作流：需求分析] 请帮我分析这个需求并拆解任务：\n',
+		editPath: '/settings/workflow',
+	},
+];
+
 const handleSend = (event?: KeyboardEvent) => {
 	if (event) event.preventDefault();
 	const msg = message.value.trim();
 	if (!msg) return;
 	const skillPrefix = skills[selectedSkill.value] || '';
-	const finalMessage = (skillPrefix + msg).trim();
+	const workflowPrefix = selectedWorkflowId.value !== null ? commonWorkflows.find((w) => w.id === selectedWorkflowId.value)?.prefix || '' : '';
+	const finalMessage = (skillPrefix + workflowPrefix + msg).trim();
 	emit('send', finalMessage);
 	message.value = '';
+	// 发送后清空选择
+	selectedWorkflowId.value = null;
 };
 
 const handleAttachment = () => {
@@ -93,6 +153,16 @@ const handleSkillSelect = (key: string | number | object) => {
 		ElMessage.success(`已选择技能：${skillLabels[selectedSkill.value]}`);
 	}
 };
+
+const selectWorkflow = (wf: Workflow) => {
+	if (selectedWorkflowId.value === wf.id) {
+		selectedWorkflowId.value = null;
+		ElMessage.info('已取消工作流');
+	} else {
+		selectedWorkflowId.value = wf.id;
+		ElMessage.success(`已选择工作流：${wf.name}`);
+	}
+};
 </script>
 
 <style scoped lang="scss">
@@ -117,7 +187,7 @@ const handleSkillSelect = (key: string | number | object) => {
 		0 24px 48px rgba(15, 23, 42, 0.12),
 		0 0 0 1px rgba(59, 130, 246, 0.08) inset,
 		0 8px 16px rgba(37, 99, 235, 0.1);
-	padding: 16px 18px 14px;
+	padding: 16px 18px 18px;
 	backdrop-filter: blur(16px);
 }
 
@@ -213,4 +283,50 @@ const handleSkillSelect = (key: string | number | object) => {
 		background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
 	}
 }
+
+/* 工作流胶囊样式 */
+.workflow-pills {
+	margin-top: 12px;
+	padding-top: 12px;
+	border-top: 1px solid rgba(59, 130, 246, 0.15);
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+.workflow-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 10px;
+	border-radius: 999px;
+	border: 1px solid rgba(59, 130, 246, 0.3);
+	background: rgba(255, 255, 255, 0.6);
+	cursor: pointer;
+	transition: all 0.2s ease;
+	color: #475569;
+
+	&:hover {
+		border-color: #3b82f6;
+		background: rgba(59, 130, 246, 0.08);
+		transform: translateY(-1px);
+	}
+
+	&.active {
+		border-color: #3b82f6;
+		background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+		color: #ffffff;
+		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+	}
+
+	.pill-icon {
+		font-size: 14px;
+	}
+
+	.pill-text {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 1.2;
+	}
+}
 </style>
diff --git a/src/views/home/components/Sidebar.vue b/src/views/home/components/Sidebar.vue
index 219c40f..d872841 100644
--- a/src/views/home/components/Sidebar.vue
+++ b/src/views/home/components/Sidebar.vue
@@ -2,7 +2,9 @@
 	<div class="sidebar">
 		<div class="sidebar-header">
 			<el-button class="new-chat-btn" @click="handleNewChat">
-				<el-icon><Plus /></el-icon>
+				<el-icon>
+					<Plus />
+				</el-icon>
 				新增对话
 			</el-button>
 		</div>
@@ -22,74 +24,18 @@
 						<div class="history-time">{{ item.time }}</div>
 					</div>
 					<el-button text class="delete-btn" @click.stop="handleDeleteHistory(item.id)">
-						<el-icon><Delete /></el-icon>
-					</el-button>
-				</div>
-			</div>
-		</div>
-
-		<!-- 工作空间 -->
-		<div class="workspace-section">
-			<div class="workspace-title">工作空间</div>
-			<div class="workspace-list" ref="workspaceListRef">
-				<div
-					v-for="item in displayWorkspaceItems"
-					:key="item.id"
-					class="workspace-item"
-					@click="handlePreview(item)"
-				>
-					<div class="workspace-item-icon">
-						<img v-if="item.type === 'image'" :src="item.url" />
-						<el-icon v-else-if="item.type === 'video'" ><VideoCamera /></el-icon>
-						<el-icon v-else-if="item.type === 'text'" ><Document /></el-icon>
-						<el-icon v-else><Document /></el-icon>
-					</div>
-					<div class="workspace-item-info">
-						<div class="workspace-item-name">{{ item.name }}</div>
-					</div>
-					<el-button
-						type="primary"
-						size="small"
-						link
-						@click.stop="handleDownload(item)"
-					>
-						<el-icon><Download /></el-icon>
+						<el-icon>
+							<Delete />
+						</el-icon>
 					</el-button>
 				</div>
 			</div>
 		</div>
 	</div>
-
-	<!-- 预览弹窗 -->
-	<el-dialog
-		v-model="previewDialogVisible"
-		:title="currentPreviewItem?.name"
-		width="auto"
-		max-width="80%"
-		top="10vh"
-		align-center
-	>
-		<div class="preview-dialog-content">
-			<img v-if="currentPreviewItem?.type === 'image'" :src="currentPreviewItem?.url" class="dialog-image" />
-			<video
-				v-else-if="currentPreviewItem?.type === 'video'"
-				:src="currentPreviewItem?.url"
-				controls
-				autoplay
-				class="dialog-video"
-			/>
-			<pre v-else-if="currentPreviewItem?.type === 'text'" class="dialog-text">{{ currentPreviewItem?.content }}</pre>
-		</div>
-		<template #footer>
-			<el-button @click="previewDialogVisible = false">关闭</el-button>
-			<el-button type="primary" @click="handleDownload(currentPreviewItem!)">下载</el-button>
-		</template>
-	</el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { Plus, Delete, Document, VideoCamera, Download } from '@element-plus/icons-vue';
+import { Plus, Delete } from '@element-plus/icons-vue';
 
 interface HistoryItem {
 	id: number;
@@ -97,20 +43,10 @@ interface HistoryItem {
 	time: string;
 }
 
-interface WorkspaceItem {
-	id: number;
-	name: string;
-	type: 'text' | 'image' | 'video' | 'file';
-	url?: string;
-	content?: string;
-	createTime: string;
-}
-
 interface Props {
 	activeMenu: string;
 	activeHistoryId: number;
 	historyList: HistoryItem[];
-	workspaceItems?: WorkspaceItem[];
 }
 
 interface Emits {
@@ -120,55 +56,9 @@ interface Emits {
 	(e: 'delete-history', id: number): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-	workspaceItems: () => [],
-});
+defineProps<Props>();
 const emit = defineEmits<Emits>();
 
-const workspaceListRef = ref<HTMLElement | null>(null);
-const previewDialogVisible = ref(false);
-const currentPreviewItem = ref<WorkspaceItem | null>(null);
-
-// 示例 mock 数据
-const mockItems: WorkspaceItem[] = [
-	{
-		id: 1,
-		name: '对话总结.md',
-		type: 'text',
-		content: `# 项目需求总结
-
-## 功能需求
-1. 在首页对话添加工作空间功能
-2. 工作空间用于存放对话产出的文本、图片、视频
-3. 需要支持预览和下载功能
-
-## 技术要点
-- 使用响应式布局，网格卡片展示
-- 点击弹出对话框预览完整内容
-- 原生 JS 实现文件下载`,
-		createTime: '2024-05-29',
-	},
-	{
-		id: 2,
-		name: '示例图片.jpg',
-		type: 'image',
-		url: 'https://placekitten.com/800/600',
-		createTime: '2024-05-29',
-	},
-	{
-		id: 3,
-		name: '演示视频.mp4',
-		type: 'video',
-		url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-		createTime: '2024-05-29',
-	},
-];
-
-// 合并 props 和本地 mock（开发时显示示例）
-const displayWorkspaceItems = computed(() => {
-	return props.workspaceItems && props.workspaceItems.length > 0 ? props.workspaceItems : mockItems;
-});
-
 const handleNewChat = () => {
 	emit('new-chat');
 };
@@ -180,36 +70,6 @@ const handleSelectHistory = (id: number) => {
 const handleDeleteHistory = (id: number) => {
 	emit('delete-history', id);
 };
-
-const handlePreview = (item: WorkspaceItem) => {
-	currentPreviewItem.value = item;
-	previewDialogVisible.value = true;
-};
-
-const handleDownload = (item: WorkspaceItem) => {
-	if (!item.url && !item.content) return;
-
-	if (item.type === 'text' && item.content) {
-		// 文本内容下载
-		const blob = new Blob([item.content], { type: 'text/plain' });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = item.name;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-		URL.revokeObjectURL(url);
-	} else if (item.url) {
-		// 图片、视频、文件下载
-		const a = document.createElement('a');
-		a.href = item.url;
-		a.download = item.name;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-	}
-};
 </script>
 
 <style scoped lang="scss">
@@ -344,123 +204,4 @@ const handleDownload = (item: WorkspaceItem) => {
 	font-size: 11px;
 	color: #94a3b8;
 }
-
-/* 工作空间样式 */
-.workspace-section {
-	margin-top: 8px;
-	padding-top: 8px;
-	border-top: 1px solid #e9eef7;
-	max-height: 40%;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-}
-
-.workspace-title {
-	padding: 12px 12px 8px;
-	font-size: 11px;
-	font-weight: 600;
-	color: #64748b;
-	text-transform: uppercase;
-	letter-spacing: 0.8px;
-}
-
-.workspace-list {
-	flex: 1;
-	padding: 0 8px 10px;
-	overflow-y: auto;
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-.workspace-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 10px;
-	margin-bottom: 6px;
-	border-radius: 8px;
-	border: 1px solid transparent;
-	background: rgba(255, 255, 255, 0.6);
-	cursor: pointer;
-	transition: all 0.2s ease;
-
-	&:hover {
-		border-color: #bfdbfe;
-		background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.7) 100%);
-	}
-}
-
-.workspace-item-icon {
-	width: 28px;
-	height: 28px;
-	flex-shrink: 0;
-	border-radius: 6px;
-	background: #f1f5f9;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-	color: #64748b;
-
-	img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.el-icon {
-		font-size: 16px;
-	}
-}
-
-.workspace-item-info {
-	flex: 1;
-	min-width: 0;
-}
-
-.workspace-item-name {
-	font-size: 12px;
-	font-weight: 500;
-	color: #1e293b;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-/* 预览弹窗样式 */
-.preview-dialog-content {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	min-height: 100px;
-	max-height: 60vh;
-	overflow: auto;
-}
-
-.dialog-image {
-	max-width: 100%;
-	max-height: 60vh;
-}
-
-.dialog-video {
-	max-width: 100%;
-	max-height: 60vh;
-}
-
-.dialog-text {
-	min-width: 400px;
-	max-width: 100%;
-	padding: 16px;
-	background: #f8fafc;
-	border-radius: 8px;
-	white-space: pre-wrap;
-	word-break: break-word;
-	font-size: 14px;
-	line-height: 1.6;
-}
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 30ade05..c86cab6 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -13,15 +13,66 @@
 			<MainContent :active-menu="activeMenu" />
 			<InputBar @send="handleSend" />
 		</div>
+		<!-- 右侧：工作空间（树形结构） -->
+		<div class="workspace-panel">
+			<div class="workspace-tree-wrap" v-loading="treeLoading">
+				<el-empty v-if="!treeLoading && treeNodes.length === 0" description="暂无作品数据" />
+				<el-tree
+					v-else
+					:data="treeNodes"
+					node-key="id"
+					:props="treeProps"
+					default-expand-all
+					:highlight-current="true"
+					:expand-on-click-node="true"
+					@node-click="handleTreeNodeClick"
+				>
+					<template #default="{ data }">
+						<div
+							class="tree-node"
+							:class="[
+								data.nodeType === 'date' ? 'level-date' :
+								data.nodeType === 'contentType' ? 'level-flow' : 'level-file',
+								data.fileType ? data.fileType.replace(/\\/g, ' ').split(' ')[0] : ''
+							]"
+						>
+							<span class="ellipsis">{{ data.label }}</span>
+							<div v-if="data.nodeType === 'title' && data.fileUrl" class="tree-node-actions">
+								<el-button type="primary" link size="small" @click.stop="previewNode(data)"> 预览 </el-button>
+								<el-button type="primary" link size="small" @click.stop="downloadNode(data)"> 下载 </el-button>
+							</div>
+						</div>
+					</template>
+				</el-tree>
+			</div>
+		</div>
+
+		<!-- 预览弹窗 - 放在外层，避免被右侧容器限制宽度 -->
+		<el-dialog v-model="previewDialogVisible" title="预览" width="95%" top="2vh" :close-on-click-modal="false" destroy-on-close>
+			<div class="preview-container">
+				<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>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import Sidebar from './components/Sidebar.vue';
 import MainContent from './components/MainContent.vue';
 import InputBar from './components/InputBar.vue';
+import type { ExecutionTreeItem } from '/@/api/settings/creation';
+import { getExecutionList } from '/@/api/settings/creation';
 
 interface HistoryItem {
 	id: number;
@@ -29,8 +80,25 @@ interface HistoryItem {
 	time: string;
 }
 
+interface TreeNode {
+	id: string;
+	label: string;
+	nodeType: string;
+	children?: TreeNode[];
+	fileUrl?: string;
+	workflowId?: number | string;
+	fileType?: string;
+	sessionId?: string;
+}
+
 const activeMenu = ref('chat');
 const activeHistoryId = ref(1);
+const treeLoading = ref(false);
+const treeNodes = ref<TreeNode[]>([]);
+const imgAddressPrefix = ref('');
+const previewDialogVisible = ref(false);
+const previewUrl = ref('');
+const previewMode = ref<'iframe' | 'image' | 'video' | 'audio'>('iframe');
 
 const historyList = ref<HistoryItem[]>([
 	{ id: 1, title: '首页风格优化方案', time: '刚刚' },
@@ -39,6 +107,133 @@ const historyList = ref<HistoryItem[]>([
 	{ id: 4, title: '快捷回复产品设计', time: '2 天前' },
 ]);
 
+const treeProps = { children: 'children', label: 'label' };
+const apiBaseUrl = (import.meta.env.VITE_API_URL || '').replace(/\/$/, '');
+
+const joinUrl = (b: string, p: string) => `${b.replace(/\/$/, '')}${p.startsWith('/') ? p : `/${p}`}`;
+const buildAssetUrl = (p?: string) =>
+	!p
+		? ''
+		: /^https?:\/\//i.test(p)
+			? p
+			: /^https?:\/\//i.test(imgAddressPrefix.value || '')
+				? joinUrl(imgAddressPrefix.value, p)
+				: imgAddressPrefix.value
+					? joinUrl(joinUrl(apiBaseUrl, imgAddressPrefix.value), p)
+					: joinUrl(apiBaseUrl, p);
+
+const buildTreeNodes = (tree: ExecutionTreeItem[]): TreeNode[] =>
+	tree.map((d, di) => ({
+		id: `date-${di}`,
+		label: d.createDate,
+		nodeType: 'date',
+		children: (d.flows || []).map((f, fi) => ({
+			id: `flow-${di}-${fi}`,
+			label: f.flowName || '未命名工作流',
+			nodeType: 'contentType',
+			workflowId: f.Id,
+			sessionId: f.sessionId,
+			children: (f.items || []).map((item, ii) => ({
+				id: `item-${di}-${fi}-${ii}`,
+				label: item.label || `作品${ii + 1}`,
+				nodeType: 'title',
+				fileUrl: item.content,
+				fileType: item.type,
+				workflowId: f.Id,
+				sessionId: f.sessionId,
+			})),
+		})),
+	}));
+
+// 模拟mock数据
+const mockTreeData: ExecutionTreeItem[] = [
+	{
+		createDate: '今天',
+		flows: [
+			{
+				Id: 1,
+				flowName: '代码审查任务',
+				sessionId: 'session-1',
+				items: [
+					{ label: '审查结果.md', content: 'https://placekitten.com/800/600', type: 'text/markdown' },
+					{ label: '流程图.png', content: 'https://placekitten.com/800/600', type: 'image/png' },
+				],
+			},
+			{
+				Id: 2,
+				flowName: '需求分析',
+				sessionId: 'session-2',
+				items: [{ label: '需求拆解.txt', content: '# 需求分析结果\n\n- 功能点一\n- 功能点二\n- 需要优化', type: 'text/plain' }],
+			},
+		],
+	},
+	{
+		createDate: '昨天',
+		flows: [
+			{
+				Id: 3,
+				flowName: '生成演示视频',
+				sessionId: 'session-3',
+				items: [{ label: '输出视频.mp4', content: 'https://www.w3schools.com/html/mov_bbb.mp4', type: 'video/mp4' }],
+			},
+		],
+	},
+];
+
+const getList = async () => {
+	treeLoading.value = true;
+	try {
+		const res = await getExecutionList();
+		imgAddressPrefix.value = res.data?.imgAddressPrefix || '';
+		const data = res.data?.tree || [];
+		// 如果后端没有数据，使用mock数据展示
+		treeNodes.value = data.length > 0 ? buildTreeNodes(data) : buildTreeNodes(mockTreeData);
+	} catch {
+		// 出错时使用mock数据展示
+		treeNodes.value = buildTreeNodes(mockTreeData);
+		imgAddressPrefix.value = '';
+	} finally {
+		treeLoading.value = false;
+	}
+};
+
+const getPreviewMode = (fileType?: string): 'image' | 'video' | 'audio' | 'iframe' => {
+	if (!fileType) return 'iframe';
+	const lower = fileType.toLowerCase();
+	if (lower.includes('image') || lower.includes('jpg') || lower.includes('png') || lower.includes('gif')) {
+		return 'image';
+	}
+	if (lower.includes('video') || lower.includes('mp4') || lower.includes('webm')) {
+		return 'video';
+	}
+	if (lower.includes('audio') || lower.includes('mp3') || lower.includes('wav')) {
+		return 'audio';
+	}
+	return 'iframe';
+};
+
+const previewNode = (data: TreeNode) => {
+	if (!data.fileUrl) return;
+	previewUrl.value = buildAssetUrl(data.fileUrl);
+	previewMode.value = getPreviewMode(data.fileType);
+	previewDialogVisible.value = true;
+};
+
+const downloadNode = (data: TreeNode) => {
+	if (!data.fileUrl) return;
+	const url = buildAssetUrl(data.fileUrl);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = data.label;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+};
+
+const handleTreeNodeClick = () => {
+	// 点击节点不需要额外操作
+};
+
 const handleMenuChange = (menu: string) => {
 	activeMenu.value = menu;
 };
@@ -74,6 +269,10 @@ const handleDeleteHistory = (id: number) => {
 	}
 	ElMessage.success('已删除会话');
 };
+
+onMounted(() => {
+	getList();
+});
 </script>
 
 <style scoped lang="scss">
@@ -86,10 +285,11 @@ const handleDeleteHistory = (id: number) => {
 	display: flex;
 	overflow: hidden;
 	background:
-		radial-gradient(1000px 500px at 70% -180px, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 65%),
-		radial-gradient(800px 400px at 10% 10%, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0) 60%),
-		radial-gradient(600px 300px at 90% 110%, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0) 60%),
-		linear-gradient(180deg, #f8fbff 0%, #f0f4fa 100%);
+		radial-gradient(1200px 600px at 0% 0%, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 45%),
+		radial-gradient(1000px 500px at 100% 0%, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0) 50%),
+		radial-gradient(800px 400px at 0% 100%, rgba(236, 72, 153, 0.12) 0%, rgba(236, 72, 153, 0) 55%),
+		radial-gradient(600px 300px at 100% 100%, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0) 60%),
+		linear-gradient(135deg, #f8fbff 0%, #e6f0ff 60%, #f0f4fa 100%);
 }
 
 .main-wrapper {
@@ -110,4 +310,159 @@ const handleDeleteHistory = (id: number) => {
 			radial-gradient(900px 360px at 15% 115%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0) 70%);
 	}
 }
+
+/* 右侧工作空间面板 - 渐变玻璃风格 */
+.workspace-panel {
+	width: 260px;
+	background: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0.85) 0%,
+		rgba(249, 251, 255, 0.7) 50%,
+		rgba(235, 241, 252, 0.6) 100%
+	);
+	border-left: 1px solid rgba(59, 130, 246, 0.15);
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	box-shadow: -6px 0 35px rgba(59, 130, 246, 0.08);
+	backdrop-filter: blur(16px);
+}
+
+.workspace-tree-wrap {
+	flex: 1;
+	padding: 8px 8px 12px;
+	overflow-y: auto;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	:deep(.el-tree) {
+		background: transparent;
+
+		.el-tree-node {
+			padding: 4px 0;
+		}
+
+		// 一级节点（日期）- 蓝色渐变
+		:deep(.level-date) .el-tree-node__content {
+			height: 42px;
+			background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0.05) 100%);
+			border: 1px solid rgba(59, 130, 246, 0.28);
+			font-weight: 600;
+		}
+
+		// 二级节点（工作流）- 紫色渐变
+		:deep(.level-flow) .el-tree-node__content {
+			margin-left: 8px;
+			background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.03) 100%);
+			border: 1px solid rgba(139, 92, 246, 0.18);
+		}
+
+		// 三级节点（文件）- 根据文件类型区分颜色
+		:deep(.level-file.image) .el-tree-node__content,
+		:deep(.level-file.jpg) .el-tree-node__content,
+		:deep(.level-file.png) .el-tree-node__content,
+		:deep(.level-file.gif) .el-tree-node__content {
+			margin-left: 16px;
+			background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 100%);
+			border: 1px solid rgba(16, 185, 129, 0.15);
+		}
+
+		:deep(.level-file.video) .el-tree-node__content,
+		:deep(.level-file.mp4) .el-tree-node__content,
+		:deep(.level-file.webm) .el-tree-node__content {
+			margin-left: 16px;
+			background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 100%);
+			border: 1px solid rgba(245, 158, 11, 0.15);
+		}
+
+		:deep(.level-file.audio) .el-tree-node__content,
+		:deep(.level-file.mp3) .el-tree-node__content,
+		:deep(.level-file.wav) .el-tree-node__content {
+			margin-left: 16px;
+			background: linear-gradient(135deg, rgba(236, 72, 153, 0.18) 0%, rgba(236, 72, 153, 0.04) 100%);
+			border: 1px solid rgba(236, 72, 153, 0.15);
+		}
+
+		:deep(.level-file.text) .el-tree-node__content,
+		:deep(.level-file.md) .el-tree-node__content,
+		:deep(.level-file.txt) .el-tree-node__content,
+		:deep(.level-file.markdown) .el-tree-node__content {
+			margin-left: 16px;
+			background: linear-gradient(135deg, rgba(79, 70, 229, 0.18) 0%, rgba(79, 70, 229, 0.04) 100%);
+			border: 1px solid rgba(79, 70, 229, 0.15);
+		}
+
+		// 默认其他文件
+		:deep(.level-file:not(.image):not(.video):not(.audio):not(.text)) .el-tree-node__content {
+			margin-left: 16px;
+			background: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(100, 116, 139, 0.04) 100%);
+			border: 1px solid rgba(100, 116, 139, 0.15);
+		}
+
+		.el-tree-node__content {
+			height: 38px;
+			line-height: 38px;
+			border-radius: 8px;
+			margin: 2px 0;
+			backdrop-filter: blur(8px);
+			transition: all 0.2s ease;
+
+			&:hover {
+				border-width: 2px;
+				transform: translateX(2px);
+				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+			}
+		}
+
+		.el-tree-node.is-current > .el-tree-node__content {
+			border-width: 2px;
+			box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
+		}
+
+		.el-tree-node__expand-icon {
+			color: rgba(59, 130, 246, 0.7);
+		}
+	}
+}
+
+.tree-node {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	gap: 6px;
+
+	.ellipsis {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 13px;
+		font-weight: 500;
+		color: #1e293b;
+	}
+
+	.tree-node-actions {
+		flex-shrink: 0;
+		.el-button {
+			font-size: 11px;
+			padding: 2px 4px;
+			margin: 0;
+			line-height: 1;
+		}
+	}
+}
+
+.preview-container {
+	max-height: 85vh;
+	overflow: auto;
+}
+
+.preview-iframe {
+	width: 100%;
+	min-height: 60vh;
+}
 </style>