109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
import type { BlockSchema } from './types';
|
||
|
||
import MIcon from '#/components/icon/icon.vue';
|
||
|
||
/**
|
||
* 左侧组件库：渲染所有可拖拽块类型
|
||
* 用户从这里拖动到中间画布（SortableJS 用 pull:clone 模式，左侧库不会减少）
|
||
*/
|
||
defineProps<{
|
||
/** 所有可拖拽块定义 */
|
||
blocks: BlockSchema[];
|
||
}>();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="block-library">
|
||
<div class="panel-header">
|
||
<span class="title">组件库</span>
|
||
<span class="hint">拖入画布</span>
|
||
</div>
|
||
<div class="block-list">
|
||
<div
|
||
v-for="block in blocks"
|
||
:key="block.type"
|
||
class="block-item"
|
||
:data-block-type="block.type"
|
||
>
|
||
<MIcon v-if="block.icon" :icon="block.icon" size="16" />
|
||
<span class="block-label">{{ block.label }}</span>
|
||
</div>
|
||
<div v-if="blocks.length === 0" class="empty-hint">暂无可拖入组件</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.block-library {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 200px;
|
||
height: 100%;
|
||
border-right: 1px solid var(--ant-color-border-secondary, #e5e6eb);
|
||
background: var(--ant-color-fill-quaternary, #fafbfc);
|
||
}
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--ant-color-border-secondary, #e5e6eb);
|
||
font-size: 13px;
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
color: var(--ant-color-text, #1d2129);
|
||
}
|
||
|
||
.hint {
|
||
color: var(--ant-color-text-tertiary, #86909c);
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
.block-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px 8px;
|
||
}
|
||
|
||
.block-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
margin-bottom: 6px;
|
||
border: 1px dashed var(--ant-color-border, #c9cdd4);
|
||
border-radius: 4px;
|
||
background: var(--ant-color-bg-container, #fff);
|
||
font-size: 13px;
|
||
color: var(--ant-color-text-secondary, #4e5969);
|
||
cursor: grab;
|
||
user-select: none;
|
||
transition: all 0.15s;
|
||
|
||
&:hover {
|
||
border-color: var(--ant-color-primary, #165dff);
|
||
color: var(--ant-color-primary, #165dff);
|
||
background: var(--ant-color-primary-bg, #f2f7ff);
|
||
}
|
||
|
||
&:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.block-label {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.empty-hint {
|
||
padding: 24px 12px;
|
||
text-align: center;
|
||
color: var(--ant-color-text-quaternary, #c9cdd4);
|
||
font-size: 12px;
|
||
}
|
||
</style>
|