From c38d746c25faa439b2c65d0a5f5753ca93825609 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 21 Nov 2025 09:17:19 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90i?=
 =?UTF-8?q?ot=E3=80=91=E9=A6=96=E9=A1=B5=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/iot/statistics/index.ts              | 6 ++++--
 apps/web-antd/src/views/iot/home/chart-options.ts          | 5 ++---
 apps/web-antd/src/views/iot/home/data.ts                   | 1 +
 apps/web-antd/src/views/iot/home/index.vue                 | 4 +---
 .../src/views/iot/home/modules/comparison-card.vue         | 3 +++
 .../src/views/iot/home/modules/device-count-card.vue       | 7 ++++++-
 .../src/views/iot/home/modules/device-state-count-card.vue | 7 ++++++-
 .../src/views/iot/home/modules/message-trend-card.vue      | 6 ++++++
 8 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/apps/web-antd/src/api/iot/statistics/index.ts b/apps/web-antd/src/api/iot/statistics/index.ts
index 588eefcc4..9f3a04266 100644
--- a/apps/web-antd/src/api/iot/statistics/index.ts
+++ b/apps/web-antd/src/api/iot/statistics/index.ts
@@ -1,7 +1,8 @@
 import { requestClient } from '#/api/request';
 
 export namespace IotStatisticsApi {
-  /** IoT 统计摘要数据 */
+  // TODO @haohao：需要跟后端对齐，必要的 ReqVO、RespVO
+  /** 统计摘要数据 */
   export interface StatisticsSummary {
     productCategoryCount: number;
     productCount: number;
@@ -22,7 +23,7 @@ export namespace IotStatisticsApi {
     [key: string]: number;
   }
 
-  /** IoT 消息统计数据类型 */
+  /** 消息统计数据类型 */
   export interface DeviceMessageSummary {
     statType: number;
     upstreamCounts: TimeValueItem[];
@@ -60,6 +61,7 @@ export function getDeviceMessageSummaryByDate(
   );
 }
 
+// TODO @haohao：貌似这里，没用到？是不是后面哪里用，或者可以删除哈？
 /** 获取设备消息统计摘要 */
 export function getDeviceMessageSummary(statType: number) {
   return requestClient.get<IotStatisticsApi.DeviceMessageSummary>(
diff --git a/apps/web-antd/src/views/iot/home/chart-options.ts b/apps/web-antd/src/views/iot/home/chart-options.ts
index e989538e0..2d481a69e 100644
--- a/apps/web-antd/src/views/iot/home/chart-options.ts
+++ b/apps/web-antd/src/views/iot/home/chart-options.ts
@@ -1,6 +1,5 @@
-/**
- * 设备数量饼图配置
- */
+/** 设备数量饼图配置 */
+// TODO @haohao：貌似没用到？？
 export function getDeviceCountChartOptions(
   productCategoryDeviceCounts: Record<string, number>,
 ): any {
diff --git a/apps/web-antd/src/views/iot/home/data.ts b/apps/web-antd/src/views/iot/home/data.ts
index a91d606a0..164557968 100644
--- a/apps/web-antd/src/views/iot/home/data.ts
+++ b/apps/web-antd/src/views/iot/home/data.ts
@@ -101,6 +101,7 @@ export function useIotHome() {
   };
 }
 
+// TODO @haohao：是不是删除下哈；
 /** 格式化数字 - 大数字显示为 K/M */
 export function formatNumber(num: number): string {
   if (num >= 1_000_000) {
diff --git a/apps/web-antd/src/views/iot/home/index.vue b/apps/web-antd/src/views/iot/home/index.vue
index 2d957c078..20bac8fa5 100644
--- a/apps/web-antd/src/views/iot/home/index.vue
+++ b/apps/web-antd/src/views/iot/home/index.vue
@@ -3,9 +3,7 @@ import { Page } from '@vben/common-ui';
 
 import { Col, Row } from 'ant-design-vue';
 
-// 导入业务逻辑
 import { useIotHome } from './data';
-// 导入组件
 import ComparisonCard from './modules/comparison-card.vue';
 import DeviceCountCard from './modules/device-count-card.vue';
 import DeviceStateCountCard from './modules/device-state-count-card.vue';
@@ -13,7 +11,7 @@ import MessageTrendCard from './modules/message-trend-card.vue';
 
 defineOptions({ name: 'IoTHome' });
 
-// 使用业务逻辑 Hook
+// TODO @haohao：相关的方法，拿到 index.vue 里，data.ts 只放 schema；
 const { loading, statsData } = useIotHome();
 </script>
 
diff --git a/apps/web-antd/src/views/iot/home/modules/comparison-card.vue b/apps/web-antd/src/views/iot/home/modules/comparison-card.vue
index 7f1ad732b..1cfc6b8a9 100644
--- a/apps/web-antd/src/views/iot/home/modules/comparison-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/comparison-card.vue
@@ -6,6 +6,8 @@ import { createIconifyIcon } from '@vben/icons';
 
 import { Card } from 'ant-design-vue';
 
+// TODO @haohao：这个可以迁移到 packages/effects/common-ui/src/components/card/comparison-card
+
 defineOptions({ name: 'ComparisonCard' });
 
 const props = defineProps<{
@@ -59,6 +61,7 @@ const IconComponent = computed(() => iconMap[props.icon] || iconMap.menu);
 </template>
 
 <style scoped>
+/** TODO tindwind */
 .stat-card {
   height: 160px;
   cursor: pointer;
diff --git a/apps/web-antd/src/views/iot/home/modules/device-count-card.vue b/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
index 397648dce..c46256307 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
@@ -28,13 +28,17 @@ const hasData = computed(() => {
 
 /** 初始化图表 */
 function initChart() {
-  if (!hasData.value) return;
+  if (!hasData.value) {
+    return;
+  }
 
+  // TODO @haohao：await nextTick();
   nextTick(() => {
     const data = Object.entries(
       props.statsData.productCategoryDeviceCounts,
     ).map(([name, value]) => ({ name, value }));
 
+    // TODO @haohao：看看 chart-options 怎么提取出去，类似 apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts 写法
     renderEcharts({
       tooltip: {
         trigger: 'item',
@@ -132,6 +136,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
+/** TODO tindwind */
 .chart-card {
   height: 100%;
 }
diff --git a/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue b/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
index 0aa77d2d8..9c3a7bb27 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
@@ -31,6 +31,7 @@ const hasData = computed(() => {
 });
 
 /** 获取仪表盘配置 */
+// TODO @haohao：看看 chart-options 怎么提取出去，类似 apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts 写法
 const getGaugeOption = (value: number, color: string, title: string): any => {
   return {
     series: [
@@ -81,8 +82,11 @@ const getGaugeOption = (value: number, color: string, title: string): any => {
 
 /** 初始化图表 */
 function initCharts() {
-  if (!hasData.value) return;
+  if (!hasData.value) {
+    return;
+  }
 
+  // TODO @haohao：await nextTick();
   nextTick(() => {
     // 在线设备
     renderOnlineChart(
@@ -147,6 +151,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
+/** TODO tindwind */
 .chart-card {
   height: 100%;
 }
diff --git a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
index 4f4a11815..622e8131a 100644
--- a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
@@ -24,6 +24,8 @@ const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDate[]>([]);
 const activeTimeRange = ref('7d'); // 当前选中的时间范围
 const dateRange = ref<[Dayjs, Dayjs] | undefined>(undefined);
 
+// TODO @haohao：这个貌似没迁移对。它是时间范围、事件间隔；
+
 const queryParams = reactive<IotStatisticsApi.DeviceMessageReq>({
   interval: 1, // 按天
   times: [],
@@ -34,6 +36,7 @@ const hasData = computed(() => {
   return messageData.value && messageData.value.length > 0;
 });
 
+// TODO @haohao：注释风格，应该是 /** */ 在方法上；然后变量在字段后面 // 。。。
 // 设置时间范围
 function setTimeRange(range: string) {
   activeTimeRange.value = range;
@@ -64,6 +67,7 @@ function setTimeRange(range: string) {
     }
   }
 
+  // TODO @haohao：可以使用 formatDateTime；
   queryParams.times = [
     start.format('YYYY-MM-DD HH:mm:ss'),
     end.format('YYYY-MM-DD HH:mm:ss'),
@@ -78,6 +82,7 @@ function handleDateChange() {
     activeTimeRange.value = ''; // 清空快捷选择
     queryParams.interval = 1; // 按天
     queryParams.times = [
+      // TODO @haohao：可以使用 formatDateTime；
       dateRange.value[0].startOf('day').format('YYYY-MM-DD HH:mm:ss'),
       dateRange.value[1].endOf('day').format('YYYY-MM-DD HH:mm:ss'),
     ];
@@ -110,6 +115,7 @@ function initChart() {
   const upstreamData = messageData.value.map((item) => item.upstreamCount);
   const downstreamData = messageData.value.map((item) => item.downstreamCount);
 
+  // TODO @haohao：看看 chart-options 怎么提取出去，类似 apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts 写法
   renderEcharts({
     tooltip: {
       trigger: 'axis',