重构路由

src/layouts/MainLayout.vue

@@ -4,7 +4,9 @@
     <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"
@@ -18,22 +20,30 @@
           :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>
+            <el-icon>
-            <span>系统监控</span>
+              <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 {ref, computed, onMounted, onUnmounted} from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import {useRoute, useRouter} from 'vue-router';
 import {
-  House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets, DataAnalysis, Document, Food,
+  House,
-  FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management, Bell
+  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,
+    House,
-    FirstAidKit, Clock, Files, ShoppingCart, SoldOut, Warning, Switch, List, Shop, Coin, DataLine, Finished, User, ScaleToOriginal, OfficeBuilding, Management, Bell
+    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();
@@ -228,7 +351,7 @@ export default {
     });
 
     const currentPageTitle = computed(() => {
-      return routeTitles[route.path] || '猪场管理系统';
+      return route.meta.title || '猪场管理系统';
     });
 
     const logout = () => {

src/main.js

@@ -1,94 +1,13 @@
 import {createApp} from 'vue';
-import {createRouter, createWebHistory} from 'vue-router';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'; // 导入 Element Plus 中文语言包
-
 import App from './App.vue';
-import Home from './views/home/Home.vue';
+import router from './router'; // 导入重构后的路由
-import DeviceList from './views/device/DeviceList.vue';
-import PlanList from './views/plan/PlanList.vue';
-import LoginForm from './views/home/LoginForm.vue';
-import DeviceTemplateList from './views/device/DeviceTemplateList.vue';
-import PigFarmManagementView from './views/pms/PigFarmManagementView.vue'; // 导入栏舍管理视图
-import PigBatchManagementView from './views/pms/PigBatchManagementView.vue'; // 导入猪群管理视图
-
-// --- 统一导入所有监控视图 ---
-import DeviceCommandLogView from './views/monitor/DeviceCommandLogView.vue';
-import FeedUsageRecordsView from './views/monitor/FeedUsageRecordsView.vue';
-import MedicationLogsView from './views/monitor/MedicationLogsView.vue';
-import NotificationLogView from './views/monitor/NotificationLogView.vue';
-import PendingCollectionsView from './views/monitor/PendingCollectionsView.vue';
-import PigBatchLogsView from './views/monitor/PigBatchLogsView.vue';
-import PigPurchasesView from './views/monitor/PigPurchasesView.vue';
-import PigSalesView from './views/monitor/PigSalesView.vue';
-import PigSickLogsView from './views/monitor/PigSickLogsView.vue';
-import PigTransferLogsView from './views/monitor/PigTransferLogsView.vue';
-import PlanExecutionLogsView from './views/monitor/PlanExecutionLogsView.vue';
-import RawMaterialPurchasesView from './views/monitor/RawMaterialPurchasesView.vue';
-import RawMaterialStockLogsView from './views/monitor/RawMaterialStockLogsView.vue';
-import SensorDataView from './views/monitor/SensorDataView.vue';
-import TaskExecutionLogsView from './views/monitor/TaskExecutionLogsView.vue';
-import UserActionLogsView from './views/monitor/UserActionLogsView.vue';
-import WeighingBatchesView from './views/monitor/WeighingBatchesView.vue';
-import WeighingRecordsView from './views/monitor/WeighingRecordsView.vue';
-// ---------------------------
 
 // 导入全局样式
 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},
