39 lines
1.7 KiB
Vue
39 lines
1.7 KiB
Vue
<template>
|
|
<div v-if="userRole !== 'viewer'" class="w-56 bg-slate-900 border-r border-slate-700 flex flex-col shrink-0 z-20 font-sans">
|
|
<div class="p-3 border-b border-slate-700">
|
|
<h3 class="text-sm font-bold text-slate-200">Узлы</h3>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-2 space-y-1">
|
|
<div v-for="nt in nodeTypes" :key="nt.type" draggable="true" @dragstart="onDragStart($event, nt)"
|
|
class="p-2 bg-slate-800 rounded cursor-move hover:bg-slate-700 border border-slate-600 text-xs select-none">
|
|
<div class="flex items-center gap-2">
|
|
<span>{{ nt.icon }}</span>
|
|
<div>
|
|
<div class="font-medium text-slate-200">{{ nt.name }}</div>
|
|
<div class="text-[10px] text-slate-500">{{ nt.description }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
userRole: { type: String, default: 'viewer' }
|
|
})
|
|
|
|
const nodeTypes = [
|
|
{ type: 'text', name: 'Текст', icon: '📝', description: 'Markdown заметка' },
|
|
{ type: 'file', name: 'Файл', icon: '📄', description: 'Ссылка на файл' },
|
|
{ type: 'task', name: 'Задача', icon: '✅', description: 'Задача с состоянием' },
|
|
{ type: 'ai', name: 'AI Узел', icon: '🤖', description: 'LLM запрос' },
|
|
{ type: 'webhook', name: 'Webhook', icon: '🔗', description: 'HTTP триггер' },
|
|
{ type: 'git', name: 'Git Синхр', icon: '🔄', description: 'Git синхронизация' }
|
|
]
|
|
|
|
const onDragStart = (event, nodeType) => {
|
|
event.dataTransfer.setData('application/vueflow', JSON.stringify(nodeType))
|
|
}
|
|
</script>
|