重构工作流绘制

2026-05-28 17:55:49 +08:00
parent 9bd4a44ab6
commit 032f258912
9 changed files with 2202 additions and 25 deletions
@@ -0,0 +1,149 @@
+<template>
+	<div class="node-library-panel" :class="{ collapsed: collapsed }">
+		<div class="node-library-header">
+			<span>节点库</span>
+			<el-button class="collapse-btn" text circle @click="emit('update:collapsed', !collapsed)">
+				<el-icon>
+					<ArrowRightBold v-if="collapsed" />
+					<ArrowLeftBold v-else />
+				</el-icon>
+			</el-button>
+		</div>
+		<div v-if="!collapsed" class="node-library-content">
+			<el-empty v-if="nodeLibraryGroups.length === 0" description="暂无节点" :image-size="40" />
+			<div v-else class="node-library-groups">
+				<div v-for="group in nodeLibraryGroups" :key="group.group" class="node-group">
+					<div class="node-group-title">{{ group.label }}</div>
+					<div class="node-group-items">
+						<el-button
+							v-for="item in group.items"
+							:key="item.nodeCode"
+							text
+							class="node-item"
+							@click="emit('addNode', item.nodeCode, item.nodeName)"
+						>
+							{{ item.nodeName }}
+						</el-button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
+import type { NodeLibraryGroup } from '/@/api/settings/creation';
+
+defineProps<{
+	nodeLibraryGroups: NodeLibraryGroup[];
+	collapsed: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:collapsed', value: boolean): void;
+	(e: 'addNode', nodeCode: string, nodeName: string): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+.node-library-panel {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	z-index: 10;
+	background: #fff;
+	border: 1px solid #d8e0eb;
+	border-radius: 6px;
+	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+	width: 132px;
+	max-height: calc(100% - 20px);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	transition: width 0.18s ease;
+
+	&.collapsed {
+		width: 40px;
+
+		.node-library-header {
+			padding: 8px;
+			border-bottom: none;
+
+			> span {
+				display: none;
+			}
+		}
+
+		.node-library-content {
+			display: none;
+		}
+	}
+}
+
+.node-library-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px;
+	border-bottom: 1px solid #e7ecf3;
+	font-size: 12px;
+	font-weight: 700;
+	color: #1f2937;
+	background: #f8fafc;
+
+	.collapse-btn {
+		width: 20px;
+		height: 20px;
+		border: 1px solid #cfd8e6;
+		color: #64748b;
+	}
+}
+
+.node-library-content {
+	padding: 12px;
+	overflow-y: auto;
+	max-height: 480px;
+}
+
+.node-library-groups {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.node-group {
+	.node-group-title {
+		font-size: 12px;
+		font-weight: 700;
+		color: #64748b;
+		margin-bottom: 8px;
+		padding-bottom: 4px;
+		border-bottom: 1px solid #e7ecf3;
+	}
+
+	.node-group-items {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.node-item {
+		justify-content: flex-start;
+		width: 100%;
+		padding: 8px 10px;
+		color: #475569;
+		border-radius: 6px;
+		font-size: 13px;
+		font-weight: 500;
+		background: transparent;
+		border: none;
+		transition: all 0.15s ease;
+
+		&:hover {
+			background: #f1f5f9;
+			color: #1e293b;
+		}
+	}
+}
+</style>