From 78c7cff383f3663cb34302645d69a1b51bfeea21 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Thu, 18 Sep 2025 09:35:51 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=92=8C=E4=BA=A7=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 defineAsyncComponent 实现异步组件加载
- 在产品详情页添加 Metadata 组件预取
- 优化标签页 active-key绑定方式
---
 .../src/views/device/device/detail/index.vue  | 20 ++++--
 .../src/views/device/product/detail/index.vue | 63 +++++++++++++++++--
 2 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/apps/web-antd/src/views/device/device/detail/index.vue b/apps/web-antd/src/views/device/device/detail/index.vue
index 0a64174..6463b87 100644
--- a/apps/web-antd/src/views/device/device/detail/index.vue
+++ b/apps/web-antd/src/views/device/device/detail/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed, defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
@@ -12,10 +12,18 @@ import { deviceStateOptions } from '#/constants/dicts';
 import { useDeviceStore } from '#/store/device';
 import { getWebSocket } from '#/utils/websocket';
 
-import BasicInfo from './components/BasicInfo.vue';
-import DeviceSimulation from './components/DeviceSimulation.vue';
-import LogManagement from './components/LogManagement.vue';
-import RunningStatus from './components/RunningStatus.vue';
+const BasicInfo = defineAsyncComponent(
+  () => import('./components/BasicInfo.vue'),
+);
+const DeviceSimulation = defineAsyncComponent(
+  () => import('./components/DeviceSimulation.vue'),
+);
+const LogManagement = defineAsyncComponent(
+  () => import('./components/LogManagement.vue'),
+);
+const RunningStatus = defineAsyncComponent(
+  () => import('./components/RunningStatus.vue'),
+);
 
 const route = useRoute();
 const router = useRouter();
@@ -207,7 +215,7 @@ onUnmounted(() => {
 
       <!-- 标签页内容 -->
       <Tabs
-        v-model:active-key="activeTab"
+        :active-key="activeTab"
         class="detail-tabs"
         @change="handleTabChange"
         :destroy-inactive-tab-pane="true"
diff --git a/apps/web-antd/src/views/device/product/detail/index.vue b/apps/web-antd/src/views/device/product/detail/index.vue
index 7e6ebb9..e066910 100644
--- a/apps/web-antd/src/views/device/product/detail/index.vue
+++ b/apps/web-antd/src/views/device/product/detail/index.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import {
+  computed,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 
 import { ArrowLeftOutlined } from '@ant-design/icons-vue';
-import { Image, message, Modal, Switch, TabPane, Tabs } from 'ant-design-vue';
+import {
+  Image,
+  message,
+  Modal,
+  Spin,
+  Switch,
+  TabPane,
+  Tabs,
+} from 'ant-design-vue';
 
 import {
   productPushMetadataById,
@@ -13,9 +28,35 @@ import {
 } from '#/api/device/product';
 import { useProductStore } from '#/store/product';
 
-import BasicInfo from './components/BasicInfo.vue';
-import DeviceAccess from './components/DeviceAccess.vue';
-import Metadata from './components/Metadata.vue';
+const BasicInfo = defineAsyncComponent(
+  () => import('./components/BasicInfo.vue'),
+);
+const DeviceAccess = defineAsyncComponent(
+  () => import('./components/DeviceAccess.vue'),
+);
+
+// Metadata 异步组件：loading 占位 + 预取
+const MetadataLoading = defineComponent({
+  name: 'MetadataLoading',
+  setup() {
+    return () =>
+      h(
+        'div',
+        {
+          style:
+            'display:flex;align-items:center;justify-content:center;padding:24px;',
+        },
+        [h(Spin, { tip: '正在加载物模型...' })],
+      );
+  },
+});
+const loadMetadataAsync = () =>
+  import(/* webpackPrefetch: true */ './components/Metadata.vue');
+const Metadata = defineAsyncComponent({
+  loader: loadMetadataAsync,
+  loadingComponent: MetadataLoading,
+  delay: 200,
+});
 
 const route = useRoute();
 const router = useRouter();
@@ -32,6 +73,16 @@ const loadProductInfo = async () => {
     // TODO: 这里需要添加获取设备数量的逻辑
     // 暂时设置为 0
     productStore.setDeviceCount(0);
+    // 空闲时预取 Metadata 代码，减少首次切换等待
+    if (activeTab.value !== 'Metadata') {
+      const idle = (cb: () => void) =>
+        (window as any).requestIdleCallback
+          ? (window as any).requestIdleCallback(cb)
+          : setTimeout(cb, 200);
+      idle(() => {
+        loadMetadataAsync().catch(() => undefined);
+      });
+    }
   } catch {
     message.error('加载产品信息失败');
   }
@@ -154,7 +205,7 @@ onUnmounted(() => {
 
       <!-- 标签页内容 -->
       <Tabs
-        v-model:active-key="activeTab"
+        :active-key="activeTab"
         class="detail-tabs"
         @change="handleTabChange"
       >