101 lines
2.1 KiB
Vue
101 lines
2.1 KiB
Vue
<!-- 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> |