-    {path: '/pms/farm-management', name: 'PigFarmManagement', component: PigFarmManagementView, meta: { requiresAuth: true, title: '栏舍管理' }},
-    {path: '/pms/batch-management', name: 'PigBatchManagement', component: PigBatchManagementView, meta: { requiresAuth: true, title: '猪群管理' }},
-
-    // --- 统一注册所有监控路由 ---
-    {path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true}},
-    {path: '/monitor/feed-usage-records', component: FeedUsageRecordsView, meta: {requiresAuth: true}},
-    {path: '/monitor/medication-logs', component: MedicationLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/notifications', component: NotificationLogView, meta: {requiresAuth: true}},
-    {path: '/monitor/pending-collections', component: PendingCollectionsView, meta: {requiresAuth: true}},
-    {path: '/monitor/pig-batch-logs', component: PigBatchLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/pig-purchases', component: PigPurchasesView, meta: {requiresAuth: true}},
-    {path: '/monitor/pig-sales', component: PigSalesView, meta: {requiresAuth: true}},
-    {path: '/monitor/pig-sick-logs', component: PigSickLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/pig-transfer-logs', component: PigTransferLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/plan-execution-logs', component: PlanExecutionLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/raw-material-purchases', component: RawMaterialPurchasesView, meta: {requiresAuth: true}},
-    {path: '/monitor/raw-material-stock-logs', component: RawMaterialStockLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/sensor-data', component: SensorDataView, meta: {requiresAuth: true}},
-    {path: '/monitor/task-execution-logs', component: TaskExecutionLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/user-action-logs', component: UserActionLogsView, meta: {requiresAuth: true}},
-    {path: '/monitor/weighing-batches', component: WeighingBatchesView, meta: {requiresAuth: true}},
-    {path: '/monitor/weighing-records', component: WeighingRecordsView, meta: {requiresAuth: true}},
-    // ---------------------------
-];
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes
-});
-
-// 全局路由守卫
-router.beforeEach((to, from, next) => {
-    const loggedIn = localStorage.getItem('jwt_token');
-
-    if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
-        // 如果路由需要认证但用户未登录，则重定向到登录页
-        next('/login');
-    } else if (to.path === '/login' && loggedIn) {
-        // 如果用户已登录但试图访问登录页，则重定向到首页
-        next('/');
-    } else {
-        next(); // 正常放行
-    }
-});
-
 // 创建Vue应用实例
 const app = createApp(App);
 

src/routeTitles.js

@@ -1,26 +0,0 @@
-export const routeTitles = {
-  '/': '系统首页',
-  '/devices': '设备管理',
-  '/device-templates': '设备模板管理',
-  '/pms/farm-management': '栏舍管理',
-  '/pms/batch-management': '猪群管理',
-  '/plans': '计划管理',
-  '/monitor/device-command-logs': '设备命令日志',
-  '/monitor/feed-usage-records': '饲料使用记录',
-  '/monitor/medication-logs': '用药记录',
-  '/monitor/notifications': '通知记录',
-  '/monitor/pending-collections': '待采集请求',
-  '/monitor/pig-batch-logs': '猪批次日志',
-  '/monitor/pig-purchases': '猪只采购记录',
-  '/monitor/pig-sales': '猪只售卖记录',
-  '/monitor/pig-sick-logs': '病猪日志',
-  '/monitor/pig-transfer-logs': '猪只迁移日志',
-  '/monitor/plan-execution-logs': '计划执行日志',
-  '/monitor/raw-material-purchases': '原料采购记录',
-  '/monitor/raw-material-stock-logs': '原料库存日志',
-  '/monitor/sensor-data': '传感器数据',
-  '/monitor/task-execution-logs': '任务执行日志',
-  '/monitor/user-action-logs': '用户操作日志',
-  '/monitor/weighing-batches': '批次称重记录',
-  '/monitor/weighing-records': '单次称重记录',
-};

src/router/index.js

@@ -0,0 +1,72 @@
+import {createRouter, createWebHistory} from 'vue-router';
+import Home from '../views/home/Home.vue';
+import DeviceList from '../views/device/DeviceList.vue';
+import PlanList from '../views/plan/PlanList.vue';
+import LoginForm from '../views/home/LoginForm.vue';
+import DeviceTemplateList from '../views/device/DeviceTemplateList.vue';
+import PigFarmManagementView from '../views/pms/PigFarmManagementView.vue';
+import PigBatchManagementView from '../views/pms/PigBatchManagementView.vue';
+import DeviceCommandLogView from '../views/monitor/DeviceCommandLogView.vue';
+import FeedUsageRecordsView from '../views/monitor/FeedUsageRecordsView.vue';
+import MedicationLogsView from '../views/monitor/MedicationLogsView.vue';
+import NotificationLogView from '../views/monitor/NotificationLogView.vue';
+import PendingCollectionsView from '../views/monitor/PendingCollectionsView.vue';
+import PigBatchLogsView from '../views/monitor/PigBatchLogsView.vue';
+import PigPurchasesView from '../views/monitor/PigPurchasesView.vue';
+import PigSalesView from '../views/monitor/PigSalesView.vue';
+import PigSickLogsView from '../views/monitor/PigSickLogsView.vue';
+import PigTransferLogsView from '../views/monitor/PigTransferLogsView.vue';
+import PlanExecutionLogsView from '../views/monitor/PlanExecutionLogsView.vue';
+import RawMaterialPurchasesView from '../views/monitor/RawMaterialPurchasesView.vue';
+import RawMaterialStockLogsView from '../views/monitor/RawMaterialStockLogsView.vue';
+import SensorDataView from '../views/monitor/SensorDataView.vue';
+import TaskExecutionLogsView from '../views/monitor/TaskExecutionLogsView.vue';
+import UserActionLogsView from '../views/monitor/UserActionLogsView.vue';
+import WeighingBatchesView from '../views/monitor/WeighingBatchesView.vue';
+import WeighingRecordsView from '../views/monitor/WeighingRecordsView.vue';
+
+const routes = [
+    {path: '/', component: Home, meta: {requiresAuth: true, title: '系统首页'}},
+    {path: '/devices', component: DeviceList, meta: {requiresAuth: true, title: '设备管理'}},
+    {path: '/device-templates', component: DeviceTemplateList, meta: {requiresAuth: true, title: '设备模板管理'}},
+    {path: '/plans', component: PlanList, meta: {requiresAuth: true, title: '计划管理'}},
+    {path: '/login', component: LoginForm},
+    {path: '/pms/farm-management', name: 'PigFarmManagement', component: PigFarmManagementView, meta: { requiresAuth: true, title: '栏舍管理' }},
+    {path: '/pms/batch-management', name: 'PigBatchManagement', component: PigBatchManagementView, meta: { requiresAuth: true, title: '猪群管理' }},
+    {path: '/monitor/device-command-logs', component: DeviceCommandLogView, meta: {requiresAuth: true, title: '设备命令日志'}},
+    {path: '/monitor/feed-usage-records', component: FeedUsageRecordsView, meta: {requiresAuth: true, title: '饲料使用记录'}},
+    {path: '/monitor/medication-logs', component: MedicationLogsView, meta: {requiresAuth: true, title: '用药记录'}},
+    {path: '/monitor/notifications', component: NotificationLogView, meta: {requiresAuth: true, title: '通知记录'}},
+    {path: '/monitor/pending-collections', component: PendingCollectionsView, meta: {requiresAuth: true, title: '待采集请求'}},
+    {path: '/monitor/pig-batch-logs', component: PigBatchLogsView, meta: {requiresAuth: true, title: '猪批次日志'}},
+    {path: '/monitor/pig-purchases', component: PigPurchasesView, meta: {requiresAuth: true, title: '猪只采购记录'}},
+    {path: '/monitor/pig-sales', component: PigSalesView, meta: {requiresAuth: true, title: '猪只售卖记录'}},
+    {path: '/monitor/pig-sick-logs', component: PigSickLogsView, meta: {requiresAuth: true, title: '病猪日志'}},
+    {path: '/monitor/pig-transfer-logs', component: PigTransferLogsView, meta: {requiresAuth: true, title: '猪只迁移日志'}},
+    {path: '/monitor/plan-execution-logs', component: PlanExecutionLogsView, meta: {requiresAuth: true, title: '计划执行日志'}},
+    {path: '/monitor/raw-material-purchases', component: RawMaterialPurchasesView, meta: {requiresAuth: true, title: '原料采购记录'}},
+    {path: '/monitor/raw-material-stock-logs', component: RawMaterialStockLogsView, meta: {requiresAuth: true, title: '原料库存日志'}},
+    {path: '/monitor/sensor-data', component: SensorDataView, meta: {requiresAuth: true, title: '传感器数据'}},
+    {path: '/monitor/task-execution-logs', component: TaskExecutionLogsView, meta: {requiresAuth: true, title: '任务执行日志'}},
+    {path: '/monitor/user-action-logs', component: UserActionLogsView, meta: {requiresAuth: true, title: '用户操作日志'}},
+    {path: '/monitor/weighing-batches', component: WeighingBatchesView, meta: {requiresAuth: true, title: '批次称重记录'}},
+    {path: '/monitor/weighing-records', component: WeighingRecordsView, meta: {requiresAuth: true, title: '单次称重记录'}},
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+router.beforeEach((to, from, next) => {
+    const loggedIn = localStorage.getItem('jwt_token');
+    if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
+        next('/login');
+    } else if (to.path === '/login' && loggedIn) {
+        next('/');
+    } else {
+        next();
+    }
+});
+
+export default router;