58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<!-- 编辑器主入口 -->
|
|
<script setup lang="ts">
|
|
import ToolbarLeft from '@/editor/toolbar/ToolbarLeft.vue'
|
|
import ToolbarRight from '@/editor/toolbar/ToolbarRight.vue'
|
|
import MaterialPanel from '@/editor/panels/material/index.vue'
|
|
import LayerPanel from '@/editor/panels/layer/index.vue'
|
|
import CanvasRoot from '@/editor/canvas/index.vue'
|
|
import PropertyPanel from '@/editor/panels/property/index.vue'
|
|
import { useEditorStore } from '@/stores/editor'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
defineOptions({
|
|
name: 'ScreenEditor',
|
|
})
|
|
const editorStore = useEditorStore()
|
|
const { panelVisible } = storeToRefs(editorStore)
|
|
|
|
const materialWidth = computed(() => (panelVisible.value.material ? '260px' : '0'))
|
|
const propertyWidth = computed(() => (panelVisible.value.property ? '160px' : '0'))
|
|
const layerWidth = computed(() => (panelVisible.value.layer ? '260px' : '0'))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-screen select-none">
|
|
<header class="flex items-center justify-between h-14 border-b border-white/20 px-5">
|
|
<div class="w-75"><ToolbarLeft /></div>
|
|
<div class="">工作区</div>
|
|
<div class="w-75"><ToolbarRight /></div>
|
|
</header>
|
|
<main class="h-[calc(100%-56px)] flex">
|
|
<!-- 物料 -->
|
|
<MaterialPanel
|
|
class="w-[256px] overflow-hidden transition-all"
|
|
:style="{ width: materialWidth }"
|
|
>
|
|
</MaterialPanel>
|
|
<!-- 图层 -->
|
|
<LayerPanel
|
|
class="w-38 border-l border-r border-white/20 overflow-hidden transition-all"
|
|
:style="{ width: propertyWidth }"
|
|
>
|
|
图层
|
|
</LayerPanel>
|
|
<!-- 画布 -->
|
|
<CanvasRoot class="canvas flex-1">画布</CanvasRoot>
|
|
<!-- 属性 -->
|
|
<PropertyPanel
|
|
class="w-[256px] border-l border-white/20 overflow-hidden transition-all"
|
|
:style="{ width: layerWidth }"
|
|
>
|
|
属性
|
|
</PropertyPanel>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|