Vue3 + Element Plus版本iot前端迁移到vben版本

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

@@ -0,0 +1,105 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getSimpleProductList } from '#/api/iot/product/product';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleProductList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: getRangePickerDefaultProps(),
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '规则编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '规则名称',
+      minWidth: 150,
+    },
+    {
+      field: 'productId',
+      title: '所属产品',
+      minWidth: 150,
+      slots: { default: 'product' },
+    },
+    {
+      field: 'description',
+      title: '规则描述',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '规则状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sinkCount',
+      title: '数据流转数',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DataRuleForm from './rule/DataRuleForm.vue';
+
+/** IoT 数据流转规则列表 */
+defineOptions({ name: 'IoTDataRule' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DataRuleForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建规则 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑规则 */
+function handleEdit(row: any) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除规则 */
+async function handleDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDataRule(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDataRulePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="数据规则列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['iot:data-rule:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:data-rule:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:data-rule:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDataRule,
+  getDataRule,
+  updateDataRule,
+} from '#/api/iot/rule/data/rule';
+import { getDataSinkSimpleList } from '#/api/iot/rule/data/sink';
+import { $t } from '#/locales';
+
+import { useRuleFormSchema } from './data';
+import SourceConfigForm from './components/SourceConfigForm.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<any>();
+const sourceConfigRef = ref();
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['数据规则'])
+    : $t('ui.actionTitle.create', ['数据规则']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useRuleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+
+    // 校验数据源配置
+    await sourceConfigRef.value?.validate();
+    
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as any;
+    data.sourceConfigs = sourceConfigRef.value?.getData() || [];
+
+    try {
+      await (formData.value?.id ? updateDataRule(data) : createDataRule(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      sourceConfigRef.value?.setData([]);
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<any>();
+    
+    // 加载数据目的列表
+    const sinkList = await getDataSinkSimpleList();
+    formApi.updateSchema([
+      {
+        fieldName: 'sinkIds',
+        componentProps: {
+          options: sinkList.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          })),
+        },
+      },
+    ]);
+
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDataRule(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 设置数据源配置
+      await nextTick();
+      sourceConfigRef.value?.setData(formData.value.sourceConfigs || []);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-4/5" :title="getTitle">
+    <Form class="mx-4" />
+    <div class="mx-4 mt-4">
+      <div class="text-sm font-medium mb-2">数据源配置</div>
+      <SourceConfigForm ref="sourceConfigRef" />
+    </div>
+  </Modal>
+</template>

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

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+
+import { Table, Select, Button, Form, FormItem } from 'ant-design-vue';
+
+import { getSimpleProductList } from '#/api/iot/product/product';
+import { getSimpleDeviceList } from '#/api/iot/device/device';
+import { getThingModelListByProductId } from '#/api/iot/thingmodel';
+import {
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '#/views/iot/utils/constants';
+
+const formData = ref<any[]>([]);
+const productList = ref<any[]>([]); // 产品列表
+const deviceList = ref<any[]>([]); // 设备列表
+const thingModelCache = ref<Map<number, any[]>>(new Map()); // 缓存物模型数据，key 为 productId
+
+const formRules: any = reactive({
+  productId: [{ required: true, message: '产品不能为空', trigger: 'change' }],
+  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
+  method: [{ required: true, message: '消息方法不能为空', trigger: 'change' }],
+});
+const formRef = ref(); // 表单 Ref
+
+// 获取上行消息方法列表
+const upstreamMethods = computed(() => {
+  return Object.values(IotDeviceMessageMethodEnum).filter((item) => item.upstream);
+});
+
+/** 根据产品 ID 过滤设备 */
+const getFilteredDevices = (productId: number) => {
+  if (!productId) return [];
+  return deviceList.value.filter((device: any) => device.productId === productId);
+};
+
+/** 判断是否需要显示标识符选择器 */
+const shouldShowIdentifierSelect = (row: any) => {
+  return [
+    IotDeviceMessageMethodEnum.EVENT_POST.method,
+    IotDeviceMessageMethodEnum.PROPERTY_POST.method,
+  ].includes(row.method);
+};
+
+/** 获取物模型选项 */
+const getThingModelOptions = (row: any) => {
+  if (!row.productId || !shouldShowIdentifierSelect(row)) {
+    return [];
+  }
+  const thingModels: any[] = thingModelCache.value.get(row.productId) || [];
+  let filteredModels: any[] = [];
+  if (row.method === IotDeviceMessageMethodEnum.EVENT_POST.method) {
+    filteredModels = thingModels.filter(
+      (item: any) => item.type === IoTThingModelTypeEnum.EVENT,
+    );
+  } else if (row.method === IotDeviceMessageMethodEnum.PROPERTY_POST.method) {
+    filteredModels = thingModels.filter(
+      (item: any) => item.type === IoTThingModelTypeEnum.PROPERTY,
+    );
+  }
+  return filteredModels.map((item: any) => ({
+    label: `${item.name} (${item.identifier})`,
+    value: item.identifier,
+  }));
+};
+
+/** 加载产品列表 */
+const loadProductList = async () => {
+  try {
+    productList.value = await getSimpleProductList();
+  } catch (error) {
+    console.error('加载产品列表失败:', error);
+  }
+};
+
+/** 加载设备列表 */
+const loadDeviceList = async () => {
+  try {
+    deviceList.value = await getSimpleDeviceList();
+  } catch (error) {
+    console.error('加载设备列表失败:', error);
+  }
+};
+
+/** 加载物模型数据 */
+const loadThingModel = async (productId: number) => {
+  // 已缓存，无需重复加载
+  if (thingModelCache.value.has(productId)) {
+    return;
+  }
+  try {
+    const thingModels = await getThingModelListByProductId(productId);
+    thingModelCache.value.set(productId, thingModels);
+  } catch (error) {
+    console.error('加载物模型失败:', error);
+  }
+};
+
+/** 产品变化时处理 */
+const handleProductChange = async (row: any, _index: number) => {
+  row.deviceId = 0;
+  row.method = undefined;
+  row.identifier = undefined;
+  row.identifierLoading = false;
+};
+
+/** 消息方法变化时处理 */
+const handleMethodChange = async (row: any, _index: number) => {
+  // 清空标识符
+  row.identifier = undefined;
+  // 如果需要加载物模型数据
+  if (shouldShowIdentifierSelect(row) && row.productId) {
+    row.identifierLoading = true;
+    await loadThingModel(row.productId);
+    row.identifierLoading = false;
+  }
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  const row = {
+    productId: undefined,
+    deviceId: undefined,
+    method: undefined,
+    identifier: undefined,
+    identifierLoading: false,
+  };
+  formData.value.push(row);
+};
+
+/** 删除按钮操作 */
+const handleDelete = (index: number) => {
+  formData.value.splice(index, 1);
+};
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate();
+};
+
+/** 表单值 */
+const getData = () => {
+  return formData.value;
+};
+
+/** 设置表单值 */
+const setData = (data: any[]) => {
+  // 确保每个项都有必要的字段
+  formData.value = (data || []).map((item) => ({
+    ...item,
+    identifierLoading: false,
+  }));
+  // 为已有数据预加载物模型
+  data?.forEach(async (item) => {
+    if (item.productId && shouldShowIdentifierSelect(item)) {
+      await loadThingModel(item.productId);
+    }
+  });
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await Promise.all([loadProductList(), loadDeviceList()]);
+});
+
+const columns = [
+  {
+    title: '产品',
+    dataIndex: 'productId',
+    width: 200,
+  },
+  {
+    title: '设备',
+    dataIndex: 'deviceId',
+    width: 200,
+  },
+  {
+    title: '消息',
+    dataIndex: 'method',
+    width: 200,
+  },
+  {
+    title: '标识符',
+    dataIndex: 'identifier',
+    width: 250,
+  },
+  {
+    title: '操作',
+    width: 80,
+    fixed: 'right' as const,
+  },
+];
+
+defineExpose({ validate, getData, setData });
+</script>
+
+<template>
+  <Form ref="formRef" :model="{ data: formData }">
+    <Table
+      :columns="columns"
+      :data-source="formData"
+      :pagination="false"
+      size="small"
+      bordered
+    >
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'productId'">
+          <FormItem
+            :name="['data', index, 'productId']"
+            :rules="formRules.productId"
+            class="mb-0"
+          >
+            <Select
+              v-model:value="record.productId"
+              placeholder="请选择产品"
+              show-search
+              :filter-option="
+                (input: string, option: any) =>
+                  option.label.toLowerCase().includes(input.toLowerCase())
+              "
+              :options="
+                productList.map((p: any) => ({ label: p.name, value: p.id }))
+              "
+              @change="() => handleProductChange(record, index)"
+            />
+          </FormItem>
+        </template>
+        <template v-else-if="column.dataIndex === 'deviceId'">
+          <FormItem
+            :name="['data', index, 'deviceId']"
+            :rules="formRules.deviceId"
+            class="mb-0"
+          >
+            <Select
+              v-model:value="record.deviceId"
+              placeholder="请选择设备"
+              show-search
+              :filter-option="
+                (input: string, option: any) =>
+                  option.label.toLowerCase().includes(input.toLowerCase())
+              "
+              :options="[
+                { label: '全部设备', value: 0 },
+                ...getFilteredDevices(record.productId).map((d: any) => ({
+                  label: d.deviceName,
+                  value: d.id,
+                })),
+              ]"
+            />
+          </FormItem>
+        </template>
+        <template v-else-if="column.dataIndex === 'method'">
+          <FormItem
+            :name="['data', index, 'method']"
+            :rules="formRules.method"
+            class="mb-0"
+          >
+            <Select
+              v-model:value="record.method"
+              placeholder="请选择消息"
+              show-search
+              :filter-option="
+                (input: string, option: any) =>
+                  option.label.toLowerCase().includes(input.toLowerCase())
+              "
+              :options="
+                upstreamMethods.map((m: any) => ({
+                  label: m.name,
+                  value: m.method,
+                }))
+              "
+              @change="() => handleMethodChange(record, index)"
+            />
+          </FormItem>
+        </template>
+        <template v-else-if="column.dataIndex === 'identifier'">
+          <FormItem :name="['data', index, 'identifier']" class="mb-0">
+            <Select
+              v-if="shouldShowIdentifierSelect(record)"
+              v-model:value="record.identifier"
+              placeholder="请选择标识符"
+              show-search
+              :loading="record.identifierLoading"
+              :filter-option="
+                (input: string, option: any) =>
+                  option.label.toLowerCase().includes(input.toLowerCase())
+              "
+              :options="getThingModelOptions(record)"
+            />
+          </FormItem>
+        </template>
+        <template v-else-if="column.title === '操作'">
+          <Button type="link" danger @click="handleDelete(index)">删除</Button>
+        </template>
+      </template>
+    </Table>
+    <div class="mt-3 text-center">
+      <Button type="primary" @click="handleAdd">
+        <Icon icon="ant-design:plus-outlined" class="mr-1" />
+        添加数据源
+      </Button>
+    </div>
+  </Form>
+</template>

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

@@ -0,0 +1,148 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: getRangePickerDefaultProps(),
+    },
+  ];
+}
+
+/** 规则表单 Schema */
+export function useRuleFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '规则描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入规则描述',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'sinkIds',
+      label: '数据目的',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择数据目的',
+        mode: 'multiple',
+        allowClear: true,
+        options: [],
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '规则编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '规则名称',
+      minWidth: 150,
+    },
+    {
+      field: 'description',
+      title: '规则描述',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '规则状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sourceConfigs',
+      title: '数据源',
+      minWidth: 100,
+      formatter: ({ cellValue }: any) => `${cellValue?.length || 0} 个`,
+    },
+    {
+      field: 'sinkIds',
+      title: '数据目的',
+      minWidth: 100,
+      formatter: ({ cellValue }: any) => `${cellValue?.length || 0} 个`,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+

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

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DataRuleForm from './DataRuleForm.vue';
+
+/** IoT 数据流转规则列表 */
+defineOptions({ name: 'IotDataRule' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DataRuleForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建规则 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑规则 */
+function handleEdit(row: any) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除规则 */
+async function handleDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDataRule(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDataRulePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="数据规则列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['iot:data-rule:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:data-rule:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:data-rule:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDataSink,
+  getDataSink,
+  updateDataSink,
+} from '#/api/iot/rule/data';
+import { $t } from '#/locales';
+
+import { useSinkFormSchema } from './data';
+import {
+  HttpConfigForm,
+  KafkaMQConfigForm,
+  MqttConfigForm,
+  RabbitMQConfigForm,
+  RedisStreamConfigForm,
+  RocketMQConfigForm,
+} from './config';
+
+const IotDataSinkTypeEnum = {
+  HTTP: 1,
+  MQTT: 2,
+  ROCKETMQ: 3,
+  KAFKA: 4,
+  RABBITMQ: 5,
+  REDIS_STREAM: 6,
+} as const;
+
+const emit = defineEmits(['success']);
+const formData = ref<any>();
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['数据目的'])
+    : $t('ui.actionTitle.create', ['数据目的']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useSinkFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as any;
+    data.config = formData.value.config;
+
+    try {
+      await (formData.value?.id ? updateDataSink(data) : createDataSink(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<any>();
+
+    if (!data || !data.id) {
+      formData.value = {
+        type: IotDataSinkTypeEnum.HTTP,
+        status: 0,
+        config: {},
+      };
+      await formApi.setValues(formData.value);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDataSink(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+// 监听类型变化，重置配置
+watch(
+  () => formApi.form.type,
+  (newType) => {
+    if (formData.value && newType !== formData.value.type) {
+      formData.value.config = {};
+    }
+  },
+);
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="getTitle">
+    <Form class="mx-4" />
+    <div v-if="formData" class="mx-4 mt-4">
+      <div class="text-sm font-medium mb-2">配置信息</div>
+      <HttpConfigForm
+        v-if="IotDataSinkTypeEnum.HTTP === formData.type"
+        v-model="formData.config"
+      />
+      <MqttConfigForm
+        v-if="IotDataSinkTypeEnum.MQTT === formData.type"
+        v-model="formData.config"
+      />
+      <RocketMQConfigForm
+        v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
+        v-model="formData.config"
+      />
+      <KafkaMQConfigForm
+        v-if="IotDataSinkTypeEnum.KAFKA === formData.type"
+        v-model="formData.config"
+      />
+      <RabbitMQConfigForm
+        v-if="IotDataSinkTypeEnum.RABBITMQ === formData.type"
+        v-model="formData.config"
+      />
+      <RedisStreamConfigForm
+        v-if="IotDataSinkTypeEnum.REDIS_STREAM === formData.type"
+        v-model="formData.config"
+      />
+    </div>
+  </Modal>
+</template>

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

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { Input, Select, FormItem } from 'ant-design-vue';
+import { useVModel } from '@vueuse/core';
+import { isEmpty } from '@vben/utils';
+
+import KeyValueEditor from './components/KeyValueEditor.vue';
+
+defineOptions({ name: 'HttpConfigForm' });
+
+const props = defineProps<{
+  modelValue: any;
+}>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit) as Ref<any>;
+
+// noinspection HttpUrlsUsage
+/** URL处理 */
+const urlPrefix = ref('http://');
+const urlPath = ref('');
+const fullUrl = computed(() => {
+  return urlPath.value ? urlPrefix.value + urlPath.value : '';
+});
+
+/** 监听 URL 变化 */
+watch([urlPrefix, urlPath], () => {
+  config.value.url = fullUrl.value;
+});
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    // 初始化 URL
+    if (config.value.url) {
+      if (config.value.url.startsWith('https://')) {
+        urlPrefix.value = 'https://';
+        urlPath.value = config.value.url.substring(8);
+      } else if (config.value.url.startsWith('http://')) {
+        urlPrefix.value = 'http://';
+        urlPath.value = config.value.url.substring(7);
+      } else {
+        urlPath.value = config.value.url;
+      }
+    }
+    return;
+  }
+
+  config.value = {
+    url: '',
+    method: 'POST',
+    headers: {},
+    query: {},
+    body: '',
+  };
+});
+
+const methodOptions = [
+  { label: 'GET', value: 'GET' },
+  { label: 'POST', value: 'POST' },
+  { label: 'PUT', value: 'PUT' },
+  { label: 'DELETE', value: 'DELETE' },
+];
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FormItem label="请求地址" required>
+      <Input v-model:value="urlPath" placeholder="请输入请求地址">
+        <template #addonBefore>
+          <Select
+            v-model:value="urlPrefix"
+            placeholder="Select"
+            style="width: 115px"
+            :options="[
+              { label: 'http://', value: 'http://' },
+              { label: 'https://', value: 'https://' },
+            ]"
+          />
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem label="请求方法" required>
+      <Select
+        v-model:value="config.method"
+        placeholder="请选择请求方法"
+        :options="methodOptions"
+      />
+    </FormItem>
+    <FormItem label="请求头">
+      <KeyValueEditor v-model="config.headers" add-button-text="添加请求头" />
+    </FormItem>
+    <FormItem label="请求参数">
+      <KeyValueEditor v-model="config.query" add-button-text="添加参数" />
+    </FormItem>
+    <FormItem label="请求体">
+      <Input.TextArea
+        v-model:value="config.body"
+        placeholder="请输入内容"
+        :rows="3"
+      />
+    </FormItem>
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { Input, Switch, FormItem } from 'ant-design-vue';
+import { useVModel } from '@vueuse/core';
+import { isEmpty } from '@vben/utils';
+
+defineOptions({ name: 'KafkaMQConfigForm' });
+
+const props = defineProps<{
+  modelValue: any;
+}>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit) as Ref<any>;
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    bootstrapServers: '',
+    username: '',
+    password: '',
+    ssl: false,
+    topic: '',
+  };
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FormItem label="服务地址" required>
+      <Input
+        v-model:value="config.bootstrapServers"
+        placeholder="请输入服务地址，如：localhost:9092"
+      />
+    </FormItem>
+    <FormItem label="用户名">
+      <Input v-model:value="config.username" placeholder="请输入用户名" />
+    </FormItem>
+    <FormItem label="密码">
+      <Input.Password
+        v-model:value="config.password"
+        placeholder="请输入密码"
+      />
+    </FormItem>
+    <FormItem label="启用 SSL" required>
+      <Switch v-model:checked="config.ssl" />
+    </FormItem>
+    <FormItem label="主题" required>
+      <Input v-model:value="config.topic" placeholder="请输入主题" />
+    </FormItem>
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { Input, FormItem } from 'ant-design-vue';
+import { useVModel } from '@vueuse/core';
+import { isEmpty } from '@vben/utils';
+
+defineOptions({ name: 'MqttConfigForm' });
+
+const props = defineProps<{
+  modelValue: any;
+}>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit) as Ref<any>;
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    url: '',
+    username: '',
+    password: '',
+    clientId: '',
+    topic: '',
+  };
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FormItem label="服务地址" required>
+      <Input
+        v-model:value="config.url"
+        placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883"
+      />
+    </FormItem>
+    <FormItem label="用户名" required>
+      <Input v-model:value="config.username" placeholder="请输入用户名" />
+    </FormItem>
+    <FormItem label="密码" required>
+      <Input.Password
+        v-model:value="config.password"
+        placeholder="请输入密码"
+      />
+    </FormItem>
+    <FormItem label="客户端ID" required>
+      <Input v-model:value="config.clientId" placeholder="请输入客户端ID" />
+    </FormItem>
+    <FormItem label="主题" required>
+      <Input v-model:value="config.topic" placeholder="请输入主题" />
+    </FormItem>
+  </div>
+</template>

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

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { Input, InputNumber, FormItem } from 'ant-design-vue';
+import { useVModel } from '@vueuse/core';
+import { isEmpty } from '@vben/utils';
+
+defineOptions({ name: 'RabbitMQConfigForm' });
+
+const props = defineProps<{
+  modelValue: any;
+}>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit) as Ref<any>;
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    host: '',
+    port: 5672,
+    username: '',
+    password: '',
+    virtualHost: '/',
+    exchange: '',
+    routingKey: '',
+    queue: '',
+  };
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FormItem label="主机地址" required>
+      <Input
+        v-model:value="config.host"
+        placeholder="请输入主机地址，如：localhost"
+      />
+    </FormItem>
+    <FormItem label="端口" required>
+      <InputNumber
+        v-model:value="config.port"
+        :min="1"
+        :max="65535"
+        placeholder="请输入端口，如：5672"
+        class="w-full"
+      />
+    </FormItem>
+    <FormItem label="用户名" required>
+      <Input v-model:value="config.username" placeholder="请输入用户名" />
+    </FormItem>
+    <FormItem label="密码" required>
+      <Input.Password
+        v-model:value="config.password"
+        placeholder="请输入密码"
+      />
+    </FormItem>
+    <FormItem label="虚拟主机" required>
+      <Input
+        v-model:value="config.virtualHost"
+        placeholder="请输入虚拟主机，如：/"
+      />
+    </FormItem>
+    <FormItem label="交换机" required>
+      <Input v-model:value="config.exchange" placeholder="请输入交换机名称" />
+    </FormItem>
+    <FormItem label="路由键" required>
+      <Input v-model:value="config.routingKey" placeholder="请输入路由键" />
+    </FormItem>
+    <FormItem label="队列" required>
+      <Input v-model:value="config.queue" placeholder="请输入队列名称" />
+    </FormItem>
+  </div>
+</template>

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

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { Input, InputNumber, FormItem } from 'ant-design-vue';
+import { useVModel } from '@vueuse/core';
+import { isEmpty } from '@vben/utils';
+
+defineOptions({ name: 'RedisStreamConfigForm' });
+
+const props = defineProps<{
+  modelValue: any;
+}>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit) as Ref<any>;
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    url: '',
+    password: '',
+    database: 0,
+    streamKey: '',
+  };
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FormItem label="服务地址" required>
+      <Input
+        v-model:value="config.url"
+        placeholder="请输入Redis服务地址，如：redis://127.0.0.1:6379"
+      />
+    </FormItem>
+    <FormItem label="密码">
+      <Input.Password
+        v-model:value="config.password"
+        placeholder="请输入密码"
+      />
+    </FormItem>
+    <FormItem label="数据库索引" required>
+      <InputNumber
+        v-model:value="config.database"
+        :min="0"
+        :max="15"
+        placeholder="请输入数据库索引"
+        class="w-full"
+      />
+    </FormItem>
+    <FormItem label="Stream Key" required>
+      <Input v-model:value="config.streamKey" placeholder="请输入Stream Key" />
+    </FormItem>
+  </div>
+</template>

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

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { Input, FormItem } from 'ant-design-vue';
+import { useVModel } from '@vueuse/core';
+import { isEmpty } from '@vben/utils';
+
+defineOptions({ name: 'RocketMQConfigForm' });
+
+const props = defineProps<{
+  modelValue: any;
+}>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit) as Ref<any>;
+
+/** 组件初始化 */
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    nameServer: '',
+    accessKey: '',
+    secretKey: '',
+    group: '',
+    topic: '',
+    tags: '',
+  };
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <FormItem label="NameServer" required>
+      <Input
+        v-model:value="config.nameServer"
+        placeholder="请输入 NameServer 地址，如：127.0.0.1:9876"
+      />
+    </FormItem>
+    <FormItem label="AccessKey" required>
+      <Input v-model:value="config.accessKey" placeholder="请输入 AccessKey" />
+    </FormItem>
+    <FormItem label="SecretKey" required>
+      <Input.Password
+        v-model:value="config.secretKey"
+        placeholder="请输入 SecretKey"
+      />
+    </FormItem>
+    <FormItem label="消费组" required>
+      <Input v-model:value="config.group" placeholder="请输入消费组" />
+    </FormItem>
+    <FormItem label="主题" required>
+      <Input v-model:value="config.topic" placeholder="请输入主题" />
+    </FormItem>
+    <FormItem label="标签">
+      <Input v-model:value="config.tags" placeholder="请输入标签" />
+    </FormItem>
+  </div>
+</template>

