✨ feat(Layout): 添加自定义菜单组件并添加后台布局

src/views/layout/back-layout.vue

@@ -3,43 +3,8 @@
         <Header></Header>
         <div class="flex-1 flex shrink-0" style="height:calc(100vh - 100px)">
             <div class="h-full ">
-                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
-                    <el-sub-menu index="1">
-                        <template #title>
-                            <el-icon>
-                                <location />
-                            </el-icon>
-                            <span>Navigator One</span>
-                        </template>
-                        <el-menu-item-group title="Group One">
-                            <el-menu-item index="1-1">item one</el-menu-item>
-                            <el-menu-item index="1-2">item two</el-menu-item>
-                        </el-menu-item-group>
-                        <el-menu-item-group title="Group Two">
-                            <el-menu-item index="1-3">item three</el-menu-item>
-                        </el-menu-item-group>
-                        <el-sub-menu index="1-4">
-                            <template #title>item four</template>
-                            <el-menu-item index="1-4-1">item one</el-menu-item>
-                        </el-sub-menu>
-                    </el-sub-menu>
-                    <el-menu-item index="2">
-                        <el-icon><icon-menu /></el-icon>
-                        <span>Navigator Two</span>
-                    </el-menu-item>
-                    <el-menu-item index="3" disabled>
-                        <el-icon>
-                            <document />
-                        </el-icon>
-                        <span>Navigator Three</span>
-                    </el-menu-item>
-                    <el-menu-item index="4">
-                        <el-icon>
-                            <setting />
-                        </el-icon>
-                        <span>Navigator Four</span>
-                    </el-menu-item>
-                </el-menu>
+                <elMenu></elMenu>
+
             </div>
             <div class=" flex-1 overflow-y-auto">
                 <Transition name="slide-right">
@@ -54,7 +19,7 @@ import { ref } from 'vue'
 
 import { useI18n } from 'vue-i18n'
 import Header from './components/Header.vue'
-
+import elMenu from './components/elMenu.vue'
 
 
 import { useStoreI18n } from '@/hook/i18n'

src/views/layout/components/elMenu.vue

@@ -0,0 +1,68 @@
+<template>
+    <el-menu router :default-active="$route.path">
+        <template v-for="route in routes" :key="route.path">
+            <!-- 有子路由的情况 -->
+            <el-sub-menu v-if="route.children?.length" :index="route.path">
+                <template #title>
+                    <el-icon v-if="route.meta?.icon">
+                        <component :is="route.meta.icon" />
+                    </el-icon>
+                    <span>{{ route.meta?.title }}</span>
+                </template>
+                <!-- 修改为 el-menu-item -->
+                <template v-for="childRoute in route.children" :key="childRoute.path">
+                    <el-menu-item :index="childRoute.path" @click="handleClick(childRoute)">
+                        <el-icon v-if="childRoute.meta?.icon">
+                            <component :is="childRoute.meta.icon" />
+                        </el-icon>
+                        <span>{{ childRoute.meta?.title }}</span>
+                    </el-menu-item>
+                </template>
+            </el-sub-menu>
+
+            <!-- 无子路由的情况 -->
+            <el-menu-item v-else :index="route.path" @click="handleClick(route)">
+                <el-icon v-if="route.meta?.icon">
+                    <component :is="route.meta.icon" />
+                </el-icon>
+                <span>{{ route.meta?.title }}</span>
+            </el-menu-item>
+        </template>
+    </el-menu>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+// 定义 props 接收 routes
+defineProps({
+    routes: {
+        type: Array,
+        default: () => [
+
+            {
+                path: 'dashboard',
+                name: 'Dashboard',
+                meta: { title: '仪表盘', icon: 'DataAnalysis' },
+            },
+            {
+                path: 'user',
+                meta: { title: '用户管理', icon: 'User' },
+                children: [
+                    {
+                        path: 'list',
+                        name: 'UserList',
+                        meta: { title: '用户列表' },
+                    }
+                ]
+            }
+
+        ]
+    }
+})
+
+const router = useRouter()
+const handleClick = (route) => {
+    router.push(route.path)
+}
+</script>