fix(@vben/web-antd): 修复设备详情客流数据不显示的问题

使用 watch 监听 trafficData 变化后再渲染 ECharts 图表，
解决 v-if 切换 DOM 后 chartRef 未就绪导致图表不渲染的时序问题。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web-antd/src/views/ops/area-device/modules/device-detail-drawer.vue

@@ -5,7 +5,7 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { OpsAreaApi } from '#/api/ops/area';
 import type { DeviceTrafficRealtimeResp } from '#/api/ops/traffic';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -59,6 +59,14 @@ const trafficData = ref<DeviceTrafficRealtimeResp | null>(null);
 const hourlyChartRef = ref();
 const { renderEcharts: renderHourlyChart } = useEcharts(hourlyChartRef);
 
+// Watch trafficData: render chart after DOM is ready (v-if toggle needs extra tick)
+watch(trafficData, async (val) => {
+  if (val) {
+    await nextTick();
+    renderHourlyChart(getHourlyChartOptions());
+  }
+});
+
 function getHourlyChartOptions(): ECOption {
   const data = trafficData.value;
   if (!data?.hourlyTrend?.hours?.length) return {};
@@ -237,10 +245,10 @@ async function loadDeviceDetail(deviceId: number, relationType: string) {
     let realtimePromise: Promise<void>;
     if (relationType === 'TRAFFIC_COUNTER') {
       realtimePromise = getDeviceRealtime(deviceId)
-        .then(async (data) => {
-          trafficData.value = data;
-          await nextTick();
-          renderHourlyChart(getHourlyChartOptions());
+        .then((data) => {
+          if (data && data.hourlyTrend) {
+            trafficData.value = data;
+          }
         })
         .catch(() => {});
     } else if (relationType === 'BADGE') {
@@ -280,9 +288,10 @@ async function handleRefreshRealtime() {
   const { deviceId, relationType } = relation.value;
   try {
     if (relationType === 'TRAFFIC_COUNTER') {
-      trafficData.value = await getDeviceRealtime(deviceId);
-      await nextTick();
-      renderHourlyChart(getHourlyChartOptions());
+      const data = await getDeviceRealtime(deviceId);
+      if (data && data.hourlyTrend) {
+        trafficData.value = data;
+      }
     } else if (relationType === 'BADGE') {
       const data = await getLatestDeviceProperties({ deviceId });
       const propMap: Record<string, BadgePropItem> = {};