60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { folders } from "@/const/editor"
|
|
import { useEditorStore } from "@/stores/editor"
|
|
import { onMounted, ref } from 'vue'
|
|
import { Pane } from 'tweakpane'
|
|
const editorStore = useEditorStore()
|
|
|
|
const paneContainer = ref<HTMLDivElement | null>(null)
|
|
|
|
// 创建 tweakpane 面板
|
|
function createPane(container: HTMLDivElement) {
|
|
if (!paneContainer.value) return
|
|
|
|
// 清理旧的 pane
|
|
|
|
const pane = new Pane({ container })
|
|
|
|
// 遍历 folders 并创建对应的控制项
|
|
folders.forEach(folder => {
|
|
if (folder.type === 'folder' && folder.children) {
|
|
const f = pane.addFolder({
|
|
title: folder.label,
|
|
expanded: true
|
|
})
|
|
|
|
folder.children.forEach((item: any) => {
|
|
f.addBinding(editorStore.formData, item.label, item.params)
|
|
})
|
|
} else {
|
|
pane.addBinding(editorStore.formData, folder.label, folder.params)
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
editorStore.initializeFormData()
|
|
createPane(paneContainer.value as HTMLDivElement)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="editor">
|
|
<div ref="paneContainer" class="pane-container"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.editor {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.pane-container {
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: transparent;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style> |