apps/web-antd/src/views/iot/rule/data/sink/config/components/KeyValueEditor.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-for="(item, index) in items" :key="index" class="flex mb-2 w-full">
+    <el-input v-model="item.key" class="mr-2" placeholder="键" />
+    <el-input v-model="item.value" placeholder="值" />
+    <el-button class="ml-2" text type="danger" @click="removeItem(index)">
+      <el-icon>
+        <Delete />
+      </el-icon>
+      删除
+    </el-button>
+  </div>
+  <el-button text type="primary" @click="addItem">
+    <el-icon>
+      <Plus />
+    </el-icon>
+    {{ addButtonText }}
+  </el-button>
+</template>
+
+<script lang="ts" setup>
+import { Delete, Plus } from '@element-plus/icons-vue'
+import { isEmpty } from '@vben/utils'
+
+defineOptions({ name: 'KeyValueEditor' })
+
+interface KeyValueItem {
+  key: string
+  value: string
+}
+
+const props = defineProps<{
+  modelValue: Record<string, string>
+  addButtonText: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+const items = ref<KeyValueItem[]>([]) // 内部 key-value 项列表
+
+/** 添加项目 */
+const addItem = () => {
+  items.value.push({ key: '', value: '' })
+  updateModelValue()
+}
+
+/** 移除项目 */
+const removeItem = (index: number) => {
+  items.value.splice(index, 1)
+  updateModelValue()
+}
+
+/** 更新 modelValue */
+const updateModelValue = () => {
+  const result: Record<string, string> = {}
+  items.value.forEach((item) => {
+    if (item.key) {
+      result[item.key] = item.value
+    }
+  })
+  emit('update:modelValue', result)
+}
+
+/** 监听项目变化 */
+watch(items, updateModelValue, { deep: true })
+watch(
+  () => props.modelValue,
+  (val) => {
+    // 列表有值后以列表中的值为准
+    if (isEmpty(val) || !isEmpty(items.value)) {
+      return
+    }
+    items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
+  }
+)
+</script>

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

@@ -0,0 +1,15 @@
+import HttpConfigForm from './HttpConfigForm.vue'
+import MqttConfigForm from './MqttConfigForm.vue'
+import RocketMQConfigForm from './RocketMQConfigForm.vue'
+import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
+import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
+import RedisStreamConfigForm from './RedisStreamConfigForm.vue'
+
+export {
+  HttpConfigForm,
+  MqttConfigForm,
+  RocketMQConfigForm,
+  KafkaMQConfigForm,
+  RabbitMQConfigForm,
+  RedisStreamConfigForm
+}

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

@@ -0,0 +1,153 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '目的名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入目的名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '目的状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '目的类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM, 'number'),
+        placeholder: '请选择目的类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: getRangePickerDefaultProps(),
+    },
+  ];
+}
+
+/** 目的表单 Schema */
+export function useSinkFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '目的名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入目的名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '目的描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入目的描述',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '目的类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM, 'number'),
+        placeholder: '请选择目的类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '目的状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      defaultValue: 0,
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '目的编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '目的名称',
+      minWidth: 150,
+    },
+    {
+      field: 'description',
+      title: '目的描述',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '目的状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'type',
+      title: '目的类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+

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

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDataSink, getDataSinkPage } from '#/api/iot/rule/data/sink';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DataSinkForm from './DataSinkForm.vue';
+
+/** IoT 数据流转目的 列表 */
+defineOptions({ name: 'IotDataSink' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DataSinkForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建数据目的 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑数据目的 */
+function handleEdit(row: any) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除数据目的 */
+async function handleDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDataSink(row.id);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDataSinkPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="数据目的列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['数据目的']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['iot:data-sink:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:data-sink:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:data-sink:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -1,28 +1,46 @@
 <script lang="ts" setup>
 import { Page } from '@vben/common-ui';
-
 import { Button } from 'ant-design-vue';
+
+defineOptions({ name: 'IotRuleDataBridge' });
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/iot/rule/databridge/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/iot/rule/databridge/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page
+    description="物聯網規則引擎 - 數據橋接"
+    title="數據橋接"
+  >
+    <div class="p-4">
+      <Button
+        danger
+        type="link"
+        target="_blank"
+        href="https://github.com/yudaocode/yudao-ui-admin-vue3/tree/master/src/views/iot/rule"
+      >
+        該功能支持 Vue3 + element-plus 版本！
+      </Button>
+      <br />
+      <Button
+        type="link"
+        target="_blank"
+        href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/iot/rule/data/rule/index.vue"
+      >
+        可參考源代碼進行遷移！
+      </Button>
+      <div class="mt-4">
+        <h3>功能說明：</h3>
+        <p>規則引擎包括：</p>
+        <ul>
+          <li>數據規則配置</li>
+          <li>數據轉發配置</li>
+          <li>場景聯動配置</li>
+        </ul>
+        <h3 class="mt-4">待實現：</h3>
+        <ul>
+          <li>⚠️ API 接口定義</li>
+          <li>⚠️ 頁面實現</li>
+        </ul>
+      </div>
+    </div>
   </Page>
 </template>

apps/web-antd/src/views/iot/rule/scene/data.ts

@@ -0,0 +1,136 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '规则名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入规则名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'description',
+      label: '规则描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入规则描述',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: getRangePickerDefaultProps(),
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '规则编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '规则名称',
+      minWidth: 150,
+    },
+    {
+      field: 'description',
+      title: '规则描述',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '规则状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'actionCount',
+      title: '执行动作数',
+      minWidth: 100,
+    },
+    {
+      field: 'executeCount',
+      title: '执行次数',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -0,0 +1,330 @@
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    :title="drawerTitle"
+    size="80%"
+    direction="rtl"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+  >
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px">
+      <!-- 基础信息配置 -->
+      <BasicInfoSection v-model="formData" :rules="formRules" />
+      <!-- 触发器配置 -->
+      <TriggerSection v-model:triggers="formData.triggers" />
+      <!-- 执行器配置 -->
+      <ActionSection v-model:actions="formData.actions" />
+    </el-form>
+    <template #footer>
+      <div class="drawer-footer">
+        <el-button :disabled="submitLoading" type="primary" @click="handleSubmit">
+          <Icon icon="ep:check" />
+          确 定
+        </el-button>
+        <el-button @click="handleClose">
+          <Icon icon="ep:close" />
+          取 消
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import BasicInfoSection from './sections/BasicInfoSection.vue'
+import TriggerSection from './sections/TriggerSection.vue'
+import ActionSection from './sections/ActionSection.vue'
+import { IotSceneRule } from '#/api/iot/rule/scene'
+import { RuleSceneApi } from '#/api/iot/rule/scene'
+import {
+  IotRuleSceneTriggerTypeEnum,
+  IotRuleSceneActionTypeEnum,
+  isDeviceTrigger
+} from '#/views/iot/utils/constants'
+import { ElMessage } from 'element-plus'
+import { CommonStatusEnum } from '@/utils/constants'
+
+/** IoT 场景联动规则表单 - 主表单组件 */
+defineOptions({ name: 'RuleSceneForm' })
+
+/** 组件属性定义 */
+const props = defineProps<{
+  /** 抽屉显示状态 */
+  modelValue: boolean
+  /** 编辑的场景联动规则数据 */
+  ruleScene?: IotSceneRule
+}>()
+
+/** 组件事件定义 */
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'success'): void
+}>()
+
+const drawerVisible = useVModel(props, 'modelValue', emit) // 抽屉显示状态
+
+/**
+ * 创建默认的表单数据
+ * @returns 默认表单数据对象
+ */
+const createDefaultFormData = (): IotSceneRule => {
+  return {
+    name: '',
+    description: '',
+    status: CommonStatusEnum.ENABLE, // 默认启用状态
+    triggers: [
+      {
+        type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+        productId: undefined,
+        deviceId: undefined,
+        identifier: undefined,
+        operator: undefined,
+        value: undefined,
+        cronExpression: undefined,
+        conditionGroups: [] // 空的条件组数组
+      }
+    ],
+    actions: []
+  }
+}
+
+const formRef = ref() // 表单引用
+const formData = ref<IotSceneRule>(createDefaultFormData()) // 表单数据
+
+/**
+ * 触发器校验器
+ * @param _rule 校验规则（未使用）
+ * @param value 校验值
+ * @param callback 回调函数
+ */
+const validateTriggers = (_rule: any, value: any, callback: any) => {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    callback(new Error('至少需要一个触发器'))
+    return
+  }
+
+  for (let i = 0; i < value.length; i++) {
+    const trigger = value[i]
+
+    // 校验触发器类型
+    if (!trigger.type) {
+      callback(new Error(`触发器 ${i + 1}: 触发器类型不能为空`))
+      return
+    }
+
+    // 校验设备触发器
+    if (isDeviceTrigger(trigger.type)) {
+      if (!trigger.productId) {
+        callback(new Error(`触发器 ${i + 1}: 产品不能为空`))
+        return
+      }
+      if (!trigger.deviceId) {
+        callback(new Error(`触发器 ${i + 1}: 设备不能为空`))
+        return
+      }
+      if (!trigger.identifier) {
+        callback(new Error(`触发器 ${i + 1}: 物模型标识符不能为空`))
+        return
+      }
+      if (!trigger.operator) {
+        callback(new Error(`触发器 ${i + 1}: 操作符不能为空`))
+        return
+      }
+      if (trigger.value === undefined || trigger.value === null || trigger.value === '') {
+        callback(new Error(`触发器 ${i + 1}: 参数值不能为空`))
+        return
+      }
+    }
+
+    // 校验定时触发器
+    if (trigger.type === IotRuleSceneTriggerTypeEnum.TIMER) {
+      if (!trigger.cronExpression) {
+        callback(new Error(`触发器 ${i + 1}: CRON表达式不能为空`))
+        return
+      }
+    }
+  }
+
+  callback()
+}
+
+/**
+ * 执行器校验器
+ * @param _rule 校验规则（未使用）
+ * @param value 校验值
+ * @param callback 回调函数
+ */
+const validateActions = (_rule: any, value: any, callback: any) => {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    callback(new Error('至少需要一个执行器'))
+    return
+  }
+
+  for (let i = 0; i < value.length; i++) {
+    const action = value[i]
+
+    // 校验执行器类型
+    if (!action.type) {
+      callback(new Error(`执行器 ${i + 1}: 执行器类型不能为空`))
+      return
+    }
+
+    // 校验设备控制执行器
+    if (
+      action.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET ||
+      action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
+    ) {
+      if (!action.productId) {
+        callback(new Error(`执行器 ${i + 1}: 产品不能为空`))
+        return
+      }
+      if (!action.deviceId) {
+        callback(new Error(`执行器 ${i + 1}: 设备不能为空`))
+        return
+      }
+
+      // 服务调用需要验证服务标识符
+      if (action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE) {
+        if (!action.identifier) {
+          callback(new Error(`执行器 ${i + 1}: 服务不能为空`))
+          return
+        }
+      }
+
+      if (!action.params || Object.keys(action.params).length === 0) {
+        callback(new Error(`执行器 ${i + 1}: 参数配置不能为空`))
+        return
+      }
+    }
+
+    // 校验告警执行器
+    if (
+      action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER ||
+      action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER
+    ) {
+      if (!action.alertConfigId) {
+        callback(new Error(`执行器 ${i + 1}: 告警配置不能为空`))
+        return
+      }
+    }
+  }
+
+  callback()
+}
+
+const formRules = reactive({
+  name: [
+    { required: true, message: '场景名称不能为空', trigger: 'blur' },
+    { type: 'string', min: 1, max: 50, message: '场景名称长度应在1-50个字符之间', trigger: 'blur' }
+  ],
+  status: [
+    { required: true, message: '场景状态不能为空', trigger: 'change' },
+    {
+      type: 'enum',
+      enum: [CommonStatusEnum.ENABLE, CommonStatusEnum.DISABLE],
+      message: '状态值必须为启用或禁用',
+      trigger: 'change'
+    }
+  ],
+  description: [
+    { type: 'string', max: 200, message: '场景描述不能超过200个字符', trigger: 'blur' }
+  ],
+  triggers: [{ required: true, validator: validateTriggers, trigger: 'change' }],
+  actions: [{ required: true, validator: validateActions, trigger: 'change' }]
+}) // 表单校验规则
+
+const submitLoading = ref(false) // 提交加载状态
+const isEdit = ref(false) // 是否为编辑模式
+const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则')) // 抽屉标题
+
+/** 提交表单 */
+const handleSubmit = async () => {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  // 提交请求
+  submitLoading.value = true
+  try {
+    if (isEdit.value) {
+      // 更新场景联动规则
+      await RuleSceneApi.updateRuleScene(formData.value)
+      ElMessage.success('更新成功')
+    } else {
+      // 创建场景联动规则
+      await RuleSceneApi.createRuleScene(formData.value)
+      ElMessage.success('创建成功')
+    }
+
+    // 关闭抽屉并触发成功事件
+    drawerVisible.value = false
+    emit('success')
+  } catch (error) {
+    console.error('保存失败:', error)
+    ElMessage.error(isEdit.value ? '更新失败' : '创建失败')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+/** 处理抽屉关闭事件 */
+const handleClose = () => {
+  drawerVisible.value = false
+}
+
+/** 初始化表单数据 */
+const initFormData = () => {
+  if (props.ruleScene) {
+    // 编辑模式：数据结构已对齐，直接使用后端数据
+    isEdit.value = true
+    formData.value = {
+      ...props.ruleScene,
+      // 确保触发器数组不为空
+      triggers: props.ruleScene.triggers?.length
+        ? props.ruleScene.triggers
+        : [
+            {
+              type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+              productId: undefined,
+              deviceId: undefined,
+              identifier: undefined,
+              operator: undefined,
+              value: undefined,
+              cronExpression: undefined,
+              conditionGroups: []
+            }
+          ],
+      // 确保执行器数组不为空
+      actions: props.ruleScene.actions || []
+    }
+  } else {
+    // 新增模式：使用默认数据
+    isEdit.value = false
+    formData.value = createDefaultFormData()
+  }
+}
+
+/** 监听抽屉显示 */
+watch(drawerVisible, async (visible) => {
+  if (visible) {
+    initFormData()
+    // 重置表单验证状态
+    await nextTick()
+    formRef.value?.clearValidate()
+  }
+})
+
+/** 监听编辑数据变化 */
+watch(
+  () => props.ruleScene,
+  () => {
+    if (drawerVisible.value) {
+      initFormData()
+    }
+  },
+  { deep: true }
+)
+</script>

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

@@ -0,0 +1,81 @@
+<!-- 告警配置组件 -->
+<template>
+  <div class="w-full">
+    <el-form-item label="告警配置" required>
+      <el-select
+        v-model="localValue"
+        placeholder="请选择告警配置"
+        filterable
+        clearable
+        @change="handleChange"
+        class="w-full"
+        :loading="loading"
+      >
+        <el-option
+          v-for="config in alertConfigs"
+          :key="config.id"
+          :label="config.name"
+          :value="config.id"
+        >
+          <div class="flex items-center justify-between">
+            <span>{{ config.name }}</span>
+            <el-tag :type="config.enabled ? 'success' : 'danger'" size="small">
+              {{ config.enabled ? '启用' : '禁用' }}
+            </el-tag>
+          </div>
+        </el-option>
+      </el-select>
+    </el-form-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { AlertConfigApi } from '#/api/iot/alert/config'
+
+/** 告警配置组件 */
+defineOptions({ name: 'AlertConfig' })
+
+const props = defineProps<{
+  modelValue?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void
+}>()
+
+const localValue = useVModel(props, 'modelValue', emit)
+
+const loading = ref(false) // 加载状态
+const alertConfigs = ref<any[]>([]) // 告警配置列表
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的值
+ */
+const handleChange = (value?: number) => {
+  emit('update:modelValue', value)
+}
+
+/**
+ * 加载告警配置列表
+ */
+const loadAlertConfigs = async () => {
+  loading.value = true
+  try {
+    const data = await AlertConfigApi.getAlertConfigPage({
+      pageNo: 1,
+      pageSize: 100,
+      enabled: true // 只加载启用的配置
+    })
+    alertConfigs.value = data.list || []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadAlertConfigs()
+})
+</script>

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

@@ -0,0 +1,301 @@
+<!-- 单个条件配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <!-- 条件类型选择 -->
+    <el-row :gutter="16">
+      <el-col :span="8">
+        <el-form-item label="条件类型" required>
+          <el-select
+            :model-value="condition.type"
+            @update:model-value="(value) => updateConditionField('type', value)"
+            @change="handleConditionTypeChange"
+            placeholder="请选择条件类型"
+            class="w-full"
+          >
+            <el-option
+              v-for="option in getConditionTypeOptions()"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 产品设备选择 - 设备相关条件的公共部分 -->
+    <el-row v-if="isDeviceCondition" :gutter="16">
+      <el-col :span="12">
+        <el-form-item label="产品" required>
+          <ProductSelector
+            :model-value="condition.productId"
+            @update:model-value="(value) => updateConditionField('productId', value)"
+            @change="handleProductChange"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设备" required>
+          <DeviceSelector
+            :model-value="condition.deviceId"
+            @update:model-value="(value) => updateConditionField('deviceId', value)"
+            :product-id="condition.productId"
+            @change="handleDeviceChange"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 设备状态条件配置 -->
+    <div
+      v-if="condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS"
+      class="flex flex-col gap-16px"
+    >
+      <!-- 状态和操作符选择 -->
+      <el-row :gutter="16">
+        <!-- 操作符选择 -->
+        <el-col :span="12">
+          <el-form-item label="操作符" required>
+            <el-select
+              :model-value="condition.operator"
+              @update:model-value="(value) => updateConditionField('operator', value)"
+              placeholder="请选择操作符"
+              class="w-full"
+            >
+              <el-option
+                v-for="option in statusOperatorOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <!-- 状态选择 -->
+        <el-col :span="12">
+          <el-form-item label="设备状态" required>
+            <el-select
+              :model-value="condition.param"
+              @update:model-value="(value) => updateConditionField('param', value)"
+              placeholder="请选择设备状态"
+              class="w-full"
+            >
+              <el-option
+                v-for="option in deviceStatusOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 设备属性条件配置 -->
+    <div
+      v-else-if="condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY"
+      class="space-y-16px"
+    >
+      <!-- 属性配置 -->
+      <el-row :gutter="16">
+        <!-- 属性/事件/服务选择 -->
+        <el-col :span="6">
+          <el-form-item label="监控项" required>
+            <PropertySelector
+              :model-value="condition.identifier"
+              @update:model-value="(value) => updateConditionField('identifier', value)"
+              :trigger-type="triggerType"
+              :product-id="condition.productId"
+              :device-id="condition.deviceId"
+              @change="handlePropertyChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 操作符选择 -->
+        <el-col :span="6">
+          <el-form-item label="操作符" required>
+            <OperatorSelector
+              :model-value="condition.operator"
+              @update:model-value="(value) => updateConditionField('operator', value)"
+              :property-type="propertyType"
+              @change="handleOperatorChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 值输入 -->
+        <el-col :span="12">
+          <el-form-item label="比较值" required>
+            <ValueInput
+              :model-value="condition.param"
+              @update:model-value="(value) => updateConditionField('param', value)"
+              :property-type="propertyType"
+              :operator="condition.operator"
+              :property-config="propertyConfig"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 当前时间条件配置 -->
+    <CurrentTimeConditionConfig
+      v-else-if="condition.type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME"
+      :model-value="condition"
+      @update:model-value="updateCondition"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue'
+import ProductSelector from '../selectors/ProductSelector.vue'
+import DeviceSelector from '../selectors/DeviceSelector.vue'
+import PropertySelector from '../selectors/PropertySelector.vue'
+import OperatorSelector from '../selectors/OperatorSelector.vue'
+import ValueInput from '../inputs/ValueInput.vue'
+import type { TriggerCondition } from '#/api/iot/rule/scene'
+import {
+  IotRuleSceneTriggerConditionTypeEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+  getConditionTypeOptions,
+  IoTDeviceStatusEnum
+} from '#/views/iot/utils/constants'
+
+/** 单个条件配置组件 */
+defineOptions({ name: 'ConditionConfig' })
+
+const props = defineProps<{
+  modelValue: TriggerCondition
+  triggerType: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TriggerCondition): void
+}>()
+
+/** 获取设备状态选项 */
+const deviceStatusOptions = [
+  {
+    value: IoTDeviceStatusEnum.ONLINE.value,
+    label: IoTDeviceStatusEnum.ONLINE.label
+  },
+  {
+    value: IoTDeviceStatusEnum.OFFLINE.value,
+    label: IoTDeviceStatusEnum.OFFLINE.label
+  }
+]
+
+/** 获取状态操作符选项 */
+const statusOperatorOptions = [
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name
+  }
+]
+
+const condition = useVModel(props, 'modelValue', emit)
+
+const propertyType = ref<string>('string') // 属性类型
+const propertyConfig = ref<any>(null) // 属性配置
+const isDeviceCondition = computed(() => {
+  return (
+    condition.value.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
+    condition.value.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
+  )
+}) // 计算属性：判断是否为设备相关条件
+
+/**
+ * 更新条件字段
+ * @param field 字段名
+ * @param value 字段值
+ */
+const updateConditionField = (field: any, value: any) => {
+  ;(condition.value as any)[field] = value
+  emit('update:modelValue', condition.value)
+}
+
+/**
+ * 更新整个条件对象
+ * @param newCondition 新的条件对象
+ */
+const updateCondition = (newCondition: TriggerCondition) => {
+  condition.value = newCondition
+  emit('update:modelValue', condition.value)
+}
+
+/**
+ * 处理条件类型变化事件
+ * @param type 条件类型
+ */
+const handleConditionTypeChange = (type: number) => {
+  // 根据条件类型清理字段
+  const isCurrentTime = type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
+  const isDeviceStatus = type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
+
+  // 清理标识符字段（时间条件和设备状态条件都不需要）
+  if (isCurrentTime || isDeviceStatus) {
+    condition.value.identifier = undefined
+  }
+
+  // 清理设备相关字段（仅时间条件需要）
+  if (isCurrentTime) {
+    condition.value.productId = undefined
+    condition.value.deviceId = undefined
+  }
+
+  // 设置默认操作符
+  condition.value.operator = isCurrentTime
+    ? 'at_time'
+    : IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
+
+  // 清空参数值
+  condition.value.param = ''
+}
+
+/** 处理产品变化事件 */
+const handleProductChange = (_: number) => {
+  // 产品变化时清空设备和属性
+  condition.value.deviceId = undefined
+  condition.value.identifier = ''
+}
+
+/** 处理设备变化事件 */
+const handleDeviceChange = (_: number) => {
+  // 设备变化时清空属性
+  condition.value.identifier = ''
+}
+
+/**
+ * 处理属性变化事件
+ * @param propertyInfo 属性信息对象
+ */
+const handlePropertyChange = (propertyInfo: { type: string; config: any }) => {
+  propertyType.value = propertyInfo.type
+  propertyConfig.value = propertyInfo.config
+
+  // 重置操作符和值
+  condition.value.operator = IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
+  condition.value.param = ''
+}
+
+/** 处理操作符变化事件 */
+const handleOperatorChange = () => {
+  // 重置值
+  condition.value.param = ''
+}
+</script>
+
+<style scoped>
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,234 @@
+<!-- 当前时间条件配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <el-row :gutter="16">
+      <!-- 时间操作符选择 -->
+      <el-col :span="8">
+        <el-form-item label="时间条件" required>
+          <el-select
+            :model-value="condition.operator"
+            @update:model-value="(value) => updateConditionField('operator', value)"
+            placeholder="请选择时间条件"
+            class="w-full"
+          >
+            <el-option
+              v-for="option in timeOperatorOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            >
+              <div class="flex items-center justify-between w-full">
+                <div class="flex items-center gap-8px">
+                  <Icon :icon="option.icon" :class="option.iconClass" />
+                  <span>{{ option.label }}</span>
+                </div>
+                <el-tag :type="option.tag as any" size="small">{{ option.category }}</el-tag>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <!-- 时间值输入 -->
+      <el-col :span="8">
+        <el-form-item label="时间值" required>
+          <el-time-picker
+            v-if="needsTimeInput"
+            :model-value="timeValue"
+            @update:model-value="handleTimeValueChange"
+            placeholder="请选择时间"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            class="w-full"
+          />
+          <el-date-picker
+            v-else-if="needsDateInput"
+            :model-value="timeValue"
+            @update:model-value="handleTimeValueChange"
+            type="datetime"
+            placeholder="请选择日期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="w-full"
+          />
+          <div v-else class="text-[var(--el-text-color-placeholder)] text-14px">
+            无需设置时间值
+          </div>
+        </el-form-item>
+      </el-col>
+
+      <!-- 第二个时间值（范围条件） -->
+      <el-col :span="8" v-if="needsSecondTimeInput">
+        <el-form-item label="结束时间" required>
+          <el-time-picker
+            v-if="needsTimeInput"
+            :model-value="timeValue2"
+            @update:model-value="handleTimeValue2Change"
+            placeholder="请选择结束时间"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            class="w-full"
+          />
+          <el-date-picker
+            v-else
+            :model-value="timeValue2"
+            @update:model-value="handleTimeValue2Change"
+            type="datetime"
+            placeholder="请选择结束日期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="w-full"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { IotRuleSceneTriggerTimeOperatorEnum } from '#/views/iot/utils/constants'
+import type { TriggerCondition } from '#/api/iot/rule/scene'
+
+/** 当前时间条件配置组件 */
+defineOptions({ name: 'CurrentTimeConditionConfig' })
+
+const props = defineProps<{
+  modelValue: TriggerCondition
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TriggerCondition): void
+}>()
+
+const condition = useVModel(props, 'modelValue', emit)
+
+// 时间操作符选项
+const timeOperatorOptions = [
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
+    icon: 'ep:arrow-left',
+    iconClass: 'text-blue-500',
+    tag: 'primary',
+    category: '时间点'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.name,
+    icon: 'ep:arrow-right',
+    iconClass: 'text-green-500',
+    tag: 'success',
+    category: '时间点'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.name,
+    icon: 'ep:sort',
+    iconClass: 'text-orange-500',
+    tag: 'warning',
+    category: '时间段'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
+    icon: 'ep:position',
+    iconClass: 'text-purple-500',
+    tag: 'info',
+    category: '时间点'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.TODAY.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
+    icon: 'ep:calendar',
+    iconClass: 'text-red-500',
+    tag: 'danger',
+    category: '日期'
+  }
+]
+
+// 计算属性：是否需要时间输入
+const needsTimeInput = computed(() => {
+  const timeOnlyOperators = [
+    IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value
+  ]
+  return timeOnlyOperators.includes(condition.value.operator as any)
+})
+
+// 计算属性：是否需要日期输入
+const needsDateInput = computed(() => {
+  return false // 暂时不支持日期输入，只支持时间
+})
+
+// 计算属性：是否需要第二个时间输入
+const needsSecondTimeInput = computed(() => {
+  return condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
+})
+
+// 计算属性：从 param 中解析时间值
+const timeValue = computed(() => {
+  if (!condition.value.param) return ''
+  const params = condition.value.param.split(',')
+  return params[0] || ''
+})
+
+// 计算属性：从 param 中解析第二个时间值
+const timeValue2 = computed(() => {
+  if (!condition.value.param) return ''
+  const params = condition.value.param.split(',')
+  return params[1] || ''
+})
+
+/**
+ * 更新条件字段
+ * @param field 字段名
+ * @param value 字段值
+ */
+const updateConditionField = (field: any, value: any) => {
+  condition.value[field] = value
+}
+
+/**
+ * 处理第一个时间值变化
+ * @param value 时间值
+ */
+const handleTimeValueChange = (value: string) => {
+  const currentParams = condition.value.param ? condition.value.param.split(',') : []
+  currentParams[0] = value || ''
+
+  // 如果是范围条件，保留第二个值；否则只保留第一个值
+  if (needsSecondTimeInput.value) {
+    condition.value.param = currentParams.slice(0, 2).join(',')
+  } else {
+    condition.value.param = currentParams[0]
+  }
+}
+
+/**
+ * 处理第二个时间值变化
+ * @param value 时间值
+ */
+const handleTimeValue2Change = (value: string) => {
+  const currentParams = condition.value.param ? condition.value.param.split(',') : ['']
+  currentParams[1] = value || ''
+  condition.value.param = currentParams.slice(0, 2).join(',')
+}
+
+/** 监听操作符变化，清理不相关的时间值 */
+watch(
+  () => condition.value.operator,
+  (newOperator) => {
+    if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
+      // 今日条件不需要时间参数
+      condition.value.param = ''
+    } else if (!needsSecondTimeInput.value) {
+      // 非范围条件只保留第一个时间值
+      const currentParams = condition.value.param ? condition.value.param.split(',') : []
+      condition.value.param = currentParams[0] || ''
+    }
+  }
+)
+</script>

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

