Platform/src/views/project/summary/Summary.vue

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import ProjectExplorer from "./components/project-explorer/ProjectExplorer.vue";
import ToolBar from "./components/tool-bar/ToolBar.vue";
import CostTable from "./components/cost-table/CostTable.vue";
import BottomTabs from "./components/bottom-tabs/BottomTabs.vue";
import StdBill from "./components/std-bill/StdBill.vue";

const projectExplorerSize = ref(60)
const mainContentSize = ref(300)
const mainLeftSize = ref(150)
const mainRightSize = ref(50)

const mainLeftTopSize = ref(300)
const mainLeftBottomSize = ref(150)

const handleProjectExplorerSize = (size: number) => {
  projectExplorerSize.value = size
}
const handleMainContentSize = (size: number) => {
  mainContentSize.value = size
}
const handleMainLeftSize = (size: number) => {
  mainLeftSize.value = size
}
const handleMainRightSize = (size: number) => {
  mainRightSize.value = size
}
const handleMainLeftTopSize = (size: number) => {
  mainLeftTopSize.value = size
}
const handleMainLeftBottomSize = (size: number) => {
  mainLeftBottomSize.value = size
}
</script>

<template>
  <article class="summary-page">
    <resizable-layout>
      <resizable-layout-item :weight="projectExplorerSize" :min-width="200" @resize="handleProjectExplorerSize">
        <!-- 左侧项目结构浏览器 -->
        <project-explorer/>
      </resizable-layout-item>
      <resizable-layout-item :weight="mainContentSize" :min-width="400" @resize="handleMainContentSize">
        <!-- 工具栏 -->
        <tool-bar/>
        <resizable-layout style="height: calc(100% - 41px)">
          <resizable-layout-item :weight="mainLeftSize" :min-width="150" @resize="handleMainLeftSize">
            <resizable-layout direction="vertical">
              <resizable-layout-item :weight="mainLeftTopSize" :min-width="400" @resize="handleMainLeftTopSize">
                <!-- 造价书表格 -->
                <cost-table/>
              </resizable-layout-item>
              <resizable-layout-item :weight="mainLeftBottomSize" :min-width="400" @resize="handleMainLeftBottomSize">
                <!-- 底部 tabs -->
                <bottom-tabs/>
              </resizable-layout-item>
            </resizable-layout>
          </resizable-layout-item>
          <!-- 右侧布局：标准清单 -->
          <resizable-layout-item :weight="mainRightSize" :min-width="150" @resize="handleMainRightSize">
            <std-bill/>
          </resizable-layout-item>
        </resizable-layout>
      </resizable-layout-item>
    </resizable-layout>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>