侧边栏改为两级

src/components/DeviceTemplateList.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="device-template-list">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <h2 class="page-title">设备模板管理</h2>
+        </div>
+      </template>
+      <el-empty description="设备模板管理功能待开发" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceTemplateList',
+};
+</script>
+
+<style scoped>
+.device-template-list {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+</style>

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-sub-menu index="/device-management">
-        </el-menu-item>
+          <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'); // 清除用户名
+      localStorage.removeItem('username');
-      username.value = '管理员'; // 重置显示
+      username.value = '管理员';
       router.push('/login');
     };
 

src/main.js

@@ -7,7 +7,8 @@ import App from './App.vue';
 import Home from './components/Home.vue';
 import DeviceList from './components/DeviceList.vue';
 import PlanList from './components/PlanList.vue';
-import LoginForm from './components/LoginForm.vue'; // 导入登录组件
+import LoginForm from './components/LoginForm.vue';
+import DeviceTemplateList from './components/DeviceTemplateList.vue'; // 导入设备模板列表组件
 
 // 导入全局样式
 import './assets/styles/main.css';
@@ -16,6 +17,7 @@ import './assets/styles/main.css';
 const routes = [
   { path: '/', component: Home, meta: { requiresAuth: true } },
   { path: '/devices', component: DeviceList, meta: { requiresAuth: true } },
+  { path: '/device-templates', component: DeviceTemplateList, meta: { requiresAuth: true } }, // 添加设备模板路由
   { path: '/plans', component: PlanList, meta: { requiresAuth: true } },
   { path: '/login', component: LoginForm }
 ];