@@ -0,0 +1,376 @@
+<!-- 设备控制配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
+    <el-row :gutter="16">
+      <el-col :span="12">
+        <el-form-item label="产品" required>
+          <ProductSelector v-model="action.productId" @change="handleProductChange" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设备" required>
+          <DeviceSelector
+            v-model="action.deviceId"
+            :product-id="action.productId"
+            @change="handleDeviceChange"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 服务选择 - 服务调用类型时显示 -->
+    <div v-if="action.productId && isServiceInvokeAction" class="space-y-16px">
+      <el-form-item label="服务" required>
+        <el-select
+          v-model="action.identifier"
+          placeholder="请选择服务"
+          filterable
+          clearable
+          class="w-full"
+          :loading="loadingServices"
+          @change="handleServiceChange"
+        >
+          <el-option
+            v-for="service in serviceList"
+            :key="service.identifier"
+            :label="service.name"
+            :value="service.identifier"
+          >
+            <div class="flex items-center justify-between">
+              <span>{{ service.name }}</span>
+              <el-tag :type="service.callType === 'sync' ? 'primary' : 'success'" size="small">
+                {{ service.callType === 'sync' ? '同步' : '异步' }}
+              </el-tag>
+            </div>
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <!-- 服务参数配置 -->
+      <div v-if="action.identifier" class="space-y-16px">
+        <el-form-item label="服务参数" required>
+          <JsonParamsInput
+            v-model="paramsValue"
+            type="service"
+            :config="{ service: selectedService } as any"
+            placeholder="请输入 JSON 格式的服务参数"
+          />
+        </el-form-item>
+      </div>
+    </div>
+
+    <!-- 控制参数配置 - 属性设置类型时显示 -->
+    <div v-if="action.productId && isPropertySetAction" class="space-y-16px">
+      <!-- 参数配置 -->
+      <el-form-item label="参数" required>
+        <JsonParamsInput
+          v-model="paramsValue"
+          type="property"
+          :config="{ properties: thingModelProperties }"
+          placeholder="请输入 JSON 格式的控制参数"
+        />
+      </el-form-item>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import ProductSelector from '../selectors/ProductSelector.vue'
+import DeviceSelector from '../selectors/DeviceSelector.vue'
+import JsonParamsInput from '../inputs/JsonParamsInput.vue'
+import type { Action } from '#/api/iot/rule/scene'
+import type { ThingModelProperty, ThingModelService } from '#/api/iot/thingmodel'
+import {
+  IotRuleSceneActionTypeEnum,
+  IoTThingModelAccessModeEnum,
+  IoTDataSpecsDataTypeEnum
+} from '#/views/iot/utils/constants'
+import { ThingModelApi } from '#/api/iot/thingmodel'
+
+/** 设备控制配置组件 */
+defineOptions({ name: 'DeviceControlConfig' })
+
+const props = defineProps<{
+  modelValue: Action
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Action): void
+}>()
+
+const action = useVModel(props, 'modelValue', emit)
+
+const thingModelProperties = ref<ThingModelProperty[]>([]) // 物模型属性列表
+const loadingThingModel = ref(false) // 物模型加载状态
+const selectedService = ref<ThingModelService | null>(null) // 选中的服务对象
+const serviceList = ref<ThingModelService[]>([]) // 服务列表
+const loadingServices = ref(false) // 服务加载状态
+
+// 参数值的计算属性，用于双向绑定
+const paramsValue = computed({
+  get: () => {
+    // 如果 params 是对象，转换为 JSON 字符串（兼容旧数据）
+    if (action.value.params && typeof action.value.params === 'object') {
+      return JSON.stringify(action.value.params, null, 2)
+    }
+    // 如果 params 已经是字符串，直接返回
+    return action.value.params || ''
+  },
+  set: (value: string) => {
+    // 直接保存为 JSON 字符串，不进行解析转换
+    action.value.params = value.trim() || ''
+  }
+})
+
+// 计算属性：是否为属性设置类型
+const isPropertySetAction = computed(() => {
+  return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
+})
+
+// 计算属性：是否为服务调用类型
+const isServiceInvokeAction = computed(() => {
+  return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
+})
+
+/**
+ * 处理产品变化事件
+ * @param productId 产品 ID
+ */
+const handleProductChange = (productId?: number) => {
+  // 当产品变化时，清空设备选择和参数配置
+  if (action.value.productId !== productId) {
+    action.value.deviceId = undefined
+    action.value.identifier = undefined // 清空服务标识符
+    action.value.params = '' // 清空参数，保存为空字符串
+    selectedService.value = null // 清空选中的服务
+    serviceList.value = [] // 清空服务列表
+  }
+
+  // 加载新产品的物模型属性或服务列表
+  if (productId) {
+    if (isPropertySetAction.value) {
+      loadThingModelProperties(productId)
+    } else if (isServiceInvokeAction.value) {
+      loadServiceList(productId)
+    }
+  }
+}
+
+/**
+ * 处理设备变化事件
+ * @param deviceId 设备 ID
+ */
+const handleDeviceChange = (deviceId?: number) => {
+  // 当设备变化时，清空参数配置
+  if (action.value.deviceId !== deviceId) {
+    action.value.params = '' // 清空参数，保存为空字符串
+  }
+}
+
+/**
+ * 处理服务变化事件
+ * @param serviceIdentifier 服务标识符
+ */
+const handleServiceChange = (serviceIdentifier?: string) => {
+  // 根据服务标识符找到对应的服务对象
+  const service = serviceList.value.find((s) => s.identifier === serviceIdentifier) || null
+  selectedService.value = service
+
+  // 当服务变化时，清空参数配置
+  action.value.params = ''
+
+  // 如果选择了服务且有输入参数，生成默认参数结构
+  if (service && service.inputParams && service.inputParams.length > 0) {
+    const defaultParams = {}
+    service.inputParams.forEach((param) => {
+      defaultParams[param.identifier] = getDefaultValueForParam(param)
+    })
+    // 将默认参数转换为 JSON 字符串保存
+    action.value.params = JSON.stringify(defaultParams, null, 2)
+  }
+}
+
+/**
+ * 获取物模型TSL数据
+ * @param productId 产品ID
+ * @returns 物模型TSL数据
+ */
+const getThingModelTSL = async (productId: number) => {
+  if (!productId) return null
+
+  try {
+    return await ThingModelApi.getThingModelTSLByProductId(productId)
+  } catch (error) {
+    console.error('获取物模型TSL数据失败:', error)
+    return null
+  }
+}
+
+/**
+ * 加载物模型属性（可写属性）
+ * @param productId 产品ID
+ */
+const loadThingModelProperties = async (productId: number) => {
+  if (!productId) {
+    thingModelProperties.value = []
+    return
+  }
+
+  try {
+    loadingThingModel.value = true
+    const tslData = await getThingModelTSL(productId)
+
+    if (!tslData?.properties) {
+      thingModelProperties.value = []
+      return
+    }
+
+    // 过滤出可写的属性（accessMode 包含 'w'）
+    thingModelProperties.value = tslData.properties.filter(
+      (property: ThingModelProperty) =>
+        property.accessMode &&
+        (property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
+          property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value)
+    )
+  } catch (error) {
+    console.error('加载物模型属性失败:', error)
+    thingModelProperties.value = []
+  } finally {
+    loadingThingModel.value = false
+  }
+}
+
+/**
+ * 加载服务列表
+ * @param productId 产品ID
+ */
+const loadServiceList = async (productId: number) => {
+  if (!productId) {
+    serviceList.value = []
+    return
+  }
+
+  try {
+    loadingServices.value = true
+    const tslData = await getThingModelTSL(productId)
+
+    if (!tslData?.services) {
+      serviceList.value = []
+      return
+    }
+
+    serviceList.value = tslData.services
+  } catch (error) {
+    console.error('加载服务列表失败:', error)
+    serviceList.value = []
+  } finally {
+    loadingServices.value = false
+  }
+}
+
+/**
+ * 从TSL加载服务信息（用于编辑模式回显）
+ * @param productId 产品ID
+ * @param serviceIdentifier 服务标识符
+ */
+const loadServiceFromTSL = async (productId: number, serviceIdentifier: string) => {
+  // 先加载服务列表
+  await loadServiceList(productId)
+
+  // 然后设置选中的服务
+  const service = serviceList.value.find((s: any) => s.identifier === serviceIdentifier)
+  if (service) {
+    selectedService.value = service
+  }
+}
+
+/**
+ * 根据参数类型获取默认值
+ * @param param 参数对象
+ * @returns 默认值
+ */
+const getDefaultValueForParam = (param: any) => {
+  switch (param.dataType) {
+    case IoTDataSpecsDataTypeEnum.INT:
+      return 0
+    case IoTDataSpecsDataTypeEnum.FLOAT:
+    case IoTDataSpecsDataTypeEnum.DOUBLE:
+      return 0.0
+    case IoTDataSpecsDataTypeEnum.BOOL:
+      return false
+    case IoTDataSpecsDataTypeEnum.TEXT:
+      return ''
+    case IoTDataSpecsDataTypeEnum.ENUM:
+      // 如果有枚举值，使用第一个
+      if (param.dataSpecs?.dataSpecsList && param.dataSpecs.dataSpecsList.length > 0) {
+        return param.dataSpecs.dataSpecsList[0].value
+      }
+      return ''
+    default:
+      return ''
+  }
+}
+
+const isInitialized = ref(false) // 防止重复初始化的标志
+
+/**
+ * 初始化组件数据
+ */
+const initializeComponent = async () => {
+  if (isInitialized.value) return
+
+  const currentAction = action.value
+  if (!currentAction) return
+
+  // 如果已经选择了产品且是属性设置类型，加载物模型
+  if (currentAction.productId && isPropertySetAction.value) {
+    await loadThingModelProperties(currentAction.productId)
+  }
+
+  // 如果是服务调用类型且已有标识符，初始化服务选择
+  if (currentAction.productId && isServiceInvokeAction.value && currentAction.identifier) {
+    // 加载物模型TSL以获取服务信息
+    await loadServiceFromTSL(currentAction.productId, currentAction.identifier)
+  }
+
+  isInitialized.value = true
+}
+
+/** 组件初始化 */
+onMounted(() => {
+  initializeComponent()
+})
+
+/** 监听关键字段的变化，避免深度监听导致的性能问题 */
+watch(
+  () => [action.value.productId, action.value.type, action.value.identifier],
+  async ([newProductId, , newIdentifier], [oldProductId, , oldIdentifier]) => {
+    // 避免初始化时的重复调用
+    if (!isInitialized.value) return
+
+    // 产品变化时重新加载数据
+    if (newProductId !== oldProductId) {
+      if (newProductId && isPropertySetAction.value) {
+        await loadThingModelProperties(newProductId as number)
+      } else if (newProductId && isServiceInvokeAction.value) {
+        await loadServiceList(newProductId as number)
+      }
+    }
+
+    // 服务标识符变化时更新选中的服务
+    if (
+      newIdentifier !== oldIdentifier &&
+      newProductId &&
+      isServiceInvokeAction.value &&
+      newIdentifier
+    ) {
+      const service = serviceList.value.find((s: any) => s.identifier === newIdentifier)
+      if (service) {
+        selectedService.value = service
+      }
+    }
+  }
+)
+</script>

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

