更新模型选择器以支持更多模型类型，重构输入栏以移除快捷指令和工作流功能，新增工作空间功能以支持文件预览和下载，优化工作流组件以增强节点数据处理的可选性和安全性。

src/components/model/ModelSelector.vue

@@ -219,9 +219,28 @@ watch(
 
 const getModelTypeName = (type: number | string) => {
 	const typeMap: Record<number, string> = {
-		1: '推理模型',
+		100: '推理模型',
-		2: '图片模型',
+		200: '图片模型',
-		3: '音频模型',
+		201: '图片模型-文生图',
+		202: '图片模型-图生图',
+		203: '图片模型-图片编辑',
+		204: '图片模型-图片变体',
+		300: '音频模型',
+		301: '音频模型-文生音',
+		302: '音频模型-音生文',
+		303: '音频模型-音生音',
+		400: '向量化模型',
+		401: '向量化模型-文本嵌入',
+		402: '向量化模型-重排序',
+		500: '全模态模型',
+		501: '全模态模型-文图音',
+		502: '全模态模型-视觉理解',
+		600: '视频模型',
+		601: '视频模型-文生视频',
+		602: '视频模型-图生视频',
+		603: '视频模型-图文生视频',
+		604: '视频模型-视频生视频',
+		605: '视频模型-视频编辑',
 	};
 	return typeMap[Number(type)] || '未知类型';
 };

src/views/home/components/InputBar.vue

@@ -16,26 +16,6 @@
 					<el-button circle class="tool-btn" @click="handleAttachment">
 						<el-icon><Plus /></el-icon>
 					</el-button>
-					<el-dropdown trigger="click" @command="handleCommandSelect">
-						<el-button class="pill-btn">快捷指令</el-button>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item command="rewrite">帮我润色这段文案</el-dropdown-item>
-								<el-dropdown-item command="summary">总结当前对话重点</el-dropdown-item>
-								<el-dropdown-item command="todo">整理下一步 TODO</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
-					<el-dropdown trigger="click" @command="handleReplySelect">
-						<el-button class="pill-btn">快捷回复</el-button>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item command="ok">收到，我马上处理</el-dropdown-item>
-								<el-dropdown-item command="confirm">这个方向可以，继续</el-dropdown-item>
-								<el-dropdown-item command="adjust">这个比例还要再调一下</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
 					<el-dropdown trigger="click" @command="handleSkillSelect">
 						<el-button class="pill-btn">
 							{{ currentSkillDisplay }}
@@ -49,18 +29,6 @@
 							</el-dropdown-menu>
 						</template>
 					</el-dropdown>
-					<el-dropdown trigger="click" @command="handleWorkflowSelect">
-						<el-button class="pill-btn">
-							{{ currentWorkflowDisplay }}
-						</el-button>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item command="none">无</el-dropdown-item>
-								<el-dropdown-item command="review-test">审查+测试</el-dropdown-item>
-								<el-dropdown-item command="doc-then-code">文档再编码</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
 				</div>
 				<div class="toolbar-right">
 					<el-button circle class="send-btn" :disabled="!message.trim()" @click="handleSend">
@@ -84,7 +52,6 @@ interface Emits {
 const emit = defineEmits<Emits>();
 const message = ref('');
 const selectedSkill = ref('default');
-const selectedWorkflow = ref('none');
 
 const skillLabels: Record<string, string> = {
 	default: '选择技能',
@@ -93,36 +60,12 @@ const skillLabels: Record<string, string> = {
 	writing: '内容写作',
 };
 
-const workflowLabels: Record<string, string> = {
-	none: '选择工作流',
-	'review-test': '审查+测试',
-	'doc-then-code': '文档再编码',
-};
-
 const currentSkillDisplay = computed(() => {
 	return selectedSkill.value === 'default'
 		? '选择技能'
 		: skillLabels[selectedSkill.value];
 });
 
-const currentWorkflowDisplay = computed(() => {
-	return selectedWorkflow.value === 'none'
-		? '选择工作流'
-		: workflowLabels[selectedWorkflow.value];
-});
-
-const quickCommands: Record<string, string> = {
-	rewrite: '请帮我润色下面这段内容，保持原意并提升表达质感：',
-	summary: '请总结我们当前对话的重点，并给出 3 条执行建议。',
-	todo: '请把当前需求拆解成可执行的 TODO 列表。',
-};
-
-const quickReplies: Record<string, string> = {
-	ok: '收到，我马上处理。',
-	confirm: '这个方向可以，继续。',
-	adjust: '这个比例还要再调一下。',
-};
-
 const skills: Record<string, string> = {
 	default: '',
 	'code-review': '[技能：代码审查] 请帮我审查下面这段代码，找出潜在问题并给出改进建议：\n',
@@ -130,19 +73,12 @@ const skills: Record<string, string> = {
 	writing: '[技能：内容写作] 请根据下面的需求帮我创作内容：\n',
 };
 
-const workflows: Record<string, string> = {
-	none: '',
-	'review-test': '[工作流：审查+测试] 完成后请自动生成单元测试：\n',
-	'doc-then-code': '[工作流：文档再编码] 请先编写接口文档，再实现代码：\n',
-};
-
 const handleSend = (event?: KeyboardEvent) => {
 	if (event) event.preventDefault();
 	const msg = message.value.trim();
 	if (!msg) return;
 	const skillPrefix = skills[selectedSkill.value] || '';
-	const workflowPrefix = workflows[selectedWorkflow.value] || '';
+	const finalMessage = (skillPrefix + msg).trim();
-	const finalMessage = (skillPrefix + workflowPrefix + msg).trim();
 	emit('send', finalMessage);
 	message.value = '';
 };
@@ -151,29 +87,12 @@ const handleAttachment = () => {
 	ElMessage.info('附件上传功能开发中...');
 };
 
-const handleCommandSelect = (key: string | number | object) => {
-	const k = String(key);
-	message.value = quickCommands[k] || message.value;
-};
-
-const handleReplySelect = (key: string | number | object) => {
-	const k = String(key);
-	message.value = quickReplies[k] || message.value;
-};
-
 const handleSkillSelect = (key: string | number | object) => {
 	selectedSkill.value = String(key);
 	if (selectedSkill.value !== 'default') {
 		ElMessage.success(`已选择技能：${skillLabels[selectedSkill.value]}`);
 	}
 };
-
-const handleWorkflowSelect = (key: string | number | object) => {
-	selectedWorkflow.value = String(key);
-	if (selectedWorkflow.value !== 'none') {
-		ElMessage.success(`已选择工作流：${workflowLabels[selectedWorkflow.value]}`);
-	}
-};
 </script>
 
 <style scoped lang="scss">

src/views/home/components/Sidebar.vue

@@ -27,11 +27,69 @@
 				</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-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 { Plus, Delete } from '@element-plus/icons-vue';
+import { ref, computed } from 'vue';
+import { Plus, Delete, Document, VideoCamera, Download } from '@element-plus/icons-vue';
 
 interface HistoryItem {
 	id: number;
@@ -39,10 +97,20 @@ 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 {
@@ -52,9 +120,55 @@ interface Emits {
 	(e: 'delete-history', id: number): void;
 }
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+	workspaceItems: () => [],
+});
 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');
 };
@@ -66,6 +180,36 @@ 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">
@@ -200,4 +344,123 @@ const handleDeleteHistory = (id: number) => {
 	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>

src/views/settings/workflow/component/NodeLibraryPanel.vue

@@ -120,6 +120,7 @@ const emit = defineEmits<{
 		margin-bottom: 8px;
 		padding-bottom: 4px;
 		border-bottom: 1px solid #e7ecf3;
+		padding-left: 2px;
 	}
 
 	.node-group-items {
@@ -129,9 +130,10 @@ const emit = defineEmits<{
 	}
 
 	.node-item {
-		justify-content: flex-start;
+		justify-content: flex-start !important;
 		width: 100%;
-		padding: 8px 10px;
+		padding: 0 !important;
+		margin: 0 !important;
 		color: #475569;
 		border-radius: 6px;
 		font-size: 13px;
@@ -139,11 +141,24 @@ const emit = defineEmits<{
 		background: transparent;
 		border: none;
 		transition: all 0.15s ease;
+		text-align: left !important;
+		min-height: 34px;
+		height: auto !important;
+		display: block !important;
 
 		&:hover {
 			background: #f1f5f9;
 			color: #1e293b;
 		}
+
+		:deep(.el-button__inner) {
+			width: 100%;
+			padding: 8px !important;
+			margin: 0 !important;
+			text-align: left !important;
+			justify-content: flex-start !important;
+			display: block !important;
+		}
 	}
 }
 </style>

src/views/settings/workflow/component/WorkflowListPanel.vue

@@ -5,7 +5,6 @@
 				<el-tab-pane label="我的工作流" name="user"></el-tab-pane>
 				<el-tab-pane label="模板工作流" name="template"></el-tab-pane>
 			</el-tabs>
-			<el-button type="success" size="small" @click="emit('create')">新建</el-button>
 		</div>
 		<div class="workflow-list-content" v-loading="loading">
 			<el-empty v-if="currentList.length === 0" description="暂无工作流" :image-size="60" />
@@ -65,7 +64,6 @@ const currentList = computed(() => {
 	flex-direction: column;
 	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
 	border: 1px solid #e6eaf0;
-}
 
 .panel-header {
 	display: flex;
@@ -188,4 +186,5 @@ const currentList = computed(() => {
 		padding: 4px 8px;
 	}
 }
+}
 </style>

src/views/settings/workflow/index.vue

@@ -126,7 +126,7 @@ interface ParamRef {
 	label: string;
 }
 
-const { addNodes, addEdges, findNode, removeNodes, getNodes } = useVueFlow();
+const { addNodes, addEdges, findNode, removeNodes, getNodes, updateNode } = useVueFlow();
 
 // 常量定义
 const START_NODE_CODE = '__start__';
@@ -254,6 +254,8 @@ const onNodeClick = (event: { node: Node<NodeData, any, string> }) => {
 
 const updateSelectedNode = (updatedNode: Node<NodeData, any, string>) => {
 	selectedNode.value = updatedNode;
+	// 使用 VueFlow 的 API 更新节点，确保内部状态同步
+	updateNode(updatedNode.id, updatedNode);
 	// 同步更新到 nodes 数组
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
@@ -284,29 +286,47 @@ const availableParams = computed(() => {
 const addParam = (param: ParamRef) => {
 	if (!selectedNode.value?.data) return;
 
-	if (!selectedNode.value.data.inputSource) {
+	const updatedNode: Node<NodeData> = {
-		selectedNode.value.data.inputSource = [];
+		...selectedNode.value,
-	}
+		data: {
+			...selectedNode.value.data,
+			inputSource: selectedNode.value.data.inputSource || [],
+		},
+	};
 
 	// 查找是否已存在该节点的引用
-	const existingIndex = selectedNode.value.data.inputSource.findIndex((item) => item.nodeId === param.id);
+	const existingIndex = updatedNode.data.inputSource!.findIndex((item) => item.nodeId === param.id);
 
 	if (existingIndex >= 0) {
 		// 已存在，添加 output 到 field 数组
-		const existing = selectedNode.value.data.inputSource[existingIndex];
+		const existing = updatedNode.data.inputSource![existingIndex];
 		if (!existing.field.includes('output')) {
 			existing.field.push('output');
+			selectedNode.value = updatedNode;
+			// 同步更新到 VueFlow 内部状态
+			updateNode(updatedNode.id, updatedNode);
+			const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
+			if (index >= 0) {
+				nodes.value[index] = updatedNode;
+			}
 			ElMessage.success('已添加参数引用');
 		} else {
 			ElMessage.info('该参数已被引用');
 		}
 	} else {
 		// 不存在，创建新的引用
-		selectedNode.value.data.inputSource.push({
+		updatedNode.data.inputSource!.push({
 			nodeId: param.id,
 			field: ['output'],
 			quoteOutput: false,
 		});
+		selectedNode.value = updatedNode;
+		// 同步更新到 VueFlow 内部状态
+		updateNode(updatedNode.id, updatedNode);
+		const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
+		if (index >= 0) {
+			nodes.value[index] = updatedNode;
+		}
 		ElMessage.success('已添加参数引用');
 	}
 };
@@ -330,6 +350,8 @@ const handleModelConfirm = (model: any) => {
 
 	selectedNode.value = updatedNode;
 	selectedModelData.value = model;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
@@ -353,6 +375,8 @@ const handleRemoveModel = () => {
 
 	selectedNode.value = updatedNode;
 	selectedModelData.value = null;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
@@ -376,6 +400,8 @@ const handleSkillConfirm = (skill: any) => {
 
 	selectedNode.value = updatedNode;
 	selectedSkillData.value = skill;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
@@ -399,6 +425,8 @@ const handleRemoveSkill = () => {
 
 	selectedNode.value = updatedNode;
 	selectedSkillData.value = null;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
@@ -436,6 +464,8 @@ const handleRemoveField = (nodeId: string, fieldName: string) => {
 	};
 
 	selectedNode.value = updatedNode;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
 		nodes.value[index] = updatedNode;
@@ -478,6 +508,8 @@ const handleToggleOutput = (nodeId: string, enabled: boolean) => {
 	};
 
 	selectedNode.value = updatedNode;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
 		nodes.value[index] = updatedNode;
@@ -534,6 +566,8 @@ const handleAddParamByValue = (paramValue: string) => {
 	};
 
 	selectedNode.value = updatedNode;
+	// 同步更新到 VueFlow 内部状态
+	updateNode(updatedNode.id, updatedNode);
 	const index = nodes.value.findIndex((n) => n.id === updatedNode.id);
 	if (index >= 0) {
 		nodes.value[index] = updatedNode;
@@ -652,15 +686,15 @@ const fetchWorkflowList = async () => {
 
 // 添加默认开始节点
 const addDefaultStartNode = () => {
-	addNodes([
+	const startNode = {
-		{
+		id: 'start-node',
-			id: 'start-node',
+		type: 'input',
-			type: 'input',
+		position: { x: 200, y: 200 },
-			position: { x: 200, y: 200 },
+		data: { label: '开始', nodeCode: '__start__', inputSource: null },
-			data: { label: '开始', nodeCode: '__start__', inputSource: null },
+		style: { background: '#10b981', color: '#fff', border: '2px solid #059669', borderRadius: '8px', padding: '10px 20px' },
-			style: { background: '#10b981', color: '#fff', border: '2px solid #059669', borderRadius: '8px', padding: '10px 20px' },
+	};
-		},
+	addNodes([startNode]);
-	]);
+	nodes.value.push(startNode);
 };
 
 // 新建工作流