165 lines
3.3 KiB
Vue
165 lines
3.3 KiB
Vue
<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.key" class="node-group">
|
|
<div class="node-group-title">{{ group.group.name }}</div>
|
|
<div class="node-group-items">
|
|
<el-button
|
|
v-for="item in group.nodes"
|
|
:key="item.key"
|
|
text
|
|
class="node-item"
|
|
@click="emit('addNode', item.key, item.name)"
|
|
>
|
|
{{ item.name }}
|
|
</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/workflow';
|
|
|
|
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;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.node-group-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.node-item {
|
|
justify-content: flex-start !important;
|
|
width: 100%;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
color: #475569;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
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>
|