更新接口和调用方

修bug
实现通知记录界面
2025-10-29 19:42:48 +08:00 · 2025-10-25 15:42:19 +08:00 · 2025-10-25 15:34:28 +08:00 · 2025-10-25 15:27:27 +08:00 · 2025-10-24 14:23:58 +08:00 · 2025-10-23 18:41:08 +08:00
52 changed files with 6814 additions and 659 deletions
--- a/docs/swagger.json
+++ b/docs/swagger.json
@@ -970,6 +970,149 @@
        }
      }
    },
+    "/api/v1/monitor/notifications": {
+      "get": {
+        "security": [
+          {
+            "BearerAuth": []
+          }
+        ],
+        "description": "根据提供的过滤条件，分页获取通知列表",
+        "produces": [
+          "application/json"
+        ],
+        "tags": [
+          "数据监控"
+        ],
+        "summary": "批量查询通知",
+        "parameters": [
+          {
+            "type": "string",
+            "name": "end_time",
+            "in": "query"
+          },
+          {
+            "enum": [
+              7,
+              -1,
+              0,
+              1,
+              2,
+              3,
+              4,
+              5,
+              -1,
+              5,
+              6
+            ],
+            "type": "integer",
+            "format": "int32",
+            "x-enum-varnames": [
+              "_numLevels",
+              "DebugLevel",
+              "InfoLevel",
+              "WarnLevel",
+              "ErrorLevel",
+              "DPanicLevel",
+              "PanicLevel",
+              "FatalLevel",
+              "_minLevel",
+              "_maxLevel",
+              "InvalidLevel"
+            ],
+            "name": "level",
+            "in": "query"
+          },
+          {
+            "enum": [
+              "邮件",
+              "企业微信",
+              "飞书",
+              "日志"
+            ],
+            "type": "string",
+            "x-enum-varnames": [
+              "NotifierTypeSMTP",
+              "NotifierTypeWeChat",
+              "NotifierTypeLark",
+              "NotifierTypeLog"
+            ],
+            "name": "notifier_type",
+            "in": "query"
+          },
+          {
+            "type": "string",
+            "name": "order_by",
+            "in": "query"
+          },
+          {
+            "type": "integer",
+            "name": "page",
+            "in": "query"
+          },
+          {
+            "type": "integer",
+            "name": "pageSize",
+            "in": "query"
+          },
+          {
+            "type": "string",
+            "name": "start_time",
+            "in": "query"
+          },
+          {
+            "enum": [
+              "发送成功",
+              "发送失败",
+              "已跳过"
+            ],
+            "type": "string",
+            "x-enum-comments": {
+              "NotificationStatusFailed": "通知发送失败",
+              "NotificationStatusSkipped": "通知因某些原因被跳过（例如：用户未配置联系方式）",
+              "NotificationStatusSuccess": "通知已成功发送"
+            },
+            "x-enum-descriptions": [
+              "通知已成功发送",
+              "通知发送失败",
+              "通知因某些原因被跳过（例如：用户未配置联系方式）"
+            ],
+            "x-enum-varnames": [
+              "NotificationStatusSuccess",
+              "NotificationStatusFailed",
+              "NotificationStatusSkipped"
+            ],
+            "name": "status",
+            "in": "query"
+          },
+          {
+            "type": "integer",
+            "name": "user_id",
+            "in": "query"
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "schema": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/controller.Response"
+                },
+                {
+                  "type": "object",
+                  "properties": {
+                    "data": {
+                      "$ref": "#/definitions/dto.ListNotificationResponse"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
    "/api/v1/monitor/pending-collections": {
      "get": {
        "security": [
@@ -3452,7 +3595,7 @@
            "BearerAuth": []
          }
        ],
-        "description": "获取所有计划的列表",
+        "description": "获取所有计划的列表，支持按类型过滤和分页",
        "produces": [
          "application/json"
        ],
@@ -3460,6 +3603,36 @@
          "计划管理"
        ],
        "summary": "获取计划列表",
+        "parameters": [
+          {
+            "type": "integer",
+            "description": "页码",
+            "name": "page",
+            "in": "query"
+          },
+          {
+            "type": "integer",
+            "description": "每页大小",
+            "name": "pageSize",
+            "in": "query"
+          },
+          {
+            "enum": [
+              "所有任务",
+              "自定义任务",
+              "系统任务"
+            ],
+            "type": "string",
+            "x-enum-varnames": [
+              "PlanTypeFilterAll",
+              "PlanTypeFilterCustom",
+              "PlanTypeFilterSystem"
+            ],
+            "description": "计划类型",
+            "name": "planType",
+            "in": "query"
+          }
+        ],
        "responses": {
          "200": {
            "description": "业务码为200代表成功获取列表",
@@ -3472,10 +3645,7 @@
                  "type": "object",
                  "properties": {
                    "data": {
-                      "type": "array",
-                      "items": {
-                        "$ref": "#/definitions/dto.PlanResponse"
-                      }
+                      "$ref": "#/definitions/dto.ListPlansResponse"
                    }
                  }
                }
@@ -3585,7 +3755,7 @@
            "BearerAuth": []
          }
        ],
-        "description": "根据计划ID更新计划的详细信息。",
+        "description": "根据计划ID更新计划的详细信息。系统计划不允许修改。",
        "consumes": [
          "application/json"
        ],
@@ -3641,7 +3811,7 @@
            "BearerAuth": []
          }
        ],
-        "description": "根据计划ID删除计划。（软删除）",
+        "description": "根据计划ID删除计划。（软删除）系统计划不允许删除。",
        "produces": [
          "application/json"
        ],
@@ -3675,7 +3845,7 @@
            "BearerAuth": []
          }
        ],
-        "description": "根据计划ID启动一个计划的执行。",
+        "description": "根据计划ID启动一个计划的执行。系统计划不允许手动启动。",
        "produces": [
          "application/json"
        ],
@@ -3709,7 +3879,7 @@
            "BearerAuth": []
          }
        ],
-        "description": "根据计划ID停止一个正在执行的计划。",
+        "description": "根据计划ID停止一个正在执行的计划。系统计划不能被停止。",
        "produces": [
          "application/json"
        ],
@@ -3918,6 +4088,64 @@
          }
        }
      }
+    },
+    "/api/v1/users/{id}/notifications/test": {
+      "post": {
+        "security": [
+          {
+            "BearerAuth": []
+          }
+        ],
+        "description": "为指定用户发送一条特定渠道的测试消息，以验证其配置是否正确。",
+        "consumes": [
+          "application/json"
+        ],
+        "produces": [
+          "application/json"
+        ],
+        "tags": [
+          "用户管理"
+        ],
+        "summary": "发送测试通知",
+        "parameters": [
+          {
+            "type": "integer",
+            "description": "用户ID",
+            "name": "id",
+            "in": "path",
+            "required": true
+          },
+          {
+            "description": "请求体",
+            "name": "body",
+            "in": "body",
+            "required": true,
+            "schema": {
+              "$ref": "#/definitions/dto.SendTestNotificationRequest"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "成功响应",
+            "schema": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/controller.Response"
+                },
+                {
+                  "type": "object",
+                  "properties": {
+                    "data": {
+                      "type": "string"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      }
    }
  },
  "definitions": {
@@ -3948,6 +4176,7 @@
        2001,
        4000,
        4001,
+        4003,
        4004,
        4009,
        5000,
@@ -3957,6 +4186,7 @@
        "CodeBadRequest": "请求参数错误",
        "CodeConflict": "资源冲突",
        "CodeCreated": "创建成功",
+        "CodeForbidden": "禁止访问",
        "CodeInternalError": "服务器内部错误",
        "CodeNotFound": "资源未找到",
        "CodeServiceUnavailable": "服务不可用",
@@ -3968,6 +4198,7 @@
        "创建成功",
        "请求参数错误",
        "未授权",
+        "禁止访问",
        "资源未找到",
        "资源冲突",
        "服务器内部错误",
@@ -3978,6 +4209,7 @@
        "CodeCreated",
        "CodeBadRequest",
        "CodeUnauthorized",
+        "CodeForbidden",
        "CodeNotFound",
        "CodeConflict",
        "CodeInternalError",
@@ -4426,6 +4658,20 @@
        }
      }
    },
+    "dto.ListNotificationResponse": {
+      "type": "object",
+      "properties": {
+        "list": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/dto.NotificationDTO"
+          }
+        },
+        "pagination": {
+          "$ref": "#/definitions/dto.PaginationDTO"
+        }
+      }
+    },
    "dto.ListPendingCollectionResponse": {
      "type": "object",
      "properties": {
@@ -4524,6 +4770,21 @@
        }
      }
    },
+    "dto.ListPlansResponse": {
+      "type": "object",
+      "properties": {
+        "plans": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/dto.PlanResponse"
+          }
+        },
+        "total": {
+          "type": "integer",
+          "example": 100
+        }
+      }
+    },
    "dto.ListRawMaterialPurchaseResponse": {
      "type": "object",
      "properties": {
@@ -4734,6 +4995,47 @@
        }
      }
    },
+    "dto.NotificationDTO": {
+      "type": "object",
+      "properties": {
+        "alarm_timestamp": {
+          "type": "string"
+        },
+        "created_at": {
+          "type": "string"
+        },
+        "error_message": {
+          "type": "string"
+        },
+        "id": {
+          "type": "integer"
+        },
+        "level": {
+          "$ref": "#/definitions/zapcore.Level"
+        },
+        "message": {
+          "type": "string"
+        },
+        "notifier_type": {
+          "$ref": "#/definitions/notify.NotifierType"
+        },
+        "status": {
+          "$ref": "#/definitions/models.NotificationStatus"
+        },
+        "title": {
+          "type": "string"
+        },
+        "to_address": {
+          "type": "string"
+        },
+        "updated_at": {
+          "type": "string"
+        },
+        "user_id": {
+          "type": "integer"
+        }
+      }
+    },
    "dto.PaginationDTO": {
      "type": "object",
      "properties": {
@@ -4765,6 +5067,9 @@
        "capacity": {
          "type": "integer"
        },
+        "current_pig_count": {
+          "type": "integer"
+        },
        "house_id": {
          "type": "integer"
        },
@@ -4898,6 +5203,14 @@
          "description": "创建时间",
          "type": "string"
        },
+        "currentTotalPigsInPens": {
+          "description": "当前存栏总数",
+          "type": "integer"
+        },
+        "currentTotalQuantity": {
+          "description": "当前总数",
+          "type": "integer"
+        },
        "end_date": {
          "description": "批次结束日期",
          "type": "string"
@@ -5167,6 +5480,9 @@
        "plan_id": {
          "type": "integer"
        },
+        "plan_name": {
+          "type": "string"
+        },
        "started_at": {
          "type": "string"
        },
@@ -5221,6 +5537,14 @@
          "type": "string",
          "example": "猪舍温度控制计划"
        },
+        "plan_type": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/models.PlanType"
+            }
+          ],
+          "example": "自定义任务"
+        },
        "status": {
          "allOf": [
            {
@@ -5575,6 +5899,22 @@
        }
      }
    },
+    "dto.SendTestNotificationRequest": {
+      "type": "object",
+      "required": [
+        "type"
+      ],
+      "properties": {
+        "type": {
+          "description": "Type 指定要测试的通知渠道",
+          "allOf": [
+            {
+              "$ref": "#/definitions/notify.NotifierType"
+            }
+          ]
+        }
+      }
+    },
    "dto.SensorDataDTO": {
      "type": "object",
      "properties": {
@@ -6185,6 +6525,29 @@
        "ReasonTypeHealthCare"
      ]
    },
+    "models.NotificationStatus": {
+      "type": "string",
+      "enum": [
+        "发送成功",
+        "发送失败",
+        "已跳过"
+      ],
+      "x-enum-comments": {
+        "NotificationStatusFailed": "通知发送失败",
+        "NotificationStatusSkipped": "通知因某些原因被跳过（例如：用户未配置联系方式）",
+        "NotificationStatusSuccess": "通知已成功发送"
+      },
+      "x-enum-descriptions": [
+        "通知已成功发送",
+        "通知发送失败",
+        "通知因某些原因被跳过（例如：用户未配置联系方式）"
+      ],
+      "x-enum-varnames": [
+        "NotificationStatusSuccess",
+        "NotificationStatusFailed",
+        "NotificationStatusSkipped"
+      ]
+    },
    "models.PenStatus": {
      "type": "string",
      "enum": [
@@ -6426,6 +6789,17 @@
        "PlanStatusFailed"
      ]
    },
+    "models.PlanType": {
+      "type": "string",
+      "enum": [
+        "自定义任务",
+        "系统任务"
+      ],
+      "x-enum-varnames": [
+        "PlanTypeCustom",
+        "PlanTypeSystem"
+      ]
+    },
    "models.SensorType": {
      "type": "string",
      "enum": [
@@ -6481,22 +6855,26 @@
      "enum": [
        "计划分析",
        "等待",
-        "下料"
+        "下料",
+        "全量采集"
      ],
      "x-enum-comments": {
        "TaskPlanAnalysis": "解析Plan的Task列表并添加到待执行队列的特殊任务",
+        "TaskTypeFullCollection": "新增的全量采集任务",
        "TaskTypeReleaseFeedWeight": "下料口释放指定重量任务",
        "TaskTypeWaiting": "等待任务"
      },
      "x-enum-descriptions": [
        "解析Plan的Task列表并添加到待执行队列的特殊任务",
        "等待任务",
-        "下料口释放指定重量任务"
+        "下料口释放指定重量任务",
+        "新增的全量采集任务"
      ],
      "x-enum-varnames": [
        "TaskPlanAnalysis",
        "TaskTypeWaiting",
-        "TaskTypeReleaseFeedWeight"
+        "TaskTypeReleaseFeedWeight",
+        "TaskTypeFullCollection"
      ]
    },
    "models.ValueDescriptor": {
@@ -6514,6 +6892,64 @@
          "$ref": "#/definitions/models.SensorType"
        }
      }
