feat: layout

src/layout/layout.vue

@@ -2,58 +2,7 @@
     <a-layout class="a-layout" >
         <Navbar />
         <a-layout>
-        <a-layout-sider
-            width="200"
-            style="background: #fff"
-            breakpoint="lg"
-            collapsed-width="0"
-            @collapse="onCollapse"
-            @breakpoint="onBreakpoint"
-        >
-            <a-menu
-            v-model:selectedKeys="selectedKeys2"
-            v-model:openKeys="openKeys"
-            mode="inline"
-            :style="{ height: '100%', borderRight: 0 }"
-            >
-            <a-sub-menu key="sub1">
-                <template #title>
-                <span>
-                    <user-outlined />
-                    subnav 1
-                </span>
-                </template>
-                <a-menu-item key="1">option1</a-menu-item>
-                <a-menu-item key="2">option2</a-menu-item>
-                <a-menu-item key="3">option3</a-menu-item>
-                <a-menu-item key="4">option4</a-menu-item>
-            </a-sub-menu>
-            <a-sub-menu key="sub2">
-                <template #title>
-                <span>
-                    <laptop-outlined />
-                    subnav 2
-                </span>
-                </template>
-                <a-menu-item key="5">option5</a-menu-item>
-                <a-menu-item key="6">option6</a-menu-item>
-                <a-menu-item key="7">option7</a-menu-item>
-                <a-menu-item key="8">option8</a-menu-item>
-            </a-sub-menu>
-            <a-sub-menu key="sub3">
-                <template #title>
-                <span>
-                    <notification-outlined />
-                    subnav 3
-                </span>
-                </template>
-                <a-menu-item key="9">option9</a-menu-item>
-                <a-menu-item key="10">option10</a-menu-item>
-                <a-menu-item key="11">option11</a-menu-item>
-                <a-menu-item key="12">option12</a-menu-item>
-            </a-sub-menu>
-            </a-menu>
-        </a-layout-sider>
+        <Sider />
         <a-layout style="padding: 0 24px 24px">
             <a-breadcrumb style="margin: 16px 0">
                 <a-breadcrumb-item>Home</a-breadcrumb-item>
@@ -75,7 +24,7 @@ import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/
 import { defineComponent, ref } from 'vue'
 import router from '@/router/index'
 import Navbar from './navbar.vue'
-
+import Sider from './sider.vue'
 const onCollapse = () => {}
 const onBreakpoint = () => {}
 

src/layout/sider.vue

@@ -3,53 +3,27 @@
     <a-col>
       <a-layout-sider
             width="200"
-            style="background: #fff"
+            style="background: #fff; height: 100%;"
             breakpoint="lg"
             collapsed-width="0"
             @collapse="onCollapse"
             @breakpoint="onBreakpoint"
         >
-            <a-menu
+         <a-menu
             v-model:selectedKeys="selectedKeys2"
             v-model:openKeys="openKeys"
             mode="inline"
             :style="{ height: '100%', borderRight: 0 }"
             >
-            <a-sub-menu key="sub1">
+
+            <a-sub-menu  v-for="item in silders" :key="item.path">
                 <template #title>
                 <span>
                     <user-outlined />
-                    subnav 1
-                </span>
-                </template>
-                <a-menu-item key="1">option1</a-menu-item>
-                <a-menu-item key="2">option2</a-menu-item>
-                <a-menu-item key="3">option3</a-menu-item>
-                <a-menu-item key="4">option4</a-menu-item>
-            </a-sub-menu>
-            <a-sub-menu key="sub2">
-                <template #title>
-                <span>
-                    <laptop-outlined />
-                    subnav 2
-                </span>
-                </template>
-                <a-menu-item key="5">option5</a-menu-item>
-                <a-menu-item key="6">option6</a-menu-item>
-                <a-menu-item key="7">option7</a-menu-item>
-                <a-menu-item key="8">option8</a-menu-item>
-            </a-sub-menu>
-            <a-sub-menu key="sub3">
-                <template #title>
-                <span>
-                    <notification-outlined />
-                    subnav 3
+                    {{item.name}}
                 </span>
                 </template>
-                <a-menu-item key="9">option9</a-menu-item>
-                <a-menu-item key="10">option10</a-menu-item>
-                <a-menu-item key="11">option11</a-menu-item>
-                <a-menu-item key="12">option12</a-menu-item>
+                <a-menu-item v-for="_ in item.children" :key="_.path" >{{_.name}}</a-menu-item>
             </a-sub-menu>
             </a-menu>
         </a-layout-sider>
@@ -67,7 +41,7 @@ const onBreakpoint = () => {}
 const selectedKeys2 = ref<string[]>(['1'])
 const openKeys = ref<string[]>(['sub1'])
 
-const silders = router.options.routes.find(route => route.path == '/')?.children
+const silders = router.options.routes.find(route => route.path === '/')?.children
 
 </script>
 

src/router/index.ts

@@ -8,9 +8,16 @@ const routes: Array<Router.RoutesProps> = [
     component: () => import('@/layout/layout.vue'),
     children: [
       {
-        path: '/',
+        path: '/dashboard',
         name: '仪表盘',
-        component: () => import('@/pages/Dashboard/index.vue')
+        component: () => import('@/pages/Dashboard/index.vue'),
+        children: [
+          {
+            path: '/dashboard-item',
+            name: '仪表盘item',
+            component: () => import('@/pages/Dashboard/index.vue')
+          }
+        ]
       }
     ]
   }