45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<!-- 物料面板 -->
|
|
<script setup lang="ts">
|
|
import MaterialItem from '@/editor/panels/material/components/MaterialItem.vue'
|
|
import { getMaterialGroups, getMaterialsByGroup } from '@/materials'
|
|
|
|
defineOptions({
|
|
name: 'MaterialPanel',
|
|
})
|
|
|
|
const activeGroup = ref('charts')
|
|
|
|
const groups = getMaterialGroups()
|
|
|
|
const currentMaterials = computed(() => {
|
|
return getMaterialsByGroup(activeGroup.value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex">
|
|
<div class="w-12 border-r border-white/20">
|
|
<div
|
|
v-for="value in groups"
|
|
:key="value.key"
|
|
class="cursor-pointer flex flex-col items-center justify-center text-sm text-(--el-text-color-regular) h-12"
|
|
:class="{ 'bg-white/10 text-white': activeGroup === value.key }"
|
|
@click="activeGroup = value.key"
|
|
>
|
|
<span><Icon :icon="value.icon" width="16" /></span>
|
|
<span>{{ value.name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 p-2.5 overflow-auto">
|
|
<MaterialItem
|
|
class="mt-2.5"
|
|
v-for="item in currentMaterials"
|
|
:key="item.name"
|
|
:material="item"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|