+    },
+    "notify.NotifierType": {
+      "type": "string",
+      "enum": [
+        "邮件",
+        "企业微信",
+        "飞书",
+        "日志"
+      ],
+      "x-enum-varnames": [
+        "NotifierTypeSMTP",
+        "NotifierTypeWeChat",
+        "NotifierTypeLark",
+        "NotifierTypeLog"
+      ]
+    },
+    "repository.PlanTypeFilter": {
+      "type": "string",
+      "enum": [
+        "所有任务",
+        "自定义任务",
+        "系统任务"
+      ],
+      "x-enum-varnames": [
+        "PlanTypeFilterAll",
+        "PlanTypeFilterCustom",
+        "PlanTypeFilterSystem"
+      ]
+    },
+    "zapcore.Level": {
+      "type": "integer",
+      "format": "int32",
+      "enum": [
+        7,
+        -1,
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        -1,
+        5,
+        6
+      ],
+      "x-enum-varnames": [
+        "_numLevels",
+        "DebugLevel",
+        "InfoLevel",
+        "WarnLevel",
+        "ErrorLevel",
+        "DPanicLevel",
+        "PanicLevel",
+        "FatalLevel",
+        "_minLevel",
+        "_maxLevel",
+        "InvalidLevel"
+      ]
    }
  },
  "securityDefinitions": {
--- a/src/api/areaController.js
+++ b/src/api/areaController.js
@@ -1,8 +1,36 @@
 import http from '../utils/http';

+/**
+ * @typedef {object} AreaControllerResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} network_id
+ * @property {string} location
+ * @property {string} status
+ * @property {object} properties
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} CreateAreaControllerRequest
+ * @property {string} name
+ * @property {string} network_id
+ * @property {string} [location]
+ * @property {object} [properties]
+ */
+
+/**
+ * @typedef {object} UpdateAreaControllerRequest
+ * @property {string} name
+ * @property {string} network_id
+ * @property {string} [location]
+ * @property {object} [properties]
+ */
+
 /**
 * 获取系统中所有区域主控的列表
- * @returns {Promise<*>}
+ * @returns {Promise<Array<AreaControllerResponse>>}
 */
 export const getAreaControllers = () => {
  return http.get('/api/v1/area-controllers');
@@ -10,8 +38,8 @@ export const getAreaControllers = () => {

 /**
 * 根据提供的信息创建一个新区域主控
- * @param {object} areaControllerData - 区域主控信息，对应 dto.CreateAreaControllerRequest
- * @returns {Promise<*>}
+ * @param {CreateAreaControllerRequest} areaControllerData - 区域主控信息
+ * @returns {Promise<AreaControllerResponse>}
 */
 export const createAreaController = (areaControllerData) => {
  return http.post('/api/v1/area-controllers', areaControllerData);
@@ -20,7 +48,7 @@ export const createAreaController = (areaControllerData) => {
 /**
 * 根据ID获取单个区域主控的详细信息
 * @param {string} id - 区域主控ID
- * @returns {Promise<*>}
+ * @returns {Promise<AreaControllerResponse>}
 */
 export const getAreaControllerById = (id) => {
  return http.get(`/api/v1/area-controllers/${id}`);
@@ -29,8 +57,8 @@ export const getAreaControllerById = (id) => {
 /**
 * 根据ID更新一个已存在的区域主控信息
 * @param {string} id - 区域主控ID
- * @param {object} areaControllerData - 要更新的区域主控信息，对应 dto.UpdateAreaControllerRequest
- * @returns {Promise<*>}
+ * @param {UpdateAreaControllerRequest} areaControllerData - 要更新的区域主控信息
+ * @returns {Promise<AreaControllerResponse>}
 */
 export const updateAreaController = (id, areaControllerData) => {
  return http.put(`/api/v1/area-controllers/${id}`, areaControllerData);
--- a/src/api/device.js
+++ b/src/api/device.js
@@ -1,10 +1,78 @@
 import http from '../utils/http';

+// --- Typedefs ---
+
+/**
+ * @typedef {object} DeviceResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} location
+ * @property {number} area_controller_id
+ * @property {string} area_controller_name
+ * @property {number} device_template_id
+ * @property {string} device_template_name
+ * @property {object} properties
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} CreateDeviceRequest
+ * @property {string} name
+ * @property {string} [location]
+ * @property {number} area_controller_id
+ * @property {number} device_template_id
+ * @property {object} [properties]
+ */
+
+/**
+ * @typedef {object} UpdateDeviceRequest
+ * @property {string} name
+ * @property {string} [location]
+ * @property {number} area_controller_id
+ * @property {number} device_template_id
+ * @property {object} [properties]
+ */
+
+/**
+ * @typedef {object} ManualControlDeviceRequest
+ * @property {string} [action] - Action 不传表示这是一个传感器, 会触发一次采集
+ */
+
+/**
+ * @typedef {object} AreaControllerResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} network_id
+ * @property {string} location
+ * @property {string} status
+ * @property {object} properties
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} CreateAreaControllerRequest
+ * @property {string} name
+ * @property {string} network_id
+ * @property {string} [location]
+ * @property {object} [properties]
+ */
+
+/**
+ * @typedef {object} UpdateAreaControllerRequest
+ * @property {string} name
+ * @property {string} network_id
+ * @property {string} [location]
+ * @property {object} [properties]
+ */
+
+
 // --- Device API Functions ---

 /**
 * 获取系统中所有设备的列表
- * @returns {Promise<*>}
+ * @returns {Promise<Array<DeviceResponse>>}
 */
 export const getDevices = () => {
  return http.get('/api/v1/devices');
@@ -12,8 +80,8 @@ export const getDevices = () => {

 /**
 * 根据提供的信息创建一个新设备
- * @param {object} deviceData - 设备信息，对应 dto.CreateDeviceRequest
- * @returns {Promise<*>}
+ * @param {CreateDeviceRequest} deviceData - 设备信息
+ * @returns {Promise<DeviceResponse>}
 */
 export const createDevice = (deviceData) => {
  return http.post('/api/v1/devices', deviceData);
@@ -22,7 +90,7 @@ export const createDevice = (deviceData) => {
 /**
 * 根据设备ID获取单个设备的详细信息
 * @param {string} id - 设备ID
- * @returns {Promise<*>}
+ * @returns {Promise<DeviceResponse>}
 */
 export const getDeviceById = (id) => {
  return http.get(`/api/v1/devices/${id}`);
@@ -31,8 +99,8 @@ export const getDeviceById = (id) => {
 /**
 * 根据设备ID更新一个已存在的设备信息
 * @param {string} id - 设备ID
- * @param {object} deviceData - 要更新的设备信息，对应 dto.UpdateDeviceRequest
- * @returns {Promise<*>}
+ * @param {UpdateDeviceRequest} deviceData - 要更新的设备信息
+ * @returns {Promise<DeviceResponse>}
 */
 export const updateDevice = (id, deviceData) => {
  return http.put(`/api/v1/devices/${id}`, deviceData);
@@ -50,7 +118,7 @@ export const deleteDevice = (id) => {
 /**
 * 根据设备ID和指定的动作（开启或关闭）来手动控制设备
 * @param {string} id - 设备ID
- * @param {object} manualControlData - 手动控制指令，对应 dto.ManualControlDeviceRequest
+ * @param {ManualControlDeviceRequest} manualControlData - 手动控制指令
 * @returns {Promise<*>}
 */
 export const manualControlDevice = (id, manualControlData) => {
@@ -62,7 +130,7 @@ export const manualControlDevice = (id, manualControlData) => {

 /**
 * 获取系统中所有区域主控的列表
- * @returns {Promise<*>}
+ * @returns {Promise<Array<AreaControllerResponse>>}
 */
 export const getAreaControllers = () => {
  return http.get('/api/v1/area-controllers');
@@ -70,8 +138,8 @@ export const getAreaControllers = () => {

 /**
 * 创建一个新区域主控
- * @param {object} areaControllerData - 区域主控信息
- * @returns {Promise<*>}
+ * @param {CreateAreaControllerRequest} areaControllerData - 区域主控信息
+ * @returns {Promise<AreaControllerResponse>}
 */
 export const createAreaController = (areaControllerData) => {
  return http.post('/api/v1/area-controllers', areaControllerData);
@@ -80,7 +148,7 @@ export const createAreaController = (areaControllerData) => {
 /**
 * 根据ID获取单个区域主控的详细信息
 * @param {string} id - 区域主控ID
- * @returns {Promise<*>}
+ * @returns {Promise<AreaControllerResponse>}
 */
 export const getAreaControllerById = (id) => {
  return http.get(`/api/v1/area-controllers/${id}`);
@@ -89,8 +157,8 @@ export const getAreaControllerById = (id) => {
 /**
 * 根据ID更新一个已存在的区域主控信息
 * @param {string} id - 区域主控ID
- * @param {object} areaControllerData - 要更新的区域主控信息
- * @returns {Promise<*>}
+ * @param {UpdateAreaControllerRequest} areaControllerData - 要更新的区域主控信息
+ * @returns {Promise<AreaControllerResponse>}
 */
 export const updateAreaController = (id, areaControllerData) => {
  return http.put(`/api/v1/area-controllers/${id}`, areaControllerData);
@@ -123,5 +191,6 @@ export const DeviceApi = {
  create: createDevice,
  getById: getDeviceById,
  update: updateDevice,
-  delete: deleteDevice
+  delete: deleteDevice,
+  manualControl: manualControlDevice
 };
--- a/src/api/deviceTemplate.js
+++ b/src/api/deviceTemplate.js
@@ -1,8 +1,57 @@
 import http from '../utils/http';

+/**
+ * @typedef {('执行器'|'传感器')} DeviceCategory
+ */
+
+/**
+ * @typedef {('信号强度'|'电池电量'|'温度'|'湿度'|'重量')} SensorType
+ */
+
+/**
+ * @typedef {object} ValueDescriptor
+ * @property {SensorType} type
+ * @property {number} [multiplier] - 乘数，用于原始数据转换
+ * @property {number} [offset] - 偏移量，用于原始数据转换
+ */
+
+/**
+ * @typedef {object} DeviceTemplateResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} [description]
+ * @property {string} [manufacturer]
+ * @property {DeviceCategory} category
+ * @property {object} commands
+ * @property {Array<ValueDescriptor>} values
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} CreateDeviceTemplateRequest
+ * @property {string} name
+ * @property {string} [description]
+ * @property {string} [manufacturer]
+ * @property {DeviceCategory} category
+ * @property {object} commands
+ * @property {Array<ValueDescriptor>} [values]
+ */
+
+/**
+ * @typedef {object} UpdateDeviceTemplateRequest
+ * @property {string} name
+ * @property {string} [description]
+ * @property {string} [manufacturer]
+ * @property {DeviceCategory} category
+ * @property {object} commands
+ * @property {Array<ValueDescriptor>} [values]
+ */
+
+
 /**
 * 获取系统中所有设备模板的列表
- * @returns {Promise<*>}
+ * @returns {Promise<Array<DeviceTemplateResponse>>}
 */
 const getDeviceTemplates = () => {
  return http.get('/api/v1/device-templates');
@@ -10,8 +59,8 @@ const getDeviceTemplates = () => {

 /**
 * 根据提供的信息创建一个新设备模板
- * @param {object} deviceTemplateData - 设备模板信息，对应 dto.CreateDeviceTemplateRequest
- * @returns {Promise<*>}
+ * @param {CreateDeviceTemplateRequest} deviceTemplateData - 设备模板信息
+ * @returns {Promise<DeviceTemplateResponse>}
 */
 const createDeviceTemplate = (deviceTemplateData) => {
  return http.post('/api/v1/device-templates', deviceTemplateData);
@@ -20,7 +69,7 @@ const createDeviceTemplate = (deviceTemplateData) => {
 /**
 * 根据设备模板ID获取单个设备模板的详细信息
 * @param {string} id - 设备模板ID
- * @returns {Promise<*>}
+ * @returns {Promise<DeviceTemplateResponse>}
 */
 const getDeviceTemplateById = (id) => {
  return http.get(`/api/v1/device-templates/${id}`);
@@ -29,8 +78,8 @@ const getDeviceTemplateById = (id) => {
 /**
 * 根据设备模板ID更新一个已存在的设备模板信息
 * @param {string} id - 设备模板ID
- * @param {object} deviceTemplateData - 要更新的设备模板信息，对应 dto.UpdateDeviceTemplateRequest
- * @returns {Promise<*>}
+ * @param {UpdateDeviceTemplateRequest} deviceTemplateData - 要更新的设备模板信息
+ * @returns {Promise<DeviceTemplateResponse>}
 */
 const updateDeviceTemplate = (id, deviceTemplateData) => {
  return http.put(`/api/v1/device-templates/${id}`, deviceTemplateData);
--- a/src/api/monitor.js
+++ b/src/api/monitor.js
@@ -1,154 +1,857 @@
 import http from '../utils/http';

+// --- Typedefs ---
+
+/**
+ * @typedef {object} PaginationDTO
+ * @property {number} page
+ * @property {number} pageSize
+ * @property {number} total
+ */
+
+/**
+ * @typedef {object} DeviceCommandLogDTO
+ * @property {string} message_id
+ * @property {number} device_id
+ * @property {string} sent_at
+ * @property {string} acknowledged_at
+ * @property {boolean} received_success
+ */
+
+/**
+ * @typedef {object} ListDeviceCommandLogResponse
+ * @property {Array<DeviceCommandLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} DeviceCommandLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [device_id]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {boolean} [received_success]
+ */
+
+/**
+ * @typedef {object} FeedFormulaDTO
+ * @property {number} id
+ * @property {string} name
+ */
+
+/**
+ * @typedef {object} PenDTO
+ * @property {number} id
+ * @property {string} name
+ */
+
+/**
+ * @typedef {object} FeedUsageRecordDTO
+ * @property {number} id
+ * @property {number} pen_id
+ * @property {PenDTO} pen
+ * @property {number} feed_formula_id
+ * @property {FeedFormulaDTO} feed_formula
+ * @property {number} amount
+ * @property {string} recorded_at
+ * @property {string} remarks
+ * @property {number} operator_id
+ */
+
+/**
+ * @typedef {object} ListFeedUsageRecordResponse
+ * @property {Array<FeedUsageRecordDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} FeedUsageRecordsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pen_id]
+ * @property {number} [feed_formula_id]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {('预防'|'治疗'|'保健')} MedicationReasonType
+ */
+
+/**
+ * @typedef {object} MedicationDTO
+ * @property {number} id
+ * @property {string} name
+ */
+
+/**
+ * @typedef {object} MedicationLogDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {number} medication_id
+ * @property {MedicationDTO} medication
+ * @property {number} dosage_used
+ * @property {number} target_count
+ * @property {MedicationReasonType} reason
+ * @property {string} description
+ * @property {string} happened_at
+ * @property {number} operator_id
+ */
+
+/**
+ * @typedef {object} ListMedicationLogResponse
+ * @property {Array<MedicationLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} MedicationLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {number} [medication_id]
+ * @property {string} [reason]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {('邮件'|'企业微信'|'飞书'|'日志')} NotifierType
+ */
+
+/**
+ * @typedef {('发送成功'|'发送失败'|'已跳过')} NotificationStatus
+ */
+
+/**
+ * @typedef {object} NotificationDTO
+ * @property {number} id
+ * @property {number} user_id
+ * @property {NotifierType} notifier_type
+ * @property {string} to_address
+ * @property {string} title
+ * @property {string} message
+ * @property {number} level - 日志级别, 见 ZapcoreLevel 枚举
+ * @property {string} alarm_timestamp
+ * @property {NotificationStatus} status
+ * @property {string} error_message
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListNotificationResponse
+ * @property {Array<NotificationDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} NotificationsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [level] - 日志级别, 见 ZapcoreLevel 枚举
+ * @property {NotifierType} [notifier_type]
+ * @property {NotificationStatus} [status]
+ * @property {number} [user_id]
+ */
+
+/**
+ * @typedef {('等待中'|'已完成'|'已超时')} PendingCollectionStatus
+ */
+
+/**
+ * @typedef {object} PendingCollectionDTO
+ * @property {string} correlation_id
+ * @property {number} device_id
+ * @property {Array<number>} command_metadata
+ * @property {PendingCollectionStatus} status
+ * @property {string} created_at
+ * @property {string} fulfilled_at
+ */
+
+/**
+ * @typedef {object} ListPendingCollectionResponse
+ * @property {Array<PendingCollectionDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PendingCollectionsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [device_id]
+ * @property {string} [status]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {('死亡'|'淘汰'|'销售'|'购买'|'转入'|'转出'|'盘点校正')} LogChangeType
+ */
+
+/**
+ * @typedef {object} PigBatchLogDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {LogChangeType} change_type
+ * @property {number} before_count
+ * @property {number} after_count
+ * @property {number} change_count
+ * @property {string} reason
+ * @property {number} operator_id
+ * @property {string} happened_at
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListPigBatchLogResponse
+ * @property {Array<PigBatchLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PigBatchLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {string} [change_type]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {object} PigPurchaseDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {number} quantity
+ * @property {number} unit_price
+ * @property {number} total_price
+ * @property {string} supplier
+ * @property {string} purchase_date
+ * @property {string} remarks
+ * @property {number} operator_id
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListPigPurchaseResponse
+ * @property {Array<PigPurchaseDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PigPurchasesParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {string} [supplier]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {object} PigSaleDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {number} quantity
+ * @property {number} unit_price
+ * @property {number} total_price
+ * @property {string} buyer
+ * @property {string} sale_date
+ * @property {string} remarks
+ * @property {number} operator_id
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListPigSaleResponse
+ * @property {Array<PigSaleDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PigSalesParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {string} [buyer]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {('患病'|'康复'|'死亡'|'淘汰'|'转入'|'转出'|'其他')} PigBatchSickPigReasonType
+ */
+
+/**
+ * @typedef {('原地治疗'|'病猪栏治疗')} PigBatchSickPigTreatmentLocation
+ */
+
+/**
+ * @typedef {object} PigSickLogDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {number} pen_id
+ * @property {PigBatchSickPigReasonType} reason
+ * @property {PigBatchSickPigTreatmentLocation} treatment_location
+ * @property {number} before_count
+ * @property {number} after_count
+ * @property {number} change_count
+ * @property {string} remarks
+ * @property {number} operator_id
+ * @property {string} happened_at
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListPigSickLogResponse
+ * @property {Array<PigSickLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PigSickLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {number} [pen_id]
+ * @property {string} [reason]
+ * @property {string} [treatment_location]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {('群内调栏'|'跨群调栏'|'销售'|'死亡'|'淘汰'|'新购入'|'产房转入')} PigTransferType
+ */
+
+/**
+ * @typedef {object} PigTransferLogDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {number} pen_id
+ * @property {PigTransferType} type
+ * @property {number} quantity
+ * @property {string} remarks
+ * @property {string} correlation_id
+ * @property {number} operator_id
+ * @property {string} transfer_time
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListPigTransferLogResponse
+ * @property {Array<PigTransferLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PigTransferLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {number} [pen_id]
+ * @property {string} [transfer_type]
+ * @property {string} [correlation_id]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+/**
+ * @typedef {('已开始'|'已完成'|'失败'|'已取消'|'等待中')} ExecutionStatus
+ */
+
+/**
+ * @typedef {object} PlanExecutionLogDTO
+ * @property {number} id
+ * @property {number} plan_id
+ * @property {ExecutionStatus} status
+ * @property {string} started_at
+ * @property {string} ended_at
+ * @property {string} error
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListPlanExecutionLogResponse
+ * @property {Array<PlanExecutionLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} PlanExecutionLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [plan_id]
+ * @property {string} [status]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {object} RawMaterialDTO
+ * @property {number} id
+ * @property {string} name
+ */
+
+/**
+ * @typedef {object} RawMaterialPurchaseDTO
+ * @property {number} id
+ * @property {number} raw_material_id
+ * @property {RawMaterialDTO} raw_material
+ * @property {number} amount
+ * @property {number} unit_price
+ * @property {number} total_price
+ * @property {string} supplier
+ * @property {string} purchase_date
+ * @property {string} created_at
+ */
+
+/**
+ * @typedef {object} ListRawMaterialPurchaseResponse
+ * @property {Array<RawMaterialPurchaseDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} RawMaterialPurchasesParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [raw_material_id]
+ * @property {string} [supplier]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {('采购入库'|'饲喂出库'|'变质出库'|'售卖出库'|'杂用领取'|'手动盘点')} StockLogSourceType
+ */
+
+/**
+ * @typedef {object} RawMaterialStockLogDTO
+ * @property {number} id
+ * @property {number} raw_material_id
+ * @property {number} change_amount
+ * @property {StockLogSourceType} source_type
+ * @property {number} source_id
+ * @property {string} remarks
+ * @property {string} happened_at
+ */
+
+/**
+ * @typedef {object} ListRawMaterialStockLogResponse
+ * @property {Array<RawMaterialStockLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} RawMaterialStockLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [raw_material_id]
+ * @property {string} [source_type]
+ * @property {number} [source_id]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {('信号强度'|'电池电量'|'温度'|'湿度'|'重量')} SensorType
+ */
+
+/**
+ * @typedef {object} SensorDataDTO
+ * @property {number} regional_controller_id
+ * @property {number} device_id
+ * @property {SensorType} sensor_type
+ * @property {Array<number>} data
+ * @property {string} time
+ */
+
+/**
+ * @typedef {object} ListSensorDataResponse
+ * @property {Array<SensorDataDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} SensorDataParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [device_id]
+ * @property {string} [sensor_type]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {object} TaskDTO
+ * @property {number} id
+ * @property {string} name
+ * @property {string} description
+ */
+
+/**
+ * @typedef {object} TaskExecutionLogDTO
+ * @property {number} id
+ * @property {number} plan_execution_log_id
+ * @property {number} task_id
+ * @property {TaskDTO} task
+ * @property {ExecutionStatus} status
+ * @property {string} output
+ * @property {string} started_at
+ * @property {string} ended_at
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListTaskExecutionLogResponse
+ * @property {Array<TaskExecutionLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} TaskExecutionLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [plan_execution_log_id]
+ * @property {number} [task_id]
+ * @property {string} [status]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {('成功'|'失败')} AuditStatus
+ */
+
+/**
+ * @typedef {object} UserActionLogDTO
+ * @property {number} id
+ * @property {number} user_id
+ * @property {string} username
+ * @property {string} action_type
+ * @property {string} description
+ * @property {string} http_method
+ * @property {string} http_path
+ * @property {string} source_ip
+ * @property {Array<number>} target_resource
+ * @property {AuditStatus} status
+ * @property {string} result_details
+ * @property {string} time
+ */
+
+/**
+ * @typedef {object} ListUserActionLogResponse
+ * @property {Array<UserActionLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} UserActionLogsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [user_id]
+ * @property {string} [username]
+ * @property {string} [action_type]
+ * @property {string} [status]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {object} WeighingBatchDTO
+ * @property {number} id
+ * @property {number} pig_batch_id
+ * @property {string} description
+ * @property {string} weighing_time
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListWeighingBatchResponse
+ * @property {Array<WeighingBatchDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} WeighingBatchesParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [pig_batch_id]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ */
+
+/**
+ * @typedef {object} WeighingRecordDTO
+ * @property {number} id
+ * @property {number} weighing_batch_id
+ * @property {number} pen_id
+ * @property {number} weight
+ * @property {string} remark
+ * @property {number} operator_id
+ * @property {string} weighing_time
+ * @property {string} created_at
+ * @property {string} updated_at
+ */
+
+/**
+ * @typedef {object} ListWeighingRecordResponse
+ * @property {Array<WeighingRecordDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} WeighingRecordsParams
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [order_by]
+ * @property {number} [weighing_batch_id]
+ * @property {number} [pen_id]
+ * @property {string} [start_time]
+ * @property {string} [end_time]
+ * @property {number} [operator_id]
+ */
+
+// --- Enums ---
+
+/**
+ * 日志级别, 对应后端的 zapcore.Level
+ * @enum {number}
+ */
+export const ZapcoreLevel = {
+  Debug: -1,
+  Info: 0,
+  Warn: 1,
+  Error: 2,
+  DPanic: 3,
+  Panic: 4,
+  Fatal: 5,
+  Invalid: 6,
+};
+
+// --- Functions ---
+
+const processResponse = (responseData) => {
+  const data = responseData.data;
+  return {
+    list: data.list || [],
+    total: data.pagination ? data.pagination.total : 0,
+  };
+};
+
 /**
 * 获取设备命令日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {DeviceCommandLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<DeviceCommandLogDTO>, total: number}>}
 */
-export const getDeviceCommandLogs = (params) => {
-  return http.get('/api/v1/monitor/device-command-logs', { params });
+export const getDeviceCommandLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/device-command-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取饲料使用记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {FeedUsageRecordsParams} params - 查询参数
+ * @returns {Promise<{list: Array<FeedUsageRecordDTO>, total: number}>}
 */
-export const getFeedUsageRecords = (params) => {
-  return http.get('/api/v1/monitor/feed-usage-records', { params });
+export const getFeedUsageRecords = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/feed-usage-records', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取用药记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {MedicationLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<MedicationLogDTO>, total: number}>}
 */
-export const getMedicationLogs = (params) => {
-  return http.get('/api/v1/monitor/medication-logs', { params });
+export const getMedicationLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/medication-logs', { params });
+  return processResponse(responseData);
+};
+
+/**
+ * 批量查询通知
+ * @param {NotificationsParams} params - 查询参数
+ * @returns {Promise<{list: Array<NotificationDTO>, total: number}>}
+ */
+export const getNotifications = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/notifications', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取待采集请求列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PendingCollectionsParams} params - 查询参数
+ * @returns {Promise<{list: Array<PendingCollectionDTO>, total: number}>}
 */
-export const getPendingCollections = (params) => {
-  return http.get('/api/v1/monitor/pending-collections', { params });
+export const getPendingCollections = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pending-collections', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取猪批次日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PigBatchLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<PigBatchLogDTO>, total: number}>}
 */
-export const getPigBatchLogs = (params) => {
-  return http.get('/api/v1/monitor/pig-batch-logs', { params });
+export const getPigBatchLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-batch-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取猪只采购记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PigPurchasesParams} params - 查询参数
+ * @returns {Promise<{list: Array<PigPurchaseDTO>, total: number}>}
 */
-export const getPigPurchases = (params) => {
-  return http.get('/api/v1/monitor/pig-purchases', { params });
+export const getPigPurchases = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-purchases', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取猪只售卖记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PigSalesParams} params - 查询参数
+ * @returns {Promise<{list: Array<PigSaleDTO>, total: number}>}
 */
-export const getPigSales = (params) => {
-  return http.get('/api/v1/monitor/pig-sales', { params });
+export const getPigSales = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-sales', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取病猪日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PigSickLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<PigSickLogDTO>, total: number}>}
 */
-export const getPigSickLogs = (params) => {
-  return http.get('/api/v1/monitor/pig-sick-logs', { params });
+export const getPigSickLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-sick-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取猪只迁移日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PigTransferLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<PigTransferLogDTO>, total: number}>}
 */
-export const getPigTransferLogs = (params) => {
-  return http.get('/api/v1/monitor/pig-transfer-logs', { params });
+export const getPigTransferLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/pig-transfer-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取计划执行日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {PlanExecutionLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<PlanExecutionLogDTO>, total: number}>}
 */
-export const getPlanExecutionLogs = (params) => {
-  return http.get('/api/v1/monitor/plan-execution-logs', { params });
+export const getPlanExecutionLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/plan-execution-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取原料采购记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {RawMaterialPurchasesParams} params - 查询参数
+ * @returns {Promise<{list: Array<RawMaterialPurchaseDTO>, total: number}>}
 */
-export const getRawMaterialPurchases = (params) => {
-  return http.get('/api/v1/monitor/raw-material-purchases', { params });
+export const getRawMaterialPurchases = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/raw-material-purchases', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取原料库存日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {RawMaterialStockLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<RawMaterialStockLogDTO>, total: number}>}
 */
-export const getRawMaterialStockLogs = (params) => {
-  return http.get('/api/v1/monitor/raw-material-stock-logs', { params });
+export const getRawMaterialStockLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/raw-material-stock-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取传感器数据列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {SensorDataParams} params - 查询参数
+ * @returns {Promise<{list: Array<SensorDataDTO>, total: number}>}
 */
-export const getSensorData = (params) => {
-  return http.get('/api/v1/monitor/sensor-data', { params });
+export const getSensorData = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/sensor-data', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取任务执行日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {TaskExecutionLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<TaskExecutionLogDTO>, total: number}>}
 */
-export const getTaskExecutionLogs = (params) => {
-  return http.get('/api/v1/monitor/task-execution-logs', { params });
+export const getTaskExecutionLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/task-execution-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取用户操作日志列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {UserActionLogsParams} params - 查询参数
+ * @returns {Promise<{list: Array<UserActionLogDTO>, total: number}>}
 */
-export const getUserActionLogs = (params) => {
-  return http.get('/api/v1/monitor/user-action-logs', { params });
+export const getUserActionLogs = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/user-action-logs', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取批次称重记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {WeighingBatchesParams} params - 查询参数
+ * @returns {Promise<{list: Array<WeighingBatchDTO>, total: number}>}
 */
-export const getWeighingBatches = (params) => {
-  return http.get('/api/v1/monitor/weighing-batches', { params });
+export const getWeighingBatches = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/weighing-batches', { params });
+  return processResponse(responseData);
 };

 /**
 * 获取单次称重记录列表
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {WeighingRecordsParams} params - 查询参数
+ * @returns {Promise<{list: Array<WeighingRecordDTO>, total: number}>}
 */
-export const getWeighingRecords = (params) => {
-  return http.get('/api/v1/monitor/weighing-records', { params });
+export const getWeighingRecords = async (params) => {
+  const responseData = await http.get('/api/v1/monitor/weighing-records', { params });
+  return processResponse(responseData);
 };
--- a/src/api/pen.js
+++ b/src/api/pen.js
@@ -1,8 +1,39 @@
 import http from '../utils/http';

+/**
+ * @typedef {object} PenResponse
+ * @property {number} id
+ * @property {number} house_id
+ * @property {string} pen_number
+ * @property {number} capacity
+ * @property {number} current_pig_count
+ * @property {number} pig_batch_id
+ * @property {('空闲'|'使用中'|'病猪栏'|'康复栏'|'清洗消毒'|'维修中')} status
+ */
+
+/**
+ * @typedef {object} CreatePenRequest
+ * @property {number} house_id
+ * @property {string} pen_number
+ * @property {number} capacity
+ */
+
+/**
+ * @typedef {object} UpdatePenRequest
+ * @property {number} house_id
+ * @property {string} pen_number
+ * @property {number} capacity
+ * @property {('空闲'|'使用中'|'病猪栏'|'康复栏'|'清洗消毒'|'维修中')} status
+ */
+
+/**
+ * @typedef {object} UpdatePenStatusRequest
+ * @property {('空闲'|'使用中'|'病猪栏'|'康复栏'|'清洗消毒'|'维修中')} status
+ */
+
 /**
 * 获取所有猪栏的列表
- * @returns {Promise<*>}
+ * @returns {Promise<Array<PenResponse>>}
 */
 export const getPens = () => {
  return http.get('/api/v1/pens');
@@ -10,8 +41,8 @@ export const getPens = () => {

 /**
 * 创建一个新的猪栏
- * @param {object} penData - 猪栏信息，对应 dto.CreatePenRequest
- * @returns {Promise<*>}
+ * @param {CreatePenRequest} penData - 猪栏信息
+ * @returns {Promise<PenResponse>}
 */
 export const createPen = (penData) => {
  return http.post('/api/v1/pens', penData);
@@ -20,7 +51,7 @@ export const createPen = (penData) => {
 /**
 * 根据ID获取单个猪栏信息
 * @param {number} id - 猪栏ID
- * @returns {Promise<*>}
+ * @returns {Promise<PenResponse>}
 */
 export const getPenById = (id) => {
  return http.get(`/api/v1/pens/${id}`);
@@ -29,8 +60,8 @@ export const getPenById = (id) => {
 /**
 * 更新一个已存在的猪栏信息
 * @param {number} id - 猪栏ID
- * @param {object} penData - 猪栏信息，对应 dto.UpdatePenRequest
- * @returns {Promise<*>}
+ * @param {UpdatePenRequest} penData - 猪栏信息
+ * @returns {Promise<PenResponse>}
 */
 export const updatePen = (id, penData) => {
  return http.put(`/api/v1/pens/${id}`, penData);
@@ -48,8 +79,8 @@ export const deletePen = (id) => {
 /**
 * 更新指定猪栏的当前状态
 * @param {number} id - 猪栏ID
- * @param {object} statusData - 新的猪栏状态，对应 dto.UpdatePenStatusRequest
- * @returns {Promise<*>}
+ * @param {UpdatePenStatusRequest} statusData - 新的猪栏状态
+ * @returns {Promise<PenResponse>}
 */
 export const updatePenStatus = (id, statusData) => {
  return http.put(`/api/v1/pens/${id}/status`, statusData);
--- a/src/api/pigBatch.js
+++ b/src/api/pigBatch.js
@@ -1,11 +1,193 @@
 import http from '../utils/http';

+// --- Typedefs ---
+
+/**
+ * @typedef {('自繁'|'外购')} PigBatchOriginType
+ */
+
+/**
+ * @typedef {('保育'|'生长'|'育肥'|'待售'|'已出售'|'已归档')} PigBatchStatus
+ */
+
+/**
+ * @typedef {object} PigBatchResponseDTO
+ * @property {number} id - 批次ID
+ * @property {string} batch_number - 批次编号
+ * @property {PigBatchOriginType} origin_type - 批次来源
+ * @property {string} start_date - 批次开始日期
+ * @property {string} [end_date] - 批次结束日期
+ * @property {number} initial_count - 初始数量
+ * @property {PigBatchStatus} status - 批次状态
+ * @property {boolean} is_active - 是否活跃
+ * @property {string} create_time - 创建时间
+ * @property {string} update_time - 更新时间
+ * @property {number} currentTotalQuantity - 当前总数
+ * @property {number} currentTotalPigsInPens - 当前存栏总数
+ */
+
+/**
+ * @typedef {object} PigBatchesParams
+ * @property {boolean} [is_active] - 是否活跃 (true/false)
+ */
+
+/**
+ * @typedef {object} PigBatchCreateDTO
+ * @property {string} batch_number - 批次编号，必填
+ * @property {PigBatchOriginType} origin_type - 批次来源，必填
+ * @property {string} start_date - 批次开始日期，必填
+ * @property {number} initial_count - 初始数量，必填，最小为1
+ * @property {PigBatchStatus} status - 批次状态，必填
+ */
+
+/**
+ * @typedef {object} PigBatchUpdateDTO
+ * @property {string} [batch_number] - 批次编号，可选
+ * @property {PigBatchOriginType} [origin_type] - 批次来源，可选
+ * @property {string} [start_date] - 批次开始日期，可选
+ * @property {string} [end_date] - 批次结束日期，可选
+ * @property {number} [initial_count] - 初始数量，可选
+ * @property {PigBatchStatus} [status] - 批次状态，可选
+ */
+
+/**
+ * @typedef {object} AssignEmptyPensToBatchRequest
+ * @property {Array<number>} pen_ids - 待分配的猪栏ID列表
+ */
+
+/**
+ * @typedef {object} BuyPigsRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 买入猪只数量
+ * @property {number} unitPrice - 单价
+ * @property {number} totalPrice - 总价
+ * @property {string} traderName - 交易方名称
+ * @property {string} tradeDate - 交易日期
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} SellPigsRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 卖出猪只数量
+ * @property {number} unitPrice - 单价
+ * @property {number} totalPrice - 总价
+ * @property {string} traderName - 交易方名称
+ * @property {string} tradeDate - 交易日期
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} MovePigsIntoPenRequest
+ * @property {number} toPenID - 目标猪栏ID
+ * @property {number} quantity - 移入猪只数量
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} TransferPigsWithinBatchRequest
+ * @property {number} fromPenID - 源猪栏ID
+ * @property {number} toPenID - 目标猪栏ID
+ * @property {number} quantity - 调栏猪只数量
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} TransferPigsAcrossBatchesRequest
+ * @property {number} fromPenID - 源猪栏ID
+ * @property {number} destBatchID - 目标猪批次ID
+ * @property {number} toPenID - 目标猪栏ID
+ * @property {number} quantity - 调栏猪只数量
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} ReclassifyPenToNewBatchRequest
+ * @property {number} penID - 待划拨的猪栏ID
+ * @property {number} toBatchID - 目标猪批次ID
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {('原地治疗'|'病猪栏治疗')} PigBatchSickPigTreatmentLocation
+ */
+
+/**
+ * @typedef {object} RecordSickPigsRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 病猪数量
+ * @property {PigBatchSickPigTreatmentLocation} treatmentLocation - 治疗地点
+ * @property {string} happenedAt - 发生时间
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} RecordSickPigRecoveryRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 康复猪数量
+ * @property {PigBatchSickPigTreatmentLocation} treatmentLocation - 治疗地点
+ * @property {string} happenedAt - 发生时间
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} RecordSickPigDeathRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 死亡猪数量
+ * @property {PigBatchSickPigTreatmentLocation} treatmentLocation - 治疗地点
+ * @property {string} happenedAt - 发生时间
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} RecordSickPigCullRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 淘汰猪数量
+ * @property {PigBatchSickPigTreatmentLocation} treatmentLocation - 治疗地点
+ * @property {string} happenedAt - 发生时间
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} RecordDeathRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 死亡猪数量
+ * @property {string} happenedAt - 发生时间
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} RecordCullRequest
+ * @property {number} penID - 猪栏ID
+ * @property {number} quantity - 淘汰猪数量
+ * @property {string} happenedAt - 发生时间
+ * @property {string} [remarks] - 备注
+ */
+
+/**
+ * @typedef {object} PenResponse
+ * @property {number} id
+ * @property {number} house_id
+ * @property {string} pen_number
+ * @property {number} capacity
+ * @property {number} current_pig_count
+ * @property {number} pig_batch_id
+ * @property {('空闲'|'使用中'|'病猪栏'|'康复栏'|'清洗消毒'|'维修中')} status
+ */
+
+/**
+ * @typedef {object} PigHouseResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} description
+ */
+
 // --- 猪批次基础操作 ---

 /**
 * 获取所有猪批次的列表
- * @param {object} params - 查询参数，例如 { is_active: true }
- * @returns {Promise<*>}
+ * @param {PigBatchesParams} params - 查询参数
+ * @returns {Promise<Array<PigBatchResponseDTO>>}
 */
 export const getPigBatches = (params) => {
  return http.get('/api/v1/pig-batches', { params });
@@ -13,8 +195,8 @@ export const getPigBatches = (params) => {

 /**
 * 创建一个新的猪批次
- * @param {object} batchData - 猪批次信息，对应 dto.PigBatchCreateDTO
- * @returns {Promise<*>}
+ * @param {PigBatchCreateDTO} batchData - 猪批次信息
+ * @returns {Promise<PigBatchResponseDTO>}
 */
 export const createPigBatch = (batchData) => {
  return http.post('/api/v1/pig-batches', batchData);
@@ -23,7 +205,7 @@ export const createPigBatch = (batchData) => {
 /**
 * 根据ID获取单个猪批次信息
 * @param {number} id - 猪批次ID
- * @returns {Promise<*>}
+ * @returns {Promise<PigBatchResponseDTO>}
 */
 export const getPigBatchById = (id) => {
  return http.get(`/api/v1/pig-batches/${id}`);
@@ -32,8 +214,8 @@ export const getPigBatchById = (id) => {
 /**
 * 更新一个已存在的猪批次信息
 * @param {number} id - 猪批次ID
- * @param {object} batchData - 猪批次信息，对应 dto.PigBatchUpdateDTO
- * @returns {Promise<*>}
+ * @param {PigBatchUpdateDTO} batchData - 猪批次信息
+ * @returns {Promise<PigBatchResponseDTO>}
 */
 export const updatePigBatch = (id, batchData) => {
  return http.put(`/api/v1/pig-batches/${id}`, batchData);
@@ -53,7 +235,7 @@ export const deletePigBatch = (id) => {
 /**
 * 为猪批次分配空栏
 * @param {number} id - 猪批次ID
- * @param {object} pensData - 待分配的猪栏ID列表，对应 dto.AssignEmptyPensToBatchRequest
+ * @param {AssignEmptyPensToBatchRequest} pensData - 待分配的猪栏ID列表
 * @returns {Promise<*>}
 */
 export const assignPensToBatch = (id, pensData) => {
@@ -62,18 +244,18 @@ export const assignPensToBatch = (id, pensData) => {

 /**
 * 从猪批次移除空栏
- * @param {number} batchID - 猪批次ID
 * @param {number} penID - 待移除的猪栏ID
+ * @param {number} batchID - 猪批次ID
 * @returns {Promise<*>}
 */
-export const removePenFromBatch = (batchID, penID) => {
+export const removePenFromBatch = (penID, batchID) => {
  return http.delete(`/api/v1/pig-batches/remove-pen/${penID}/${batchID}`);
 };

 /**
 * 处理买猪的业务逻辑
 * @param {number} id - 猪批次ID
- * @param {object} buyData - 买猪请求信息，对应 dto.BuyPigsRequest
+ * @param {BuyPigsRequest} buyData - 买猪请求信息
 * @returns {Promise<*>}
 */
 export const buyPigsForBatch = (id, buyData) => {
@@ -83,7 +265,7 @@ export const buyPigsForBatch = (id, buyData) => {
 /**
 * 处理卖猪的业务逻辑
 * @param {number} id - 猪批次ID
- * @param {object} sellData - 卖猪请求信息，对应 dto.SellPigsRequest
+ * @param {SellPigsRequest} sellData - 卖猪请求信息
 * @returns {Promise<*>}
 */
 export const sellPigsFromBatch = (id, sellData) => {
@@ -93,7 +275,7 @@ export const sellPigsFromBatch = (id, sellData) => {
 /**
 * 将猪只从“虚拟库存”移入指定猪栏
 * @param {number} id - 猪批次ID
- * @param {object} moveData - 移入猪只请求信息，对应 dto.MovePigsIntoPenRequest
+ * @param {MovePigsIntoPenRequest} moveData - 移入猪只请求信息
 * @returns {Promise<*>}
 */
 export const movePigsIntoPen = (id, moveData) => {
@@ -103,7 +285,7 @@ export const movePigsIntoPen = (id, moveData) => {
 /**
 * 群内调栏
 * @param {number} id - 猪批次ID
- * @param {object} transferData - 群内调栏请求信息，对应 dto.TransferPigsWithinBatchRequest
+ * @param {TransferPigsWithinBatchRequest} transferData - 群内调栏请求信息
 * @returns {Promise<*>}
 */
 export const transferPigsWithinBatch = (id, transferData) => {
@@ -113,7 +295,7 @@ export const transferPigsWithinBatch = (id, transferData) => {
 /**
 * 跨猪群调栏
 * @param {number} sourceBatchID - 源猪批次ID
- * @param {object} transferData - 跨群调栏请求信息，对应 dto.TransferPigsAcrossBatchesRequest
+ * @param {TransferPigsAcrossBatchesRequest} transferData - 跨群调栏请求信息
 * @returns {Promise<*>}
 */
 export const transferPigsAcrossBatches = (sourceBatchID, transferData) => {
@@ -123,7 +305,7 @@ export const transferPigsAcrossBatches = (sourceBatchID, transferData) => {
 /**
 * 将猪栏划拨到新批次
 * @param {number} fromBatchID - 源猪批次ID
- * @param {object} reclassifyData - 划拨请求信息，对应 dto.ReclassifyPenToNewBatchRequest
+ * @param {ReclassifyPenToNewBatchRequest} reclassifyData - 划拨请求信息
 * @returns {Promise<*>}
 */
 export const reclassifyPenToNewBatch = (fromBatchID, reclassifyData) => {
@@ -135,7 +317,7 @@ export const reclassifyPenToNewBatch = (fromBatchID, reclassifyData) => {
 /**
 * 记录新增病猪事件
 * @param {number} id - 猪批次ID
- * @param {object} sickData - 记录病猪请求信息，对应 dto.RecordSickPigsRequest
+ * @param {RecordSickPigsRequest} sickData - 记录病猪请求信息
 * @returns {Promise<*>}
 */
 export const recordSickPigsInBatch = (id, sickData) => {
@@ -145,7 +327,7 @@ export const recordSickPigsInBatch = (id, sickData) => {
 /**
 * 记录病猪康复事件
 * @param {number} id - 猪批次ID
- * @param {object} recoveryData - 记录病猪康复请求信息，对应 dto.RecordSickPigRecoveryRequest
+ * @param {RecordSickPigRecoveryRequest} recoveryData - 记录病猪康复请求信息
 * @returns {Promise<*>}
 */
 export const recordSickPigRecoveryInBatch = (id, recoveryData) => {
@@ -155,7 +337,7 @@ export const recordSickPigRecoveryInBatch = (id, recoveryData) => {
 /**
 * 记录病猪死亡事件
 * @param {number} id - 猪批次ID
- * @param {object} deathData - 记录病猪死亡请求信息，对应 dto.RecordSickPigDeathRequest
+ * @param {RecordSickPigDeathRequest} deathData - 记录病猪死亡请求信息
 * @returns {Promise<*>}
 */
 export const recordSickPigDeathInBatch = (id, deathData) => {
@@ -165,7 +347,7 @@ export const recordSickPigDeathInBatch = (id, deathData) => {
 /**
 * 记录病猪淘汰事件
 * @param {number} id - 猪批次ID
- * @param {object} cullData - 记录病猪淘汰请求信息，对应 dto.RecordSickPigCullRequest
+ * @param {RecordSickPigCullRequest} cullData - 记录病猪淘汰请求信息
 * @returns {Promise<*>}
 */
 export const recordSickPigCullInBatch = (id, cullData) => {
@@ -175,7 +357,7 @@ export const recordSickPigCullInBatch = (id, cullData) => {
 /**
 * 记录正常猪只死亡事件
 * @param {number} id - 猪批次ID
- * @param {object} deathData - 记录正常猪只死亡请求信息，对应 dto.RecordDeathRequest
+ * @param {RecordDeathRequest} deathData - 记录正常猪只死亡请求信息
 * @returns {Promise<*>}
 */
 export const recordDeathInBatch = (id, deathData) => {
@@ -185,9 +367,27 @@ export const recordDeathInBatch = (id, deathData) => {
 /**
 * 记录正常猪只淘汰事件
 * @param {number} id - 猪批次ID
- * @param {object} cullData - 记录正常猪只淘汰请求信息，对应 dto.RecordCullRequest
+ * @param {RecordCullRequest} cullData - 记录正常猪只淘汰请求信息
 * @returns {Promise<*>}
 */
 export const recordCullInBatch = (id, cullData) => {
  return http.post(`/api/v1/pig-batches/record-cull/${id}`, cullData);
 };
+
+// --- 新增的猪栏和猪舍API ---
+
+/**
+ * 获取所有猪栏的列表
+ * @returns {Promise<Array<PenResponse>>}
+ */
+export const getAllPens = () => {
+  return http.get('/api/v1/pens');
+};
+
+/**
+ * 获取所有猪舍的列表
+ * @returns {Promise<Array<PigHouseResponse>>}
+ */
+export const getAllPigHouses = () => {
+  return http.get('/api/v1/pig-houses');
+};
--- a/src/api/pigHouse.js
+++ b/src/api/pigHouse.js
@@ -1,8 +1,27 @@
 import http from '../utils/http';

+/**
+ * @typedef {object} PigHouseResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} description
+ */
+
+/**
+ * @typedef {object} CreatePigHouseRequest
+ * @property {string} name
+ * @property {string} [description]
+ */
+
+/**
+ * @typedef {object} UpdatePigHouseRequest
+ * @property {string} name
+ * @property {string} [description]
+ */
+
 /**
 * 获取所有猪舍的列表
- * @returns {Promise<*>}
+ * @returns {Promise<Array<PigHouseResponse>>}
 */
 export const getPigHouses = () => {
  return http.get('/api/v1/pig-houses');
@@ -10,8 +29,8 @@ export const getPigHouses = () => {

 /**
 * 创建一个新的猪舍
- * @param {object} pigHouseData - 猪舍信息，对应 dto.CreatePigHouseRequest
- * @returns {Promise<*>}
+ * @param {CreatePigHouseRequest} pigHouseData - 猪舍信息
+ * @returns {Promise<PigHouseResponse>}
 */
 export const createPigHouse = (pigHouseData) => {
  return http.post('/api/v1/pig-houses', pigHouseData);
@@ -20,7 +39,7 @@ export const createPigHouse = (pigHouseData) => {
 /**
 * 根据ID获取单个猪舍信息
 * @param {number} id - 猪舍ID
- * @returns {Promise<*>}
+ * @returns {Promise<PigHouseResponse>}
 */
 export const getPigHouseById = (id) => {
  return http.get(`/api/v1/pig-houses/${id}`);
@@ -29,8 +48,8 @@ export const getPigHouseById = (id) => {
 /**
 * 更新一个已存在的猪舍信息
 * @param {number} id - 猪舍ID
- * @param {object} pigHouseData - 猪舍信息，对应 dto.UpdatePigHouseRequest
- * @returns {Promise<*>}
+ * @param {UpdatePigHouseRequest} pigHouseData - 猪舍信息
+ * @returns {Promise<PigHouseResponse>}
 */
 export const updatePigHouse = (id, pigHouseData) => {
  return http.put(`/api/v1/pig-houses/${id}`, pigHouseData);
--- a/src/api/plan.js
+++ b/src/api/plan.js
@@ -1,17 +1,128 @@
 import http from '../utils/http';

 /**
- * 获取所有计划的列表
- * @returns {Promise<*>}
+ * @typedef {('计划分析'|'等待'|'下料'|'全量采集')} TaskType
 */
-const getPlans = () => {
-  return http.get('/api/v1/plans');
+
+/**
+ * @typedef {object} TaskRequest
+ * @property {string} [name]
+ * @property {string} [description]
+ * @property {TaskType} [type]
+ * @property {object} [parameters]
+ * @property {number} [execution_order]
+ */
+
+/**
+ * @typedef {('自动'|'手动')} PlanExecutionType
+ */
+
+/**
+ * @typedef {object} CreatePlanRequest
+ * @property {string} name
+ * @property {string} [description]
+ * @property {PlanExecutionType} execution_type
+ * @property {string} [cron_expression]
+ * @property {number} [execute_num]
+ * @property {Array<TaskRequest>} [tasks]
+ * @property {Array<number>} [sub_plan_ids]
+ */
+
+/**
+ * @typedef {object} UpdatePlanRequest
+ * @property {string} [name]
+ * @property {string} [description]
+ * @property {PlanExecutionType} execution_type
+ * @property {string} [cron_expression]
+ * @property {number} [execute_num]
+ * @property {Array<TaskRequest>} [tasks]
+ * @property {Array<number>} [sub_plan_ids]
+ */
+
+/**
+ * @typedef {object} TaskResponse
+ * @property {number} id
+ * @property {number} plan_id
+ * @property {string} name
+ * @property {string} description
+ * @property {TaskType} type
+ * @property {object} parameters
+ * @property {number} execution_order
+ */
+
+/**
+ * @typedef {object} SubPlanResponse
+ * @property {number} id
+ * @property {number} parent_plan_id
+ * @property {number} child_plan_id
+ * @property {number} execution_order
+ * @property {PlanResponse} child_plan
+ */
+
+/**
+ * @typedef {('已禁用'|'已启用'|'执行完毕'|'执行失败')} PlanStatus
+ */
+
+/**
+ * @typedef {('子计划'|'任务')} PlanContentType
+ */
+
+/**
+ * @typedef {('自定义任务'|'系统任务')} PlanType
+ */
+
+/**
+ * @typedef {object} PlanResponse
+ * @property {number} id
+ * @property {string} name
+ * @property {string} description
+ * @property {PlanExecutionType} execution_type
+ * @property {string} cron_expression
+ * @property {number} execute_num
+ * @property {number} execute_count
+ * @property {PlanStatus} status
+ * @property {PlanContentType} content_type
+ * @property {PlanType} plan_type
+ * @property {Array<TaskResponse>} tasks
+ * @property {Array<SubPlanResponse>} sub_plans
+ */
+
+/**
+ * @typedef {object} ListPlansResponse
+ * @property {Array<PlanResponse>} plans
+ * @property {number} total
+ */
+
+/**
+ * @typedef {object} PlanExecutionLogDTO
+ * @property {string} created_at
+ * @property {string} ended_at
+ * @property {string} error
+ * @property {number} id
+ * @property {number} plan_id
+ * @property {string} plan_name
+ * @property {string} started_at
+ * @property {string} status
+ * @property {string} updated_at
+ */
+
+
+/**
+ * 获取所有计划的列表
+ * @param {object} params - 查询参数
+ * @param {number} [params.page] - 页码
+ * @param {number} [params.pageSize] - 每页大小
+ * @param {('所有任务'|'自定义任务'|'系统任务')} [params.planType] - 计划类型
+ * @returns {Promise<ListPlansResponse>}
+ */
+const getPlans = (params) => {
+  return http.get('/api/v1/plans', { params });
 };

 /**
 * 创建一个新的计划
- * @param {object} planData - 计划信息，对应 dto.CreatePlanRequest
- * @returns {Promise<*>}
+ * @param {CreatePlanRequest} planData - 计划信息
+ * @returns {Promise<PlanResponse>}
 */
 const createPlan = (planData) => {
  return http.post('/api/v1/plans', planData);
@@ -20,24 +131,24 @@ const createPlan = (planData) => {
 /**
 * 根据计划ID获取单个计划的详细信息
 * @param {number} id - 计划ID
- * @returns {Promise<*>}
+ * @returns {Promise<PlanResponse>}
 */
 const getPlanById = (id) => {
  return http.get(`/api/v1/plans/${id}`);
 };

 /**
- * 根据计划ID更新计划的详细信息
+ * 根据计划ID更新计划的详细信息。系统计划不允许修改。
 * @param {number} id - 计划ID
- * @param {object} planData - 更新后的计划信息，对应 dto.UpdatePlanRequest
- * @returns {Promise<*>}
+ * @param {UpdatePlanRequest} planData - 更新后的计划信息
+ * @returns {Promise<PlanResponse>}
 */
 const updatePlan = (id, planData) => {
  return http.put(`/api/v1/plans/${id}`, planData);
 };

 /**
- * 根据计划ID删除计划（软删除）
+ * 根据计划ID删除计划。（软删除）系统计划不允许删除。
 * @param {number} id - 计划ID
 * @returns {Promise<*>}
 */
@@ -46,7 +157,7 @@ const deletePlan = (id) => {
 };

 /**
- * 根据计划ID启动一个计划的执行
+ * 根据计划ID启动一个计划的执行。系统计划不允许手动启动。
 * @param {number} id - 计划ID
 * @returns {Promise<*>}
 */
@@ -55,7 +166,7 @@ const startPlan = (id) => {
 };

 /**
- * 根据计划ID停止一个正在执行的计划
+ * 根据计划ID停止一个正在执行的计划。系统计划不能被停止。
 * @param {number} id - 计划ID
 * @returns {Promise<*>}
 */
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,9 +1,89 @@
 import http from '../utils/http';

+/**
+ * @typedef {object} CreateUserRequest
+ * @property {string} username
+ * @property {string} password
+ */
+
+/**
+ * @typedef {object} CreateUserResponse
+ * @property {number} id
+ * @property {string} username
+ */
+
+/**
+ * @typedef {object} LoginRequest
+ * @property {string} identifier - Identifier 可以是用户名、邮箱、手机号、微信号或飞书账号
+ * @property {string} password
+ */
+
+/**
+ * @typedef {object} LoginResponse
+ * @property {number} id
+ * @property {string} username
+ * @property {string} token
+ */
+
+/**
+ * @typedef {('成功'|'失败')} AuditStatus
+ */
+
+/**
+ * @typedef {object} UserActionLogDTO
+ * @property {number} id
+ * @property {number} user_id
+ * @property {string} username
+ * @property {string} action_type
+ * @property {string} description
+ * @property {string} http_method
+ * @property {string} http_path
+ * @property {string} source_ip
+ * @property {Array<number>} target_resource
+ * @property {AuditStatus} status
+ * @property {string} result_details
+ * @property {string} time
+ */
+
+/**
+ * @typedef {object} PaginationDTO
+ * @property {number} page
+ * @property {number} pageSize
+ * @property {number} total
+ */
+
+/**
+ * @typedef {object} ListUserActionLogResponse
+ * @property {Array<UserActionLogDTO>} list
+ * @property {PaginationDTO} pagination
+ */
+
+/**
+ * @typedef {object} UserHistoryParams
+ * @property {string} [action_type]
+ * @property {string} [end_time]
+ * @property {string} [order_by]
+ * @property {number} [page]
+ * @property {number} [pageSize]
+ * @property {string} [start_time]
+ * @property {string} [status]
+ * @property {number} [user_id]
+ * @property {string} [username]
+ */
+
+/**
+ * @typedef {('邮件'|'企业微信'|'飞书'|'日志')} NotifierType
+ */
+
+/**
+ * @typedef {object} SendTestNotificationRequest
+ * @property {NotifierType} type - Type 指定要测试的通知渠道
+ */
+
 /**
 * 创建一个新用户
- * @param {object} userData - 用户信息，对应 dto.CreateUserRequest
- * @returns {Promise<*>}
+ * @param {CreateUserRequest} userData - 用户信息
+ * @returns {Promise<CreateUserResponse>}
 */
 const createUser = (userData) => {
  return http.post('/api/v1/users', userData);
@@ -11,8 +91,8 @@ const createUser = (userData) => {

 /**
 * 用户登录
- * @param {object} credentials - 登录凭证，对应 dto.LoginRequest
- * @returns {Promise<*>}
+ * @param {LoginRequest} credentials - 登录凭证
+ * @returns {Promise<LoginResponse>}
 */
 const login = (credentials) => {
  return http.post('/api/v1/users/login', credentials);
@@ -21,15 +101,26 @@ const login = (credentials) => {
 /**
 * 获取指定用户的操作历史
 * @param {number} id - 用户ID
- * @param {object} params - 查询参数
- * @returns {Promise<*>}
+ * @param {UserHistoryParams} params - 查询参数
+ * @returns {Promise<ListUserActionLogResponse>}
 */
 const getUserHistory = (id, params) => {
  return http.get(`/api/v1/users/${id}/history`, { params });
 };

+/**
+ * 发送测试通知
+ * @param {number} id - 用户ID
+ * @param {SendTestNotificationRequest} data - 请求体
+ * @returns {Promise<string>}
+ */
+const sendTestNotification = (id, data) => {
+  return http.post(`/api/v1/users/${id}/notifications/test`, data);
+};
+
 export const UserApi = {
  createUser,
  login,
  getUserHistory,
+  sendTestNotification,
 };
--- a/src/components/AllocatePigsDialog.vue
+++ b/src/components/AllocatePigsDialog.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog
+    title="分配猪只"
+    :model-value="visible"
+    @update:model-value="$emit('update:visible', $event)"
+    width="30%"
+    @close="resetForm"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="未分配数量">
+        <span>{{ unassignedPigCount }}</span>
+      </el-form-item>
+      <el-form-item label="分配数量" prop="quantity">
+        <el-input-number v-model="form.quantity" :min="1" :max="unassignedPigCount" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="$emit('update:visible', false)">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'AllocatePigsDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    unassignedPigCount: {
+      type: Number,
+      required: true
+    },
+    penId: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ['update:visible', 'confirm'],
+  data() {
+    return {
+      form: {
+        quantity: 1
+      },
+      rules: {
+        quantity: [
+          { required: true, message: '请输入分配数量', trigger: 'blur' },
+          { type: 'integer', message: '请输入整数', trigger: 'blur' },
+          { validator: this.validateQuantity, trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    validateQuantity(rule, value, callback) {
+      if (value > this.unassignedPigCount) {
+        callback(new Error('分配数量不能超过未分配数量'));
+      } else {
+        callback();
+      }
+    },
+    handleConfirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$emit('confirm', { penId: this.penId, quantity: this.form.quantity });
+          this.$emit('update:visible', false);
+        }
+      });
+    },
+    resetForm() {
+      this.$refs.form.resetFields();
+      this.form.quantity = 1;
+    }
+  }
+};
+</script>
--- a/src/components/GenericMonitorList.vue
+++ b/src/components/GenericMonitorList.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="generic-monitor-list">
+    <el-card shadow="never">
+      <el-form :inline="true" :model="filters" class="filter-form">
+        <el-form-item v-for="col in filterableColumns" :key="col.dataIndex" :label="col.title">
+          <template v-if="col.filterType === 'text'">
+            <el-input
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            ></el-input>
+          </template>
+          <template v-else-if="col.filterType === 'number'">
+            <el-input-number
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                :controls="false"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            ></el-input-number>
+          </template>
+          <template v-else-if="col.filterType === 'dateRange'">
+            <el-date-picker
+                v-model="filters[col.dataIndex]"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            ></el-date-picker>
+          </template>
+          <template v-else-if="col.filterType === 'select'">
+            <el-select
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            >
+              <el-option
+                  v-for="option in col.filterOptions"
+                  :key="option.value"
+                  :label="option.text"
+                  :value="option.value"
+              ></el-option>
+            </el-select>
+          </template>
+          <template v-else-if="col.filterType === 'boolean'">
+            <el-select
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+            >
+              <el-option label="是" :value="true"></el-option>
+              <el-option label="否" :value="false"></el-option>
+            </el-select>
+          </template>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="loadData">查询</el-button>
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table
+          :data="data"
+          v-loading="loading"
+          border
+          stripe
+          style="width: 100%"
+          table-layout="auto"
+          :fit="true"
+          :scrollbar-always-on="true"
+          @sort-change="handleSortChange"
+      >
+        <el-table-column
+            v-for="col in tableColumns"
+            :key="col.key"
+            :prop="col.prop"
+            :label="col.title"
+            :sortable="col.sorter ? 'custom' : false"
+            :formatter="col.formatter"
+            :min-width="col.minWidth"
+        >
+          <template v-if="col.render" #default="{ row }">
+            <component :is="col.render(row)"/>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          background
+          style="margin-top: 20px; text-align: right;"
+      ></el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {ElMessage} from 'element-plus';
+
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    required: true,
+  },
+  columnsConfig: {
+    type: Array,
+    required: true,
+  },
+});
+
+const data = ref([]);
+const loading = ref(false);
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+const filters = reactive({});
+const sortOrder = reactive({
+  prop: undefined,
+  order: undefined,
+});
+
+const filterableColumns = computed(() => {
+  return props.columnsConfig.filter(col => col.filterType);
+});
+
+const tableColumns = computed(() => {
+  return props.columnsConfig.map(col => {
+    const newCol = {...col};
+    newCol.prop = Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : col.dataIndex;
+
+    // 添加智能默认 formatter
+    if (!newCol.formatter) {
+      newCol.formatter = (row, column, cellValue) => {
+        if (typeof cellValue === 'object' && cellValue !== null) {
+          try {
+            return JSON.stringify(cellValue, null, 2); // 格式化为可读的JSON字符串
+          } catch (e) {
+            console.warn('Failed to stringify object for display:', cellValue, e);
+            return '[Object]'; // 无法序列化时显示简短提示
+          }
+        } else if (Array.isArray(cellValue)) {
+            return cellValue.join(', '); // 数组也默认用逗号连接
+        }
+        return cellValue;
+      };
+    }
+
+    return newCol;
+  });
+});
+
+const loadData = async () => {
+  loading.value = true;
+  try {
+    const params = {
+      page: pagination.currentPage,
+      pageSize: pagination.pageSize,
+      ...filters,
+      orderBy: sortOrder.prop,
+      order: sortOrder.order === 'ascending' ? 'asc' : (sortOrder.order === 'descending' ? 'desc' : undefined),
+    };
+
+    // Custom function to format Date objects to YYYY-MM-DDTHH:mm:ssZ
+    const formatToRFC3339WithOffset = (date) => {
+      if (!date) return ''; // Handle null or undefined dates
+      const year = date.getUTCFullYear();
+      const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
+      const day = date.getUTCDate().toString().padStart(2, '0');
+      const hours = date.getUTCHours().toString().padStart(2, '0');
+      const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+      const seconds = date.getUTCSeconds().toString().padStart(2, '0');
+      return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}Z`;
+    };
+
+    // 将日期范围筛选转换为 start_time 和 end_time，并确保是 RFC3339 UTC 格式 (不带毫秒)
+    filterableColumns.value.forEach(col => {
+      if (col.filterType === 'dateRange' && filters[col.dataIndex] && filters[col.dataIndex].length === 2) {
+        // filters[col.dataIndex] will now contain Date objects directly from el-date-picker
+        const startDateObj = filters[col.dataIndex][0];
+        const endDateObj = filters[col.dataIndex][1];
+
+        params[`start_time`] = formatToRFC3339WithOffset(startDateObj);
+        params[`end_time`] = formatToRFC3339WithOffset(endDateObj);
+        delete params[col.dataIndex];
+      }
+    });
+
+    console.log('Sending parameters to fetchData:', params);
+
+    const result = await props.fetchData(params);
+    data.value = result.list;
+    pagination.total = result.total;
+  } catch (error) {
+    console.error('Failed to fetch data:', error);
+    ElMessage.error('获取数据失败，请稍后再试。');
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleSizeChange = (val) => {
+  pagination.pageSize = val;
+  pagination.currentPage = 1;
+  loadData();
+};
+
+const handleCurrentChange = (val) => {
+  pagination.currentPage = val;
+  loadData();
+};
+
+const handleSortChange = ({prop, order}) => {
+  sortOrder.prop = prop;
+  sortOrder.order = order;
+  loadData();
+};
+
+const handleFilterChange = (key, value) => {
+  filters[key] = value;
+  pagination.currentPage = 1;
+};
+
+const resetFilters = () => {
+  for (const key in filters) {
+    delete filters[key];
+  }
+  sortOrder.prop = undefined;
+  sortOrder.order = undefined;
+  pagination.currentPage = 1;
+  loadData();
+};
+
+onMounted(() => {
+  loadData();
+});
+
+</script>
+
+<style scoped>
+.generic-monitor-list {
+  padding: 20px;
+}
+
+.filter-form {
+  margin-bottom: 20px;
+}
+
+.filter-form .el-form-item {
+  min-width: 220px; /* 增加最小宽度 */
+}
+
+.el-card {
+  border: none;
+}
+</style>
--- a/src/components/PenForm.vue
+++ b/src/components/PenForm.vue
@@ -0,0 +1,157 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent
+    >
+      <el-form-item label="猪栏编号" prop="pen_number">
+        <el-input v-model="formData.pen_number" placeholder="例如：A01-01" />
+      </el-form-item>
+      <el-form-item label="容量" prop="capacity">
+        <el-input-number v-model="formData.capacity" :min="1" controls-position="right" style="width: 100%" />
+      </el-form-item>
+      <el-form-item v-if="isEdit" label="状态" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
+          <el-option v-for="item in penStatusOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, watch, computed, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { createPen, updatePen } from '@/api/pen.js';
+
+export default {
+  name: 'PenForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    penData: {
+      type: Object,
+      required: true
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const loading = ref(false);
+    const penStatusOptions = ["空闲", "使用中", "病猪栏", "康复栏", "清洗消毒", "维修中"];
+
+    const initialFormData = () => ({
+      id: null,
+      pen_number: '',
+      capacity: 10,
+      status: '空闲',
+      house_id: null
+    });
+
+    const formData = reactive(initialFormData());
+
+    const rules = {
+      pen_number: [
+        { required: true, message: '请输入猪栏编号', trigger: 'blur' }
+      ],
+      capacity: [
+        { required: true, message: '请输入容量', trigger: 'blur' },
+        { type: 'integer', min: 1, message: '容量必须是大于0的整数', trigger: 'blur' }
+      ],
+      status: [
+        { required: true, message: '请选择状态', trigger: 'change' }
+      ]
+    };
+
+    const title = computed(() => (props.isEdit ? '编辑猪栏' : '添加猪栏'));
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      nextTick(() => {
+        formRef.value?.resetFields();
+      });
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            let response;
+            if (props.isEdit) {
+              const { id, ...updateData } = formData;
+              response = await updatePen(id, updateData);
+            } else {
+              const { id, status, ...createData } = formData;
+              response = await createPen(createData);
+            }
+            emit('success', response.data);
+            handleClose();
+          } catch (error) {
+            ElMessage.error((props.isEdit ? '更新' : '创建') + '猪栏失败: ' + (error.message || '未知错误'));
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(() => props.visible, (newVal) => {
+      if (newVal) {
+        Object.assign(formData, initialFormData());
+        if (props.isEdit && props.penData) {
+          Object.assign(formData, props.penData);
+        } else if (props.penData) {
+          formData.house_id = props.penData.house_id;
+        }
+        nextTick(() => {
+          formRef.value?.clearValidate();
+        });
+      }
+    });
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      penStatusOptions,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
--- a/src/components/PigBatchForm.vue
+++ b/src/components/PigBatchForm.vue
@@ -0,0 +1,216 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      :title="title"
+      @close="handleClose"
+      :close-on-click-modal="false"
+      width="600px"
+  >
+    <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="120px"
+        @submit.prevent
+    >
+      <el-form-item label="批次编号" prop="batch_number">
+        <el-input v-model="formData.batch_number" placeholder="请输入批次编号"/>
+      </el-form-item>
+      <el-form-item label="初始数量" prop="initial_count">
+        <el-input-number v-model="formData.initial_count" :min="1" controls-position="right" style="width: 100%"/>
+      </el-form-item>
+      <el-form-item label="来源类型" prop="origin_type">
+        <el-select v-model="formData.origin_type" placeholder="请选择来源类型" style="width: 100%">
+          <el-option v-for="item in originTypeOptions" :key="item" :label="item" :value="item"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="开始日期" prop="start_date">
+        <el-date-picker
+            v-model="formData.start_date"
+            type="datetime"
+            placeholder="选择开始日期和时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            style="width: 100%"
+        />
+      </el-form-item>
+      <el-form-item label="批次状态" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择批次状态" style="width: 100%">
+          <el-option v-for="item in batchStatusOptions" :key="item" :label="item" :value="item"/>
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import {ref, reactive, watch, computed, nextTick} from 'vue';
+import {ElMessage} from 'element-plus';
+import {createPigBatch, updatePigBatch} from '@/api/pigBatch.js';
+
+export default {
+  name: 'PigBatchForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    batchData: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, {emit}) {
+    const formRef = ref(null);
+    const loading = ref(false);
+
+    const originTypeOptions = ["自繁", "外购"];
+    const batchStatusOptions = ["保育", "生长", "育肥", "待售", "已出售", "已归档"];
+
+    const initialFormData = () => ({
+      id: null,
+      batch_number: '',
+      initial_count: 1,
+      origin_type: '自繁',
+      start_date: '',
+      status: '保育',
+    });
+
+    const formData = reactive(initialFormData());
+
+    const rules = {
+      batch_number: [
+        {required: true, message: '请输入批次编号', trigger: 'blur'}
+      ],
+      initial_count: [
+        {required: true, message: '请输入初始数量', trigger: 'blur'},
+        {type: 'integer', min: 1, message: '初始数量必须是大于0的整数', trigger: 'blur'}
+      ],
+      origin_type: [
+        {required: true, message: '请选择来源类型', trigger: 'change'}
+      ],
+      start_date: [
+        {required: true, message: '请选择开始日期', trigger: 'change'}
+      ],
+      status: [
+        {required: true, message: '请选择批次状态', trigger: 'change'}
+      ]
+    };
+
+    const title = computed(() => (props.isEdit ? '编辑猪群' : '添加猪群'));
+
+    // ✅ 修复：东八区 RFC3339 转换函数
+    const toRFC3339 = (dateStr) => {
+      if (!dateStr) return null;
+      // "2025-10-23 14:30:00" → Date 对象（东八区）
+      const date = new Date(dateStr.replace(/ /, 'T') + '+08:00');
+      if (isNaN(date.getTime())) return null;
+      return date.toISOString().slice(0, -1) + '+08:00'; // "2025-10-23T14:30:00+08:00"
+    };
+
+    // ✅ 修复：RFC3339 转显示格式
+    const fromRFC3339 = (rfc3339Str) => {
+      if (!rfc3339Str) return '';
+      const date = new Date(rfc3339Str);
+      if (isNaN(date.getTime())) return '';
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    };
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      nextTick(() => {
+        formRef.value?.resetFields();
+        Object.assign(formData, initialFormData());
+      });
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            let response;
+            const submitData = {...formData};
+            delete submitData.id;
+
+            // ✅ 修复：正确转东八区 RFC3339
+            submitData.start_date = toRFC3339(formData.start_date);
+            console.log('提交的日期:', submitData.start_date); // 调试用
+
+            if (props.isEdit) {
+              response = await updatePigBatch(props.batchData.id, submitData);
+            } else {
+              response = await createPigBatch(submitData);
+            }
+            ElMessage.success((props.isEdit ? '更新' : '创建') + '猪群成功');
+            emit('success', response.data);
+            handleClose();
+          } catch (error) {
+            console.error('提交错误:', error);
+            ElMessage.error((props.isEdit ? '更新' : '创建') + '猪群失败: ' + (error.message || '未知错误'));
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(() => props.visible, (newVal) => {
+      if (newVal) {
+        Object.assign(formData, initialFormData());
+        if (props.isEdit && props.batchData) {
+          // ✅ 修复：正确转换编辑时的日期
+          formData.id = props.batchData.id;
+          formData.batch_number = props.batchData.batch_number || '';
+          formData.initial_count = props.batchData.initial_count || 1;
+          formData.origin_type = props.batchData.origin_type || '自繁';
+          formData.status = props.batchData.status || '保育';
+          formData.start_date = fromRFC3339(props.batchData.start_date);
+        }
+        nextTick(() => {
+          formRef.value?.clearValidate();
+        });
+      }
+    });
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      originTypeOptions,
+      batchStatusOptions,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
--- a/src/components/PigBatchList.vue
+++ b/src/components/PigBatchList.vue
@@ -0,0 +1,300 @@
+<template>
+  <div class="pig-batch-list">
+    <div v-for="batch in pigBatches" :key="batch.id" class="pig-batch-item">
+      <div class="batch-header" @click="toggleExpand(batch)">
+        <div class="batch-info">
+          <div class="batch-info-line">
+            <span>批次编号: {{ batch.batch_number }}</span>
+            <span>状态: {{ batch.status }}</span>
+            <span>初始数量: {{ batch.initial_count }}</span>
+            <span v-if="batch.currentTotalQuantity !== undefined && batch.currentTotalQuantity !== null">当前总数: {{
+                batch.currentTotalQuantity
+              }}</span>
+            <span v-if="batch.origin_type">批次来源: {{ batch.origin_type }}</span>
+          </div>
+          <div class="batch-info-line">
+            <span v-if="batch.start_date">批次开始日期: {{ formatRFC3339(batch.start_date) }}</span>
+            <span v-if="batch.end_date">
+              批次结束日期:
+              <template v-if="formatRFC3339(batch.end_date) === '0001-01-01 08:00:00'">
+                正在饲养中
+              </template>
+              <template v-else>
+                {{ formatRFC3339(batch.end_date) }}
+              </template>
+            </span>
+            <span v-if="batch.unassigned_pig_count !== undefined && batch.unassigned_pig_count > 0" class="red-text">
+              未分配数量: {{ batch.unassigned_pig_count }}
+            </span>
+          </div>
+        </div>
+        <div class="batch-actions">
+          <el-dropdown trigger="click" class="batch-dropdown">
+            <el-button type="primary" size="small">
+              管理猪群<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="showAddPenDialog(batch)" :disabled="!batch.is_active">增加猪栏</el-dropdown-item>
+                <el-dropdown-item @click="emitEditBatch(batch)">编辑</el-dropdown-item>
+                <el-dropdown-item @click="emitDeleteBatch(batch)" divided>删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-dropdown trigger="click" class="batch-dropdown">
+            <el-button type="success" size="small">
+              调栏<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item 
+                  @click="emitTransferPigs(batch)"
+                  :disabled="!batch.is_active || !batch.pens || batch.pens.length < 2"
+                >群内调栏</el-dropdown-item>
+                <el-dropdown-item 
+                  @click="emitTransferPigsAcrossBatches(batch)"
+                  :disabled="!batch.is_active || !batch.pens || batch.pens.length === 0"
+                >跨群调栏</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </div>
+      <div v-if="batch.isExpanded" class="batch-content">
+        <div v-if="batch.pens && batch.pens.length > 0" class="pig-pen-list">
+          <PigBatchPenCard
+              v-for="pen in batch.pens"
+              :key="pen.id"
+              :pen="pen"
+              :isBatchActive="batch.is_active"
+              :batchUnassignedPigCount="batch.unassigned_pig_count"
+              @allocate-pigs="showAllocatePigsDialog($event, batch)"
+              @remove="emitRemovePen"
+          />
+        </div>
+        <div v-else class="no-pens-message">
+          <p>该猪群下没有猪栏信息。</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 增加猪栏对话框 -->
+    <el-dialog title="选择猪栏" v-model="addPenDialogVisible" width="30%">
+      <el-select v-model="selectedPenId" placeholder="请选择猪栏" style="width: 100%;">
+        <el-option
+            v-for="pen in availablePens"
+            :key="pen.id"
+            :label="pen.label"
+            :value="pen.id">
+        </el-option>
+      </el-select>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="addPenDialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="assignPen">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 分配猪只对话框 -->
+    <AllocatePigsDialog
+        v-model:visible="allocatePigsDialogVisible"
+        :unassigned-pig-count="currentBatch ? currentBatch.unassigned_pig_count : 0"
+        :pen-id="selectedPenForAllocation ? selectedPenForAllocation.id : 0"
+        @confirm="handleAllocatePigs"
+    />
+  </div>
+</template>
+
+<script>
+import PigBatchPenCard from './PigBatchPenCard.vue';
+import AllocatePigsDialog from './AllocatePigsDialog.vue';
+import {getAllPens, getAllPigHouses, movePigsIntoPen} from '../api/pigBatch';
+import {formatRFC3339} from '../utils/format'; // 导入格式化函数
+import { ArrowDown } from '@element-plus/icons-vue'; // 导入 ArrowDown 图标
+
+export default {
+  name: 'PigBatchList',
+  components: {
+    PigBatchPenCard,
+    AllocatePigsDialog,
+    ArrowDown // 注册 ArrowDown 图标
+  },
+  props: {
+    pigBatches: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['edit-batch', 'delete-batch', 'add-pen', 'remove-pen', 'assign-pen-to-batch', 'reload-data', 'transfer-pigs', 'transfer-pigs-across-batches'],
+  data() {
+    return {
+      addPenDialogVisible: false,
+      availablePens: [],
+      selectedPenId: null,
+      currentBatch: null, // To store the batch for which we are adding a pen
+      allocatePigsDialogVisible: false,
+      selectedPenForAllocation: null
+    };
+  },
+  methods: {
+    formatRFC3339,
+    toggleExpand(batch) {
+      batch.isExpanded = !batch.isExpanded;
+    },
+    async fetchAvailablePens() {
+      try {
+        const [pensResponse, housesResponse] = await Promise.all([
+          getAllPens(),
+          getAllPigHouses()
+        ]);
+
+        const pens = pensResponse.data;
+        const houses = housesResponse.data;
+
+        // Create a map for quick lookup of house names by ID
+        const houseMap = new Map(houses.map(house => [house.id, house.name]));
+
+        // Filter for pens that are not assigned to any batch
+        const unassignedPens = pens.filter(pen => !pen.pig_batch_id);
+
+        this.availablePens = unassignedPens.map(pen => ({
+          id: pen.id,
+          label: `${pen.pen_number} (${houseMap.get(pen.house_id) || '未知猪舍'})`
+        }));
+      } catch (error) {
+        console.error("Error fetching pens or houses:", error);
+        this.$message.error("获取猪栏或猪舍信息失败");
+      }
+    },
+    showAddPenDialog(batch) {
+      this.currentBatch = batch;
+      this.selectedPenId = null; // Reset selection
+      this.fetchAvailablePens();
+      this.addPenDialogVisible = true;
+    },
+    assignPen() {
+      if (this.selectedPenId && this.currentBatch) {
+        this.$emit('assign-pen-to-batch', {
+          batchId: this.currentBatch.id,
+          penId: this.selectedPenId
+        });
+        this.addPenDialogVisible = false;
+      } else {
+        this.$message.warning("请选择一个猪栏");
+      }
+    },
+    showAllocatePigsDialog(pen, batch) {
+      this.currentBatch = batch;
+      this.selectedPenForAllocation = pen;
+      this.allocatePigsDialogVisible = true;
+    },
+    async handleAllocatePigs({penId, quantity}) {
+      try {
+        await movePigsIntoPen(this.currentBatch.id, {toPenID: penId, quantity});
+        this.$message.success('猪只分配成功');
+        this.allocatePigsDialogVisible = false;
+        this.$emit('reload-data'); // 通知父组件重新加载数据
+      } catch (error) {
+        console.error('Error allocating pigs:', error);
+        this.$message.error('分配猪只失败');
+      }
+    },
+    // 猪群操作
+    emitEditBatch(batch) {
+      this.$emit('edit-batch', batch);
+    },
+    emitDeleteBatch(batch) {
+      this.$emit('delete-batch', batch);
+    },
+    emitTransferPigs(batch) {
+      this.$emit('transfer-pigs', batch);
+    },
+    emitTransferPigsAcrossBatches(batch) {
+      this.$emit('transfer-pigs-across-batches', batch);
+    },
+    // 猪栏操作
+    emitRemovePen(pen) {
+      this.$emit('remove-pen', pen);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pig-batch-list {
+  width: 100%;
+}
+
+.pig-batch-item {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.batch-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  transition: background-color 0.3s;
+}
+
+.batch-header:hover {
+  background-color: #f0f0f0;
+}
+
+.batch-info {
+  display: flex;
+  flex-direction: column; /* 垂直堆叠子元素 */
+  gap: 8px; /* 行间距 */
+}
+
+.batch-info-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 20px; /* 列间距 */
+}
+
+.batch-info-line:first-child span:first-child {
+  font-weight: bold;
+}
+
+.batch-info span {
+  font-size: 14px;
+  color: #606266;
+}
+
+.batch-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.batch-dropdown {
+  margin-left: 10px; /* 为下拉菜单添加左边距 */
+}
+
+.batch-content {
+  padding: 16px;
+  border-top: 1px solid #eee;
+}
+
+.pig-pen-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.no-pens-message {
+  color: #909399;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.batch-info-line .red-text {
+  color: red !important;
+}
+</style>
--- a/src/components/PigBatchPenCard.vue
+++ b/src/components/PigBatchPenCard.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="pig-pen-info-card">
+    <div class="info-section">
+      <div class="title">
+        猪栏: {{ pen.pen_number }} <el-tag size="small" :type="statusType">{{ pen.status || '未知' }}</el-tag>
+      </div>
+      <div class="info-item">猪舍: {{ pen.house_name || '未知' }}</div>
+      <div class="info-item border-left">容量: {{ pen.capacity }}</div>
+      <div class="info-item">批次: {{ pen.batch_number || '未分配' }}</div>
+      <div class="info-item border-left">存栏: <span :class="{'over-capacity': pen.current_pig_count > pen.capacity}">{{ pen.current_pig_count || 0 }}</span></div>
+    </div>
+    <div class="actions-section">
+      <el-button size="small" @click="emitAllocatePigs" :disabled="!isBatchActive || batchUnassignedPigCount <= 0">分配猪只</el-button>
+      <el-button size="small" type="danger" @click="emitRemove" :disabled="!isBatchActive || pen.current_pig_count > 0">移除</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'PigBatchPenCard',
+  props: {
+    pen: {
+      type: Object,
+      required: true
+    },
+    isBatchActive: {
+      type: Boolean,
+      default: true // 默认活跃，以防万一没有传递
+    },
+    batchUnassignedPigCount: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['remove', 'allocate-pigs'],
+  setup(props, { emit }) {
+    const statusType = computed(() => {
+      switch (props.pen.status) {
+        case '使用中':
+          return 'success';
+        case '病猪栏':
+        case '维修中':
+          return 'danger';
+        case '清洗消毒':
+          return 'warning';
+        case '空闲':
+        default:
+          return 'info';
+      }
+    });
+
+    const emitAllocatePigs = () => {
+      emit('allocate-pigs', props.pen);
+    };
+
+    const emitRemove = () => {
+      emit('remove', props.pen);
+    };
+
+    return {
+      statusType,
+      emitAllocatePigs,
+      emitRemove
+    };
+  }
+}
+</script>
+
+<style scoped>
+.pig-pen-info-card {
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 220px; /* 适当加宽以容纳更多信息 */
+  height: auto; /* 让高度自适应内容 */
+  min-height: 240px; /* 设置最小高度 */
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s;
+}
+
+.pig-pen-info-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.info-section {
+  display: grid; /* 使用grid布局创建两列 */
+  grid-template-columns: 1fr 1fr; /* 两列等宽 */
+  gap: 8px 10px; /* 行间距 8px, 列间距 10px */
+  margin-bottom: 10px;
+  flex-grow: 1; /* 允许信息部分填充可用空间 */
+}
+
+.info-section .title {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: #303133;
+  grid-column: 1 / -1; /* 标题横跨两列 */
+  margin-bottom: 5px; /* 标题下方增加一点间距 */
+  display: flex; /* Add flexbox for alignment */
+  align-items: center; /* Vertically align items */
+  gap: 8px; /* Space between title text and tag */
+}
+
+.info-section .info-item {
+  font-size: 0.9em;
+  color: #606266;
+}
+
+.info-item.border-left {
+  border-left: 1px solid #eee; /* 添加左边框作为分隔线 */
+  padding-left: 10px; /* 增加左内边距，使内容不紧贴边框 */
+}
+
+.actions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.actions-section .el-button {
+  width: 100%;
+  margin: 0;
+}
+
+.over-capacity {
+  color: red;
+}
+</style>
--- a/src/components/PigHouseForm.vue
+++ b/src/components/PigHouseForm.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent
+    >
+      <el-form-item label="猪舍名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入猪舍名称" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入描述信息" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, watch, computed, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { createPigHouse, updatePigHouse } from '@/api/pigHouse.js';
+
+export default {
+  name: 'PigHouseForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    houseData: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const loading = ref(false);
+
+    const initialFormData = () => ({
+      id: null,
+      name: '',
+      description: ''
+    });
+
+    const formData = reactive(initialFormData());
+
+    const rules = {
+      name: [
+        { required: true, message: '请输入猪舍名称', trigger: 'blur' }
+      ]
+    };
+
+    const title = computed(() => (props.isEdit ? '编辑猪舍' : '添加猪舍'));
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      Object.assign(formData, initialFormData());
+      nextTick(() => {
+        formRef.value?.resetFields();
+      });
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            const submitData = { name: formData.name, description: formData.description };
+            let response;
+            if (props.isEdit) {
+              response = await updatePigHouse(formData.id, submitData);
+            } else {
+              response = await createPigHouse(submitData);
+            }
+            emit('success', response.data);
+            handleClose();
+          } catch (error) {
+            ElMessage.error((props.isEdit ? '更新' : '创建') + '猪舍失败: ' + (error.message || '未知错误'));
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(() => props.houseData, (newVal) => {
+      Object.assign(formData, initialFormData());
+      if (props.isEdit && newVal && newVal.id) {
+        formData.id = newVal.id;
+        formData.name = newVal.name;
+        formData.description = newVal.description;
+      }
+    }, { immediate: true, deep: true });
+
+    watch(() => props.visible, (newVal) => {
+        if (newVal && !props.isEdit) {
+            Object.assign(formData, initialFormData());
+            nextTick(() => {
+                formRef.value?.clearValidate();
+            });
+        }
+    });
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
--- a/src/components/PigHouseList.vue
+++ b/src/components/PigHouseList.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="pig-house-list">
+    <div v-for="house in enrichedPigHouses" :key="house.id" class="pig-house-item">
+      <div class="house-header" @click="emitToggleExpand(house.id)">
+        <div class="house-info">
+          <span>猪舍: {{ house.name }}</span>
+          <span v-if="house.description">描述: {{ house.description }}</span>
+        </div>
+        <div class="house-actions">
+          <el-button size="small" type="primary" @click.stop="emitAddPen(house)">增加猪栏</el-button>
+          <el-button size="small" @click.stop="emitEditHouse(house)">编辑</el-button>
+          <el-button size="small" type="danger" @click.stop="emitDeleteHouse(house)">删除</el-button>
+        </div>
+      </div>
+      <div v-if="house.isExpanded" class="house-content">
+        <div v-if="house.pens && house.pens.length > 0" class="pig-pen-list">
+          <PigPenInfoCard
+            v-for="pen in house.pens"
+            :key="pen.id"
+            :pen="pen"
+            @edit="emitEditPen"
+            @delete="emitDeletePen"
+          />
+        </div>
+        <div v-else class="no-pens-message">
+          <p>该猪舍下没有猪栏信息。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import PigPenInfoCard from './PigPenInfoCard.vue';
+
+export default {
+  name: 'PigHouseList',
+  components: {
+    PigPenInfoCard
+  },
+  props: {
+    pigHouses: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['edit-house', 'delete-house', 'add-pen', 'edit-pen', 'delete-pen', 'toggle-house-expand'],
+  computed: {
+    enrichedPigHouses() {
+      return this.pigHouses.map(house => {
+        const pensWithHouseInfo = house.pens ? house.pens.map(pen => ({
+          ...pen,
+          house_name: house.name,
+          house_id: house.id
+        })) : [];
+        return {
+          ...house,
+          pens: pensWithHouseInfo
+        };
+      });
+    }
+  },
+  methods: {
+    emitToggleExpand(houseId) {
+      this.$emit('toggle-house-expand', houseId);
+    },
+    // 猪舍操作
+    emitAddPen(house) {
+      this.$emit('add-pen', house);
+    },
+    emitEditHouse(house) {
+      this.$emit('edit-house', house);
+    },
+    emitDeleteHouse(house) {
+      this.$emit('delete-house', house);
+    },
+    // 猪栏操作
+    emitEditPen(pen) {
+      this.$emit('edit-pen', pen);
+    },
+    emitDeletePen(pen) {
+      this.$emit('delete-pen', pen);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pig-house-list {
+  width: 100%;
+}
+
+.pig-house-item {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+
+.house-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  transition: background-color 0.3s;
+}
+
+.house-header:hover {
+  background-color: #f0f0f0;
+}
+
+.house-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.house-info span:first-child {
+  font-weight: bold;
+}
+
+.house-info span {
+  margin-right: 20px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.house-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.house-content {
+  padding: 16px;
+  border-top: 1px solid #eee;
+}
+
+.pig-pen-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.no-pens-message {
+  color: #909399;
+  text-align: center;
+  padding: 20px 0;
+}
+</style>
--- a/src/components/PigPenInfoCard.vue
+++ b/src/components/PigPenInfoCard.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="pig-pen-info-card">
+    <div class="info-section">
+      <div class="title">
+        猪栏: {{ pen.pen_number }} <el-tag size="small" :type="statusType">{{ pen.status || '未知' }}</el-tag>
+      </div>
+      <div class="info-item">猪舍: {{ pen.house_name || '未知' }}</div>
+      <div class="info-item border-left">容量: {{ pen.capacity }}</div>
+      <div class="info-item">批次: {{ pen.batch_number || '未分配' }}</div>
+      <div class="info-item border-left">存栏: <span :class="{'over-capacity': pen.current_pig_count > pen.capacity}">{{ pen.current_pig_count || 0 }}</span></div>
+    </div>
+    <div class="actions-section">
+      <el-button size="small" @click="emitEdit">编辑</el-button>
+      <el-button size="small" type="danger" @click="emitDelete">删除</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'PigPenInfoCard',
+  props: {
+    pen: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['edit', 'delete'],
+  setup(props, { emit }) {
+    const statusType = computed(() => {
+      switch (props.pen.status) {
+        case '使用中':
+          return 'success';
+        case '病猪栏':
+        case '维修中':
+          return 'danger';
+        case '清洗消毒':
+          return 'warning';
+        case '空闲':
+        default:
+          return 'info';
+      }
+    });
+
+    const emitEdit = () => {
+      emit('edit', props.pen);
+    };
+
+    const emitDelete = () => {
+      emit('delete', props.pen);
+    };
+
+    return {
+      statusType,
+      emitEdit,
+      emitDelete
+    };
+  }
+}
+</script>
+
+<style scoped>
+.pig-pen-info-card {
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 220px; /* 适当加宽以容纳更多信息 */
+  height: auto; /* 让高度自适应内容 */
+  min-height: 240px; /* 设置最小高度 */
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s;
+}
+
+.pig-pen-info-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.info-section {
+  display: grid; /* 使用grid布局创建两列 */
+  grid-template-columns: 1fr 1fr; /* 两列等宽 */
+  gap: 8px 10px; /* 行间距 8px, 列间距 10px */
+  margin-bottom: 10px;
+  flex-grow: 1; /* 允许信息部分填充可用空间 */
+}
+
+.info-section .title {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: #303133;
+  grid-column: 1 / -1; /* 标题横跨两列 */
+  margin-bottom: 5px; /* 标题下方增加一点间距 */
+  display: flex; /* Add flexbox for alignment */
+  align-items: center; /* Vertically align items */
+  gap: 8px; /* Space between title text and tag */
+}
+
+.info-section .info-item {
+  font-size: 0.9em;
+  color: #606266;
+}
+
+.info-item.border-left {
+  border-left: 1px solid #eee; /* 添加左边框作为分隔线 */
+  padding-left: 10px; /* 增加左内边距，使内容不紧贴边框 */
+}
+
+.actions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.actions-section .el-button {
+  width: 100%;
+  margin: 0;
+}
+
+.over-capacity {
+  color: red;
+}
+</style>
--- a/src/components/PlanDetail.vue
+++ b/src/components/PlanDetail.vue
@@ -20,9 +20,9 @@
            <span>{{ plan.name }} - 内容</span>
            <div>
              <template v-if="!isSubPlan">
-                <el-button class="button" type="primary" @click="savePlanContent" v-if="isEditingContent">保存</el-button>
-                <el-button class="button" type="danger" @click="cancelEdit" v-if="isEditingContent">取消</el-button>
-                <el-button class="button" @click="enterEditMode" v-else>编辑内容</el-button>
+                <el-button class="button" type="primary" @click="savePlanContent" v-if="isEditingContent" :disabled="plan.plan_type === '系统任务'">保存</el-button>
+                <el-button class="button" type="danger" @click="cancelEdit" v-if="isEditingContent" :disabled="plan.plan_type === '系统任务'">取消</el-button>
+                <el-button class="button" @click="enterEditMode" v-else :disabled="plan.plan_type === '系统任务'">编辑内容</el-button>
              </template>

              <!-- Dynamic Add Buttons -->
@@ -32,12 +32,14 @@
                  type="primary"
                  size="small"
                  @click="showAddSubPlanDialog"
+                  :disabled="plan.plan_type === '系统任务'"
                >增加子计划</el-button>
                <el-button
                  v-if="plan.content_type === 'tasks' || !plan.content_type"
                  type="primary"
                  size="small"
                  @click="showTaskEditorDialog()"
+                  :disabled="plan.plan_type === '系统任务'"
                >增加子任务</el-button>
              </template>
            </div>
@@ -61,8 +63,8 @@
                  延时: {{ task.parameters.delay_duration }} 秒
                </p>
                <el-button-group v-if="isEditingContent">
-                  <el-button type="primary" size="small" @click="editTask(task)">编辑</el-button>
-                  <el-button type="danger" size="small" @click="deleteTask(task)">删除</el-button>
+                  <el-button type="primary" size="small" @click="editTask(task)" :disabled="plan.plan_type === '系统任务'">编辑</el-button>
+                  <el-button type="danger" size="small" @click="deleteTask(task)" :disabled="plan.plan_type === '系统任务'">删除</el-button>
                </el-button-group>
              </el-card>
            </el-timeline-item>
@@ -80,7 +82,7 @@
                  <!-- Pass child_plan_id to recursive PlanDetail -->
                  <plan-detail :plan-id="subPlan.child_plan_id" :is-sub-plan="true" />
                  <el-button-group v-if="isEditingContent" class="sub-plan-actions">
-                    <el-button type="danger" size="small" @click="deleteSubPlan(subPlan)">删除</el-button>
+                    <el-button type="danger" size="small" @click="deleteSubPlan(subPlan)" :disabled="plan.plan_type === '系统任务'">删除</el-button>
                  </el-button-group>
                </div>
              </el-card>
@@ -135,16 +137,16 @@
    >
      <el-form :model="currentTaskForm" ref="taskFormRef" :rules="taskFormRules" label-width="100px">
        <el-form-item label="任务类型" prop="type">
-          <el-select v-model="currentTaskForm.type" placeholder="请选择任务类型" style="width: 100%;" :disabled="isEditingTask">
+          <el-select v-model="currentTaskForm.type" placeholder="请选择任务类型" style="width: 100%;" :disabled="isEditingTask || plan.plan_type === '系统任务'">
            <!-- Only Delay Task for now -->
            <el-option label="延时任务" value="delay_task"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称" prop="name">
-          <el-input v-model="currentTaskForm.name" placeholder="请输入任务名称"></el-input>
+          <el-input v-model="currentTaskForm.name" placeholder="请输入任务名称" :disabled="plan.plan_type === '系统任务'"></el-input>
        </el-form-item>
        <el-form-item label="任务描述" prop="description">
-          <el-input type="textarea" v-model="currentTaskForm.description" placeholder="请输入任务描述"></el-input>
+          <el-input type="textarea" v-model="currentTaskForm.description" placeholder="请输入任务描述" :disabled="plan.plan_type === '系统任务'"></el-input>
        </el-form-item>
        <!-- Dynamic task component for specific parameters -->
        <template v-if="currentTaskForm.type === 'delay_task'">
@@ -153,6 +155,7 @@
            @update:parameters="val => currentTaskForm.parameters = val"
            prop-path="parameters.delay_duration"
            :is-editing="true" 
+            :disabled="plan.plan_type === '系统任务'"
          />
        </template>
        <!-- More task types can be rendered here -->
@@ -160,7 +163,7 @@
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskEditorDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="confirmTaskEdit">确定</el-button>
+          <el-button type="primary" @click="confirmTaskEdit" :disabled="plan.plan_type === '系统任务'">确定</el-button>
        </span>
      </template>
    </el-dialog>
@@ -355,7 +358,7 @@ export default {
    },
    async fetchAvailablePlans() {
      try {
-        const response = await apiClient.plans.getPlans(); // 更正此处
+        const response = await apiClient.plans.getPlans({ planType: '自定义任务' }); 
        this.availablePlans = response.data.plans.filter(p =>
          p.id !== this.planId
        );
@@ -483,7 +486,8 @@ export default {
            } else {
              ElMessage.error('未找到要编辑的任务');
            }
-          } else {
+          }
+          else {
            // Add a new task
            const newTask = {
              id: Date.now(), 
--- a/src/components/PlanList.vue
+++ b/src/components/PlanList.vue
@@ -1,400 +0,0 @@
-<template>
-  <div class="plan-list">
-    <el-card>
-      <template #header>
-        <div class="card-header">
-          <div class="title-container">
-            <h2 class="page-title">计划管理</h2>
-            <el-button type="text" @click="loadPlans" class="refresh-btn" title="刷新计划列表">
-              <el-icon :size="20"><Refresh /></el-icon>
-            </el-button>
-          </div>
-          <el-button type="primary" @click="addPlan">添加计划</el-button>
-        </div>
-      </template>
-      
-      <!-- 加载状态 -->
-      <div v-if="loading" class="loading">
-        <el-skeleton animated />
-      </div>
-      
-      <!-- 错误状态 -->
-      <div v-else-if="error" class="error">
-        <el-alert
-          title="获取计划数据失败"
-          :description="error"
-          type="error"
-          show-icon
-          closable
-          @close="error = null"
-        />
-        <el-button type="primary" @click="loadPlans" class="retry-btn">重新加载</el-button>
-      </div>
-      
-      <el-table 
-        v-else
-        :data="plans"
-        style="width: 100%" 
-        class="plan-list-table"
-        :fit="true"
-        :scrollbar-always-on="true"
-        @sort-change="handleSortChange">
-        <el-table-column prop="id" label="计划ID" min-width="100" sortable="custom" />
-        <el-table-column prop="name" label="计划名称" min-width="120" sortable="custom" />
-        <el-table-column prop="description" label="计划描述" min-width="150" />
-        <el-table-column prop="execution_type" label="执行类型" min-width="150" sortable="custom">
-          <template #default="scope">
-            <el-tag v-if="scope.row.execution_type === 'manual'">手动</el-tag>
-            <el-tag v-else-if="scope.row.execute_num === 0" type="success">自动(无限执行)</el-tag>
-            <el-tag v-else type="warning">自动({{ scope.row.execute_num }}次)</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="execute_count" label="已执行次数" min-width="120" sortable="custom" />
-        <el-table-column prop="status" label="状态" min-width="100" sortable="custom">
-          <template #default="scope">
-            <el-tag v-if="scope.row.status === 0" type="danger">禁用计划</el-tag>
-            <el-tag v-else-if="scope.row.status === 1" type="success">启用计划</el-tag>
-            <el-tag v-else-if="scope.row.status === 3" type="danger">执行失败</el-tag>
-            <el-tag v-else type="info">执行完毕</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="cron_expression" label="下次执行时间" min-width="150" sortable="custom">
-          <template #default="scope">
-            {{ formatNextExecutionTime(scope.row.cron_expression) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="280">
-          <template #default="scope">
-            <el-button size="small" @click="editPlan(scope.row)">编辑</el-button>
-            <el-button size="small" @click="showDetails(scope.row)">详情</el-button>
-            <el-button 
-              size="small" 
-              :type="scope.row.status === 1 ? 'warning' : 'primary'"
-              @click="scope.row.status === 1 ? stopPlan(scope.row) : startPlan(scope.row)"
-              :loading="stoppingPlanId === scope.row.id || startingPlanId === scope.row.id"
-            >
-              {{ scope.row.status === 1 ? '停止' : '启动' }}
-            </el-button>
-            <el-button size="small" type="danger" @click="deletePlan(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      
-    </el-card>
-
-    <!-- 计划表单 -->
-    <PlanForm 
-      v-model:visible="dialogVisible" 
-      :plan-data="currentPlan" 
-      :is-edit="isEdit"
-      @success="handlePlanSuccess"
-      @cancel="handlePlanCancel"
-    />
-
-    <!-- 计划详情 -->
-    <el-dialog
-      v-model="detailsVisible"
-      title="计划详情"
-      width="70%"
-      top="5vh"
-    >
-      <plan-detail
-        v-if="detailsVisible" 
-        :plan-id="selectedPlanIdForDetails"
-      />
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="detailsVisible = false">关闭</el-button>
-        </span>
-      </template>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-import { Refresh } from '@element-plus/icons-vue';
-import apiClient from '../api/index.js';
-import PlanForm from './PlanForm.vue';
-import PlanDetail from './PlanDetail.vue'; // 导入新组件
-import cronParser from 'cron-parser';
-
-export default {
-  name: 'PlanList',
-  components: {
-    PlanForm,
-    PlanDetail, // 注册新组件
-    Refresh
-  },
-  data() {
-    return {
-      plans: [],
-      originalPlans: [], // Store the original unsorted list
-      dialogVisible: false,
-      detailsVisible: false, // 控制详情对话框
-      isEdit: false,
-      loading: false,
-      error: null,
-      currentPlan: {
-        id: null,
-        name: '',
-        description: '',
-        execution_type: 'automatic',
-        execute_num: 0,
-        cron_expression: ''
-      },
-      selectedPlanIdForDetails: null, // 当前要查看详情的计划ID
-      startingPlanId: null,
-      stoppingPlanId: null
-    };
-  },
-  async mounted() {
-    await this.loadPlans();
-  },
-  methods: {
-    // 加载计划列表
-    async loadPlans() {
-      this.loading = true;
-      this.error = null;
-      
-      try {
-        const response = await apiClient.plans.getPlans(); // 更正此处
-        let fetchedPlans = response.data?.plans || [];
-        // Default sort by ID ascending
-        fetchedPlans.sort((a, b) => a.id - b.id);
-        this.plans = fetchedPlans;
-        this.originalPlans = [...this.plans]; // Keep a copy of the original order
-      } catch (err) {
-        this.error = err.message || '未知错误';
-        console.error('加载计划列表失败:', err);
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    // 处理表格排序
-    handleSortChange({ prop, order }) {
-      if (!order) {
-        // 恢复原始顺序
-        this.plans = [...this.originalPlans];
-        return;
-      }
-
-      const sortFactor = order === 'ascending' ? 1 : -1;
-
-      this.plans.sort((a, b) => {
-        let valA = a[prop];
-        let valB = b[prop];
-
-        // '下次执行时间' 列的特殊排序逻辑
-        if (prop === 'cron_expression') {
-          try {
-            const parser = cronParser.default || cronParser;
-            valA = valA ? parser.parse(valA).next().toDate().getTime() : 0;
-          } catch (e) {
-            valA = 0; // 无效的 cron 表达式排在前面
-          }
-          try {
-            const parser = cronParser.default || cronParser;
-            valB = valB ? parser.parse(valB).next().toDate().getTime() : 0;
-          } catch (e) {
-            valB = 0;
-          }
-        }
-
-        if (valA < valB) {
-          return -1 * sortFactor;
-        }
-        if (valA > valB) {
-          return 1 * sortFactor;
-        }
-        return 0;
-      });
-    },
-    
-    // 格式化下次执行时间
-    formatNextExecutionTime(cronExpression) {
-      if (!cronExpression) {
-        return '-';
-      }
-      
-      try {
-        // 正确使用cron-parser库
-        const parser = cronParser.default || cronParser;
-        const interval = parser.parse(cronExpression);
-        const next = interval.next().toDate();
-        return next.toLocaleString('zh-CN');
-      } catch (err) {
-        console.error('解析cron表达式失败:', err);
-        return '无效的表达式';
-      }
-    },
-    
-    addPlan() {
-      this.currentPlan = {
-        id: null,
-        name: '',
-        description: '',
-        execution_type: 'automatic',
-        execute_num: 0,
-        cron_expression: ''
-      };
-      this.isEdit = false;
-      this.dialogVisible = true;
-    },
-
-    showDetails(plan) {
-      this.selectedPlanIdForDetails = plan.id;
-      this.detailsVisible = true;
-    },
-    
-    editPlan(plan) {
-      this.currentPlan = { ...plan };
-      this.isEdit = true;
-      this.dialogVisible = true;
-    },
-    
-    async deletePlan(plan) {
-      try {
-        await this.$confirm('确认删除该计划吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        });
-        
-        await apiClient.plans.deletePlan(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.startPlan(plan.id);
-        this.$message.success('计划启动成功');
-        await this.loadPlans();
-      } catch (err) {
-        this.$message.error('启动失败: ' + (err.message || '未知错误'));
-      } finally {
-        this.startingPlanId = null;
-      }
-    },
-
-    async stopPlan(plan) {
-      try {
-        this.stoppingPlanId = plan.id;
-        await apiClient.plans.stopPlan(plan.id);
-        this.$message.success('计划停止成功');
-        await this.loadPlans();
-      } catch (err) {
-        this.$message.error('停止失败: ' + (err.message || '未知错误'));
-      } finally {
-        this.stoppingPlanId = null;
-      }
-    },
-    
-    // 处理计划表单提交成功
-    async handlePlanSuccess(planData) {
-      try {
-        if (this.isEdit) {
-          // 编辑计划
-          await apiClient.plans.updatePlan(planData.id, planData);
-          this.$message.success('计划更新成功');
-        } else {
-          // 添加新计划
-          const planRequest = {
-            ...planData,
-            content_type: 'tasks' // 默认使用任务类型
-          };
-          
-          await apiClient.plans.createPlan(planRequest);
-          this.$message.success('计划添加成功');
-        }
-        
-        await this.loadPlans();
-      } catch (err) {
-        this.$message.error('保存失败: ' + (err.message || '未知错误'));
-      }
-    },
-    
-    // 处理计划表单取消
-    handlePlanCancel() {
-      this.dialogVisible = false;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.plan-list {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px 0;
-}
-
-.title-container {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.page-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: bold;
-  line-height: 1;
-}
-
-.refresh-btn {
-  color: black;
-  background-color: transparent;
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-}
-
-.loading {
-  padding: 20px 0;
-}
-
-.error {
-  padding: 20px 0;
-  text-align: center;
-}
-
-.retry-btn {
-  margin-top: 15px;
-}
-
-.plan-list-table :deep(tbody)::after {
-  content: "";
-  display: block;
-  height: 20px;
-}
-
-@media (max-width: 768px) {
-  .plan-list {
-    padding: 10px;
-  }
-  .card-header {
-    flex-direction: column;
-    gap: 15px;
-  }
-}
-</style>
--- a/src/components/TransferPigsAcrossBatchesModal.vue
+++ b/src/components/TransferPigsAcrossBatchesModal.vue
@@ -0,0 +1,204 @@
+<template>
+  <el-dialog
+    title="跨群调栏"
+    :model-value="visible"
+    @update:model-value="$emit('update:visible', $event)"
+    width="40%"
+    @close="resetForm"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="源猪群批次">
+        <span>{{ batch.batch_number }}</span>
+      </el-form-item>
+      <el-form-item label="源猪栏" prop="fromPenID">
+        <el-select v-model="form.fromPenID" placeholder="请选择源猪栏" style="width: 100%;">
+          <el-option
+            v-for="pen in sourcePens"
+            :key="pen.id"
+            :label="`${pen.pen_number} (存栏: ${pen.current_pig_count})`"
+            :value="pen.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="目标猪群批次" prop="destBatchID">
+        <el-select v-model="form.destBatchID" placeholder="请选择目标猪群" style="width: 100%;" @change="onDestBatchChange">
+          <el-option
+            v-for="b in availableBatches"
+            :key="b.id"
+            :label="b.batch_number"
+            :value="b.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="目标猪栏" prop="toPenID">
+        <el-select v-model="form.toPenID" placeholder="请选择目标猪栏" style="width: 100%;">
+          <el-option
+            v-for="pen in destinationPens"
+            :key="pen.id"
+            :label="`${pen.pen_number} (容量: ${pen.capacity})`"
+            :value="pen.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="调栏数量" prop="quantity">
+        <el-input-number v-model="form.quantity" :min="1" :max="maxTransferQuantity" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <el-input v-model="form.remarks" type="textarea" :rows="2" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="$emit('update:visible', false)">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { getPigBatches, transferPigsAcrossBatches } from '@/api/pigBatch';
+import { getPens } from '@/api/pen';
+
+export default {
+  name: 'TransferPigsAcrossBatchesModal',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    batch: {
+      type: Object,
+      required: true // 源猪群批次信息
+    }
+  },
+  emits: ['update:visible', 'success'],
+  data() {
+    return {
+      form: {
+        fromPenID: null,
+        destBatchID: null,
+        toPenID: null,
+        quantity: 1,
+        remarks: ''
+      },
+      rules: {
+        fromPenID: [{ required: true, message: '请选择源猪栏', trigger: 'change' }],
+        destBatchID: [{ required: true, message: '请选择目标猪群批次', trigger: 'change' }],
+        toPenID: [{ required: true, message: '请选择目标猪栏', trigger: 'change' }],
+        quantity: [
+          { required: true, message: '请输入调栏数量', trigger: 'blur' },
+          { type: 'integer', message: '请输入整数', trigger: 'blur' },
+          { validator: this.validateQuantity, trigger: 'blur' }
+        ]
+      },
+      sourcePens: [], // 源猪群的猪栏列表
+      availableBatches: [], // 可用的目标猪群列表
+      destinationPens: [], // 目标猪群的猪栏列表
+      maxTransferQuantity: 1 // 最大可调栏数量
+    };
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.initData();
+      }
+    },
+    'form.fromPenID': function(newVal) {
+      if (newVal) {
+        const selectedPen = this.sourcePens.find(pen => pen.id === newVal);
+        this.maxTransferQuantity = selectedPen ? selectedPen.current_pig_count : 1;
+        // 如果当前数量大于最大值，重置数量
+        if (this.form.quantity > this.maxTransferQuantity) {
+          this.form.quantity = this.maxTransferQuantity;
+        }
+      }
+    }
+  },
+  methods: {
+    async initData() {
+      this.resetForm();
+      this.sourcePens = this.batch.pens.filter(pen => pen.current_pig_count > 0); // 过滤掉没有猪的猪栏
+      await this.fetchAvailableBatchesAndPens();
+    },
+    async fetchAvailableBatchesAndPens() {
+      try {
+        const [batchesResponse, pensResponse] = await Promise.all([
+          getPigBatches({ is_active: true }), // 获取所有活跃猪群
+          getPens() // 获取所有猪栏
+        ]);
+
+        const allBatches = batchesResponse.data || [];
+        const allPens = pensResponse.data || [];
+
+        // 过滤掉源猪群自身，以及非活跃的猪群
+        this.availableBatches = allBatches.filter(b => b.id !== this.batch.id && b.is_active);
+
+        // 将所有猪栏按批次ID分组，方便后续查找
+        const pensByBatch = allPens.reduce((acc, pen) => {
+          if (pen.pig_batch_id) {
+            if (!acc[pen.pig_batch_id]) {
+              acc[pen.pig_batch_id] = [];
+            }
+            acc[pen.pig_batch_id].push(pen);
+          }
+          return acc;
+        }, {});
+        this.pensByBatch = pensByBatch; // 存储起来，以便 onDestBatchChange 使用
+
+      } catch (error) {
+        console.error("Error fetching batches or pens:", error);
+        this.$message.error("获取猪群或猪栏信息失败");
+      }
+    },
+    onDestBatchChange(batchId) {
+      this.form.toPenID = null; // 重置目标猪栏选择
+      // 允许选择目标批次下的所有猪栏，包括已满的
+      this.destinationPens = (this.pensByBatch[batchId] || []);
+    },
+    validateQuantity(rule, value, callback) {
+      if (value > this.maxTransferQuantity) {
+        callback(new Error(`调栏数量不能超过源猪栏存栏数量 (${this.maxTransferQuantity})`));
+      } else {
+        callback();
+      }
+    },
+    handleConfirm() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await transferPigsAcrossBatches(this.batch.id, {
+              fromPenID: this.form.fromPenID,
+              destBatchID: this.form.destBatchID,
+              toPenID: this.form.toPenID,
+              quantity: this.form.quantity,
+              remarks: this.form.remarks
+            });
+            this.$message.success('跨群调栏成功');
+            this.$emit('success');
+            this.$emit('update:visible', false);
+          } catch (error) {
+            console.error('Error transferring pigs across batches:', error);
+            this.$message.error('跨群调栏失败: ' + (error.response?.data?.message || error.message || '未知错误'));
+          }
+        }
+      });
+    },
+    resetForm() {
+      this.$refs.form?.resetFields();
+      this.form.fromPenID = null;
+      this.form.destBatchID = null;
+      this.form.toPenID = null;
+      this.form.quantity = 1;
+      this.form.remarks = '';
+      this.sourcePens = [];
+      this.availableBatches = [];
+      this.destinationPens = [];
+      this.maxTransferQuantity = 1;
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>
--- a/src/components/TransferPigsModal.vue
+++ b/src/components/TransferPigsModal.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-dialog
+    title="群内调栏"
+    :model-value="visible"
+    @update:model-value="$emit('update:visible', $event)"
+    width="500px"
+    :before-close="handleClose"
+  >
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="调出猪栏" prop="fromPenID">
+        <el-select v-model="form.fromPenID" placeholder="请选择调出猪栏" style="width: 100%;" @change="handleFromPenChange">
+          <el-option
+            v-for="pen in sourcePens"
+            :key="pen.id"
+            :label="`${pen.pen_number} (存栏: ${pen.current_pig_count})`"
+            :value="pen.id"
+            :disabled="pen.current_pig_count === 0"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="调入猪栏" prop="toPenID">
+        <el-select v-model="form.toPenID" placeholder="请选择调入猪栏" style="width: 100%;" :disabled="!form.fromPenID">
+          <el-option
+            v-for="pen in destinationPens"
+            :key="pen.id"
+            :label="`${pen.pen_number} (存栏: ${pen.current_pig_count})`"
+            :value="pen.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="调栏数量" prop="quantity">
+        <el-input-number
+          v-model="form.quantity"
+          :min="1"
+          :max="maxQuantity"
+          :disabled="!form.fromPenID"
+          placeholder="请输入数量"
+          style="width: 100%;"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { transferPigsWithinBatch } from '@/api/pigBatch.js';
+
+export default {
+  name: 'TransferPigsModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    batch: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ['update:visible', 'success'],
+  data() {
+    return {
+      loading: false,
+      form: {
+        fromPenID: null,
+        toPenID: null,
+        quantity: 1,
+        remarks: '',
+      },
+      rules: {
+        fromPenID: [{ required: true, message: '请选择调出猪栏', trigger: 'change' }],
+        toPenID: [{ required: true, message: '请选择调入猪栏', trigger: 'change' }],
+        quantity: [{ required: true, message: '请输入调栏数量', trigger: 'blur' }],
+      },
+    };
+  },
+  computed: {
+    sourcePens() {
+      return this.batch.pens || [];
+    },
+    destinationPens() {
+      if (!this.form.fromPenID) return [];
+      return this.batch.pens.filter(pen => pen.id !== this.form.fromPenID);
+    },
+    maxQuantity() {
+      if (!this.form.fromPenID) return 1;
+      const selectedPen = this.sourcePens.find(p => p.id === this.form.fromPenID);
+      return selectedPen ? selectedPen.current_pig_count : 1;
+    },
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.resetForm();
+      }
+    },
+  },
+  methods: {
+    handleFromPenChange(penId) {
+      this.form.toPenID = null;
+      this.form.quantity = 1;
+      const selectedPen = this.sourcePens.find(p => p.id === penId);
+      if (selectedPen && selectedPen.current_pig_count === 0) {
+        this.$message.warning('该猪栏没有猪，无法调出。');
+        this.form.fromPenID = null;
+      }
+    },
+    handleSubmit() {
+      this.$refs.formRef.validate(async (valid) => {
+        if (valid) {
+          if (this.form.quantity > this.maxQuantity) {
+            this.$message.error('调栏数量不能超过当前存栏量');
+            return;
+          }
+          this.loading = true;
+          try {
+            await transferPigsWithinBatch(this.batch.id, this.form);
+            this.$message.success('调栏成功');
+            this.$emit('success');
+            this.handleClose();
+          } catch (error) {
+            this.$message.error('调栏失败: ' + (error.response?.data?.message || error.message));
+            console.error('Failed to transfer pigs:', error);
+          } finally {
+            this.loading = false;
+          }
+        }
+      });
+    },
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
+    resetForm() {
+      if (this.$refs.formRef) {
+        this.$refs.formRef.resetFields();
+      }
+      this.form = {
+        fromPenID: null,
+        toPenID: null,
+        quantity: 1,
+        remarks: '',
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -15,7 +15,7 @@
        :collapse="isCollapse"
        :collapse-transition="false"
        router
-        :default-openeds="['/device-management']"
+        :default-openeds="['/device-management', '/monitor', '/pms']"
      >
        <el-menu-item index="/">
          <el-icon><House /></el-icon>
@@ -38,10 +38,107 @@
          </el-menu-item>
        </el-sub-menu>

+        <!-- 猪场管理二级菜单 -->
+        <el-sub-menu index="/pms">
+          <template #title>
+            <el-icon><OfficeBuilding /></el-icon>
+            <span>猪场管理</span>
+          </template>
+          <el-menu-item index="/pms/farm-management">
+            <el-icon><Tickets /></el-icon>
+            <template #title>栏舍管理</template>
+          </el-menu-item>
+          <el-menu-item index="/pms/batch-management">
+            <el-icon><Management /></el-icon>
+            <template #title>猪群管理</template>
+          </el-menu-item>
+        </el-sub-menu>
+
        <el-menu-item index="/plans">
          <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>
+          </template>
+          <el-menu-item index="/monitor/device-command-logs">
+            <el-icon><Document /></el-icon>
+            <template #title>设备命令日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/feed-usage-records">
+            <el-icon><Food /></el-icon>
+            <template #title>饲料使用记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/medication-logs">
+            <el-icon><FirstAidKit /></el-icon>
+            <template #title>用药记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/notifications">
+            <el-icon><Bell /></el-icon>
+            <template #title>通知记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pending-collections">
+            <el-icon><Clock /></el-icon>
+            <template #title>待采集请求</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-batch-logs">
+            <el-icon><Files /></el-icon>
+            <template #title>猪批次日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-purchases">
+            <el-icon><ShoppingCart /></el-icon>
+            <template #title>猪只采购记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-sales">
+            <el-icon><SoldOut /></el-icon>
+            <template #title>猪只售卖记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-sick-logs">
+            <el-icon><Warning /></el-icon>
+            <template #title>病猪日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/pig-transfer-logs">
+            <el-icon><Switch /></el-icon>
+            <template #title>猪只迁移日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/plan-execution-logs">
+            <el-icon><List /></el-icon>
+            <template #title>计划执行日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/raw-material-purchases">
+            <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>
+            <template #title>原料库存日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/sensor-data">
+            <el-icon><DataLine /></el-icon>
+            <template #title>传感器数据</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/task-execution-logs">
+            <el-icon><Finished /></el-icon>
+            <template #title>任务执行日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/user-action-logs">
+            <el-icon><User /></el-icon>
+            <template #title>用户操作日志</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/weighing-batches">
+            <el-icon><ScaleToOriginal /></el-icon>
+            <template #title>批次称重记录</template>
+          </el-menu-item>
+          <el-menu-item index="/monitor/weighing-records">
+            <el-icon><ScaleToOriginal /></el-icon>
+            <template #title>单次称重记录</template>
+          </el-menu-item>
+        </el-sub-menu>
+
      </el-menu>
    </el-aside>

@@ -88,20 +185,16 @@
 <script>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue';
+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';

 export default {
  name: 'MainLayout',
  components: {
-    House,
-    Monitor,
-    Calendar,
-    ArrowDown,
-    Menu,
-    Fold,
-    Expand,
-    Setting,
-    Tickets
+    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();
@@ -109,7 +202,6 @@ export default {
    const isCollapse = ref(false);
    const username = ref(localStorage.getItem('username') || '管理员');

-    // 监听localStorage变化，实时更新用户名
    const handleStorageChange = () => {
      username.value = localStorage.getItem('username') || '管理员';
    };
@@ -127,8 +219,9 @@ export default {
    };
    
    const activeMenu = computed(() => {
-      if (route.path === '/devices' || route.path === '/device-templates') {
-        return route.path;
+      const path = route.path;
+      if (path.startsWith('/monitor') || path.startsWith('/pms') || path.startsWith('/devices') || path.startsWith('/device-templates')) {
+        return path;
      }
      return route.path;
    });
@@ -138,15 +231,35 @@ export default {
        '/': '系统首页',
        '/devices': '设备管理',
        '/device-templates': '设备模板管理',
-        '/plans': '计划管理'
+        '/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': '单次称重记录',
      };
      return routeMap[route.path] || '猪场管理系统';
    });

    const logout = () => {
      localStorage.removeItem('jwt_token');
-      localStorage.removeItem('username'); // 清除用户名
-      username.value = '管理员'; // 重置显示
+      localStorage.removeItem('username');
+      username.value = '管理员';
      router.push('/login');
    };

--- a/src/main.js
+++ b/src/main.js
@@ -1,25 +1,72 @@
-import { createApp } from 'vue';
-import { createRouter, createWebHistory } from 'vue-router';
+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 './components/Home.vue';
-import DeviceList from './components/DeviceList.vue';
-import PlanList from './components/PlanList.vue';
-import LoginForm from './components/LoginForm.vue';
-import DeviceTemplateList from './components/DeviceTemplateList.vue'; // 导入设备模板列表组件
+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';
+// ---------------------------

 // 导入全局样式
 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: '/', 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({
@@ -45,8 +92,8 @@ router.beforeEach((to, from, next) => {
 // 创建Vue应用实例
 const app = createApp(App);

-// 使用Element Plus组件库
-app.use(ElementPlus);
+// 全局配置 Element Plus 为中文
+app.use(ElementPlus, {locale: zhCn});

 // 使用路由
 app.use(router);
--- a/src/utils/format.js
+++ b/src/utils/format.js
@@ -0,0 +1,22 @@
+/**
+ * 将 RFC3339 格式的日期时间字符串格式化为 'YYYY-MM-DD HH:mm:ss'
+ * @param {string | null | undefined} rfc3339String - 后端返回的日期时间字符串
+ * @returns {string} - 格式化后的字符串，如果输入无效则返回空字符串或提示
+ */
+export function formatRFC3339(rfc3339String) {
+  if (!rfc3339String) {
+    return '--'; // 或者返回空字符串 ''
+  }
+
+  try {
+    // 例如: "2025-10-17T14:57:01.570169+08:00"
+    // 替换 'T' 为空格，并截取前 19 个字符即可得到 'YYYY-MM-DD HH:mm:ss'
+    return rfc3339String.replace('T', ' ').substring(0, 19);
+  } catch (error) {
+    console.error('Error formatting date:', rfc3339String, error);
+    return rfc3339String; // 格式化失败时返回原始值
+  }
+}
+
+// 你未来还可以添加其他全局格式化函数
+// export function formatCurrency(number) { ... }
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -53,9 +53,7 @@ http.interceptors.response.use(
      if (error.response.status === 401) {
        // 清除token并重定向到登录页
        localStorage.removeItem('jwt_token');
-        // 这里需要访问router，但http.js是纯工具文件，不应直接依赖Vue Router实例
-        // 可以在main.js的全局错误处理或组件中处理401错误
-        // 例如：window.location.href = '/login';
+        window.location.href = '/login';
      }
    } else if (error.request) {
      // 请求发出但没有收到响应
--- a/src/views/device/DeviceList.vue
+++ b/src/views/device/DeviceList.vue
@@ -81,8 +81,8 @@

 <script>
 import { Refresh } from '@element-plus/icons-vue';
-import deviceService from '../services/deviceService.js';
-import DeviceForm from './DeviceForm.vue';
+import deviceService from '../../services/deviceService.js';
+import DeviceForm from '../../components/DeviceForm.vue';

 export default {
  name: 'DeviceList',
--- a/src/views/device/DeviceTemplateList.vue
+++ b/src/views/device/DeviceTemplateList.vue
@@ -76,8 +76,8 @@

 <script>
 import { Refresh } from '@element-plus/icons-vue';
-import deviceTemplateService from '../services/deviceTemplateService.js';
-import DeviceTemplateForm from './DeviceTemplateForm.vue';
+import deviceTemplateService from '../../services/deviceTemplateService.js';
+import DeviceTemplateForm from '../../components/DeviceTemplateForm.vue';
 import { ElMessage, ElMessageBox } from 'element-plus';

 export default {
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
--- a/src/views/home/LoginForm.vue
+++ b/src/views/home/LoginForm.vue
@@ -32,7 +32,7 @@
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
-import apiClient from '../api/index.js';
+import apiClient from '../../api';

 export default {
  name: 'LoginForm',
--- a/src/views/monitor/DeviceCommandLogView.vue
+++ b/src/views/monitor/DeviceCommandLogView.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="device-command-log-view">
+    <GenericMonitorList
+        :fetchData="fetchDeviceCommandLogs"
+        :columnsConfig="deviceCommandLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import {getDeviceCommandLogs} from '../../api/monitor.js';
+import {formatRFC3339} from '../../utils/format.js'; // 导入全局格式化函数
+
+// 适配通用组件的 fetchData prop
+const fetchDeviceCommandLogs = async (params) => {
+  // 调用真实的 API 函数
+  // getDeviceCommandLogs 需要返回一个 { list: [], total: 0 } 格式的对象
+  return await getDeviceCommandLogs(params);
+};
+
+// 定义表格的列
+const deviceCommandLogColumns = [
+  {
+    title: '设备ID',
+    dataIndex: 'device_id',
+    key: 'device_id',
+    sorter: true,
+    filterType: 'number', // 设置筛选类型为数字
+    minWidth: 100, // 设置最小宽度
+  },
+  {
+    title: '消息ID',
+    dataIndex: 'message_id',
+    key: 'message_id',
+    // 后端不支持此字段筛选，暂时移除
+    // filterType: 'text', 
+    minWidth: 300, // UUID较长，设置较宽的最小宽度
+  },
+  {
+    title: '发送时间',
+    dataIndex: 'sent_at',
+    key: 'sent_at',
+    sorter: true,
+    filterType: 'dateRange', // 设置筛选类型为日期范围
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
+  },
+  {
+    title: '接收成功',
+    dataIndex: 'received_success',
+    key: 'received_success',
+    filterType: 'boolean', // 设置筛选类型为布尔值
+    formatter: (row, column, cellValue) => (cellValue ? '是' : '否'),
+    minWidth: 100, // 设置最小宽度
+  },
+  {
+    title: '确认时间',
+    dataIndex: 'acknowledged_at',
+    key: 'acknowledged_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue), // 使用全局格式化函数
+    minWidth: 180, // 设置最小宽度
+  },
+];
+</script>
+
+<style scoped>
+.device-command-log-view {
+  /* 视图容器样式 */
+}
+</style>
--- a/src/views/monitor/FeedUsageRecordsView.vue
+++ b/src/views/monitor/FeedUsageRecordsView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="feed-usage-record-view">
+    <GenericMonitorList
+      :fetchData="fetchFeedUsageRecords"
+      :columnsConfig="feedUsageRecordColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getFeedUsageRecords } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchFeedUsageRecords = async (params) => {
+  return await getFeedUsageRecords(params);
+};
+
+// 定义表格的列配置
+// 根据 swagger, 支持的筛选参数有: feed_formula_id, operator_id, pen_id, start_time, end_time
+const feedUsageRecordColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '用量(kg)',
+    dataIndex: 'amount',
+    key: 'amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '饲料配方',
+    dataIndex: ['feed_formula', 'name'], // 访问嵌套属性
+    key: 'feed_formula_name',
+    minWidth: 150,
+  },
+  {
+    title: '配方ID (筛选)',
+    dataIndex: 'feed_formula_id',
+    key: 'feed_formula_id',
+    filterType: 'number',
+    minWidth: 150,
+  },
+  {
+    title: '猪栏',
+    dataIndex: ['pen', 'name'], // 访问嵌套属性
+    key: 'pen_name',
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID (筛选)',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    minWidth: 150,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '记录时间',
+    dataIndex: 'recorded_at',
+    key: 'recorded_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+.feed-usage-record-view {
+  /* 视图容器样式 */
+}
+</style>
--- a/src/views/monitor/MedicationLogsView.vue
+++ b/src/views/monitor/MedicationLogsView.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="medication-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchMedicationLogs"
+      :columnsConfig="medicationLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getMedicationLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchMedicationLogs = async (params) => {
+  return await getMedicationLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const medicationLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '药品名称',
+    dataIndex: ['medication', 'name'], // 嵌套属性
+    key: 'medication_name',
+    minWidth: 150,
+  },
+  {
+    title: '用量',
+    dataIndex: 'dosage_used',
+    key: 'dosage_used',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '目标数量',
+    dataIndex: 'target_count',
+    key: 'target_count',
+    minWidth: 100,
+  },
+  {
+    title: '原因',
+    dataIndex: 'reason',
+    key: 'reason',
+    filterType: 'select',
+    filterOptions: [
+      { text: '预防', value: '预防' },
+      { text: '治疗', value: '治疗' },
+      { text: '保健', value: '保健' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/NotificationLogView.vue
+++ b/src/views/monitor/NotificationLogView.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="notification-log-view">
+    <GenericMonitorList
+      :fetchData="fetchNotifications"
+      :columnsConfig="notificationLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getNotifications, ZapcoreLevel } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchNotifications = async (params) => {
+  return await getNotifications(params);
+};
+
+// 定义表格的列
+const notificationLogColumns = [
+  {
+    title: '用户ID',
+    dataIndex: 'user_id',
+    key: 'user_id',
+    sorter: true,
+    filterType: 'number',
+    minWidth: 100,
+  },
+  {
+    title: '通知渠道',
+    dataIndex: 'notifier_type',
+    key: 'notifier_type',
+    filterType: 'select',
+    filterOptions: [
+      { value: '邮件', text: '邮件' },
+      { value: '企业微信', text: '企业微信' },
+      { value: '飞书', text: '飞书' },
+      { value: '日志', text: '日志' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '目标地址',
+    dataIndex: 'to_address',
+    key: 'to_address',
+    minWidth: 200,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    key: 'title',
+    minWidth: 200,
+  },
+  {
+    title: '消息',
+    dataIndex: 'message',
+    key: 'message',
+    minWidth: 300,
+  },
+  {
+    title: '日志级别',
+    dataIndex: 'level',
+    key: 'level',
+    sorter: true,
+    filterType: 'select',
+    filterOptions: Object.entries(ZapcoreLevel).map(([text, value]) => ({ value, text })),
+    minWidth: 110,
+  },
+  {
+    title: '告警时间',
+    dataIndex: 'alarm_timestamp',
+    key: 'alarm_timestamp',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { value: '发送成功', text: '发送成功' },
+      { value: '发送失败', text: '发送失败' },
+      { value: '已跳过', text: '已跳过' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '错误信息',
+    dataIndex: 'error_message',
+    key: 'error_message',
+    minWidth: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+.notification-log-view {
+  /* 视图容器样式 */
+}
+</style>
--- a/src/views/monitor/PendingCollectionsView.vue
+++ b/src/views/monitor/PendingCollectionsView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="pending-collections-view">
+    <GenericMonitorList
+      :fetchData="fetchPendingCollections"
+      :columnsConfig="pendingCollectionColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPendingCollections } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPendingCollections = async (params) => {
+  return await getPendingCollections(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pendingCollectionColumns = [
+  {
+    title: '关联ID',
+    dataIndex: 'correlation_id',
+    key: 'correlation_id',
+    minWidth: 300,
+  },
+  {
+    title: '设备ID',
+    dataIndex: 'device_id',
+    key: 'device_id',
+    sorter: true,
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '等待中', value: '等待中' },
+      { text: '已完成', value: '已完成' },
+      { text: '已超时', value: '已超时' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '完成时间',
+    dataIndex: 'fulfilled_at',
+    key: 'fulfilled_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/PigBatchLogsView.vue
+++ b/src/views/monitor/PigBatchLogsView.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="pig-batch-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPigBatchLogs"
+      :columnsConfig="pigBatchLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigBatchLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigBatchLogs = async (params) => {
+  return await getPigBatchLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigBatchLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更类型',
+    dataIndex: 'change_type',
+    key: 'change_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '死亡', value: '死亡' },
+      { text: '淘汰', value: '淘汰' },
+      { text: '销售', value: '销售' },
+      { text: '购买', value: '购买' },
+      { text: '转入', value: '转入' },
+      { text: '转出', value: '转出' },
+      { text: '盘点校正', value: '盘点校正' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_count',
+    key: 'change_count',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更前数量',
+    dataIndex: 'before_count',
+    key: 'before_count',
+    minWidth: 120,
+  },
+  {
+    title: '变更后数量',
+    dataIndex: 'after_count',
+    key: 'after_count',
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '原因',
+    dataIndex: 'reason',
+    key: 'reason',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/PigPurchasesView.vue
+++ b/src/views/monitor/PigPurchasesView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="pig-purchases-view">
+    <GenericMonitorList
+      :fetchData="fetchPigPurchases"
+      :columnsConfig="pigPurchaseColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigPurchases } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigPurchases = async (params) => {
+  return await getPigPurchases(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigPurchaseColumns = [
+  {
+    title: '采购ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '供应商',
+    dataIndex: 'supplier',
+    key: 'supplier',
+    filterType: 'text',
+    minWidth: 150,
+  },
+  {
+    title: '采购数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '单价',
+    dataIndex: 'unit_price',
+    key: 'unit_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '总价',
+    dataIndex: 'total_price',
+    key: 'total_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '采购日期',
+    dataIndex: 'purchase_date',
+    key: 'purchase_date',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/PigSalesView.vue
+++ b/src/views/monitor/PigSalesView.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="pig-sales-view">
+    <GenericMonitorList
+      :fetchData="fetchPigSales"
+      :columnsConfig="pigSaleColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigSales } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigSales = async (params) => {
+  return await getPigSales(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigSaleColumns = [
+  {
+    title: '售卖ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '买方',
+    dataIndex: 'buyer',
+    key: 'buyer',
+    filterType: 'text',
+    minWidth: 150,
+  },
+  {
+    title: '售卖数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '单价',
+    dataIndex: 'unit_price',
+    key: 'unit_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '总价',
+    dataIndex: 'total_price',
+    key: 'total_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '售卖日期',
+    dataIndex: 'sale_date',
+    key: 'sale_date',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/PigSickLogsView.vue
+++ b/src/views/monitor/PigSickLogsView.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="pig-sick-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPigSickLogs"
+      :columnsConfig="pigSickLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigSickLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigSickLogs = async (params) => {
+  return await getPigSickLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigSickLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '原因',
+    dataIndex: 'reason',
+    key: 'reason',
+    filterType: 'select',
+    filterOptions: [
+      { text: '患病', value: '患病' },
+      { text: '康复', value: '康复' },
+      { text: '死亡', value: '死亡' },
+      { text: '淘汰', value: '淘汰' },
+      { text: '转入', value: '转入' },
+      { text: '转出', value: '转出' },
+      { text: '其他', value: '其他' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '治疗地点',
+    dataIndex: 'treatment_location',
+    key: 'treatment_location',
+    filterType: 'select',
+    filterOptions: [
+        { text: '原地治疗', value: '原地治疗' },
+        { text: '病猪栏治疗', value: '病猪栏治疗' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_count',
+    key: 'change_count',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/PigTransferLogsView.vue
+++ b/src/views/monitor/PigTransferLogsView.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="pig-transfer-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPigTransferLogs"
+      :columnsConfig="pigTransferLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPigTransferLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPigTransferLogs = async (params) => {
+  return await getPigTransferLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const pigTransferLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '迁移类型',
+    dataIndex: 'type',
+    key: 'type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '群内调栏', value: '群内调栏' },
+      { text: '跨群调栏', value: '跨群调栏' },
+      { text: '销售', value: '销售' },
+      { text: '死亡', value: '死亡' },
+      { text: '淘汰', value: '淘汰' },
+      { text: '新购入', value: '新购入' },
+      { text: '产房转入', value: '产房转入' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '数量',
+    dataIndex: 'quantity',
+    key: 'quantity',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '迁移时间',
+    dataIndex: 'transfer_time',
+    key: 'transfer_time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '关联ID',
+    dataIndex: 'correlation_id',
+    key: 'correlation_id',
+    filterType: 'text',
+    minWidth: 280,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/PlanExecutionLogsView.vue
+++ b/src/views/monitor/PlanExecutionLogsView.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="plan-execution-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchPlanExecutionLogs"
+      :columnsConfig="planExecutionLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getPlanExecutionLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchPlanExecutionLogs = async (params) => {
+  return await getPlanExecutionLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const planExecutionLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '计划ID',
+    dataIndex: 'plan_id',
+    key: 'plan_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '计划名称',
+    dataIndex: 'plan_name',
+    key: 'plan_name',
+    minWidth: 150,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '已开始', value: '已开始' },
+      { text: '已完成', value: '已完成' },
+      { text: '失败', value: '失败' },
+      { text: '已取消', value: '已取消' },
+      { text: '等待中', value: '等待中' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'started_at',
+    key: 'started_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'ended_at',
+    key: 'ended_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '错误信息',
+    dataIndex: 'error',
+    key: 'error',
+    minWidth: 250,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/RawMaterialPurchasesView.vue
+++ b/src/views/monitor/RawMaterialPurchasesView.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="raw-material-purchases-view">
+    <GenericMonitorList
+      :fetchData="fetchRawMaterialPurchases"
+      :columnsConfig="rawMaterialPurchaseColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getRawMaterialPurchases } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchRawMaterialPurchases = async (params) => {
+  return await getRawMaterialPurchases(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const rawMaterialPurchaseColumns = [
+  {
+    title: '采购ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '原料名称',
+    dataIndex: ['raw_material', 'name'], // 嵌套属性
+    key: 'raw_material_name',
+    minWidth: 150,
+  },
+  {
+    title: '原料ID',
+    dataIndex: 'raw_material_id',
+    key: 'raw_material_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '供应商',
+    dataIndex: 'supplier',
+    key: 'supplier',
+    filterType: 'text',
+    minWidth: 150,
+  },
+  {
+    title: '数量',
+    dataIndex: 'amount',
+    key: 'amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '单价',
+    dataIndex: 'unit_price',
+    key: 'unit_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '总价',
+    dataIndex: 'total_price',
+    key: 'total_price',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '采购日期',
+    dataIndex: 'purchase_date',
+    key: 'purchase_date',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/RawMaterialStockLogsView.vue
+++ b/src/views/monitor/RawMaterialStockLogsView.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="raw-material-stock-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchRawMaterialStockLogs"
+      :columnsConfig="rawMaterialStockLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getRawMaterialStockLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchRawMaterialStockLogs = async (params) => {
+  return await getRawMaterialStockLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const rawMaterialStockLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '原料ID',
+    dataIndex: 'raw_material_id',
+    key: 'raw_material_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '来源类型',
+    dataIndex: 'source_type',
+    key: 'source_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '采购入库', value: '采购入库' },
+      { text: '饲喂出库', value: '饲喂出库' },
+      { text: '变质出库', value: '变质出库' },
+      { text: '售卖出库', value: '售卖出库' },
+      { text: '杂用领取', value: '杂用领取' },
+      { text: '手动盘点', value: '手动盘点' },
+    ],
+    minWidth: 130,
+  },
+  {
+    title: '来源ID',
+    dataIndex: 'source_id',
+    key: 'source_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '变更数量',
+    dataIndex: 'change_amount',
+    key: 'change_amount',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '发生时间',
+    dataIndex: 'happened_at',
+    key: 'happened_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remarks',
+    key: 'remarks',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/SensorDataView.vue
+++ b/src/views/monitor/SensorDataView.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="sensor-data-view">
+    <GenericMonitorList
+      :fetchData="fetchSensorData"
+      :columnsConfig="sensorDataColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getSensorData } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchSensorData = async (params) => {
+  return await getSensorData(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const sensorDataColumns = [
+  {
+    title: '设备ID',
+    dataIndex: 'device_id',
+    key: 'device_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '传感器类型',
+    dataIndex: 'sensor_type',
+    key: 'sensor_type',
+    filterType: 'select',
+    filterOptions: [
+      { text: '信号强度', value: '信号强度' },
+      { text: '电池电量', value: '电池电量' },
+      { text: '温度', value: '温度' },
+      { text: '湿度', value: '湿度' },
+      { text: '重量', value: '重量' },
+    ],
+    minWidth: 150,
+  },
+  {
+    title: '数据',
+    dataIndex: 'data',
+    key: 'data',
+    // 移除 formatter，由 GenericMonitorList 自动处理对象和数组显示
+    minWidth: 150,
+  },
+  {
+    title: '采集时间',
+    dataIndex: 'time',
+    key: 'time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '区域主控ID',
+    dataIndex: 'regional_controller_id',
+    key: 'regional_controller_id',
+    minWidth: 120,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/TaskExecutionLogsView.vue
+++ b/src/views/monitor/TaskExecutionLogsView.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="task-execution-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchTaskExecutionLogs"
+      :columnsConfig="taskExecutionLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getTaskExecutionLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchTaskExecutionLogs = async (params) => {
+  return await getTaskExecutionLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const taskExecutionLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '任务ID',
+    dataIndex: 'task_id',
+    key: 'task_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '任务名称',
+    dataIndex: ['task', 'name'], // 嵌套属性
+    key: 'task_name',
+    minWidth: 150,
+  },
+  {
+    title: '计划执行ID',
+    dataIndex: 'plan_execution_log_id',
+    key: 'plan_execution_log_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '已开始', value: '已开始' },
+      { text: '已完成', value: '已完成' },
+      { text: '失败', value: '失败' },
+      { text: '已取消', value: '已取消' },
+      { text: '等待中', value: '等待中' },
+    ],
+    minWidth: 120,
+  },
+  {
+    title: '开始时间',
+    dataIndex: 'started_at',
+    key: 'started_at',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'ended_at',
+    key: 'ended_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '输出',
+    dataIndex: 'output',
+    key: 'output',
+    minWidth: 250,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/UserActionLogsView.vue
+++ b/src/views/monitor/UserActionLogsView.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="user-action-logs-view">
+    <GenericMonitorList
+      :fetchData="fetchUserActionLogs"
+      :columnsConfig="userActionLogColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getUserActionLogs } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchUserActionLogs = async (params) => {
+  return await getUserActionLogs(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const userActionLogColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '用户名',
+    dataIndex: 'username',
+    key: 'username',
+    filterType: 'text',
+    minWidth: 130,
+  },
+  {
+    title: '用户ID',
+    dataIndex: 'user_id',
+    key: 'user_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'action_type',
+    key: 'action_type',
+    filterType: 'text',
+    minWidth: 130,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    filterType: 'select',
+    filterOptions: [
+      { text: '成功', value: '成功' },
+      { text: '失败', value: '失败' },
+    ],
+    minWidth: 100,
+  },
+  {
+    title: 'HTTP方法',
+    dataIndex: 'http_method',
+    key: 'http_method',
+    minWidth: 110,
+  },
+  {
+    title: 'HTTP路径',
+    dataIndex: 'http_path',
+    key: 'http_path',
+    minWidth: 250,
+  },
+  {
+    title: '来源IP',
+    dataIndex: 'source_ip',
+    key: 'source_ip',
+    minWidth: 150,
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'time',
+    key: 'time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    minWidth: 250,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/WeighingBatchesView.vue
+++ b/src/views/monitor/WeighingBatchesView.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="weighing-batches-view">
+    <GenericMonitorList
+      :fetchData="fetchWeighingBatches"
+      :columnsConfig="weighingBatchColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getWeighingBatches } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchWeighingBatches = async (params) => {
+  return await getWeighingBatches(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const weighingBatchColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '猪批次ID',
+    dataIndex: 'pig_batch_id',
+    key: 'pig_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '称重时间',
+    dataIndex: 'weighing_time',
+    key: 'weighing_time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description',
+    minWidth: 250,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    key: 'created_at',
+    sorter: true,
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/monitor/WeighingRecordsView.vue
+++ b/src/views/monitor/WeighingRecordsView.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="weighing-records-view">
+    <GenericMonitorList
+      :fetchData="fetchWeighingRecords"
+      :columnsConfig="weighingRecordColumns"
+    />
+  </div>
+</template>
+
+<script setup>
+import GenericMonitorList from '../../components/GenericMonitorList.vue';
+import { getWeighingRecords } from '../../api/monitor.js';
+import { formatRFC3339 } from '../../utils/format.js';
+
+// 适配通用组件的 fetchData prop
+const fetchWeighingRecords = async (params) => {
+  return await getWeighingRecords(params);
+};
+
+// 定义表格的列，依据 swagger.json
+const weighingRecordColumns = [
+  {
+    title: '记录ID',
+    dataIndex: 'id',
+    key: 'id',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '批次称重ID',
+    dataIndex: 'weighing_batch_id',
+    key: 'weighing_batch_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '猪栏ID',
+    dataIndex: 'pen_id',
+    key: 'pen_id',
+    filterType: 'number',
+    sorter: true,
+    minWidth: 120,
+  },
+  {
+    title: '重量',
+    dataIndex: 'weight',
+    key: 'weight',
+    sorter: true,
+    minWidth: 100,
+  },
+  {
+    title: '称重时间',
+    dataIndex: 'weighing_time',
+    key: 'weighing_time',
+    sorter: true,
+    filterType: 'dateRange',
+    formatter: (row, column, cellValue) => formatRFC3339(cellValue),
+    minWidth: 180,
+  },
+  {
+    title: '操作员ID',
+    dataIndex: 'operator_id',
+    key: 'operator_id',
+    filterType: 'number',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    minWidth: 200,
+  },
+];
+</script>
+
+<style scoped>
+/* 视图容器样式 */
+</style>
--- a/src/views/plan/PlanList.vue
+++ b/src/views/plan/PlanList.vue
@@ -1,39 +1,419 @@
 <template>
-  <el-table :data="planList">
-    <el-table-column prop="executeType" label="执行类型">
-      <template #default="{ row }">
-        <el-tag
-          v-if="row.executeType === 'manual'"
-          type=""
-          class="full-width-tag"
+  <div class="plan-list">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">计划管理</h2>
+            <el-button type="text" @click="loadPlans" class="refresh-btn" title="刷新计划列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          
+          <div class="filter-and-add">
+            <el-select v-model="planTypeFilter" placeholder="选择计划类型" @change="loadPlans" style="width: 150px; margin-right: 10px;">
+              <el-option label="所有任务" value="所有任务"></el-option>
+              <el-option label="自定义任务" value="自定义任务"></el-option>
+              <el-option label="系统任务" value="系统任务"></el-option>
+            </el-select>
+            <el-button type="primary" @click="addPlan">添加计划</el-button>
+          </div>
+        </div>
+      </template>
+      
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading">
+        <el-skeleton animated />
+      </div>
+      
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+          title="获取计划数据失败"
+          :description="error"
+          type="error"
+          show-icon
+          closable
+          @close="error = null"
+        />
+        <el-button type="primary" @click="loadPlans" class="retry-btn">重新加载</el-button>
+      </div>
+      
+      <el-table 
+        v-else
+        :data="plans"
+        style="width: 100%" 
+        class="plan-list-table"
+        :fit="true"
+        :scrollbar-always-on="true"
+        @sort-change="handleSortChange">
+        <el-table-column prop="id" label="计划ID" min-width="100" sortable="custom" />
+        <el-table-column prop="name" label="计划名称" min-width="120" sortable="custom" />
+        <el-table-column prop="description" label="计划描述" min-width="150" />
+        <el-table-column prop="execution_type" label="执行类型" min-width="150" sortable="custom">
+          <template #default="scope">
+            <el-tag v-if="scope.row.execution_type === 'manual'">手动</el-tag>
+            <el-tag v-else-if="scope.row.execute_num === 0" type="success">自动(无限执行)</el-tag>
+            <el-tag v-else type="warning">自动({{ scope.row.execute_num }}次)</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="execute_count" label="已执行次数" min-width="120" sortable="custom" />
+        <el-table-column prop="status" label="状态" min-width="100" sortable="custom">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 0" type="danger">禁用计划</el-tag>
+            <el-tag v-else-if="scope.row.status === 1" type="success">启用计划</el-tag>
+            <el-tag v-else-if="scope.row.status === 3" type="danger">执行失败</el-tag>
+            <el-tag v-else type="info">执行完毕</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="cron_expression" label="下次执行时间" min-width="150" sortable="custom">
+          <template #default="scope">
+            {{ formatNextExecutionTime(scope.row.cron_expression) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="280">
+          <template #default="scope">
+            <el-button size="small" @click="editPlan(scope.row)" :disabled="scope.row.plan_type === '系统任务'">编辑</el-button>
+            <el-button size="small" @click="showDetails(scope.row)">详情</el-button>
+            <el-button 
+              size="small" 
+              :type="scope.row.status === 1 ? 'warning' : 'primary'"
+              @click="scope.row.status === 1 ? stopPlan(scope.row) : startPlan(scope.row)"
+              :loading="stoppingPlanId === scope.row.id || startingPlanId === scope.row.id"
+              :disabled="scope.row.plan_type === '系统任务'"
            >
-          手动
-        </el-tag>
-        <el-tag
-          v-else-if="row.executeType === 'auto-infinite'"
-          type="success"
-          class="full-width-tag"
-        >
-          自动(无限执行)
-        </el-tag>
-        <el-tag
-          v-else-if="row.executeType === 'auto-limited'"
-          type="warning"
-          class="full-width-tag"
-        >
-          自动({{ row.executeTimes }}次)
-        </el-tag>
+              {{ scope.row.status === 1 ? '停止' : '启动' }}
+            </el-button>
+            <el-button size="small" type="danger" @click="deletePlan(scope.row)" :disabled="scope.row.plan_type === '系统任务'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
+      
+    </el-card>
+
+    <!-- 计划表单 -->
+    <PlanForm 
+      v-model:visible="dialogVisible" 
+      :plan-data="currentPlan" 
+      :is-edit="isEdit"
+      @success="handlePlanSuccess"
+      @cancel="handlePlanCancel"
+    />
+
+    <!-- 计划详情 -->
+    <el-dialog
+      v-model="detailsVisible"
+      title="计划详情"
+      width="70%"
+      top="5vh"
+    >
+      <plan-detail
+        v-if="detailsVisible" 
+        :plan-id="selectedPlanIdForDetails"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailsVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+  </div>
 </template>

+<script>
+import { Refresh } from '@element-plus/icons-vue';
+import apiClient from '../../api';
+import PlanForm from '../../components/PlanForm.vue';
+import PlanDetail from '../../components/PlanDetail.vue'; // 导入新组件
+import cronParser from 'cron-parser';
+
+export default {
+  name: 'PlanList',
+  components: {
+    PlanForm,
+    PlanDetail, // 注册新组件
+    Refresh
+  },
+  data() {
+    return {
+      plans: [],
+      originalPlans: [], // Store the original unsorted list
+      dialogVisible: false,
+      detailsVisible: false, // 控制详情对话框
+      isEdit: false,
+      loading: false,
+      error: null,
+      currentPlan: {
+        id: null,
+        name: '',
+        description: '',
+        execution_type: 'automatic',
+        execute_num: 0,
+        cron_expression: ''
+      },
+      selectedPlanIdForDetails: null, // 当前要查看详情的计划ID
+      startingPlanId: null,
+      stoppingPlanId: null,
+      planTypeFilter: '自定义任务', // 新增：计划类型筛选，默认自定义任务
+    };
+  },
+  async mounted() {
+    await this.loadPlans();
+  },
+  methods: {
+    // 加载计划列表
+    async loadPlans() {
+      this.loading = true;
+      this.error = null;
+      
+      try {
+        const response = await apiClient.plans.getPlans({ planType: this.planTypeFilter }); // 传递 planTypeFilter
+        let fetchedPlans = response.data?.plans || [];
+        // Default sort by ID ascending
+        fetchedPlans.sort((a, b) => a.id - b.id);
+        this.plans = fetchedPlans;
+        this.originalPlans = [...this.plans]; // Keep a copy of the original order
+      } catch (err) {
+        this.error = err.message || '未知错误';
+        console.error('加载计划列表失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 处理表格排序
+    handleSortChange({ prop, order }) {
+      if (!order) {
+        // 恢复原始顺序
+        this.plans = [...this.originalPlans];
+        return;
+      }
+
+      const sortFactor = order === 'ascending' ? 1 : -1;
+
+      this.plans.sort((a, b) => {
+        let valA = a[prop];
+        let valB = b[prop];
+
+        // '下次执行时间' 列的特殊排序逻辑
+        if (prop === 'cron_expression') {
+          try {
+            const parser = cronParser.default || cronParser;
+            valA = valA ? parser.parse(valA).next().toDate().getTime() : 0;
+          } catch (e) {
+            valA = 0; // 无效的 cron 表达式排在前面
+          }
+          try {
+            const parser = cronParser.default || cronParser;
+            valB = valB ? parser.parse(valB).next().toDate().getTime() : 0;
+          } catch (e) {
+            valB = 0;
+          }
+        }
+
+        if (valA < valB) {
+          return -1 * sortFactor;
+        }
+        if (valA > valB) {
+          return 1 * sortFactor;
+        }
+        return 0;
+      });
+    },
+    
+    // 格式化下次执行时间
+    formatNextExecutionTime(cronExpression) {
+      if (!cronExpression) {
+        return '-';
+      }
+      
+      try {
+        // 正确使用cron-parser库
+        const parser = cronParser.default || cronParser;
+        const interval = parser.parse(cronExpression);
+        const next = interval.next().toDate();
+        return next.toLocaleString('zh-CN');
+      } catch (err) {
+        console.error('解析cron表达式失败:', err);
+        return '无效的表达式';
+      }
+    },
+    
+    addPlan() {
+      this.currentPlan = {
+        id: null,
+        name: '',
+        description: '',
+        execution_type: 'automatic',
+        execute_num: 0,
+        cron_expression: ''
+      };
+      this.isEdit = false;
+      this.dialogVisible = true;
+    },
+
+    showDetails(plan) {
+      this.selectedPlanIdForDetails = plan.id;
+      this.detailsVisible = true;
+    },
+    
+    editPlan(plan) {
+      this.currentPlan = { ...plan };
+      this.isEdit = true;
+      this.dialogVisible = true;
+    },
+    
+    async deletePlan(plan) {
+      try {
+        await this.$confirm('确认删除该计划吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        
+        await apiClient.plans.deletePlan(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.startPlan(plan.id);
+        this.$message.success('计划启动成功');
+        await this.loadPlans();
+      } catch (err) {
+        this.$message.error('启动失败: ' + (err.message || '未知错误'));
+      } finally {
+        this.startingPlanId = null;
+      }
+    },
+
+    async stopPlan(plan) {
+      try {
+        this.stoppingPlanId = plan.id;
+        await apiClient.plans.stopPlan(plan.id);
+        this.$message.success('计划停止成功');
+        await this.loadPlans();
+      } catch (err) {
+        this.$message.error('停止失败: ' + (err.message || '未知错误'));
+      } finally {
+        this.stoppingPlanId = null;
+      }
+    },
+    
+    // 处理计划表单提交成功
+    async handlePlanSuccess(planData) {
+      try {
+        if (this.isEdit) {
+          // 编辑计划
+          await apiClient.plans.updatePlan(planData.id, planData);
+          this.$message.success('计划更新成功');
+        } else {
+          // 添加新计划
+          const planRequest = {
+            ...planData,
+            content_type: 'tasks' // 默认使用任务类型
+          };
+          
+          await apiClient.plans.createPlan(planRequest);
+          this.$message.success('计划添加成功');
+        }
+        
+        await this.loadPlans();
+      } catch (err) {
+        this.$message.error('保存失败: ' + (err.message || '未知错误'));
+      }
+    },
+    
+    // 处理计划表单取消
+    handlePlanCancel() {
+      this.dialogVisible = false;
+    }
+  },
+  watch: {
+    // 监听 planTypeFilter 变化，重新加载计划列表
+    planTypeFilter: 'loadPlans'
+  }
+};
+</script>
+
 <style scoped>
-.full-width-tag {
-  /* 移除默认的宽度限制和文本溢出处理 */
-  max-width: none !important;
-  overflow: visible !important;
-  white-space: normal !important;
-  word-wrap: break-word !important;
+.plan-list {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
+}
+
+.plan-list-table :deep(tbody)::after {
+  content: "";
+  display: block;
+  height: 20px;
+}
+
+.filter-and-add {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  .plan-list {
+    padding: 10px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
 }
 </style>
--- a/src/views/pms/PigBatchManagementView.vue
+++ b/src/views/pms/PigBatchManagementView.vue
@@ -0,0 +1,385 @@
+<template>
+  <div class="pig-batch-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">猪群管理</h2>
+            <el-button type="text" @click="loadData" class="refresh-btn" title="刷新列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAddBatch">添加猪群</el-button>
+        </div>
+      </template>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading">
+        <el-skeleton animated />
+      </div>
+
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+          title="获取猪群数据失败"
+          :description="error"
+          type="error"
+          show-icon
+          closable
+          @close="error = null"
+        />
+        <el-button type="primary" @click="loadData" class="retry-btn">重新加载</el-button>
+      </div>
+
+      <!-- 数据展示或空状态 -->
+      <div v-else>
+        <PigBatchList 
+          v-if="pigBatchesData.length > 0" 
+          :pigBatches="pigBatchesData" 
+          @edit-batch="handleEditBatch" 
+          @delete-batch="handleDeleteBatch" 
+          @add-pen="handleAddPen"
+          @modify-pig-count-pen="handleModifyPigCountPen"
+          @remove-pen="handleRemovePen"
+          @assign-pen-to-batch="handleAssignPenToBatch"
+          @transfer-pigs="handleTransferPigs"
+          @transfer-pigs-across-batches="handleTransferPigsAcrossBatches"
+          @reload-data="loadData"
+        />
+        <el-empty v-else description="暂无数据" />
+      </div>
+
+    </el-card>
+
+    <!-- 猪群表单对话框 -->
+    <PigBatchForm
+      v-model:visible="batchDialogVisible"
+      :batch-data="currentBatch"
+      :is-edit="isEditBatch"
+      @success="handleBatchSuccess"
+      @cancel="batchDialogVisible = false"
+    />
+
+    <!-- 猪栏表单对话框 (用于在猪群管理中添加/编辑猪栏) -->
+    <PenForm 
+      v-model:visible="penDialogVisible"
+      :pen-data="currentPen"
+      :is-edit="isEditPen"
+      @success="handlePenSuccess"
+      @cancel="penDialogVisible = false"
+    />
+
+    <!-- 群内调栏对话框 -->
+    <TransferPigsModal
+      v-if="transferDialogVisible"
+      v-model:visible="transferDialogVisible"
+      :batch="currentBatchForTransfer"
+      @success="handleTransferSuccess"
+    />
+
+    <!-- 跨群调栏对话框 -->
+    <TransferPigsAcrossBatchesModal
+      v-model:visible="transferAcrossBatchesDialogVisible"
+      :batch="currentBatchForTransferAcrossBatches"
+      @success="handleTransferAcrossBatchesSuccess"
+    />
+  </div>
+</template>
+
+<script>
+import { getPigBatches, deletePigBatch, assignPensToBatch, removePenFromBatch } from '@/api/pigBatch.js';
+import { getPens } from '@/api/pen.js';
+import { getPigHouses } from '@/api/pigHouse.js';
+import PigBatchList from '@/components/PigBatchList.vue';
+import PigBatchForm from '@/components/PigBatchForm.vue';
+import PenForm from '@/components/PenForm.vue';
+import TransferPigsModal from '@/components/TransferPigsModal.vue';
+import TransferPigsAcrossBatchesModal from '@/components/TransferPigsAcrossBatchesModal.vue';
+import { Refresh } from '@element-plus/icons-vue';
+
+export default {
+  name: 'PigBatchManagementView',
+  components: {
+    PigBatchList,
+    PigBatchForm,
+    PenForm,
+    TransferPigsModal,
+    TransferPigsAcrossBatchesModal,
+    Refresh
+  },
+  data() {
+    return {
+      pigBatchesData: [],
+      loading: false,
+      error: null,
+      // 猪群表单状态
+      batchDialogVisible: false,
+      isEditBatch: false,
+      currentBatch: {},
+      // 猪栏表单状态
+      penDialogVisible: false,
+      isEditPen: false,
+      currentPen: {},
+      // 调栏模态框状态
+      transferDialogVisible: false,
+      currentBatchForTransfer: {},
+      // 跨群调栏模态框状态
+      transferAcrossBatchesDialogVisible: false,
+      currentBatchForTransferAcrossBatches: {},
+      // 辅助映射
+      houseMap: new Map(), // 用于猪栏显示猪舍名称
+    };
+  },
+  async mounted() {
+    await this.loadData();
+  },
+  methods: {
+    async loadData() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const [batchesResponse, pensResponse, housesResponse] = await Promise.all([
+          getPigBatches(),
+          getPens(),
+          getPigHouses(),
+        ]);
+        
+        const batches = Array.isArray(batchesResponse.data) ? batchesResponse.data : [];
+        const pens = Array.isArray(pensResponse.data) ? pensResponse.data : [];
+        const houses = Array.isArray(housesResponse.data) ? housesResponse.data : [];
+
+        // 更新 batchMap 和 houseMap
+        this.houseMap = new Map(houses.map(h => [h.id, h.name]));
+        this.batchMap = new Map(batches.map(batch => [batch.id, batch.batch_number]));
+        this.pigBatchesData = this.assembleData(batches, pens);
+
+      } catch (err) {
+        this.error = err.message || '无法获取数据';
+        console.error('Failed to fetch pig batch data:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    assembleData(batches, pens) {
+      const batchMap = new Map();
+      batches.forEach(batch => {
+        const existingBatch = this.pigBatchesData.find(b => b.id === batch.id);
+        batchMap.set(batch.id, { ...batch, pens: [], isExpanded: existingBatch ? existingBatch.isExpanded : false });
+      });
+
+      for (const pen of pens) {
+        if (pen.pig_batch_id && batchMap.has(pen.pig_batch_id)) {
+          const penWithDetails = {
+            ...pen,
+            house_name: this.houseMap.get(pen.house_id) || '未知猪舍',
+            batch_number: batchMap.get(pen.pig_batch_id)?.batch_number || null
+          };
+          batchMap.get(pen.pig_batch_id).pens.push(penWithDetails);
+        }
+      }
+      // Calculate unassigned_pig_count for each batch using currentTotalQuantity and currentTotalPigsInPens
+      const assembledBatches = Array.from(batchMap.values());
+      assembledBatches.forEach(batch => {
+        // Use currentTotalQuantity and currentTotalPigsInPens directly from the batch object
+        batch.unassigned_pig_count = (batch.currentTotalQuantity || 0) - (batch.currentTotalPigsInPens || 0);
+      });
+      return assembledBatches;
+    },
+    // --- 猪群操作 ---
+    handleAddBatch() {
+      this.currentBatch = {};
+      this.isEditBatch = false;
+      this.batchDialogVisible = true;
+    },
+    handleEditBatch(batch) {
+      this.currentBatch = { ...batch };
+      this.isEditBatch = true;
+      this.batchDialogVisible = true;
+    },
+    async handleDeleteBatch(batch) {
+      try {
+        await this.$confirm(`确认删除猪群 "${batch.batch_number}" 吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        await deletePigBatch(batch.id);
+        this.$message.success('删除成功');
+        // 本地更新数据
+        this.pigBatchesData = this.pigBatchesData.filter(b => b.id !== batch.id);
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+          console.error('Failed to delete pig batch:', err);
+        }
+      }
+    },
+    handleBatchSuccess(newBatchData) {
+      this.batchDialogVisible = false;
+      // 为新批次数据添加 pens 和 isExpanded 状态
+      const processedBatchData = { ...newBatchData, pens: [], isExpanded: false };
+
+      if (this.isEditBatch) {
+        // 更新现有猪群
+        const index = this.pigBatchesData.findIndex(b => b.id === processedBatchData.id);
+        if (index !== -1) {
+          // 保留 pens 和 isExpanded 状态
+          const existingBatch = this.pigBatchesData[index];
+          this.pigBatchesData[index] = { ...processedBatchData, pens: existingBatch.pens, isExpanded: existingBatch.isExpanded };
+        }
+        this.$message.success('猪群更新成功');
+      } else {
+        // 添加新猪群
+        this.pigBatchesData.push(processedBatchData);
+        this.$message.success('猪群添加成功');
+      }
+    },
+    // --- 猪栏操作 (在猪群管理中) ---
+    handleAddPen(house) {
+      this.currentPen = { ...house }; // 修正：这里应该是传入house对象，而不是pen对象
+      this.isEditPen = false;
+      this.penDialogVisible = true;
+    },
+    handleModifyPigCountPen(pen) {
+      this.currentPen = { ...pen };
+      this.isEditPen = true;
+      this.penDialogVisible = true;
+    },
+    async handleRemovePen(pen) {
+      try {
+        await this.$confirm(`确认将猪栏 "${pen.pen_number}" 从猪群中移除吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        await removePenFromBatch(pen.id, pen.pig_batch_id);
+        this.$message.success('猪栏已成功从猪群中移除');
+        await this.loadData(); // Refresh data to show updated state
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('移除失败: ' + (err.message || '未知错误'));
+          console.error('Failed to remove pen from batch:', err);
+        }
+      }
+    },
+    handlePenSuccess(newPenData) {
+      this.penDialogVisible = false;
+      // 为新猪栏数据添加 house_name 和 batch_number
+      const penWithDetails = {
+        ...newPenData,
+        house_name: this.houseMap.get(newPenData.house_id) || '未知猪舍',
+        batch_number: this.pigBatchesData.find(b => b.id === newPenData.pig_batch_id)?.batch_number || null
+      };
+
+      const batch = this.pigBatchesData.find(b => b.id === penWithDetails.pig_batch_id);
+      if (batch) {
+        if (this.isEditPen) {
+          // 更新现有猪栏
+          const index = batch.pens.findIndex(p => p.id === penWithDetails.id);
+          if (index !== -1) {
+            batch.pens[index] = penWithDetails;
+          }
+          this.$message.success('猪栏更新成功');
+        } else {
+          // 添加新猪栏
+          batch.pens.push(penWithDetails);
+          this.$message.success('猪栏添加成功');
+        }
+      }
+    },
+    async handleAssignPenToBatch({ batchId, penId }) {
+      try {
+        await assignPensToBatch(batchId, { penIds: [penId] });
+        this.$message.success('猪栏分配成功');
+        await this.loadData(); // Refresh data to show assigned pen
+      } catch (error) {
+        this.$message.error('分配猪栏失败: ' + (error.response?.data?.message || error.message || '未知错误'));
+        console.error('Failed to assign pen to batch:', error);
+      }
+    },
+    // --- 调栏操作 ---
+    handleTransferPigs(batch) {
+      this.currentBatchForTransfer = batch;
+      this.transferDialogVisible = true;
+    },
+    handleTransferSuccess() {
+      this.transferDialogVisible = false;
+      this.loadData(); // 重新加载数据以反映变化
+    },
+    handleTransferPigsAcrossBatches(batch) {
+      console.log('handleTransferPigsAcrossBatches called with batch:', batch);
+      this.currentBatchForTransferAcrossBatches = batch;
+      this.transferAcrossBatchesDialogVisible = true;
+      console.log('transferAcrossBatchesDialogVisible set to:', this.transferAcrossBatchesDialogVisible);
+    },
+    handleTransferAcrossBatchesSuccess() {
+      this.transferAcrossBatchesDialogVisible = false;
+      this.loadData(); // 重新加载数据以反映变化
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 样式与 PigFarmManagementView 保持一致 */
+.pig-batch-management {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
+}
+
+@media (max-width: 768px) {
+  .pig-batch-management {
+    padding: 10px;
+  }
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+</style>
--- a/src/views/pms/PigFarmManagementView.vue
+++ b/src/views/pms/PigFarmManagementView.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="pig-farm-management">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">栏舍管理</h2>
+            <el-button type="text" @click="loadData" class="refresh-btn" title="刷新列表">
+              <el-icon :size="20">
+                <Refresh/>
+              </el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="handleAddHouse">添加猪舍</el-button>
+        </div>
+      </template>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading">
+        <el-skeleton animated/>
+      </div>
+
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+            title="获取栏舍数据失败"
+            :description="error"
+            type="error"
+            show-icon
+            closable
+            @close="error = null"
+        />
+        <el-button type="primary" @click="loadData" class="retry-btn">重新加载</el-button>
+      </div>
+
+      <!-- 数据展示或空状态 -->
+      <div v-else>
+        <PigHouseList
+            v-if="pigHousesData.length > 0"
+            :pigHouses="pigHousesData"
+            @edit-house="handleEditHouse"
+            @delete-house="handleDeleteHouse"
+            @add-pen="handleAddPen"
+            @edit-pen="handleEditPen"
+            @delete-pen="handleDeletePen"
+            @toggle-house-expand="handleToggleHouseExpand"
+        />
+        <el-empty v-else description="暂无数据"/>
+      </div>
+
+    </el-card>
+
+    <!-- 猪舍表单对话框 -->
+    <PigHouseForm
+        v-model:visible="houseDialogVisible"
+        :house-data="currentHouse"
+        :is-edit="isEditHouse"
+        @success="handleHouseSuccess"
+        @cancel="houseDialogVisible = false"
+    />
+
+    <!-- 猪栏表单对话框 -->
+    <PenForm
+        v-model:visible="penDialogVisible"
+        :pen-data="currentPen"
+        :is-edit="isEditPen"
+        @success="handlePenSuccess"
+        @cancel="penDialogVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import {getPigHouses, deletePigHouse} from '@/api/pigHouse.js';
+import {getPens, deletePen} from '@/api/pen.js';
+import {getPigBatches} from '@/api/pigBatch.js';
+import PigHouseList from '@/components/PigHouseList.vue';
+import PigHouseForm from '@/components/PigHouseForm.vue';
+import PenForm from '@/components/PenForm.vue';
+import {Refresh} from '@element-plus/icons-vue';
+
+export default {
+  name: 'PigFarmManagementView',
+  components: {
+    PigHouseList,
+    PigHouseForm,
+    PenForm,
+    Refresh
+  },
+  data() {
+    return {
+      pigHousesData: [],
+      loading: false,
+      error: null,
+      // 猪舍表单状态
+      houseDialogVisible: false,
+      isEditHouse: false,
+      currentHouse: {},
+      // 猪栏表单状态
+      penDialogVisible: false,
+      isEditPen: false,
+      currentPen: {},
+      // 批次映射，用于本地组装猪栏的批次名称
+      batchMap: new Map(),
+    };
+  },
+  async mounted() {
+    await this.loadData();
+  },
+  methods: {
+    async loadData() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const [pigHousesResponse, pensResponse, batchesResponse] = await Promise.all([
+          getPigHouses(),
+          getPens(),
+          getPigBatches()
+        ]);
+
+        const houses = Array.isArray(pigHousesResponse.data) ? pigHousesResponse.data : [];
+        const pens = Array.isArray(pensResponse.data) ? pensResponse.data : [];
+        const batches = Array.isArray(batchesResponse.data) ? batchesResponse.data : [];
+
+        // 更新 batchMap
+        this.batchMap = new Map(batches.map(batch => [batch.id, batch.batch_number]));
+
+        this.pigHousesData = this.assembleData(houses, pens, batches);
+      } catch (err) {
+        this.error = err.message || '无法获取数据';
+        console.error('Failed to fetch pig farm data:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    assembleData(houses, pens) {
+      // 此时 houses 和 pens 已确保是数组，batches 已经更新到 this.batchMap
+      const houseMap = new Map();
+      houses.forEach(house => {
+        // 确保保留 isExpanded 状态
+        const existingHouse = this.pigHousesData.find(h => h.id === house.id);
+        houseMap.set(house.id, {...house, pens: [], isExpanded: existingHouse ? existingHouse.isExpanded : false});
+      });
+
+      for (const pen of pens) {
+        if (houseMap.has(pen.house_id)) {
+          const penWithBatch = {
+            ...pen,
+            batch_number: this.batchMap.get(pen.pig_batch_id) || null
+          };
+          houseMap.get(pen.house_id).pens.push(penWithBatch);
+        }
+      }
+      return Array.from(houseMap.values());
+    },
+    // --- 猪舍操作 ---
+    handleAddHouse() {
+      this.currentHouse = {};
+      this.isEditHouse = false;
+      this.houseDialogVisible = true;
+    },
+    handleEditHouse(house) {
+      this.currentHouse = {...house};
+      this.isEditHouse = true;
+      this.houseDialogVisible = true;
+    },
+    async handleDeleteHouse(house) {
+      try {
+        await this.$confirm(`确认删除猪舍 "${house.name}" 吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        await deletePigHouse(house.id);
+        this.$message.success('删除成功');
+        // 本地更新数据，不重新加载全部
+        this.pigHousesData = this.pigHousesData.filter(h => h.id !== house.id);
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+          console.error('Failed to delete pig house:', err);
+        }
+      }
+    },
+    handleHouseSuccess(newHouseData) {
+      this.houseDialogVisible = false;
+      if (this.isEditHouse) {
+        // 更新现有猪舍
+        const index = this.pigHousesData.findIndex(h => h.id === newHouseData.id);
+        if (index !== -1) {
+          // 保留 pens 和 isExpanded 状态
+          const existingHouse = this.pigHousesData[index];
+          this.pigHousesData[index] = {...newHouseData, pens: existingHouse.pens, isExpanded: existingHouse.isExpanded};
+        }
+        this.$message.success('猪舍更新成功');
+      } else {
+        // 添加新猪舍
+        this.pigHousesData.push({...newHouseData, pens: [], isExpanded: false});
+        this.$message.success('猪舍添加成功');
+      }
+    },
+    // --- 猪栏操作 ---
+    handleAddPen(house) {
+      this.currentPen = {house_id: house.id};
+      this.isEditPen = false;
+      this.penDialogVisible = true;
+    },
+    handleEditPen(pen) {
+      this.currentPen = {...pen};
+      this.isEditPen = true;
+      this.penDialogVisible = true;
+    },
+    async handleDeletePen(pen) {
+      try {
+        await this.$confirm(`确认删除猪栏 "${pen.pen_number}" 吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        await deletePen(pen.id);
+        this.$message.success('删除成功');
+        // 本地更新数据，不重新加载全部
+        const house = this.pigHousesData.find(h => h.id === pen.house_id);
+        if (house) {
+          house.pens = house.pens.filter(p => p.id !== pen.id);
+        }
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+          console.error('Failed to delete pen:', err);
+        }
+      }
+    },
+    handlePenSuccess(newPenData) {
+      this.penDialogVisible = false;
+      // 为新猪栏数据添加 batch_number
+      const penWithBatch = {
+        ...newPenData,
+        batch_number: this.batchMap.get(newPenData.pig_batch_id) || null
+      };
+
+      const house = this.pigHousesData.find(h => h.id === penWithBatch.house_id);
+      if (house) {
+        if (this.isEditPen) {
+          // 更新现有猪栏
+          const index = house.pens.findIndex(p => p.id === penWithBatch.id);
+          if (index !== -1) {
+            house.pens[index] = penWithBatch;
+          }
+          this.$message.success('猪栏更新成功');
+        } else {
+          // 添加新猪栏
+          house.pens.push(penWithBatch);
+          this.$message.success('猪栏添加成功');
+        }
+      }
+    },
+    handleToggleHouseExpand(houseId) {
+      const house = this.pigHousesData.find(h => h.id === houseId);
+      if (house) {
+        house.isExpanded = !house.isExpanded;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pig-farm-management {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.refresh-btn {
+  color: black;
+  background-color: transparent;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
+}
+
+@media (max-width: 768px) {
+  .pig-farm-management {
+    padding: 10px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    gap: 15px;
+  }
+}
+</style>
Author	SHA1	Message	Date
huang	0ff82657ab	更新接口和调用方	2025-10-29 19:42:48 +08:00
huang	fff309f56b	修bug	2025-10-25 15:42:19 +08:00
huang	d3700c8835	实现通知记录界面	2025-10-25 15:34:28 +08:00
huang	ea44c9caea	增加新接口定义	2025-10-25 15:27:27 +08:00
huang	ab8ea6977f	优化逻辑	2025-10-24 14:23:58 +08:00
huang	d5f91b9b12	跨群调栏	2025-10-23 18:41:08 +08:00
huang	a8d9b033f3	优化展示	2025-10-23 18:27:11 +08:00
huang	e1fb3055bb	优化展示	2025-10-23 18:23:31 +08:00
huang	6d452394aa	修bug	2025-10-23 18:18:07 +08:00
huang	62801326cb	群内调栏	2025-10-23 18:05:41 +08:00
huang	ee2f3e12d2	优化显示	2025-10-23 16:12:04 +08:00
huang	e341e53fe2	修bug	2025-10-23 16:07:21 +08:00
huang	03eed8202b	支持移除猪栏	2025-10-23 15:47:13 +08:00
huang	624592a63d	支持移除猪栏	2025-10-23 15:45:14 +08:00
huang	2191bf2bdf	支持分配猪只	2025-10-23 15:29:29 +08:00
huang	d7d68684e4	增加jsdoc	2025-10-23 15:17:31 +08:00
huang	d85cfb303b	展示未分配数量	2025-10-23 14:43:45 +08:00
huang	2e5c04d2d4	展示未分配数量	2025-10-23 14:42:00 +08:00
huang	2fe6f0c576	不活跃禁用按钮	2025-10-23 14:13:24 +08:00
huang	c176fadafe	猪群管理	2025-10-23 14:05:30 +08:00
huang	ced688a7a3	调整卡片	2025-10-23 13:48:17 +08:00
huang	263af9fa3a	调整卡片	2025-10-23 13:46:54 +08:00
huang	1a55330734	修bug	2025-10-23 13:26:20 +08:00
huang	0026f24002	修bug	2025-10-23 13:21:27 +08:00
huang	2d6bb69387	修bug	2025-10-23 13:18:12 +08:00
huang	70e3a4f2b0	猪群管理让用户选择猪栏	2025-10-23 12:14:39 +08:00
huang	98cd24ee29	向猪栏卡片中传入需要的信息	2025-10-23 12:06:13 +08:00
huang	accbb1a9f6	增加猪群管理界面	2025-10-23 11:51:19 +08:00
huang	d38feb938d	更新swag	2025-10-23 10:54:10 +08:00
huang	edfc641f93	修改猪栏卡片和猪舍时列表不折叠	2025-10-23 10:22:11 +08:00
huang	0f9429be45	修改猪栏卡片批次展示	2025-10-23 10:15:45 +08:00
huang	dc3f311037	栏舍管理界面	2025-10-22 18:55:51 +08:00
huang	828c3bbe36	调整文件位置	2025-10-22 15:39:42 +08:00
huang	0a5e1635f1	优化注释	2025-10-22 15:17:44 +08:00
huang	1df5854201	修bug	2025-10-20 21:06:59 +08:00
huang	2b1dd4c6a5	修bug	2025-10-20 20:59:44 +08:00
huang	52a647b88a	优化展示	2025-10-20 19:22:23 +08:00
huang	b1a8611554	实现所有监控展示	2025-10-20 16:31:16 +08:00
huang	0cddf99456	优化列表	2025-10-20 16:14:59 +08:00
huang	1b45e61daf	设备命令日志界面	2025-10-20 15:48:08 +08:00