refactor:【antd】【iot】重构设备详情页面，优化组件结构与路径，优化设备配置、属性、事件管理等功能

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

@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotProductCategoryApi } from '#/api/iot/product/category';
 import type { IotProductApi } from '#/api/iot/product/product';
 
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -67,6 +67,17 @@ function handleRefresh() {
   gridApi.query();
 }
 
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return; // 如果已经是目标视图，不需要切换
+  }
+  viewMode.value = mode;
+  // 等待视图更新后再触发查询
+  await nextTick();
+  gridApi.query();
+}
+
 /** 导出表格 */
 async function handleExport() {
   const data = await exportProduct(queryParams.value);
@@ -220,13 +231,13 @@ onMounted(() => {
         <Space :size="4">
           <Button
             :type="viewMode === 'card' ? 'primary' : 'default'"
-            @click="viewMode = 'card'"
+            @click="handleViewModeChange('card')"
           >
             <IconifyIcon icon="ant-design:appstore-outlined" />
           </Button>
           <Button
             :type="viewMode === 'list' ? 'primary' : 'default'"
-            @click="viewMode = 'list'"
+            @click="handleViewModeChange('list')"
           >
             <IconifyIcon icon="ant-design:unordered-list-outlined" />
           </Button>