review：【antd】【iot】设备管理相关

apps/web-antd/src/api/iot/device/device/index.ts

@@ -4,6 +4,7 @@ import { requestClient } from '#/api/request';
 
 export namespace IotDeviceApi {
   /** 设备新增/修改 Request VO */
+  // TODO @haohao：可以降低一些 VO 哈：DeviceSaveReqVO、DeviceRespVO 合并成 Device 就好，类似别的模块
   export interface DeviceSaveReqVO {
     id?: number; // 设备编号
     deviceName: string; // 设备名称
@@ -26,6 +27,7 @@ export namespace IotDeviceApi {
   }
 
   /** 设备分页 Request VO */
+  // TODO @haohao：可以不用 DevicePageReqVO，直接 PageParam 即可，简洁一点。这里的强类型，收益不大；
   export interface DevicePageReqVO extends PageParam {
     deviceName?: string; // 设备名称
     nickname?: string; // 备注名称

apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue

@@ -24,16 +24,12 @@ interface Props {
 const props = defineProps<Props>();
 const router = useRouter();
 
-/** 产品列表 */
-const products = ref<IotProductApi.Product[]>([]);
-
-/** 查询参数 */
+const products = ref<IotProductApi.Product[]>([]); // 产品列表
 const queryParams = reactive({
   deviceName: '',
   status: undefined as number | undefined,
-});
+}); // 查询参数
 
-/** Grid 列定义 */
 function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
@@ -76,7 +72,6 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
-/** 创建 Grid 实例 */
 const [Grid, gridApi] = useVbenVxeGrid<IotDeviceApi.DeviceRespVO>({
   gridOptions: {
     columns: useGridColumns(),
@@ -164,6 +159,7 @@ onMounted(async () => {
 <template>
   <Page auto-content-height>
     <!-- 搜索区域 -->
+    <!-- TODO @haohao：这个 search 能不能融合到 Grid 里； -->
     <div class="mb-4 flex flex-wrap items-center gap-3">
       <Input
         v-model:value="queryParams.deviceName"
@@ -200,12 +196,9 @@ onMounted(async () => {
 
     <!-- 子设备列表 -->
     <Grid>
-      <!-- 所属产品列 -->
       <template #product="{ row }">
         {{ getProductName(row.productId) }}
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/iot/device/device/index.vue

@@ -117,7 +117,7 @@ async function handleExport() {
   const data = await exportDeviceExcel({
     ...queryParams.value,
     pageNo: 1,
-    pageSize: 999999,
+    pageSize: 999_999,
   } as IotDeviceApi.DevicePageReqVO);
   downloadFileFromBlobPart({ fileName: '物联网设备.xls', source: data });
 }
@@ -414,7 +414,6 @@ onMounted(async () => {
             },
           ]"
         />
-
         <!-- 视图切换 -->
         <Space :size="4">
           <Button
@@ -433,8 +432,8 @@ onMounted(async () => {
       </div>
     </Card>
 
+    <!-- 列表视图 -->
     <Grid table-title="设备列表" v-show="viewMode === 'list'">
-      <!-- 所属产品列 -->
       <template #product="{ row }">
         <a
           class="cursor-pointer text-primary"
@@ -443,8 +442,6 @@ onMounted(async () => {
           {{ products.find((p) => p.id === row.productId)?.name || '-' }}
         </a>
       </template>
-
-      <!-- 所属分组列 -->
       <template #groups="{ row }">
         <template v-if="row.groupIds?.length">
           <Tag
@@ -458,8 +455,6 @@ onMounted(async () => {
         </template>
         <span v-else>-</span>
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/iot/device/device/modules/form.vue

@@ -118,6 +118,7 @@ const [Modal, modalApi] = useVbenModal({
     const data = modalApi.getData<IotDeviceApi.DeviceRespVO>();
     if (!data || !data.id) {
       // 新增：确保 Collapse 折叠
+      // TODO @haohao：是不是 activeKey 在上面的 112 到 115 就已经处理了哈；
       activeKey.value = [];
       return;
     }
@@ -127,6 +128,7 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = await getDevice(data.id);
       await formApi.setValues(formData.value);
       // 如果存在高级字段数据，自动展开 Collapse
+      // TODO @haohao：默认不用展开哈；
       if (
         formData.value?.nickname ||
         formData.value?.picUrl ||