!260 refactor:【antd】【iot】优化设备详情中的自动刷新开关样式

Merge pull request !260 from haohaoMT/dev

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

@@ -140,19 +140,11 @@ export function getThingModel(id: number) {
 /** 根据产品 ID 查询物模型列表 */
 export function getThingModelListByProductId(productId: number) {
   return requestClient.get<ThingModelApi.ThingModel[]>(
-    '/iot/thing-model/list-by-product-id',
+    '/iot/thing-model/list',
     { params: { productId } },
   );
 }
 
-/** 根据产品标识查询物模型列表 */
-export function getThingModelListByProductKey(productKey: string) {
-  return requestClient.get<ThingModelApi.ThingModel[]>(
-    '/iot/thing-model/list-by-product-key',
-    { params: { productKey } },
-  );
-}
-
 /** 新增物模型 */
 export function createThingModel(data: ThingModelData) {
   return requestClient.post('/iot/thing-model/create', data);
@@ -168,13 +160,6 @@ export function deleteThingModel(id: number) {
   return requestClient.delete(`/iot/thing-model/delete?id=${id}`);
 }
 
-/** 批量删除物模型 */
-export function deleteThingModelList(ids: number[]) {
-  return requestClient.delete('/iot/thing-model/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
 /** 获取物模型 TSL */
 export function getThingModelTSL(productId: number) {
   return requestClient.get<ThingModelApi.ThingModel[]>(

apps/web-antd/src/views/iot/alert/config/index.vue

@@ -10,7 +10,7 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteAlertConfig, getAlertConfigPage } from '#/api/iot/alert/config';
 import { $t } from '#/locales';
 
-import AlertConfigForm from '../modules/AlertConfigForm.vue';
+import AlertConfigForm from '../modules/alert-config-form.vue';
 import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'IoTAlertConfig' });

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

@@ -32,10 +32,10 @@ import { getSimpleProductList } from '#/api/iot/product/product';
 import { $t } from '#/locales';
 
 import { useGridColumns } from './data';
-import DeviceCardView from './modules/DeviceCardView.vue';
-import DeviceForm from './modules/DeviceForm.vue';
-import DeviceGroupForm from './modules/DeviceGroupForm.vue';
-import DeviceImportForm from './modules/DeviceImportForm.vue';
+import DeviceCardView from './modules/device-card-view.vue';
+import DeviceForm from './modules/device-form.vue';
+import DeviceGroupForm from './modules/device-group-form.vue';
+import DeviceImportForm from './modules/device-import-form.vue';
 
 /** IoT 设备列表 */
 defineOptions({ name: 'IoTDevice' });

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

@@ -8,7 +8,7 @@ import { useRouter } from 'vue-router';
 
 import { Button, Card, Descriptions, message } from 'ant-design-vue';
 
-import DeviceForm from '../DeviceForm.vue';
+import DeviceForm from '../device-form.vue';
 
 interface Props {
   product: IotProductApi.Product;

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

@@ -22,13 +22,13 @@ import {
 } from 'ant-design-vue';
 
 import { DeviceStateEnum, sendDeviceMessage } from '#/api/iot/device/device';
-import DataDefinition from '#/views/iot/thingmodel/modules/components/DataDefinition.vue';
+import DataDefinition from '#/views/iot/thingmodel/modules/components/data-definition.vue';
 import {
   IotDeviceMessageMethodEnum,
   IoTThingModelTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import DeviceDetailsMessage from './DeviceDetailsMessage.vue';
+import DeviceDetailsMessage from './device-details-message.vue';
 
 const props = defineProps<{
   device: IotDeviceApi.Device;

apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property-history.vue

@@ -354,7 +354,7 @@ async function handleExport() {
       ...list.value.map((item, index) => {
         return [
           index + 1,
-          formatDate(new Date(item.updateTime)),
+          formatDateTime(new Date(item.updateTime)),
           isComplexDataType.value
             ? `"${JSON.stringify(item.value)}"`
             : item.value,
@@ -553,15 +553,17 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 
   .toolbar-wrapper {
     padding: 16px;
-    background-color: #fafafa;
+    background-color: hsl(var(--card) / 0.9);
     border-radius: 8px;
+    border: 1px solid hsl(var(--border) / 0.6);
   }
 
   .chart-container,
   .table-container {
     padding: 16px;
-    background-color: #fff;
+    background-color: hsl(var(--card));
     border-radius: 8px;
+    border: 1px solid hsl(var(--border) / 0.6);
   }
 }
 </style>

apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property.vue

@@ -22,7 +22,8 @@ import {
 
 import { getLatestDeviceProperties } from '#/api/iot/device/device';
 
-import DeviceDetailsThingModelPropertyHistory from './DeviceDetailsThingModelPropertyHistory.vue';
+import DeviceDetailsThingModelPropertyHistory
+  from './device-details-thing-model-property-history.vue';
 
 const props = defineProps<{ deviceId: number }>();
 
@@ -123,10 +124,12 @@ onMounted(() => {
           style="width: 240px"
           @press-enter="handleQuery"
         />
-        <div class="flex items-center" style="gap: 8px">
-          <span style="font-size: 14px; color: #666">自动刷新</span>
-          <Switch v-model:checked="autoRefresh" size="small" />
-        </div>
+        <Switch
+          v-model:checked="autoRefresh"
+          class="ml-20px"
+          checked-children="定时刷新"
+          un-checked-children="定时刷新"
+        />
       </div>
       <Button.Group>
         <Button

apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model.vue

@@ -8,9 +8,9 @@ import { ContentWrap } from '@vben/common-ui';
 
 import { Tabs } from 'ant-design-vue';
 
-import DeviceDetailsThingModelEvent from './DeviceDetailsThingModelEvent.vue';
-import DeviceDetailsThingModelProperty from './DeviceDetailsThingModelProperty.vue';
-import DeviceDetailsThingModelService from './DeviceDetailsThingModelService.vue';
+import DeviceDetailsThingModelEvent from './device-details-thing-model-event.vue';
+import DeviceDetailsThingModelProperty from './device-details-thing-model-property.vue';
+import DeviceDetailsThingModelService from './device-details-thing-model-service.vue';
 
 const props = defineProps<{
   deviceId: number;

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

@@ -14,13 +14,13 @@ import { getDevice } from '#/api/iot/device/device';
 import { DeviceTypeEnum, getProduct } from '#/api/iot/product/product';
 import { getThingModelListByProductId } from '#/api/iot/thingmodel';
 
-import DeviceDetailConfig from './DeviceDetailConfig.vue';
-import DeviceDetailsHeader from './DeviceDetailsHeader.vue';
-import DeviceDetailsInfo from './DeviceDetailsInfo.vue';
-import DeviceDetailsMessage from './DeviceDetailsMessage.vue';
-import DeviceDetailsSimulator from './DeviceDetailsSimulator.vue';
-import DeviceDetailsSubDevice from './DeviceDetailsSubDevice.vue';
-import DeviceDetailsThingModel from './DeviceDetailsThingModel.vue';
+import DeviceDetailConfig from './device-detail-config.vue';
+import DeviceDetailsHeader from './device-details-header.vue';
+import DeviceDetailsInfo from './device-details-info.vue';
+import DeviceDetailsMessage from './device-details-message.vue';
+import DeviceDetailsSimulator from './device-details-simulator.vue';
+import DeviceDetailsSubDevice from './device-details-sub-device.vue';
+import DeviceDetailsThingModel from './device-details-thing-model.vue';
 
 defineOptions({ name: 'IoTDeviceDetail' });
 

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

@@ -2,8 +2,9 @@
 import { onMounted, ref } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
-import { getDictLabel } from '@vben/hooks';
+import { getDictLabel, getDictObj } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
+import { isValidColor, TinyColor } from '@vben/utils';
 
 import {
   Button,
@@ -52,6 +53,91 @@ const queryParams = ref({
   pageSize: 12,
 });
 
+const DEFAULT_STATUS_MAP: Record<
+  'default' | number,
+  { bgColor: string; borderColor: string; color: string; text: string }
+> = {
+  [DeviceStateEnum.ONLINE]: {
+    text: '在线',
+    color: '#52c41a',
+    bgColor: '#f6ffed',
+    borderColor: '#b7eb8f',
+  },
+  [DeviceStateEnum.OFFLINE]: {
+    text: '离线',
+    color: '#faad14',
+    bgColor: '#fffbe6',
+    borderColor: '#ffe58f',
+  },
+  [DeviceStateEnum.INACTIVE]: {
+    text: '未激活',
+    color: '#ff4d4f',
+    bgColor: '#fff1f0',
+    borderColor: '#ffccc7',
+  },
+  default: {
+    text: '未知状态',
+    color: '#595959',
+    bgColor: '#fafafa',
+    borderColor: '#d9d9d9',
+  },
+};
+
+const COLOR_TYPE_PRESETS: Record<
+  string,
+  { bgColor: string; borderColor: string; color: string }
+> = {
+  success: {
+    color: '#52c41a',
+    bgColor: '#f6ffed',
+    borderColor: '#b7eb8f',
+  },
+  processing: {
+    color: '#1890ff',
+    bgColor: '#e6f7ff',
+    borderColor: '#91d5ff',
+  },
+  warning: {
+    color: '#faad14',
+    bgColor: '#fffbe6',
+    borderColor: '#ffe58f',
+  },
+  error: {
+    color: '#ff4d4f',
+    bgColor: '#fff1f0',
+    borderColor: '#ffccc7',
+  },
+  default: {
+    color: '#595959',
+    bgColor: '#fafafa',
+    borderColor: '#d9d9d9',
+  },
+};
+
+function normalizeColorType(colorType?: string) {
+  switch (colorType) {
+    case 'danger': {
+      return 'error';
+    }
+    case 'default':
+    case 'error':
+    case 'processing':
+    case 'success':
+    case 'warning': {
+      return colorType;
+    }
+    case 'info': {
+      return 'default';
+    }
+    case 'primary': {
+      return 'processing';
+    }
+    default: {
+      return 'default';
+    }
+  }
+}
+
 // 获取产品名称
 function getProductName(productId: number) {
   const product = props.products.find((p: any) => p.id === productId);
@@ -90,21 +176,41 @@ function getDeviceTypeColor(deviceType: number) {
 }
 
 // 获取设备状态信息
-function getStatusInfo(state: number) {
-  if (state === DeviceStateEnum.ONLINE) {
+function getStatusInfo(state: number | string | null | undefined) {
+  const parsedState = Number(state);
+  const hasNumericState = Number.isFinite(parsedState);
+  const fallback = hasNumericState
+    ? DEFAULT_STATUS_MAP[parsedState] || DEFAULT_STATUS_MAP.default
+    : DEFAULT_STATUS_MAP.default;
+  const dict = getDictObj(
+    DICT_TYPE.IOT_DEVICE_STATE,
+    hasNumericState ? parsedState : state,
+  );
+  if (dict) {
+    if (!dict.colorType && !dict.cssClass) {
+      return {
+        ...fallback,
+        text: dict.label || fallback.text,
+      };
+    }
+    const presetKey = normalizeColorType(dict.colorType);
+    if (isValidColor(dict.cssClass)) {
+      const baseColor = new TinyColor(dict.cssClass);
+      return {
+        text: dict.label || fallback.text,
+        color: baseColor.toHexString(),
+        bgColor: baseColor.clone().setAlpha(0.15).toRgbString(),
+        borderColor: baseColor.clone().lighten(30).toHexString(),
+      };
+    }
+    const preset = COLOR_TYPE_PRESETS[presetKey] || COLOR_TYPE_PRESETS.default;
     return {
-      text: '在线',
-      color: '#52c41a',
-      bgColor: '#f6ffed',
-      borderColor: '#b7eb8f',
+      text: dict.label || fallback.text,
+      ...preset,
     };
   }
-  return {
-    text: '未激活',
-    color: '#ff4d4f',
-    bgColor: '#fff1f0',
-    borderColor: '#ffccc7',
-  };
+
+  return fallback;
 }
 
 onMounted(() => {
@@ -290,21 +396,21 @@ defineExpose({
   .device-card {
     height: 100%;
     overflow: hidden;
-    background: #fff;
-    border: 1px solid #f0f0f0;
+    background: hsl(var(--card) / 0.95);
+    border: 1px solid hsl(var(--border) / 0.6);
     border-radius: 8px;
     box-shadow:
-      0 1px 2px 0 rgb(0 0 0 / 3%),
-      0 1px 6px -1px rgb(0 0 0 / 2%),
-      0 2px 4px 0 rgb(0 0 0 / 2%);
+      0 1px 2px 0 hsl(var(--foreground) / 0.04),
+      0 1px 6px -1px hsl(var(--foreground) / 0.05),
+      0 2px 4px 0 hsl(var(--foreground) / 0.05);
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &:hover {
-      border-color: #e6e6e6;
+      border-color: hsl(var(--border));
       box-shadow:
-        0 1px 2px -2px rgb(0 0 0 / 16%),
-        0 3px 6px 0 rgb(0 0 0 / 12%),
-        0 5px 12px 4px rgb(0 0 0 / 9%);
+        0 1px 2px -2px hsl(var(--foreground) / 0.12),
+        0 3px 6px 0 hsl(var(--foreground) / 0.1),
+        0 5px 12px 4px hsl(var(--foreground) / 0.08);
       transform: translateY(-4px);
     }
 
@@ -367,7 +473,7 @@ defineExpose({
       font-size: 16px;
       font-weight: 600;
       line-height: 24px;
-      color: #262626;
+      color: hsl(var(--foreground) / 0.9);
       white-space: nowrap;
     }
 
@@ -390,7 +496,7 @@ defineExpose({
         .label {
           flex-shrink: 0;
           font-size: 13px;
-          color: #8c8c8c;
+          color: hsl(var(--foreground) / 0.6);
         }
 
         .value {
@@ -399,17 +505,17 @@ defineExpose({
           overflow: hidden;
           text-overflow: ellipsis;
           font-size: 13px;
-          color: #262626;
+          color: hsl(var(--foreground) / 0.85);
           text-align: right;
           white-space: nowrap;
 
           &.link {
-            color: #1890ff;
+            color: hsl(var(--primary));
             cursor: pointer;
             transition: color 0.2s;
 
             &:hover {
-              color: #40a9ff;
+              color: hsl(var(--primary) / 0.85);
             }
           }
 
@@ -418,7 +524,7 @@ defineExpose({
               'SF Mono', Monaco, Inconsolata, 'Fira Code', Consolas, monospace;
             font-size: 12px;
             font-weight: 500;
-            color: #595959;
+            color: hsl(var(--foreground) / 0.6);
           }
         }
       }
@@ -431,7 +537,7 @@ defineExpose({
       display: flex;
       gap: 8px;
       padding-top: 12px;
-      border-top: 1px solid #f5f5f5;
+      border-top: 1px solid hsl(var(--border) / 0.4);
 
       .action-btn {
         display: flex;
@@ -445,7 +551,7 @@ defineExpose({
         font-weight: 400;
         pointer-events: auto;
         cursor: pointer;
-        border: 1px solid;
+        border: 1px solid transparent;
         border-radius: 6px;
         transition: all 0.2s;
 
@@ -454,52 +560,60 @@ defineExpose({
         }
 
         &.btn-edit {
-          color: #1890ff;
-          background: #e6f7ff;
-          border-color: #91d5ff;
+          color: hsl(var(--primary));
+          background: hsl(var(--primary) / 0.12);
+          border-color: hsl(var(--primary) / 0.25);
 
           &:hover {
-            color: #fff;
-            background: #1890ff;
-            border-color: #1890ff;
+            color: hsl(var(--primary-foreground));
+            background: hsl(var(--primary));
+            border-color: hsl(var(--primary));
           }
         }
 
         &.btn-view {
-          color: #faad14;
-          background: #fffbe6;
-          border-color: #ffe58f;
+          color: hsl(var(--warning));
+          background: hsl(var(--warning) / 0.12);
+          border-color: hsl(var(--warning) / 0.25);
 
           &:hover {
             color: #fff;
-            background: #faad14;
-            border-color: #faad14;
+            background: hsl(var(--warning));
+            border-color: hsl(var(--warning));
           }
         }
 
         &.btn-data {
-          color: #722ed1;
-          background: #f9f0ff;
-          border-color: #d3adf7;
+          color: hsl(var(--accent-foreground));
+          background: color-mix(
+            in srgb,
+            hsl(var(--accent)) 40%,
+            hsl(var(--card)) 60%
+          );
+          border-color: color-mix(
+            in srgb,
+            hsl(var(--accent)) 55%,
+            transparent
+          );
 
           &:hover {
-            color: #fff;
-            background: #722ed1;
-            border-color: #722ed1;
+            color: hsl(var(--accent-foreground));
+            background: hsl(var(--accent));
+            border-color: hsl(var(--accent));
           }
         }
 
         &.btn-delete {
           flex: 0 0 32px;
           padding: 4px;
-          color: #ff4d4f;
-          background: #fff1f0;
-          border-color: #ffa39e;
+          color: hsl(var(--destructive));
+          background: hsl(var(--destructive) / 0.12);
+          border-color: hsl(var(--destructive) / 0.3);
 
           &:hover {
-            color: #fff;
-            background: #ff4d4f;
-            border-color: #ff4d4f;
+            color: hsl(var(--destructive-foreground));
+            background: hsl(var(--destructive));
+            border-color: hsl(var(--destructive));
           }
         }
       }

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

@@ -6,10 +6,10 @@ import { Col, Row } from 'ant-design-vue';
 // 导入业务逻辑
 import { useIotHome } from './data';
 // 导入组件
-import ComparisonCard from './modules/ComparisonCard.vue';
-import DeviceCountCard from './modules/DeviceCountCard.vue';
-import DeviceStateCountCard from './modules/DeviceStateCountCard.vue';
-import MessageTrendCard from './modules/MessageTrendCard.vue';
+import ComparisonCard from './modules/comparison-card.vue';
+import DeviceCountCard from './modules/device-count-card.vue';
+import DeviceStateCountCard from './modules/device-state-count-card.vue';
+import MessageTrendCard from './modules/message-trend-card.vue';
 
 defineOptions({ name: 'IoTHome' });
 

apps/web-antd/src/views/iot/ota/firmware/index.vue

@@ -13,7 +13,7 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
 import { $t } from '#/locales';
 
-import Form from '../modules/OtaFirmwareForm.vue';
+import OtaFirmwareForm from '../modules/ota-firmware-form.vue';
 import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'IoTOtaFirmware' });
@@ -21,7 +21,7 @@ defineOptions({ name: 'IoTOtaFirmware' });
 const { push } = useRouter();
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
+  connectedComponent: OtaFirmwareForm,
   destroyOnClose: true,
 });
 

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

@@ -11,7 +11,7 @@ import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import OtaFirmwareForm from './modules/OtaFirmwareForm.vue';
+import OtaFirmwareForm from './modules/ota-firmware-form.vue';
 
 defineOptions({ name: 'IoTOtaFirmware' });
 

apps/web-antd/src/views/iot/ota/modules/detail/index.vue

@@ -12,7 +12,7 @@ import { getOtaFirmware } from '#/api/iot/ota/firmware';
 import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
-import OtaTaskList from '../task/OtaTaskList.vue';
+import OtaTaskList from '../task/ota-task-list.vue';
 
 /** IoT OTA 固件详情 */
 defineOptions({ name: 'IoTOtaFirmwareDetail' });

apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue

@@ -12,7 +12,7 @@ import { getOtaFirmware } from '#/api/iot/ota/firmware';
 import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
-import OtaTaskList from '../task/OtaTaskList.vue';
+import OtaTaskList from '../task/ota-task-list.vue';
 
 /** IoT OTA 固件详情 */
 defineOptions({ name: 'IoTOtaFirmwareDetail' });

apps/web-antd/src/views/iot/ota/modules/task/ota-task-list.vue

@@ -22,8 +22,8 @@ import {
 import { getOtaTaskPage } from '#/api/iot/ota/task';
 import { IoTOtaTaskStatusEnum } from '#/views/iot/utils/constants';
 
-import OtaTaskDetail from './OtaTaskDetail.vue';
-import OtaTaskForm from './OtaTaskForm.vue';
+import OtaTaskDetail from './ota-task-detail.vue';
+import OtaTaskForm from './ota-task-form.vue';
 
 /** IoT OTA 任务列表 */
 defineOptions({ name: 'OtaTaskList' });

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

@@ -14,12 +14,12 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/ProductCategoryForm.vue';
+import ProductCategoryForm from './modules/product-category-form.vue';
 
 defineOptions({ name: 'IoTProductCategory' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
+  connectedComponent: ProductCategoryForm,
   destroyOnClose: true,
 });
 

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

@@ -20,8 +20,8 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useImagePreview } from './data';
-import ProductCardView from './modules/ProductCardView.vue';
-import ProductForm from './modules/ProductForm.vue';
+import ProductCardView from './modules/product-card-view.vue';
+import ProductForm from './modules/product-form.vue';
 
 defineOptions({ name: 'IoTProduct' });
 

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

@@ -12,8 +12,8 @@ import { getDeviceCount } from '#/api/iot/device/device';
 import { getProduct } from '#/api/iot/product/product';
 import IoTProductThingModel from '#/views/iot/thingmodel/index.vue';
 
-import ProductDetailsHeader from './ProductDetailsHeader.vue';
-import ProductDetailsInfo from './ProductDetailsInfo.vue';
+import ProductDetailsHeader from './product-details-header.vue';
+import ProductDetailsInfo from './product-details-info.vue';
 
 defineOptions({ name: 'IoTProductDetail' });
 

apps/web-antd/src/views/iot/product/product/modules/detail/product-details-header.vue

@@ -8,7 +8,7 @@ import { Button, Card, Descriptions, message } from 'ant-design-vue';
 
 import { updateProductStatus } from '#/api/iot/product/product';
 
-import ProductForm from '../ProductForm.vue';
+import ProductForm from '../product-form.vue';
 
 interface Props {
   product: IotProductApi.Product;

apps/web-antd/src/views/iot/rule/data/index.vue

@@ -10,7 +10,7 @@ import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DataRuleForm from './rule/DataRuleForm.vue';
+import DataRuleForm from './rule/data-rule-form.vue';
 
 /** IoT 数据流转规则列表 */
 defineOptions({ name: 'IoTDataRule' });

apps/web-antd/src/views/iot/rule/data/rule/data-rule-form.vue

@@ -14,7 +14,7 @@ import {
 import { getDataSinkSimpleList } from '#/api/iot/rule/data/sink';
 import { $t } from '#/locales';
 
-import SourceConfigForm from './components/SourceConfigForm.vue';
+import SourceConfigForm from './components/source-config-form.vue';
 import { useRuleFormSchema } from './data';
 
 const emit = defineEmits(['success']);

apps/web-antd/src/views/iot/rule/data/rule/index.vue

@@ -10,7 +10,7 @@ import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DataRuleForm from './DataRuleForm.vue';
+import DataRuleForm from './data-rule-form.vue';
 
 /** IoT 数据流转规则列表 */
 defineOptions({ name: 'IotDataRule' });

apps/web-antd/src/views/iot/rule/data/sink/config/http-config-form.vue

@@ -6,7 +6,7 @@ import { isEmpty } from '@vben/utils';
 import { useVModel } from '@vueuse/core';
 import { FormItem, Input, Select } from 'ant-design-vue';
 
-import KeyValueEditor from './components/KeyValueEditor.vue';
+import KeyValueEditor from './components/key-value-editor.vue';
 
 defineOptions({ name: 'HttpConfigForm' });
 

apps/web-antd/src/views/iot/rule/data/sink/config/index.ts

@@ -1,6 +1,6 @@
-export { default as HttpConfigForm } from './HttpConfigForm.vue';
-export { default as KafkaMQConfigForm } from './KafkaMQConfigForm.vue';
-export { default as MqttConfigForm } from './MqttConfigForm.vue';
-export { default as RabbitMQConfigForm } from './RabbitMQConfigForm.vue';
-export { default as RedisStreamConfigForm } from './RedisStreamConfigForm.vue';
-export { default as RocketMQConfigForm } from './RocketMQConfigForm.vue';
+export {default as HttpConfigForm} from './http-config-form.vue';
+export {default as KafkaMqConfigForm} from './kafka-mq-config-form.vue';
+export {default as MqttConfigForm} from './mqtt-config-form.vue';
+export {default as RabbitMqConfigForm} from './rabbit-mq-config-form.vue';
+export {default as RedisStreamConfigForm} from './redis-stream-config-form.vue';
+export {default as RocketMqConfigForm} from './rocket-mq-config-form.vue';

apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue

@@ -15,11 +15,11 @@ import { $t } from '#/locales';
 
 import {
   HttpConfigForm,
-  KafkaMQConfigForm,
+  KafkaMqConfigForm,
   MqttConfigForm,
-  RabbitMQConfigForm,
+  RabbitMqConfigForm,
   RedisStreamConfigForm,
-  RocketMQConfigForm,
+  RocketMqConfigForm,
 } from './config';
 import { useSinkFormSchema } from './data';
 
@@ -128,15 +128,15 @@ watch(
         v-if="IotDataSinkTypeEnum.MQTT === formData.type"
         v-model="formData.config"
       />
-      <RocketMQConfigForm
+      <RocketMqConfigForm
         v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
         v-model="formData.config"
       />
-      <KafkaMQConfigForm
+      <KafkaMqConfigForm
         v-if="IotDataSinkTypeEnum.KAFKA === formData.type"
         v-model="formData.config"
       />
-      <RabbitMQConfigForm
+      <RabbitMqConfigForm
         v-if="IotDataSinkTypeEnum.RABBITMQ === formData.type"
         v-model="formData.config"
       />

apps/web-antd/src/views/iot/rule/data/sink/index.vue

@@ -10,7 +10,7 @@ import { deleteDataSink, getDataSinkPage } from '#/api/iot/rule/data/sink';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DataSinkForm from './DataSinkForm.vue';
+import DataSinkForm from './data-sink-form.vue';
 
 /** IoT 数据流转目的 列表 */
 defineOptions({ name: 'IotDataSink' });

apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue

@@ -14,12 +14,12 @@ import {
   IotRuleSceneTriggerConditionTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import ValueInput from '../inputs/ValueInput.vue';
-import DeviceSelector from '../selectors/DeviceSelector.vue';
-import OperatorSelector from '../selectors/OperatorSelector.vue';
-import ProductSelector from '../selectors/ProductSelector.vue';
-import PropertySelector from '../selectors/PropertySelector.vue';
-import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue';
+import ValueInput from '../inputs/value-input.vue';
+import DeviceSelector from '../selectors/device-selector.vue';
+import OperatorSelector from '../selectors/operator-selector.vue';
+import ProductSelector from '../selectors/product-selector.vue';
+import PropertySelector from '../selectors/property-selector.vue';
+import CurrentTimeConditionConfig from './current-time-condition-config.vue';
 
 /** 单个条件配置组件 */
 defineOptions({ name: 'ConditionConfig' });

apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue

@@ -20,9 +20,9 @@ import {
   IoTThingModelAccessModeEnum,
 } from '#/views/iot/utils/constants';
 
-import JsonParamsInput from '../inputs/JsonParamsInput.vue';
-import DeviceSelector from '../selectors/DeviceSelector.vue';
-import ProductSelector from '../selectors/ProductSelector.vue';
+import JsonParamsInput from '../inputs/json-params-input.vue';
+import DeviceSelector from '../selectors/device-selector.vue';
+import ProductSelector from '../selectors/product-selector.vue';
 
 /** 设备控制配置组件 */
 defineOptions({ name: 'DeviceControlConfig' });

apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue

@@ -9,8 +9,8 @@ import { IconifyIcon } from '@vben/icons';
 import { useVModel } from '@vueuse/core';
 import { Button, Tag } from 'ant-design-vue';
 
-import MainConditionInnerConfig from './MainConditionInnerConfig.vue';
-import SubConditionGroupConfig from './SubConditionGroupConfig.vue';
+import MainConditionInnerConfig from './main-condition-inner-config.vue';
+import SubConditionGroupConfig from './sub-condition-group-config.vue';
 
 /** 设备触发配置组件 */
 defineOptions({ name: 'DeviceTriggerConfig' });

apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue

@@ -14,12 +14,12 @@ import {
   triggerTypeOptions,
 } from '#/views/iot/utils/constants';
 
-import JsonParamsInput from '../inputs/JsonParamsInput.vue';
-import ValueInput from '../inputs/ValueInput.vue';
-import DeviceSelector from '../selectors/DeviceSelector.vue';
-import OperatorSelector from '../selectors/OperatorSelector.vue';
-import ProductSelector from '../selectors/ProductSelector.vue';
-import PropertySelector from '../selectors/PropertySelector.vue';
+import JsonParamsInput from '../inputs/json-params-input.vue';
+import ValueInput from '../inputs/value-input.vue';
+import DeviceSelector from '../selectors/device-selector.vue';
+import OperatorSelector from '../selectors/operator-selector.vue';
+import ProductSelector from '../selectors/product-selector.vue';
+import PropertySelector from '../selectors/property-selector.vue';
 
 /** 主条件内部配置组件 */
 defineOptions({ name: 'MainConditionInnerConfig' });

apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue

@@ -13,7 +13,7 @@ import {
   IotRuleSceneTriggerConditionTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import ConditionConfig from './ConditionConfig.vue';
+import ConditionConfig from './condition-config.vue';
 
 /** 子条件组配置组件 */
 defineOptions({ name: 'SubConditionGroupConfig' });

apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue

@@ -16,9 +16,9 @@ import {
   isDeviceTrigger,
 } from '#/views/iot/utils/constants';
 
-import ActionSection from './sections/ActionSection.vue';
-import BasicInfoSection from './sections/BasicInfoSection.vue';
-import TriggerSection from './sections/TriggerSection.vue';
+import ActionSection from './sections/action-section.vue';
+import BasicInfoSection from './sections/basic-info-section.vue';
+import TriggerSection from './sections/trigger-section.vue';
 
 /** IoT 场景联动规则表单 - 主表单组件 */
 defineOptions({ name: 'RuleSceneForm' });

apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue

@@ -13,8 +13,8 @@ import {
   IotRuleSceneActionTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import AlertConfig from '../configs/AlertConfig.vue';
-import DeviceControlConfig from '../configs/DeviceControlConfig.vue';
+import AlertConfig from '../configs/alert-config.vue';
+import DeviceControlConfig from '../configs/device-control-config.vue';
 
 /** 执行器配置组件 */
 defineOptions({ name: 'ActionSection' });

apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue

@@ -8,6 +8,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 import { Card, Col, Form, Input, Radio, Row } from 'ant-design-vue';
+import { DictTag } from "#/components/dict-tag";
 
 /** 基础信息配置组件 */
 defineOptions({ name: 'BasicInfoSection' });

apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue

@@ -15,7 +15,7 @@ import {
   isDeviceTrigger,
 } from '#/views/iot/utils/constants';
 
-import DeviceTriggerConfig from '../configs/DeviceTriggerConfig.vue';
+import DeviceTriggerConfig from '../configs/device-trigger-config.vue';
 
 /** 触发器配置组件 */
 defineOptions({ name: 'TriggerSection' });

apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue

@@ -7,6 +7,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { Select } from 'ant-design-vue';
 
 import { getSimpleProductList } from '#/api/iot/product/product';
+import { DictTag } from "#/components/dict-tag";
 
 /** 产品选择器组件 */
 defineOptions({ name: 'ProductSelector' });

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

@@ -14,8 +14,8 @@ import { deleteThingModel, getThingModelPage } from '#/api/iot/thingmodel';
 import { getDataTypeOptionsLabel, IOT_PROVIDE_KEY } from '../utils/constants';
 import { useGridColumns, useGridFormSchema } from './data';
 import { DataDefinition } from './modules/components';
-import ThingModelForm from './modules/ThingModelForm.vue';
-import ThingModelTSL from './modules/ThingModelTSL.vue';
+import ThingModelForm from './modules/thing-model-form.vue';
+import ThingModelTsl from './modules/thing-model-tsl.vue';
 
 defineOptions({ name: 'IoTThingModel' });
 
@@ -180,6 +180,6 @@ onMounted(async () => {
     <ThingModelForm ref="thingModelFormRef" @success="handleRefresh" />
 
     <!-- TSL 弹窗 -->
-    <ThingModelTSL ref="thingModelTSLRef" />
+    <ThingModelTsl ref="thingModelTSLRef"/>
   </Page>
 </template>

apps/web-antd/src/views/iot/thingmodel/modules/components/index.ts

@@ -1 +1 @@
-export { default as DataDefinition } from './DataDefinition.vue';
+export {default as DataDefinition} from './data-definition.vue';

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/index.ts

@@ -1,4 +1,4 @@
-export { default as ThingModelArrayDataSpecs } from './ThingModelArrayDataSpecs.vue';
-export { default as ThingModelEnumDataSpecs } from './ThingModelEnumDataSpecs.vue';
-export { default as ThingModelNumberDataSpecs } from './ThingModelNumberDataSpecs.vue';
-export { default as ThingModelStructDataSpecs } from './ThingModelStructDataSpecs.vue';
+export {default as ThingModelArrayDataSpecs} from './thing-model-array-data-specs.vue';
+export {default as ThingModelEnumDataSpecs} from './thing-model-enum-data-specs.vue';
+export {default as ThingModelNumberDataSpecs} from './thing-model-number-data-specs.vue';
+export {default as ThingModelStructDataSpecs} from './thing-model-struct-data-specs.vue';

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue

@@ -10,7 +10,7 @@ import {
   IoTDataSpecsDataTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue';
+import ThingModelStructDataSpecs from './thing-model-struct-data-specs.vue';
 
 /** 数组型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelArrayDataSpecs' });

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue

@@ -11,7 +11,7 @@ import { Button, Divider, Form, Input, Modal } from 'ant-design-vue';
 
 import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
 
-import ThingModelProperty from '../ThingModelProperty.vue';
+import ThingModelProperty from '../thing-model-property.vue';
 
 /** Struct 型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelStructDataSpecs' });

apps/web-antd/src/views/iot/thingmodel/modules/thing-model-event.vue

@@ -14,7 +14,7 @@ import {
   IoTThingModelParamDirectionEnum,
 } from '#/views/iot/utils/constants';
 
-import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue';
+import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
 
 /** IoT 物模型事件 */
 defineOptions({ name: 'ThingModelEvent' });

apps/web-antd/src/views/iot/thingmodel/modules/thing-model-form.vue

@@ -25,9 +25,9 @@ import {
   IoTThingModelTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import ThingModelEvent from './ThingModelEvent.vue';
-import ThingModelProperty from './ThingModelProperty.vue';
-import ThingModelService from './ThingModelService.vue';
+import ThingModelEvent from './thing-model-event.vue';
+import ThingModelProperty from './thing-model-property.vue';
+import ThingModelService from './thing-model-service.vue';
 
 /** IoT 物模型数据表单 */
 defineOptions({ name: 'IoTThingModelForm' });

apps/web-antd/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue

@@ -11,7 +11,7 @@ import { Button, Divider, Form, Input, Modal } from 'ant-design-vue';
 
 import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
 
-import ThingModelProperty from './ThingModelProperty.vue';
+import ThingModelProperty from './thing-model-property.vue';
 
 /** 输入输出参数配置组件 */
 defineOptions({ name: 'ThingModelInputOutputParam' });

apps/web-antd/src/views/iot/thingmodel/modules/thing-model-service.vue

@@ -14,7 +14,7 @@ import {
   IoTThingModelServiceCallTypeEnum,
 } from '#/views/iot/utils/constants';
 
-import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue';
+import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
 
 /** IoT 物模型服务 */
 defineOptions({ name: 'ThingModelService' });

apps/web-antd/src/views/iot/thingmodel/modules/thing-model-tsl.vue

@@ -10,7 +10,7 @@ import { Modal, Radio, Textarea } from 'ant-design-vue';
 import { getThingModelTSL } from '#/api/iot/thingmodel';
 import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants';
 
-defineOptions({ name: 'ThingModelTSL' });
+defineOptions({name: 'ThingModelTsl'});
 
 const dialogVisible = ref(false); // 弹窗的是否展示
 const dialogTitle = ref('物模型 TSL'); // 弹窗的标题

packages/effects/plugins/src/echarts/echarts.ts

@@ -7,6 +7,7 @@ import type {
 } from 'echarts/charts';
 import type {
   DatasetComponentOption,
+  DataZoomComponentOption,
   GeoComponentOption,
   GridComponentOption,
   // 组件类型的定义后缀都为 ComponentOption
@@ -28,6 +29,9 @@ import {
 import {
   // 数据集组件
   DatasetComponent,
+  DataZoomComponent,
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
   GeoComponent,
   GridComponent,
   LegendComponent,
@@ -46,6 +50,7 @@ import { CanvasRenderer } from 'echarts/renderers';
 export type ECOption = ComposeOption<
   | BarSeriesOption
   | DatasetComponentOption
+  | DataZoomComponentOption
   | GaugeSeriesOption
   | GeoComponentOption
   | GridComponentOption
@@ -64,6 +69,9 @@ echarts.use([
   TooltipComponent,
   GridComponent,
   DatasetComponent,
+  DataZoomComponent,
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
   TransformComponent,
   BarChart,
   LineChart,