<!-- components/LeftPanel.vue -->
<script setup lang="ts">
import { ref } from 'vue';
import { NodeItem, NodeType } from '@/types/graph';
 
const emit = defineEmits<{
  (e: 'drag-start', nodeType: NodeType): void;
  (e: 'drag-end'): void;
}>();
 
const nodes: NodeItem[] = [
  { type: 'cylinder_slot', label: '圆柱槽' },
  { type: 'flat_slot', label: '扁平槽' },
  { type: 'ring_slot', label: '环形槽' },
  { type: 'tube_slot', label: '管形槽' },
  { type: 'bar_stock', label: '棒料' },
  { type: 'tapered_head', label: '锥形头' },
  { type: 'monk_ring_slot', label: '僧帽环形槽' },
];
 
const handleDragStart = (e: DragEvent, type: NodeType) => {
  if (!e.dataTransfer) return;
  e.dataTransfer.setData('text/plain', type);
  emit('drag-start', type);
};
</script>
 
<template>
  <div class="left-panel">
    <h3 class="panel-title">图形元件库</h3>
    <div class="node-list">
      <div
        v-for="node in nodes"
        :key="node.type"
        class="node-item"
        draggable 
        @dragstart="handleDragStart($event, node.type)"
      >
        <span class="icon">⚙️</span>
        <span class="label">{{ node.label }}</span>
      </div>
    </div>
  </div>
</template>
 
<style scoped>
.left-panel {
  width: 200px;
  height: 100vh;
  background-color: #f7f9fc;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
 
.panel-title {
  padding: 16px;
  font-size: 18px;
  color: #1a1a1a;
  border-bottom: 1px solid #eee;
  margin: 0;
  background-color: #ffffff;
}
 
.node-list {
  padding: 8px;
  flex: 1;
}
 
.node-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
 
.node-item:hover {
  background-color: #e6f7ff;
  border-color: #91d5ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
 
.icon {
  font-size: 16px;
}
 
.label {
  font-size: 14px;
  color: #333;
}
</style>