@@ -0,0 +1,251 @@
+<!-- 设备触发配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <!-- 主条件配置 - 默认直接展示 -->
+    <div class="space-y-16px">
+      <!-- 主条件配置 -->
+      <div class="flex flex-col gap-16px">
+        <!-- 主条件配置 -->
+        <div class="space-y-16px">
+          <!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
+          <div
+            class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
+          >
+            <div class="flex items-center gap-12px">
+              <div class="flex items-center gap-8px text-16px font-600 text-green-700">
+                <div
+                  class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+                >
+                  主
+                </div>
+                <span>主条件</span>
+              </div>
+              <el-tag size="small" type="success">必须满足</el-tag>
+            </div>
+          </div>
+
+          <!-- 主条件内容配置 -->
+          <MainConditionInnerConfig
+            :model-value="trigger"
+            @update:model-value="updateCondition"
+            :trigger-type="trigger.type"
+            @trigger-type-change="handleTriggerTypeChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 条件组配置 -->
+    <div class="space-y-16px">
+      <!-- 条件组配置 -->
+      <div class="flex flex-col gap-16px">
+        <!-- 条件组容器头部 -->
+        <div
+          class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
+        >
+          <div class="flex items-center gap-12px">
+            <div class="flex items-center gap-8px text-16px font-600 text-green-700">
+              <div
+                class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+              >
+                组
+              </div>
+              <span>附加条件组</span>
+            </div>
+            <el-tag size="small" type="success">与"主条件"为且关系</el-tag>
+            <el-tag size="small" type="info">
+              {{ trigger.conditionGroups?.length || 0 }} 个子条件组
+            </el-tag>
+          </div>
+          <div class="flex items-center gap-8px">
+            <el-button
+              type="primary"
+              size="small"
+              @click="addSubGroup"
+              :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
+            >
+              <Icon icon="ep:plus" />
+              添加子条件组
+            </el-button>
+            <el-button type="danger" size="small" text @click="removeConditionGroup">
+              <Icon icon="ep:delete" />
+              删除条件组
+            </el-button>
+          </div>
+        </div>
+
+        <!-- 子条件组列表 -->
+        <div
+          v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
+          class="space-y-16px"
+        >
+          <!-- 逻辑关系说明 -->
+          <div class="relative">
+            <div
+              v-for="(subGroup, subGroupIndex) in trigger.conditionGroups"
+              :key="`sub-group-${subGroupIndex}`"
+              class="relative"
+            >
+              <!-- 子条件组容器 -->
+              <div
+                class="border-2 border-orange-200 rounded-8px bg-orange-50 shadow-sm hover:shadow-md transition-shadow"
+              >
+                <div
+                  class="flex items-center justify-between p-16px bg-gradient-to-r from-orange-50 to-yellow-50 border-b border-orange-200 rounded-t-6px"
+                >
+                  <div class="flex items-center gap-12px">
+                    <div class="flex items-center gap-8px text-16px font-600 text-orange-700">
+                      <div
+                        class="w-24px h-24px bg-orange-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+                      >
+                        {{ subGroupIndex + 1 }}
+                      </div>
+                      <span>子条件组 {{ subGroupIndex + 1 }}</span>
+                    </div>
+                    <el-tag size="small" type="warning" class="font-500">组内条件为"且"关系</el-tag>
+                    <el-tag size="small" type="info"> {{ subGroup?.length || 0 }}个条件 </el-tag>
+                  </div>
+                  <el-button
+                    type="danger"
+                    size="small"
+                    text
+                    @click="removeSubGroup(subGroupIndex)"
+                    class="hover:bg-red-50"
+                  >
+                    <Icon icon="ep:delete" />
+                    删除组
+                  </el-button>
+                </div>
+
+                <SubConditionGroupConfig
+                  :model-value="subGroup"
+                  @update:model-value="(value) => updateSubGroup(subGroupIndex, value)"
+                  :trigger-type="trigger.type"
+                  :max-conditions="maxConditionsPerGroup"
+                />
+              </div>
+
+              <!-- 子条件组间的"或"连接符 -->
+              <div
+                v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
+                class="flex items-center justify-center py-12px"
+              >
+                <div class="flex items-center gap-8px">
+                  <!-- 连接线 -->
+                  <div class="w-32px h-1px bg-orange-300"></div>
+                  <!-- 或标签 -->
+                  <div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
+                    <span class="text-14px font-600 text-orange-600">或</span>
+                  </div>
+                  <!-- 连接线 -->
+                  <div class="w-32px h-1px bg-orange-300"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <div
+          v-else
+          class="p-24px border-2 border-dashed border-orange-200 rounded-8px text-center bg-orange-50"
+        >
+          <div class="flex flex-col items-center gap-12px">
+            <Icon icon="ep:plus" class="text-32px text-orange-400" />
+            <div class="text-orange-600">
+              <p class="text-14px font-500 mb-4px">暂无子条件组</p>
+              <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
+import SubConditionGroupConfig from './SubConditionGroupConfig.vue'
+import type { Trigger } from '#/api/iot/rule/scene'
+
+/** 设备触发配置组件 */
+defineOptions({ name: 'DeviceTriggerConfig' })
+
+const props = defineProps<{
+  modelValue: Trigger
+  index: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Trigger): void
+  (e: 'trigger-type-change', type: number): void
+}>()
+
+const trigger = useVModel(props, 'modelValue', emit)
+
+const maxSubGroups = 3 // 最多 3 个子条件组
+const maxConditionsPerGroup = 3 // 每组最多 3 个条件
+
+/**
+ * 更新条件
+ * @param condition 条件对象
+ */
+const updateCondition = (condition: Trigger) => {
+  trigger.value = condition
+}
+
+/**
+ * 处理触发器类型变化事件
+ * @param type 触发器类型
+ */
+const handleTriggerTypeChange = (type: number) => {
+  trigger.value.type = type
+  emit('trigger-type-change', type)
+}
+
+/** 添加子条件组 */
+const addSubGroup = async () => {
+  if (!trigger.value.conditionGroups) {
+    trigger.value.conditionGroups = []
+  }
+
+  // 检查是否达到最大子组数量限制
+  if (trigger.value.conditionGroups?.length >= maxSubGroups) {
+    return
+  }
+
+  // 使用 nextTick 确保响应式更新完成后再添加新的子组
+  await nextTick()
+  if (trigger.value.conditionGroups) {
+    trigger.value.conditionGroups.push([])
+  }
+}
+
+/**
+ * 移除子条件组
+ * @param index 子条件组索引
+ */
+const removeSubGroup = (index: number) => {
+  if (trigger.value.conditionGroups) {
+    trigger.value.conditionGroups.splice(index, 1)
+  }
+}
+
+/**
+ * 更新子条件组
+ * @param index 子条件组索引
+ * @param subGroup 子条件组数据
+ */
+const updateSubGroup = (index: number, subGroup: any) => {
+  if (trigger.value.conditionGroups) {
+    trigger.value.conditionGroups[index] = subGroup
+  }
+}
+
+/** 移除整个条件组 */
+const removeConditionGroup = () => {
+  trigger.value.conditionGroups = undefined
+}
+</script>

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

