改进 布局

src/components/Container.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import {NIcon, NLayout, NLayoutSider, NMenu} from "naive-ui"
-import {RouterView} from "vue-router"
-import type { MenuOption } from 'naive-ui'
-import { RouterLink } from 'vue-router'
-import {type Component, defineComponent, h} from 'vue'
-import {
-  BookOutline as BookIcon,
-  PersonOutline as PersonIcon,
-  WineOutline as WineIcon,
-  HomeOutline as HomeIcon
-} from '@vicons/ionicons5'
-function renderIcon (icon: Component) {
-  return () => h(NIcon, null, { default: () => h(icon) })
-}
-
-const menuOptions: MenuOption[] = [
-  {
-    label: () =>
-        h(
-            RouterLink,
-            {
-              to: {
-                name: 'home',
-                params: {
-                  lang: 'zh-CN'
-                }
-              }
-            },
-            { default: () => '回家' }
-        ),
-    key: 'go-back-home',
-    icon: renderIcon(HomeIcon)
-  },
-  {
-    key: 'divider-1',
-    type: 'divider',
-    props: {
-      style: {
-        marginLeft: '32px'
-      }
-    }
-  },
-  {
-    label: () =>
-        h(
-            'a',
-            {
-              href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F',
-              target: '_blank',
-              rel: 'noopenner noreferrer'
-            },
-            '且听风吟'
-        ),
-    key: 'hear-the-wind-sing',
-    icon: renderIcon(BookIcon)
-  },
-  {
-    label: '1973年的弹珠玩具',
-    key: 'pinball-1973',
-    icon: renderIcon(BookIcon),
-    disabled: true,
-    children: [
-      {
-        label: '鼠',
-        key: 'rat'
-      }
-    ]
-  },
-  {
-    label: '寻羊冒险记',
-    key: 'a-wild-sheep-chase',
-    icon: renderIcon(BookIcon),
-    disabled: true
-  },
-  {
-    label: '舞，舞，舞',
-    key: 'dance-dance-dance',
-    icon: renderIcon(BookIcon),
-    children: [
-      {
-        type: 'group',
-        label: '人物',
-        key: 'people',
-        children: [
-          {
-            label: '叙事者',
-            key: 'narrator',
-            icon: renderIcon(PersonIcon)
-          },
-          {
-            label: '羊男',
-            key: 'sheep-man',
-            icon: renderIcon(PersonIcon)
-          }
-        ]
-      },
-      {
-        label: '饮品',
-        key: 'beverage',
-        icon: renderIcon(WineIcon),
-        children: [
-          {
-            label: '威士忌',
-            key: 'whisky'
-          }
-        ]
-      },
-      {
-        label: '食物',
-        key: 'food',
-        children: [
-          {
-            label: '三明治',
-            key: 'sandwich'
-          }
-        ]
-      },
-      {
-        label: '过去增多，未来减少',
-        key: 'the-past-increases-the-future-recedes'
-      }
-    ]
-  }
-]
-</script>
-
-<template>
-  <n-layout has-sider class="min-h-screen">
-    <n-layout-sider>
-      <n-menu :options="menuOptions" />
-    </n-layout-sider>
-    <n-layout embedded  :native-scrollbar="false"
-               content-style="padding: 24px;padding-top: 10px" class="min-h-screen">
-      <router-view/>
-
-    </n-layout>
-  </n-layout>
-
-</template>
-
-<style scoped>
-
-</style>

src/components/Layout.vue

@@ -10,7 +10,7 @@ import {
   useOsTheme,
     zhCN,dateZhCN
 } from 'naive-ui'
-import Container from "@/components/Container.vue";
+import Container from "@/components/ManageLayout.vue";
 
 const osTheme = useOsTheme()
 const theme = computed(() => (osTheme.value === 'dark' ? darkTheme : null))
@@ -23,7 +23,7 @@ const theme = computed(() => (osTheme.value === 'dark' ? darkTheme : null))
       <n-message-provider>
         <n-global-style/>
         <n-dialog-provider>
-          <Container></Container>
+          <router-view />
         </n-dialog-provider>
 
       </n-message-provider>

src/components/ManageLayout.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type {MenuOption} from 'naive-ui'
+import {NIcon, NLayout, NLayoutSider, NMenu} from "naive-ui"
+import {RouterLink} from "vue-router"
+import {type Component, h, ref} from 'vue'
+
+
+import {
+  HomeOutline as HomeIcon,
+} from '@vicons/ionicons5'
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, {default: () => h(icon)})
+}
+
+const collapsed = ref(false)
+
+const menuOptions: MenuOption[] = [
+  {
+    label: () =>
+        h(
+            RouterLink,
+            {
+              to: {
+                name: 'manage.index',
+              }
+            },
+            {default: () => '中台'}
+        ),
+    key: 'go-back-home',
+    icon: renderIcon(HomeIcon)
+  },
+]
+</script>
+
+<template>
+  <n-layout has-sider class="min-h-screen">
+    <n-layout-sider bordered
+                    collapse-mode="width"
+                    :collapsed-width="64"
+                    :width="240"
+                    :collapsed="collapsed"
+                    show-trigger
+                    @collapse="collapsed = true"
+                    @expand="collapsed = false">
+      <n-menu
+          :collapsed="collapsed"
+          :collapsed-width="64"
+          :collapsed-icon-size="22"
+          :options="menuOptions"/>
+    </n-layout-sider>
+    <n-layout embedded :native-scrollbar="false"
+              content-style="padding: 24px;padding-top: 10px" class="min-h-screen">
+
+      <slot/>
+
+    </n-layout>
+  </n-layout>
+
+</template>
+
+<style scoped>
+
+</style>

src/views/manage/Index.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
   import {NH1, NText} from 'naive-ui'
+  import ManageLayout from "@/components/ManageLayout.vue";
 </script>
 
 <template>
-  <n-h1>
-    <n-text type="primary">
-      中台
-    </n-text>
-  </n-h1>
+  <ManageLayout>
+    <n-h1>
+      <n-text type="primary">
+        中台
+      </n-text>
+    </n-h1>
+  </ManageLayout>
 </template>
 
 <style scoped>