增加主页

src/App.vue

@@ -1,20 +1,6 @@
 <template>
   <div id="app">
-    <header class="header">
-      <h1>猪场管理系统</h1>
-      <nav class="navigation">
-        <el-menu mode="horizontal" :router="true">
-          <el-menu-item index="/">首页</el-menu-item>
-          <el-menu-item index="/devices">设备管理</el-menu-item>
-        </el-menu>
-      </nav>
-    </header>
-    <main class="main-content">
     <router-view />
-    </main>
-    <footer class="footer">
-      <p>© 2025 猪场管理系统. All rights reserved.</p>
-    </footer>
   </div>
 </template>
 
@@ -24,35 +10,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
-.header {
+#app {
-  background-color: #409EFF;
+  min-height: 100vh;
-  color: white;
-  padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,.1);
-}
-
-.header h1 {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.navigation {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.main-content {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-  min-height: calc(100vh - 100px);
-}
-
-.footer {
-  text-align: center;
-  padding: 1rem;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ebeef5;
 }
 </style>

src/components/PlanList.vue

@@ -0,0 +1,200 @@
+<template>
+  <MainLayout>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>计划管理</span>
+          <el-button type="primary" @click="addPlan">添加计划</el-button>
+        </div>
+      </template>
+      
+      <el-table :data="plans" style="width: 100%">
+        <el-table-column prop="id" label="计划ID" width="80" />
+        <el-table-column prop="name" label="计划名称" width="180" />
+        <el-table-column prop="description" label="描述" />
+        <el-table-column prop="execution_type" label="执行类型" width="120">
+          <template #default="scope">
+            <el-tag v-if="scope.row.execution_type === 'automatic'">自动</el-tag>
+            <el-tag v-else>手动</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 0" type="success">启用</el-tag>
+            <el-tag v-else-if="scope.row.status === 1" type="warning">禁用</el-tag>
+            <el-tag v-else type="info">已完成</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <el-button size="small" @click="editPlan(scope.row)">编辑</el-button>
+            <el-button size="small" @click="startPlan(scope.row)" :loading="startingPlanId === scope.row.id">
+              启动
+            </el-button>
+            <el-button size="small" type="danger" @click="deletePlan(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 添加/编辑计划对话框 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
+      <el-form :model="currentPlan" label-width="120px">
+        <el-form-item label="计划名称">
+          <el-input v-model="currentPlan.name" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="currentPlan.description" type="textarea" />
+        </el-form-item>
+        <el-form-item label="执行类型">
+          <el-select v-model="currentPlan.execution_type" placeholder="请选择执行类型">
+            <el-option label="自动执行" value="automatic" />
+            <el-option label="手动执行" value="manual" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容类型" v-if="!isEdit">
+          <el-radio-group v-model="contentType">
+            <el-radio label="tasks">任务</el-radio>
+            <el-radio label="sub_plans">子计划</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="savePlan">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </MainLayout>
+</template>
+
+<script>
+import MainLayout from '../layouts/MainLayout.vue';
+import apiClient from '../api/index.js';
+
+export default {
+  name: 'PlanList',
+  components: {
+    MainLayout
+  },
+  data() {
+    return {
+      plans: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      isEdit: false,
+      contentType: 'tasks',
+      currentPlan: {
+        id: null,
+        name: '',
+        description: '',
+        execution_type: 'automatic',
+        content_type: 'tasks'
+      },
+      startingPlanId: null
+    };
+  },
+  async mounted() {
+    await this.loadPlans();
+  },
+  methods: {
+    // 加载计划列表
+    async loadPlans() {
+      try {
+        const response = await apiClient.plans.list();
+        this.plans = response.data?.plans || [];
+      } catch (err) {
+        this.$message.error('加载计划列表失败: ' + (err.message || '未知错误'));
+        console.error('加载计划列表失败:', err);
+      }
+    },
+    
+    addPlan() {
+      this.dialogTitle = '添加计划';
+      this.currentPlan = {
+        id: null,
+        name: '',
+        description: '',
+        execution_type: 'automatic'
+      };
+      this.isEdit = false;
+      this.dialogVisible = true;
+    },
+    
+    editPlan(plan) {
+      this.dialogTitle = '编辑计划';
+      this.currentPlan = { ...plan };
+      this.isEdit = true;
+      this.dialogVisible = true;
+    },
+    
+    async deletePlan(plan) {
+      try {
+        await this.$confirm('确认删除该计划吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        
+        await apiClient.plans.delete(plan.id);
+        this.$message.success('删除成功');
+        await this.loadPlans();
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+        }
+      }
+    },
+    
+    async startPlan(plan) {
+      try {
+        this.startingPlanId = plan.id;
+        await apiClient.plans.start(plan.id);
+        this.$message.success('计划启动成功');
+        await this.loadPlans();
+      } catch (err) {
+        this.$message.error('启动失败: ' + (err.message || '未知错误'));
+      } finally {
+        this.startingPlanId = null;
+      }
+    },
+    
+    async savePlan() {
+      try {
+        if (this.isEdit) {
+          // 编辑计划
+          await apiClient.plans.update(this.currentPlan.id, this.currentPlan);
+          this.$message.success('计划更新成功');
+        } else {
+          // 添加新计划
+          const planData = {
+            ...this.currentPlan,
+            content_type: this.contentType
+          };
+          
+          await apiClient.plans.create(planData);
+          this.$message.success('计划添加成功');
+        }
+        
+        this.dialogVisible = false;
+        await this.loadPlans();
+      } catch (err) {
+        this.$message.error('保存失败: ' + (err.message || '未知错误'));
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>

src/layouts/MainLayout.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-container class="layout-container">
+    <!-- 侧边栏菜单 -->
+    <el-aside width="200px" class="sidebar">
+      <div class="logo">
+        <h2>猪场管理系统</h2>
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        class="sidebar-menu"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        router
+      >
+        <el-menu-item index="/">
+          <el-icon><House /></el-icon>
+          <span>首页</span>
+        </el-menu-item>
+        <el-menu-item index="/devices">
+          <el-icon><Monitor /></el-icon>
+          <span>设备管理</span>
+        </el-menu-item>
+        <el-menu-item index="/plans">
+          <el-icon><Calendar /></el-icon>
+          <span>计划管理</span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <!-- 主区域 -->
+    <el-container>
+      <!-- 头部 -->
+      <el-header class="header">
+        <div class="header-content">
+          <h3>{{ currentPageTitle }}</h3>
+          <div class="user-info">
+            <el-dropdown>
+              <span class="el-dropdown-link">
+                管理员 <el-icon><ArrowDown /></el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>个人信息</el-dropdown-item>
+                  <el-dropdown-item>退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </el-header>
+
+      <!-- 主内容区 -->
+      <el-main class="main-content">
+        <slot></slot>
+      </el-main>
+
+      <!-- 底部 -->
+      <el-footer class="footer">
+        <p>© 2025 猪场管理系统. All rights reserved.</p>
+      </el-footer>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { House, Monitor, Calendar, ArrowDown } from '@element-plus/icons-vue';
+
+export default {
+  name: 'MainLayout',
+  components: {
+    House,
+    Monitor,
+    Calendar,
+    ArrowDown
+  },
+  setup() {
+    const route = useRoute();
+    
+    // 当前激活的菜单项
+    const activeMenu = computed(() => {
+      return route.path;
+    });
+
+    // 当前页面标题
+    const currentPageTitle = computed(() => {
+      const routeMap = {
+        '/': '系统首页',
+        '/devices': '设备管理',
+        '/plans': '计划管理'
+      };
+      return routeMap[route.path] || '猪场管理系统';
+    });
+
+    return {
+      activeMenu,
+      currentPageTitle
+    };
+  }
+};
+</script>
+
+<style scoped>
+.layout-container {
+  min-height: 100vh;
+}
+
+.sidebar {
+  background-color: #545c64;
+  box-shadow: 2px 0 6px rgba(0, 21, 18, 0.1);
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  background-color: #454d54;
+}
+
+.sidebar-menu {
+  border-right: none;
+  height: calc(100% - 60px);
+}
+
+.header {
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 18, 0.1);
+  padding: 0;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+}
+
+.user-info {
+  margin-right: 20px;
+}
+
+.main-content {
+  background-color: #f5f5f5;
+  padding: 20px;
+}
+
+.footer {
+  background-color: #fff;
+  color: #666;
+  text-align: center;
+  font-size: 14px;
+  border-top: 1px solid #eee;
+}
+</style>

src/main.js

@@ -4,8 +4,9 @@ import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 
 import App from './App.vue';
-import DeviceList from './components/DeviceList.vue';
 import Home from './components/Home.vue';
+import DeviceList from './components/DeviceList.vue';
+import PlanList from './components/PlanList.vue';
 
 // 导入全局样式
 import './assets/styles/main.css';
@@ -17,7 +18,8 @@ import * as Utils from './utils/helpers';      // 示例工具函数
 // 配置路由
 const routes = [
   { path: '/', component: Home },
-  { path: '/devices', component: DeviceList }
+  { path: '/devices', component: DeviceList },
+  { path: '/plans', component: PlanList }
 ];
 
 const router = createRouter({