@@ -0,0 +1,340 @@
+<template>
+  <div class="space-y-16px">
+    <!-- 触发事件类型选择 -->
+    <el-form-item label="触发事件类型" required>
+      <el-select
+        :model-value="triggerType"
+        @update:model-value="handleTriggerTypeChange"
+        placeholder="请选择触发事件类型"
+        class="w-full"
+      >
+        <el-option
+          v-for="option in triggerTypeOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
+
+    <!-- 设备属性条件配置 -->
+    <div v-if="isDevicePropertyTrigger" class="space-y-16px">
+      <!-- 产品设备选择 -->
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="产品" required>
+            <ProductSelector
+              :model-value="condition.productId"
+              @update:model-value="(value) => updateConditionField('productId', value)"
+              @change="handleProductChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备" required>
+            <DeviceSelector
+              :model-value="condition.deviceId"
+              @update:model-value="(value) => updateConditionField('deviceId', value)"
+              :product-id="condition.productId"
+              @change="handleDeviceChange"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 属性配置 -->
+      <el-row :gutter="16">
+        <!-- 属性/事件/服务选择 -->
+        <el-col :span="6">
+          <el-form-item label="监控项" required>
+            <PropertySelector
+              :model-value="condition.identifier"
+              @update:model-value="(value) => updateConditionField('identifier', value)"
+              :trigger-type="triggerType"
+              :product-id="condition.productId"
+              :device-id="condition.deviceId"
+              @change="handlePropertyChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 操作符选择 - 服务调用和事件上报不需要操作符 -->
+        <el-col v-if="needsOperatorSelector" :span="6">
+          <el-form-item label="操作符" required>
+            <OperatorSelector
+              :model-value="condition.operator"
+              @update:model-value="(value) => updateConditionField('operator', value)"
+              :property-type="propertyType"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 值输入 -->
+        <el-col :span="isWideValueColumn ? 18 : 12">
+          <el-form-item :label="valueInputLabel" required>
+            <!-- 服务调用参数配置 -->
+            <JsonParamsInput
+              v-if="triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE"
+              v-model="condition.value"
+              type="service"
+              :config="serviceConfig"
+              placeholder="请输入 JSON 格式的服务参数"
+            />
+            <!-- 事件上报参数配置 -->
+            <JsonParamsInput
+              v-else-if="triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST"
+              v-model="condition.value"
+              type="event"
+              :config="eventConfig"
+              placeholder="请输入 JSON 格式的事件参数"
+            />
+            <!-- 普通值输入 -->
+            <ValueInput
+              v-else
+              :model-value="condition.value"
+              @update:model-value="(value) => updateConditionField('value', value)"
+              :property-type="propertyType"
+              :operator="condition.operator"
+              :property-config="propertyConfig"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 设备状态条件配置 -->
+    <div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
+      <!-- 设备状态触发器使用简化的配置 -->
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="产品" required>
+            <ProductSelector
+              :model-value="condition.productId"
+              @update:model-value="(value) => updateConditionField('productId', value)"
+              @change="handleProductChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备" required>
+            <DeviceSelector
+              :model-value="condition.deviceId"
+              @update:model-value="(value) => updateConditionField('deviceId', value)"
+              :product-id="condition.productId"
+              @change="handleDeviceChange"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="16">
+        <el-col :span="6">
+          <el-form-item label="操作符" required>
+            <el-select
+              :model-value="condition.operator"
+              @update:model-value="(value) => updateConditionField('operator', value)"
+              placeholder="请选择操作符"
+              class="w-full"
+            >
+              <el-option
+                :label="IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name"
+                :value="IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="参数" required>
+            <el-select
+              :model-value="condition.value"
+              @update:model-value="(value) => updateConditionField('value', value)"
+              placeholder="请选择操作符"
+              class="w-full"
+            >
+              <el-option
+                v-for="option in deviceStatusChangeOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 其他触发类型的提示 -->
+    <div v-else class="text-center py-20px">
+      <p class="text-14px text-[var(--el-text-color-secondary)] mb-4px">
+        当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
+      </p>
+      <p class="text-12px text-[var(--el-text-color-placeholder)]">
+        此触发类型暂不需要配置额外条件
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProductSelector from '../selectors/ProductSelector.vue'
+import DeviceSelector from '../selectors/DeviceSelector.vue'
+import PropertySelector from '../selectors/PropertySelector.vue'
+import OperatorSelector from '../selectors/OperatorSelector.vue'
+import ValueInput from '../inputs/ValueInput.vue'
+import JsonParamsInput from '../inputs/JsonParamsInput.vue'
+
+import type { Trigger } from '#/api/iot/rule/scene'
+import {
+  IotRuleSceneTriggerTypeEnum,
+  triggerTypeOptions,
+  getTriggerTypeLabel,
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+  IoTDeviceStatusEnum
+} from '#/views/iot/utils/constants'
+import { useVModel } from '@vueuse/core'
+
+/** 主条件内部配置组件 */
+defineOptions({ name: 'MainConditionInnerConfig' })
+
+const props = defineProps<{
+  modelValue: Trigger
+  triggerType: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Trigger): void
+  (e: 'trigger-type-change', value: number): void
+}>()
+
+/** 获取设备状态变更选项（用于触发器配置） */
+const deviceStatusChangeOptions = [
+  {
+    label: IoTDeviceStatusEnum.ONLINE.label,
+    value: IoTDeviceStatusEnum.ONLINE.value
+  },
+  {
+    label: IoTDeviceStatusEnum.OFFLINE.label,
+    value: IoTDeviceStatusEnum.OFFLINE.value
+  }
+]
+
+const condition = useVModel(props, 'modelValue', emit)
+const propertyType = ref('') // 属性类型
+const propertyConfig = ref<any>(null) // 属性配置
+
+// 计算属性：是否为设备属性触发器
+const isDevicePropertyTrigger = computed(() => {
+  return (
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+  )
+})
+
+// 计算属性：是否为设备状态触发器
+const isDeviceStatusTrigger = computed(() => {
+  return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE
+})
+
+// 计算属性：是否需要操作符选择（服务调用和事件上报不需要操作符）
+const needsOperatorSelector = computed(() => {
+  const noOperatorTriggerTypes = [
+    IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+    IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
+  ] as number[]
+  return !noOperatorTriggerTypes.includes(props.triggerType)
+})
+
+// 计算属性：是否需要宽列布局（服务调用和事件上报不需要操作符列，所以值输入列更宽）
+const isWideValueColumn = computed(() => {
+  const wideColumnTriggerTypes = [
+    IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+    IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
+  ] as number[]
+  return wideColumnTriggerTypes.includes(props.triggerType)
+})
+
+// 计算属性：值输入字段的标签文本
+const valueInputLabel = computed(() => {
+  return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+    ? '服务参数'
+    : '比较值'
+})
+
+// 计算属性：服务配置 - 用于 JsonParamsInput
+const serviceConfig = computed(() => {
+  if (
+    propertyConfig.value &&
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+  ) {
+    return {
+      service: {
+        name: propertyConfig.value.name || '服务',
+        inputParams: propertyConfig.value.inputParams || []
+      }
+    }
+  }
+  return undefined
+})
+
+// 计算属性：事件配置 - 用于 JsonParamsInput
+const eventConfig = computed(() => {
+  if (propertyConfig.value && props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
+    return {
+      event: {
+        name: propertyConfig.value.name || '事件',
+        outputParams: propertyConfig.value.outputParams || []
+      }
+    }
+  }
+  return undefined
+})
+
+/**
+ * 更新条件字段
+ * @param field 字段名
+ * @param value 字段值
+ */
+const updateConditionField = (field: any, value: any) => {
+  condition.value[field] = value
+}
+
+/**
+ * 处理触发器类型变化事件
+ * @param type 触发器类型
+ */
+const handleTriggerTypeChange = (type: number) => {
+  emit('trigger-type-change', type)
+}
+
+/** 处理产品变化事件 */
+const handleProductChange = () => {
+  // 产品变化时清空设备和属性
+  condition.value.deviceId = undefined
+  condition.value.identifier = ''
+}
+
+/** 处理设备变化事件 */
+const handleDeviceChange = () => {
+  // 设备变化时清空属性
+  condition.value.identifier = ''
+}
+
+/**
+ * 处理属性变化事件
+ * @param propertyInfo 属性信息对象
+ */
+const handlePropertyChange = (propertyInfo: any) => {
+  if (propertyInfo) {
+    propertyType.value = propertyInfo.type
+    propertyConfig.value = propertyInfo.config
+
+    // 对于事件上报和服务调用，自动设置操作符为 '='
+    if (
+      props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+      props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+    ) {
+      condition.value.operator = IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="p-16px">
+    <!-- 空状态 -->
+    <div v-if="!subGroup || subGroup.length === 0" class="text-center py-24px">
+      <div class="flex flex-col items-center gap-12px">
+        <Icon icon="ep:plus" class="text-32px text-[var(--el-text-color-placeholder)]" />
+        <div class="text-[var(--el-text-color-secondary)]">
+          <p class="text-14px font-500 mb-4px">暂无条件</p>
+          <p class="text-12px">点击下方按钮添加第一个条件</p>
+        </div>
+        <el-button type="primary" @click="addCondition">
+          <Icon icon="ep:plus" />
+          添加条件
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 条件列表 -->
+    <div v-else class="space-y-16px">
+      <div
+        v-for="(condition, conditionIndex) in subGroup"
+        :key="`condition-${conditionIndex}`"
+        class="relative"
+      >
+        <!-- 条件配置 -->
+        <div
+          class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)] shadow-sm"
+        >
+          <div
+            class="flex items-center justify-between p-12px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)] rounded-t-4px"
+          >
+            <div class="flex items-center gap-8px">
+              <div
+                class="w-20px h-20px bg-blue-500 text-white rounded-full flex items-center justify-center text-10px font-bold"
+              >
+                {{ conditionIndex + 1 }}
+              </div>
+              <span class="text-12px font-500 text-[var(--el-text-color-primary)]"
+                >条件 {{ conditionIndex + 1 }}</span
+              >
+            </div>
+            <el-button
+              type="danger"
+              size="small"
+              text
+              @click="removeCondition(conditionIndex)"
+              v-if="subGroup!.length > 1"
+              class="hover:bg-red-50"
+            >
+              <Icon icon="ep:delete" />
+            </el-button>
+          </div>
+
+          <div class="p-12px">
+            <ConditionConfig
+              :model-value="condition"
+              @update:model-value="(value) => updateCondition(conditionIndex, value)"
+              :trigger-type="triggerType"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加条件按钮 -->
+      <div
+        v-if="subGroup && subGroup.length > 0 && subGroup.length < maxConditions"
+        class="text-center py-16px"
+      >
+        <el-button type="primary" plain @click="addCondition">
+          <Icon icon="ep:plus" />
+          继续添加条件
+        </el-button>
+        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]">
+          最多可添加 {{ maxConditions }} 个条件
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick } from 'vue'
+import { useVModel } from '@vueuse/core'
+import ConditionConfig from './ConditionConfig.vue'
+import type { TriggerCondition } from '#/api/iot/rule/scene'
+import {
+  IotRuleSceneTriggerConditionTypeEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum
+} from '#/views/iot/utils/constants'
+
+/** 子条件组配置组件 */
+defineOptions({ name: 'SubConditionGroupConfig' })
+
+const props = defineProps<{
+  modelValue: TriggerCondition[]
+  triggerType: number
+  maxConditions?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TriggerCondition[]): void
+}>()
+
+const subGroup = useVModel(props, 'modelValue', emit)
+
+const maxConditions = computed(() => props.maxConditions || 3) // 最大条件数量
+
+/** 添加条件 */
+const addCondition = async () => {
+  // 确保 subGroup.value 是一个数组
+  if (!subGroup.value) {
+    subGroup.value = []
+  }
+
+  // 检查是否达到最大条件数量限制
+  if (subGroup.value?.length >= maxConditions.value) {
+    return
+  }
+
+  const newCondition: TriggerCondition = {
+    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
+    productId: undefined,
+    deviceId: undefined,
+    identifier: '',
+    operator: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value, // 使用枚举默认值
+    param: ''
+  }
+
+  // 使用 nextTick 确保响应式更新完成后再添加新条件
+  await nextTick()
+  if (subGroup.value) {
+    subGroup.value.push(newCondition)
+  }
+}
+
+/**
+ * 移除条件
+ * @param index 条件索引
+ */
+const removeCondition = (index: number) => {
+  if (subGroup.value) {
+    subGroup.value.splice(index, 1)
+  }
+}
+
+/**
+ * 更新条件
+ * @param index 条件索引
+ * @param condition 条件对象
+ */
+const updateCondition = (index: number, condition: TriggerCondition) => {
+  if (subGroup.value) {
+    subGroup.value[index] = condition
+  }
+}
+</script>

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

