fix(iot): 修复 antd/ele 对齐评审问题

- 对齐场景联动、首页趋势、产品、设备、分组、物模型等行为 - 修复设备导入结果弹窗、分页、权限、校验规则等差异 - 收敛 antd 与 ele 的实现风格
2026-05-25 00:11:11 +08:00 · 2026-05-25 00:11:11 +08:00 · ab697925cf
parent 3c592887b9
commit ab697925cf
28 changed files with 107 additions and 67 deletions
--- a/apps/web-antd/src/api/iot/thingmodel/index.ts
+++ b/apps/web-antd/src/api/iot/thingmodel/index.ts
@ -148,8 +148,8 @@ export const ThingModelFormRules: Record<string, Rule[]> = {
  identifier: [
    { required: true, message: '标识符不能为空', trigger: 'blur' },
    {
-      pattern: /^\w{1,50}$/,
-      message: '支持大小写字母、数字和下划线，不超过 50 个字符',
+      pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,31}$/,
+      message: '支持大小写字母、数字和下划线，必须以字母开头，不超过 32 个字符',
      trigger: 'blur',
    },
    {
--- a/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
+++ b/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
@ -4,6 +4,7 @@ import type { Dayjs } from 'dayjs';
 import { onMounted, ref } from 'vue';

 import { DatePicker, Radio, RadioGroup } from 'ant-design-vue';
+import dayjs from 'dayjs';

 import { getRangePickerDefaultProps } from '#/utils/rangePickerProps';

@ -19,8 +20,20 @@ const times = ref<[Dayjs, Dayjs]>(); // 日期范围
 const rangePickerProps = getRangePickerDefaultProps();
 const timeRangeOptions = [
  rangePickerProps.presets[3]!, // 昨天
-  rangePickerProps.presets[1]!, // 最近 7 天
-  rangePickerProps.presets[2]!, // 最近 30 天
+  {
+    label: rangePickerProps.presets[1]!.label,
+    value: [
+      dayjs().subtract(7, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+  {
+    label: rangePickerProps.presets[2]!.label,
+    value: [
+      dayjs().subtract(30, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
 ];
 const timeRangeType = ref(timeRangeOptions[1]!.label); // 默认选中第一个选项

--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/src/views/iot/device/device/data.ts
@ -79,10 +79,18 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
      },
      rules: z
        .string()
-        .min(4, '备注名称长度限制为 4~64 个字符')
-        .max(64, '备注名称长度限制为 4~64 个字符')
-        .regex(
-          /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/,
+        .refine(
+          (value) => {
+            const length = value.replaceAll(
+              /[\u4E00-\u9FA5\u3040-\u30FF]/g,
+              'aa',
+            ).length;
+            return length >= 4 && length <= 64;
+          },
+          '备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符',
+        )
+        .refine(
+          (value) => /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/.test(value),
          '备注名称只能包含中文、英文字母、日文、数字和下划线（_）',
        )
        .optional()
--- a/apps/web-antd/src/views/iot/device/device/index.vue
+++ b/apps/web-antd/src/views/iot/device/device/index.vue
@ -215,6 +215,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
    columns: useGridColumns(),
    height: 'auto',
    keepSource: true,
+    pagerConfig: {
+      pageSize: 12,
+    },
    proxyConfig: {
      ajax: {
        query: async ({
@ -471,7 +474,7 @@ onMounted(async () => {
            {
              label: '日志',
              type: 'link',
-              auth: ['iot:device:message-query'],
+              auth: ['iot:device:query'],
              onClick: openModel.bind(null, row.id!),
            },
            {
--- a/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
@ -229,7 +229,7 @@ onMounted(() => {
                详情
              </Button>
              <Button
-                v-if="hasAccessByCodes(['iot:device:message-query'])"
+                v-if="hasAccessByCodes(['iot:device:query'])"
                size="small"
                class="!h-8 min-w-0 flex-1 rounded-md !border-[#fa8c16] !text-[13px] !text-[#fa8c16] transition-all duration-200 hover:!bg-[#fa8c16] hover:!text-white"
                @click="emit('model', item.id!)"
--- a/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
@ -3,7 +3,7 @@ import type { FileType } from 'ant-design-vue/es/upload/interface';

 import type { IotDeviceApi } from '#/api/iot/device/device';

-import { useVbenModal } from '@vben/common-ui';
+import { alert, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';

 import { Button, message, Upload } from 'ant-design-vue';
@ -61,7 +61,7 @@ const [Modal, modalApi] = useVbenModal({
            text += `< ${deviceName}: ${importData.failureDeviceNames[deviceName]} >`;
          }
        }
-        message.info(text);
+        await alert(text, '导入结果');
      }
      // 关闭并提示
      await modalApi.close();
--- a/apps/web-antd/src/views/iot/device/group/data.ts
+++ b/apps/web-antd/src/views/iot/device/group/data.ts
@ -2,7 +2,7 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';

-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 import { z } from '#/adapter/form';
@ -40,7 +40,7 @@ export function useFormSchema(): VbenFormSchema[] {
        buttonStyle: 'solid',
        optionType: 'button',
      },
-      rules: z.number().default(CommonStatusEnum.ENABLE),
+      rules: 'required',
    },
    {
      fieldName: 'description',
--- 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
@ -30,9 +30,9 @@ const isFirstMount = ref(true); // 首次挂载标记，用于跳过子组件 mo

 /** 时间范围（仅日期，不包含时分秒） */
 const dateRange = ref<[string, string]>([
-  // 默认显示最近一周的数据（包含今天和前六天）
-  dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
-  dayjs().format('YYYY-MM-DD'),
+  // 默认显示最近一周的数据（截至昨天）
+  dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
 ]);

 /** 将日期范围转换为带时分秒的格式 */
@ -97,6 +97,8 @@ async function fetchMessageData() {
  loading.value = true;
  try {
    messageData.value = await getDeviceMessageSummaryByDate(queryParams);
+  } catch {
+    messageData.value = [];
  } finally {
    loading.value = false;
    await renderChartWhenReady();
--- a/apps/web-antd/src/views/iot/product/product/data.ts
+++ b/apps/web-antd/src/views/iot/product/product/data.ts
@ -130,7 +130,10 @@ export function useBasicFormSchema(
      // 网关子设备走网关联网，不需要联网方式
      dependencies: {
        triggerFields: ['deviceType'],
-        show: (values) => values.deviceType !== DeviceTypeEnum.GATEWAY_SUB,
+        show: (values) =>
+          [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(
+            values.deviceType,
+          ),
      },
      rules: 'required',
    },
--- a/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
+++ b/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
@ -84,13 +84,14 @@ async function copyToClipboard(text: string) {
      >
        <DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
      </Descriptions.Item>
-      <Descriptions.Item v-if="product.productSecret" label="ProductSecret">
+      <Descriptions.Item label="产品密钥">
        <span v-if="showProductSecret">{{ product.productSecret }}</span>
        <span v-else>********</span>
        <Button class="ml-2" size="small" @click="toggleProductSecretVisible">
          {{ showProductSecret ? '隐藏' : '显示' }}
        </Button>
        <Button
+          v-if="showProductSecret && product.productSecret"
          class="ml-2"
          size="small"
          @click="copyToClipboard(product.productSecret || '')"
--- a/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
@ -50,9 +50,9 @@ const queryParams = ref({
 });

 /** 获取分类名称 */
-function getCategoryName(categoryId: number) {
-  const category = props.categoryList.find((c: any) => c.id === categoryId);
-  return category?.name || '未分类';
+function getCategoryName(item: any) {
+  const category = props.categoryList.find((c: any) => c.id === item.categoryId);
+  return item.categoryName || category?.name || '未分类';
 }

 /** 获取产品列表 */
@ -146,7 +146,7 @@ onMounted(() => {
                    产品分类
                  </span>
                  <span class="truncate font-medium text-primary">
-                    {{ getCategoryName(item.categoryId) }}
+                    {{ getCategoryName(item) }}
                  </span>
                </div>
                <div class="mb-2 flex items-center text-[13px]">
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
@ -69,6 +69,10 @@ const TRIGGER_TYPE_TO_GROUP: Record<
    label: THING_MODEL_GROUP_LABELS.PROPERTY,
    modelType: IoTThingModelTypeEnum.PROPERTY,
  },
+  [IotRuleSceneTriggerTypeEnum.TIMER]: {
+    label: THING_MODEL_GROUP_LABELS.PROPERTY,
+    modelType: IoTThingModelTypeEnum.PROPERTY,
+  },
  [IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST]: {
    label: THING_MODEL_GROUP_LABELS.EVENT,
    modelType: IoTThingModelTypeEnum.EVENT,
--- a/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
@ -136,7 +136,9 @@ function validateTriggers(_rule: any, value: any, callback: any) {
        callback(new Error(`触发器 ${i + 1}：设备不能为空`));
        return;
      }
-      if (!trigger.identifier) {
+      const isStateUpdate =
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE;
+      if (!isStateUpdate && !trigger.identifier) {
        callback(new Error(`触发器 ${i + 1}：物模型标识符不能为空`));
        return;
      }
--- a/apps/web-antd/src/views/iot/thingmodel/modules/form.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/form.vue
@ -148,9 +148,6 @@ function fillExtraAttributes(data: any) {
      data.dataType = data.event.dataType;
      data.event.identifier = data.identifier;
      data.event.name = data.name;
-      if (isEmpty(data.event.outputParams)) {
-        delete data.event.outputParams;
-      }
      delete data.property;
      delete data.service;

@ -171,12 +168,6 @@ function fillExtraAttributes(data: any) {
      data.dataType = data.service.dataType;
      data.service.identifier = data.identifier;
      data.service.name = data.name;
-      if (isEmpty(data.service.inputParams)) {
-        delete data.service.inputParams;
-      }
-      if (isEmpty(data.service.outputParams)) {
-        delete data.service.outputParams;
-      }
      delete data.property;
      delete data.event;

--- a/apps/web-ele/src/api/iot/thingmodel/index.ts
+++ b/apps/web-ele/src/api/iot/thingmodel/index.ts
@ -148,8 +148,8 @@ export const ThingModelFormRules: Record<string, FormItemRule[]> = {
  identifier: [
    { required: true, message: '标识符不能为空', trigger: 'blur' },
    {
-      pattern: /^\w{1,50}$/,
-      message: '支持大小写字母、数字和下划线，不超过 50 个字符',
+      pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,31}$/,
+      message: '支持大小写字母、数字和下划线，必须以字母开头，不超过 32 个字符',
      trigger: 'blur',
    },
    {
--- a/apps/web-ele/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
+++ b/apps/web-ele/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
@ -31,14 +31,14 @@ const timeRangeOptions = [
    label: '最近 7 天',
    value: () => [
      dayjs().subtract(7, 'day').startOf('day'),
-      dayjs().endOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
    ],
  },
  {
    label: '最近 30 天',
    value: () => [
      dayjs().subtract(30, 'day').startOf('day'),
-      dayjs().endOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
    ],
  },
 ];
--- a/apps/web-ele/src/views/iot/device/device/data.ts
+++ b/apps/web-ele/src/views/iot/device/device/data.ts
@ -79,10 +79,18 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
      },
      rules: z
        .string()
-        .min(4, '备注名称长度限制为 4~64 个字符')
-        .max(64, '备注名称长度限制为 4~64 个字符')
-        .regex(
-          /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/,
+        .refine(
+          (value) => {
+            const length = value.replaceAll(
+              /[\u4E00-\u9FA5\u3040-\u30FF]/g,
+              'aa',
+            ).length;
+            return length >= 4 && length <= 64;
+          },
+          '备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符',
+        )
+        .refine(
+          (value) => /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/.test(value),
          '备注名称只能包含中文、英文字母、日文、数字和下划线（_）',
        )
        .optional()
--- a/apps/web-ele/src/views/iot/device/device/index.vue
+++ b/apps/web-ele/src/views/iot/device/device/index.vue
@ -214,6 +214,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
    columns: useGridColumns(),
    height: 'auto',
    keepSource: true,
+    pagerConfig: {
+      pageSize: 12,
+    },
    proxyConfig: {
      ajax: {
        query: async ({
@ -467,7 +470,7 @@ onMounted(async () => {
              label: '日志',
              type: 'primary',
              link: true,
-              auth: ['iot:device:message-query'],
+              auth: ['iot:device:query'],
              onClick: openModel.bind(null, row.id!),
            },
            {
--- a/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
@ -225,7 +225,7 @@ onMounted(() => {
                详情
              </ElButton>
              <ElButton
-                v-if="hasAccessByCodes(['iot:device:message-query'])"
+                v-if="hasAccessByCodes(['iot:device:query'])"
                size="small"
                class="!h-8 min-w-0 flex-1 rounded-md !border-[#fa8c16] !text-[13px] !text-[#fa8c16] transition-all duration-200 hover:!bg-[#fa8c16] hover:!text-white"
                @click="emit('model', item.id!)"
--- a/apps/web-ele/src/views/iot/device/device/modules/import-form.vue
+++ b/apps/web-ele/src/views/iot/device/device/modules/import-form.vue
@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { IotDeviceApi } from '#/api/iot/device/device';

-import { useVbenModal } from '@vben/common-ui';
+import { alert, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';

 import { ElButton, ElMessage, ElUpload } from 'element-plus';
@ -59,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
            text += `< ${deviceName}: ${importData.failureDeviceNames[deviceName]} >`;
          }
        }
-        ElMessage.info(text);
+        await alert(text, '导入结果');
      }
      // 关闭并提示
      await modalApi.close();
--- a/apps/web-ele/src/views/iot/device/group/data.ts
+++ b/apps/web-ele/src/views/iot/device/group/data.ts
@ -2,7 +2,7 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';

-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 import { z } from '#/adapter/form';
@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
      },
-      rules: z.number().default(CommonStatusEnum.ENABLE),
+      rules: 'required',
    },
    {
      fieldName: 'description',
--- a/apps/web-ele/src/views/iot/home/modules/message-trend-card.vue
+++ b/apps/web-ele/src/views/iot/home/modules/message-trend-card.vue
@ -30,9 +30,9 @@ const isFirstMount = ref(true); // 首次挂载标记，用于跳过子组件 mo

 /** 时间范围（仅日期，不包含时分秒） */
 const dateRange = ref<[string, string]>([
-  // 默认显示最近一周的数据（包含今天和前六天）
-  dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
-  dayjs().format('YYYY-MM-DD'),
+  // 默认显示最近一周的数据（截至昨天）
+  dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
 ]);

 /** 将日期范围转换为带时分秒的格式 */
@ -97,6 +97,8 @@ async function fetchMessageData() {
  loading.value = true;
  try {
    messageData.value = await getDeviceMessageSummaryByDate(queryParams);
+  } catch {
+    messageData.value = [];
  } finally {
    loading.value = false;
    await renderChartWhenReady();
--- a/apps/web-ele/src/views/iot/product/product/data.ts
+++ b/apps/web-ele/src/views/iot/product/product/data.ts
@ -127,7 +127,10 @@ export function useBasicFormSchema(
      // 网关子设备走网关联网，不需要联网方式
      dependencies: {
        triggerFields: ['deviceType'],
-        show: (values) => values.deviceType !== DeviceTypeEnum.GATEWAY_SUB,
+        show: (values) =>
+          [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(
+            values.deviceType,
+          ),
      },
      rules: 'required',
    },
--- a/apps/web-ele/src/views/iot/product/product/detail/modules/info.vue
+++ b/apps/web-ele/src/views/iot/product/product/detail/modules/info.vue
@ -91,13 +91,14 @@ async function copyToClipboard(text: string) {
      >
        <DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
      </ElDescriptionsItem>
-      <ElDescriptionsItem v-if="product.productSecret" label="ProductSecret">
+      <ElDescriptionsItem label="产品密钥">
        <span v-if="showProductSecret">{{ product.productSecret }}</span>
        <span v-else>********</span>
        <ElButton class="ml-2" size="small" @click="toggleProductSecretVisible">
          {{ showProductSecret ? '隐藏' : '显示' }}
        </ElButton>
        <ElButton
+          v-if="showProductSecret && product.productSecret"
          class="ml-2"
          size="small"
          @click="copyToClipboard(product.productSecret || '')"
--- a/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
@ -50,9 +50,9 @@ const queryParams = ref({
 });

 /** 获取分类名称 */
-function getCategoryName(categoryId: number) {
-  const category = props.categoryList.find((c: any) => c.id === categoryId);
-  return category?.name || '未分类';
+function getCategoryName(item: any) {
+  const category = props.categoryList.find((c: any) => c.id === item.categoryId);
+  return item.categoryName || category?.name || '未分类';
 }

 /** 获取产品列表 */
@ -140,7 +140,7 @@ onMounted(() => {
                    产品分类
                  </span>
                  <span class="truncate font-medium text-foreground">
-                    {{ getCategoryName(item.categoryId) }}
+                    {{ getCategoryName(item) }}
                  </span>
                </div>
                <div class="mb-2 flex items-center text-[13px]">
--- a/apps/web-ele/src/views/iot/rule/scene/form/selectors/property-selector.vue
+++ b/apps/web-ele/src/views/iot/rule/scene/form/selectors/property-selector.vue
@ -73,7 +73,10 @@ const thingModelTSL = ref<null | ThingModelApi.ThingModelTSL>(null); // 物模
 const propertyGroups = computed(() => {
  const groups: { label: string; options: any[] }[] = [];

-  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
+  if (
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.TIMER
+  ) {
    groups.push({
      label: THING_MODEL_GROUP_LABELS.PROPERTY,
      options: propertyList.value.filter(
--- a/apps/web-ele/src/views/iot/rule/scene/modules/form.vue
+++ b/apps/web-ele/src/views/iot/rule/scene/modules/form.vue
@ -136,7 +136,9 @@ function validateTriggers(_rule: any, value: any, callback: any) {
        callback(new Error(`触发器 ${i + 1}：设备不能为空`));
        return;
      }
-      if (!trigger.identifier) {
+      const isStateUpdate =
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE;
+      if (!isStateUpdate && !trigger.identifier) {
        callback(new Error(`触发器 ${i + 1}：物模型标识符不能为空`));
        return;
      }
--- a/apps/web-ele/src/views/iot/thingmodel/modules/form.vue
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/form.vue
@ -155,9 +155,6 @@ function fillExtraAttributes(data: any) {
      data.dataType = data.event.dataType;
      data.event.identifier = data.identifier;
      data.event.name = data.name;
-      if (isEmpty(data.event.outputParams)) {
-        delete data.event.outputParams;
-      }
      delete data.property;
      delete data.service;

@ -178,12 +175,6 @@ function fillExtraAttributes(data: any) {
      data.dataType = data.service.dataType;
      data.service.identifier = data.identifier;
      data.service.name = data.name;
-      if (isEmpty(data.service.inputParams)) {
-        delete data.service.inputParams;
-      }
-      if (isEmpty(data.service.outputParams)) {
-        delete data.service.outputParams;
-      }
      delete data.property;
      delete data.event;