68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<n-layout class="home">
|
||
|
|
<n-layout-header class="header">
|
||
|
|
<ToolBar />
|
||
|
|
</n-layout-header>
|
||
|
|
<!-- 左侧组件列表 -->
|
||
|
|
<n-layout has-sider sider-placement="right" class="main">
|
||
|
|
<!-- 中间画布 -->
|
||
|
|
<n-layout-content v-resize="editorWindowResizeHandler" class="content">
|
||
|
|
<n-scrollbar x-scrollable :style="scrollbarStyle">
|
||
|
|
<ScriptContent />
|
||
|
|
</n-scrollbar>
|
||
|
|
</n-layout-content>
|
||
|
|
<n-layout-sider
|
||
|
|
class="right"
|
||
|
|
width="240"
|
||
|
|
:collapsed="collapsedRight"
|
||
|
|
:native-scrollbar="false"
|
||
|
|
bordered
|
||
|
|
:collapsed-width="35"
|
||
|
|
collapse-mode="width"
|
||
|
|
show-trigger="arrow-circle"
|
||
|
|
@collapse="collapsedRight = true"
|
||
|
|
@expand="collapsedRight = false"
|
||
|
|
>
|
||
|
|
<ScriptHistory />
|
||
|
|
</n-layout-sider>
|
||
|
|
</n-layout>
|
||
|
|
</n-layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { NLayout, NLayoutContent, NLayoutHeader, NLayoutSider, NScrollbar } from 'naive-ui'
|
||
|
|
import { computed, ref } from 'vue'
|
||
|
|
|
||
|
|
import ScriptContent from '@/scriptView/Conetent.vue'
|
||
|
|
import ScriptHistory from '@/scriptView/History.vue'
|
||
|
|
|
||
|
|
import ToolBar from './ApiView/ToolBar'
|
||
|
|
|
||
|
|
const collapsedRight = ref(false)
|
||
|
|
|
||
|
|
const windowWidth = ref<number>(0)
|
||
|
|
const windowHeight = ref<number>(0)
|
||
|
|
const scrollbarStyle = computed(() => {
|
||
|
|
return {
|
||
|
|
width: windowWidth.value + 'px',
|
||
|
|
height: windowHeight.value + 'px'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const editorWindowResizeHandler = (entry: ResizeObserverEntry) => {
|
||
|
|
const { width, height } = entry.contentRect
|
||
|
|
windowWidth.value = width
|
||
|
|
windowHeight.value = height
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.header {
|
||
|
|
height: 5vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
height: 94vh;
|
||
|
|
}
|
||
|
|
</style>
|