整体布局

src/App.vue

@@ -24,9 +24,17 @@ const show = computed(() => store.loading)
 const themeOverrides = Theme
 </script>
 <style>
+#app,
+#app>div,
 html,
 body {
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
 }
 </style>

src/assets/native-plugin.ts

@@ -2,14 +2,27 @@ import {
   create,
   NConfigProvider,
   NNotificationProvider,
-  NButton
+  NButton,
+  NLayout,
+  NLayoutContent,
+  NLayoutHeader,
+  NLayoutFooter,
+  NLayoutSider,
+  NMenu
 } from 'naive-ui'
 
 const naive = create({
   components: [
     NConfigProvider,
     NNotificationProvider,
-    NButton
+    NButton,
+    NLayout,
+    NLayoutContent,
+    NLayoutHeader,
+    NLayoutSider,
+    NLayoutFooter,
+    NMenu
+
   ]
 })
 

src/pages/home/index.vue

@@ -1,25 +1,102 @@
-<script setup lang="ts">
-import NetService from '@/services/net.service'
-import { useRouter } from 'vue-router'
-const netService = new NetService()
-const router = useRouter()
-function sendAudio() {
-  console.log(123)
-  router.push('/test')
-  // netService.post('/sys/login', { userAccount: 1, userPwd: 'c4ca4238a0b923820dcc509a6f75849b' })
-}
-</script>
 <template>
-  <div style="position: relative;">
-    <n-button
-      type="primary"
-      @click="sendAudio"
-    >
-      我不是全局组件
-    </n-button>
-    <icon
-      name="add"
-      :size="20"
-    />
-  </div>
+  <n-layout>
+    <n-layout has-sider>
+      <n-layout-sider
+        bordered
+        show-trigger
+        collapse-mode="width"
+        :collapsed-width="64"
+        :width="240"
+        :native-scrollbar="false"
+      >
+        <n-menu
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="menuOptions"
+        />
+      </n-layout-sider>
+      <n-layout>
+        123
+      </n-layout>
+    </n-layout>
+  </n-layout>
 </template>
+<script setup lang="ts">
+
+const menuOptions = [
+  {
+    label: '且听风吟',
+    key: 'hear-the-wind-sing'
+  },
+  {
+    label: '1973年的弹珠玩具',
+    key: 'pinball-1973',
+    disabled: true,
+    children: [
+      {
+        label: '鼠',
+        key: 'rat'
+      }
+    ]
+  },
+  {
+    label: '寻羊冒险记',
+    key: 'a-wild-sheep-chase',
+    disabled: true
+  },
+  {
+    label: '舞，舞，舞',
+    key: 'dance-dance-dance',
+    children: [
+      {
+        type: 'group',
+        label: '人物',
+        key: 'people',
+        children: [
+          {
+            label: '叙事者',
+            key: 'narrator'
+          },
+          {
+            label: '羊男',
+            key: 'sheep-man'
+          }
+        ]
+      },
+      {
+        label: '饮品',
+        key: 'beverage',
+        children: [
+          {
+            label: '威士忌',
+            key: 'whisky'
+          }
+        ]
+      },
+      {
+        label: '食物',
+        key: 'food',
+        children: [
+          {
+            label: '三明治',
+            key: 'sandwich'
+          }
+        ]
+      },
+      {
+        label: '过去增多，未来减少',
+        key: 'the-past-increases-the-future-recedes'
+      }
+    ]
+  }
+]
+</script>
+<style lang="scss" scoped>
+.n-layout {
+  height: 100%;
+
+  .n-layout-content {
+    height: calc(100% - 22px);
+  }
+}
+</style>