重构路由

src/layouts/MainLayout.vue

@@ -4,36 +4,46 @@
     <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
       <div class="logo" @click="toggleCollapse">
         <h2 v-if="!isCollapse" class="logo-text">猪场管理系统</h2>
-        <el-icon v-else class="logo-icon"><Menu /></el-icon>
+        <el-icon v-else class="logo-icon">
+          <Menu/>
+        </el-icon>
       </div>
       <el-menu
-        :default-active="activeMenu"
-        class="sidebar-menu"
-        background-color="#545c64"
-        text-color="#fff"
-        active-text-color="#ffd04b"
-        :collapse="isCollapse"
-        :collapse-transition="false"
-        router
-        :default-openeds="['/device-management', '/monitor', '/pms']"
+          :default-active="activeMenu"
+          class="sidebar-menu"
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#ffd04b"
+          :collapse="isCollapse"
+          :collapse-transition="false"
+          router
+          :default-openeds="['/device-management', '/monitor', '/pms']"
       >
         <el-menu-item index="/">
-          <el-icon><House /></el-icon>
+          <el-icon>
+            <House/>
+          </el-icon>
           <template #title>首页</template>
         </el-menu-item>
 
         <!-- 设备管理二级菜单 -->
         <el-sub-menu index="/device-management">
           <template #title>
-            <el-icon><Setting /></el-icon>
+            <el-icon>
+              <Setting/>
+            </el-icon>
             <span>设备</span>
           </template>
           <el-menu-item index="/devices">
-            <el-icon><Monitor /></el-icon>
+            <el-icon>
+              <Monitor/>
+            </el-icon>
             <template #title>设备管理</template>
           </el-menu-item>
           <el-menu-item index="/device-templates">
-            <el-icon><Tickets /></el-icon>
+            <el-icon>
+              <Tickets/>
+            </el-icon>
             <template #title>设备模板管理</template>
           </el-menu-item>
         </el-sub-menu>
@@ -41,104 +51,161 @@
         <!-- 猪场管理二级菜单 -->
         <el-sub-menu index="/pms">
           <template #title>
-            <el-icon><OfficeBuilding /></el-icon>
+            <el-icon>
+              <OfficeBuilding/>
+            </el-icon>
             <span>猪场管理</span>
           </template>
           <el-menu-item index="/pms/farm-management">
-            <el-icon><Tickets /></el-icon>
+            <el-icon>
+              <Tickets/>
+            </el-icon>
             <template #title>栏舍管理</template>
           </el-menu-item>
           <el-menu-item index="/pms/batch-management">
-            <el-icon><Management /></el-icon>
+            <el-icon>
+              <Management/>
+            </el-icon>
             <template #title>猪群管理</template>
           </el-menu-item>
         </el-sub-menu>
 
         <el-menu-item index="/plans">
-          <el-icon><Calendar /></el-icon>
+          <el-icon>
+            <Calendar/>
+          </el-icon>
           <template #title>计划管理</template>
         </el-menu-item>
 
-        <!-- 系统监控二级菜单 -->
+        <!-- 数据中心二级菜单 -->
         <el-sub-menu index="/monitor">
           <template #title>
-            <el-icon><DataAnalysis /></el-icon>
-            <span>系统监控</span>
+            <el-icon>
+              <DataAnalysis/>
+            </el-icon>
+            <span>数据中心</span>
           </template>
           <el-menu-item index="/monitor/device-command-logs">
-            <el-icon><Document /></el-icon>
+            <el-icon>
+              <Document/>
+            </el-icon>
             <template #title>设备命令日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/feed-usage-records">
-            <el-icon><Food /></el-icon>
+            <el-icon>
+              <Food/>
+            </el-icon>
             <template #title>饲料使用记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/medication-logs">
-            <el-icon><FirstAidKit /></el-icon>
+            <el-icon>
+              <FirstAidKit/>
+            </el-icon>
             <template #title>用药记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/notifications">
-            <el-icon><Bell /></el-icon>
+            <el-icon>
+              <Bell/>
+            </el-icon>
             <template #title>通知记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/pending-collections">
-            <el-icon><Clock /></el-icon>
+            <el-icon>
+              <Clock/>
+            </el-icon>
             <template #title>待采集请求</template>
           </el-menu-item>
           <el-menu-item index="/monitor/pig-batch-logs">
-            <el-icon><Files /></el-icon>
+            <el-icon>
+              <Files/>
+            </el-icon>
             <template #title>猪批次日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/pig-purchases">
-            <el-icon><ShoppingCart /></el-icon>
+            <el-icon>
+              <ShoppingCart/>
+            </el-icon>
             <template #title>猪只采购记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/pig-sales">
-            <el-icon><SoldOut /></el-icon>
+            <el-icon>
+              <SoldOut/>
+            </el-icon>
             <template #title>猪只售卖记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/pig-sick-logs">
-            <el-icon><Warning /></el-icon>
+            <el-icon>
+              <Warning/>
+            </el-icon>
             <template #title>病猪日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/pig-transfer-logs">
-            <el-icon><Switch /></el-icon>
+            <el-icon>
+              <Switch/>
+            </el-icon>
             <template #title>猪只迁移日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/raw-material-purchases">
