侧边栏改为两级

src/layouts/MainLayout.vue

@@ -20,10 +20,23 @@
           <el-icon><House /></el-icon>
           <template #title>首页</template>
         </el-menu-item>
-        <el-menu-item index="/devices">
-          <el-icon><Monitor /></el-icon>
-          <template #title>设备管理</template>
-        </el-menu-item>
+
+        <!-- 设备管理二级菜单 -->
+        <el-sub-menu index="/device-management">
+          <template #title>
+            <el-icon><Setting /></el-icon>
+            <span>设备</span>
+          </template>
+          <el-menu-item index="/devices">
+            <el-icon><Monitor /></el-icon>
+            <template #title>设备管理</template>
+          </el-menu-item>
+          <el-menu-item index="/device-templates">
+            <el-icon><Tickets /></el-icon>
+            <template #title>设备模板管理</template>
+          </el-menu-item>
+        </el-sub-menu>
+
         <el-menu-item index="/plans">
           <el-icon><Calendar /></el-icon>
           <template #title>计划管理</template>
@@ -74,7 +87,7 @@
 <script>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand } from '@element-plus/icons-vue';
+import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue'; // 导入Setting和Tickets图标
 
 export default {
   name: 'MainLayout',
@@ -85,7 +98,9 @@ export default {
     ArrowDown,
     Menu,
     Fold,
-    Expand
+    Expand,
+    Setting, // 注册Setting图标
+    Tickets // 注册Tickets图标
   },
   setup() {
     const route = useRoute();
@@ -111,6 +126,10 @@ export default {
     };
     
     const activeMenu = computed(() => {
+      // 对于二级菜单，需要判断当前路由是否在其子菜单中
+      if (route.path === '/devices' || route.path === '/device-templates') {
+        return route.path; // 激活子菜单项
+      }
       return route.path;
     });
 
@@ -118,6 +137,7 @@ export default {
       const routeMap = {
         '/': '系统首页',
         '/devices': '设备管理',
+        '/device-templates': '设备模板管理',
         '/plans': '计划管理'
       };
       return routeMap[route.path] || '猪场管理系统';
@@ -125,8 +145,8 @@ export default {
 
     const logout = () => {
       localStorage.removeItem('jwt_token');
-      localStorage.removeItem('username'); // 清除用户名
-      username.value = '管理员'; // 重置显示
+      localStorage.removeItem('username');
+      username.value = '管理员';
       router.push('/login');
     };