SMDocEditor/src/views/Home/HomeView.vue

<script setup lang="ts">
import { provide, reactive } from 'vue'
import { initJson } from '@/utils'
import LeftSide from './subCom/LeftSide.vue'
import NavBar from './subCom/NavBar.vue'
import MainWrapper from './subCom/MainWrapper.vue'
import RightSide from './subCom/RightSide.vue'

const widgetJson = reactive({})
initJson(widgetJson)
provide('widgetJson', widgetJson)
</script>

<template>
  <section class="h-full flex">
    <LeftSide class="w-[260px] shrink-0" />
    <main class="grow h-full">
      <NavBar />
      <MainWrapper />
    </main>
    <RightSide class="w-[300px] shrink-0" />
  </section>
</template>

<style lang="scss" scoped>
section {
  main {
    border-left: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;
  }
}
</style>