【新增】布局：初版

src/layout/MainContainer.vue

@@ -1,11 +1,51 @@
 <script setup>
     import { RouterView } from 'vue-router';
+    import MapLayer from '@/layout/MapLayer.vue';
+    import SideMenu from '@/layout/components/SideMenu.vue';
 </script>
 
 <template>
+    <MapLayer />
+    <t-layout :class="s.root">
+        <t-header>
+            <h1>云端无人机管理系统（管理员）</h1>
+        </t-header>
+        <t-layout>
+            <t-aside>
+                <SideMenu />
+            </t-aside>
+            <t-content>
                 <RouterView />
+            </t-content>
+        </t-layout>
+    </t-layout>
 </template>
 
 <style lang="less" module="s">
-    //
+    .root {
+        z-index: 1;
+        position: relative;
+        height: 100%;
+        pointer-events: none;
+
+        :global {
+            .t-layout__header {
+                pointer-events: auto;
+            }
+
+            .t-layout__sider {
+                width: fit-content;
+                background-color: transparent;
+                pointer-events: auto;
+            }
+
+            .t-layout--with-sider {
+                overflow: hidden;
+            }
+
+            .t-layout__content {
+                //pointer-events: none;
+            }
+        }
+    }
 </style>

src/layout/components/SideMenu.vue

@@ -0,0 +1,63 @@
+<script setup>
+    import { ref } from 'vue';
+
+    const collapsed2 = ref(false);
+
+    const changeCollapsed2 = () => {
+        collapsed2.value = !collapsed2.value;
+    };
+
+    const expanded2 = ref(['2']);
+</script>
+
+<template>
+    <t-menu v-model:expanded="expanded2" theme="dark" :class="s.root" default-value="2-1" :collapsed="collapsed2">
+        <t-menu-item value="item1">
+            <template #icon>
+                <font-icon name="icon-plant-height" />
+            </template>
+            实时监控
+        </t-menu-item>
+        <t-menu-item value="resource">
+            <template #icon>
+                <t-icon name="server" />
+            </template>
+            设备管理
+        </t-menu-item>
+        <t-menu-item value="root">
+            <template #icon>
+                <t-icon name="root-list" />
+            </template>
+            制造商管理
+        </t-menu-item>
+        <t-menu-item value="1">
+            <template #icon>
+                <t-icon name="server" />
+            </template>
+            架次管理
+        </t-menu-item>
+        <t-menu-item value="2">
+            <template #icon>
+                <t-icon name="server" />
+            </template>
+            禁飞区管理
+        </t-menu-item>
+        <t-menu-item value="3">
+            <template #icon>
+                <t-icon name="server" />
+            </template>
+            数据分析
+        </t-menu-item>
+        <template #operations>
+            <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed2">
+                <template #icon><t-icon name="view-list" /></template>
+            </t-button>
+        </template>
+    </t-menu>
+</template>
+
+<style lang="less" module="s">
+    .root {
+        //
+    }
+</style>

src/styles/common.less

@@ -10,3 +10,7 @@ html,
   padding: 0;
   height: 100%;
 }
+
+.t-layout {
+  background: transparent !important;
+}

src/views/ExampleView/ExampleView.vue

@@ -2,8 +2,16 @@
 </script>
 
 <template>
-    <div>ExampleView</div>
+    <div v-if="false" :class="s.root">ExampleView</div>
 </template>
 
 <style lang="less" module="s">
+    .root {
+        height: 100%;
+        pointer-events: none;
+        //background-color: fade(red, 80%);
+
+        :global {
+        }
+    }
 </style>