前端初始化

src/layout/Sidebar.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="sidebar" :class="{ 'is-collapsed': appStore.sidebarCollapsed }">
+    <div class="logo-container">
+      <img src="@/assets/logo.png" class="logo" />
+      <span v-show="!appStore.sidebarCollapsed" class="title">设备管理系统</span>
+    </div>
+    <el-scrollbar>
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="appStore.sidebarCollapsed"
+        :unique-opened="true"
+        router
+        background-color="#304156"
+        text-color="#bfcbd9"
+        active-text-color="#409EFF"
+      >
+        <template v-for="route in menuRoutes" :key="route.path">
+          <!-- 单个菜单项 -->
+          <el-menu-item
+            v-if="!route.children || route.children.length === 0"
+            :index="route.path"
+          >
+            <el-icon><component :is="route.meta?.icon" /></el-icon>
+            <template #title>{{ route.meta?.title }}</template>
+          </el-menu-item>
+
+          <!-- 带子菜单 -->
+          <el-sub-menu v-else :index="route.path">
+            <template #title>
+              <el-icon><component :is="route.meta?.icon" /></el-icon>
+              <span>{{ route.meta?.title }}</span>
+            </template>
+            <el-menu-item
+              v-for="child in route.children"
+              :key="child.path"
+              :index="resolvePath(route.path, child.path)"
+            >
+              <el-icon><component :is="child.meta?.icon" /></el-icon>
+              <template #title>{{ child.meta?.title }}</template>
+            </el-menu-item>
+          </el-sub-menu>
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/store/app'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+
+const activeMenu = computed(() => route.path)
+
+const menuRoutes = computed(() => {
+  return router.options.routes
+    .filter(r => r.component && r.path !== '/:pathMatch(.*)*')
+    .map(r => ({
+      ...r,
+      children: (r.children || []).filter(c => !c.path.includes(':'))
+    }))
+})
+
+function resolvePath(basePath, childPath) {
+  return childPath.startsWith('/') ? childPath : `${basePath}/${childPath}`
+}
+</script>
+
+<style scoped>
+.sidebar {
+  width: 210px;
+  height: 100vh;
+  background-color: #304156;
+  transition: width 0.3s;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar.is-collapsed {
+  width: 64px;
+}
+
+.logo-container {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  overflow: hidden;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.title {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.el-menu {
+  border-right: none;
+  flex: 1;
+}
+</style>