修bug

src/App.vue

@@ -1,14 +1,31 @@
 <template>
-  <MainLayout />
+  <div id="app">
+    <template v-if="isLoginPage">
+      <router-view />
+    </template>
+    <template v-else>
+      <MainLayout />
+    </template>
+  </div>
 </template>
 
 <script>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import MainLayout from './layouts/MainLayout.vue';
 
 export default {
   name: 'App',
   components: {
     MainLayout
+  },
+  setup() {
+    const route = useRoute();
+    const isLoginPage = computed(() => route.path === '/login');
+
+    return {
+      isLoginPage
+    };
   }
 };
 </script>

src/api/device.js

@@ -1,7 +1,57 @@
 import http from '../utils/http.js';
 
 /**
- * 设备管理API
+ * 区域主控管理API
+ */
+export class AreaControllerApi {
+  /**
+   * 获取区域主控列表
+   * @returns {Promise} 区域主控列表
+   */
+  static list() {
+    return http.get('/api/v1/area-controllers');
+  }
+
+  /**
+   * 创建新区域主控
+   * @param {Object} areaControllerData 区域主控数据
+   * @returns {Promise} 创建结果
+   */
+  static create(areaControllerData) {
+    return http.post('/api/v1/area-controllers', areaControllerData);
+  }
+
+  /**
+   * 获取区域主控详情
+   * @param {string|number} id 区域主控ID
+   * @returns {Promise} 区域主控详情
+   */
+  static get(id) {
+    return http.get(`/api/v1/area-controllers/${id}`);
+  }
+
+  /**
+   * 更新区域主控信息
+   * @param {string|number} id 区域主控ID
+   * @param {Object} areaControllerData 区域主控数据
+   * @returns {Promise} 更新结果
+   */
+  static update(id, areaControllerData) {
+    return http.put(`/api/v1/area-controllers/${id}`, areaControllerData);
+  }
+
+  /**
+   * 删除区域主控
+   * @param {string|number} id 区域主控ID
+   * @returns {Promise} 删除结果
+   */
+  static delete(id) {
+    return http.delete(`/api/v1/area-controllers/${id}`);
+  }
+}
+
+/**
+ * 普通设备管理API
  */
 export class DeviceApi {
   /**
@@ -49,5 +99,3 @@ export class DeviceApi {
     return http.delete(`/api/v1/devices/${id}`);
   }
 }
-
-export default DeviceApi;

src/api/deviceTemplate.js

@@ -0,0 +1,53 @@
+import http from '../utils/http.js';
+
+/**
+ * 设备模板管理API
+ */
+export class DeviceTemplateApi {
+  /**
+   * 获取设备模板列表
+   * @returns {Promise} 设备模板列表
+   */
+  static list() {
+    return http.get('/api/v1/device-templates');
+  }
+
+  /**
+   * 创建新设备模板
+   * @param {Object} deviceTemplateData 设备模板数据
+   * @returns {Promise} 创建结果
+   */
+  static create(deviceTemplateData) {
+    return http.post('/api/v1/device-templates', deviceTemplateData);
+  }
+
+  /**
+   * 获取设备模板详情
+   * @param {string|number} id 设备模板ID
+   * @returns {Promise} 设备模板详情
+   */
+  static get(id) {
+    return http.get(`/api/v1/device-templates/${id}`);
+  }
+
+  /**
+   * 更新设备模板信息
+   * @param {string|number} id 设备模板ID
+   * @param {Object} deviceTemplateData 设备模板数据
+   * @returns {Promise} 更新结果
+   */
+  static update(id, deviceTemplateData) {
+    return http.put(`/api/v1/device-templates/${id}`, deviceTemplateData);
+  }
+
+  /**
+   * 删除设备模板
+   * @param {string|number} id 设备模板ID
+   * @returns {Promise} 删除结果
+   */
+  static delete(id) {
+    return http.delete(`/api/v1/device-templates/${id}`);
+  }
+}
+
+export default DeviceTemplateApi;

src/api/index.js

@@ -1,15 +1,18 @@
-import DeviceApi from './device.js';
+import { AreaControllerApi, DeviceApi } from './device.js';
 import PlanApi from './plan.js';
 import UserApi from './user.js';
+import DeviceTemplateApi from './deviceTemplate.js'; // 导入设备模板API
 
 /**
  * API客户端
  */
 export class ApiClient {
   constructor() {
+    this.areaControllers = AreaControllerApi;
     this.devices = DeviceApi;
     this.plans = PlanApi;
     this.users = UserApi;
+    this.deviceTemplates = DeviceTemplateApi; // 添加设备模板API
   }
 }
 

src/components/DeviceForm.vue

@@ -14,32 +14,32 @@
       @submit.prevent
     >
       <!-- 基础信息 -->
-      <el-form-item label="设备名" prop="name">
+      <el-form-item label="名称" prop="name">
         <el-input v-model="formData.name" />
       </el-form-item>
       
-      <el-form-item label="设备类型" prop="type">
-        <el-select v-model="formData.type" @change="handleTypeChange">
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="formData.type" @change="handleTypeChange" :disabled="isEdit">
           <el-option label="区域主控" value="area_controller" />
           <el-option label="普通设备" value="device" />
         </el-select>
       </el-form-item>
       
-      <el-form-item label="设备位置描述" prop="location">
+      <el-form-item label="位置描述" prop="location">
         <el-input v-model="formData.location" type="textarea" />
       </el-form-item>
       
       <!-- 区域主控类型额外字段 -->
       <div v-if="formData.type === 'area_controller'">
-        <el-form-item label="LoRa地址" prop="loraAddress">
-          <el-input v-model="formData.loraAddress" />
+        <el-form-item label="网络ID" prop="network_id">
+          <el-input v-model="formData.network_id" />
         </el-form-item>
       </div>
       
       <!-- 普通设备类型额外字段 -->
       <div v-if="formData.type === 'device'">
-        <el-form-item label="区域主控" prop="parentControllerId">
-          <el-select v-model="formData.parentControllerId" placeholder="请选择区域主控">
+        <el-form-item label="所属区域主控" prop="area_controller_id">
+          <el-select v-model="formData.area_controller_id" placeholder="请选择区域主控">
             <el-option
               v-for="controller in areaControllers"
               :key="controller.id"
@@ -49,38 +49,29 @@
           </el-select>
         </el-form-item>
         
-        <el-form-item label="设备种类" prop="subType">
-          <el-select v-model="formData.subType" placeholder="请选择设备种类">
-            <el-option label="风扇" value="fan" />
-            <el-option label="温度传感器" value="temperature" />
-            <el-option label="湿度传感器" value="humidity" />
-            <el-option label="氨气传感器" value="ammonia" />
-            <el-option label="饲料阀门" value="feed_valve" />
-            <el-option label="水帘" value="water_curtain" />
+        <el-form-item label="设备模板" prop="device_template_id">
+          <el-select v-model="formData.device_template_id" placeholder="请选择设备模板">
+            <el-option
+              v-for="template in deviceTemplates"
+              :key="template.id"
+              :label="template.name"
+              :value="template.id"
+            />
           </el-select>
         </el-form-item>
         
-        <el-form-item label="485总线号" prop="busNumber">
+        <el-form-item label="485总线号" prop="properties.bus_number">
           <el-input-number 
-            v-model="formData.busNumber" 
+            v-model="formData.properties.bus_number" 
             :min="0"
             controls-position="right"
             style="width: 100%"
           />
         </el-form-item>
         
-        <el-form-item label="485总线地址" prop="busAddress">
+        <el-form-item label="485总线地址" prop="properties.bus_address">
           <el-input-number 
-            v-model="formData.busAddress" 
-            :min="0"
-            controls-position="right"
-            style="width: 100%"
-          />
-        </el-form-item>
-        
-        <el-form-item label="继电器通道号" prop="relayChannel">
-          <el-input-number 
-            v-model="formData.relayChannel" 
+            v-model="formData.properties.bus_address" 
             :min="0"
             controls-position="right"
             style="width: 100%"
@@ -99,9 +90,10 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
-import { DeviceApi } from '../api/device.js';
+import { AreaControllerApi, DeviceApi } from '../api/device.js';
+import deviceTemplateService from '../services/deviceTemplateService.js'; // 导入设备模板服务
 
 export default {
   name: 'DeviceForm',
@@ -121,121 +113,161 @@ export default {
   },
   emits: ['update:visible', 'success', 'cancel'],
   setup(props, { emit }) {
-    // 表单引用
     const formRef = ref(null);
-    
-    // 加载状态
     const loading = ref(false);
-    
-    // 区域主控列表
     const areaControllers = ref([]);
+    const deviceTemplates = ref([]); // 新增设备模板列表状态
     
-    // 表单数据
-    const formData = reactive({
+    const initialFormData = () => ({
       id: '',
       name: '',
-      type: '',
+      type: 'device', // 默认创建普通设备
       location: '',
-      // 区域主控字段
-      loraAddress: '',
-      // 普通设备字段
-      parentControllerId: '',
-      subType: '',
-      busNumber: 0,
-      busAddress: 0,
-      relayChannel: 0
+      network_id: '', // 区域主控字段
+      area_controller_id: '', // 普通设备字段
+      device_template_id: '', // 普通设备字段
+      properties: { // 嵌套的properties对象
+        bus_number: 0,
+        bus_address: 0,
+      }
     });
+
+    const formData = reactive(initialFormData());
     
-    // 表单验证规则
-    const rules = {
+    const rules = computed(() => ({
       name: [
-        { required: true, message: '请输入设备名', trigger: 'blur' }
+        { required: true, message: '请输入名称', trigger: 'blur' }
       ],
       type: [
-        { required: true, message: '请选择设备类型', trigger: 'change' }
+        { required: true, message: '请选择类型', trigger: 'change' }
       ],
       location: [
-        { required: true, message: '请输入设备位置描述', trigger: 'blur' }
+        { required: true, message: '请输入位置描述', trigger: 'blur' }
       ],
-      loraAddress: [
-        { required: true, message: '请输入LoRa地址', trigger: 'blur' }
+      network_id: [
+        { required: formData.type === 'area_controller', message: '请输入网络ID', trigger: 'blur' }
       ],
-      parentControllerId: [
-        { required: true, message: '请选择区域主控', trigger: 'change' }
+      area_controller_id: [
+        { required: formData.type === 'device', message: '请选择所属区域主控', trigger: 'change' }
       ],
-      subType: [
-        { required: true, message: '请选择设备种类', trigger: 'change' }
+      device_template_id: [
+        { required: formData.type === 'device', message: '请选择设备模板', trigger: 'change' }
       ],
-      busNumber: [
-        { required: true, message: '请输入485总线号', trigger: 'blur' }
+      'properties.bus_number': [
+        { required: formData.type === 'device', message: '请输入485总线号', trigger: 'blur' }
       ],
-      busAddress: [
-        { required: true, message: '请输入485总线地址', trigger: 'blur' }
+      'properties.bus_address': [
+        { required: formData.type === 'device', message: '请输入485总线地址', trigger: 'blur' }
       ],
-      relayChannel: [
-        { required: true, message: '请输入继电器通道号', trigger: 'blur' }
-      ]
-    };
+    }));
     
-    // 标题计算
     const title = computed(() => {
       return props.isEdit ? '编辑设备' : '添加设备';
     });
     
-    // 处理类型切换
     const handleTypeChange = (value) => {
-      // 清除之前的数据
+      // 清除不同类型特有的字段
       if (value === 'area_controller') {
-        // 清除普通设备字段
-        formData.parentControllerId = '';
-        formData.subType = '';
-        formData.busNumber = 0;
-        formData.busAddress = 0;
-        formData.relayChannel = 0;
+        formData.area_controller_id = '';
+        formData.device_template_id = '';
+        formData.properties = { bus_number: 0, bus_address: 0 };
       } else {
-        // 清除区域主控字段
-        formData.loraAddress = '';
+        formData.network_id = '';
       }
+      // 触发验证规则更新
+      nextTick(() => {
+        if (formRef.value) {
+          formRef.value.clearValidate();
+        }
+      });
     };
     
-    // 获取区域主控列表
     const loadAreaControllers = async () => {
       try {
-        const response = await DeviceApi.list();
-        // 筛选出类型为区域主控的设备
-        areaControllers.value = response.data.filter(device => device.type === 'area_controller');
+        const response = await AreaControllerApi.list();
+        areaControllers.value = response.data || [];
       } catch (error) {
         console.error('获取区域主控列表失败:', error);
         areaControllers.value = [];
       }
     };
+
+    // 新增：加载设备模板列表
+    const loadDeviceTemplates = async () => {
+      try {
+        const response = await deviceTemplateService.getDeviceTemplates();
+        deviceTemplates.value = response.data || [];
+      } catch (error) {
+        console.error('获取设备模板列表失败:', error);
+        deviceTemplates.value = [];
+      }
+    };
     
-    // 关闭对话框
     const handleClose = () => {
       emit('update:visible', false);
       emit('cancel');
+      // 重置表单
+      Object.assign(formData, initialFormData());
+      nextTick(() => {
+        if (formRef.value) {
+          formRef.value.resetFields();
+        }
+      });
+    };
+    
+    const getSubmitData = () => {
+      const data = {
+        name: formData.name,
+        location: formData.location,
+        properties: formData.properties // properties直接作为对象传递
+      };
+
+      if (formData.type === 'area_controller') {
+        data.network_id = formData.network_id;
+      } else {
+        data.area_controller_id = formData.area_controller_id;
+        data.device_template_id = formData.device_template_id;
+      }
+      return data;
     };
     
-    // 提交表单
     const handleSubmit = async () => {
+      if (!formRef.value) return;
       await formRef.value.validate(async (valid) => {
         if (valid) {
           loading.value = true;
           try {
             let result;
+            const submitData = getSubmitData();
+
             if (props.isEdit) {
-              // 编辑设备
-              result = await DeviceApi.update(formData.id, getSubmitData());
+              if (formData.type === 'area_controller') {
+                result = await AreaControllerApi.update(formData.id, submitData);
+              } else {
+                result = await DeviceApi.update(formData.id, submitData);
+              }
             } else {
-              // 创建设备
-              result = await DeviceApi.create(getSubmitData());
+              if (formData.type === 'area_controller') {
+                result = await AreaControllerApi.create(submitData);
+              } else {
+                result = await DeviceApi.create(submitData);
+              }
             }
             
-            emit('success', result);
+            // 适配DeviceList的树形结构，添加type和parent_id
+            const processedResult = {
+              ...result.data,
+              type: formData.type
+            };
+            if (formData.type === 'device') {
+              processedResult.parent_id = processedResult.area_controller_id;
+            }
+
+            emit('success', processedResult);
             handleClose();
           } catch (error) {
             console.error('保存设备失败:', error);
-            ElMessage.error(props.isEdit ? '编辑设备失败' : '创建设备失败');
+            ElMessage.error(props.isEdit ? '编辑设备失败: ' + (error.message || '未知错误') : '创建设备失败: ' + (error.message || '未知错误'));
           } finally {
             loading.value = false;
           }
@@ -243,91 +275,71 @@ export default {
       });
     };
     
-    // 获取提交数据
-    const getSubmitData = () => {
-      const data = {
-        name: formData.name,
-        type: formData.type,
-        location: formData.location
-      };
-      
-      // 添加properties字段，作为JSON对象传递
-      const properties = {};
-      
-      if (formData.type === 'area_controller') {
-        properties.lora_address = formData.loraAddress;
-      } else if (formData.type === 'device') {
-        properties.bus_number = formData.busNumber;
-        properties.bus_address = formData.busAddress;
-        properties.relay_channel = formData.relayChannel;
-        data.parent_id = formData.parentControllerId;
-        data.sub_type = formData.subType;
-      }
-      
-      // 直接使用properties对象，不进行序列化
-      data.properties = properties;
-      
-      return data;
-    };
-    
-    // 监听设备数据变化
     watch(() => props.deviceData, (newVal) => {
       if (newVal && Object.keys(newVal).length > 0) {
-        // 填充表单数据
-        Object.keys(formData).forEach(key => {
-          // 处理字段名映射
-          let dataKey = key;
-          if (key === 'parentControllerId') {
-            dataKey = 'parent_id';
-          } else if (key === 'subType') {
-            dataKey = 'sub_type';
-          }
-          
-          if (newVal[dataKey] !== undefined) {
-            formData[key] = newVal[dataKey];
+        // 重置表单以清除旧数据和验证状态
+        Object.assign(formData, initialFormData());
+        nextTick(() => {
+          if (formRef.value) {
+            formRef.value.clearValidate();
           }
         });
-        
+
+        formData.id = newVal.id;
+        formData.name = newVal.name;
+        formData.type = newVal.type;
+        formData.location = newVal.location;
+
+        if (newVal.type === 'area_controller') {
+          formData.network_id = newVal.network_id || '';
+        } else if (newVal.type === 'device') {
+          formData.area_controller_id = newVal.area_controller_id || newVal.parent_id || '';
+          formData.device_template_id = newVal.device_template_id || '';
+        }
+
         // 处理properties对象的数据填充
         if (newVal.properties) {
-          const props = typeof newVal.properties === 'string' ? JSON.parse(newVal.properties) : newVal.properties;
-          if (formData.type === 'area_controller') {
-            formData.loraAddress = props.lora_address || '';
-          } else if (formData.type === 'device') {
-            formData.busNumber = props.bus_number || 0;
-            formData.busAddress = props.bus_address || 0;
-            formData.relayChannel = props.relay_channel || 0;
-          }
+          // 确保properties是一个对象，如果API返回的是字符串则尝试解析
+          const propsData = typeof newVal.properties === 'string' ? JSON.parse(newVal.properties) : newVal.properties;
+          Object.assign(formData.properties, propsData);
         }
       } else {
-        // 重置表单数据
-        Object.keys(formData).forEach(key => {
-          if (key === 'busNumber' || key === 'busAddress' || key === 'relayChannel') {
-            formData[key] = 0;
-          } else {
-            formData[key] = '';
+        // 如果没有传入deviceData，则重置为初始状态
+        Object.assign(formData, initialFormData());
+        nextTick(() => {
+          if (formRef.value) {
+            formRef.value.clearValidate();
           }
         });
       }
     }, { immediate: true });
     
-    // 监听visible属性变化，当对话框打开时重新加载区域主控列表
     watch(() => props.visible, (newVal) => {
       if (newVal) {
-        // 对话框打开时重新加载区域主控列表
         loadAreaControllers();
+        loadDeviceTemplates(); // 新增：对话框打开时加载设备模板
+        // 如果是新增，确保type是默认值，且清空所有字段
+        if (!props.isEdit) {
+          Object.assign(formData, initialFormData());
+          nextTick(() => {
+            if (formRef.value) {
+              formRef.value.clearValidate();
+            }
+          });
+        }
       }
     }, { immediate: true });
     
-    // 组件挂载时加载区域主控列表
     onMounted(() => {
       loadAreaControllers();
+      loadDeviceTemplates(); // 新增：组件挂载时加载设备模板
     });
     
     return {
       formRef,
       loading,
       areaControllers,
+      deviceTemplates, // 暴露设备模板列表
       formData,
       rules,
       title,

src/components/DeviceList.vue

@@ -46,19 +46,19 @@
         :scrollbar-always-on="true"
         @sort-change="handleSortChange">
         <el-table-column width="40"></el-table-column>
-        <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="type" label="设备类型" min-width="100">
+        <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="type" label="类型" min-width="100">
           <template #default="scope">
             {{ formatDeviceType(scope.row.type) }}
           </template>
         </el-table-column>
-        <el-table-column prop="sub_type" label="设备子类型" min-width="100">
+        <el-table-column prop="device_template_name" label="设备模板" min-width="120">
           <template #default="scope">
-            {{ formatDeviceSubType(scope.row.sub_type) }}
+            {{ scope.row.type === 'device' ? scope.row.device_template_name || '-' : '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="location" label="设备地址描述" min-width="150" />
+        <el-table-column prop="location" label="地址描述" min-width="150" />
         <el-table-column label="操作" min-width="120" align="center">
           <template #default="scope">
             <el-button size="small" @click="editDevice(scope.row)">编辑</el-button>
@@ -159,7 +159,11 @@ export default {
       return areaControllers.map(controller => {
         const children = devices.filter(device => 
           device.type === 'device' && device.parent_id === controller.id
-        );
+        ).map(childDevice => {
+          // 对于作为子设备的普通设备，确保它们没有 'children' 属性，并显式设置 hasChildren 为 false。
+          const { children, ...rest } = childDevice; 
+          return { ...rest, hasChildren: false }; // 显式添加 hasChildren: false
+        });
         
         return {
           ...controller,
@@ -177,22 +181,9 @@ export default {
       return typeMap[type] || type || '-';
     },
     
-    // 格式化设备子类型显示
-    formatDeviceSubType(subType) {
-      const subTypeMap = {
-        '': '-',
-        'temperature': '温度传感器',
-        'humidity': '湿度传感器',
-        'ammonia': '氨气传感器',
-        'feed_valve': '饲料阀门',
-        'fan': '风扇',
-        'water_curtain': '水帘'
-      };
-      return subTypeMap[subType] || subType || '-';
-    },
-    
     addDevice() {
-      this.currentDevice = {};
+      // 默认添加普通设备，如果需要添加区域主控，可以在DeviceForm中选择或通过其他入口触发
+      this.currentDevice = { type: 'device' }; 
       this.isEdit = false;
       this.dialogVisible = true;
     },
@@ -222,7 +213,7 @@ export default {
           type: 'warning'
         });
         
-        await deviceService.deleteDevice(device.id);
+        await deviceService.deleteDevice(device);
         this.$message.success('删除成功');
         await this.loadDevices();
       } catch (err) {
@@ -240,7 +231,9 @@ export default {
     
     tableRowClassName({ row, rowIndex }) {
       if (row.type === 'area_controller') {
-        return 'current-row';
+        return 'is-area-controller-row';
+      } else if (row.type === 'device') {
+        return 'is-device-row';
       }
       return '';
     }
@@ -305,10 +298,15 @@ export default {
 }
 
 /* 确保区域主控设备始终高亮显示 */
-:deep(.current-row) {
+:deep(.is-area-controller-row) {
   background-color: #f5f7fa !important;
 }
 
+/* 隐藏普通设备行的展开图标 */
+:deep(.is-device-row) .el-table__expand-icon {
+  visibility: hidden;
+}
+
 @media (max-width: 768px) {
   .device-list {
     padding: 10px;

src/components/DeviceTemplateForm.vue

@@ -0,0 +1,282 @@
+<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="name">
+        <el-input v-model="formData.name" />
+      </el-form-item>
+
+      <el-form-item label="制造商" prop="manufacturer">
+        <el-input v-model="formData.manufacturer" />
+      </el-form-item>
+
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" />
+      </el-form-item>
+
+      <el-form-item label="类别" prop="category">
+        <el-select v-model="formData.category" placeholder="请选择类别" @change="handleCategoryChange">
+          <el-option label="执行器" value="actuator" />
+          <el-option label="传感器" value="sensor" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="指令 (JSON)" prop="commands">
+        <el-input
+          v-model="formData.commands"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入JSON格式的指令参数"
+        />
+      </el-form-item>
+
+      <el-form-item
+        v-if="formData.category === 'sensor'"
+        label="值描述 (JSON)"
+        prop="values"
+      >
+        <el-input
+          v-model="formData.values"
+          type="textarea"
+          :rows="5"
+          placeholder="请输入JSON格式的值描述数组"
+        />
+      </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, computed, watch, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import deviceTemplateService from '../services/deviceTemplateService.js';
+
+// 默认的JSON模板
+const DEFAULT_ACTUATOR_COMMANDS = JSON.stringify({
+  modbus_start_address: 0,
+  modbus_quantity: 1
+}, null, 2);
+
+const DEFAULT_SENSOR_COMMANDS = JSON.stringify({
+  modbus_function_code: 3,
+  modbus_start_address: 0,
+  modbus_quantity: 1
+}, null, 2);
+
+const DEFAULT_SENSOR_VALUES = JSON.stringify([
+  {
+    type: "temperature",
+    multiplier: 0.1,
+    offset: 0
+  }
+], null, 2);
+
+export default {
+  name: 'DeviceTemplateForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    templateData: {
+      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: '',
+      name: '',
+      manufacturer: '',
+      description: '',
+      category: 'actuator', // 默认执行器
+      commands: DEFAULT_ACTUATOR_COMMANDS, // 预填充执行器指令
+      values: '',
+    });
+
+    const formData = reactive(initialFormData());
+
+    // JSON 验证器
+    const validateJson = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error(rule.message));
+      }
+      try {
+        JSON.parse(value);
+        callback();
+      } catch (e) {
+        callback(new Error('请输入有效的 JSON 格式'));
+      }
+    };
+
+    const rules = computed(() => ({
+      name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+      category: [{ required: true, message: '请选择模板类别', trigger: 'change' }],
+      commands: [
+        { required: true, message: '请输入指令参数', trigger: 'blur' },
+        { validator: validateJson, message: '指令参数必须是有效的 JSON 格式', trigger: 'blur' },
+      ],
+      values: [
+        { required: formData.category === 'sensor', message: '请输入值描述', trigger: 'blur' },
+        { validator: validateJson, message: '值描述必须是有效的 JSON 格式', trigger: 'blur' },
+      ],
+    }));
+
+    const title = computed(() => {
+      return props.isEdit ? '编辑设备模板' : '新增设备模板';
+    });
+
+    const handleCategoryChange = (newCategory) => {
+      if (newCategory === 'actuator') {
+        formData.commands = DEFAULT_ACTUATOR_COMMANDS;
+        formData.values = ''; // 执行器没有values
+      } else if (newCategory === 'sensor') {
+        formData.commands = DEFAULT_SENSOR_COMMANDS;
+        formData.values = DEFAULT_SENSOR_VALUES; // 传感器预填充values
+      }
+      nextTick(() => {
+        if (formRef.value) {
+          formRef.value.clearValidate();
+        }
+      });
+    };
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      // 重置表单
+      Object.assign(formData, initialFormData());
+      nextTick(() => {
+        if (formRef.value) {
+          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,
+              manufacturer: formData.manufacturer,
+              description: formData.description,
+              category: formData.category,
+              commands: JSON.parse(formData.commands),
+            };
+
+            if (formData.category === 'sensor' && formData.values) {
+              submitData.values = JSON.parse(formData.values);
+            }
+
+            if (props.isEdit) {
+              await deviceTemplateService.updateDeviceTemplate(formData.id, submitData);
+            } else {
+              await deviceTemplateService.createDeviceTemplate(submitData);
+            }
+
+            emit('success');
+            handleClose();
+          } catch (error) {
+            console.error('保存设备模板失败:', error);
+            ElMessage.error(
+              props.isEdit ? '编辑设备模板失败: ' + (error.message || '未知错误') : '创建设备模板失败: ' + (error.message || '未知错误')
+            );
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(
+      () => props.templateData,
+      (newVal) => {
+        if (newVal && Object.keys(newVal).length > 0) {
+          // 填充表单数据
+          formData.id = newVal.id;
+          formData.name = newVal.name;
+          formData.manufacturer = newVal.manufacturer;
+          formData.description = newVal.description;
+          formData.category = newVal.category;
+          // 格式化JSON显示
+          formData.commands = newVal.commands ? JSON.stringify(newVal.commands, null, 2) : '';
+          formData.values = newVal.values ? JSON.stringify(newVal.values, null, 2) : '';
+        } else {
+          // 重置表单数据到初始状态 (新增模式)
+          Object.assign(formData, initialFormData());
+        }
+        nextTick(() => {
+          if (formRef.value) {
+            formRef.value.clearValidate();
+          }
+        });
+      },
+      { immediate: true }
+    );
+
+    watch(
+      () => props.visible,
+      (newVal) => {
+        if (newVal && !props.isEdit) {
+          // 如果是新增模式且对话框打开，重置表单
+          Object.assign(formData, initialFormData());
+          nextTick(() => {
+            if (formRef.value) {
+              formRef.value.clearValidate();
+            }
+          });
+        }
+      },
+      { immediate: true }
+    );
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      handleCategoryChange,
+      handleClose,
+      handleSubmit,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

src/components/DeviceTemplateList.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="device-template-list">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <div class="title-container">
+            <h2 class="page-title">设备模板管理</h2>
+            <el-button type="text" @click="loadDeviceTemplates" class="refresh-btn" title="刷新设备模板列表">
+              <el-icon :size="20"><Refresh /></el-icon>
+            </el-button>
+          </div>
+          <el-button type="primary" @click="addTemplate">新增模板</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="loadDeviceTemplates" class="retry-btn">重新加载</el-button>
+      </div>
+      
+      <!-- 设备模板列表 -->
+      <el-table 
+        v-else 
+        :data="tableData" 
+        style="width: 100%"
+        :fit="true"
+        table-layout="auto"
+        row-key="id"
+        :highlight-current-row="false"
+        :scrollbar-always-on="true"
+      >
+        <el-table-column prop="id" label="ID" min-width="80" />
+        <el-table-column prop="name" label="名称" min-width="150" />
+        <el-table-column prop="manufacturer" label="制造商" min-width="120" />
+        <el-table-column prop="description" label="描述" min-width="200" />
+        <el-table-column prop="category" label="类别" min-width="100">
+          <template #default="scope">
+            {{ formatCategory(scope.row.category) }}
+          </template>
+        </el-table-column>
+        <!-- 移除创建时间和更新时间列 -->
+        <!-- <el-table-column prop="created_at" label="创建时间" min-width="160" /> -->
+        <!-- <el-table-column prop="updated_at" label="更新时间" min-width="160" /> -->
+        <el-table-column label="操作" min-width="150" align="center">
+          <template #default="scope">
+            <el-button size="small" @click="editTemplate(scope.row)">编辑</el-button>
+            <el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 设备模板表单对话框 -->
+    <DeviceTemplateForm 
+      v-model:visible="dialogVisible" 
+      :template-data="currentTemplate" 
+      :is-edit="isEdit"
+      @success="onTemplateSuccess"
+      @cancel="dialogVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import { Refresh } from '@element-plus/icons-vue';
+import deviceTemplateService from '../services/deviceTemplateService.js';
+import DeviceTemplateForm from './DeviceTemplateForm.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+export default {
+  name: 'DeviceTemplateList',
+  components: {
+    DeviceTemplateForm,
+    Refresh
+  },
+  data() {
+    return {
+      tableData: [],
+      loading: false,
+      error: null,
+      dialogVisible: false,
+      currentTemplate: {},
+      isEdit: false
+    };
+  },
+  async mounted() {
+    await this.loadDeviceTemplates();
+  },
+  methods: {
+    async loadDeviceTemplates() {
+      this.loading = true;
+      this.error = null;
+      try {
+        const response = await deviceTemplateService.getDeviceTemplates();
+        // 确保只将数组部分赋值给 tableData
+        this.tableData = response.data || [];
+      } catch (err) {
+        this.error = err.message || '未知错误';
+        console.error('加载设备模板列表失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    formatCategory(category) {
+      const categoryMap = {
+        'actuator': '执行器',
+        'sensor': '传感器'
+      };
+      return categoryMap[category] || category || '-';
+    },
+    addTemplate() {
+      this.currentTemplate = {};
+      this.isEdit = false;
+      this.dialogVisible = true;
+    },
+    editTemplate(template) {
+      // 深度拷贝，避免直接修改表格数据
+      this.currentTemplate = JSON.parse(JSON.stringify(template));
+      this.isEdit = true;
+      this.dialogVisible = true;
+    },
+    async deleteTemplate(template) {
+      try {
+        await ElMessageBox.confirm(
+          `确认删除设备模板 "${template.name}" 吗？`,
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+        );
+        await deviceTemplateService.deleteDeviceTemplate(template.id);
+        ElMessage.success('删除成功');
+        await this.loadDeviceTemplates();
+      } catch (err) {
+        if (err !== 'cancel') {
+          ElMessage.error('删除失败: ' + (err.message || '未知错误'));
+        }
+      }
+    },
+    onTemplateSuccess() {
+      ElMessage.success(this.isEdit ? '设备模板更新成功' : '设备模板添加成功');
+      this.dialogVisible = false;
+      this.loadDeviceTemplates();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.device-template-list {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 0;
+}
+
+.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;
+}
+</style>

src/components/LoginForm.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="login-container">
+    <el-card class="login-card">
+      <template #header>
+        <div class="card-header">
+          <span>系统登录</span>
+        </div>
+      </template>
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginRules"
+        label-width="80px"
+        class="login-form"
+        @keyup.enter="handleLogin"
+      >
+        <el-form-item label="用户名" prop="identifier">
+          <el-input v-model="loginForm.identifier" placeholder="请输入用户名/邮箱/手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%;">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import apiClient from '../api/index.js';
+
+export default {
+  name: 'LoginForm',
+  setup() {
+    const router = useRouter();
+    const loginFormRef = ref(null);
+    const loading = ref(false);
+
+    const loginForm = reactive({
+      identifier: '',
+      password: '',
+    });
+
+    const loginRules = reactive({
+      identifier: [
+        { required: true, message: '请输入用户名/邮箱/手机号', trigger: 'blur' },
+      ],
+      password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+      ],
+    });
+
+    const handleLogin = async () => {
+      if (!loginFormRef.value) return;
+      loginFormRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            const response = await apiClient.users.login(loginForm);
+            if (response.code === 2000 && response.data && response.data.token) {
+              localStorage.setItem('jwt_token', response.data.token);
+              localStorage.setItem('username', response.data.username); // 存储用户名
+              ElMessage.success('登录成功！');
+              router.push('/'); // 登录成功后跳转到首页
+            } else {
+              ElMessage.error(response.message || '登录失败，请检查用户名或密码！');
+            }
+          } catch (error) {
+            console.error('登录请求失败:', error);
+            ElMessage.error('登录请求失败，请稍后再试！');
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    return {
+      loginFormRef,
+      loginForm,
+      loginRules,
+      loading,
+      handleLogin,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f0f2f5;
+}
+
+.login-card {
+  width: 400px;
+  max-width: 90%;
+}
+
+.card-header {
+  text-align: center;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.login-form {
+  padding: 20px;
+}
+</style>

src/layouts/MainLayout.vue

@@ -15,15 +15,29 @@
         :collapse="isCollapse"
         :collapse-transition="false"
         router
+        :default-openeds="['/device-management']"
       >
         <el-menu-item index="/">
           <el-icon><House /></el-icon>
           <template #title>首页</template>
         </el-menu-item>
-        <el-menu-item index="/devices">
-          <el-icon><Monitor /></el-icon>
-          <template #title>设备管理</template>
-        </el-menu-item>
+
+        <!-- 设备管理二级菜单 -->
+        <el-sub-menu index="/device-management">
+          <template #title>
+            <el-icon><Setting /></el-icon>
+            <span>设备</span>
+          </template>
+          <el-menu-item index="/devices">
+            <el-icon><Monitor /></el-icon>
+            <template #title>设备管理</template>
+          </el-menu-item>
+          <el-menu-item index="/device-templates">
+            <el-icon><Tickets /></el-icon>
+            <template #title>设备模板管理</template>
+          </el-menu-item>
+        </el-sub-menu>
+
         <el-menu-item index="/plans">
           <el-icon><Calendar /></el-icon>
           <template #title>计划管理</template>
@@ -45,12 +59,12 @@
           <div class="user-info">
             <el-dropdown>
               <span class="el-dropdown-link">
-                管理员 <el-icon><ArrowDown /></el-icon>
+                {{ username }} <el-icon><ArrowDown /></el-icon>
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item>个人信息</el-dropdown-item>
-                  <el-dropdown-item>退出登录</el-dropdown-item>
+                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -72,9 +86,9 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand } from '@element-plus/icons-vue';
+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';
 
 export default {
   name: 'MainLayout',
@@ -85,37 +99,64 @@ export default {
     ArrowDown,
     Menu,
     Fold,
-    Expand
+    Expand,
+    Setting,
+    Tickets
   },
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const isCollapse = ref(false);
+    const username = ref(localStorage.getItem('username') || '管理员');
+
+    // 监听localStorage变化，实时更新用户名
+    const handleStorageChange = () => {
+      username.value = localStorage.getItem('username') || '管理员';
+    };
+
+    onMounted(() => {
+      window.addEventListener('storage', handleStorageChange);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('storage', handleStorageChange);
+    });
     
-    // 切换侧边栏折叠状态
     const toggleCollapse = () => {
       isCollapse.value = !isCollapse.value;
     };
     
-    // 当前激活的菜单项
     const activeMenu = computed(() => {
+      if (route.path === '/devices' || route.path === '/device-templates') {
+        return route.path;
+      }
       return route.path;
     });
 
-    // 当前页面标题
     const currentPageTitle = computed(() => {
       const routeMap = {
         '/': '系统首页',
         '/devices': '设备管理',
+        '/device-templates': '设备模板管理',
         '/plans': '计划管理'
       };
       return routeMap[route.path] || '猪场管理系统';
     });
 
+    const logout = () => {
+      localStorage.removeItem('jwt_token');
+      localStorage.removeItem('username'); // 清除用户名
+      username.value = '管理员'; // 重置显示
+      router.push('/login');
+    };
+
     return {
       isCollapse,
       activeMenu,
       currentPageTitle,
-      toggleCollapse
+      toggleCollapse,
+      logout,
+      username
     };
   }
 };

src/main.js

@@ -7,15 +7,19 @@ 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 './assets/styles/main.css';
 
 // 配置路由
 const routes = [
-  { path: '/', component: Home },
-  { path: '/devices', component: DeviceList },
-  { path: '/plans', component: PlanList }
+  { 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 }
 ];
 
 const router = createRouter({
@@ -23,6 +27,21 @@ const router = createRouter({
   routes
 });
 
+// 全局路由守卫
+router.beforeEach((to, from, next) => {
+  const loggedIn = localStorage.getItem('jwt_token');
+
+  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
+    // 如果路由需要认证但用户未登录，则重定向到登录页
+    next('/login');
+  } else if (to.path === '/login' && loggedIn) {
+    // 如果用户已登录但试图访问登录页，则重定向到首页
+    next('/');
+  } else {
+    next(); // 正常放行
+  }
+});
+
 // 创建Vue应用实例
 const app = createApp(App);
 
@@ -32,9 +51,5 @@ app.use(ElementPlus);
 // 使用路由
 app.use(router);
 
-// 初始化服务（示例）
-// app.config.globalProperties.$api = ApiService;
-// app.config.globalProperties.$utils = Utils;
-
 // 挂载应用
-app.mount('#app');
+app.mount('#app');

src/services/deviceService.js

@@ -1,80 +1,116 @@
-import apiClient from '../api/index.js';
+import {AreaControllerApi, DeviceApi} from '../api/device.js';
 
 class DeviceService {
-  /**
-   * 获取设备列表
-   * @returns {Promise<Array>} 设备列表
-   */
-  async getDevices() {
-    try {
-      const response = await apiClient.devices.list();
-      return response.data || [];
-    } catch (error) {
-      console.error('获取设备列表失败:', error);
-      throw error;
-    }
-  }
+    /**
+     * 获取所有设备和区域主控的列表，并将其合并为树形结构所需的数据
+     * @returns {Promise<Array>} 合并后的设备列表
+     */
+    async getDevices() {
+        try {
+            const [areaControllersResponse, devicesResponse] = await Promise.all([
+                AreaControllerApi.list(),
+                DeviceApi.list()
+            ]);
 
-  /**
-   * 创建新设备
-   * @param {Object} device 设备信息
-   * @returns {Promise<Object>} 创建的设备信息
-   */
-  async createDevice(device) {
-    try {
-      const response = await apiClient.devices.create(device);
-      return response.data;
-    } catch (error) {
-      console.error('创建设备失败:', error);
-      throw error;
-    }
-  }
+            const areaControllers = (areaControllersResponse.data || []).map(controller => ({
+                ...controller,
+                type: 'area_controller' // 添加类型标识
+            }));
 
-  /**
-   * 获取设备详情
-   * @param {number} deviceId 设备ID
-   * @returns {Promise<Object>} 设备详情
-   */
-  async getDevice(deviceId) {
-    try {
-      const response = await apiClient.devices.get(deviceId);
-      return response.data;
-    } catch (error) {
-      console.error('获取设备详情失败:', error);
-      throw error;
-    }
-  }
+            const devices = (devicesResponse.data || []).map(device => ({
+                ...device,
+                type: 'device', // 添加类型标识
+                parent_id: device.area_controller_id // 适配前端树形结构
+            }));
 
-  /**
-   * 更新设备信息
-   * @param {number} deviceId 设备ID
-   * @param {Object} device 更新的设备信息
-   * @returns {Promise<Object>} 更新后的设备信息
-   */
-  async updateDevice(deviceId, device) {
-    try {
-      const response = await apiClient.devices.update(deviceId, device);
-      return response.data;
-    } catch (error) {
-      console.error('更新设备失败:', error);
-      throw error;
+            return [...areaControllers, ...devices];
+        } catch (error) {
+            console.error('获取设备列表失败:', error);
+            throw error;
+        }
     }
-  }
 
-  /**
-   * 删除设备
-   * @param {number} deviceId 设备ID
-   * @returns {Promise<void>}
-   */
-  async deleteDevice(deviceId) {
-    try {
-      await apiClient.devices.delete(deviceId);
-    } catch (error) {
-      console.error('删除设备失败:', error);
-      throw error;
+    /**
+     * 创建新设备或区域主控
+     * @param {Object} deviceData 设备或区域主控信息，包含type字段
+     * @returns {Promise<Object>} 创建结果
+     */
+    async createDevice(deviceData) {
+        try {
+            if (deviceData.type === 'area_controller') {
+                const response = await AreaControllerApi.create(deviceData);
+                return {...response.data, type: 'area_controller'};
+            } else {
+                // 默认创建普通设备
+                const response = await DeviceApi.create(deviceData);
+                return {...response.data, type: 'device', parent_id: response.data.area_controller_id};
+            }
+        } catch (error) {
+            console.error('创建设备失败:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * 获取设备或区域主控详情
+     * @param {number} id ID
+     * @param {string} type 类型 ('area_controller' 或 'device')
+     * @returns {Promise<Object>} 详情
+     */
+    async getDevice(id, type) {
+        try {
+            if (type === 'area_controller') {
+                const response = await AreaControllerApi.get(id);
+                return {...response.data, type: 'area_controller'};
+            } else {
+                const response = await DeviceApi.get(id);
+                return {...response.data, type: 'device', parent_id: response.data.area_controller_id};
+            }
+        } catch (error) {
+            console.error('获取设备详情失败:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * 更新设备或区域主控信息
+     * @param {number} id ID
+     * @param {Object} deviceData 更新的设备或区域主控信息，包含type字段
+     * @returns {Promise<Object>} 更新后的信息
+     */
+    async updateDevice(id, deviceData) {
+        try {
+            if (deviceData.type === 'area_controller') {
+                const response = await AreaControllerApi.update(id, deviceData);
+                return {...response.data, type: 'area_controller'};
+            } else {
+                const response = await DeviceApi.update(id, deviceData);
+                return {...response.data, type: 'device', parent_id: response.data.area_controller_id};
+            }
+        } catch (error) {
+            console.error('更新设备失败:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * 删除设备或区域主控
+     * @param {Object} device 包含id和type属性的设备或区域主控对象
+     * @returns {Promise<void>}
+     */
+    async deleteDevice(device) {
+        try {
+            if (device.type === 'area_controller') {
+                await AreaControllerApi.delete(device.id);
+            } else {
+                await DeviceApi.delete(device.id);
+            }
+        } catch (error) {
+            console.error('删除设备失败:', error);
+            throw error;
+        }
     }
-  }
 }
 
 // 导出设备服务实例
-export default new DeviceService();
+export default new DeviceService();

src/services/deviceTemplateService.js

@@ -0,0 +1,79 @@
+import apiClient from '../api/index.js';
+
+class DeviceTemplateService {
+  /**
+   * 获取设备模板列表
+   * @returns {Promise<Array>} 设备模板列表
+   */
+  async getDeviceTemplates() {
+    try {
+      const response = await apiClient.deviceTemplates.list();
+      return response || [];
+    } catch (error) {
+      console.error('获取设备模板列表失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 创建新设备模板
+   * @param {Object} deviceTemplateData 设备模板数据
+   * @returns {Promise<Object>} 创建的设备模板信息
+   */
+  async createDeviceTemplate(deviceTemplateData) {
+    try {
+      const response = await apiClient.deviceTemplates.create(deviceTemplateData);
+      return response.data;
+    } catch (error) {
+      console.error('创建设备模板失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 获取设备模板详情
+   * @param {number} id 设备模板ID
+   * @returns {Promise<Object>} 设备模板详情
+   */
+  async getDeviceTemplate(id) {
+    try {
+      const response = await apiClient.deviceTemplates.get(id);
+      return response.data;
+    } catch (error) {
+      console.error('获取设备模板详情失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 更新设备模板信息
+   * @param {number} id 设备模板ID
+   * @param {Object} deviceTemplateData 更新的设备模板信息
+   * @returns {Promise<Object>} 更新后的设备模板信息
+   */
+  async updateDeviceTemplate(id, deviceTemplateData) {
+    try {
+      const response = await apiClient.deviceTemplates.update(id, deviceTemplateData);
+      return response.data;
+    } catch (error) {
+      console.error('更新设备模板失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 删除设备模板
+   * @param {number} id 设备模板ID
+   * @returns {Promise<void>}
+   */
+  async deleteDeviceTemplate(id) {
+    try {
+      await apiClient.deviceTemplates.delete(id);
+    } catch (error) {
+      console.error('删除设备模板失败:', error);
+      throw error;
+    }
+  }
+}
+
+export default new DeviceTemplateService();

src/utils/http.js

@@ -14,11 +14,11 @@ const http = axios.create({
 // 请求拦截器
 http.interceptors.request.use(
   config => {
-    // 可以在这里添加认证token等
-    // const token = localStorage.getItem('access_token');
-    // if (token) {
-    //   config.headers.Authorization = `Bearer ${token}`;
-    // }
+    // 在这里添加认证token
+    const token = localStorage.getItem('jwt_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
     return config;
   },
   error => {
@@ -49,6 +49,14 @@ http.interceptors.response.use(
     if (error.response) {
       // 服务器返回错误状态码
       console.error('API Error:', error.response.status, error.response.data);
+      // 如果是401未授权，可以考虑重定向到登录页
+      if (error.response.status === 401) {
+        // 清除token并重定向到登录页
+        localStorage.removeItem('jwt_token');
+        // 这里需要访问router，但http.js是纯工具文件，不应直接依赖Vue Router实例
+        // 可以在main.js的全局错误处理或组件中处理401错误
+        // 例如：window.location.href = '/login';
+      }
     } else if (error.request) {
       // 请求发出但没有收到响应
       console.error('Network Error:', error.message);

webpack.config.js

@@ -1,6 +1,7 @@
 const { VueLoaderPlugin } = require('vue-loader');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack'); // 引入 webpack 模块
 
 module.exports = (env, argv) => {
   const isDevelopment = argv.mode === 'development';
@@ -38,6 +39,12 @@ module.exports = (env, argv) => {
       new HtmlWebpackPlugin({
         template: './index.html',
         filename: 'index.html'
+      }),
+      // 添加 Vue 特性标志的定义
+      new webpack.DefinePlugin({
+        __VUE_OPTIONS_API__: JSON.stringify(true),
+        __VUE_PROD_DEVTOOLS__: JSON.stringify(isDevelopment),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(isDevelopment)
       })
     ],
     devServer: {