-            <el-icon><Shop /></el-icon>
+            <el-icon>
+              <Shop/>
+            </el-icon>
             <template #title>原料采购记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/raw-material-stock-logs">
-            <el-icon><Coin /></el-icon>
+            <el-icon>
+              <Coin/>
+            </el-icon>
             <template #title>原料库存日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/sensor-data">
-            <el-icon><DataLine /></el-icon>
+            <el-icon>
+              <DataLine/>
+            </el-icon>
             <template #title>传感器数据</template>
           </el-menu-item>
           <el-menu-item index="/monitor/plan-execution-logs">
-            <el-icon><List /></el-icon>
+            <el-icon>
+              <List/>
+            </el-icon>
             <template #title>计划执行日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/task-execution-logs">
-            <el-icon><Finished /></el-icon>
+            <el-icon>
+              <Finished/>
+            </el-icon>
             <template #title>任务执行日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/user-action-logs">
-            <el-icon><User /></el-icon>
+            <el-icon>
+              <User/>
+            </el-icon>
             <template #title>用户操作日志</template>
           </el-menu-item>
           <el-menu-item index="/monitor/weighing-batches">
-            <el-icon><ScaleToOriginal /></el-icon>
+            <el-icon>
+              <ScaleToOriginal/>
+            </el-icon>
             <template #title>批次称重记录</template>
           </el-menu-item>
           <el-menu-item index="/monitor/weighing-records">
-            <el-icon><ScaleToOriginal /></el-icon>
+            <el-icon>
+              <ScaleToOriginal/>
+            </el-icon>
             <template #title>单次称重记录</template>
           </el-menu-item>
         </el-sub-menu>
 
+        <!-- 告警中心二级菜单 -->
+        <el-sub-menu index="/alarm">
+          <template #title>
+            <el-icon>
+              <Bell/>
+            </el-icon>
+            <span>告警中心</span>
+          </template>
+          <!-- 占位, 后续可添加告警管理和告警配置 -->
+        </el-sub-menu>
+
       </el-menu>
     </el-aside>
 
@@ -149,14 +216,17 @@
         <div class="header-content">
           <div class="header-left">
             <el-button link @click="toggleCollapse">
-              <el-icon><Expand v-if="isCollapse" /><Fold v-else /></el-icon>
+              <el-icon>
+                <Expand v-if="isCollapse"/>
+                <Fold v-else/>
+              </el-icon>
             </el-button>
             <h3 class="page-title">{{ currentPageTitle }}</h3>
           </div>
           <div class="user-info">
             <el-dropdown>
               <span class="el-dropdown-link">
-                {{ username }} <el-icon><ArrowDown /></el-icon>
+                {{ username }} <el-icon><ArrowDown/></el-icon>
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -171,7 +241,7 @@
 
       <!-- 主内容区 -->
       <el-main class="main-content">
-        <router-view />
+        <router-view/>
       </el-main>
 
       <!-- 底部 -->
@@ -183,19 +253,72 @@
 </template>
 
 <script>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { 
-  House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management, Bell
+import {ref, computed, onMounted, onUnmounted} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import {
+  House,
+  Monitor,
+  Calendar,
+  ArrowDown,
+  Menu,
+  Fold,
+  Expand,
+  Setting,
+  Tickets,
+  DataAnalysis,
+  Document,
+  Food,
+  FirstAidKit,
+  Clock,
+  Files,
+  ShoppingCart,
+  SoldOut,
+  Warning,
+  Switch,
+  List,
+  Shop,
+  Coin,
+  DataLine,
+  Finished,
+  User,
+  ScaleToOriginal,
+  OfficeBuilding,
+  Management,
+  Bell
 } from '@element-plus/icons-vue';
-import { routeTitles } from '../routeTitles.js';
 
 export default {
   name: 'MainLayout',
   components: {
-    House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
-    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management, Bell
+    House,
+    Monitor,
+    Calendar,
+    ArrowDown,
+    Menu,
+    Fold,
+    Expand,
+    Setting,
+    Tickets,
+    DataAnalysis,
+    Document,
+    Food,
+    FirstAidKit,
+    Clock,
+    Files,
+    ShoppingCart,
+    SoldOut,
+    Warning,
+    Switch,
+    List,
+    Shop,
+    Coin,
+    DataLine,
+    Finished,
+    User,
+    ScaleToOriginal,
+    OfficeBuilding,
+    Management,
+    Bell
   },
   setup() {
     const route = useRoute();
@@ -214,11 +337,11 @@ export default {
     onUnmounted(() => {
       window.removeEventListener('storage', handleStorageChange);
     });
-    
+
     const toggleCollapse = () => {
       isCollapse.value = !isCollapse.value;
     };
-    
+
     const activeMenu = computed(() => {
       const path = route.path;
       if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates')) {
@@ -228,7 +351,7 @@ export default {
     });
 
     const currentPageTitle = computed(() => {
-      return routeTitles[route.path] || '猪场管理系统';
+      return route.meta.title || '猪场管理系统';
     });
 
     const logout = () => {