diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/device/index.ts
similarity index 54%
rename from src/api/iot/device/index.ts
rename to src/api/iot/device/device/index.ts
index 903874b756f36b82a9827d285af6f920245cd232..ec80bfab3da385afaf365f54e9667131aea005c7 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/device/index.ts
@@ -28,6 +28,7 @@ export interface DeviceVO {
   areaId: number // 地区编码
   address: string // 设备详细地址
   serialNumber: string // 设备序列号
+  groupIds?: number[] // 添加分组 ID
 }
 
 export interface DeviceUpdateStatusVO {
@@ -35,6 +36,33 @@ export interface DeviceUpdateStatusVO {
   status: number // 设备状态
 }
 
+// IoT 设备数据 VO
+export interface DeviceDataVO {
+  deviceId: number // 设备编号
+  thinkModelFunctionId: number // 物模型编号
+  productKey: string // 产品标识
+  deviceName: string // 设备名称
+  identifier: string // 属性标识符
+  name: string // 属性名称
+  dataType: string // 数据类型
+  updateTime: Date // 更新时间
+  value: string // 最新值
+}
+
+// IoT 设备数据 VO
+export interface DeviceHistoryDataVO {
+  time: number // 时间
+  data: string // 数据
+}
+
+// IoT 设备状态枚举
+export enum DeviceStatusEnum {
+  INACTIVE = 0, // 未激活
+  ONLINE = 1,   // 在线
+  OFFLINE = 2,  // 离线
+  DISABLED = 3  // 已禁用
+}
+
 // 设备 API
 export const DeviceApi = {
   // 查询设备分页
@@ -62,13 +90,51 @@ export const DeviceApi = {
     return await request.put({ url: `/iot/device/update-status`, data })
   },
 
-  // 删除设备
+  // 修改设备分组
+  updateDeviceGroup: async (data: {
+    ids: number[]
+    groupIds: number[]
+  }) => {
+    return await request.put({ url: `/iot/device/update-group`, data })
+  },
+
+  // 删除单个设备
   deleteDevice: async (id: number) => {
     return await request.delete({ url: `/iot/device/delete?id=` + id })
   },
 
+  // 删除多个设备
+  deleteDeviceList: async (ids: number[]) => {
+    return await request.delete({ url: `/iot/device/delete-list`, params: { ids: ids.join(',') } })
+  },
+
+  // 导出设备
+  exportDeviceExcel: async (params: any) => {
+    return await request.download({ url: `/iot/device/export-excel`, params })
+  },
+
   // 获取设备数量
   getDeviceCount: async (productId: number) => {
     return await request.get({ url: `/iot/device/count?productId=` + productId })
+  },
+
+  // 获取设备的精简信息列表
+  getSimpleDeviceList: async (deviceType?: number) => {
+    return await request.get({ url: `/iot/device/simple-list?`, params: { deviceType } })
+  },
+
+  // 获取设备属性最���数据
+  getDevicePropertiesLatestData: async (params: any) => {
+    return await request.get({ url: `/iot/device/data/latest`, params })
+  },
+
+  // 获取设备属性历史数据
+  getDevicePropertiesHistoryData: async (params: any) => {
+    return await request.get({ url: `/iot/device/data/history`, params })
+  },
+
+  // 获取导入模板
+  importDeviceTemplate: async () => {
+    return await request.download({ url: `/iot/device/get-import-template` })
   }
 }
diff --git a/src/api/iot/device/group/index.ts b/src/api/iot/device/group/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..02cca70b87f1efb7e6ad3d14e10fd517fb19d7d2
--- /dev/null
+++ b/src/api/iot/device/group/index.ts
@@ -0,0 +1,43 @@
+import request from '@/config/axios'
+
+// IoT 设备分组 VO
+export interface DeviceGroupVO {
+  id: number // 分组 ID
+  name: string // 分组名字
+  status: number // 分组状态
+  description: string // 分组描述
+  deviceCount?: number // 设备数量
+}
+
+// IoT 设备分组 API
+export const DeviceGroupApi = {
+  // 查询IoT 设备分组分页
+  getDeviceGroupPage: async (params: any) => {
+    return await request.get({ url: `/iot/device-group/page`, params })
+  },
+
+  // 查询IoT 设备分组详情
+  getDeviceGroup: async (id: number) => {
+    return await request.get({ url: `/iot/device-group/get?id=` + id })
+  },
+
+  // 新增IoT 设备分组
+  createDeviceGroup: async (data: DeviceGroupVO) => {
+    return await request.post({ url: `/iot/device-group/create`, data })
+  },
+
+  // 修改IoT 设备分组
+  updateDeviceGroup: async (data: DeviceGroupVO) => {
+    return await request.put({ url: `/iot/device-group/update`, data })
+  },
+
+  // 删除IoT 设备分组
+  deleteDeviceGroup: async (id: number) => {
+    return await request.delete({ url: `/iot/device-group/delete?id=` + id })
+  },
+
+  // 获取设备分组的精简信息列表
+  getSimpleDeviceGroupList: async () => {
+    return await request.get({ url: `/iot/device-group/simple-list` })
+  }
+}
diff --git a/src/api/iot/plugininfo/index.ts b/src/api/iot/plugininfo/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03229f70892b6ad74b6565722ff7ddbc2a4ab5ac
--- /dev/null
+++ b/src/api/iot/plugininfo/index.ts
@@ -0,0 +1,51 @@
+import request from '@/config/axios'
+
+// IoT 插件信息 VO
+export interface PluginInfoVO {
+  id: number // 主键ID
+  pluginId: string // 插件包id
+  name: string // 插件名称
+  description: string // 描述
+  deployType: number // 部署方式
+  file: string // 插件包文件名
+  version: string // 插件版本
+  type: number // 插件类型
+  protocol: string // 设备插件协议类型
+  status: number // 状态
+  configSchema: string // 插件配置项描述信息
+  config: string // 插件配置信息
+  script: string // 插件脚本
+}
+
+// IoT 插件信息 API
+export const PluginInfoApi = {
+  // 查询IoT 插件信息分页
+  getPluginInfoPage: async (params: any) => {
+    return await request.get({ url: `/iot/plugin-info/page`, params })
+  },
+
+  // 查询IoT 插件信息详情
+  getPluginInfo: async (id: number) => {
+    return await request.get({ url: `/iot/plugin-info/get?id=` + id })
+  },
+
+  // 新增IoT 插件信息
+  createPluginInfo: async (data: PluginInfoVO) => {
+    return await request.post({ url: `/iot/plugin-info/create`, data })
+  },
+
+  // 修改IoT 插件信息
+  updatePluginInfo: async (data: PluginInfoVO) => {
+    return await request.put({ url: `/iot/plugin-info/update`, data })
+  },
+
+  // 删除IoT 插件信息
+  deletePluginInfo: async (id: number) => {
+    return await request.delete({ url: `/iot/plugin-info/delete?id=` + id })
+  },
+
+  // 导出IoT 插件信息 Excel
+  exportPluginInfo: async (params) => {
+    return await request.download({ url: `/iot/plugin-info/export-excel`, params })
+  }
+}
diff --git a/src/api/iot/product/category/index.ts b/src/api/iot/product/category/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cad17f5c529f51d9452f5964c6bf1f2cd2962fa9
--- /dev/null
+++ b/src/api/iot/product/category/index.ts
@@ -0,0 +1,43 @@
+import request from '@/config/axios'
+
+// IoT 产品分类 VO
+export interface ProductCategoryVO {
+  id: number // 分类 ID
+  name: string // 分类名字
+  sort: number // 分类排序
+  status: number // 分类状态
+  description: string // 分类描述
+}
+
+// IoT 产品分类 API
+export const ProductCategoryApi = {
+  // 查询产品分类分页
+  getProductCategoryPage: async (params: any) => {
+    return await request.get({ url: `/iot/product-category/page`, params })
+  },
+
+  // 查询产品分类详情
+  getProductCategory: async (id: number) => {
+    return await request.get({ url: `/iot/product-category/get?id=` + id })
+  },
+
+  // 新增产品分类
+  createProductCategory: async (data: ProductCategoryVO) => {
+    return await request.post({ url: `/iot/product-category/create`, data })
+  },
+
+  // 修改产品分类
+  updateProductCategory: async (data: ProductCategoryVO) => {
+    return await request.put({ url: `/iot/product-category/update`, data })
+  },
+
+  // 删除产品分类
+  deleteProductCategory: async (id: number) => {
+    return await request.delete({ url: `/iot/product-category/delete?id=` + id })
+  },
+
+  /** 获取产品分类精简列表 */
+  getSimpleProductCategoryList: () => {
+    return request.get({ url: '/iot/product-category/simple-list' })
+  }
+}
diff --git a/src/api/iot/product/index.ts b/src/api/iot/product/product/index.ts
similarity index 72%
rename from src/api/iot/product/index.ts
rename to src/api/iot/product/product/index.ts
index 1ffa490d511ded6989fbe8cc3cd5dec467ac900d..496fb049b5e055879fdc6573e5948655e60ac446 100644
--- a/src/api/iot/product/index.ts
+++ b/src/api/iot/product/product/index.ts
@@ -7,6 +7,9 @@ export interface ProductVO {
   productKey: string // 产品标识
   protocolId: number // 协议编号
   categoryId: number // 产品所属品类标识符
+  categoryName?: string // 产品所属品类名称
+  icon: string // 产品图标
+  picUrl: string // 产品图片
   description: string // 产品描述
   validateType: number // 数据校验级别
   status: number // 产品状态
@@ -18,6 +21,23 @@ export interface ProductVO {
   createTime: Date // 创建时间
 }
 
+// IOT 数据校验级别枚举类
+export enum ValidateTypeEnum {
+  WEAK = 0, // 弱校验
+  NONE = 1 // 免校验
+}
+// IOT 产品设备类型枚举类 0: 直连设备, 1: 网关子设备, 2: 网关设备
+export enum DeviceTypeEnum {
+  DEVICE = 0, // 直连设备
+  GATEWAY_SUB = 1, // 网关子设备
+  GATEWAY = 2 // 网关设备
+}
+// IOT 数据格式枚举类
+export enum DataFormatEnum {
+  JSON = 0, // 标准数据格式（JSON）
+  CUSTOMIZE = 1 // 透传/自定义
+}
+
 // IoT 产品 API
 export const ProductApi = {
   // 查询产品分页
@@ -57,6 +77,6 @@ export const ProductApi = {
 
   // 查询产品（精简）列表
   getSimpleProductList() {
-    return request.get({ url: '/iot/product/list-all-simple' })
+    return request.get({ url: '/iot/product/simple-list' })
   }
 }
diff --git a/src/api/iot/thinkmodelfunction/index.ts b/src/api/iot/thinkmodelfunction/index.ts
index bd2e2d0f0283325fe274159e0099f0db6e642f40..0117e7aac31f2f61dc4c7ddb18bdf6b279b9f996 100644
--- a/src/api/iot/thinkmodelfunction/index.ts
+++ b/src/api/iot/thinkmodelfunction/index.ts
@@ -1,55 +1,89 @@
 import request from '@/config/axios'
 
-// IoT 产品物模型 VO
-export interface ThinkModelFunctionVO {
-  id: number // 物模型功能编号
-  identifier: string // 功能标识
-  name: string // 功能名称
-  description: string // 功能描述
-  productId: number // 产品编号
-  productKey: string // 产品标识
-  type: number // 功能类型
-  property: string // 属性
-  event: string // 事件
-  service: string // 服务
+/**
+ * IoT 产品物模型
+ */
+export interface ThingModelData {
+  id?: number // 物模型功能编号
+  identifier?: string // 功能标识
+  name?: string // 功能名称
+  description?: string // 功能描述
+  productId?: number // 产品编号
+  productKey?: string // 产品标识
+  dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
+  type: ProductFunctionTypeEnum // 功能类型
+  property: ThingModelProperty // 属性
+  event?: ThingModelEvent // 事件
+  service?: ThingModelService // 服务
 }
 
+/**
+ * ThingModelProperty 类型
+ */
+export interface ThingModelProperty {
+  [key: string]: any
+}
+
+/**
+ * ThingModelEvent 类型
+ */
+export interface ThingModelEvent {
+  [key: string]: any
+}
+
+/**
+ * ThingModelService 类型
+ */
+export interface ThingModelService {
+  [key: string]: any
+}
+
+// IOT 产品功能（物模型）类型枚举类
+export enum ProductFunctionTypeEnum {
+  PROPERTY = 1, // 属性
+  SERVICE = 2, // 服务
+  EVENT = 3 // 事件
+}
+
+// IOT 产品功能（物模型）访问模式枚举类
+export enum ProductFunctionAccessModeEnum {
+  READ_WRITE = 'rw', // 读写
+  READ_ONLY = 'r' // 只读
+}
+
+// TODO @puhui999：getProductThingModelPage => getThingModelPage 哈，不用带 product 前缀
 // IoT 产品物模型 API
 export const ThinkModelFunctionApi = {
   // 查询产品物模型分页
-  getThinkModelFunctionPage: async (params: any) => {
-    return await request.get({ url: `/iot/think-model-function/page`, params })
+  getProductThingModelPage: async (params: any) => {
+    return await request.get({ url: `/iot/product-thing-model/page`, params })
   },
+
   // 获得产品物模型
-  getThinkModelFunctionListByProductId: async (params: any) => {
+  getProductThingModelListByProductId: async (params: any) => {
     return await request.get({
-      url: `/iot/think-model-function/list-by-product-id`,
+      url: `/iot/product-thing-model/list-by-product-id`,
       params
     })
   },
 
   // 查询产品物模型详情
-  getThinkModelFunction: async (id: number) => {
-    return await request.get({ url: `/iot/think-model-function/get?id=` + id })
+  getProductThingModel: async (id: number) => {
+    return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
   },
 
   // 新增产品物模型
-  createThinkModelFunction: async (data: ThinkModelFunctionVO) => {
-    return await request.post({ url: `/iot/think-model-function/create`, data })
+  createProductThingModel: async (data: ThingModelData) => {
+    return await request.post({ url: `/iot/product-thing-model/create`, data })
   },
 
   // 修改产品物模型
-  updateThinkModelFunction: async (data: ThinkModelFunctionVO) => {
-    return await request.put({ url: `/iot/think-model-function/update`, data })
+  updateProductThingModel: async (data: ThingModelData) => {
+    return await request.put({ url: `/iot/product-thing-model/update`, data })
   },
 
   // 删除产品物模型
-  deleteThinkModelFunction: async (id: number) => {
-    return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
-  },
-
-  // 导出产品物模型 Excel
-  exportThinkModelFunction: async (params) => {
-    return await request.download({ url: `/iot/think-model-function/export-excel`, params })
+  deleteProductThingModel: async (id: number) => {
+    return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
   }
 }
diff --git a/src/api/project/category/index.ts b/src/api/project/category/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c59cde24098889245d6b3b1c86980c6b7e7c769a
--- /dev/null
+++ b/src/api/project/category/index.ts
@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+// 项目分类 VO
+export interface CategoryVO {
+  id: number // 编号
+  name: string // 名字
+  parentId: number // 父级编号
+}
+
+// 项目分类 API
+export const CategoryApi = {
+  // 查询项目分类列表
+  getCategoryList: async (params) => {
+    return await request.get({ url: `/project/category/list`, params })
+  },
+
+  // 查询项目分类详情
+  getCategory: async (id: number) => {
+    return await request.get({ url: `/project/category/get?id=` + id })
+  },
+
+  // 新增项目分类
+  createCategory: async (data: CategoryVO) => {
+    return await request.post({ url: `/project/category/create`, data })
+  },
+
+  // 修改项目分类
+  updateCategory: async (data: CategoryVO) => {
+    return await request.put({ url: `/project/category/update`, data })
+  },
+
+  // 删除项目分类
+  deleteCategory: async (id: number) => {
+    return await request.delete({ url: `/project/category/delete?id=` + id })
+  },
+
+  // 导出项目分类 Excel
+  exportCategory: async (params) => {
+    return await request.download({ url: `/project/category/export-excel`, params })
+  },
+}
\ No newline at end of file
diff --git a/src/api/project/model/index.ts b/src/api/project/model/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b85cd04bbcce31d7c23615c579f24860532b4154
--- /dev/null
+++ b/src/api/project/model/index.ts
@@ -0,0 +1,75 @@
+import request from '@/config/axios'
+
+// 项目模板 VO
+export interface ModelVO {
+  id: number // id
+  number: string // 项目编号
+  name: string // 项目名称
+  scheduledStartTime: Date // 计划开始时间
+  scheduledEndTime: Date // 计划结束时间
+  actualStartTime: Date // 实际开始时间
+  actualEndTime: Date // 实际结束时间
+  planDuration: number // 计划工期
+  actualDuration: number // 实际工期
+  progress: number // 进度
+  calendar: number // 日历
+  projectManager: number // 项目经理
+  projectTarget: string // 项目目标
+  timeoutReason: string // 超时原因
+  status: number // 状态
+  phase: number // 生命周期阶段
+  note: string // 备注
+}
+
+// 项目模板 API
+export const ModelApi = {
+
+  // 查询项目模板列表
+  getModelList: async (params) => {
+    return await request.get({ url: `/project/model/list`, params })
+  },
+
+  // 查询项目模板分页
+  getModelPage: async (params: any) => {
+    return await request.get({ url: `/project/model/page`, params })
+  },
+
+  // 查询项目模板详情
+  getModel: async (id: number) => {
+    return await request.get({ url: `/project/model/get?id=` + id })
+  },
+
+  // 新增项目模板
+  createModel: async (data: ModelVO) => {
+    return await request.post({ url: `/project/model/create`, data })
+  },
+
+  // 修改项目模板
+  updateModel: async (data: ModelVO) => {
+    return await request.put({ url: `/project/model/update`, data })
+  },
+
+  // 删除项目模板
+  deleteModel: async (id: number) => {
+    return await request.delete({ url: `/project/model/delete?id=` + id })
+  },
+
+  // 导出项目模板 Excel
+  exportModel: async (params) => {
+    return await request.download({ url: `/project/model/export-excel`, params })
+  },
+
+// ==================== 子表（项目输入文件） ====================
+
+  // 获得项目输入文件列表
+  getModelInputListByModelId: async (modelId) => {
+    return await request.get({ url: `/project/model/model-input/list-by-model-id?modelId=` + modelId })
+  },
+
+// ==================== 子表（项目输出文件） ====================
+
+  // 获得项目输出文件列表
+  getModelOutputListByModelId: async (modelId) => {
+    return await request.get({ url: `/project/model/model-output/list-by-model-id?modelId=` + modelId })
+  },
+}
diff --git a/src/assets/imgs/iot/device.png b/src/assets/imgs/iot/device.png
new file mode 100644
index 0000000000000000000000000000000000000000..79339cdf486e64bff9f5c3f89f16a7c20a8aadeb
Binary files /dev/null and b/src/assets/imgs/iot/device.png differ
diff --git a/src/assets/svgs/iot/card-fill.svg b/src/assets/svgs/iot/card-fill.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4c74ecdc148aafeb318af6b11a5ae9d3651a93a8
--- /dev/null
+++ b/src/assets/svgs/iot/card-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" class="design-iconfont" viewBox="0 0 12 12"><path fill="url(#a)" fill-rule="evenodd" d="M1 0a1 1 0 0 0-1 1v3.538a1 1 0 0 0 1 1h3.538a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1Zm0 6.462a1 1 0 0 0-1 1V11a1 1 0 0 0 1 1h3.538a1 1 0 0 0 1-1V7.462a1 1 0 0 0-1-1H1ZM6.462 1a1 1 0 0 1 1-1H11a1 1 0 0 1 1 1v3.538a1 1 0 0 1-1 1H7.462a1 1 0 0 1-1-1V1Zm1 5.462a1 1 0 0 0-1 1V11a1 1 0 0 0 1 1H11a1 1 0 0 0 1-1V7.462a1 1 0 0 0-1-1H7.462Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="0" x2="12" y1="0" y2="12" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/iot/cube.svg b/src/assets/svgs/iot/cube.svg
new file mode 100644
index 0000000000000000000000000000000000000000..200ac1b1c0ce4d456bab9b59403a8f2a4fcf19e0
--- /dev/null
+++ b/src/assets/svgs/iot/cube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 12 12"><g clip-path="url(#a)"><path fill="url(#b)" fill-rule="evenodd" d="M6.958.42C6.444.216 5.61.216 5.098.42L1.15 1.975c-.77.304-.77.797 0 1.1l3.947 1.558c.514.202 1.347.202 1.86 0l3.948-1.557c.77-.304.77-.797 0-1.1L6.958.418ZM4.715 11.788a.857.857 0 0 0 .3.056c.383 0 .671-.295.671-.7V6.404c0-.49-.364-1.007-.817-1.177L1.09 3.805a.808.808 0 0 0-.284-.056c-.353 0-.581.275-.581.7V9.19c0 .508.33 1.014.763 1.177l3.726 1.422Zm2.229-.024h-.02l.073.003c.074.004.154.009.227-.019L11 10.367c.45-.168.83-.686.83-1.177V4.45c0-.413-.29-.7-.673-.7a.965.965 0 0 0-.317.055l-3.72 1.422c-.44.165-.75.67-.75 1.177v4.74c0 .42.218.621.575.621Z" clip-rule="evenodd"/></g><defs><linearGradient id="b" x1=".226" x2="11.803" y1=".267" y2="11.871" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index f0ce322ee04125f10f2c5c9dd2ba1cf306fafc8c..69f82c41c0af84f764c510c857c12d2c7bd727c5 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -618,7 +618,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'product/detail/:id',
+        path: 'product/product/detail/:id',
         name: 'IoTProductDetail',
         meta: {
           title: '产品详情',
@@ -626,7 +626,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
           hidden: true,
           activeMenu: '/iot/product'
         },
-        component: () => import('@/views/iot/product/detail/index.vue')
+        component: () => import('@/views/iot/product/product/detail/index.vue')
       },
       {
         path: 'device/detail/:id',
@@ -637,9 +637,31 @@ const remainingRouter: AppRouteRecordRaw[] = [
           hidden: true,
           activeMenu: '/iot/device'
         },
-        component: () => import('@/views/iot/device/detail/index.vue')
+        component: () => import('@/views/iot/device/device/detail/index.vue')
       }
     ]
+  },
+  {
+    path: '/project',
+    component: Layout,
+    name: 'PROJECT',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'project/model/detail',
+        component: () => import('@/views/project/model/detail/index.vue'),
+        name: 'ProjectDetail',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '项目详情',
+          activeMenu: '/project/model'
+        }
+      },
+    ]
   }
 ]
 
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 1134152b69ffc40cf0ffb55682bff11f76b4babe..5538ed607a142d95195ea0894e15c2b0b203ba0e 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -239,5 +239,8 @@ export enum DICT_TYPE {
   IOT_PRODUCT_FUNCTION_TYPE = 'iot_product_function_type', // IOT 产品功能类型
   IOT_DATA_TYPE = 'iot_data_type', // IOT 数据类型
   IOT_UNIT_TYPE = 'iot_unit_type', // IOT 单位类型
-  IOT_RW_TYPE = 'iot_rw_type' // IOT 读写类型
+  IOT_RW_TYPE = 'iot_rw_type', // IOT 读写类型
+  IOT_PLUGIN_DEPLOY_TYPE = 'iot_plugin_deploy_type', // IOT 插件部署类型
+  IOT_PLUGIN_STATUS = 'iot_plugin_status', // IOT 插件状态
+  IOT_PLUGIN_TYPE = 'iot_plugin_type' // IOT 插件类型
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2c2fbbd098b1ad9b8ceb33f05f87dbcd062b682c..059571e7becc83b118c195881d23d487831d9d21 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -116,6 +116,20 @@ export function toAnyString() {
   return str
 }
 
+/**
+ * 生成指定长度的随机字符串
+ * 
+ * @param length 字符串长度
+ */
+export function generateRandomStr(length: number): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
 /**
  * 首字母大写
  */
diff --git a/src/views/iot/device/DeviceForm.vue b/src/views/iot/device/device/DeviceForm.vue
similarity index 49%
rename from src/views/iot/device/DeviceForm.vue
rename to src/views/iot/device/device/DeviceForm.vue
index cb02601253de78b746297e4877c620e86e4fd5f9..be33c0c5fe4d595d8d3bef015aa5ffb4cf82aac4 100644
--- a/src/views/iot/device/DeviceForm.vue
+++ b/src/views/iot/device/device/DeviceForm.vue
@@ -13,6 +13,7 @@
           placeholder="请选择产品"
           :disabled="formType === 'update'"
           clearable
+          @change="handleProductChange"
         >
           <el-option
             v-for="product in products"
@@ -22,6 +23,19 @@
           />
         </el-select>
       </el-form-item>
+      <el-form-item label="DeviceKey" prop="deviceKey">
+        <el-input
+          v-model="formData.deviceKey"
+          placeholder="请输入 DeviceKey"
+          :disabled="formType === 'update'"
+        >
+          <template #append>
+            <el-button @click="generateDeviceKey" :disabled="formType === 'update'">
+              重新生成
+            </el-button>
+          </template>
+        </el-input>
+      </el-form-item>
       <el-form-item label="DeviceName" prop="deviceName">
         <el-input
           v-model="formData.deviceName"
@@ -29,9 +43,40 @@
           :disabled="formType === 'update'"
         />
       </el-form-item>
-      <el-form-item label="备注名称" prop="nickname">
-        <el-input v-model="formData.nickname" placeholder="请输入备注名称" />
+      <el-form-item v-if="formData.deviceType === 1" label="网关设备" prop="gatewayId">
+        <el-select v-model="formData.gatewayId" placeholder="子设备可选择父设备" clearable>
+          <el-option
+            v-for="gateway in gatewayDevices"
+            :key="gateway.id"
+            :label="gateway.nickname || gateway.deviceName"
+            :value="gateway.id"
+          />
+        </el-select>
       </el-form-item>
+
+      <el-collapse>
+        <el-collapse-item title="更多配置">
+          <el-form-item label="备注名称" prop="nickname">
+            <el-input v-model="formData.nickname" placeholder="请输入备注名称" />
+          </el-form-item>
+          <el-form-item label="设备图片" prop="picUrl">
+            <UploadImg v-model="formData.picUrl" :height="'120px'" :width="'120px'" />
+          </el-form-item>
+          <el-form-item label="设备分组" prop="groupIds">
+            <el-select v-model="formData.groupIds" placeholder="请选择设备分组" multiple clearable>
+              <el-option
+                v-for="group in deviceGroups"
+                :key="group.id"
+                :label="group.name"
+                :value="group.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备序列号" prop="serialNumber">
+            <el-input v-model="formData.serialNumber" placeholder="请输入设备序列号" />
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -40,14 +85,17 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
-import { ProductApi } from '@/api/iot/product'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
+import { DeviceGroupApi } from '@/api/iot/device/group'
+import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
+import { UploadImg } from '@/components/UploadFile'
+import { generateRandomStr } from '@/utils'
 
-/** IoT 设备 表单 */
+/** IoT 设备表单 */
 defineOptions({ name: 'IoTDeviceForm' })
 
 const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const message = useMessage() // 消息窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
@@ -56,12 +104,27 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   productId: undefined,
+  deviceKey: undefined as string | undefined,
   deviceName: undefined,
-  nickname: undefined
+  nickname: undefined,
+  picUrl: undefined,
+  gatewayId: undefined,
+  deviceType: undefined as number | undefined,
+  serialNumber: undefined,
+  groupIds: [] as number[]
 })
 const formRules = reactive({
   productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
+  deviceKey: [
+    { required: true, message: 'DeviceKey 不能为空', trigger: 'blur' },
+    {
+      pattern: /^[a-zA-Z0-9]+$/,
+      message: 'DeviceKey 只能包含字母和数字',
+      trigger: 'blur'
+    }
+  ],
   deviceName: [
+    { required: true, message: 'DeviceName 不能为空', trigger: 'blur' },
     {
       pattern: /^[a-zA-Z0-9_.\-:@]{4,32}$/,
       message:
@@ -87,9 +150,19 @@ const formRules = reactive({
       },
       trigger: 'blur'
     }
+  ],
+  serialNumber: [
+    {
+      pattern: /^[a-zA-Z0-9-_]+$/,
+      message: '序列号只能包含字母、数字、中划线和下划线',
+      trigger: 'blur'
+    }
   ]
 })
 const formRef = ref() // 表单 Ref
+const products = ref<ProductVO[]>([]) // 产品列表
+const gatewayDevices = ref<DeviceVO[]>([]) // 网关设备列表
+const deviceGroups = ref<any[]>([])
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -97,6 +170,7 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
@@ -105,6 +179,24 @@ const open = async (type: string, id?: number) => {
     } finally {
       formLoading.value = false
     }
+  } else {
+    generateDeviceKey()
+  }
+
+  // 加载网关设备列表
+  try {
+    gatewayDevices.value = await DeviceApi.getSimpleDeviceList(DeviceTypeEnum.GATEWAY)
+  } catch (error) {
+    console.error('加载网关设备列表失败:', error)
+  }
+  // 加载产品列表
+  products.value = await ProductApi.getSimpleProductList()
+
+  // 加载设备分组列表
+  try {
+    deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
+  } catch (error) {
+    console.error('加载设备分组列表失败:', error)
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@@ -138,19 +230,30 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     productId: undefined,
+    deviceKey: undefined,
     deviceName: undefined,
-    nickname: undefined
+    nickname: undefined,
+    picUrl: undefined,
+    gatewayId: undefined,
+    deviceType: undefined,
+    serialNumber: undefined,
+    groupIds: []
   }
   formRef.value?.resetFields()
 }
 
-/** 查询字典下拉列表 */
-const products = ref()
-const getProducts = async () => {
-  products.value = await ProductApi.getSimpleProductList()
+/** 产品选择变化 */
+const handleProductChange = (productId: number) => {
+  if (!productId) {
+    formData.value.deviceType = undefined
+    return
+  }
+  const product = products.value?.find((item) => item.id === productId)
+  formData.value.deviceType = product?.deviceType
 }
 
-onMounted(() => {
-  getProducts()
-})
+/** 生成 DeviceKey */
+const generateDeviceKey = () => {
+  formData.value.deviceKey = generateRandomStr(16)
+}
 </script>
diff --git a/src/views/iot/device/device/DeviceGroupForm.vue b/src/views/iot/device/device/DeviceGroupForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..322e8a73a61bdd630d946d7bd8107135b0ee0025
--- /dev/null
+++ b/src/views/iot/device/device/DeviceGroupForm.vue
@@ -0,0 +1,90 @@
+<template>
+  <Dialog :title="'添加设备到分组'" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="设备分组" prop="groupIds">
+        <el-select v-model="formData.groupIds" placeholder="请选择设备分组" multiple clearable>
+          <el-option
+            v-for="group in deviceGroups"
+            :key="group.id"
+            :label="group.name"
+            :value="group.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { DeviceApi } from '@/api/iot/device/device'
+import { DeviceGroupApi } from '@/api/iot/device/group'
+
+defineOptions({ name: 'IoTDeviceGroupForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  ids: [] as number[],
+  groupIds: [] as number[]
+})
+const formRules = reactive({
+  groupIds: [{ required: true, message: '设备分组不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const deviceGroups = ref<any[]>([]) // 设备分组列表
+
+/** 打开弹窗 */
+const open = async (ids: number[]) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.ids = ids
+
+  // 加载设备分组列表
+  try {
+    deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
+  } catch (error) {
+    console.error('加载设备分组列表失败:', error)
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    await DeviceApi.updateDeviceGroup(formData.value)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    ids: [],
+    groupIds: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/iot/device/device/DeviceImportForm.vue b/src/views/iot/device/device/DeviceImportForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6412f6a5f19203bfd0ee9a08e72ec4c5010c318
--- /dev/null
+++ b/src/views/iot/device/device/DeviceImportForm.vue
@@ -0,0 +1,139 @@
+<template>
+  <Dialog v-model="dialogVisible" title="设备导入" width="400">
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="importUrl + '?updateSupport=' + updateSupport"
+      :auto-upload="false"
+      :disabled="formLoading"
+      :headers="uploadHeaders"
+      :limit="1"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+      accept=".xlsx, .xls"
+      drag
+    >
+      <Icon icon="ep:upload" />
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <template #tip>
+        <div class="el-upload__tip text-center">
+          <div class="el-upload__tip">
+            <el-checkbox v-model="updateSupport" />
+            是否更新已经存在的设备数据
+          </div>
+          <span>仅允许导入 xls、xlsx 格式文件。</span>
+          <el-link
+            :underline="false"
+            style="font-size: 12px; vertical-align: baseline"
+            type="primary"
+            @click="importTemplate"
+          >
+            下载模板
+          </el-link>
+        </div>
+      </template>
+    </el-upload>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { DeviceApi } from '@/api/iot/device/device'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import download from '@/utils/download'
+
+defineOptions({ name: 'IoTDeviceImportForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl =
+  import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/device/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+const updateSupport = ref(0) // 是否更新已经存在的设备数据
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+  updateSupport.value = 0
+  fileList.value = []
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emits = defineEmits(['success'])
+const submitFormSuccess = (response: any) => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    formLoading.value = false
+    return
+  }
+  // 拼接提示语
+  const data = response.data
+  let text = '上传成功数量：' + data.createDeviceNames.length + ';'
+  for (let deviceName of data.createDeviceNames) {
+    text += '< ' + deviceName + ' >'
+  }
+  text += '更新成功数量：' + data.updateDeviceNames.length + ';'
+  for (const deviceName of data.updateDeviceNames) {
+    text += '< ' + deviceName + ' >'
+  }
+  text += '更新失败数量：' + Object.keys(data.failureDeviceNames).length + ';'
+  for (const deviceName in data.failureDeviceNames) {
+    text += '< ' + deviceName + ': ' + data.failureDeviceNames[deviceName] + ' >'
+  }
+  message.alert(text)
+  formLoading.value = false
+  dialogVisible.value = false
+  // 发送操作成功的事件
+  emits('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('上传失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = async (): Promise<void> => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  await nextTick()
+  uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+  const res = await DeviceApi.importDeviceTemplate()
+  download.excel(res, '设备导入模版.xls')
+}
+</script>
diff --git a/src/views/iot/device/device/detail/DeviceDataDetail.vue b/src/views/iot/device/device/detail/DeviceDataDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c9ca9c37d5a438566d96ee59a6320fc16ca85bf
--- /dev/null
+++ b/src/views/iot/device/device/detail/DeviceDataDetail.vue
@@ -0,0 +1,116 @@
+<template>
+  <Dialog title="查看数据" v-model="dialogVisible">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="时间" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.times"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="datetimerange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            class="!w-350px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon icon="ep:search" class="mr-5px" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon icon="ep:refresh" class="mr-5px" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+    <ContentWrap>
+      <el-table v-loading="detailLoading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column
+          label="时间"
+          align="center"
+          prop="time"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+        <el-table-column label="原始值" align="center" prop="data" />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device/device'
+import { ProductVO } from '@/api/iot/product/product'
+import { beginOfDay, dateFormatter, endOfDay, formatDate } from '@/utils/formatTime'
+
+const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
+
+/** IoT 设备 数据详情 */
+defineOptions({ name: 'IoTDeviceDataDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false)
+
+const list = ref<DeviceHistoryDataVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  deviceId: -1,
+  identifier: undefined as string | undefined,
+  times: [
+    // 默认显示最近一周的数据
+    formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
+    formatDate(endOfDay(new Date()))
+  ]
+})
+
+const queryFormRef = ref() // 搜索的表单
+
+const getList = async () => {
+  detailLoading.value = true
+  try {
+    const data = await DeviceApi.getDevicePropertiesHistoryData(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+/** 打开弹窗 */
+const open = async (deviceId: number, identifier: String) => {
+  dialogVisible.value = true
+  queryParams.deviceId = deviceId
+  queryParams.identifier = identifier
+  getList()
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/iot/device/detail/DeviceDetailsHeader.vue b/src/views/iot/device/device/detail/DeviceDetailsHeader.vue
similarity index 74%
rename from src/views/iot/device/detail/DeviceDetailsHeader.vue
rename to src/views/iot/device/device/detail/DeviceDetailsHeader.vue
index 62960529d62127880f2801fbbf4f8431ca371f68..253fa97afe54279b3c436f9113dba99efe9bb332 100644
--- a/src/views/iot/device/detail/DeviceDetailsHeader.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsHeader.vue
@@ -35,41 +35,33 @@
   <DeviceForm ref="formRef" @success="emit('refresh')" />
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
-import DeviceForm from '@/views/iot/device/DeviceForm.vue'
-import { ProductVO } from '@/api/iot/product'
-import { DeviceVO } from '@/api/iot/device'
-import { useRouter } from 'vue-router'
+import DeviceForm from '@/views/iot/device/device/DeviceForm.vue'
+import { ProductVO } from '@/api/iot/product/product'
+import { DeviceVO } from '@/api/iot/device/device'
 
 const message = useMessage()
 const router = useRouter()
 
-// 操作修改
+const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
+const emit = defineEmits(['refresh'])
+
+/** 操作修改 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
-const emit = defineEmits(['refresh'])
-
-/**
- * 将文本复制到剪贴板
- *
- * @param text 需要复制的文本
- */
-const copyToClipboard = (text: string) => {
-  // TODO @haohao：可以考虑用 await 异步转同步哈
-  navigator.clipboard.writeText(text).then(() => {
+/** 复制到剪贴板方法 */
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
     message.success('复制成功')
-  })
+  } catch (error) {
+    message.error('复制失败')
+  }
 }
 
-/**
- * 跳转到产品详情页面
- *
- * @param productId 产品 ID
- */
+/** 跳转到产品详情页面 */
 const goToProductDetail = (productId: number) => {
   router.push({ name: 'IoTProductDetail', params: { id: productId } })
 }
diff --git a/src/views/iot/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
similarity index 94%
rename from src/views/iot/device/detail/DeviceDetailsInfo.vue
rename to src/views/iot/device/device/detail/DeviceDetailsInfo.vue
index 59b9d2542fa0d046dfa6dfd1ce8a6c4d4c39fec5..d2014927920a3f1de4c6e2ecd316243371d43d0b 100644
--- a/src/views/iot/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
@@ -79,16 +79,14 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
 import { DICT_TYPE } from '@/utils/dict'
-import { ProductVO } from '@/api/iot/product'
+import { ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
-import { DeviceVO } from '@/api/iot/device'
+import { DeviceVO } from '@/api/iot/device/device'
 
 const message = useMessage() // 消息提示
 
 const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
-
 const emit = defineEmits(['refresh']) // 定义 Emits
 
 const activeNames = ref(['basicInfo']) // 展示的折叠面板
@@ -100,10 +98,13 @@ const mqttParams = ref({
 }) // 定义 MQTT 参数对象
 
 /** 复制到剪贴板方法 */
-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text).then(() => {
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
     message.success('复制成功')
-  })
+  } catch (error) {
+    message.error('复制失败')
+  }
 }
 
 /** 打开 MQTT 参数弹框的方法 */
diff --git a/src/views/iot/device/device/detail/DeviceDetailsModel.vue b/src/views/iot/device/device/detail/DeviceDetailsModel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..246eabf0fcc9e2987651f8c1cd52f161e9f31075
--- /dev/null
+++ b/src/views/iot/device/device/detail/DeviceDetailsModel.vue
@@ -0,0 +1,133 @@
+<template>
+  <ContentWrap>
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="运行状态" name="status">
+        <ContentWrap>
+          <!-- 搜索工作栏 -->
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="标识符" prop="identifier">
+              <el-input
+                v-model="queryParams.identifier"
+                placeholder="请输入标识符"
+                clearable
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="属性名称" prop="name">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入属性名称"
+                clearable
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"
+                ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
+              >
+              <el-button @click="resetQuery"
+                ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-tabs>
+            <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column label="属性标识符" align="center" prop="identifier" />
+              <el-table-column label="属性名称" align="center" prop="name" />
+              <el-table-column label="数据类型" align="center" prop="dataType" />
+              <el-table-column
+                label="更新时间"
+                align="center"
+                prop="updateTime"
+                :formatter="dateFormatter"
+                width="180px"
+              />
+              <el-table-column label="最新值" align="center" prop="value" />
+              <el-table-column label="操作" align="center">
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    @click="openDetail(scope.row.deviceId, scope.row.identifier)"
+                  >
+                    查看数据
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tabs>
+          <!-- 表单弹窗：添加/修改 -->
+          <DeviceDataDetail ref="detailRef" :device="device" :product="product" />
+        </ContentWrap>
+      </el-tab-pane>
+      <el-tab-pane label="事件管理" name="event">
+        <p>事件管理</p>
+      </el-tab-pane>
+      <el-tab-pane label="服务调用" name="service">
+        <p>服务调用</p>
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { ProductVO } from '@/api/iot/product/product'
+import { DeviceApi, DeviceDataVO, DeviceVO } from '@/api/iot/device/device'
+import { dateFormatter } from '@/utils/formatTime'
+import DeviceDataDetail from './DeviceDataDetail.vue'
+
+const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
+
+const loading = ref(true) // 列表的加载中
+const list = ref<DeviceDataVO[]>([]) // 列表的数据
+const queryParams = reactive({
+  deviceId: -1,
+  identifier: undefined as string | undefined,
+  name: undefined as string | undefined
+})
+
+const queryFormRef = ref() // 搜索的表单
+const activeTab = ref('status') // 默认选中的标签
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.deviceId = props.device.id
+    list.value = await DeviceApi.getDevicePropertiesLatestData(queryParams)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  queryParams.identifier = undefined
+  queryParams.name = undefined
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const detailRef = ref()
+const openDetail = (deviceId: number, identifier: String) => {
+  detailRef.value.open(deviceId, identifier)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/iot/device/detail/index.vue b/src/views/iot/device/device/detail/index.vue
similarity index 56%
rename from src/views/iot/device/detail/index.vue
rename to src/views/iot/device/device/detail/index.vue
index d56859bd3ae9dc9990588502e0e3fdf6a9bd2d70..f67d6312c8afaf9e5948593d156981d8bd4cf39e 100644
--- a/src/views/iot/device/detail/index.vue
+++ b/src/views/iot/device/device/detail/index.vue
@@ -6,38 +6,42 @@
     @refresh="getDeviceData(id)"
   />
   <el-col>
-    <el-tabs>
-      <el-tab-pane label="设备信息">
-        <DeviceDetailsInfo :product="product" :device="device" />
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="设备信息" name="info">
+        <DeviceDetailsInfo v-if="activeTab === 'info'" :product="product" :device="device" />
       </el-tab-pane>
       <el-tab-pane label="Topic 列表" />
-      <el-tab-pane label="物模型数据" />
-      <el-tab-pane label="子设备管理" />
+      <el-tab-pane label="物模型数据" name="model">
+        <DeviceDetailsModel v-if="activeTab === 'model'" :product="product" :device="device" />
+      </el-tab-pane>
+      <el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" />
+      <el-tab-pane label="设备影子" />
     </el-tabs>
   </el-col>
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
-import { ProductApi, ProductVO } from '@/api/iot/product'
-import DeviceDetailsHeader from '@/views/iot/device/detail/DeviceDetailsHeader.vue'
-import DeviceDetailsInfo from '@/views/iot/device/detail/DeviceDetailsInfo.vue'
+import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
+import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
+import DeviceDetailsHeader from './DeviceDetailsHeader.vue'
+import DeviceDetailsInfo from './DeviceDetailsInfo.vue'
+import DeviceDetailsModel from './DeviceDetailsModel.vue'
 
 defineOptions({ name: 'IoTDeviceDetail' })
 
 const route = useRoute()
 const message = useMessage()
-const id = route.params.id // 编号
+const id = Number(route.params.id) // 将字符串转换为数字
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 产品详情
 const device = ref<DeviceVO>({} as DeviceVO) // 设备详情
+const activeTab = ref('info') // 默认激活的标签页
 
 /** 获取设备详情 */
 const getDeviceData = async (id: number) => {
   loading.value = true
   try {
     device.value = await DeviceApi.getDevice(id)
-    console.log(product.value)
     await getProductData(device.value.productId)
   } finally {
     loading.value = false
@@ -47,11 +51,8 @@ const getDeviceData = async (id: number) => {
 /** 获取产品详情 */
 const getProductData = async (id: number) => {
   product.value = await ProductApi.getProduct(id)
-  console.log(product.value)
 }
 
-/** 获取物模型 */
-
 /** 初始化 */
 const { delView } = useTagsViewStore() // 视图操作
 const { currentRoute } = useRouter() // 路由
@@ -62,5 +63,6 @@ onMounted(async () => {
     return
   }
   await getDeviceData(id)
+  activeTab.value = route.query.tab as string
 })
 </script>
diff --git a/src/views/iot/device/device/index.vue b/src/views/iot/device/device/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8525d67491c0fcac98f5fa9f1b8a48b5183e046e
--- /dev/null
+++ b/src/views/iot/device/device/index.vue
@@ -0,0 +1,512 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="产品" prop="productId">
+        <el-select
+          v-model="queryParams.productId"
+          placeholder="请选择产品"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="product in products"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="DeviceName" prop="deviceName">
+        <el-input
+          v-model="queryParams.deviceName"
+          placeholder="请输入 DeviceName"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="备注名称" prop="nickname">
+        <el-input
+          v-model="queryParams.nickname"
+          placeholder="请输入备注名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select
+          v-model="queryParams.deviceType"
+          placeholder="请选择设备类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择设备状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="设备分组" prop="groupId">
+        <el-select
+          v-model="queryParams.groupId"
+          placeholder="请选择设备分组"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="group in deviceGroups"
+            :key="group.id"
+            :label="group.name"
+            :value="group.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item class="float-right !mr-0 !mb-0">
+        <el-button-group>
+          <el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
+            <Icon icon="ep:grid" />
+          </el-button>
+          <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
+            <Icon icon="ep:list" />
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          重置
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['iot:device:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" />
+          新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['iot:device:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button type="warning" plain @click="handleImport" v-hasPermi="['iot:device:import']">
+          <Icon icon="ep:upload" /> 导入
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openGroupForm"
+          :disabled="selectedIds.length === 0"
+          v-hasPermi="['iot:device:update']"
+        >
+          <Icon icon="ep:folder-add" class="mr-5px" /> 添加到分组
+        </el-button>
+        <el-button
+          type="danger"
+          plain
+          @click="handleDeleteList"
+          :disabled="selectedIds.length === 0"
+          v-hasPermi="['iot:device:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <template v-if="viewMode === 'card'">
+      <el-row :gutter="16">
+        <el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
+          <el-card
+            class="h-full transition-colors relative overflow-hidden"
+            :body-style="{ padding: '0' }"
+          >
+            <!-- 添加渐变背景层 -->
+            <div
+              class="absolute top-0 left-0 right-0 h-[50px] pointer-events-none"
+              :class="[
+                item.status === DeviceStatusEnum.ONLINE
+                  ? 'bg-gradient-to-b from-[#eefaff] to-transparent'
+                  : 'bg-gradient-to-b from-[#fff1f1] to-transparent'
+              ]"
+            >
+            </div>
+            <div class="p-4 relative">
+              <!-- 标题区域 -->
+              <div class="flex items-center mb-3">
+                <div class="mr-2.5 flex items-center">
+                  <el-image :src="defaultIconUrl" class="w-[18px] h-[18px]" />
+                </div>
+                <div class="text-[16px] font-600 flex-1">{{ item.deviceName }}</div>
+                <!-- 添加设备状态标签 -->
+                <div class="inline-flex items-center">
+                  <div
+                    class="w-1 h-1 rounded-full mr-1.5"
+                    :class="
+                      item.status === DeviceStatusEnum.ONLINE
+                        ? 'bg-[var(--el-color-success)]'
+                        : 'bg-[var(--el-color-danger)]'
+                    "
+                  >
+                  </div>
+                  <el-text
+                    class="!text-xs font-bold"
+                    :type="item.status === DeviceStatusEnum.ONLINE ? 'success' : 'danger'"
+                  >
+                    {{ getDictLabel(DICT_TYPE.IOT_DEVICE_STATUS, item.status) }}
+                  </el-text>
+                </div>
+              </div>
+
+              <!-- 信息区域 -->
+              <div class="flex items-center text-[14px]">
+                <div class="flex-1">
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">所属产品</span>
+                    <span class="text-[#0070ff]">{{
+                      products.find((p) => p.id === item.productId)?.name
+                    }}</span>
+                  </div>
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">设备类型</span>
+                    <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
+                  </div>
+                  <div class="mb-2.5 last:mb-0">
+                    <span class="text-[#717c8e] mr-2.5">DeviceKey</span>
+                    <span class="text-[#0b1d30]">{{ item.deviceKey }}</span>
+                  </div>
+                </div>
+                <div class="w-[100px] h-[100px]">
+                  <el-image :src="defaultPicUrl" class="w-full h-full" />
+                </div>
+              </div>
+
+              <!-- 分隔线 -->
+              <el-divider class="!my-3" />
+
+              <!-- 按钮 -->
+              <div class="flex items-center px-0">
+                <el-button
+                  class="flex-1 !px-2 !h-[32px] text-[13px]"
+                  type="primary"
+                  plain
+                  @click="openForm('update', item.id)"
+                  v-hasPermi="['iot:device:update']"
+                >
+                  <Icon icon="ep:edit-pen" class="mr-1" />
+                  编辑
+                </el-button>
+                <el-button
+                  class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
+                  type="warning"
+                  plain
+                  @click="openDetail(item.id)"
+                >
+                  <Icon icon="ep:view" class="mr-1" />
+                  详情
+                </el-button>
+                <el-button
+                  class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
+                  type="info"
+                  plain
+                  @click="openModel(item.id)"
+                >
+                  <Icon icon="ep:tickets" class="mr-1" />
+                  数据
+                </el-button>
+                <div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
+                <el-button
+                  class="!px-2 !h-[32px] text-[13px]"
+                  type="danger"
+                  plain
+                  @click="handleDelete(item.id)"
+                  v-hasPermi="['iot:device:delete']"
+                >
+                  <Icon icon="ep:delete" />
+                </el-button>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </template>
+
+    <!-- 列表视图 -->
+    <el-table
+      v-else
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="DeviceName" align="center" prop="deviceName">
+        <template #default="scope">
+          <el-link @click="openDetail(scope.row.id)">{{ scope.row.deviceName }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注名称" align="center" prop="nickname" />
+      <el-table-column label="所属产品" align="center" prop="productId">
+        <template #default="scope">
+          {{ products.find((p) => p.id === scope.row.productId)?.name || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="设备类型" align="center" prop="deviceType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="所属分组" align="center" prop="groupId">
+        <template #default="scope">
+          <template v-if="scope.row.groupIds?.length">
+            <el-tag v-for="id in scope.row.groupIds" :key="id" class="ml-5px" size="small">
+              {{ deviceGroups.find((g) => g.id === id)?.name }}
+            </el-tag>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="最后上线时间"
+        align="center"
+        prop="lastOnlineTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['iot:product:query']"
+          >
+            查看
+          </el-button>
+          <el-button link type="primary" @click="openModel(scope.row.id)"> 日志 </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['iot:device:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['iot:device:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DeviceForm ref="formRef" @success="getList" />
+  <!-- 分组表单组件 -->
+  <DeviceGroupForm ref="groupFormRef" @success="getList" />
+  <!-- 导入表单组件 -->
+  <DeviceImportForm ref="importFormRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { DeviceApi, DeviceVO, DeviceStatusEnum } from '@/api/iot/device/device'
+import DeviceForm from './DeviceForm.vue'
+import { ProductApi, ProductVO } from '@/api/iot/product/product'
+import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
+import download from '@/utils/download'
+import DeviceGroupForm from './DeviceGroupForm.vue'
+import DeviceImportForm from './DeviceImportForm.vue'
+
+/** IoT 设备列表 */
+defineOptions({ name: 'IoTDevice' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表加载中
+const list = ref<DeviceVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  deviceName: undefined,
+  productId: undefined,
+  deviceType: undefined,
+  nickname: undefined,
+  status: undefined,
+  groupId: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出加载状态
+const products = ref<ProductVO[]>([]) // 产品列表
+const deviceGroups = ref<DeviceGroupVO[]>([]) // 设备分组列表
+const selectedIds = ref<number[]>([]) // 选中的设备编号数组
+const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
+const defaultPicUrl = ref('/src/assets/imgs/iot/device.png') // 默认设备图片
+const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认设备图标
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DeviceApi.getDevicePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  selectedIds.value = [] // 清空选择
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 打开详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'IoTDeviceDetail', params: { id } })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 起删除
+    await DeviceApi.deleteDevice(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出方法 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DeviceApi.exportDeviceExcel(queryParams)
+    download.excel(data, '物联网设备.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: DeviceVO[]) => {
+  selectedIds.value = selection.map((item) => item.id)
+}
+
+/** 批量删除按钮操作 */
+const handleDeleteList = async () => {
+  try {
+    await message.delConfirm()
+    // 执行批量删除
+    await DeviceApi.deleteDeviceList(selectedIds.value)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 添加到分组操作 */
+const groupFormRef = ref()
+const openGroupForm = () => {
+  groupFormRef.value.open(selectedIds.value)
+}
+
+/** 打开物模型数据 */
+const openModel = (id: number) => {
+  push({ name: 'IoTDeviceDetail', params: { id }, query: { tab: 'model' } })
+}
+
+/** 设备导入 */
+const importFormRef = ref()
+const handleImport = () => {
+  importFormRef.value.open()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  getList()
+
+  // 获取产品列表
+  products.value = await ProductApi.getSimpleProductList()
+  // 获取分组列表
+  deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
+})
+</script>
diff --git a/src/views/iot/device/group/DeviceGroupForm.vue b/src/views/iot/device/group/DeviceGroupForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..648725730e8b1cf37d889aafa63758c628dc6ae3
--- /dev/null
+++ b/src/views/iot/device/group/DeviceGroupForm.vue
@@ -0,0 +1,112 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="分组名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入分组名字" />
+      </el-form-item>
+      <el-form-item label="分组状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分组描述" prop="description">
+        <el-input type="textarea" v-model="formData.description" placeholder="请输入分组描述" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
+
+/** IoT 设备分组 表单 */
+defineOptions({ name: 'IoTDeviceGroupForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  status: undefined,
+  description: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '分组名字不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '分组状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DeviceGroupApi.getDeviceGroup(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DeviceGroupVO
+    if (formType.value === 'create') {
+      await DeviceGroupApi.createDeviceGroup(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DeviceGroupApi.updateDeviceGroup(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    status: undefined,
+    description: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/iot/product/index.vue b/src/views/iot/device/group/index.vue
similarity index 59%
rename from src/views/iot/product/index.vue
rename to src/views/iot/device/group/index.vue
index fa285819efb9eb50b9a72d46b7b5b3f917668d0d..ea2e4bea7f740f5b372f692efeee3cfb422671c7 100644
--- a/src/views/iot/product/index.vue
+++ b/src/views/iot/device/group/index.vue
@@ -8,22 +8,24 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="产品名称" prop="name">
+      <el-form-item label="分组名字" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入产品名称"
+          placeholder="请输入分组名字"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="ProductKey" prop="productKey">
-        <el-input
-          v-model="queryParams.productKey"
-          placeholder="请输入产品标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
         />
       </el-form-item>
       <el-form-item>
@@ -33,7 +35,7 @@
           type="primary"
           plain
           @click="openForm('create')"
-          v-hasPermi="['iot:product:create']"
+          v-hasPermi="['iot:device-group:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
@@ -44,17 +46,14 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="产品名称" align="center" prop="name">
-        <template #default="scope">
-          <el-link @click="openDetail(scope.row.id)">{{ scope.row.name }}</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="ProductKey" align="center" prop="productKey" />
-      <el-table-column label="设备类型" align="center" prop="deviceType">
+      <el-table-column label="分组 ID" align="center" prop="id" />
+      <el-table-column label="分组名字" align="center" prop="name" />
+      <el-table-column label="分组状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
+      <el-table-column label="分组描述" align="center" prop="description" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -62,27 +61,22 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="产品状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center">
+      <el-table-column label="设备数量" align="center" prop="deviceCount" />
+      <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
           <el-button
             link
             type="primary"
-            @click="openDetail(scope.row.id)"
-            v-hasPermi="['iot:product:query']"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['iot:device-group:update']"
           >
-            查看
+            编辑
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['iot:product:delete']"
-            :disabled="scope.row.status === 1"
+            v-hasPermi="['iot:device-group:delete']"
           >
             删除
           </el-button>
@@ -99,39 +93,29 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <ProductForm ref="formRef" @success="getList" />
+  <DeviceGroupForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
-import { ProductApi, ProductVO } from '@/api/iot/product'
-import ProductForm from './ProductForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
+import DeviceGroupForm from './DeviceGroupForm.vue'
 
-/** iot 产品 列表 */
-defineOptions({ name: 'IoTProduct' })
+/** IoT 设备分组列表 */
+defineOptions({ name: 'IoTDeviceGroup' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const list = ref<ProductVO[]>([]) // 列表的数据
+const list = ref<DeviceGroupVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: undefined,
-  createTime: [],
-  productKey: undefined,
-  protocolId: undefined,
-  categoryId: undefined,
-  description: undefined,
-  validateType: undefined,
-  status: undefined,
-  deviceType: undefined,
-  netType: undefined,
-  protocolType: undefined,
-  dataFormat: undefined
+  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 
@@ -139,7 +123,7 @@ const queryFormRef = ref() // 搜索的表单
 const getList = async () => {
   loading.value = true
   try {
-    const data = await ProductApi.getProductPage(queryParams)
+    const data = await DeviceGroupApi.getDeviceGroupPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -165,19 +149,13 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 打开详情 */
-const { push } = useRouter()
-const openDetail = (id: number) => {
-  push({ name: 'IoTProductDetail', params: { id } })
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await ProductApi.deleteProduct(id)
+    await DeviceGroupApi.deleteDeviceGroup(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
diff --git a/src/views/iot/plugininfo/PluginInfoForm.vue b/src/views/iot/plugininfo/PluginInfoForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c8233c9e3ed866164904d2b717d128d4a8d2884
--- /dev/null
+++ b/src/views/iot/plugininfo/PluginInfoForm.vue
@@ -0,0 +1,106 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="插件名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入插件名称" />
+      </el-form-item>
+      <el-form-item label="部署方式" prop="deployType">
+        <el-select v-model="formData.deployType" placeholder="请选择部署方式">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
+
+/** IoT 插件信息 表单 */
+defineOptions({ name: 'PluginInfoForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  deployType: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
+  deployType: [{ required: true, message: '部署方式不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await PluginInfoApi.getPluginInfo(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as PluginInfoVO
+    if (formType.value === 'create') {
+      await PluginInfoApi.createPluginInfo(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PluginInfoApi.updatePluginInfo(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    deployType: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/iot/plugininfo/detail.vue b/src/views/iot/plugininfo/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f3f02f93bb07bc5967bb414179a417acbbf94c3
--- /dev/null
+++ b/src/views/iot/plugininfo/detail.vue
@@ -0,0 +1,44 @@
+<template>
+  <ContentWrap>
+    <el-descriptions title="插件详情" :column="2" border>
+      <el-descriptions-item label="插件名称">{{ pluginInfo.name }}</el-descriptions-item>
+      <el-descriptions-item label="组件ID">{{ pluginInfo.pluginId }}</el-descriptions-item>
+      <el-descriptions-item label="Jar包">{{ pluginInfo.file }}</el-descriptions-item>
+      <el-descriptions-item label="版本号">{{ pluginInfo.version }}</el-descriptions-item>
+      <el-descriptions-item label="部署方式">
+        <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="pluginInfo.deployType" />
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        <dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="pluginInfo.status" />
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-button type="primary" @click="goBack">返回</el-button>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const pluginInfo = ref<PluginInfoVO>({})
+
+const getPluginInfo = async (id: number) => {
+  const data = await PluginInfoApi.getPluginInfo(id)
+  pluginInfo.value = data
+}
+
+const goBack = () => {
+  router.back()
+}
+
+onMounted(() => {
+  const id = Number(route.params.id)
+  if (id) {
+    getPluginInfo(id)
+  }
+})
+</script>
diff --git a/src/views/iot/device/index.vue b/src/views/iot/plugininfo/index.vue
similarity index 44%
rename from src/views/iot/device/index.vue
rename to src/views/iot/plugininfo/index.vue
index 784b14828168eb48baa9a9dac3a6ba585316fbab..5591cef49deadd7fd5120af27f25e8a638d82d8e 100644
--- a/src/views/iot/device/index.vue
+++ b/src/views/iot/plugininfo/index.vue
@@ -8,63 +8,25 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="产品" prop="productId">
-        <el-select
-          v-model="queryParams.productId"
-          placeholder="请选择产品"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="product in products"
-            :key="product.id"
-            :label="product.name"
-            :value="product.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="DeviceName" prop="deviceName">
-        <el-input
-          v-model="queryParams.deviceName"
-          placeholder="请输入 DeviceName"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="备注名称" prop="nickname">
+      <el-form-item label="插件名称" prop="name">
         <el-input
-          v-model="queryParams.nickname"
-          placeholder="请输入备注名称"
+          v-model="queryParams.name"
+          placeholder="请输入插件名称"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="设备类型" prop="deviceType">
-        <el-select
-          v-model="queryParams.deviceType"
-          placeholder="请选择设备类型"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="设备状态" prop="status">
+      <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择设备状态"
+          placeholder="请选择状态"
           clearable
+          @change="handleQuery"
           class="!w-240px"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PLUGIN_STATUS)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -72,73 +34,65 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" />
-          搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" />
-          重置
-        </el-button>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
         <el-button
           type="primary"
           plain
           @click="openForm('create')"
-          v-hasPermi="['iot:device:create']"
+          v-hasPermi="['iot:plugin-info:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" />
-          新增
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
       </el-form-item>
+      <!-- 视图切换按钮 -->
+      <el-form-item class="float-right !mr-0 !mb-0">
+        <el-button-group>
+          <el-button :type="viewType === 'card' ? 'primary' : 'default'" @click="viewType = 'card'">
+            <Icon icon="ep:grid" />
+          </el-button>
+          <el-button
+            :type="viewType === 'table' ? 'primary' : 'default'"
+            @click="viewType = 'table'"
+          >
+            <Icon icon="ep:list" />
+          </el-button>
+        </el-button-group>
+      </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
-  <ContentWrap>
+  <ContentWrap v-if="viewType === 'table'">
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="DeviceName" align="center" prop="deviceName">
-        <template #default="scope">
-          <el-link @click="openDetail(scope.row.id)">{{ scope.row.deviceName }}</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注名称" align="center" prop="nickname" />
-      <el-table-column label="设备所属产品" align="center" prop="productId">
+      <el-table-column label="插件名称" align="center" prop="name" />
+      <el-table-column label="组件id" align="center" prop="pluginId" />
+      <el-table-column label="jar包" align="center" prop="file" />
+      <el-table-column label="版本号" align="center" prop="version" />
+      <el-table-column label="部署方式" align="center" prop="deployType">
         <template #default="scope">
-          {{ productMap[scope.row.productId] }}
+          <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
         </template>
       </el-table-column>
-      <el-table-column label="设备类型" align="center" prop="deviceType">
+      <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
-        </template>
-      </el-table-column>
-      <el-table-column label="设备状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column
-        label="最后上线时间"
+        label="创建时间"
         align="center"
-        prop="lastOnlineTime"
+        prop="createTime"
         :formatter="dateFormatter"
         width="180px"
       />
       <el-table-column label="操作" align="center" min-width="120px">
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openDetail(scope.row.id)"
-            v-hasPermi="['iot:product:query']"
-          >
-            查看
-          </el-button>
           <el-button
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:device:update']"
+            v-hasPermi="['iot:plugin-info:update']"
           >
             编辑
           </el-button>
@@ -146,10 +100,17 @@
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['iot:device:delete']"
+            v-hasPermi="['iot:plugin-info:delete']"
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="info"
+            @click="viewDetail(scope.row.id)"
+          >
+            详情
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -162,55 +123,92 @@
     />
   </ContentWrap>
 
+  <!-- 卡片视图 -->
+  <ContentWrap v-else>
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <el-card
+        v-for="item in list"
+        :key="item.pluginId"
+        class="cursor-pointer hover:shadow-lg transition-shadow"
+      >
+        <div class="flex items-center mb-4">
+          <div class="flex-1">
+            <div class="font-bold text-lg">{{ item.name }}</div>
+            <div class="text-gray-500 text-sm">组件ID: {{ item.pluginId }}</div>
+          </div>
+        </div>
+        <div class="text-sm text-gray-500">
+          <div>Jar包: {{ item.file }}</div>
+          <div>版本号: {{ item.version }}</div>
+          <div
+            >部署方式: <dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType"
+          /></div>
+          <div>状态: <dict-tag :type="DICT_TYPE.IOT_PLUGIN_STATUS" :value="item.status" /></div>
+        </div>
+        <div class="flex justify-end mt-4">
+          <el-button
+            link
+            type="primary"
+            @click.stop="openForm('update', item.id)"
+            v-hasPermi="['iot:plugin-info:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click.stop="handleDelete(item.id)"
+            v-hasPermi="['iot:plugin-info:delete']"
+          >
+            删除
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
   <!-- 表单弹窗：添加/修改 -->
-  <DeviceForm ref="formRef" @success="getList" />
+  <PluginInfoForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import { DeviceApi, DeviceVO } from '@/api/iot/device'
-import DeviceForm from './DeviceForm.vue'
-import { ProductApi } from '@/api/iot/product'
+import { PluginInfoApi, PluginInfoVO } from '@/api/iot/plugininfo'
+import PluginInfoForm from './PluginInfoForm.vue'
 
-/** IoT 设备 列表 */
-defineOptions({ name: 'IoTDevice' })
+/** IoT 插件信息 列表 */
+defineOptions({ name: 'PluginInfo' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const list = ref<DeviceVO[]>([]) // 列表的数据
+const list = ref<PluginInfoVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  deviceName: undefined,
-  productId: undefined,
-  deviceType: undefined,
-  nickname: undefined,
+  name: undefined,
   status: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-
-/** 产品标号和名称的映射 */
-const productMap = reactive({})
+const viewType = ref<'card' | 'table'>('table') // 视图类型，默认为表格视图
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await DeviceApi.getDevicePage(queryParams)
+    const data = await PluginInfoApi.getPluginInfoPage(queryParams)
     list.value = data.list
     total.value = data.total
-    // 获取产品ID列表
-    const productIds = [...new Set(data.list.map((device) => device.productId))]
-    // 获取产品名称
-    // TODO @haohao：最好后端拼接哈
-    const products = await Promise.all(productIds.map((id) => ProductApi.getProduct(id)))
-    products.forEach((product) => {
-      productMap[product.id] = product.name
-    })
   } finally {
     loading.value = false
   }
@@ -234,34 +232,26 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 打开详情 */
-const { push } = useRouter()
-const openDetail = (id: number) => {
-  push({ name: 'IoTDeviceDetail', params: { id } })
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await DeviceApi.deleteDevice(id)
+    await PluginInfoApi.deletePluginInfo(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
   } catch {}
 }
 
-/** 查询字典下拉列表 */
-const products = ref()
-const getProducts = async () => {
-  products.value = await ProductApi.getSimpleProductList()
+/** 查看详情操作 */
+const viewDetail = (id: number) => {
+  router.push({ path: `/iot/plugininfo/detail/${id}` })
 }
 
 /** 初始化 **/
 onMounted(() => {
   getList()
-  getProducts()
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/iot/product/category/ProductCategoryForm.vue b/src/views/iot/product/category/ProductCategoryForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff7219225115d29e48ffa0a9b9209f35e1edb610
--- /dev/null
+++ b/src/views/iot/product/category/ProductCategoryForm.vue
@@ -0,0 +1,119 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="分类名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入分类名字" />
+      </el-form-item>
+      <el-form-item label="分类排序" prop="sort">
+        <el-input v-model="formData.sort" placeholder="请输入分类排序" />
+      </el-form-item>
+      <el-form-item label="分类状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分类描述" prop="description">
+        <el-input type="textarea" v-model="formData.description" placeholder="请输入分类描述" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
+import { CommonStatusEnum } from '@/utils/constants'
+
+/** IoT 产品分类 表单 */
+defineOptions({ name: 'ProductCategoryForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  sort: 0,
+  status: CommonStatusEnum.ENABLE,
+  description: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '分类名字不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '分类状态不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProductCategoryApi.getProductCategory(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ProductCategoryVO
+    if (formType.value === 'create') {
+      await ProductCategoryApi.createProductCategory(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProductCategoryApi.updateProductCategory(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sort: 0,
+    status: CommonStatusEnum.ENABLE,
+    description: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/iot/product/category/index.vue b/src/views/iot/product/category/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e78262217cd1d5d3ccde49b03d33545759d19871
--- /dev/null
+++ b/src/views/iot/product/category/index.vue
@@ -0,0 +1,170 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="分类名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入分类名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['iot:product-category:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="描述" align="center" prop="description" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['iot:product-category:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['iot:product-category:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ProductCategoryForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
+import ProductCategoryForm from './ProductCategoryForm.vue'
+
+/** IoT 产品分类列表 */
+defineOptions({ name: 'IotProductCategory' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ProductCategoryVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductCategoryApi.getProductCategoryPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProductCategoryApi.deleteProductCategory(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/iot/product/ProductForm.vue b/src/views/iot/product/product/ProductForm.vue
similarity index 61%
rename from src/views/iot/product/ProductForm.vue
rename to src/views/iot/product/product/ProductForm.vue
index 75d6efcc07c5cffefd781cc20e6c1d55a1cbafdf..e4eec67431627a056ebc45e41986ab7ca0e0cd8c 100644
--- a/src/views/iot/product/ProductForm.vue
+++ b/src/views/iot/product/product/ProductForm.vue
@@ -4,28 +4,46 @@
       ref="formRef"
       :model="formData"
       :rules="formRules"
-      label-width="100px"
+      label-width="110px"
       v-loading="formLoading"
     >
+      <el-form-item label="ProductKey" prop="productKey">
+        <el-input
+          v-model="formData.productKey"
+          placeholder="请输入 ProductKey"
+          :readonly="formType === 'update'"
+        >
+          <template #append>
+            <el-button @click="generateProductKey" :disabled="formType === 'update'">
+              重新生成
+            </el-button>
+          </template>
+        </el-input>
+      </el-form-item>
       <el-form-item label="产品名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入产品名称" />
       </el-form-item>
-
-      <el-form-item label="设备类型" prop="deviceType">
-        <el-select
-          v-model="formData.deviceType"
-          placeholder="请选择设备类型"
-          :disabled="formType === 'update'"
-        >
+      <el-form-item label="产品分类" prop="categoryId">
+        <el-select v-model="formData.categoryId" placeholder="请选择产品分类" clearable>
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+            v-for="category in categoryList"
+            :key="category.id"
+            :label="category.name"
+            :value="category.id"
           />
         </el-select>
       </el-form-item>
-
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-radio-group v-model="formData.deviceType" :disabled="formType === 'update'">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item
         v-if="formData.deviceType === 0 || formData.deviceType === 2"
         label="联网方式"
@@ -44,7 +62,6 @@
           />
         </el-select>
       </el-form-item>
-
       <el-form-item v-if="formData.deviceType === 1" label="接入网关协议" prop="protocolType">
         <el-select
           v-model="formData.protocolType"
@@ -59,22 +76,17 @@
           />
         </el-select>
       </el-form-item>
-
       <el-form-item label="数据格式" prop="dataFormat">
-        <el-select
-          v-model="formData.dataFormat"
-          placeholder="请选择接数据格式"
-          :disabled="formType === 'update'"
-        >
-          <el-option
+        <el-radio-group v-model="formData.dataFormat" :disabled="formType === 'update'">
+          <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
             :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
       </el-form-item>
-
       <el-form-item label="数据校验级别" prop="validateType">
         <el-radio-group v-model="formData.validateType" :disabled="formType === 'update'">
           <el-radio
@@ -86,12 +98,20 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-
-      <el-form-item label="产品描述" prop="description">
-        <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
-      </el-form-item>
+      <el-collapse>
+        <el-collapse-item title="更多配置">
+          <el-form-item label="产品图标" prop="icon">
+            <UploadImg v-model="formData.icon" :height="'80px'" :width="'80px'" />
+          </el-form-item>
+          <el-form-item label="产品图片" prop="picUrl">
+            <UploadImg v-model="formData.picUrl" :height="'120px'" :width="'120px'" />
+          </el-form-item>
+          <el-form-item label="产品描述" prop="description">
+            <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
-
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -100,8 +120,11 @@
 </template>
 
 <script setup lang="ts">
-import { ProductApi, ProductVO } from '@/api/iot/product'
+import { ValidateTypeEnum, ProductApi, ProductVO, DataFormatEnum } from '@/api/iot/product/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
+import { UploadImg } from '@/components/UploadFile'
+import { generateRandomStr } from '@/utils'
 
 defineOptions({ name: 'IoTProductForm' })
 
@@ -113,37 +136,44 @@ const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
 const formData = ref({
-  name: undefined,
   id: undefined,
-  productKey: undefined,
-  protocolId: undefined,
+  name: undefined,
+  productKey: '',
   categoryId: undefined,
+  icon: undefined,
+  picUrl: undefined,
   description: undefined,
-  validateType: undefined,
-  status: undefined,
   deviceType: undefined,
   netType: undefined,
   protocolType: undefined,
-  dataFormat: undefined
+  protocolId: undefined,
+  dataFormat: DataFormatEnum.JSON,
+  validateType: ValidateTypeEnum.WEAK
 })
 const formRules = reactive({
+  productKey: [{ required: true, message: 'ProductKey 不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
   deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
   netType: [
     {
-      // TODO @haohao：0、1、/2 最好前端也枚举下；另外，这里的 required 可以直接设置为 true。然后表单那些 v-if。只要不存在，它自动就不校验了哈
-      required: formData.deviceType === 0 || formData.deviceType === 2,
+      required: true,
       message: '联网方式不能为空',
       trigger: 'change'
     }
   ],
   protocolType: [
-    { required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
+    {
+      required: true,
+      message: '接入网关协议不能为空',
+      trigger: 'change'
+    }
   ],
   dataFormat: [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
   validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
 })
 const formRef = ref()
+const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -158,7 +188,12 @@ const open = async (type: string, id?: number) => {
     } finally {
       formLoading.value = false
     }
+  } else {
+    // 新增时，生成随机 productKey
+    generateProductKey()
   }
+  // 加载分类列表
+  categoryList.value = await ProductCategoryApi.getSimpleProductCategoryList()
 }
 defineExpose({ open, close: () => (dialogVisible.value = false) })
 
@@ -186,19 +221,25 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    name: undefined,
     id: undefined,
-    productKey: undefined,
-    protocolId: undefined,
+    name: undefined,
+    productKey: '',
     categoryId: undefined,
+    icon: undefined,
+    picUrl: undefined,
     description: undefined,
-    validateType: undefined,
-    status: undefined,
     deviceType: undefined,
     netType: undefined,
     protocolType: undefined,
-    dataFormat: undefined
+    protocolId: undefined,
+    dataFormat: DataFormatEnum.JSON,
+    validateType: ValidateTypeEnum.WEAK
   }
   formRef.value?.resetFields()
 }
+
+/** 生成 ProductKey */
+const generateProductKey = () => {
+  formData.value.productKey = generateRandomStr(16)
+}
 </script>
diff --git a/src/views/iot/product/detail/ProductDetailsHeader.vue b/src/views/iot/product/product/detail/ProductDetailsHeader.vue
similarity index 80%
rename from src/views/iot/product/detail/ProductDetailsHeader.vue
rename to src/views/iot/product/product/detail/ProductDetailsHeader.vue
index ba009516a22b03d1d28b37d1f91f6a10551b34fb..841aef9f0117816d8a4cda24ac8ce35a828b3b0a 100644
--- a/src/views/iot/product/detail/ProductDetailsHeader.vue
+++ b/src/views/iot/product/product/detail/ProductDetailsHeader.vue
@@ -45,8 +45,8 @@
     </el-descriptions>
     <el-descriptions :column="5" direction="horizontal">
       <el-descriptions-item label="设备数">
-        {{ product.deviceCount }}
-        <el-button @click="goToManagement(product.id)">前往管理</el-button>
+        {{ product.deviceCount ?? '加载中...' }}
+        <el-button @click="goToDeviceList(product.id)">前往管理</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
@@ -54,32 +54,37 @@
   <ProductForm ref="formRef" @success="emit('refresh')" />
 </template>
 <script setup lang="ts">
-import ProductForm from '@/views/iot/product/ProductForm.vue'
-import { ProductApi, ProductVO } from '@/api/iot/product'
+import ProductForm from '@/views/iot/product/product/ProductForm.vue'
+import { ProductApi, ProductVO } from '@/api/iot/product/product'
 
 const message = useMessage()
 
 const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
 
-/** 处理复制 */
-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text).then(() => {
+/** 复制到剪贴板方法 */
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
     message.success('复制成功')
-  })
+  } catch (error) {
+    message.error('复制失败')
+  }
 }
 
 /** 路由跳转到设备管理 */
 const { push } = useRouter()
-const goToManagement = (productId: string) => {
-  push({ name: 'IoTDevice', query: { productId } })
+const goToDeviceList = (productId: number) => {
+  push({ name: 'IoTDevice', params: { productId } })
 }
 
-/** 操作修改 */
+/** 修改操作 */
 const emit = defineEmits(['refresh']) // 定义 Emits
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+
+/** 发布操作 */
 const confirmPublish = async (id: number) => {
   try {
     await ProductApi.updateProductStatus(id, 1)
@@ -90,6 +95,8 @@ const confirmPublish = async (id: number) => {
     message.error('发布失败')
   }
 }
+
+/** 撤销发布操作 */
 const confirmUnpublish = async (id: number) => {
   try {
     await ProductApi.updateProductStatus(id, 0)
diff --git a/src/views/iot/product/detail/ProductDetailsInfo.vue b/src/views/iot/product/product/detail/ProductDetailsInfo.vue
similarity index 81%
rename from src/views/iot/product/detail/ProductDetailsInfo.vue
rename to src/views/iot/product/product/detail/ProductDetailsInfo.vue
index 5153045e70c831e6d8566e79f451169fd5c73ec2..2601fc857651a4831364b0a545f752297b93286d 100644
--- a/src/views/iot/product/detail/ProductDetailsInfo.vue
+++ b/src/views/iot/product/product/detail/ProductDetailsInfo.vue
@@ -3,6 +3,7 @@
     <el-collapse v-model="activeNames">
       <el-descriptions :column="3" title="产品信息">
         <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+        <el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
         <el-descriptions-item label="设备类型">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
         </el-descriptions-item>
@@ -20,11 +21,14 @@
         </el-descriptions-item>
         <el-descriptions-item
           label="联网方式"
-          v-if="product.deviceType === 0 || product.deviceType === 2"
+          v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
         >
           <dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
         </el-descriptions-item>
-        <el-descriptions-item label="接入网关协议" v-if="product.deviceType === 1">
+        <el-descriptions-item
+          label="接入网关协议"
+          v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
+        >
           <dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
         </el-descriptions-item>
         <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
@@ -34,7 +38,7 @@
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
-import { ProductVO } from '@/api/iot/product'
+import { DeviceTypeEnum, ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
 
 const { product } = defineProps<{ product: ProductVO }>()
diff --git a/src/views/iot/product/detail/ProductTopic.vue b/src/views/iot/product/product/detail/ProductTopic.vue
similarity index 92%
rename from src/views/iot/product/detail/ProductTopic.vue
rename to src/views/iot/product/product/detail/ProductTopic.vue
index c327bb65de153c9f8665f69cd4809ccdbc541b0b..a691a614a124e4284510250d1ba7a3d06ea9099d 100644
--- a/src/views/iot/product/detail/ProductTopic.vue
+++ b/src/views/iot/product/product/detail/ProductTopic.vue
@@ -3,9 +3,9 @@
     <el-tabs>
       <el-tab-pane label="基础通信 Topic">
         <Table
-          :columns="columns1"
-          :data="data1"
-          :span-method="createSpanMethod(data1)"
+          :columns="basicColumn"
+          :data="basicData"
+          :span-method="createSpanMethod(basicData)"
           align="left"
           headerAlign="left"
           border="true"
@@ -13,9 +13,9 @@
       </el-tab-pane>
       <el-tab-pane label="物模型通信 Topic">
         <Table
-          :columns="columns2"
-          :data="data2"
-          :span-method="createSpanMethod(data2)"
+          :columns="functionColumn"
+          :data="functionData"
+          :span-method="createSpanMethod(functionData)"
           align="left"
           headerAlign="left"
           border="true"
@@ -25,27 +25,22 @@
   </ContentWrap>
 </template>
 <script setup lang="ts">
-import { ProductVO } from '@/api/iot/product'
+import { ProductVO } from '@/api/iot/product/product'
 
 const props = defineProps<{ product: ProductVO }>()
 
-// 定义列
-const columns1 = reactive([
-  { label: '功能', field: 'function', width: 150 },
-  { label: 'Topic 类', field: 'topicClass', width: 800 },
-  { label: '操作权限', field: 'operationPermission', width: 100 },
-  { label: '描述', field: 'description' }
-])
+// TODO 芋艿：不确定未来会不会改，所以先写死
 
-const columns2 = reactive([
+// 基础通信 Topic 列
+const basicColumn = reactive([
   { label: '功能', field: 'function', width: 150 },
   { label: 'Topic 类', field: 'topicClass', width: 800 },
   { label: '操作权限', field: 'operationPermission', width: 100 },
   { label: '描述', field: 'description' }
 ])
 
-// TODO @haohao：这个，有没可能写到一个枚举里，方便后续维护？ /Users/yunai/Java/yudao-ui-admin-vue3/src/views/ai/utils/constants.ts
-const data1 = computed(() => {
+// 基础通信 Topic 数据
+const basicData = computed(() => {
   if (!props.product || !props.product.productKey) return []
   return [
     {
@@ -147,7 +142,16 @@ const data1 = computed(() => {
   ]
 })
 
-const data2 = computed(() => {
+// 物模型通信 Topic 列
+const functionColumn = reactive([
+  { label: '功能', field: 'function', width: 150 },
+  { label: 'Topic 类', field: 'topicClass', width: 800 },
+  { label: '操作权限', field: 'operationPermission', width: 100 },
+  { label: '描述', field: 'description' }
+])
+
+// 物模型通信 Topic 数据
+const functionData = computed(() => {
   if (!props.product || !props.product.productKey) return []
   return [
     {
diff --git a/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue b/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab7d91e8aecbfa0671757aa0b65e61b885d946f4
--- /dev/null
+++ b/src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-form-item label="数据类型" prop="dataType">
+    <el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
+      <el-option
+        v-for="option in dataTypeOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+  </el-form-item>
+  <!-- 数值型配置 -->
+  <ThingModelNumberTypeDataSpecs
+    v-if="
+      [DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
+        property.dataType || ''
+      )
+    "
+    v-model="property.dataSpecs"
+  />
+  <!-- 枚举型配置 -->
+  <ThingModelEnumTypeDataSpecs
+    v-if="property.dataType === DataSpecsDataType.ENUM"
+    v-model="property.dataSpecsList"
+  />
+  <!-- 布尔型配置 -->
+  <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值" prop="bool">
+    <template v-for="item in property.dataSpecsList" :key="item.value">
+      <div class="flex items-center justify-start w-1/1 mb-5px">
+        <span>{{ item.value }}</span>
+        <span class="mx-2">-</span>
+        <el-input
+          v-model="item.name"
+          :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
+          class="w-255px!"
+        />
+      </div>
+    </template>
+  </el-form-item>
+  <!-- 文本型配置 -->
+  <el-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
+    <el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
+      <template #append>字节</template>
+    </el-input>
+  </el-form-item>
+  <!-- 时间型配置 -->
+  <el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
+    <el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
+  </el-form-item>
+  <!-- 数组型配置-->
+  <ThingModelArrayTypeDataSpecs
+    v-if="property.dataType === DataSpecsDataType.ARRAY"
+    v-model="property.dataSpecs"
+  />
+  <!-- TODO puhui999: Struct 属性待完善 -->
+  <el-form-item label="读写类型" prop="accessMode">
+    <el-radio-group v-model="property.accessMode">
+      <el-radio label="rw">读写</el-radio>
+      <el-radio label="r">只读</el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="属性描述" prop="description">
+    <el-input v-model="property.description" placeholder="请输入属性描述" type="textarea" />
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { DataSpecsDataType, dataTypeOptions } from './config'
+import {
+  ThingModelArrayTypeDataSpecs,
+  ThingModelEnumTypeDataSpecs,
+  ThingModelNumberTypeDataSpecs
+} from './dataSpecs'
+import { ThingModelProperty } from '@/api/iot/thinkmodelfunction'
+
+/** IoT 物模型数据 */
+defineOptions({ name: 'ThingModelDataSpecs' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
+
+/** 属性值的数据类型切换时初始化相关数据 */
+const handleChange = (dataType: any) => {
+  property.value.dataSpecsList = []
+  property.value.dataSpecs = {}
+
+  property.value.dataSpecs.dataType = dataType
+  switch (dataType) {
+    case DataSpecsDataType.ENUM:
+      property.value.dataSpecsList.push({
+        dataType: DataSpecsDataType.ENUM,
+        name: '', // 枚举项的名称
+        value: undefined // 枚举值
+      })
+      break
+    case DataSpecsDataType.BOOL:
+      for (let i = 0; i < 2; i++) {
+        property.value.dataSpecsList.push({
+          dataType: DataSpecsDataType.BOOL,
+          name: '', // 布尔值的名称
+          value: i // 布尔值
+        })
+      }
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/iot/product/detail/ThinkModelFunctionForm.vue b/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
similarity index 40%
rename from src/views/iot/product/detail/ThinkModelFunctionForm.vue
rename to src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
index 895692e00a918ccd7ed8ec49af41b7741e670e7f..5820007287ee770de0b898e09684cb04f2f97028 100644
--- a/src/views/iot/product/detail/ThinkModelFunctionForm.vue
+++ b/src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
@@ -1,87 +1,58 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="100px"
-      v-loading="formLoading"
     >
       <el-form-item label="功能类型" prop="type">
         <el-radio-group v-model="formData.type">
-          <el-radio-button value="1"> 属性 </el-radio-button>
-          <el-radio-button value="2"> 服务 </el-radio-button>
-          <el-radio-button value="3"> 事件 </el-radio-button>
+          <!-- TODO @puhui999：从字典拿 -->
+          <el-radio-button :value="1"> 属性</el-radio-button>
+          <el-radio-button :value="2"> 服务</el-radio-button>
+          <el-radio-button :value="3"> 事件</el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="功能名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入功能名称" />
       </el-form-item>
       <el-form-item label="标识符" prop="identifier">
-        <el-input
-          v-model="formData.identifier"
-          placeholder="请输入标识符"
-          :disabled="formType === 'update'"
-        />
-      </el-form-item>
-      <el-form-item label="数据类型" prop="type">
-        <el-select
-          v-model="formData.property.dataType.type"
-          placeholder="请选择数据类型"
-          :disabled="formType === 'update'"
-        >
-          <el-option key="int" label="int32 (整数型)" value="int" />
-          <el-option key="float" label="float (单精度浮点型)" value="float" />
-          <el-option key="double" label="double (双精度浮点型)" value="double" />
-          <!--          <el-option key="text" label="text (文本型)" value="text" />-->
-          <!--          <el-option key="date" label="date (日期型)" value="date" />-->
-          <!--          <el-option key="bool" label="bool (布尔型)" value="bool" />-->
-          <!--          <el-option key="enum" label="enum (枚举型)" value="enum" />-->
-          <!--          <el-option key="struct" label="struct (结构体)" value="struct" />-->
-          <!--          <el-option key="array" label="array (数组)" value="array" />-->
-        </el-select>
-      </el-form-item>
-      <el-form-item label="取值范围" prop="max">
-        <el-input v-model="formData.property.dataType.specs.min" placeholder="请输入最小值" />
-        <span class="mx-2">~</span>
-        <el-input v-model="formData.property.dataType.specs.max" placeholder="请输入最大值" />
-      </el-form-item>
-      <el-form-item label="步长" prop="step">
-        <el-input v-model="formData.property.dataType.specs.step" placeholder="请输入步长" />
-      </el-form-item>
-      <el-form-item label="单位" prop="unit">
-        <el-input v-model="formData.property.dataType.specs.unit" placeholder="请输入单位" />
-      </el-form-item>
-      <el-form-item label="读写类型" prop="accessMode">
-        <el-radio-group v-model="formData.property.accessMode">
-          <el-radio label="rw">读写</el-radio>
-          <el-radio label="r">只读</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="属性描述" prop="property.description">
-        <el-input
-          type="textarea"
-          v-model="formData.property.description"
-          placeholder="请输入属性描述"
-        />
+        <el-input v-model="formData.identifier" placeholder="请输入标识符" />
       </el-form-item>
+      <!-- 属性配置 -->
+      <ThingModelDataSpecs
+        v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
+        v-model="formData.property"
+      />
     </el-form>
 
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
 
-<script setup lang="ts">
-import { ProductVO } from '@/api/iot/product'
-import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+<script lang="ts" setup>
+import { ProductVO } from '@/api/iot/product/product'
+import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
+import {
+  ProductFunctionTypeEnum,
+  ThingModelData,
+  ThinkModelFunctionApi
+} from '@/api/iot/thinkmodelfunction'
+import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
+import { DataSpecsDataType } from './config'
+import { cloneDeep } from 'lodash-es'
 
-const props = defineProps<{ product: ProductVO }>()
+// TODO @puhui999：这里注释下哈
+defineOptions({ name: 'IoTProductThingModelForm' })
 
-defineOptions({ name: 'ThinkModelFunctionForm' })
+const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
 
+// TODO @puhui999：变量必要的注释哈。 = = 虽然有点啰嗦，但是写下，保持统一；
 const { t } = useI18n()
 const message = useMessage()
 
@@ -89,31 +60,17 @@ const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
-const formData = ref({
-  id: undefined,
-  productId: undefined,
-  productKey: undefined,
-  identifier: undefined,
-  name: undefined,
-  description: undefined,
-  type: '1',
+const formData = ref<ThingModelData>({
+  type: ProductFunctionTypeEnum.PROPERTY,
+  dataType: DataSpecsDataType.INT,
   property: {
-    identifier: undefined,
-    name: undefined,
-    accessMode: 'rw',
-    required: true,
-    dataType: {
-      type: undefined,
-      specs: {
-        min: undefined,
-        max: undefined,
-        step: undefined,
-        unit: undefined
-      }
-    },
-    description: undefined // 添加这一行
+    dataType: DataSpecsDataType.INT,
+    dataSpecs: {
+      dataType: DataSpecsDataType.INT
+    }
   }
 })
+// TODO puhui999: 表单校验待完善
 const formRules = reactive({
   name: [
     { required: true, message: '功能名称不能为空', trigger: 'blur' },
@@ -141,6 +98,8 @@ const formRules = reactive({
               'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
             )
           )
+        } else if (/^\d+$/.test(value)) {
+          callback(new Error('标识符不能是纯数字'))
         } else {
           callback()
         }
@@ -148,12 +107,8 @@ const formRules = reactive({
       trigger: 'blur'
     }
   ],
-  property: {
-    dataType: {
-      type: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }]
-    },
-    accessMode: [{ required: true, message: '读写类型不能为空', trigger: 'blur' }]
-  }
+  'property.dataType.type': [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
+  'property.accessMode': [{ required: true, message: '读写类型不能为空', trigger: 'blur' }]
 })
 const formRef = ref()
 
@@ -166,7 +121,7 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id)
+      formData.value = await ThinkModelFunctionApi.getProductThingModel(id)
     } finally {
       formLoading.value = false
     }
@@ -180,19 +135,24 @@ const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
   try {
-    const data = formData.value as unknown as ThinkModelFunctionVO
-    data.productId = props.product.id
-    data.productKey = props.product.productKey
+    const data = cloneDeep(formData.value) as ThingModelData
+    // 信息补全
+    data.productId = product!.value.id
+    data.productKey = product!.value.productKey
+    data.description = data.property.description
+    data.dataType = data.property.dataType
+    data.property.identifier = data.identifier
+    data.property.name = data.name
     if (formType.value === 'create') {
-      await ThinkModelFunctionApi.createThinkModelFunction(data)
+      await ThinkModelFunctionApi.createProductThingModel(data)
       message.success(t('common.createSuccess'))
     } else {
-      await ThinkModelFunctionApi.updateThinkModelFunction(data)
+      await ThinkModelFunctionApi.updateProductThingModel(data)
       message.success(t('common.updateSuccess'))
     }
+  } finally {
     dialogVisible.value = false // 确保关闭弹框
     emit('success')
-  } finally {
     formLoading.value = false
   }
 }
@@ -200,28 +160,13 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: undefined,
-    productId: undefined,
-    productKey: undefined,
-    identifier: undefined,
-    name: undefined,
-    description: undefined,
-    type: '1', // todo @HAOHAO：看看枚举下
+    type: ProductFunctionTypeEnum.PROPERTY,
+    dataType: DataSpecsDataType.INT,
     property: {
-      identifier: undefined,
-      name: undefined,
-      accessMode: 'rw',
-      required: true,
-      dataType: {
-        type: undefined,
-        specs: {
-          min: undefined,
-          max: undefined,
-          step: undefined,
-          unit: undefined
-        }
-      },
-      description: undefined // 确保重置 description 字段
+      dataType: DataSpecsDataType.INT,
+      dataSpecs: {
+        dataType: DataSpecsDataType.INT
+      }
     }
   }
   formRef.value?.resetFields()
diff --git a/src/views/iot/product/product/detail/ThingModel/config.ts b/src/views/iot/product/product/detail/ThingModel/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb651960259f1f1ee86b63082daa492c40807eba
--- /dev/null
+++ b/src/views/iot/product/product/detail/ThingModel/config.ts
@@ -0,0 +1,50 @@
+/** dataSpecs 数值型数据结构 */
+export interface DataSpecsNumberDataVO {
+  dataType: 'int' | 'float' | 'double' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
+  max: string // 最大值，必须与 dataType 设置一致，且为 STRING 类型
+  min: string // 最小值，必须与 dataType 设置一致，且为 STRING 类型
+  step: string // 步长，必须与 dataType 设置一致，且为 STRING 类型
+  precise?: string // 精度，当 dataType 为 FLOAT 或 DOUBLE 时可选
+  defaultValue?: string // 默认值，可选
+  unit: string // 单位的符号
+  unitName: string // 单位的名称
+}
+
+/** dataSpecs 枚举型数据结构 */
+export interface DataSpecsEnumOrBoolDataVO {
+  dataType: 'enum' | 'bool'
+  defaultValue?: string // 默认值，可选
+  name: string // 枚举项的名称
+  value: number | undefined // 枚举值
+}
+
+/** 属性值的数据类型 */
+export const DataSpecsDataType = {
+  INT: 'int',
+  FLOAT: 'float',
+  DOUBLE: 'double',
+  ENUM: 'enum',
+  BOOL: 'bool',
+  TEXT: 'text',
+  DATE: 'date',
+  STRUCT: 'struct',
+  ARRAY: 'array'
+} as const
+
+/** 物体模型数据类型配置项 */
+export const dataTypeOptions = [
+  { value: DataSpecsDataType.INT, label: 'int32 (整数型)' },
+  { value: DataSpecsDataType.FLOAT, label: 'float (单精度浮点型)' },
+  { value: DataSpecsDataType.DOUBLE, label: 'double (双精度浮点型)' },
+  { value: DataSpecsDataType.ENUM, label: 'enum(枚举型)' },
+  { value: DataSpecsDataType.BOOL, label: 'bool (布尔型)' },
+  { value: DataSpecsDataType.TEXT, label: 'text (文本型)' },
+  { value: DataSpecsDataType.DATE, label: 'date (时间型)' },
+  { value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
+  { value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
+]
+
+/** 获得物体模型数据类型配置项名称 */
+export const getDataTypeOptionsLabel = (value: string) => {
+  return dataTypeOptions.find((option) => option.value === value)?.label
+}
diff --git a/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelArrayTypeDataSpecs.vue b/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelArrayTypeDataSpecs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c48732ef460674c717a9a36e99259ea24bb3ec7b
--- /dev/null
+++ b/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelArrayTypeDataSpecs.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-form-item label="元素类型" prop="childDataType">
+    <el-radio-group v-model="dataSpecs.childDataType">
+      <template v-for="item in dataTypeOptions" :key="item.value">
+        <el-radio
+          :value="item.value"
+          v-if="
+            !(
+              [DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[]
+            ).includes(item.value)
+          "
+        >
+          {{ item.label }}
+        </el-radio>
+      </template>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item label="元素个数" prop="size">
+    <el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { DataSpecsDataType, dataTypeOptions } from '../config'
+
+/** 数组型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelArrayTypeDataSpecs' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelEnumTypeDataSpecs.vue b/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelEnumTypeDataSpecs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af28e11edb9bfc3b34d3716403416adbef6f8333
--- /dev/null
+++ b/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelEnumTypeDataSpecs.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-form-item label="枚举项" prop="enum">
+    <div class="flex flex-col">
+      <div class="flex items-center">
+        <span class="flex-1"> 参数值 </span>
+        <span class="flex-1"> 参数描述 </span>
+      </div>
+      <div
+        v-for="(item, index) in dataSpecsList"
+        :key="index"
+        class="flex items-center justify-between mb-5px"
+      >
+        <el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
+        <span class="mx-2">~</span>
+        <el-input v-model="item.name" placeholder="对该枚举项的描述" />
+        <el-button link type="primary" class="ml-10px" @click="deleteEnum(index)">删除</el-button>
+      </div>
+      <el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
+    </div>
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import {
+  DataSpecsDataType,
+  DataSpecsEnumOrBoolDataVO
+} from '@/views/iot/product/product/detail/ThingModel/config'
+
+/** 枚举型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelEnumTypeDataSpecs' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<DataSpecsEnumOrBoolDataVO[]>
+const message = useMessage()
+
+/** 添加枚举项 */
+const addEnum = () => {
+  dataSpecsList.value.push({
+    dataType: DataSpecsDataType.ENUM,
+    name: '', // 枚举项的名称
+    value: undefined // 枚举值
+  })
+}
+
+/** 删除枚举项 */
+const deleteEnum = (index: number) => {
+  if (dataSpecsList.value.length === 1) {
+    message.warning('至少需要一个枚举项')
+    return
+  }
+  dataSpecsList.value.splice(index, 1)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelNumberTypeDataSpecs.vue b/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelNumberTypeDataSpecs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6dfff8ad7eafeedfe0c0b10ec70b7a2be010a981
--- /dev/null
+++ b/src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelNumberTypeDataSpecs.vue
@@ -0,0 +1,50 @@
+<template>
+  <el-form-item label="取值范围" prop="max">
+    <div class="flex items-center justify-between">
+      <el-input v-model="dataSpecs.min" placeholder="请输入最小值" />
+      <span class="mx-2">~</span>
+      <el-input v-model="dataSpecs.max" placeholder="请输入最大值" />
+    </div>
+  </el-form-item>
+  <el-form-item label="步长" prop="step">
+    <el-input v-model="dataSpecs.step" placeholder="请输入步长" />
+  </el-form-item>
+  <el-form-item label="单位" prop="unit">
+    <el-select
+      :model-value="dataSpecs.unit ? dataSpecs.unitName + '-' + dataSpecs.unit : ''"
+      filterable
+      placeholder="请选择单位"
+      style="width: 240px"
+      @change="unitChange"
+    >
+      <el-option
+        v-for="(item, index) in UnifyUnitSpecsDTO"
+        :key="index"
+        :label="item.Name + '-' + item.Symbol"
+        :value="item.Name + '-' + item.Symbol"
+      />
+    </el-select>
+  </el-form-item>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants'
+import { DataSpecsNumberDataVO } from '../config'
+
+/** 数值型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelNumberTypeDataSpecs' })
+
+const props = defineProps<{ modelValue: any }>()
+const emits = defineEmits(['update:modelValue'])
+const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberDataVO>
+
+/** 单位发生变化时触发 */
+const unitChange = (UnitSpecs: string) => {
+  const [unitName, unit] = UnitSpecs.split('-')
+  dataSpecs.value.unitName = unitName
+  dataSpecs.value.unit = unit
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/iot/product/product/detail/ThingModel/dataSpecs/index.ts b/src/views/iot/product/product/detail/ThingModel/dataSpecs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2e1daafaa996ea49c71e6786360340fcfc22b0e
--- /dev/null
+++ b/src/views/iot/product/product/detail/ThingModel/dataSpecs/index.ts
@@ -0,0 +1,5 @@
+import ThingModelEnumTypeDataSpecs from './ThingModelEnumTypeDataSpecs.vue'
+import ThingModelNumberTypeDataSpecs from './ThingModelNumberTypeDataSpecs.vue'
+import ThingModelArrayTypeDataSpecs from './ThingModelArrayTypeDataSpecs.vue'
+
+export { ThingModelEnumTypeDataSpecs, ThingModelNumberTypeDataSpecs, ThingModelArrayTypeDataSpecs }
diff --git a/src/views/iot/product/detail/ThinkModelFunction.vue b/src/views/iot/product/product/detail/ThingModel/index.vue
similarity index 56%
rename from src/views/iot/product/detail/ThinkModelFunction.vue
rename to src/views/iot/product/product/detail/ThingModel/index.vue
index 5a75d109fb8cc3f49a5c020a3276355bbf2b9a59..38bcd8fda4ef28e0d4ec017ef4f08d1ea15c5ba6 100644
--- a/src/views/iot/product/detail/ThinkModelFunction.vue
+++ b/src/views/iot/product/product/detail/ThingModel/index.vue
@@ -1,19 +1,20 @@
+<!-- TODO 目录，应该是 thinkModel 哈。 -->
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="功能类型" prop="name">
         <el-select
           v-model="queryParams.type"
-          placeholder="请选择功能类型"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择功能类型"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE)"
@@ -24,44 +25,62 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
         <el-button
-          type="primary"
+          v-hasPermi="[`iot:product-thing-model:create`]"
           plain
+          type="primary"
           @click="openForm('create')"
-          v-hasPermi="['iot:think-model-function:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 添加功能
+          <Icon class="mr-5px" icon="ep:plus" />
+          添加功能
         </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
   <ContentWrap>
     <el-tabs>
-      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-        <el-table-column label="功能类型" align="center" prop="type">
+      <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+        <el-table-column align="center" label="功能类型" prop="type">
           <template #default="scope">
             <dict-tag :type="DICT_TYPE.IOT_PRODUCT_FUNCTION_TYPE" :value="scope.row.type" />
           </template>
         </el-table-column>
-        <el-table-column label="功能名称" align="center" prop="name" />
-        <el-table-column label="标识符" align="center" prop="identifier" />
-        <el-table-column label="操作" align="center">
+        <el-table-column align="center" label="功能名称" prop="name" />
+        <el-table-column align="center" label="标识符" prop="identifier" />
+        <el-table-column align="center" label="数据类型" prop="identifier">
+          <template #default="{ row }">
+            {{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="数据定义" prop="identifier">
+          <template #default="{ row }">
+            <!-- TODO puhui999: 数据定义展示待完善 -->
+            {{ row.property.dataSpecs ?? row.property.dataSpecsList }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作">
           <template #default="scope">
             <el-button
+              v-hasPermi="[`iot:product-thing-model:update`]"
               link
               type="primary"
               @click="openForm('update', scope.row.id)"
-              v-hasPermi="[`iot:think-model-function:update`]"
             >
               编辑
             </el-button>
             <el-button
+              v-hasPermi="['iot:product-thing-model:delete']"
               link
               type="danger"
               @click="handleDelete(scope.row.id)"
-              v-hasPermi="['iot:think-model-function:delete']"
             >
               删除
             </el-button>
@@ -70,29 +89,31 @@
       </el-table>
       <!-- 分页 -->
       <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
         v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
         @pagination="getList"
       />
     </el-tabs>
   </ContentWrap>
   <!-- 表单弹窗：添加/修改 -->
-  <ThinkModelFunctionForm ref="formRef" :product="product" @success="getList" />
+  <ThingModelForm ref="formRef" @success="getList" />
 </template>
-<script setup lang="ts">
-import { ProductVO } from '@/api/iot/product'
-import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
+<script lang="ts" setup>
+import { ThingModelData, ThinkModelFunctionApi } from '@/api/iot/thinkmodelfunction'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import ThinkModelFunctionForm from '@/views/iot/product/detail/ThinkModelFunctionForm.vue'
+import ThingModelForm from './ThingModelForm.vue'
+import { ProductVO } from '@/api/iot/product/product'
+import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
+import { getDataTypeOptionsLabel } from '@/views/iot/product/product/detail/ThingModel/config'
 
-const props = defineProps<{ product: ProductVO }>()
+defineOptions({ name: 'IoTProductThingModel' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
-const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据
+const list = ref<ThingModelData[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
@@ -102,13 +123,15 @@ const queryParams = reactive({
 })
 
 const queryFormRef = ref() // 搜索的表单
+const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
+const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    queryParams.productId = props.product.id
-    const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams)
+    queryParams.productId = product?.value?.id || -1
+    const data = await ThinkModelFunctionApi.getProductThingModelPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -140,7 +163,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await ThinkModelFunctionApi.deleteThinkModelFunction(id)
+    await ThinkModelFunctionApi.deleteProductThingModel(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
diff --git a/src/views/iot/product/detail/index.vue b/src/views/iot/product/product/detail/index.vue
similarity index 62%
rename from src/views/iot/product/detail/index.vue
rename to src/views/iot/product/product/detail/index.vue
index 23b66dfdfe50629476dc6132cd1921502951a89f..e30b16365b0cbace4c54b48630a85181a2a9aaab 100644
--- a/src/views/iot/product/detail/index.vue
+++ b/src/views/iot/product/product/detail/index.vue
@@ -8,8 +8,8 @@
       <el-tab-pane label="Topic 类列表" name="topic">
         <ProductTopic v-if="activeTab === 'topic'" :product="product" />
       </el-tab-pane>
-      <el-tab-pane label="功能定义" name="function">
-        <ThinkModelFunction v-if="activeTab === 'function'" :product="product" />
+      <el-tab-pane label="功能定义" lazy name="thingModel">
+        <IoTProductThingModel ref="thingModelRef" />
       </el-tab-pane>
       <el-tab-pane label="消息解析" name="message" />
       <el-tab-pane label="服务端订阅" name="subscription" />
@@ -17,14 +17,15 @@
   </el-col>
 </template>
 <script lang="ts" setup>
-import { ProductApi, ProductVO } from '@/api/iot/product'
-import { DeviceApi } from '@/api/iot/device'
-import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeader.vue'
-import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
-import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
-import ThinkModelFunction from '@/views/iot/product/detail/ThinkModelFunction.vue'
+import { ProductApi, ProductVO } from '@/api/iot/product/product'
+import { DeviceApi } from '@/api/iot/device/device'
+import ProductDetailsHeader from './ProductDetailsHeader.vue'
+import ProductDetailsInfo from './ProductDetailsInfo.vue'
+import ProductTopic from './ProductTopic.vue'
+import IoTProductThingModel from './ThingModel/index.vue'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useRouter } from 'vue-router'
+import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
 
 defineOptions({ name: 'IoTProductDetail' })
 
@@ -33,30 +34,29 @@ const { currentRoute } = useRouter()
 
 const route = useRoute()
 const message = useMessage()
-const id = route.params.id // 编号
+const id = Number(route.params.id) // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductVO>({} as ProductVO) // 详情
-const activeTab = ref('info') // 默认激活的标签页
+const activeTab = ref('info') // 默认为 info 标签页
+
+provide(IOT_PROVIDE_KEY.PRODUCT, product) // 提供产品信息给产品信息详情页的所有子组件
 
 /** 获取详情 */
 const getProductData = async (id: number) => {
   loading.value = true
   try {
     product.value = await ProductApi.getProduct(id)
-    console.log('Product data:', product.value)
   } finally {
     loading.value = false
   }
 }
 
-// 查询设备数量
+/** 查询设备数量 */
 const getDeviceCount = async (productId: number) => {
   try {
-    const count = await DeviceApi.getDeviceCount(productId)
-    console.log('Device count response:', count)
-    return count
+    return await DeviceApi.getDeviceCount(productId)
   } catch (error) {
-    console.error('Error fetching device count:', error)
+    console.error('Error fetching device count:', error, 'productId:', productId)
     return 0
   }
 }
@@ -69,12 +69,14 @@ onMounted(async () => {
     return
   }
   await getProductData(id)
+  // 处理 tab 参数
+  const { tab } = route.query
+  if (tab) {
+    activeTab.value = tab as string
+  }
   // 查询设备数量
   if (product.value.id) {
     product.value.deviceCount = await getDeviceCount(product.value.id)
-    console.log('Device count:', product.value.deviceCount)
-  } else {
-    console.error('Product ID is undefined')
   }
 })
 </script>
diff --git a/src/views/iot/product/product/index.vue b/src/views/iot/product/product/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db61ccfe73ebe16a42d50e644ccb168b24443fb4
--- /dev/null
+++ b/src/views/iot/product/product/index.vue
@@ -0,0 +1,353 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          clearable
+          placeholder="请输入产品名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="ProductKey" prop="productKey">
+        <el-input
+          v-model="queryParams.productKey"
+          class="!w-240px"
+          clearable
+          placeholder="请输入产品标识"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['iot:product:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+        <el-button
+          v-hasPermi="['iot:product:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
+        >
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
+        </el-button>
+      </el-form-item>
+      <!-- 视图切换按钮 -->
+      <el-form-item class="float-right !mr-0 !mb-0">
+        <el-button-group>
+          <el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
+            <Icon icon="ep:grid" />
+          </el-button>
+          <el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
+            <Icon icon="ep:list" />
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 卡片视图 -->
+  <ContentWrap>
+    <el-row v-if="viewMode === 'card'" :gutter="16">
+      <el-col v-for="item in list" :key="item.id" :lg="6" :md="12" :sm="12" :xs="24" class="mb-4">
+        <el-card :body-style="{ padding: '0' }" class="h-full transition-colors">
+          <!-- 内容区域 -->
+          <div class="p-4">
+            <!-- 标题区域 -->
+            <div class="flex items-center mb-3">
+              <div class="mr-2.5 flex items-center">
+                <el-image :src="item.icon || defaultIconUrl" class="w-[35px] h-[35px]" />
+              </div>
+              <div class="text-[16px] font-600">{{ item.name }}</div>
+            </div>
+
+            <!-- 信息区域 -->
+            <div class="flex items-center text-[14px]">
+              <div class="flex-1">
+                <div class="mb-2.5 last:mb-0">
+                  <span class="text-[#717c8e] mr-2.5">产品分类</span>
+                  <span class="text-[#0070ff]">{{ item.categoryName }}</span>
+                </div>
+                <div class="mb-2.5 last:mb-0">
+                  <span class="text-[#717c8e] mr-2.5">产品类型</span>
+                  <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
+                </div>
+                <div class="mb-2.5 last:mb-0">
+                  <span class="text-[#717c8e] mr-2.5">产品标识</span>
+                  <span class="text-[#0b1d30]">{{ item.productKey }}</span>
+                </div>
+              </div>
+              <div class="w-[100px] h-[100px]">
+                <el-image :src="item.picUrl || defaultPicUrl" class="w-full h-full" />
+              </div>
+            </div>
+
+            <!-- 分隔线 -->
+            <el-divider class="!my-3" />
+
+            <!-- 按钮组 -->
+            <div class="flex items-center px-0">
+              <el-button
+                v-hasPermi="['iot:product:update']"
+                class="flex-1 !px-2 !h-[32px] text-[13px]"
+                plain
+                type="primary"
+                @click="openForm('update', item.id)"
+              >
+                <Icon class="mr-1" icon="ep:edit-pen" />
+                编辑
+              </el-button>
+              <el-button
+                class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
+                plain
+                type="warning"
+                @click="openDetail(item.id)"
+              >
+                <Icon class="mr-1" icon="ep:view" />
+                详情
+              </el-button>
+              <el-button
+                class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
+                plain
+                type="success"
+                @click="openObjectModel(item)"
+              >
+                <Icon class="mr-1" icon="ep:scale-to-original" />
+                物模型
+              </el-button>
+              <div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
+              <el-button
+                v-hasPermi="['iot:product:delete']"
+                :disabled="item.status === 1"
+                class="!px-2 !h-[32px] text-[13px]"
+                plain
+                type="danger"
+                @click="handleDelete(item.id)"
+              >
+                <Icon icon="ep:delete" />
+              </el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 列表视图 -->
+    <el-table v-else v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="ID" prop="id" />
+      <el-table-column align="center" label="ProductKey" prop="productKey" />
+      <el-table-column align="center" label="品类" prop="categoryName" />
+      <el-table-column align="center" label="设备类型" prop="deviceType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="产品图标" prop="icon">
+        <template #default="scope">
+          <el-image
+            v-if="scope.row.icon"
+            :preview-src-list="[scope.row.icon]"
+            :src="scope.row.icon"
+            class="w-40px h-40px"
+          />
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="产品图片" prop="picture">
+        <template #default="scope">
+          <el-image
+            v-if="scope.row.picUrl"
+            :preview-src-list="[scope.row.picture]"
+            :src="scope.row.picUrl"
+            class="w-40px h-40px"
+          />
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" label="操作">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['iot:product:query']"
+            link
+            type="primary"
+            @click="openDetail(scope.row.id)"
+          >
+            查看
+          </el-button>
+          <el-button
+            v-hasPermi="['iot:product:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-hasPermi="['iot:product:delete']"
+            :disabled="scope.row.status === 1"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ProductForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import { ProductApi, ProductVO } from '@/api/iot/product/product'
+import ProductForm from './ProductForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+import download from '@/utils/download'
+import defaultPicUrl from '@/assets/imgs/iot/device.png'
+import defaultIconUrl from '@/assets/svgs/iot/cube.svg'
+
+/** iot 产品列表 */
+defineOptions({ name: 'IoTProduct' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter()
+const route = useRoute()
+
+const loading = ref(true) // 列表的加载中
+const activeName = ref('info') // 当前激活的标签页
+const list = ref<ProductVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  productKey: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出加载中
+const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductApi.getProductPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 打开详情 */
+const openDetail = (id: number) => {
+  push({ name: 'IoTProductDetail', params: { id } })
+}
+
+/** 打开物模型 */
+const openObjectModel = (item: ProductVO) => {
+  push({
+    name: 'IoTProductDetail',
+    params: { id: item.id },
+    query: { tab: 'thingModel' }
+  })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProductApi.deleteProduct(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ProductApi.exportProduct(queryParams)
+    download.excel(data, '物联网产品.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+  // 处理 tab 参数
+  const { tab } = route.query
+  if (tab) {
+    activeName.value = tab as string
+  }
+})
+</script>
diff --git a/src/views/iot/utils/constants.ts b/src/views/iot/utils/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e6ef25a8178fe7f84af17c7e0dfa2ee3815fea5f
--- /dev/null
+++ b/src/views/iot/utils/constants.ts
@@ -0,0 +1,535 @@
+/** iot 依赖注入 KEY */
+export const IOT_PROVIDE_KEY = {
+  PRODUCT: 'IOT_PRODUCT'
+}
+// TODO puhui999: 物模型数字数据类型单位类型，后面改成字典获取
+export const UnifyUnitSpecsDTO = [
+  {
+    Symbol: 'L/min',
+    Name: '升每分钟'
+  },
+  {
+    Symbol: 'mg/kg',
+    Name: '毫克每千克'
+  },
+  {
+    Symbol: 'NTU',
+    Name: '浊度'
+  },
+  {
+    Symbol: 'pH',
+    Name: 'PH值'
+  },
+  {
+    Symbol: 'dS/m',
+    Name: '土壤EC值'
+  },
+  {
+    Symbol: 'W/㎡',
+    Name: '太阳总辐射'
+  },
+  {
+    Symbol: 'mm/hour',
+    Name: '降雨量'
+  },
+  {
+    Symbol: 'var',
+    Name: '乏'
+  },
+  {
+    Symbol: 'cP',
+    Name: '厘泊'
+  },
+  {
+    Symbol: 'aw',
+    Name: '饱和度'
+  },
+  {
+    Symbol: 'pcs',
+    Name: '个'
+  },
+  {
+    Symbol: 'cst',
+    Name: '厘斯'
+  },
+  {
+    Symbol: 'bar',
+    Name: '巴'
+  },
+  {
+    Symbol: 'ppt',
+    Name: '纳克每升'
+  },
+  {
+    Symbol: 'ppb',
+    Name: '微克每升'
+  },
+  {
+    Symbol: 'uS/cm',
+    Name: '微西每厘米'
+  },
+  {
+    Symbol: 'N/C',
+    Name: '牛顿每库仑'
+  },
+  {
+    Symbol: 'V/m',
+    Name: '伏特每米'
+  },
+  {
+    Symbol: 'ml/min',
+    Name: '滴速'
+  },
+  {
+    Symbol: 'mmHg',
+    Name: '毫米汞柱'
+  },
+  {
+    Symbol: 'mmol/L',
+    Name: '血糖'
+  },
+  {
+    Symbol: 'mm/s',
+    Name: '毫米每秒'
+  },
+  {
+    Symbol: 'turn/m',
+    Name: '转每分钟'
+  },
+  {
+    Symbol: 'count',
+    Name: '次'
+  },
+  {
+    Symbol: 'gear',
+    Name: '档'
+  },
+  {
+    Symbol: 'stepCount',
+    Name: '步'
+  },
+  {
+    Symbol: 'Nm3/h',
+    Name: '标准立方米每小时'
+  },
+  {
+    Symbol: 'kV',
+    Name: '千伏'
+  },
+  {
+    Symbol: 'kVA',
+    Name: '千伏安'
+  },
+  {
+    Symbol: 'kVar',
+    Name: '千乏'
+  },
+  {
+    Symbol: 'uw/cm2',
+    Name: '微瓦每平方厘米'
+  },
+  {
+    Symbol: '只',
+    Name: '只'
+  },
+  {
+    Symbol: '%RH',
+    Name: '相对湿度'
+  },
+  {
+    Symbol: 'm³/s',
+    Name: '立方米每秒'
+  },
+  {
+    Symbol: 'kg/s',
+    Name: '公斤每秒'
+  },
+  {
+    Symbol: 'r/min',
+    Name: '转每分钟'
+  },
+  {
+    Symbol: 't/h',
+    Name: '吨每小时'
+  },
+  {
+    Symbol: 'KCL/h',
+    Name: '千卡每小时'
+  },
+  {
+    Symbol: 'L/s',
+    Name: '升每秒'
+  },
+  {
+    Symbol: 'Mpa',
+    Name: '兆帕'
+  },
+  {
+    Symbol: 'm³/h',
+    Name: '立方米每小时'
+  },
+  {
+    Symbol: 'kvarh',
+    Name: '千乏时'
+  },
+  {
+    Symbol: 'μg/L',
+    Name: '微克每升'
+  },
+  {
+    Symbol: 'kcal',
+    Name: '千卡路里'
+  },
+  {
+    Symbol: 'GB',
+    Name: '吉字节'
+  },
+  {
+    Symbol: 'MB',
+    Name: '兆字节'
+  },
+  {
+    Symbol: 'KB',
+    Name: '千字节'
+  },
+  {
+    Symbol: 'B',
+    Name: '字节'
+  },
+  {
+    Symbol: 'μg/(d㎡·d)',
+    Name: '微克每平方分米每天'
+  },
+  {
+    Symbol: '',
+    Name: '无'
+  },
+  {
+    Symbol: 'ppm',
+    Name: '百万分率'
+  },
+  {
+    Symbol: 'pixel',
+    Name: '像素'
+  },
+  {
+    Symbol: 'Lux',
+    Name: '照度'
+  },
+  {
+    Symbol: 'grav',
+    Name: '重力加速度'
+  },
+  {
+    Symbol: 'dB',
+    Name: '分贝'
+  },
+  {
+    Symbol: '%',
+    Name: '百分比'
+  },
+  {
+    Symbol: 'lm',
+    Name: '流明'
+  },
+  {
+    Symbol: 'bit',
+    Name: '比特'
+  },
+  {
+    Symbol: 'g/mL',
+    Name: '克每毫升'
+  },
+  {
+    Symbol: 'g/L',
+    Name: '克每升'
+  },
+  {
+    Symbol: 'mg/L',
+    Name: '毫克每升'
+  },
+  {
+    Symbol: 'μg/m³',
+    Name: '微克每立方米'
+  },
+  {
+    Symbol: 'mg/m³',
+    Name: '毫克每立方米'
+  },
+  {
+    Symbol: 'g/m³',
+    Name: '克每立方米'
+  },
+  {
+    Symbol: 'kg/m³',
+    Name: '千克每立方米'
+  },
+  {
+    Symbol: 'nF',
+    Name: '纳法'
+  },
+  {
+    Symbol: 'pF',
+    Name: '皮法'
+  },
+  {
+    Symbol: 'μF',
+    Name: '微法'
+  },
+  {
+    Symbol: 'F',
+    Name: '法拉'
+  },
+  {
+    Symbol: 'Ω',
+    Name: '欧姆'
+  },
+  {
+    Symbol: 'μA',
+    Name: '微安'
+  },
+  {
+    Symbol: 'mA',
+    Name: '毫安'
+  },
+  {
+    Symbol: 'kA',
+    Name: '千安'
+  },
+  {
+    Symbol: 'A',
+    Name: '安培'
+  },
+  {
+    Symbol: 'mV',
+    Name: '毫伏'
+  },
+  {
+    Symbol: 'V',
+    Name: '伏特'
+  },
+  {
+    Symbol: 'ms',
+    Name: '毫秒'
+  },
+  {
+    Symbol: 's',
+    Name: '秒'
+  },
+  {
+    Symbol: 'min',
+    Name: '分钟'
+  },
+  {
+    Symbol: 'h',
+    Name: '小时'
+  },
+  {
+    Symbol: 'day',
+    Name: '日'
+  },
+  {
+    Symbol: 'week',
+    Name: '周'
+  },
+  {
+    Symbol: 'month',
+    Name: '月'
+  },
+  {
+    Symbol: 'year',
+    Name: '年'
+  },
+  {
+    Symbol: 'kn',
+    Name: '节'
+  },
+  {
+    Symbol: 'km/h',
+    Name: '千米每小时'
+  },
+  {
+    Symbol: 'm/s',
+    Name: '米每秒'
+  },
+  {
+    Symbol: '″',
+    Name: '秒'
+  },
+  {
+    Symbol: '′',
+    Name: '分'
+  },
+  {
+    Symbol: '°',
+    Name: '度'
+  },
+  {
+    Symbol: 'rad',
+    Name: '弧度'
+  },
+  {
+    Symbol: 'Hz',
+    Name: '赫兹'
+  },
+  {
+    Symbol: 'μW',
+    Name: '微瓦'
+  },
+  {
+    Symbol: 'mW',
+    Name: '毫瓦'
+  },
+  {
+    Symbol: 'kW',
+    Name: '千瓦特'
+  },
+  {
+    Symbol: 'W',
+    Name: '瓦特'
+  },
+  {
+    Symbol: 'cal',
+    Name: '卡路里'
+  },
+  {
+    Symbol: 'kW·h',
+    Name: '千瓦时'
+  },
+  {
+    Symbol: 'Wh',
+    Name: '瓦时'
+  },
+  {
+    Symbol: 'eV',
+    Name: '电子伏'
+  },
+  {
+    Symbol: 'kJ',
+    Name: '千焦'
+  },
+  {
+    Symbol: 'J',
+    Name: '焦耳'
+  },
+  {
+    Symbol: '℉',
+    Name: '华氏度'
+  },
+  {
+    Symbol: 'K',
+    Name: '开尔文'
+  },
+  {
+    Symbol: 't',
+    Name: '吨'
+  },
+  {
+    Symbol: '°C',
+    Name: '摄氏度'
+  },
+  {
+    Symbol: 'mPa',
+    Name: '毫帕'
+  },
+  {
+    Symbol: 'hPa',
+    Name: '百帕'
+  },
+  {
+    Symbol: 'kPa',
+    Name: '千帕'
+  },
+  {
+    Symbol: 'Pa',
+    Name: '帕斯卡'
+  },
+  {
+    Symbol: 'mg',
+    Name: '毫克'
+  },
+  {
+    Symbol: 'g',
+    Name: '克'
+  },
+  {
+    Symbol: 'kg',
+    Name: '千克'
+  },
+  {
+    Symbol: 'N',
+    Name: '牛'
+  },
+  {
+    Symbol: 'mL',
+    Name: '毫升'
+  },
+  {
+    Symbol: 'L',
+    Name: '升'
+  },
+  {
+    Symbol: 'mm³',
+    Name: '立方毫米'
+  },
+  {
+    Symbol: 'cm³',
+    Name: '立方厘米'
+  },
+  {
+    Symbol: 'km³',
+    Name: '立方千米'
+  },
+  {
+    Symbol: 'm³',
+    Name: '立方米'
+  },
+  {
+    Symbol: 'h㎡',
+    Name: '公顷'
+  },
+  {
+    Symbol: 'c㎡',
+    Name: '平方厘米'
+  },
+  {
+    Symbol: 'm㎡',
+    Name: '平方毫米'
+  },
+  {
+    Symbol: 'k㎡',
+    Name: '平方千米'
+  },
+  {
+    Symbol: '㎡',
+    Name: '平方米'
+  },
+  {
+    Symbol: 'nm',
+    Name: '纳米'
+  },
+  {
+    Symbol: 'μm',
+    Name: '微米'
+  },
+  {
+    Symbol: 'mm',
+    Name: '毫米'
+  },
+  {
+    Symbol: 'cm',
+    Name: '厘米'
+  },
+  {
+    Symbol: 'dm',
+    Name: '分米'
+  },
+  {
+    Symbol: 'km',
+    Name: '千米'
+  },
+  {
+    Symbol: 'm',
+    Name: '米'
+  }
+]
diff --git a/src/views/project/category/CategoryForm.vue b/src/views/project/category/CategoryForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f0740d611b871732bc9b185815dac20c1166cf6
--- /dev/null
+++ b/src/views/project/category/CategoryForm.vue
@@ -0,0 +1,117 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="父级编号" prop="parentId">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="categoryTree"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请选择父级编号"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { CategoryApi, CategoryVO } from '@/api/project/category'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+/** 项目分类 表单 */
+defineOptions({ name: 'CategoryForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  parentId: undefined,
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+const categoryTree = ref() // 树形结构
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CategoryApi.getCategory(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  await getCategoryTree()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CategoryVO
+    if (formType.value === 'create') {
+      await CategoryApi.createCategory(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CategoryApi.updateCategory(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    parentId: undefined,
+  }
+  formRef.value?.resetFields()
+}
+
+/** 获得项目分类树 */
+const getCategoryTree = async () => {
+  categoryTree.value = []
+  const data = await CategoryApi.getCategoryList([])
+  const root: Tree = { id: 0, name: '顶级项目分类', children: [] }
+  root.children = handleTree(data, 'id', 'parentId')
+  categoryTree.value.push(root)
+}
+</script>
diff --git a/src/views/project/category/index.vue b/src/views/project/category/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1bab3ffa3a0f87fad69ef6846b221d5ef6655a0b
--- /dev/null
+++ b/src/views/project/category/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="编号" prop="id">
+        <el-input
+          v-model="queryParams.id"
+          placeholder="请输入编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="父级编号" prop="parentId">
+        <el-input
+          v-model="queryParams.parentId"
+          placeholder="请输入父级编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['project:category:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['project:category:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button type="danger" plain @click="toggleExpandAll">
+          <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      v-if="refreshTable"
+    >
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="父级编号" align="center" prop="parentId" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['project:category:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['project:category:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CategoryForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import { handleTree } from '@/utils/tree'
+import download from '@/utils/download'
+import { CategoryApi, CategoryVO } from '@/api/project/category'
+import CategoryForm from './CategoryForm.vue'
+
+/** 项目分类 列表 */
+defineOptions({ name: 'Category' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<CategoryVO[]>([]) // 列表的数据
+const queryParams = reactive({
+  id: undefined,
+  name: undefined,
+  parentId: undefined,
+  createTime: [],
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CategoryApi.getCategoryList(queryParams)
+    list.value = handleTree(data, 'id', 'parentId')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CategoryApi.deleteCategory(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await CategoryApi.exportCategory(queryParams)
+    download.excel(data, '项目分类.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 展开/折叠操作 */
+const isExpandAll = ref(true) // 是否展开，默认全部展开
+const refreshTable = ref(true) // 重新渲染表格状态
+const toggleExpandAll = async () => {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  await nextTick()
+  refreshTable.value = true
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/src/views/project/model/CategoryTree.vue b/src/views/project/model/CategoryTree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3caae95efe1f8c6086198d05351e5d7297be299e
--- /dev/null
+++ b/src/views/project/model/CategoryTree.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入项目分类名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="deptList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import * as ProjectCategoryApi from '@/api/project/category'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'ProjectCategoryTree' })
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await ProjectCategoryApi.CategoryApi.getCategoryList([])
+  deptList.value = []
+  deptList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>
diff --git a/src/views/project/model/ModelForm.vue b/src/views/project/model/ModelForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2f2beb22d522bfabbed34e96263b32f441c778a
--- /dev/null
+++ b/src/views/project/model/ModelForm.vue
@@ -0,0 +1,142 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="项目编号" prop="number">
+        <el-input v-model="formData.number" placeholder="请输入项目编号" />
+      </el-form-item>
+      <el-form-item label="项目名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入项目名称" />
+      </el-form-item>
+      <el-form-item label="计划工期" prop="planDuration">
+        <el-input v-model="formData.planDuration" placeholder="请输入计划工期" />
+      </el-form-item>
+      <el-form-item label="父级编号" prop="parentId">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="categoryTree"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请选择父级编号"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="note">
+        <el-input v-model="formData.note" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ModelApi, ModelVO } from '@/api/project/model'
+import { CategoryApi } from '@/api/project/category'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+/** 项目模板 表单 */
+defineOptions({ name: 'ModelForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const categoryTree = ref() // 树形结构
+const formData = ref({
+  id: undefined,
+  number: undefined,
+  name: undefined,
+  planDuration: undefined,
+  parentId: undefined,
+  note: undefined,
+})
+const formRules = reactive({
+  number: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
+  scheduledStartTime: [{ required: true, message: '计划开始时间不能为空', trigger: 'blur' }],
+  scheduledEndTime: [{ required: true, message: '计划结束时间不能为空', trigger: 'blur' }],
+  planDuration: [{ required: true, message: '计划工期不能为空', trigger: 'blur' }],
+  actualDuration: [{ required: true, message: '实际工期不能为空', trigger: 'blur' }],
+  progress: [{ required: true, message: '进度不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ModelApi.getModel(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  await getCategoryTree()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ModelVO
+    // 拼接子表的数据
+    data["modelInputs"] = []
+    data["modelOutputs"] = []
+    if (formType.value === 'create') {
+      await ModelApi.createModel(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ModelApi.updateModel(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    number: undefined,
+    name: undefined,
+    planDuration: undefined,
+    parentId: undefined,
+    note: undefined
+  }
+  formRef.value?.resetFields()
+}
+/** 获得项目分类树 */
+const getCategoryTree = async () => {
+  categoryTree.value = []
+  const data = await CategoryApi.getCategoryList([])
+  const root: Tree = { id: 0, name: '顶级项目分类', children: [] }
+  root.children = handleTree(data, 'id', 'parentId')
+  categoryTree.value.push(root)
+}
+
+</script>
diff --git a/src/views/project/model/detail/ProjectTree.vue b/src/views/project/model/detail/ProjectTree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..75ac97c1ea3cdf7742b9528b8ba432d0b2602416
--- /dev/null
+++ b/src/views/project/model/detail/ProjectTree.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="head-container">
+    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入任务名称">
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+  </div>
+  <div class="head-container">
+    <el-tree
+      ref="treeRef"
+      :data="projectList"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      default-expand-all
+      highlight-current
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTree } from 'element-plus'
+import { ModelApi } from '@/api/project/model'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'ProjectTree' })
+
+const deptName = ref('')
+const projectList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+  const res = await ModelApi.getModelList([])
+  projectList.value = []
+  projectList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+  if (!name) return true
+  return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
+/** 初始化 */
+onMounted(async () => {
+  await getTree()
+})
+</script>
diff --git a/src/views/project/model/detail/index.vue b/src/views/project/model/detail/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6448135b06ae7f9a06dc15c24b9419efa1f7fe65
--- /dev/null
+++ b/src/views/project/model/detail/index.vue
@@ -0,0 +1,150 @@
+<template>
+
+  <el-row :gutter="20">
+    <!-- 左侧部门树 -->
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <ProjectTree @node-click="handleCategoryNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+
+      <!-- 列表 -->
+      <ContentWrap>
+        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+          <el-table-column label="项目编号" align="center" prop="number" />
+          <el-table-column label="项目名称" align="center" prop="name" />
+          <el-table-column label="计划工期" align="center" prop="planDuration" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PROJECT_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column label="生命周期阶段" align="center" prop="phase">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PROJECT_PHASE" :value="scope.row.phase" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="120px">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="handleDesign(scope.row)"
+                v-hasPermi="['project:model:update']"
+              >
+                设计
+              </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['project:model:update']"
+              >
+                编辑
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['project:model:delete']"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </el-col>
+  </el-row>
+
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { ModelApi, ModelVO } from '@/api/project/model'
+import ProjectTree from "./ProjectTree.vue";
+
+
+/** 项目模板 列表 */
+defineOptions({ name: 'Model' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const loading = ref(true) // 列表的加载中
+const list = ref<ModelVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  parentId:undefined,
+  number: undefined,
+  name: undefined,
+  planDuration: undefined,
+  status: undefined,
+  phase: undefined,
+})
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+
+  push({
+    name: 'ProjectDetail',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+
+/** 处理分类被点击 */
+const handleCategoryNodeClick = async (row) => {
+  queryParams.parentId = row.id
+  await getList()
+}
+
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/project/model/index.vue b/src/views/project/model/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fa52e152c9d24c7b425e393137a4e241cf6932e1
--- /dev/null
+++ b/src/views/project/model/index.vue
@@ -0,0 +1,274 @@
+<template>
+
+  <el-row :gutter="20">
+    <!-- 左侧部门树 -->
+    <el-col :span="4" :xs="24">
+      <ContentWrap class="h-1/1">
+        <CategoryTree @node-click="handleCategoryNodeClick" />
+      </ContentWrap>
+    </el-col>
+    <el-col :span="20" :xs="24">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="100px"
+        >
+          <el-form-item label="项目编号" prop="number">
+            <el-input
+              v-model="queryParams.number"
+              placeholder="请输入项目编号"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item label="项目名称" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入项目名称"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item label="计划工期" prop="planDuration">
+            <el-input
+              v-model="queryParams.planDuration"
+              placeholder="请输入计划工期"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="请选择状态"
+              clearable
+              class="!w-220px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.PROJECT_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="生命周期阶段" prop="phase">
+            <el-select
+              v-model="queryParams.phase"
+              placeholder="请选择生命周期阶段"
+              clearable
+              class="!w-220px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.PROJECT_PHASE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['project:model:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> 新增
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['project:model:export']"
+            >
+              <Icon icon="ep:download" class="mr-5px" /> 导出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <!-- 列表 -->
+      <ContentWrap>
+        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+          <el-table-column label="项目编号" align="center" prop="number" />
+          <el-table-column label="项目名称" align="center" prop="name" />
+          <el-table-column label="计划工期" align="center" prop="planDuration" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PROJECT_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column label="生命周期阶段" align="center" prop="phase">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PROJECT_PHASE" :value="scope.row.phase" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="120px">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="handleDesign(scope.row)"
+                v-hasPermi="['project:model:update']"
+              >
+                设计
+              </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['project:model:update']"
+              >
+                编辑
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['project:model:delete']"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </el-col>
+  </el-row>
+
+
+
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ModelForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import download from '@/utils/download'
+import { ModelApi, ModelVO } from '@/api/project/model'
+import ModelForm from './ModelForm.vue'
+import CategoryTree from "./CategoryTree.vue";
+
+
+/** 项目模板 列表 */
+defineOptions({ name: 'Model' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const loading = ref(true) // 列表的加载中
+const list = ref<ModelVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  parentId:undefined,
+  number: undefined,
+  name: undefined,
+  planDuration: undefined,
+  status: undefined,
+  phase: undefined,
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+
+  push({
+    name: 'ProjectDetail',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+
+/** 处理分类被点击 */
+const handleCategoryNodeClick = async (row) => {
+  queryParams.parentId = row.id
+  await getList()
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ModelApi.exportModel(queryParams)
+    download.excel(data, '项目模板.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/vite.config.ts b/vite.config.ts
index f55aa924147936fd9e9648cf6940d7497602d38f..7e15f84e21532a65fb1e1fb0caf18f711e809f39 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,7 +44,8 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
             preprocessorOptions: {
                 scss: {
                     additionalData: '@use "@/styles/variables.scss" as *;',
-                    // javascriptEnabled: true
+                    javascriptEnabled: true,
+                    silenceDeprecations: ["legacy-js-api"], // 参考自 https://stackoverflow.com/questions/78997907/the-legacy-js-api-is-deprecated-and-will-be-removed-in-dart-sass-2-0-0
                 }
             }
         },