@@ -0,0 +1,519 @@
+<!-- JSON参数输入组件 - 通用版本 -->
+<template>
+  <!-- 参数配置 -->
+  <div class="w-full space-y-12px">
+    <!-- JSON 输入框 -->
+    <div class="relative">
+      <el-input
+        v-model="paramsJson"
+        type="textarea"
+        :rows="4"
+        :placeholder="placeholder"
+        @input="handleParamsChange"
+        :class="{ 'is-error': jsonError }"
+      />
+      <!-- 查看详细示例弹出层 -->
+      <div class="absolute top-8px right-8px">
+        <el-popover
+          placement="left-start"
+          :width="450"
+          trigger="click"
+          :show-arrow="true"
+          :offset="8"
+          popper-class="json-params-detail-popover"
+        >
+          <template #reference>
+            <el-button
+              type="info"
+              :icon="InfoFilled"
+              circle
+              size="small"
+              :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
+            />
+          </template>
+
+          <!-- 弹出层内容 -->
+          <div class="json-params-detail-content">
+            <div class="flex items-center gap-8px mb-16px">
+              <Icon :icon="titleIcon" class="text-[var(--el-color-primary)] text-18px" />
+              <span class="text-16px font-600 text-[var(--el-text-color-primary)]">
+                {{ title }}
+              </span>
+            </div>
+
+            <div class="space-y-16px">
+              <!-- 参数列表 -->
+              <div v-if="paramsList.length > 0">
+                <div class="flex items-center gap-8px mb-8px">
+                  <Icon :icon="paramsIcon" class="text-[var(--el-color-primary)] text-14px" />
+                  <span class="text-14px font-500 text-[var(--el-text-color-primary)]">
+                    {{ paramsLabel }}
+                  </span>
+                </div>
+                <div class="ml-22px space-y-8px">
+                  <div
+                    v-for="param in paramsList"
+                    :key="param.identifier"
+                    class="flex items-center justify-between p-8px bg-[var(--el-fill-color-lighter)] rounded-4px"
+                  >
+                    <div class="flex-1">
+                      <div class="text-12px font-500 text-[var(--el-text-color-primary)]">
+                        {{ param.name }}
+                        <el-tag v-if="param.required" size="small" type="danger" class="ml-4px">
+                          {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
+                        </el-tag>
+                      </div>
+                      <div class="text-11px text-[var(--el-text-color-secondary)]">
+                        {{ param.identifier }}
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-8px">
+                      <el-tag :type="getParamTypeTag(param.dataType)" size="small">
+                        {{ getParamTypeName(param.dataType) }}
+                      </el-tag>
+                      <span class="text-11px text-[var(--el-text-color-secondary)]">
+                        {{ getExampleValue(param) }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="mt-12px ml-22px">
+                  <div class="text-12px text-[var(--el-text-color-secondary)] mb-6px">
+                    {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
+                  </div>
+                  <pre
+                    class="p-12px bg-[var(--el-fill-color-light)] rounded-4px text-11px text-[var(--el-text-color-primary)] overflow-x-auto border-l-3px border-[var(--el-color-primary)]"
+                  >
+                      <code>{{ generateExampleJson() }}</code>
+                    </pre>
+                </div>
+              </div>
+
+              <!-- 无参数提示 -->
+              <div v-else>
+                <div class="text-center py-16px">
+                  <p class="text-14px text-[var(--el-text-color-secondary)]">{{ emptyMessage }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+
+    <!-- 验证状态和错误提示 -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-8px">
+        <Icon
+          :icon="
+            jsonError
+              ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
+              : JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
+          "
+          :class="jsonError ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-color-success)]'"
+          class="text-14px"
+        />
+        <span
+          :class="jsonError ? 'text-[var(--el-color-danger)]' : 'text-[var(--el-color-success)]'"
+          class="text-12px"
+        >
+          {{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
+        </span>
+      </div>
+
+      <!-- 快速填充按钮 -->
+      <div v-if="paramsList.length > 0" class="flex items-center gap-8px">
+        <span class="text-12px text-[var(--el-text-color-secondary)]">{{
+          JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
+        }}</span>
+        <el-button size="small" type="primary" plain @click="fillExampleJson">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
+        </el-button>
+        <el-button size="small" type="danger" plain @click="clearParams">{{
+          JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON
+        }}</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { InfoFilled } from '@element-plus/icons-vue'
+import {
+  IoTDataSpecsDataTypeEnum,
+  JSON_PARAMS_INPUT_CONSTANTS,
+  JSON_PARAMS_INPUT_ICONS,
+  JSON_PARAMS_EXAMPLE_VALUES,
+  JsonParamsInputTypeEnum,
+  type JsonParamsInputType
+} from '#/views/iot/utils/constants'
+
+/** JSON参数输入组件 - 通用版本 */
+defineOptions({ name: 'JsonParamsInput' })
+
+interface JsonParamsConfig {
+  // 服务配置
+  service?: {
+    name: string
+    inputParams?: any[]
+  }
+  // 事件配置
+  event?: {
+    name: string
+    outputParams?: any[]
+  }
+  // 属性配置
+  properties?: any[]
+  // 自定义配置
+  custom?: {
+    name: string
+    params: any[]
+  }
+}
+
+interface Props {
+  modelValue?: string
+  config?: JsonParamsConfig
+  type?: JsonParamsInputType
+  placeholder?: string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: JsonParamsInputTypeEnum.SERVICE,
+  placeholder: JSON_PARAMS_INPUT_CONSTANTS.PLACEHOLDER
+})
+
+const emit = defineEmits<Emits>()
+
+const localValue = useVModel(props, 'modelValue', emit, {
+  defaultValue: ''
+})
+
+const paramsJson = ref('') // JSON参数字符串
+const jsonError = ref('') // JSON验证错误信息
+
+// 计算属性：参数列表
+const paramsList = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return props.config?.service?.inputParams || []
+    case JsonParamsInputTypeEnum.EVENT:
+      return props.config?.event?.outputParams || []
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return props.config?.properties || []
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return props.config?.custom?.params || []
+    default:
+      return []
+  }
+})
+
+// 计算属性：标题
+const title = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.SERVICE(props.config?.service?.name)
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.EVENT(props.config?.event?.name)
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.CUSTOM(props.config?.custom?.name)
+    default:
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.DEFAULT
+  }
+})
+
+// 计算属性：标题图标
+const titleIcon = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.CUSTOM
+    default:
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.DEFAULT
+  }
+})
+
+// 计算属性：参数图标
+const paramsIcon = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.CUSTOM
+    default:
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.DEFAULT
+  }
+})
+
+// 计算属性：参数标签
+const paramsLabel = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.CUSTOM
+    default:
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.DEFAULT
+  }
+})
+
+// 计算属性：空状态消息
+const emptyMessage = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.CUSTOM
+    default:
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.DEFAULT
+  }
+})
+
+// 计算属性：无配置消息
+const noConfigMessage = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.SERVICE:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE
+    case JsonParamsInputTypeEnum.EVENT:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT
+    case JsonParamsInputTypeEnum.PROPERTY:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY
+    case JsonParamsInputTypeEnum.CUSTOM:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM
+    default:
+      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT
+  }
+})
+
+/**
+ * 处理参数变化事件
+ */
+const handleParamsChange = () => {
+  try {
+    jsonError.value = '' // 清除之前的错误
+
+    if (paramsJson.value.trim()) {
+      const parsed = JSON.parse(paramsJson.value)
+      localValue.value = paramsJson.value
+
+      // 额外的参数验证
+      if (typeof parsed !== 'object' || parsed === null) {
+        jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAMS_MUST_BE_OBJECT
+        return
+      }
+
+      // 验证必填参数
+      for (const param of paramsList.value) {
+        if (param.required && (!parsed[param.identifier] || parsed[param.identifier] === '')) {
+          jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAM_REQUIRED_ERROR(param.name)
+          return
+        }
+      }
+    } else {
+      localValue.value = ''
+    }
+
+    // 验证通过
+    jsonError.value = ''
+  } catch (error) {
+    jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_ERROR(
+      error instanceof Error ? error.message : JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR
+    )
+  }
+}
+
+/**
+ * 快速填充示例数据
+ */
+const fillExampleJson = () => {
+  paramsJson.value = generateExampleJson()
+  handleParamsChange()
+}
+
+/**
+ * 清空参数
+ */
+const clearParams = () => {
+  paramsJson.value = ''
+  localValue.value = ''
+  jsonError.value = ''
+}
+
+/**
+ * 获取参数类型名称
+ * @param dataType 数据类型
+ * @returns 类型名称
+ */
+const getParamTypeName = (dataType: string) => {
+  // 使用 constants.ts 中已有的 getDataTypeName 函数逻辑
+  const typeMap = {
+    [IoTDataSpecsDataTypeEnum.INT]: '整数',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
+    [IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
+    [IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
+    [IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
+    [IoTDataSpecsDataTypeEnum.DATE]: '日期',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: '数组'
+  }
+  return typeMap[dataType] || dataType
+}
+
+/**
+ * 获取参数类型标签样式
+ * @param dataType 数据类型
+ * @returns 标签样式
+ */
+const getParamTypeTag = (dataType: string) => {
+  const tagMap = {
+    [IoTDataSpecsDataTypeEnum.INT]: 'primary',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
+    [IoTDataSpecsDataTypeEnum.TEXT]: 'info',
+    [IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
+    [IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
+    [IoTDataSpecsDataTypeEnum.DATE]: 'primary',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning'
+  }
+  return tagMap[dataType] || 'info'
+}
+
+/**
+ * 获取示例值
+ * @param param 参数对象
+ * @returns 示例值
+ */
+const getExampleValue = (param: any) => {
+  const exampleConfig =
+    JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES.DEFAULT
+  return exampleConfig.display
+}
+
+/**
+ * 生成示例JSON
+ * @returns JSON字符串
+ */
+const generateExampleJson = () => {
+  if (paramsList.value.length === 0) {
+    return '{}'
+  }
+
+  const example = {}
+  paramsList.value.forEach((param) => {
+    const exampleConfig =
+      JSON_PARAMS_EXAMPLE_VALUES[param.dataType] || JSON_PARAMS_EXAMPLE_VALUES.DEFAULT
+    example[param.identifier] = exampleConfig.value
+  })
+
+  return JSON.stringify(example, null, 2)
+}
+
+/**
+ * 处理数据回显
+ * @param value 值字符串
+ */
+const handleDataDisplay = (value: string) => {
+  if (!value || !value.trim()) {
+    paramsJson.value = ''
+    jsonError.value = ''
+    return
+  }
+
+  try {
+    // 尝试解析JSON，如果成功则格式化
+    const parsed = JSON.parse(value)
+    paramsJson.value = JSON.stringify(parsed, null, 2)
+    jsonError.value = ''
+  } catch {
+    // 如果不是有效的JSON，直接使用原字符串
+    paramsJson.value = value
+    jsonError.value = ''
+  }
+}
+
+// 监听外部值变化（编辑模式数据回显）
+watch(
+  () => localValue.value,
+  async (newValue, oldValue) => {
+    // 避免循环更新
+    if (newValue === oldValue) return
+
+    // 使用 nextTick 确保在下一个 tick 中处理数据
+    await nextTick()
+    handleDataDisplay(newValue || '')
+  },
+  { immediate: true }
+)
+
+// 组件挂载后也尝试处理一次数据回显
+onMounted(async () => {
+  await nextTick()
+  if (localValue.value) {
+    handleDataDisplay(localValue.value)
+  }
+})
+
+// 监听配置变化
+watch(
+  () => props.config,
+  (newConfig, oldConfig) => {
+    // 只有在配置真正变化时才清空数据
+    if (JSON.stringify(newConfig) !== JSON.stringify(oldConfig)) {
+      // 如果没有外部传入的值，才清空数据
+      if (!localValue.value) {
+        paramsJson.value = ''
+        jsonError.value = ''
+      }
+    }
+  }
+)
+</script>
+
+<style scoped>
+/* 弹出层内容样式 */
+.json-params-detail-content {
+  padding: 4px 0;
+}
+
+/* 弹出层自定义样式 */
+:global(.json-params-detail-popover) {
+  max-width: 500px !important;
+}
+
+:global(.json-params-detail-popover .el-popover__content) {
+  padding: 16px !important;
+}
+
+/* JSON 代码块样式 */
+.json-params-detail-content pre {
+  max-height: 200px;
+  overflow-y: auto;
+}
+</style>

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

@@ -0,0 +1,266 @@
+<!-- 值输入组件 -->
+<template>
+  <div class="w-full min-w-0">
+    <!-- 布尔值选择 -->
+    <el-select
+      v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
+      v-model="localValue"
+      placeholder="请选择布尔值"
+      class="w-full!"
+    >
+      <el-option label="真 (true)" value="true" />
+      <el-option label="假 (false)" value="false" />
+    </el-select>
+
+    <!-- 枚举值选择 -->
+    <el-select
+      v-else-if="propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0"
+      v-model="localValue"
+      placeholder="请选择枚举值"
+      class="w-full!"
+    >
+      <el-option
+        v-for="option in enumOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+
+    <!-- 范围输入 (between 操作符) -->
+    <div
+      v-else-if="operator === IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value"
+      class="w-full! flex items-center gap-8px"
+    >
+      <el-input
+        v-model="rangeStart"
+        :type="getInputType()"
+        placeholder="最小值"
+        @input="handleRangeChange"
+        class="flex-1 min-w-0"
+        style="width: auto !important"
+      />
+      <span class="text-12px text-[var(--el-text-color-secondary)] whitespace-nowrap">至</span>
+      <el-input
+        v-model="rangeEnd"
+        :type="getInputType()"
+        placeholder="最大值"
+        @input="handleRangeChange"
+        class="flex-1 min-w-0"
+      />
+    </div>
+
+    <!-- 列表输入 (in 操作符) -->
+    <div
+      v-else-if="operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value"
+      class="w-full!"
+    >
+      <el-input v-model="localValue" placeholder="请输入值列表，用逗号分隔" class="w-full!">
+        <template #suffix>
+          <el-tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
+            <Icon
+              icon="ep:question-filled"
+              class="text-[var(--el-text-color-placeholder)] cursor-help"
+            />
+          </el-tooltip>
+        </template>
+      </el-input>
+      <div v-if="listPreview.length > 0" class="mt-8px flex items-center gap-6px flex-wrap">
+        <span class="text-12px text-[var(--el-text-color-secondary)]">解析结果：</span>
+        <el-tag v-for="(item, index) in listPreview" :key="index" size="small" class="m-0">
+          {{ item }}
+        </el-tag>
+      </div>
+    </div>
+
+    <!-- 日期时间输入 -->
+    <el-date-picker
+      v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
+      v-model="dateValue"
+      type="datetime"
+      placeholder="请选择日期时间"
+      format="YYYY-MM-DD HH:mm:ss"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      @change="handleDateChange"
+      class="w-full!"
+    />
+
+    <!-- 数字输入 -->
+    <el-input-number
+      v-else-if="isNumericType()"
+      v-model="numberValue"
+      :precision="getPrecision()"
+      :step="getStep()"
+      :min="getMin()"
+      :max="getMax()"
+      placeholder="请输入数值"
+      @change="handleNumberChange"
+      class="w-full!"
+    />
+
+    <!-- 文本输入 -->
+    <el-input
+      v-else
+      v-model="localValue"
+      :type="getInputType()"
+      :placeholder="getPlaceholder()"
+      class="w-full!"
+    >
+      <template #suffix>
+        <el-tooltip
+          v-if="propertyConfig?.unit"
+          :content="`单位：${propertyConfig.unit}`"
+          placement="top"
+        >
+          <span class="text-12px text-[var(--el-text-color-secondary)] px-4px">
+            {{ propertyConfig.unit }}
+          </span>
+        </el-tooltip>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import {
+  IoTDataSpecsDataTypeEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum
+} from '#/views/iot/utils/constants'
+
+/** 值输入组件 */
+defineOptions({ name: 'ValueInput' })
+
+interface Props {
+  modelValue?: string
+  propertyType?: string
+  operator?: string
+  propertyConfig?: any
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const localValue = useVModel(props, 'modelValue', emit, {
+  defaultValue: ''
+})
+
+const rangeStart = ref('') // 范围开始值
+const rangeEnd = ref('') // 范围结束值
+const dateValue = ref('') // 日期值
+const numberValue = ref<number>() // 数字值
+
+/** 计算属性：枚举选项 */
+const enumOptions = computed(() => {
+  if (props.propertyConfig?.enum) {
+    return props.propertyConfig.enum.map((item: any) => ({
+      label: item.name || item.label || item.value,
+      value: item.value
+    }))
+  }
+  return []
+})
+
+/** 计算属性：列表预览 */
+const listPreview = computed(() => {
+  if (
+    props.operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value &&
+    localValue.value
+  ) {
+    return localValue.value
+      .split(',')
+      .map((item) => item.trim())
+      .filter((item) => item)
+  }
+  return []
+})
+
+/** 判断是否为数字类型 */
+const isNumericType = () => {
+  return [
+    IoTDataSpecsDataTypeEnum.INT,
+    IoTDataSpecsDataTypeEnum.FLOAT,
+    IoTDataSpecsDataTypeEnum.DOUBLE
+  ].includes((props.propertyType || '') as any)
+}
+
+/** 获取输入框类型 */
+const getInputType = () => {
+  switch (props.propertyType) {
+    case IoTDataSpecsDataTypeEnum.INT:
+    case IoTDataSpecsDataTypeEnum.FLOAT:
+    case IoTDataSpecsDataTypeEnum.DOUBLE:
+      return 'number'
+    default:
+      return 'text'
+  }
+}
+
+/** 获取占位符文本 */
+const getPlaceholder = () => {
+  const typeMap = {
+    [IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串',
+    [IoTDataSpecsDataTypeEnum.INT]: '请输入整数',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: '请输入浮点数',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: '请输入双精度数',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: '请输入 JSON 格式数据',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: '请输入数组格式数据'
+  }
+  return typeMap[props.propertyType || ''] || '请输入值'
+}
+
+/** 获取数字精度 */
+const getPrecision = () => {
+  return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2
+}
+
+/** 获取数字步长 */
+const getStep = () => {
+  return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1
+}
+
+/** 获取最小值 */
+const getMin = () => {
+  return props.propertyConfig?.min || undefined
+}
+
+/** 获取最大值 */
+const getMax = () => {
+  return props.propertyConfig?.max || undefined
+}
+
+/** 处理范围变化事件 */
+const handleRangeChange = () => {
+  if (rangeStart.value && rangeEnd.value) {
+    localValue.value = `${rangeStart.value},${rangeEnd.value}`
+  } else {
+    localValue.value = ''
+  }
+}
+
+/** 处理日期变化事件 */
+const handleDateChange = (value: string) => {
+  localValue.value = value || ''
+}
+
+/** 处理数字变化事件 */
+const handleNumberChange = (value: number | undefined) => {
+  localValue.value = value?.toString() || ''
+}
+
+/** 监听操作符变化 */
+watch(
+  () => props.operator,
+  () => {
+    localValue.value = ''
+    rangeStart.value = ''
+    rangeEnd.value = ''
+    dateValue.value = ''
+    numberValue.value = undefined
+  }
+)
+</script>

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

@@ -0,0 +1,272 @@
+<!-- 执行器配置组件 -->
+<template>
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:setting" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">执行器配置</span>
+          <el-tag size="small" type="info">{{ actions.length }} 个执行器</el-tag>
+        </div>
+        <div class="flex items-center gap-8px">
+          <el-button type="primary" size="small" @click="addAction">
+            <Icon icon="ep:plus" />
+            添加执行器
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+    <div class="p-0">
+      <!-- 空状态 -->
+      <div v-if="actions.length === 0">
+        <el-empty description="暂无执行器配置">
+          <el-button type="primary" @click="addAction">
+            <Icon icon="ep:plus" />
+            添加第一个执行器
+          </el-button>
+        </el-empty>
+      </div>
+
+      <!-- 执行器列表 -->
+      <div v-else class="space-y-24px">
+        <div
+          v-for="(action, index) in actions"
+          :key="`action-${index}`"
+          class="border-2 border-blue-200 rounded-8px bg-blue-50 shadow-sm hover:shadow-md transition-shadow"
+        >
+          <!-- 执行器头部 - 蓝色主题 -->
+          <div
+            class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-sky-50 border-b border-blue-200 rounded-t-6px"
+          >
+            <div class="flex items-center gap-12px">
+              <div class="flex items-center gap-8px text-16px font-600 text-blue-700">
+                <div
+                  class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+                >
+                  {{ index + 1 }}
+                </div>
+                <span>执行器 {{ index + 1 }}</span>
+              </div>
+              <el-tag :type="getActionTypeTag(action.type)" size="small" class="font-500">
+                {{ getActionTypeLabel(action.type) }}
+              </el-tag>
+            </div>
+            <div class="flex items-center gap-8px">
+              <el-button
+                v-if="actions.length > 1"
+                type="danger"
+                size="small"
+                text
+                @click="removeAction(index)"
+                class="hover:bg-red-50"
+              >
+                <Icon icon="ep:delete" />
+                删除
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 执行器内容区域 -->
+          <div class="p-16px space-y-16px">
+            <!-- 执行类型选择 -->
+            <div class="w-full">
+              <el-form-item label="执行类型" required>
+                <el-select
+                  :model-value="action.type"
+                  @update:model-value="(value) => updateActionType(index, value)"
+                  @change="(value) => onActionTypeChange(action, value)"
+                  placeholder="请选择执行类型"
+                  class="w-full"
+                >
+                  <el-option
+                    v-for="option in getActionTypeOptions()"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+
+            <!-- 设备控制配置 -->
+            <DeviceControlConfig
+              v-if="isDeviceAction(action.type)"
+              :model-value="action"
+              @update:model-value="(value) => updateAction(index, value)"
+            />
+
+            <!-- 告警配置 - 只有恢复告警时才显示 -->
+            <AlertConfig
+              v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER"
+              :model-value="action.alertConfigId"
+              @update:model-value="(value) => updateActionAlertConfig(index, value)"
+            />
+
+            <!-- 触发告警提示 - 触发告警时显示 -->
+            <div
+              v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER"
+              class="border border-[var(--el-border-color-light)] rounded-6px p-16px bg-[var(--el-fill-color-blank)]"
+            >
+              <div class="flex items-center gap-8px mb-8px">
+                <Icon icon="ep:warning" class="text-[var(--el-color-warning)] text-16px" />
+                <span class="text-14px font-600 text-[var(--el-text-color-primary)]">触发告警</span>
+                <el-tag size="small" type="warning">自动执行</el-tag>
+              </div>
+              <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
+                当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 -> 告警配置] 管理。
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加提示 -->
+      <div v-if="actions.length > 0" class="text-center py-16px">
+        <el-button type="primary" plain @click="addAction">
+          <Icon icon="ep:plus" />
+          继续添加执行器
+        </el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import DeviceControlConfig from '../configs/DeviceControlConfig.vue'
+import AlertConfig from '../configs/AlertConfig.vue'
+import type { Action } from '#/api/iot/rule/scene'
+import {
+  getActionTypeLabel,
+  getActionTypeOptions,
+  IotRuleSceneActionTypeEnum
+} from '#/views/iot/utils/constants'
+
+/** 执行器配置组件 */
+defineOptions({ name: 'ActionSection' })
+
+const props = defineProps<{
+  actions: Action[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:actions', value: Action[]): void
+}>()
+
+const actions = useVModel(props, 'actions', emit)
+
+/** 获取执行器标签类型（用于 el-tag 的 type 属性） */
+const getActionTypeTag = (type: number): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
+  const actionTypeTags = {
+    [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
+    [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
+    [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
+    [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning'
+  } as const
+  return actionTypeTags[type] || 'info'
+}
+
+/** 判断是否为设备执行器类型 */
+const isDeviceAction = (type: number): boolean => {
+  const deviceActionTypes = [
+    IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
+    IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
+  ] as number[]
+  return deviceActionTypes.includes(type)
+}
+
+/** 判断是否为告警执行器类型 */
+const isAlertAction = (type: number): boolean => {
+  const alertActionTypes = [
+    IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
+    IotRuleSceneActionTypeEnum.ALERT_RECOVER
+  ] as number[]
+  return alertActionTypes.includes(type)
+}
+
+/**
+ * 创建默认的执行器数据
+ * @returns 默认执行器对象
+ */
+const createDefaultActionData = (): Action => {
+  return {
+    type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
+    productId: undefined,
+    deviceId: undefined,
+    identifier: undefined, // 物模型标识符（服务调用时使用）
+    params: undefined,
+    alertConfigId: undefined
+  }
+}
+
+/**
+ * 添加执行器
+ */
+const addAction = () => {
+  const newAction = createDefaultActionData()
+  actions.value.push(newAction)
+}
+
+/**
+ * 删除执行器
+ * @param index 执行器索引
+ */
+const removeAction = (index: number) => {
+  actions.value.splice(index, 1)
+}
+
+/**
+ * 更新执行器类型
+ * @param index 执行器索引
+ * @param type 执行器类型
+ */
+const updateActionType = (index: number, type: number) => {
+  actions.value[index].type = type
+  onActionTypeChange(actions.value[index], type)
+}
+
+/**
+ * 更新执行器
+ * @param index 执行器索引
+ * @param action 执行器对象
+ */
+const updateAction = (index: number, action: Action) => {
+  actions.value[index] = action
+}
+
+/**
+ * 更新告警配置
+ * @param index 执行器索引
+ * @param alertConfigId 告警配置ID
+ */
+const updateActionAlertConfig = (index: number, alertConfigId?: number) => {
+  actions.value[index].alertConfigId = alertConfigId
+}
+
+/**
+ * 监听执行器类型变化
+ * @param action 执行器对象
+ * @param type 执行器类型
+ */
+const onActionTypeChange = (action: Action, type: number) => {
+  // 清理不相关的配置，确保数据结构干净
+  if (isDeviceAction(type)) {
+    // 设备控制类型：清理告警配置，确保设备参数存在
+    action.alertConfigId = undefined
+    if (!action.params) {
+      action.params = ''
+    }
+    // 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
+    if (action.identifier && type !== action.type) {
+      action.identifier = undefined
+    }
+  } else if (isAlertAction(type)) {
+    action.productId = undefined
+    action.deviceId = undefined
+    action.identifier = undefined // 清理服务标识符
+    action.params = undefined
+    action.alertConfigId = undefined
+  }
+}
+</script>

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

@@ -0,0 +1,86 @@
+<!-- 基础信息配置组件 -->
+<template>
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px mb-10px" shadow="never">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:info-filled" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">基础信息</span>
+        </div>
+        <div class="flex items-center gap-8px">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
+        </div>
+      </div>
+    </template>
+
+    <div class="p-0">
+      <el-row :gutter="24" class="mb-24px">
+        <el-col :span="12">
+          <el-form-item label="场景名称" prop="name" required>
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入场景名称"
+              maxlength="50"
+              show-word-limit
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="场景状态" prop="status" required>
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="场景描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          type="textarea"
+          placeholder="请输入场景描述（可选）"
+          :rows="3"
+          maxlength="200"
+          show-word-limit
+          resize="none"
+        />
+      </el-form-item>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { DICT_TYPE, getIntDictOptions } from '@vben/constants'
+import type { IotSceneRule } from '#/api/iot/rule/scene'
+
+/** 基础信息配置组件 */
+defineOptions({ name: 'BasicInfoSection' })
+
+const props = defineProps<{
+  modelValue: IotSceneRule
+  rules?: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: IotSceneRule): void
+}>()
+
+const formData = useVModel(props, 'modelValue', emit) // 表单数据
+</script>
+
+<style scoped>
+:deep(.el-form-item) {
+  margin-bottom: 20px;
+}
+
+:deep(.el-form-item:last-child) {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,222 @@
+<template>
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px mb-10px" shadow="never">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
+          <el-tag size="small" type="info">{{ triggers.length }} 个触发器</el-tag>
+        </div>
+        <el-button type="primary" size="small" @click="addTrigger">
+          <Icon icon="ep:plus" />
+          添加触发器
+        </el-button>
+      </div>
+    </template>
+
+    <div class="p-16px space-y-24px">
+      <!-- 触发器列表 -->
+      <div v-if="triggers.length > 0" class="space-y-24px">
+        <div
+          v-for="(triggerItem, index) in triggers"
+          :key="`trigger-${index}`"
+          class="border-2 border-green-200 rounded-8px bg-green-50 shadow-sm hover:shadow-md transition-shadow"
+        >
+          <!-- 触发器头部 - 绿色主题 -->
+          <div
+            class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border-b border-green-200 rounded-t-6px"
+          >
+            <div class="flex items-center gap-12px">
+              <div class="flex items-center gap-8px text-16px font-600 text-green-700">
+                <div
+                  class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+                >
+                  {{ index + 1 }}
+                </div>
+                <span>触发器 {{ index + 1 }}</span>
+              </div>
+              <el-tag size="small" :type="getTriggerTagType(triggerItem.type)" class="font-500">
+                {{ getTriggerTypeLabel(triggerItem.type) }}
+              </el-tag>
+            </div>
+            <div class="flex items-center gap-8px">
+              <el-button
+                v-if="triggers.length > 1"
+                type="danger"
+                size="small"
+                text
+                @click="removeTrigger(index)"
+                class="hover:bg-red-50"
+              >
+                <Icon icon="ep:delete" />
+                删除
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 触发器内容区域 -->
+          <div class="p-16px space-y-16px">
+            <!-- 设备触发配置 -->
+            <DeviceTriggerConfig
+              v-if="isDeviceTrigger(triggerItem.type)"
+              :model-value="triggerItem"
+              :index="index"
+              @update:model-value="(value) => updateTriggerDeviceConfig(index, value)"
+              @trigger-type-change="(type) => updateTriggerType(index, type)"
+            />
+
+            <!-- 定时触发配置 -->
+            <div
+              v-else-if="triggerItem.type === IotRuleSceneTriggerTypeEnum.TIMER"
+              class="flex flex-col gap-16px"
+            >
+              <div
+                class="flex items-center gap-8px p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
+              >
+                <Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
+                <span class="text-14px font-500 text-[var(--el-text-color-primary)]"
+                  >定时触发配置</span
+                >
+              </div>
+
+              <!-- CRON 表达式配置 -->
+              <div
+                class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
+              >
+                <el-form-item label="CRON表达式" required>
+                  <Crontab
+                    :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
+                    @update:model-value="(value) => updateTriggerCronConfig(index, value)"
+                  />
+                </el-form-item>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="py-40px text-center">
+        <el-empty description="暂无触发器">
+          <template #description>
+            <div class="space-y-8px">
+              <p class="text-[var(--el-text-color-secondary)]">暂无触发器配置</p>
+              <p class="text-12px text-[var(--el-text-color-placeholder)]">
+                请使用上方的"添加触发器"按钮来设置触发规则
+              </p>
+            </div>
+          </template>
+        </el-empty>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import DeviceTriggerConfig from '../configs/DeviceTriggerConfig.vue'
+import { Crontab } from '@/components/Crontab'
+import type { Trigger } from '#/api/iot/rule/scene'
+import {
+  getTriggerTypeLabel,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger
+} from '#/views/iot/utils/constants'
+
+/** 触发器配置组件 */
+defineOptions({ name: 'TriggerSection' })
+
+const props = defineProps<{
+  triggers: Trigger[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:triggers', value: Trigger[]): void
+}>()
+
+const triggers = useVModel(props, 'triggers', emit)
+
+/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
+const getTriggerTagType = (type: number): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
+  if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
+    return 'warning'
+  }
+  return isDeviceTrigger(type) ? 'success' : 'info'
+}
+
+/** 添加触发器 */
+const addTrigger = () => {
+  const newTrigger: Trigger = {
+    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
+    productId: undefined,
+    deviceId: undefined,
+    identifier: undefined,
+    operator: undefined,
+    value: undefined,
+    cronExpression: undefined,
+    conditionGroups: [] // 空的条件组数组
+  }
+  triggers.value.push(newTrigger)
+}
+
+/**
+ * 删除触发器
+ * @param index 触发器索引
+ */
+const removeTrigger = (index: number) => {
+  if (triggers.value.length > 1) {
+    triggers.value.splice(index, 1)
+  }
+}
+
+/**
+ * 更新触发器类型
+ * @param index 触发器索引
+ * @param type 触发器类型
+ */
+const updateTriggerType = (index: number, type: number) => {
+  triggers.value[index].type = type
+  onTriggerTypeChange(index, type)
+}
+
+/**
+ * 更新触发器设备配置
+ * @param index 触发器索引
+ * @param newTrigger 新的触发器对象
+ */
+const updateTriggerDeviceConfig = (index: number, newTrigger: Trigger) => {
+  triggers.value[index] = newTrigger
+}
+
+/**
+ * 更新触发器 CRON 配置
+ * @param index 触发器索引
+ * @param cronExpression CRON 表达式
+ */
+const updateTriggerCronConfig = (index: number, cronExpression?: string) => {
+  triggers.value[index].cronExpression = cronExpression
+}
+
+/**
+ * 处理触发器类型变化事件
+ * @param index 触发器索引
+ * @param _ 触发器类型（未使用）
+ */
+const onTriggerTypeChange = (index: number, _: number) => {
+  const triggerItem = triggers.value[index]
+  triggerItem.productId = undefined
+  triggerItem.deviceId = undefined
+  triggerItem.identifier = undefined
+  triggerItem.operator = undefined
+  triggerItem.value = undefined
+  triggerItem.cronExpression = undefined
+  triggerItem.conditionGroups = []
+}
+
+/** 初始化：确保至少有一个触发器 */
+onMounted(() => {
+  if (triggers.value.length === 0) {
+    addTrigger()
+  }
+})
+</script>

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

@@ -0,0 +1,103 @@
+<!-- 设备选择器组件 -->
+<template>
+  <el-select
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择设备"
+    filterable
+    clearable
+    class="w-full"
+    :loading="deviceLoading"
+    :disabled="!productId"
+  >
+    <el-option
+      v-for="device in deviceList"
+      :key="device.id"
+      :label="device.deviceName"
+      :value="device.id"
+    >
+      <div class="flex items-center justify-between w-full py-4px">
+        <div class="flex-1">
+          <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">
+            {{ device.deviceName }}
+          </div>
+          <div class="text-12px text-[var(--el-text-color-secondary)]">{{ device.deviceKey }}</div>
+        </div>
+        <div class="flex items-center gap-4px" v-if="device.id > 0">
+          <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
+        </div>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { DeviceApi } from '#/api/iot/device/device'
+import { DEVICE_SELECTOR_OPTIONS } from '#/views/iot/utils/constants'
+import { DICT_TYPE } from '@vben/constants'
+
+/** 设备选择器组件 */
+defineOptions({ name: 'DeviceSelector' })
+
+const props = defineProps<{
+  modelValue?: number
+  productId?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void
+  (e: 'change', value?: number): void
+}>()
+
+const deviceLoading = ref(false) // 设备加载状态
+const deviceList = ref<any[]>([]) // 设备列表
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的设备ID
+ */
+const handleChange = (value?: number) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+/**
+ * 获取设备列表
+ */
+const getDeviceList = async () => {
+  if (!props.productId) {
+    deviceList.value = []
+    return
+  }
+
+  try {
+    deviceLoading.value = true
+    const res = await DeviceApi.getDeviceListByProductId(props.productId)
+    deviceList.value = res || []
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    deviceList.value = []
+  } finally {
+    deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES)
+    deviceLoading.value = false
+  }
+}
+
+// 监听产品变化
+watch(
+  () => props.productId,
+  (newProductId) => {
+    if (newProductId) {
+      getDeviceList()
+    } else {
+      deviceList.value = []
+      // 清空当前选择的设备
+      if (props.modelValue) {
+        emit('update:modelValue', undefined)
+        emit('change', undefined)
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>

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

@@ -0,0 +1,264 @@
+<!-- 操作符选择器组件 -->
+<template>
+  <div class="w-full">
+    <el-select
+      v-model="localValue"
+      placeholder="请选择操作符"
+      @change="handleChange"
+      class="w-full"
+    >
+      <el-option
+        v-for="operator in availableOperators"
+        :key="operator.value"
+        :label="operator.label"
+        :value="operator.value"
+      >
+        <div class="flex items-center justify-between w-full py-4px">
+          <div class="flex items-center gap-8px">
+            <div class="text-14px font-500 text-[var(--el-text-color-primary)]">
+              {{ operator.label }}
+            </div>
+            <div
+              class="text-12px text-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)] px-6px py-2px rounded-4px font-mono"
+            >
+              {{ operator.symbol }}
+            </div>
+          </div>
+          <div class="text-12px text-[var(--el-text-color-secondary)]">
+            {{ operator.description }}
+          </div>
+        </div>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import {
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+  IoTDataSpecsDataTypeEnum
+} from '#/views/iot/utils/constants'
+
+/** 操作符选择器组件 */
+defineOptions({ name: 'OperatorSelector' })
+
+const props = defineProps<{
+  modelValue?: string
+  propertyType?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', value: string): void
+}>()
+
+const localValue = useVModel(props, 'modelValue', emit)
+
+// 基于枚举的操作符定义
+const allOperators = [
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name,
+    symbol: '=',
+    description: '值完全相等时触发',
+    example: 'temperature = 25',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.BOOL,
+      IoTDataSpecsDataTypeEnum.ENUM
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name,
+    symbol: '≠',
+    description: '值不相等时触发',
+    example: 'power != false',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.BOOL,
+      IoTDataSpecsDataTypeEnum.ENUM
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.name,
+    symbol: '>',
+    description: '值大于指定值时触发',
+    example: 'temperature > 30',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS.name,
+    symbol: '≥',
+    description: '值大于或等于指定值时触发',
+    example: 'humidity >= 80',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.name,
+    symbol: '<',
+    description: '值小于指定值时触发',
+    example: 'temperature < 10',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS.name,
+    symbol: '≤',
+    description: '值小于或等于指定值时触发',
+    example: 'battery <= 20',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.name,
+    symbol: '∈',
+    description: '值在指定列表中时触发',
+    example: 'status in [1,2,3]',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.ENUM
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.name,
+    symbol: '∉',
+    description: '值不在指定列表中时触发',
+    example: 'status not in [1,2,3]',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.ENUM
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.name,
+    symbol: '⊆',
+    description: '值在指定范围内时触发',
+    example: 'temperature between 20,30',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.name,
+    symbol: '⊄',
+    description: '值不在指定范围内时触发',
+    example: 'temperature not between 20,30',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.name,
+    symbol: '≈',
+    description: '字符串匹配指定模式时触发',
+    example: 'message like "%error%"',
+    supportedTypes: [IoTDataSpecsDataTypeEnum.TEXT]
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.name,
+    symbol: '≠∅',
+    description: '值非空时触发',
+    example: 'data not null',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.BOOL,
+      IoTDataSpecsDataTypeEnum.ENUM,
+      IoTDataSpecsDataTypeEnum.DATE
+    ]
+  }
+]
+
+// 计算属性：可用的操作符
+const availableOperators = computed(() => {
+  if (!props.propertyType) {
+    return allOperators
+  }
+  return allOperators.filter((op) =>
+    (op.supportedTypes as any[]).includes(props.propertyType || '')
+  )
+})
+
+// 计算属性：当前选中的操作符
+const selectedOperator = computed(() => {
+  return allOperators.find((op) => op.value === localValue.value)
+})
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的操作符值
+ */
+const handleChange = (value: string) => {
+  emit('change', value)
+}
+
+/** 监听属性类型变化 */
+watch(
+  () => props.propertyType,
+  () => {
+    // 如果当前选择的操作符不支持新的属性类型，则清空选择
+    if (
+      localValue.value &&
+      selectedOperator.value &&
+      !(selectedOperator.value.supportedTypes as any[]).includes(props.propertyType || '')
+    ) {
+      localValue.value = ''
+    }
+  }
+)
+</script>
+
+<style scoped>
+:deep(.el-select-dropdown__item) {
+  height: auto;
+  padding: 8px 20px;
+}
+</style>

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

@@ -0,0 +1,79 @@
+<!-- 产品选择器组件 -->
+<template>
+  <el-select
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择产品"
+    filterable
+    clearable
+    class="w-full"
+    :loading="productLoading"
+  >
+    <el-option
+      v-for="product in productList"
+      :key="product.id"
+      :label="product.name"
+      :value="product.id"
+    >
+      <div class="flex items-center justify-between w-full py-4px">
+        <div class="flex-1">
+          <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">
+            {{ product.name }}
+          </div>
+          <div class="text-12px text-[var(--el-text-color-secondary)]">
+            {{ product.productKey }}
+          </div>
+        </div>
+        <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { ProductApi } from '#/api/iot/product/product'
+import { DICT_TYPE } from '@vben/constants'
+
+/** 产品选择器组件 */
+defineOptions({ name: 'ProductSelector' })
+
+defineProps<{
+  modelValue?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void
+  (e: 'change', value?: number): void
+}>()
+
+const productLoading = ref(false) // 产品加载状态
+const productList = ref<any[]>([]) // 产品列表
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的产品 ID
+ */
+const handleChange = (value?: number) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+/** 获取产品列表 */
+const getProductList = async () => {
+  try {
+    productLoading.value = true
+    const res = await ProductApi.getSimpleProductList()
+    productList.value = res || []
+  } catch (error) {
+    console.error('获取产品列表失败:', error)
+    productList.value = []
+  } finally {
+    productLoading.value = false
+  }
+}
+
+// 组件挂载时获取产品列表
+onMounted(() => {
+  getProductList()
+})
+</script>

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

@@ -0,0 +1,437 @@
+<!-- 属性选择器组件 -->
+<template>
+  <div class="flex items-center gap-8px">
+    <el-select
+      v-model="localValue"
+      placeholder="请选择监控项"
+      filterable
+      clearable
+      @change="handleChange"
+      class="!w-150px"
+      :loading="loading"
+    >
+      <el-option-group v-for="group in propertyGroups" :key="group.label" :label="group.label">
+        <el-option
+          v-for="property in group.options"
+          :key="property.identifier"
+          :label="property.name"
+          :value="property.identifier"
+        >
+          <div class="flex items-center justify-between w-full py-2px">
+            <span class="text-14px font-500 text-[var(--el-text-color-primary)] flex-1 truncate">
+              {{ property.name }}
+            </span>
+            <el-tag
+              :type="getDataTypeTagType(property.dataType)"
+              size="small"
+              class="ml-8px flex-shrink-0"
+            >
+              {{ property.identifier }}
+            </el-tag>
+          </div>
+        </el-option>
+      </el-option-group>
+    </el-select>
+
+    <!-- 属性详情弹出层 -->
+    <el-popover
+      v-if="selectedProperty"
+      placement="right-start"
+      :width="350"
+      trigger="click"
+      :show-arrow="true"
+      :offset="8"
+      popper-class="property-detail-popover"
+    >
+      <template #reference>
+        <el-button
+          type="info"
+          :icon="InfoFilled"
+          circle
+          size="small"
+          class="flex-shrink-0"
+          title="查看属性详情"
+        />
+      </template>
+
+      <!-- 弹出层内容 -->
+      <div class="property-detail-content">
+        <div class="flex items-center gap-8px mb-12px">
+          <Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">
+            {{ selectedProperty.name }}
+          </span>
+          <el-tag :type="getDataTypeTagType(selectedProperty.dataType)" size="small">
+            {{ getDataTypeName(selectedProperty.dataType) }}
+          </el-tag>
+        </div>
+
+        <div class="space-y-8px ml-24px">
+          <div class="flex items-start gap-8px">
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              标识符：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ selectedProperty.identifier }}
+            </span>
+          </div>
+
+          <div v-if="selectedProperty.description" class="flex items-start gap-8px">
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              描述：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ selectedProperty.description }}
+            </span>
+          </div>
+
+          <div v-if="selectedProperty.unit" class="flex items-start gap-8px">
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              单位：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ selectedProperty.unit }}
+            </span>
+          </div>
+
+          <div v-if="selectedProperty.range" class="flex items-start gap-8px">
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              取值范围：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ selectedProperty.range }}
+            </span>
+          </div>
+
+          <!-- 根据属性类型显示额外信息 -->
+          <div
+            v-if="
+              selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
+              selectedProperty.accessMode
+            "
+            class="flex items-start gap-8px"
+          >
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              访问模式：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ getAccessModeLabel(selectedProperty.accessMode) }}
+            </span>
+          </div>
+
+          <div
+            v-if="
+              selectedProperty.type === IoTThingModelTypeEnum.EVENT && selectedProperty.eventType
+            "
+            class="flex items-start gap-8px"
+          >
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              事件类型：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ getEventTypeLabel(selectedProperty.eventType) }}
+            </span>
+          </div>
+
+          <div
+            v-if="
+              selectedProperty.type === IoTThingModelTypeEnum.SERVICE && selectedProperty.callType
+            "
+            class="flex items-start gap-8px"
+          >
+            <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
+              调用类型：
+            </span>
+            <span class="text-12px text-[var(--el-text-color-primary)] flex-1">
+              {{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { InfoFilled } from '@element-plus/icons-vue'
+import {
+  IotRuleSceneTriggerTypeEnum,
+  IoTThingModelTypeEnum,
+  getAccessModeLabel,
+  getEventTypeLabel,
+  getThingModelServiceCallTypeLabel,
+  getDataTypeName,
+  getDataTypeTagType,
+  THING_MODEL_GROUP_LABELS
+} from '#/views/iot/utils/constants'
+import type {
+  IotThingModelTSLResp,
+  ThingModelEvent,
+  ThingModelParam,
+  ThingModelProperty,
+  ThingModelService
+} from '#/api/iot/thingmodel'
+import { ThingModelApi } from '#/api/iot/thingmodel'
+
+/** 属性选择器组件 */
+defineOptions({ name: 'PropertySelector' })
+
+/** 属性选择器内部使用的统一数据结构 */
+interface PropertySelectorItem {
+  identifier: string
+  name: string
+  description?: string
+  dataType: string
+  type: number // IoTThingModelTypeEnum
+  accessMode?: string
+  required?: boolean
+  unit?: string
+  range?: string
+  eventType?: string
+  callType?: string
+  inputParams?: ThingModelParam[]
+  outputParams?: ThingModelParam[]
+  property?: ThingModelProperty
+  event?: ThingModelEvent
+  service?: ThingModelService
+}
+
+const props = defineProps<{
+  modelValue?: string
+  triggerType: number
+  productId?: number
+  deviceId?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'change', value: { type: string; config: any }): void
+}>()
+
+const localValue = useVModel(props, 'modelValue', emit)
+
+const loading = ref(false) // 加载状态
+const propertyList = ref<PropertySelectorItem[]>([]) // 属性列表
+const thingModelTSL = ref<IotThingModelTSLResp | null>(null) // 物模型TSL数据
+
+// 计算属性：属性分组
+const propertyGroups = computed(() => {
+  const groups: { label: string; options: any[] }[] = []
+
+  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
+    groups.push({
+      label: THING_MODEL_GROUP_LABELS.PROPERTY,
+      options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.PROPERTY)
+    })
+  }
+
+  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
+    groups.push({
+      label: THING_MODEL_GROUP_LABELS.EVENT,
+      options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.EVENT)
+    })
+  }
+
+  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) {
+    groups.push({
+      label: THING_MODEL_GROUP_LABELS.SERVICE,
+      options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.SERVICE)
+    })
+  }
+
+  return groups.filter((group) => group.options.length > 0)
+})
+
+// 计算属性：当前选中的属性
+const selectedProperty = computed(() => {
+  return propertyList.value.find((p) => p.identifier === localValue.value)
+})
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的属性标识符
+ */
+const handleChange = (value: string) => {
+  const property = propertyList.value.find((p) => p.identifier === value)
+  if (property) {
+    emit('change', {
+      type: property.dataType,
+      config: property
+    })
+  }
+}
+
+/**
+ * 获取物模型TSL数据
+ */
+const getThingModelTSL = async () => {
+  if (!props.productId) {
+    thingModelTSL.value = null
+    propertyList.value = []
+    return
+  }
+
+  loading.value = true
+  try {
+    const tslData = await ThingModelApi.getThingModelTSLByProductId(props.productId)
+
+    if (tslData) {
+      thingModelTSL.value = tslData
+      parseThingModelData()
+    } else {
+      console.error('获取物模型TSL失败: 返回数据为空')
+      propertyList.value = []
+    }
+  } catch (error) {
+    console.error('获取物模型TSL失败:', error)
+    propertyList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 解析物模型 TSL 数据 */
+const parseThingModelData = () => {
+  const tsl = thingModelTSL.value
+  const properties: PropertySelectorItem[] = []
+
+  if (!tsl) {
+    propertyList.value = properties
+    return
+  }
+  // 解析属性
+  if (tsl.properties && Array.isArray(tsl.properties)) {
+    tsl.properties.forEach((prop) => {
+      properties.push({
+        identifier: prop.identifier,
+        name: prop.name,
+        description: prop.description,
+        dataType: prop.dataType,
+        type: IoTThingModelTypeEnum.PROPERTY,
+        accessMode: prop.accessMode,
+        required: prop.required,
+        unit: getPropertyUnit(prop),
+        range: getPropertyRange(prop),
+        property: prop
+      })
+    })
+  }
+
+  // 解析事件
+  if (tsl.events && Array.isArray(tsl.events)) {
+    tsl.events.forEach((event) => {
+      properties.push({
+        identifier: event.identifier,
+        name: event.name,
+        description: event.description,
+        dataType: 'struct',
+        type: IoTThingModelTypeEnum.EVENT,
+        eventType: event.type,
+        required: event.required,
+        outputParams: event.outputParams,
+        event: event
+      })
+    })
+  }
+
+  // 解析服务
+  if (tsl.services && Array.isArray(tsl.services)) {
+    tsl.services.forEach((service) => {
+      properties.push({
+        identifier: service.identifier,
+        name: service.name,
+        description: service.description,
+        dataType: 'struct',
+        type: IoTThingModelTypeEnum.SERVICE,
+        callType: service.callType,
+        required: service.required,
+        inputParams: service.inputParams,
+        outputParams: service.outputParams,
+        service: service
+      })
+    })
+  }
+  propertyList.value = properties
+}
+
+/**
+ * 获取属性单位
+ * @param property 属性对象
+ * @returns 属性单位
+ */
+const getPropertyUnit = (property: any) => {
+  if (!property) return undefined
+
+  // 数值型数据的单位
+  if (property.dataSpecs && property.dataSpecs.unit) {
+    return property.dataSpecs.unit
+  }
+
+  return undefined
+}
+
+/**
+ * 获取属性范围描述
+ * @param property 属性对象
+ * @returns 属性范围描述
+ */
+const getPropertyRange = (property: any) => {
+  if (!property) return undefined
+
+  // 数值型数据的范围
+  if (property.dataSpecs) {
+    const specs = property.dataSpecs
+    if (specs.min !== undefined && specs.max !== undefined) {
+      return `${specs.min}~${specs.max}`
+    }
+  }
+
+  // 枚举型和布尔型数据的选项
+  if (property.dataSpecsList && Array.isArray(property.dataSpecsList)) {
+    return property.dataSpecsList.map((item: any) => `${item.name}(${item.value})`).join(', ')
+  }
+
+  return undefined
+}
+
+/** 监听产品变化 */
+watch(
+  () => props.productId,
+  () => {
+    getThingModelTSL()
+  },
+  { immediate: true }
+)
+
+/** 监听触发类型变化 */
+watch(
+  () => props.triggerType,
+  () => {
+    localValue.value = ''
+  }
+)
+</script>
+
+<style scoped>
+/* 下拉选项样式 */
+:deep(.el-select-dropdown__item) {
+  height: auto;
+  padding: 6px 20px;
+}
+
+/* 弹出层内容样式 */
+.property-detail-content {
+  padding: 4px 0;
+}
+
+/* 弹出层自定义样式 */
+:global(.property-detail-popover) {
+  /* 可以在这里添加全局弹出层样式 */
+  max-width: 400px !important;
+}
+
+:global(.property-detail-popover .el-popover__content) {
+  padding: 16px !important;
+}
+</style>

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

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSceneRule,
+  getRuleScenePage,
+  updateSceneRuleStatus,
+} from '#/api/iot/rule/scene';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'IoTRuleScene' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建场景规则 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑场景规则 */
+function handleEdit(row: RuleSceneApi.SceneRule) {
+  formModalApi.setData(row).open();
+}
+
+/** 启用/停用场景规则 */
+async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
+  const newStatus = row.status === 0 ? 1 : 0;
+  const hideLoading = message.loading({
+    content: newStatus === 0 ? '正在启用...' : '正在停用...',
+    duration: 0,
+  });
+  try {
+    await updateSceneRuleStatus(row.id as number, newStatus);
+    message.success({
+      content: newStatus === 0 ? '启用成功' : '停用成功',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 删除场景规则 */
+async function handleDelete(row: RuleSceneApi.SceneRule) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteSceneRule(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRuleScenePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<RuleSceneApi.SceneRule>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="场景规则列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['场景规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+
+      <!-- 操作列 -->
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: row.status === 0 ? '停用' : '启用',
+              type: 'link',
+              icon: row.status === 0 ? 'ant-design:stop-outlined' : 'ant-design:check-circle-outlined',
+              onClick: handleToggleStatus.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

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

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createSceneRule,
+  getSceneRule,
+  updateSceneRule,
+} from '#/api/iot/rule/scene';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<RuleSceneApi.SceneRule>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['场景规则'])
+    : $t('ui.actionTitle.create', ['场景规则']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as RuleSceneApi.SceneRule;
+    try {
+      await (formData.value?.id ? updateSceneRule(data) : createSceneRule(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<RuleSceneApi.SceneRule>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSceneRule(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
+