From 52df80ccc950b644ce5976a0c6ef4367a67fbba1 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Tue, 28 Nov 2023 18:01:49 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=EF=BC=9A=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/MainContainer.vue          | 44 ++++++++++++++++++-
 src/layout/components/SideMenu.vue    | 63 +++++++++++++++++++++++++++
 src/styles/common.less                |  4 ++
 src/views/ExampleView/ExampleView.vue | 10 ++++-
 4 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 src/layout/components/SideMenu.vue

diff --git a/src/layout/MainContainer.vue b/src/layout/MainContainer.vue
index d2f5bf3..7fd593e 100644
--- a/src/layout/MainContainer.vue
+++ b/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>
-    <RouterView />
+    <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>
diff --git a/src/layout/components/SideMenu.vue b/src/layout/components/SideMenu.vue
new file mode 100644
index 0000000..11c626f
--- /dev/null
+++ b/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>
diff --git a/src/styles/common.less b/src/styles/common.less
index 8a1b754..d8894d7 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -10,3 +10,7 @@ html,
   padding: 0;
   height: 100%;
 }
+
+.t-layout {
+  background: transparent !important;
+}
diff --git a/src/views/ExampleView/ExampleView.vue b/src/views/ExampleView/ExampleView.vue
index cce3990..b43b08b 100644
--- a/src/views/ExampleView/ExampleView.vue
+++ b/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>