<template>
|
<div class="w-44 bg-white rounded-lg mt-2 py-2 px-2">
|
<div
|
v-for="item in sidebarList"
|
class="cursor-grab rounded-md bg-white py-3 px-2 hover:bg-gray-100"
|
:draggable="true"
|
@dragstart="handleOnDragStart($event, item.type)"
|
>
|
<div class="flex items-center justify-between">
|
<h3 class="flex items-center gap-x-2">
|
<img :src="item.img" class="h-4 w-4" alt="LLM icon" />
|
{{ item.title }}
|
</h3>
|
<!-- <plus-icon class="text-primary" /> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import llmImg from '/@/components/vue-flow/ui/assets/images/icon_LLM.png';
|
import startImg from '/@/components/vue-flow/ui/assets/images/icon_Start.png';
|
import endImg from '/@/components/vue-flow/ui/assets/images/icon_End.png';
|
import { NodeType, nodeTypeMap } from '/@/components/vue-flow/vueFlowEnum';
|
|
const emit = defineEmits(['dragstart']);
|
|
const handleOnDragStart = (e, type: string) => {
|
emit('dragstart', e, type);
|
};
|
|
const sidebarList = [
|
{
|
type: NodeType.Start,
|
title: nodeTypeMap[NodeType.Start],
|
img: startImg,
|
},
|
{
|
type: NodeType.End,
|
title: nodeTypeMap[NodeType.End],
|
img: endImg,
|
},
|
{
|
type: NodeType.Condition,
|
title: nodeTypeMap[NodeType.Condition],
|
img: llmImg,
|
},
|
{
|
type: NodeType.LLM,
|
title: nodeTypeMap[NodeType.LLM],
|
img: llmImg,
|
},
|
|
];
|
</script>
|
<style scoped lang="scss"></style>
|
