From dab9509ba0ae1e68b6dd1a91dd752318bdcd36ed Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 20 May 2026 09:01:57 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88iot=EF=BC=89:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20rule/scene=20=E7=9A=84=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-antd/src/views/iot/rule/scene/data.ts |  37 +-
 .../rule/scene/form/configs/alert-config.vue  |  16 +-
 .../scene/form/configs/condition-config.vue   |  51 +--
 .../configs/current-time-condition-config.vue |   8 +-
 .../form/configs/device-control-config.vue    |  40 +-
 .../form/configs/device-trigger-config.vue    | 106 +++---
 .../configs/main-condition-inner-config.vue   |  37 +-
 .../configs/sub-condition-group-config.vue    |  10 +-
 .../configs/timer-condition-group-config.vue  | 184 +++++++++
 .../scene/form/inputs/json-params-input.vue   |  29 +-
 .../rule/scene/form/inputs/value-input.vue    |  26 +-
 .../iot/rule/scene/form/rule-scene-form.vue   | 360 ------------------
 .../scene/form/sections/action-section.vue    |  90 +++--
 .../form/sections/basic-info-section.vue      |  32 +-
 .../scene/form/sections/trigger-section.vue   |  99 +++--
 .../scene/form/selectors/device-selector.vue  |  12 +-
 .../form/selectors/operator-selector.vue      |  14 +-
 .../scene/form/selectors/product-selector.vue |  11 +-
 .../form/selectors/property-selector.vue      | 105 +++--
 .../src/views/iot/rule/scene/index.vue        | 341 ++++++++++++++++-
 .../src/views/iot/rule/scene/modules/form.vue | 270 ++++++++++---
 21 files changed, 1094 insertions(+), 784 deletions(-)
 create mode 100644 apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
 delete mode 100644 apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue

diff --git a/apps/web-antd/src/views/iot/rule/scene/data.ts b/apps/web-antd/src/views/iot/rule/scene/data.ts
index fd948f9bf..b164629d5 100644
--- a/apps/web-antd/src/views/iot/rule/scene/data.ts
+++ b/apps/web-antd/src/views/iot/rule/scene/data.ts
@@ -89,49 +89,42 @@ export function useGridFormSchema(): VbenFormSchema[] {
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },
-    {
-      field: 'id',
-      title: '规则编号',
-      minWidth: 80,
-    },
     {
       field: 'name',
       title: '规则名称',
-      minWidth: 150,
+      minWidth: 180,
+      slots: { default: 'name' },
     },
     {
-      field: 'description',
-      title: '规则描述',
-      minWidth: 200,
+      field: 'triggers',
+      title: '触发条件',
+      minWidth: 260,
+      slots: { default: 'triggers' },
+    },
+    {
+      field: 'actions',
+      title: '执行动作',
+      minWidth: 220,
+      slots: { default: 'actionsCol' },
     },
     {
       field: 'status',
       title: '规则状态',
-      minWidth: 100,
+      width: 90,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
-    {
-      field: 'actionCount',
-      title: '执行动作数',
-      minWidth: 100,
-    },
-    {
-      field: 'executeCount',
-      title: '执行次数',
-      minWidth: 100,
-    },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
+      width: 160,
       formatter: 'formatDateTime',
     },
     {
       title: '操作',
-      width: 240,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue
index 1edf04e92..5d829a6de 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue
@@ -23,17 +23,13 @@ const localValue = useVModel(props, 'modelValue', emit);
 const loading = ref(false); // 加载状态
 const alertConfigs = ref<any[]>([]); // 告警配置列表
 
-/**
- * 处理选择变化事件
- * @param value 选中的值
- */
+/** 处理选择变化事件 */
 function handleChange(value?: any) {
   emit('update:modelValue', value);
 }
 
-/**
- * 加载告警配置列表
- */
+// TODO @AI：这个是不是 antd + vue 也使用这个接口？要不增加一个 simple-list 接口？
+/** 加载告警配置列表 */
 async function loadAlertConfigs() {
   loading.value = true;
   try {
@@ -48,7 +44,7 @@ async function loadAlertConfigs() {
   }
 }
 
-// 组件挂载时加载数据
+/** 初始化 **/
 onMounted(() => {
   loadAlertConfigs();
 });
@@ -58,7 +54,7 @@ onMounted(() => {
   <div class="w-full">
     <Form.Item label="告警配置" required>
       <Select
-        v-model="localValue"
+        v-model:value="localValue"
         placeholder="请选择告警配置"
         filterable
         clearable
@@ -74,7 +70,7 @@ onMounted(() => {
         >
           <div class="flex items-center justify-between">
             <span>{{ config.name }}</span>
-            <Tag :type="config.enabled ? 'success' : 'danger'" size="small">
+            <Tag :color="config.enabled ? 'success' : 'error'">
               {{ config.enabled ? '启用' : '禁用' }}
             </Tag>
           </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
index 3879d0fa6..8c4ee622d 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -64,9 +64,9 @@ const propertyConfig = ref<any>(null); // 属性配置
 const isDeviceCondition = computed(() => {
   return (
     condition.value.type ===
-      IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS.toString() ||
+      IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
     condition.value.type ===
-      IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString()
+      IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
   );
 }); // 计算属性：判断是否为设备相关条件
 
@@ -156,26 +156,27 @@ function handleOperatorChange() {
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 条件类型选择 -->
     <Row :gutter="16">
       <Col :span="8">
         <Form.Item label="条件类型" required>
           <Select
-            :model-value="condition.type"
-            @update:model-value="
-              (value: any) => updateConditionField('type', value)
-            "
-            @change="handleConditionTypeChange"
+            :value="condition.type"
+            @change="(value: any) => {
+              updateConditionField('type', value);
+              handleConditionTypeChange(value);
+            }"
             placeholder="请选择条件类型"
             class="w-full"
           >
             <Select.Option
               v-for="option in getConditionTypeOptions()"
               :key="option.value"
-              :label="option.label"
               :value="option.value"
-            />
+            >
+              {{ option.label }}
+            </Select.Option>
           </Select>
         </Form.Item>
       </Col>
@@ -212,9 +213,9 @@ function handleOperatorChange() {
     <div
       v-if="
         condition.type ===
-        IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS.toString()
+        IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
       "
-      class="gap-16px flex flex-col"
+      class="gap-[16px] flex flex-col"
     >
       <!-- 状态和操作符选择 -->
       <Row :gutter="16">
@@ -222,9 +223,10 @@ function handleOperatorChange() {
         <Col :span="12">
           <Form.Item label="操作符" required>
             <Select
-              :model-value="condition.operator"
-              @update:model-value="
+              :value="condition.operator"
+              @change="
                 (value: any) => updateConditionField('operator', value)
+              
               "
               placeholder="请选择操作符"
               class="w-full"
@@ -232,9 +234,10 @@ function handleOperatorChange() {
               <Select.Option
                 v-for="option in statusOperatorOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
@@ -243,9 +246,10 @@ function handleOperatorChange() {
         <Col :span="12">
           <Form.Item label="设备状态" required>
             <Select
-              :model-value="condition.param"
-              @update:model-value="
+              :value="condition.param"
+              @change="
                 (value: any) => updateConditionField('param', value)
+              
               "
               placeholder="请选择设备状态"
               class="w-full"
@@ -253,9 +257,10 @@ function handleOperatorChange() {
               <Select.Option
                 v-for="option in deviceStatusOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
@@ -266,9 +271,9 @@ function handleOperatorChange() {
     <div
       v-else-if="
         condition.type ===
-        IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString()
+        IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
       "
-      class="space-y-16px"
+      class="space-y-[16px]"
     >
       <!-- 属性配置 -->
       <Row :gutter="16">
@@ -323,7 +328,7 @@ function handleOperatorChange() {
     <CurrentTimeConditionConfig
       v-else-if="
         condition.type ===
-        IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME.toString()
+        IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
       "
       :model-value="condition"
       @update:model-value="updateCondition"
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
index af63c77a8..fca160565 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
@@ -39,7 +39,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
     icon: 'ep:arrow-left',
     iconClass: 'text-blue-500',
-    tag: 'primary',
+    tag: 'processing',
     category: '时间点',
   },
   {
@@ -63,7 +63,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
     icon: 'ep:position',
     iconClass: 'text-purple-500',
-    tag: 'info',
+    tag: 'default',
     category: '时间点',
   },
   {
@@ -71,7 +71,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
     icon: 'ep:calendar',
     iconClass: 'text-red-500',
-    tag: 'danger',
+    tag: 'error',
     category: '日期',
   },
 ];
@@ -194,7 +194,7 @@ watch(
                   <IconifyIcon :icon="option.icon" :class="option.iconClass" />
                   <span>{{ option.label }}</span>
                 </div>
-                <Tag :type="option.tag as any" size="small">
+                <Tag :color="option.tag">
                   {{ option.category }}
                 </Tag>
               </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
index 28bef096c..f02275060 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
@@ -1,10 +1,7 @@
 <!-- 设备控制配置组件 -->
 <script setup lang="ts">
 import type { Action } from '#/api/iot/rule/scene';
-import type {
-  ThingModelProperty,
-  ThingModelService,
-} from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, onMounted, ref, watch } from 'vue';
 
@@ -37,10 +34,10 @@ const emit = defineEmits<{
 
 const action = useVModel(props, 'modelValue', emit);
 
-const thingModelProperties = ref<ThingModelProperty[]>([]); // 物模型属性列表
+const thingModelProperties = ref<ThingModelApi.Property[]>([]); // 物模型属性列表
 const loadingThingModel = ref(false); // 物模型加载状态
-const selectedService = ref<null | ThingModelService>(null); // 选中的服务对象
-const serviceList = ref<ThingModelService[]>([]); // 服务列表
+const selectedService = ref<null | ThingModelApi.Service>(null); // 选中的服务对象
+const serviceList = ref<ThingModelApi.Service[]>([]); // 服务列表
 const loadingServices = ref(false); // 服务加载状态
 
 // 参数值的计算属性，用于双向绑定
@@ -55,6 +52,7 @@ const paramsValue = computed({
   },
   set: (value: string) => {
     // 直接保存为 JSON 字符串，不进行解析转换
+    // TODO @AI：这里有 linter 报错
     action.value.params = value.trim() || '';
   },
 });
@@ -63,7 +61,7 @@ const paramsValue = computed({
 const isPropertySetAction = computed(() => {
   return (
     action.value.type ===
-    IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString()
+    IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
   );
 });
 
@@ -71,7 +69,7 @@ const isPropertySetAction = computed(() => {
 const isServiceInvokeAction = computed(() => {
   return (
     action.value.type ===
-    IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE.toString()
+    IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
   );
 });
 
@@ -84,6 +82,7 @@ function handleProductChange(productId?: number) {
   if (action.value.productId !== productId) {
     action.value.deviceId = undefined;
     action.value.identifier = undefined; // 清空服务标识符
+    // TODO @AI：这里有 linter 报错
     action.value.params = ''; // 清空参数，保存为空字符串
     selectedService.value = null; // 清空选中的服务
     serviceList.value = []; // 清空服务列表
@@ -106,6 +105,7 @@ function handleProductChange(productId?: number) {
 function handleDeviceChange(deviceId?: number) {
   // 当设备变化时，清空参数配置
   if (action.value.deviceId !== deviceId) {
+    // TODO @AI：这里有 linter 报错
     action.value.params = ''; // 清空参数，保存为空字符串
   }
 }
@@ -164,6 +164,7 @@ async function loadThingModelProperties(productId: number) {
     loadingThingModel.value = true;
     const tslData = await getThingModelTSL(productId);
 
+    // TODO @AI：这里有 linter 报错
     if (!tslData?.properties) {
       thingModelProperties.value = [];
       return;
@@ -171,7 +172,7 @@ async function loadThingModelProperties(productId: number) {
 
     // 过滤出可写的属性（accessMode 包含 'w'）
     thingModelProperties.value = tslData.properties.filter(
-      (property: ThingModelProperty) =>
+      (property: ThingModelApi.Property) =>
         property.accessMode &&
         (property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
           property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value),
@@ -198,11 +199,13 @@ async function loadServiceList(productId: number) {
     loadingServices.value = true;
     const tslData = await getThingModelTSL(productId);
 
+    // TODO @AI：这里有 linter 报错
     if (!tslData?.services) {
       serviceList.value = [];
       return;
     }
 
+    // TODO @AI：这里有 linter 报错
     serviceList.value = tslData.services;
   } catch (error) {
     console.error('加载服务列表失败:', error);
@@ -213,8 +216,8 @@ async function loadServiceList(productId: number) {
 }
 
 /**
- * 从TSL加载服务信息（用于编辑模式回显）
- * @param productId 产品ID
+ * 从 TSL 加载服务信息（用于编辑模式回显）
+ * @param productId 产品 ID
  * @param serviceIdentifier 服务标识符
  */
 async function loadServiceFromTSL(
@@ -338,7 +341,7 @@ watch(
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
     <Row :gutter="16">
       <Col :span="12">
@@ -361,10 +364,10 @@ watch(
     </Row>
 
     <!-- 服务选择 - 服务调用类型时显示 -->
-    <div v-if="action.productId && isServiceInvokeAction" class="space-y-16px">
+    <div v-if="action.productId && isServiceInvokeAction" class="space-y-[16px]">
       <Form.Item label="服务" required>
         <Select
-          v-model="action.identifier"
+          v-model:value="action.identifier"
           placeholder="请选择服务"
           filterable
           clearable
@@ -381,8 +384,7 @@ watch(
             <div class="flex items-center justify-between">
               <span>{{ service.name }}</span>
               <Tag
-                :type="service.callType === 'sync' ? 'primary' : 'success'"
-                size="small"
+                :color="service.callType === 'sync' ? 'processing' : 'success'"
               >
                 {{ service.callType === 'sync' ? '同步' : '异步' }}
               </Tag>
@@ -392,7 +394,7 @@ watch(
       </Form.Item>
 
       <!-- 服务参数配置 -->
-      <div v-if="action.identifier" class="space-y-16px">
+      <div v-if="action.identifier" class="space-y-[16px]">
         <Form.Item label="服务参数" required>
           <JsonParamsInput
             v-model="paramsValue"
@@ -405,7 +407,7 @@ watch(
     </div>
 
     <!-- 控制参数配置 - 属性设置类型时显示 -->
-    <div v-if="action.productId && isPropertySetAction" class="space-y-16px">
+    <div v-if="action.productId && isPropertySetAction" class="space-y-[16px]">
       <!-- 参数配置 -->
       <Form.Item label="参数" required>
         <JsonParamsInput
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
index b3f9ad675..e68c3fef7 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
@@ -93,37 +93,38 @@ function removeConditionGroup() {
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 主条件配置 - 默认直接展示 -->
-    <div class="space-y-16px">
+    <div class="space-y-[16px]">
       <!-- 主条件配置 -->
-      <div class="gap-16px flex flex-col">
+      <div class="gap-[16px] flex flex-col">
         <!-- 主条件配置 -->
-        <div class="space-y-16px">
-          <!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
+        <div class="space-y-[16px]">
+          <!-- 主条件头部（绿色主题） -->
           <div
-            class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
+            class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
           >
-            <div class="gap-12px flex items-center">
+            <div class="gap-[10px] flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-green-700"
+                class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                  class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
                 >
                   主
                 </div>
                 <span>主条件</span>
               </div>
-              <el-tag size="small" type="success">必须满足</el-tag>
+              <Tag color="success">必须满足</Tag>
             </div>
           </div>
 
           <!-- 主条件内容配置 -->
+          <!-- TODO @AI：这里有 linter 报错 -->
           <MainConditionInnerConfig
             :model-value="trigger"
             @update:model-value="updateCondition"
-            :trigger-type="trigger.type as any"
+            :trigger-type="trigger.type"
             @trigger-type-change="handleTriggerTypeChange"
           />
         </div>
@@ -131,30 +132,28 @@ function removeConditionGroup() {
     </div>
 
     <!-- 条件组配置 -->
-    <div class="space-y-16px">
+    <div class="space-y-[16px]">
       <!-- 条件组配置 -->
-      <div class="gap-16px flex flex-col">
-        <!-- 条件组容器头部 -->
+      <div class="gap-[16px] flex flex-col">
+        <!-- 条件组容器头部（绿色主题） -->
         <div
-          class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
+          class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
         >
-          <div class="gap-12px flex items-center">
+          <div class="gap-[10px] flex items-center">
             <div
-              class="gap-8px text-16px font-600 flex items-center text-green-700"
+              class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
             >
               <div
-                class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
               >
                 组
               </div>
               <span>附加条件组</span>
             </div>
-            <el-tag size="small" type="success">与"主条件"为且关系</el-tag>
-            <el-tag size="small" type="info">
-              {{ trigger.conditionGroups?.length || 0 }} 个子条件组
-            </el-tag>
+            <Tag color="success">与「主条件」为且关系</Tag>
+            <Tag>{{ trigger.conditionGroups?.length || 0 }} 个子条件组</Tag>
           </div>
-          <div class="gap-8px flex items-center">
+          <div class="gap-[8px] flex items-center">
             <Button
               type="primary"
               size="small"
@@ -164,7 +163,12 @@ function removeConditionGroup() {
               <IconifyIcon icon="lucide:plus" />
               添加子条件组
             </Button>
-            <Button danger size="small" text @click="removeConditionGroup">
+            <Button
+              danger
+              size="small"
+              type="link"
+              @click="removeConditionGroup"
+            >
               <IconifyIcon icon="lucide:trash-2" />
               删除条件组
             </Button>
@@ -174,7 +178,7 @@ function removeConditionGroup() {
         <!-- 子条件组列表 -->
         <div
           v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
-          class="space-y-16px"
+          class="space-y-[16px]"
         >
           <!-- 逻辑关系说明 -->
           <div class="relative">
@@ -183,37 +187,37 @@ function removeConditionGroup() {
               :key="`sub-group-${subGroupIndex}`"
               class="relative"
             >
-              <!-- 子条件组容器 -->
+              <!-- 子条件组容器（橙色主题） -->
               <div
-                class="rounded-8px border-2 border-orange-200 bg-orange-50 shadow-sm transition-shadow hover:shadow-md"
+                class="rounded-[8px] border border-orange-200 bg-orange-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-orange-900/40 dark:bg-orange-950/20"
               >
                 <div
-                  class="p-16px rounded-t-6px flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50"
+                  class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50 dark:border-orange-900/40 dark:from-orange-950/30 dark:to-yellow-950/30"
                 >
-                  <div class="gap-12px flex items-center">
+                  <div class="gap-[10px] flex items-center">
                     <div
-                      class="gap-8px text-16px font-600 flex items-center text-orange-700"
+                      class="gap-[8px] text-[14px] font-semibold flex items-center text-orange-700 dark:text-orange-300"
                     >
                       <div
-                        class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
+                        class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
                       >
                         {{ subGroupIndex + 1 }}
                       </div>
                       <span>子条件组 {{ subGroupIndex + 1 }}</span>
                     </div>
-                    <Tag size="small" type="warning" class="font-500">
-                      组内条件为"且"关系
+                    <Tag color="warning" class="font-medium">
+                      组内条件为「且」关系
                     </Tag>
-                    <Tag size="small" type="info">
-                      {{ (subGroup as any)?.length || 0 }}个条件
+                    <Tag color="default">
+                      {{ (subGroup as any)?.length || 0 }} 个条件
                     </Tag>
                   </div>
                   <Button
                     danger
                     size="small"
-                    text
-                    @click="removeSubGroup(subGroupIndex)"
+                    type="link"
                     class="hover:bg-red-50"
+                    @click="removeSubGroup(subGroupIndex)"
                   >
                     <IconifyIcon icon="lucide:trash-2" />
                     删除组
@@ -225,7 +229,7 @@ function removeConditionGroup() {
                   @update:model-value="
                     (value) => updateSubGroup(subGroupIndex, value)
                   "
-                  :trigger-type="trigger.type as any"
+                  :trigger-type="trigger.type"
                   :max-conditions="maxConditionsPerGroup"
                 />
               </div>
@@ -233,35 +237,35 @@ function removeConditionGroup() {
               <!-- 子条件组间的'或'连接符 -->
               <div
                 v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
-                class="py-12px flex items-center justify-center"
+                class="py-[12px] flex items-center justify-center"
               >
-                <div class="gap-8px flex items-center">
+                <div class="gap-[8px] flex items-center">
                   <!-- 连接线 -->
-                  <div class="w-32px h-1px bg-orange-300"></div>
+                  <div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
                   <!-- 或标签 -->
                   <div
-                    class="px-16px py-6px rounded-full border-2 border-orange-300 bg-orange-100"
+                    class="px-[14px] py-[3px] rounded-full border border-orange-300 bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50"
                   >
-                    <span class="text-14px font-600 text-orange-600">或</span>
+                    <span class="text-[13px] font-semibold text-orange-600 dark:text-orange-300">或</span>
                   </div>
                   <!-- 连接线 -->
-                  <div class="w-32px h-1px bg-orange-300"></div>
+                  <div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- 空状态 -->
+        <!-- 空状态（橙色主题） -->
         <div
           v-else
-          class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
+          class="p-[24px] rounded-[8px] border-2 border-dashed border-orange-200 bg-orange-50/40 text-center dark:border-orange-900/40 dark:bg-orange-950/10"
         >
-          <div class="gap-12px flex flex-col items-center">
-            <IconifyIcon icon="lucide: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 class="gap-[10px] flex flex-col items-center">
+            <IconifyIcon icon="lucide:plus" class="text-[28px] text-orange-400 dark:text-orange-300" />
+            <div class="text-orange-600 dark:text-orange-300">
+              <p class="text-[13px] font-medium mb-[2px]">暂无子条件组</p>
+              <p class="text-[12px]">点击上方「添加子条件组」按钮开始配置</p>
             </div>
           </div>
         </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
index 59f72afe5..1da332a92 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
@@ -176,18 +176,20 @@ function handlePropertyChange(propertyInfo: any) {
   <div class="space-y-4">
     <!-- 触发事件类型选择 -->
     <Form.Item label="触发事件类型" required>
+      <!-- TODO @AI：change linter 报错 -->
       <Select
-        :model-value="triggerType"
-        @update:model-value="handleTriggerTypeChange"
+        :value="triggerType"
+        @change="handleTriggerTypeChange"
         placeholder="请选择触发事件类型"
         class="w-full"
       >
         <Select.Option
           v-for="option in triggerTypeOptions"
           :key="option.value"
-          :label="option.label"
           :value="option.value"
-        />
+        >
+          {{ option.label }}
+        </Select.Option>
       </Select>
     </Form.Item>
 
@@ -260,17 +262,18 @@ function handlePropertyChange(propertyInfo: any) {
                 triggerType ===
                 IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
               "
-              v-model="condition.value"
+              v-model:value="condition.value"
               type="service"
               :config="serviceConfig as any"
               placeholder="请输入 JSON 格式的服务参数"
             />
             <!-- 事件上报参数配置 -->
+            <!-- TODO @AI：JsonParamsInput linter 报错 -->
             <JsonParamsInput
               v-else-if="
                 triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
               "
-              v-model="condition.value"
+              v-model:value="condition.value"
               type="event"
               :config="eventConfig as any"
               placeholder="请输入 JSON 格式的事件参数"
@@ -323,29 +326,30 @@ function handlePropertyChange(propertyInfo: any) {
         <Col :span="6">
           <Form.Item label="操作符" required>
             <Select
-              :model-value="condition.operator"
-              @update:model-value="
+              :value="condition.operator"
+              @change="
                 (value: any) => updateConditionField('operator', value)
               "
               placeholder="请选择操作符"
               class="w-full"
             >
               <Select.Option
-                :label="
-                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
-                "
                 :value="
                   IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
                 "
-              />
+              >
+                {{
+                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
+                }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
         <Col :span="6">
           <Form.Item label="参数" required>
             <Select
-              :model-value="condition.value"
-              @update:model-value="
+              :value="condition.value"
+              @change="
                 (value: any) => updateConditionField('value', value)
               "
               placeholder="请选择操作符"
@@ -354,9 +358,10 @@ function handlePropertyChange(propertyInfo: any) {
               <Select.Option
                 v-for="option in deviceStatusChangeOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
index 9fcd86514..7b9eacf7f 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
@@ -45,7 +45,7 @@ async function addCondition() {
   }
 
   const newCondition: TriggerCondition = {
-    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString(), // 默认为设备属性
+    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
     productId: undefined,
     deviceId: undefined,
     identifier: '',
@@ -108,7 +108,7 @@ function updateCondition(index: number, condition: TriggerCondition) {
       >
         <!-- 条件配置 -->
         <div
-          class="rounded-3px bg-fill-color-blank border border-border shadow-sm"
+          class="rounded-[3px] bg-fill-color-blank border border-border shadow-sm"
         >
           <div
             class="rounded-t-1 bg-fill-color-blank flex items-center justify-between border-b border-border p-3"
@@ -124,12 +124,12 @@ function updateCondition(index: number, condition: TriggerCondition) {
               </span>
             </div>
             <Button
+              v-if="subGroup!.length > 1"
               danger
               size="small"
-              text
-              @click="removeCondition(conditionIndex)"
-              v-if="subGroup!.length > 1"
+              type="link"
               class="hover:bg-red-50"
+              @click="removeCondition(conditionIndex)"
             >
               <IconifyIcon icon="lucide:trash-2" />
             </Button>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
new file mode 100644
index 000000000..c1db4910d
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import type { TriggerCondition } from '#/api/iot/rule/scene';
+
+import { nextTick } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Tag } from 'ant-design-vue';
+
+import { IotRuleSceneTriggerTypeEnum } from '#/views/iot/utils/constants';
+
+import SubConditionGroupConfig from './sub-condition-group-config.vue';
+
+/** 定时触发器条件组配置组件 */
+// TODO @AI：defineOptions 这种，和上面这种注释，是不是可以去掉？（iot 里，其它的看看也检查下。）
+defineOptions({ name: 'TimerConditionGroupConfig' });
+
+const props = defineProps<{
+  modelValue?: TriggerCondition[][];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TriggerCondition[][]): void;
+}>();
+
+const conditionGroups = useVModel(props, 'modelValue', emit);
+
+const maxGroups = 3; // 最多 3 个条件组
+const maxConditionsPerGroup = 3; // 每组最多 3 个条件
+
+/** 添加条件组 */
+async function addConditionGroup() {
+  if (!conditionGroups.value) {
+    conditionGroups.value = [];
+  }
+  if (conditionGroups.value.length >= maxGroups) {
+    return;
+  }
+  await nextTick();
+  if (conditionGroups.value) {
+    conditionGroups.value.push([]);
+  }
+}
+
+/** 移除条件组 */
+function removeConditionGroup(index: number) {
+  if (conditionGroups.value) {
+    conditionGroups.value.splice(index, 1);
+  }
+}
+
+/** 更新条件组 */
+function updateConditionGroup(index: number, group: TriggerCondition[]) {
+  if (conditionGroups.value) {
+    conditionGroups.value[index] = group;
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-[16px]">
+    <!-- 条件组容器头部（蓝色主题） -->
+    <div
+      class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-blue-200 bg-gradient-to-r from-blue-50 to-cyan-50 dark:border-blue-900/40 dark:from-blue-950/30 dark:to-cyan-950/30"
+    >
+      <div class="gap-[10px] flex items-center">
+        <div
+          class="gap-[8px] text-[14px] font-semibold flex items-center text-blue-700 dark:text-blue-300"
+        >
+          <div
+            class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+          >
+            组
+          </div>
+          <span>附加条件组</span>
+        </div>
+        <Tag color="processing">定时触发时需满足以下条件</Tag>
+        <Tag color="warning">
+          {{ conditionGroups?.length || 0 }} 个子条件组
+        </Tag>
+      </div>
+      <Button
+        type="primary"
+        size="small"
+        :disabled="(conditionGroups?.length || 0) >= maxGroups"
+        @click="addConditionGroup"
+      >
+        <IconifyIcon icon="lucide:plus" />
+        添加条件组
+      </Button>
+    </div>
+
+    <!-- 条件组列表 -->
+    <div
+      v-if="conditionGroups && conditionGroups.length > 0"
+      class="space-y-[16px]"
+    >
+      <div
+        v-for="(group, groupIndex) in conditionGroups"
+        :key="`group-${groupIndex}`"
+        class="relative"
+      >
+        <!-- 条件组容器（橙色主题） -->
+        <div
+          class="rounded-[8px] border border-orange-200 bg-orange-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-orange-900/40 dark:bg-orange-950/20"
+        >
+          <div
+            class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50 dark:border-orange-900/40 dark:from-orange-950/30 dark:to-yellow-950/30"
+          >
+            <div class="gap-[10px] flex items-center">
+              <div
+                class="gap-[8px] text-[14px] font-semibold flex items-center text-orange-700 dark:text-orange-300"
+              >
+                <div
+                  class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
+                >
+                  {{ groupIndex + 1 }}
+                </div>
+                <span>子条件组 {{ groupIndex + 1 }}</span>
+              </div>
+              <Tag color="warning" class="font-medium">
+                组内条件为「且」关系
+              </Tag>
+              <Tag color="default">
+                {{ group?.length || 0 }} 个条件
+              </Tag>
+            </div>
+            <Button
+              danger
+              size="small"
+              type="link"
+              class="hover:bg-red-50"
+              @click="removeConditionGroup(groupIndex)"
+            >
+              <IconifyIcon icon="lucide:trash-2" />
+              删除组
+            </Button>
+          </div>
+
+          <SubConditionGroupConfig
+            :model-value="group"
+            :trigger-type="IotRuleSceneTriggerTypeEnum.TIMER"
+            :max-conditions="maxConditionsPerGroup"
+            @update:model-value="
+              (value: TriggerCondition[]) =>
+                updateConditionGroup(groupIndex, value)
+            "
+          />
+        </div>
+
+        <!-- 条件组间的「或」连接符 -->
+        <div
+          v-if="groupIndex < conditionGroups.length - 1"
+          class="py-[12px] flex items-center justify-center"
+        >
+          <div class="gap-[8px] flex items-center">
+            <div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
+            <div
+              class="px-[14px] py-[3px] rounded-full border border-orange-300 bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50"
+            >
+              <span class="text-[13px] font-semibold text-orange-600 dark:text-orange-300">或</span>
+            </div>
+            <div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态（蓝色主题） -->
+    <div
+      v-else
+      class="p-[24px] rounded-[8px] border-2 border-dashed border-blue-200 bg-blue-50/40 text-center dark:border-blue-900/40 dark:bg-blue-950/10"
+    >
+      <div class="gap-[10px] flex flex-col items-center">
+        <IconifyIcon icon="lucide:plus" class="text-[28px] text-blue-400 dark:text-blue-300" />
+        <div class="text-blue-600 dark:text-blue-300">
+          <p class="text-[13px] font-medium mb-[2px]">暂无附加条件</p>
+          <p class="text-[12px]">定时触发时将直接执行动作</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
index 6097c911c..f8a21ccf3 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -307,17 +307,17 @@ function getParamTypeName(dataType: string) {
  */
 function getParamTypeTag(dataType: string) {
   const tagMap: Record<string, string> = {
-    [IoTDataSpecsDataTypeEnum.INT]: 'primary',
+    [IoTDataSpecsDataTypeEnum.INT]: 'processing',
     [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
     [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
-    [IoTDataSpecsDataTypeEnum.TEXT]: 'info',
+    [IoTDataSpecsDataTypeEnum.TEXT]: 'default',
     [IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
-    [IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
-    [IoTDataSpecsDataTypeEnum.DATE]: 'primary',
-    [IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
+    [IoTDataSpecsDataTypeEnum.ENUM]: 'error',
+    [IoTDataSpecsDataTypeEnum.DATE]: 'processing',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: 'default',
     [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
   };
-  return tagMap[dataType] || 'info';
+  return tagMap[dataType] || 'default';
 }
 
 /**
@@ -419,12 +419,11 @@ watch(
     <!-- JSON 输入框 -->
     <div class="relative">
       <Input.TextArea
-        v-model="paramsJson"
-        type="text"
+        v-model:value="paramsJson"
         :rows="4"
         :placeholder="placeholder"
-        @input="handleParamsChange"
         :class="{ 'is-error': jsonError }"
+        @input="handleParamsChange"
       />
       <!-- 查看详细示例弹出层 -->
       <div class="absolute right-2 top-2">
@@ -438,9 +437,8 @@ watch(
         >
           <template #reference>
             <Button
-              text
-              type="primary"
-              circle
+              type="link"
+              shape="circle"
               size="small"
               :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
             >
@@ -480,8 +478,7 @@ watch(
                         {{ param.name }}
                         <Tag
                           v-if="param.required"
-                          size="small"
-                          type="danger"
+                          color="error"
                           class="ml-1"
                         >
                           {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
@@ -492,7 +489,7 @@ watch(
                       </div>
                     </div>
                     <div class="flex items-center gap-2">
-                      <Tag :type="getParamTypeTag(param.dataType)" size="small">
+                      <Tag :color="getParamTypeTag(param.dataType)">
                         {{ getParamTypeName(param.dataType) }}
                       </Tag>
                       <span class="text-xs text-secondary">
@@ -507,7 +504,7 @@ watch(
                     {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
                   </div>
                   <pre
-                    class="border-l-3px overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-primary"
+                    class="border-l-[3px] overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-primary"
                   >
                       <code>{{ generateExampleJson() }}</code>
                     </pre>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
index c17a8b3f6..9764a9efc 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
@@ -155,12 +155,12 @@ watch(
     <!-- 布尔值选择 -->
     <Select
       v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择布尔值"
       class="w-full!"
     >
-      <Select.Option label="真 (true)" :value="true" />
-      <Select.Option label="假 (false)" :value="false" />
+      <Select.Option :value="true">真 (true)</Select.Option>
+      <Select.Option :value="false">假 (false)</Select.Option>
     </Select>
 
     <!-- 枚举值选择 -->
@@ -168,16 +168,17 @@ watch(
       v-else-if="
         propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
       "
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择枚举值"
       class="w-full!"
     >
       <Select.Option
         v-for="option in enumOptions"
         :key="option.value"
-        :label="option.label"
         :value="option.value"
-      />
+      >
+        {{ option.label }}
+      </Select.Option>
     </Select>
 
     <!-- 范围输入 (between 操作符) -->
@@ -189,7 +190,7 @@ watch(
       class="w-full! flex items-center gap-2"
     >
       <Input
-        v-model="rangeStart"
+        v-model:value="rangeStart"
         :type="getInputType()"
         placeholder="最小值"
         @input="handleRangeChange"
@@ -198,7 +199,7 @@ watch(
       />
       <span class="whitespace-nowrap text-xs text-secondary"> 至 </span>
       <Input
-        v-model="rangeEnd"
+        v-model:value="rangeEnd"
         :type="getInputType()"
         placeholder="最大值"
         @input="handleRangeChange"
@@ -214,7 +215,7 @@ watch(
       class="w-full!"
     >
       <Input
-        v-model="localValue"
+        v-model:value="localValue"
         placeholder="请输入值列表，用逗号分隔"
         class="w-full!"
       >
@@ -235,7 +236,6 @@ watch(
         <Tag
           v-for="(item, index) in listPreview"
           :key="index"
-          size="small"
           class="m-0"
         >
           {{ item }}
@@ -246,7 +246,7 @@ watch(
     <!-- 日期时间输入 -->
     <DatePicker
       v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
-      v-model="dateValue"
+      v-model:value="dateValue"
       type="datetime"
       placeholder="请选择日期时间"
       format="YYYY-MM-DD HH:mm:ss"
@@ -258,7 +258,7 @@ watch(
     <!-- 数字输入 -->
     <Input.Number
       v-else-if="isNumericType()"
-      v-model="numberValue"
+      v-model:value="numberValue"
       :precision="getPrecision()"
       :step="getStep()"
       :min="getMin()"
@@ -271,7 +271,7 @@ watch(
     <!-- 文本输入 -->
     <Input
       v-else
-      v-model="localValue"
+      v-model:value="localValue"
       :type="getInputType()"
       :placeholder="getPlaceholder()"
       class="w-full!"
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue b/apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue
deleted file mode 100644
index bd1d85135..000000000
--- a/apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<script setup lang="ts">
-import type { IotSceneRule } from '#/api/iot/rule/scene';
-
-import { computed, nextTick, reactive, ref, watch } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Drawer, Form, message } from 'ant-design-vue';
-
-import { createSceneRule, updateSceneRule } from '#/api/iot/rule/scene';
-import {
-  IotRuleSceneActionTypeEnum,
-  IotRuleSceneTriggerTypeEnum,
-  isDeviceTrigger,
-} from '#/views/iot/utils/constants';
-
-import ActionSection from './sections/action-section.vue';
-import BasicInfoSection from './sections/basic-info-section.vue';
-import TriggerSection from './sections/trigger-section.vue';
-
-/** IoT 场景联动规则表单 - 主表单组件 */
-defineOptions({ name: 'RuleSceneForm' });
-
-/** 组件属性定义 */
-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 默认表单数据对象
- */
-function createDefaultFormData(): IotSceneRule {
-  return {
-    name: '',
-    description: '',
-    status: CommonStatusEnum.ENABLE, // 默认启用状态
-    triggers: [
-      {
-        type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST.toString(),
-        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 回调函数
- */
-function validateTriggers(_rule: any, value: any, callback: any) {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    callback(new Error('至少需要一个触发器'));
-    return;
-  }
-
-  for (const [i, trigger] of value.entries()) {
-    // 校验触发器类型
-    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 &&
-      !trigger.cronExpression
-    ) {
-      callback(new Error(`触发器 ${i + 1}: CRON表达式不能为空`));
-      return;
-    }
-  }
-
-  callback();
-}
-
-/**
- * 执行器校验器
- * @param _rule 校验规则（未使用）
- * @param value 校验值
- * @param callback 回调函数
- */
-function validateActions(_rule: any, value: any, callback: any) {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    callback(new Error('至少需要一个执行器'));
-    return;
-  }
-
-  for (const [i, action] of value.entries()) {
-    // 校验执行器类型
-    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 &&
-        !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) &&
-      !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 ? '编辑场景联动规则' : '新增场景联动规则',
-); // 抽屉标题
-
-/** 提交表单 */
-async function handleSubmit() {
-  // 校验表单
-  if (!formRef.value) return;
-  const valid = await formRef.value.validate();
-  if (!valid) {
-    return;
-  }
-
-  // 提交请求
-  submitLoading.value = true;
-  try {
-    if (isEdit.value) {
-      // 更新场景联动规则
-      await updateSceneRule(formData.value);
-      message.success('更新成功');
-    } else {
-      // 创建场景联动规则
-      await createSceneRule(formData.value);
-      message.success('创建成功');
-    }
-
-    // 关闭抽屉并触发成功事件
-    drawerVisible.value = false;
-    emit('success');
-  } catch (error) {
-    console.error('保存失败:', error);
-    message.error(isEdit.value ? '更新失败' : '创建失败');
-  } finally {
-    submitLoading.value = false;
-  }
-}
-
-/** 处理抽屉关闭事件 */
-const handleClose = () => {
-  drawerVisible.value = false;
-};
-
-/** 初始化表单数据 */
-function initFormData() {
-  if (props.ruleScene) {
-    // 编辑模式：数据结构已对齐，直接使用后端数据
-    isEdit.value = true;
-    formData.value = {
-      ...props.ruleScene,
-      // 确保触发器数组不为空
-      triggers: (props.ruleScene.triggers?.length as any)
-        ? 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>
-
-<template>
-  <Drawer
-    v-model="drawerVisible"
-    :title="drawerTitle"
-    width="80%"
-    direction="rtl"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    @close="handleClose"
-  >
-    <Form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules as any"
-      label-width="110px"
-    >
-      <!-- 基础信息配置 -->
-      <BasicInfoSection v-model="formData" :rules="formRules" />
-      <!-- 触发器配置 -->
-      <TriggerSection v-model:triggers="formData.triggers as any" />
-      <!-- 执行器配置 -->
-      <ActionSection v-model:actions="formData.actions as any" />
-    </Form>
-    <template #footer>
-      <div class="drawer-footer">
-        <Button :disabled="submitLoading" type="primary" @click="handleSubmit">
-          <IconifyIcon icon="ep:check" />
-          确 定
-        </Button>
-        <Button @click="handleClose">
-          <IconifyIcon icon="ep:close" />
-          取 消
-        </Button>
-      </div>
-    </template>
-  </Drawer>
-</template>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
index 12e2d5c07..417d7d0ef 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
@@ -29,20 +29,20 @@ const emit = defineEmits<{
 
 const actions = useVModel(props, 'actions', emit);
 
-/** 获取执行器标签类型（用于 el-tag 的 type 属性） */
-function getActionTypeTag(
+/** 获取执行器标签颜色（antd Tag `color`） */
+function getActionTypeColor(
   type: number,
-): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
+): 'default' | 'error' | 'processing' | 'success' | 'warning' {
   const actionTypeTags: Record<
     number,
-    'danger' | 'info' | 'primary' | 'success' | 'warning'
+    'default' | 'error' | 'processing' | 'success' | 'warning'
   > = {
-    [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
+    [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'processing',
     [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
-    [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
+    [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'error',
     [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning',
   } as const;
-  return actionTypeTags[type] || 'info';
+  return actionTypeTags[type] || 'default';
 }
 
 /** 判断是否为设备执行器类型 */
@@ -69,7 +69,7 @@ function isAlertAction(type: number): boolean {
  */
 function createDefaultActionData(): Action {
   return {
-    type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString(), // 默认为设备属性设置
+    type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
     productId: undefined,
     deviceId: undefined,
     identifier: undefined, // 物模型标识符（服务调用时使用）
@@ -100,7 +100,7 @@ function removeAction(index: number) {
  * @param type 执行器类型
  */
 function updateActionType(index: number, type: number) {
-  actions.value[index]!.type = type.toString();
+  actions.value[index]!.type = type;
   onActionTypeChange(actions.value[index] as Action, type);
 }
 
@@ -120,9 +120,6 @@ function updateAction(index: number, action: Action) {
  */
 function updateActionAlertConfig(index: number, alertConfigId?: number) {
   actions.value[index]!.alertConfigId = alertConfigId;
-  if (actions.value[index]) {
-    actions.value[index].alertConfigId = alertConfigId;
-  }
 }
 
 /**
@@ -130,22 +127,21 @@ function updateActionAlertConfig(index: number, alertConfigId?: number) {
  * @param action 执行器对象
  * @param type 执行器类型
  */
-function onActionTypeChange(action: Action, type: any) {
-  // 清理不相关的配置，确保数据结构干净
+function onActionTypeChange(action: Action, type: number) {
   if (isDeviceAction(type)) {
     // 设备控制类型：清理告警配置，确保设备参数存在
     action.alertConfigId = undefined;
-    if (!(action as any).params) {
-      (action as any).params = '';
+    if (!action.params) {
+      action.params = {};
     }
-    // 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
-    if (action.identifier && type !== (action as any).type) {
+    // 切换到设备控制类型时清空 identifier，让用户重新选择
+    if (action.identifier && type !== action.type) {
       action.identifier = undefined;
     }
   } else if (isAlertAction(type)) {
     action.productId = undefined;
     action.deviceId = undefined;
-    action.identifier = undefined; // 清理服务标识符
+    action.identifier = undefined;
     action.params = undefined;
     action.alertConfigId = undefined;
   }
@@ -156,12 +152,12 @@ function onActionTypeChange(action: Action, type: any) {
   <Card class="rounded-lg border border-primary" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
-        <div class="gap-8px flex items-center">
-          <IconifyIcon icon="ep:setting" class="text-18px text-primary" />
-          <span class="text-16px font-600 text-primary"> 执行器配置 </span>
-          <Tag size="small" type="info"> {{ actions.length }} 个执行器 </Tag>
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon icon="ep:setting" class="text-[18px] text-primary" />
+          <span class="text-[16px] font-semibold text-primary"> 执行器配置 </span>
+          <Tag color="default"> {{ actions.length }} 个执行器 </Tag>
         </div>
-        <div class="gap-8px flex items-center">
+        <div class="gap-[8px] flex items-center">
           <Button type="primary" size="small" @click="addAction">
             <IconifyIcon icon="ep:plus" />
             添加执行器
@@ -182,43 +178,42 @@ function onActionTypeChange(action: Action, type: any) {
       </div>
 
       <!-- 执行器列表 -->
-      <div v-else class="space-y-24px">
+      <div v-else class="space-y-[24px]">
         <div
           v-for="(action, index) in actions"
           :key="`action-${index}`"
-          class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
+          class="rounded-lg border border-blue-200 bg-blue-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-blue-900/40 dark:bg-blue-950/20"
         >
-          <!-- 执行器头部 - 蓝色主题 -->
+          <!-- 执行器头部（蓝色主题） -->
           <div
-            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
+            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 px-4 py-[10px] dark:border-blue-900/40 dark:from-blue-950/30 dark:to-sky-950/30"
           >
-            <div class="gap-12px flex items-center">
+            <div class="gap-[10px] flex items-center">
               <div
-                class="font-600 flex items-center gap-2 text-base text-blue-700"
+                class="font-semibold flex items-center gap-2 text-sm text-blue-700 dark:text-blue-300"
               >
                 <div
-                  class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
+                  class="flex w-[22px] h-[22px] items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
                 <span>执行器 {{ index + 1 }}</span>
               </div>
               <Tag
-                :type="getActionTypeTag(action.type as any)"
-                size="small"
-                class="font-500"
+                :color="getActionTypeColor(action.type as number)"
+                class="font-medium"
               >
-                {{ getActionTypeLabel(action.type as any) }}
+                {{ getActionTypeLabel(action.type as number) }}
               </Tag>
             </div>
-            <div class="gap-8px flex items-center">
+            <div class="gap-[8px] flex items-center">
               <Button
                 v-if="actions.length > 1"
                 danger
                 size="small"
-                text
-                @click="removeAction(index)"
+                type="link"
                 class="hover:bg-red-50"
+                @click="removeAction(index)"
               >
                 <IconifyIcon icon="lucide:trash-2" />
                 删除
@@ -227,7 +222,7 @@ function onActionTypeChange(action: Action, type: any) {
           </div>
 
           <!-- 执行器内容区域 -->
-          <div class="p-16px space-y-16px">
+          <div class="p-[16px] space-y-[16px]">
             <!-- 执行类型选择 -->
             <div class="w-full">
               <Form.Item label="执行类型" required>
@@ -243,16 +238,17 @@ function onActionTypeChange(action: Action, type: any) {
                   <Select.Option
                     v-for="option in getActionTypeOptions()"
                     :key="option.value"
-                    :label="option.label"
                     :value="option.value"
-                  />
+                  >
+                    {{ option.label }}
+                  </Select.Option>
                 </Select>
               </Form.Item>
             </div>
 
             <!-- 设备控制配置 -->
             <DeviceControlConfig
-              v-if="isDeviceAction(action.type as any)"
+              v-if="isDeviceAction(action.type as number)"
               :model-value="action"
               @update:model-value="(value) => updateAction(index, value)"
             />
@@ -261,7 +257,7 @@ function onActionTypeChange(action: Action, type: any) {
             <AlertConfig
               v-if="
                 action.type ===
-                IotRuleSceneActionTypeEnum.ALERT_RECOVER.toString()
+                IotRuleSceneActionTypeEnum.ALERT_RECOVER
               "
               :model-value="action.alertConfigId"
               @update:model-value="
@@ -273,14 +269,14 @@ function onActionTypeChange(action: Action, type: any) {
             <div
               v-if="
                 action.type ===
-                IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
+                IotRuleSceneActionTypeEnum.ALERT_TRIGGER
               "
               class="bg-fill-color-blank rounded-lg border border-border p-4"
             >
               <div class="mb-2 flex items-center gap-2">
                 <IconifyIcon icon="ep:warning" class="text-base text-warning" />
-                <span class="font-600 text-sm text-primary">触发告警</span>
-                <Tag size="small" type="warning">自动执行</Tag>
+                <span class="font-semibold text-sm text-primary">触发告警</span>
+                <Tag color="warning">自动执行</Tag>
               </div>
               <div class="text-xs leading-relaxed text-secondary">
                 当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
@@ -292,7 +288,7 @@ function onActionTypeChange(action: Action, type: any) {
       </div>
 
       <!-- 添加提示 -->
-      <div v-if="actions.length > 0" class="py-16px text-center">
+      <div v-if="actions.length > 0" class="py-[16px] text-center">
         <Button type="primary" plain @click="addAction">
           <IconifyIcon icon="ep:plus" />
           继续添加执行器
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
index 034cb6bbe..76a7fe1a4 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
@@ -16,7 +16,6 @@ defineOptions({ name: 'BasicInfoSection' });
 
 const props = defineProps<{
   modelValue: IotSceneRule;
-  rules?: any;
 }>();
 
 const emit = defineEmits<{
@@ -27,25 +26,25 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
 </script>
 
 <template>
-  <Card class="rounded-8px mb-10px border border-primary" shadow="never">
+  <Card class="rounded-[8px] mb-[10px] border border-primary" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
-        <div class="gap-8px flex items-center">
-          <IconifyIcon icon="ep:info-filled" class="text-18px text-primary" />
-          <span class="text-16px font-600 text-primary">基础信息</span>
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon icon="ep:info-filled" class="text-[18px] text-primary" />
+          <span class="text-[16px] font-semibold text-primary">基础信息</span>
         </div>
-        <div class="gap-8px flex items-center">
+        <div class="gap-[8px] flex items-center">
           <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
         </div>
       </div>
     </template>
 
     <div class="p-0">
-      <Row :gutter="24" class="mb-24px">
+      <Row :gutter="24" class="mb-[24px]">
         <Col :span="12">
-          <Form.Item label="场景名称" prop="name" required>
+          <Form.Item label="场景名称" name="name" required>
             <Input
-              v-model="formData.name"
+              v-model:value="formData.name"
               placeholder="请输入场景名称"
               :maxlength="50"
               show-word-limit
@@ -54,15 +53,15 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
           </Form.Item>
         </Col>
         <Col :span="12">
-          <Form.Item label="场景状态" prop="status" required>
-            <Radio.Group v-model="formData.status">
+          <Form.Item label="场景状态" name="status" required>
+            <Radio.Group v-model:value="formData.status">
               <Radio
                 v-for="(dict, index) in getDictOptions(
                   DICT_TYPE.COMMON_STATUS,
                   'number',
                 )"
                 :key="index"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </Radio>
@@ -70,10 +69,9 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
           </Form.Item>
         </Col>
       </Row>
-      <Form.Item label="场景描述" prop="description">
+      <Form.Item label="场景描述" name="description">
         <Input.TextArea
-          v-model="formData.description"
-          type="text"
+          v-model:value="formData.description"
           placeholder="请输入场景描述（可选）"
           :rows="3"
           :maxlength="200"
@@ -86,11 +84,11 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
 </template>
 
 <style scoped>
-:deep(.el-form-item) {
+:deep(.ant-form-item) {
   margin-bottom: 20px;
 }
 
-:deep(.el-form-item:last-child) {
+:deep(.ant-form-item:last-child) {
   margin-bottom: 0;
 }
 </style>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
index 2087030ce..90f8c0b58 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Trigger } from '#/api/iot/rule/scene';
+import type { Trigger, TriggerCondition } from '#/api/iot/rule/scene';
 
 import { onMounted } from 'vue';
 
@@ -16,6 +16,7 @@ import {
 } from '#/views/iot/utils/constants';
 
 import DeviceTriggerConfig from '../configs/device-trigger-config.vue';
+import TimerConditionGroupConfig from '../configs/timer-condition-group-config.vue';
 
 /** 触发器配置组件 */
 defineOptions({ name: 'TriggerSection' });
@@ -30,20 +31,20 @@ const emit = defineEmits<{
 
 const triggers = useVModel(props, 'triggers', emit);
 
-/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
-function getTriggerTagType(
+/** 获取触发器标签颜色（antd Tag `color`） */
+function getTriggerTagColor(
   type: number,
-): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
+): 'default' | 'error' | 'processing' | 'success' | 'warning' {
   if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
     return 'warning';
   }
-  return isDeviceTrigger(type) ? 'success' : 'info';
+  return isDeviceTrigger(type) ? 'success' : 'default';
 }
 
 /** 添加触发器 */
 function addTrigger() {
   const newTrigger: Trigger = {
-    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE.toString(),
+    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
     productId: undefined,
     deviceId: undefined,
     identifier: undefined,
@@ -65,13 +66,14 @@ function removeTrigger(index: number) {
   }
 }
 
+// TODO @AI：1）这种注释，可以简化成 /** */ 单行么？；2）vue3 + ep 都是这样的注释么，也可以简化下么？3）其它文件，看看是不是也检查下。
 /**
  * 更新触发器类型
  * @param index 触发器索引
  * @param type 触发器类型
  */
 function updateTriggerType(index: number, type: number) {
-  triggers.value[index]!.type = type.toString();
+  triggers.value[index]!.type = type;
   onTriggerTypeChange(index, type);
 }
 
@@ -93,6 +95,18 @@ function updateTriggerCronConfig(index: number, cronExpression?: string) {
   triggers.value[index]!.cronExpression = cronExpression;
 }
 
+/**
+ * 更新触发器条件组配置
+ * @param index 触发器索引
+ * @param conditionGroups 条件组数组
+ */
+function updateTriggerConditionGroups(
+  index: number,
+  conditionGroups: TriggerCondition[][],
+) {
+  triggers.value[index]!.conditionGroups = conditionGroups;
+}
+
 /**
  * 处理触发器类型变化事件
  * @param index 触发器索引
@@ -118,13 +132,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card class="rounded-8px mb-10px border border-primary" shadow="never">
+  <Card class="rounded-[8px] mb-[10px] border border-primary" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
-        <div class="gap-8px flex items-center">
-          <IconifyIcon icon="ep:lightning" class="text-18px text-primary" />
-          <span class="text-16px font-600 text-primary">触发器配置</span>
-          <Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon icon="ep:lightning" class="text-[18px] text-primary" />
+          <span class="text-[16px] font-semibold text-primary">触发器配置</span>
+          <Tag color="default"> {{ triggers.length }} 个触发器 </Tag>
         </div>
         <Button type="primary" size="small" @click="addTrigger">
           <IconifyIcon icon="lucide:plus" />
@@ -133,45 +147,44 @@ onMounted(() => {
       </div>
     </template>
 
-    <div class="p-16px space-y-24px">
+    <div class="p-[16px] space-y-[24px]">
       <!-- 触发器列表 -->
-      <div v-if="triggers.length > 0" class="space-y-24px">
+      <div v-if="triggers.length > 0" class="space-y-[24px]">
         <div
           v-for="(triggerItem, index) in triggers"
           :key="`trigger-${index}`"
-          class="rounded-8px border-2 border-green-200 bg-green-50 shadow-sm transition-shadow hover:shadow-md"
+          class="rounded-[8px] border border-green-200 bg-green-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-green-900/40 dark:bg-green-950/20"
         >
-          <!-- 触发器头部 - 绿色主题 -->
+          <!-- 触发器头部（绿色主题） -->
           <div
-            class="p-16px rounded-t-6px flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
+            class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
           >
-            <div class="gap-12px flex items-center">
+            <div class="gap-[12px] flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-green-700"
+                class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                  class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
                 <span>触发器 {{ index + 1 }}</span>
               </div>
               <Tag
-                size="small"
-                :type="getTriggerTagType(triggerItem.type as any)"
-                class="font-500"
+                :color="getTriggerTagColor(triggerItem.type as number)"
+                class="font-medium"
               >
-                {{ getTriggerTypeLabel(triggerItem.type as any) }}
+                {{ getTriggerTypeLabel(triggerItem.type as number) }}
               </Tag>
             </div>
-            <div class="gap-8px flex items-center">
+            <div class="gap-[8px] flex items-center">
               <Button
                 v-if="triggers.length > 1"
                 danger
                 size="small"
-                text
-                @click="removeTrigger(index)"
+                type="link"
                 class="hover:bg-red-50"
+                @click="removeTrigger(index)"
               >
                 <IconifyIcon icon="lucide:trash-2" />
                 删除
@@ -180,10 +193,10 @@ onMounted(() => {
           </div>
 
           <!-- 触发器内容区域 -->
-          <div class="p-16px space-y-16px">
+          <div class="p-[16px] space-y-[16px]">
             <!-- 设备触发配置 -->
             <DeviceTriggerConfig
-              v-if="isDeviceTrigger(triggerItem.type as any)"
+              v-if="isDeviceTrigger(triggerItem.type as number)"
               :model-value="triggerItem"
               :index="index"
               @update:model-value="
@@ -196,27 +209,27 @@ onMounted(() => {
             <div
               v-else-if="
                 triggerItem.type ===
-                IotRuleSceneTriggerTypeEnum.TIMER.toString()
+                IotRuleSceneTriggerTypeEnum.TIMER
               "
-              class="gap-16px flex flex-col"
+              class="gap-[16px] flex flex-col"
             >
               <div
-                class="gap-8px p-12px px-16px rounded-6px flex items-center border border-primary bg-background"
+                class="gap-[8px] p-[12px] px-[16px] rounded-[6px] flex items-center border border-primary bg-background"
               >
                 <IconifyIcon
                   icon="lucide:timer"
-                  class="text-18px text-danger"
+                  class="text-[18px] text-danger"
                 />
-                <span class="text-14px font-500 text-primary">
+                <span class="text-[14px] font-medium text-primary">
                   定时触发配置
                 </span>
               </div>
 
               <!-- CRON 表达式配置 -->
               <div
-                class="p-16px rounded-6px border border-primary bg-background"
+                class="p-[16px] rounded-[6px] border border-primary bg-background"
               >
-                <Form.Item label="CRON表达式" required>
+                <Form.Item label="CRON 表达式" required>
                   <CronTab
                     :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
                     @update:model-value="
@@ -225,18 +238,26 @@ onMounted(() => {
                   />
                 </Form.Item>
               </div>
+
+              <!-- 附加条件组配置 -->
+              <TimerConditionGroupConfig
+                :model-value="triggerItem.conditionGroups"
+                @update:model-value="
+                  (value) => updateTriggerConditionGroups(index, value)
+                "
+              />
             </div>
           </div>
         </div>
       </div>
 
       <!-- 空状态 -->
-      <div v-else class="py-40px text-center">
+      <div v-else class="py-[40px] text-center">
         <Empty description="暂无触发器">
           <template #description>
-            <div class="space-y-8px">
+            <div class="space-y-[8px]">
               <p class="text-secondary">暂无触发器配置</p>
-              <p class="text-12px text-primary">
+              <p class="text-[12px] text-primary">
                 请使用上方的"添加触发器"按钮来设置触发规则
               </p>
             </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
index 303eade75..67824c7df 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
@@ -78,8 +78,8 @@ watch(
 
 <template>
   <Select
-    :model-value="modelValue"
-    @update:model-value="handleChange"
+    :value="modelValue"
+    @change="handleChange"
     placeholder="请选择设备"
     filterable
     clearable
@@ -93,16 +93,16 @@ watch(
       :label="device.deviceName"
       :value="device.id"
     >
-      <div class="py-4px flex w-full items-center justify-between">
+      <div class="py-[4px] flex w-full items-center justify-between">
         <div class="flex-1">
-          <div class="text-14px font-500 mb-2px text-primary">
+          <div class="text-[14px] font-medium mb-[2px] text-primary">
             {{ device.deviceName }}
           </div>
-          <div class="text-12px text-primary">
+          <div class="text-[12px] text-primary">
             {{ device.deviceKey }}
           </div>
         </div>
-        <div class="gap-4px flex items-center" v-if="device.id > 0">
+        <div class="gap-[4px] flex items-center" v-if="device.id > 0">
           <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
         </div>
       </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
index 1cab17955..55bdf6bf5 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
@@ -239,7 +239,7 @@ watch(
 <template>
   <div class="w-full">
     <Select
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择操作符"
       @change="handleChange"
       class="w-full"
@@ -250,18 +250,18 @@ watch(
         :label="operator.label"
         :value="operator.value"
       >
-        <div class="py-4px flex w-full items-center justify-between">
-          <div class="gap-8px flex items-center">
-            <div class="text-14px font-500 text-primary">
+        <div class="py-[4px] flex w-full items-center justify-between">
+          <div class="gap-[8px] flex items-center">
+            <div class="text-[14px] font-medium text-primary">
               {{ operator.label }}
             </div>
             <div
-              class="text-12px px-6px py-2px rounded-4px bg-primary-light-9 font-mono text-primary"
+              class="text-[12px] px-[6px] py-[2px] rounded-[4px] bg-primary-light-9 font-mono text-primary"
             >
               {{ operator.symbol }}
             </div>
           </div>
-          <div class="text-12px text-secondary">
+          <div class="text-[12px] text-secondary">
             {{ operator.description }}
           </div>
         </div>
@@ -271,7 +271,7 @@ watch(
 </template>
 
 <style scoped>
-:deep(.el-select-dropdown__item) {
+:deep(.ant-select-item-option-content) {
   height: auto;
   padding: 8px 20px;
 }
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
index 51588298e..345a04574 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
@@ -47,6 +47,7 @@ async function getProductList() {
   }
 }
 
+// TODO @AI：这种，应该注释 /** */ 把。
 // 组件挂载时获取产品列表
 onMounted(() => {
   getProductList();
@@ -55,8 +56,8 @@ onMounted(() => {
 
 <template>
   <Select
-    :model-value="modelValue"
-    @update:model-value="handleChange"
+    :value="modelValue"
+    @change="handleChange"
     placeholder="请选择产品"
     filterable
     clearable
@@ -69,12 +70,12 @@ onMounted(() => {
       :label="product.name"
       :value="product.id"
     >
-      <div class="py-4px flex w-full items-center justify-between">
+      <div class="py-[4px] flex w-full items-center justify-between">
         <div class="flex-1">
-          <div class="text-14px font-500 mb-2px text-primary">
+          <div class="text-[14px] font-medium mb-[2px] text-primary">
             {{ product.name }}
           </div>
-          <div class="text-12px text-secondary">
+          <div class="text-[12px] text-secondary">
             {{ product.productKey }}
           </div>
         </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
index 31bf39012..b0fd6656c 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
@@ -1,11 +1,6 @@
 <!-- 属性选择器组件 -->
 <script setup lang="ts">
-import type {
-  ThingModelApi,
-  ThingModelEvent,
-  ThingModelProperty,
-  ThingModelService,
-} from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, ref, watch } from 'vue';
 
@@ -18,7 +13,7 @@ import { getThingModelListByProductId } from '#/api/iot/thingmodel';
 import {
   getAccessModeLabel,
   getDataTypeName,
-  getDataTypeTagType,
+  getDataTypeTagColor,
   getEventTypeLabel,
   getThingModelServiceCallTypeLabel,
   IotRuleSceneTriggerTypeEnum,
@@ -41,7 +36,6 @@ const emit = defineEmits<{
   (e: 'change', value: { config: any; type: string }): void;
 }>();
 
-// TODO 芋艿
 /** 属性选择器内部使用的统一数据结构 */
 interface PropertySelectorItem {
   identifier: string;
@@ -55,11 +49,11 @@ interface PropertySelectorItem {
   range?: string;
   eventType?: string;
   callType?: string;
-  inputParams?: ThingModelParam[];
-  outputParams?: ThingModelParam[];
-  property?: ThingModelProperty;
-  event?: ThingModelEvent;
-  service?: ThingModelService;
+  inputParams?: ThingModelApi.Param[];
+  outputParams?: ThingModelApi.Param[];
+  property?: ThingModelApi.Property;
+  event?: ThingModelApi.Event;
+  service?: ThingModelApi.Service;
 }
 
 const localValue = useVModel(props, 'modelValue', emit);
@@ -75,6 +69,8 @@ const propertyGroups = computed(() => {
   if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
     groups.push({
       label: THING_MODEL_GROUP_LABELS.PROPERTY,
+      // TODO @AI：不要这种简单的缩写，p 是 property；
+      // TODO @AI：这里好像 linter 报错；
       options: propertyList.value.filter(
         (p) => p.type === IoTThingModelTypeEnum.PROPERTY,
       ),
@@ -275,14 +271,14 @@ watch(
 </script>
 
 <template>
-  <div class="gap-8px flex items-center">
+  <div class="gap-[8px] flex items-center">
     <Select
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择监控项"
       filterable
       clearable
       @change="handleChange"
-      class="!w-150px"
+      class="!w-[150px]"
       :loading="loading"
     >
       <Select.OptionGroup
@@ -296,14 +292,13 @@ watch(
           :label="property.name"
           :value="property.identifier"
         >
-          <div class="py-2px flex w-full items-center justify-between">
-            <span class="text-14px font-500 flex-1 truncate text-primary">
+          <div class="py-[2px] flex w-full items-center justify-between">
+            <span class="text-[14px] font-medium flex-1 truncate text-primary">
               {{ property.name }}
             </span>
             <Tag
-              :type="getDataTypeTagType(property.dataType)"
-              size="small"
-              class="ml-8px flex-shrink-0"
+              :color="getDataTypeTagColor(property.dataType)"
+              class="ml-[8px] flex-shrink-0"
             >
               {{ property.identifier }}
             </Tag>
@@ -324,9 +319,8 @@ watch(
     >
       <template #reference>
         <Button
-          type="primary"
-          text
-          circle
+          type="link"
+          shape="circle"
           size="small"
           class="flex-shrink-0"
           title="查看属性详情"
@@ -337,55 +331,52 @@ watch(
 
       <!-- 弹出层内容 -->
       <div class="property-detail-content">
-        <div class="gap-8px mb-12px flex items-center">
-          <IconifyIcon icon="ep:info-filled" class="text-16px text-info" />
-          <span class="text-14px font-500 text-primary">
+        <div class="gap-[8px] mb-[12px] flex items-center">
+          <IconifyIcon icon="ep:info-filled" class="text-[16px] text-info" />
+          <span class="text-[14px] font-medium text-primary">
             {{ selectedProperty.name }}
           </span>
-          <Tag
-            :type="getDataTypeTagType(selectedProperty.dataType)"
-            size="small"
-          >
+          <Tag :color="getDataTypeTagColor(selectedProperty.dataType)">
             {{ getDataTypeName(selectedProperty.dataType) }}
           </Tag>
         </div>
 
-        <div class="space-y-8px ml-24px">
-          <div class="gap-8px flex items-start">
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+        <div class="space-y-[8px] ml-[24px]">
+          <div class="gap-[8px] flex items-start">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               标识符：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ selectedProperty.identifier }}
             </span>
           </div>
 
           <div
             v-if="selectedProperty.description"
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               描述：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ selectedProperty.description }}
             </span>
           </div>
 
-          <div v-if="selectedProperty.unit" class="gap-8px flex items-start">
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+          <div v-if="selectedProperty.unit" class="gap-[8px] flex items-start">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               单位：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ selectedProperty.unit }}
             </span>
           </div>
 
-          <div v-if="selectedProperty.range" class="gap-8px flex items-start">
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+          <div v-if="selectedProperty.range" class="gap-[8px] flex items-start">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               取值范围：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ selectedProperty.range }}
             </span>
           </div>
@@ -396,12 +387,12 @@ watch(
               selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
               selectedProperty.accessMode
             "
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               访问模式：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ getAccessModeLabel(selectedProperty.accessMode) }}
             </span>
           </div>
@@ -411,12 +402,12 @@ watch(
               selectedProperty.type === IoTThingModelTypeEnum.EVENT &&
               selectedProperty.eventType
             "
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               事件类型：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ getEventTypeLabel(selectedProperty.eventType) }}
             </span>
           </div>
@@ -426,12 +417,12 @@ watch(
               selectedProperty.type === IoTThingModelTypeEnum.SERVICE &&
               selectedProperty.callType
             "
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
               调用类型：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-primary">
               {{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
             </span>
           </div>
@@ -442,24 +433,20 @@ watch(
 </template>
 
 <style scoped>
-/* 下拉选项样式 */
-:deep(.el-select-dropdown__item) {
+:deep(.ant-select-item-option-content) {
   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) {
+:global(.property-detail-popover .ant-popover-inner-content) {
   padding: 16px !important;
 }
 </style>
diff --git a/apps/web-antd/src/views/iot/rule/scene/index.vue b/apps/web-antd/src/views/iot/rule/scene/index.vue
index a81ba6d55..faa0d83ad 100644
--- a/apps/web-antd/src/views/iot/rule/scene/index.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/index.vue
@@ -2,9 +2,14 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
 
-import { message } from 'ant-design-vue';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import { Card, Col, message, Row, Tag, Tooltip } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -13,17 +18,29 @@ import {
   updateSceneRuleStatus,
 } from '#/api/iot/rule/scene';
 import { $t } from '#/locales';
+import { CronUtils } from '#/utils/cron';
+import {
+  getActionTypeLabel,
+  getTriggerTypeLabel,
+  IotRuleSceneActionTypeEnum,
+  IotRuleSceneTriggerTypeEnum,
+} from '#/views/iot/utils/constants';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-defineOptions({ name: 'IoTRuleScene' });
-
-const [FormModal, formModalApi] = useVbenModal({
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+const statistics = ref({
+  total: 0,
+  enabled: 0,
+  disabled: 0,
+  timerRules: 0,
+}); // 统计数据
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -31,25 +48,29 @@ function handleRefresh() {
 
 /** 创建场景规则 */
 function handleCreate() {
-  formModalApi.setData(null).open();
+  formDrawerApi.setData(null).open();
 }
 
 /** 编辑场景规则 */
 function handleEdit(row: RuleSceneApi.SceneRule) {
-  formModalApi.setData(row).open();
+  formDrawerApi.setData(row).open();
 }
 
 /** 启用/停用场景规则 */
 async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
-  const newStatus = row.status === 0 ? 1 : 0;
+  const newStatus =
+    row.status === CommonStatusEnum.ENABLE
+      ? CommonStatusEnum.DISABLE
+      : CommonStatusEnum.ENABLE;
   const hideLoading = message.loading({
-    content: newStatus === 0 ? '正在启用...' : '正在停用...',
+    content:
+      newStatus === CommonStatusEnum.ENABLE ? '正在启用...' : '正在停用...',
     duration: 0,
   });
   try {
     await updateSceneRuleStatus(row.id as number, newStatus);
     message.success({
-      content: newStatus === 0 ? '启用成功' : '停用成功',
+      content: newStatus === CommonStatusEnum.ENABLE ? '启用成功' : '停用成功',
     });
     handleRefresh();
   } finally {
@@ -74,6 +95,164 @@ async function handleDelete(row: RuleSceneApi.SceneRule) {
   }
 }
 
+/** 判断规则是否包含定时触发器 */
+function hasTimerTrigger(row: RuleSceneApi.SceneRule): boolean {
+  return (
+    row.triggers?.some(
+      (trigger) =>
+        trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+    ) || false
+  );
+}
+
+/** 触发器列表项（用于列内多 tag 渲染） */
+interface TriggerCellItem {
+  color: string;
+  label: string;
+  meta?: string;
+}
+
+/** 动作列表项 */
+interface ActionCellItem {
+  color: string;
+  label: string;
+  meta?: string;
+}
+
+/** 触发器 → tag 颜色（按 5 种类型区分） */
+function colorOfTrigger(type?: number): string {
+  switch (type) {
+    case IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST: {
+      return 'orange';
+    }
+    case IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST: {
+      return 'blue';
+    }
+    case IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE: {
+      return 'purple';
+    }
+    case IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE: {
+      return 'cyan';
+    }
+    case IotRuleSceneTriggerTypeEnum.TIMER: {
+      return 'gold';
+    }
+    default: {
+      return 'default';
+    }
+  }
+}
+
+/** 动作 → tag 颜色（按 4 种类型区分） */
+function colorOfAction(type?: number): string {
+  switch (type) {
+    case IotRuleSceneActionTypeEnum.ALERT_RECOVER: {
+      return 'green';
+    }
+    case IotRuleSceneActionTypeEnum.ALERT_TRIGGER: {
+      return 'red';
+    }
+    case IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET: {
+      return 'blue';
+    }
+    case IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE: {
+      return 'purple';
+    }
+    default: {
+      return 'default';
+    }
+  }
+}
+
+/** 触发器列：每个触发器一项 */
+function getTriggerCellItems(row: RuleSceneApi.SceneRule): TriggerCellItem[] {
+  if (!row.triggers?.length) {
+    return [];
+  }
+  return row.triggers.map((trigger) => {
+    const type = trigger.type ?? 0;
+    let label = getTriggerTypeLabel(type);
+    if (
+      (type === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
+        type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+        type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) &&
+      trigger.identifier
+    ) {
+      label += ` · ${trigger.identifier}`;
+    } else if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
+      label += ` · ${CronUtils.format(trigger.cronExpression || '')}`;
+    }
+    const meta = trigger.deviceId
+      ? `设备 #${trigger.deviceId}`
+      : (trigger.productId
+        ? `产品 #${trigger.productId}`
+        : '');
+    return { color: colorOfTrigger(type), label, meta };
+  });
+}
+
+/** 动作列：每个动作一项 */
+function getActionCellItems(row: RuleSceneApi.SceneRule): ActionCellItem[] {
+  if (!row.actions?.length) {
+    return [];
+  }
+  return row.actions.map((action) => {
+    const type = action.type ?? 0;
+    const label = getActionTypeLabel(type);
+    const meta = action.deviceId
+      ? `设备 #${action.deviceId}`
+      : action.productId
+        ? `产品 #${action.productId}`
+        : action.alertConfigId
+          ? `告警 #${action.alertConfigId}`
+          : '';
+    return { color: colorOfAction(type), label, meta };
+  });
+}
+
+/** 取定时触发器的 CRON 频率描述 */
+function getCronFrequency(row: RuleSceneApi.SceneRule): string {
+  const timerTrigger = row.triggers?.find(
+    (trigger) =>
+      trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+  );
+  return timerTrigger?.cronExpression
+    ? CronUtils.getFrequencyDescription(timerTrigger.cronExpression)
+    : '';
+}
+
+/** 取定时触发器原始 CRON 表达式 */
+function getCronExpression(row: RuleSceneApi.SceneRule): string {
+  const timerTrigger = row.triggers?.find(
+    (trigger) =>
+      trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+  );
+  return timerTrigger?.cronExpression || '';
+}
+
+/** 取定时触发器下次执行时间 */
+function getNextExecutionTime(row: RuleSceneApi.SceneRule): Date | null {
+  const timerTrigger = row.triggers?.find(
+    (trigger) =>
+      trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+  );
+  return timerTrigger?.cronExpression
+    ? CronUtils.getNextExecutionTime(timerTrigger.cronExpression)
+    : null;
+}
+
+/** 基于当前页列表刷新统计数据 */
+function updateStatistics(rows: RuleSceneApi.SceneRule[]) {
+  statistics.value = {
+    total: rows.length,
+    enabled: rows.filter((item) => item.status === CommonStatusEnum.ENABLE)
+      .length,
+    disabled: rows.filter((item) => item.status === CommonStatusEnum.DISABLE)
+      .length,
+    timerRules: rows.filter((item) => hasTimerTrigger(item)).length,
+  };
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -85,11 +264,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await getSceneRulePage({
+          const result = await getSceneRulePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
+          updateStatistics(result.list || []);
+          return result;
         },
       },
     },
@@ -107,7 +288,80 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormDrawer @success="handleRefresh" />
+
+    <!-- 统计卡片 -->
+    <Row :gutter="16" class="mb-4">
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-indigo-500 to-purple-600"
+            >
+              <IconifyIcon icon="ant-design:file-text-outlined" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.total }}
+              </div>
+              <div class="text-xs text-secondary">总规则数</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-pink-400 to-red-500"
+            >
+              <IconifyIcon icon="ant-design:check-outlined" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.enabled }}
+              </div>
+              <div class="text-xs text-secondary">启用规则</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-cyan-400 to-blue-500"
+            >
+              <IconifyIcon icon="ant-design:close-outlined" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.disabled }}
+              </div>
+              <div class="text-xs text-secondary">禁用规则</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-green-400 to-teal-400"
+            >
+              <IconifyIcon icon="lucide:timer" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.timerRules }}
+              </div>
+              <div class="text-xs text-secondary">定时规则</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+    </Row>
+
     <Grid table-title="场景规则列表">
       <template #toolbar-tools>
         <TableAction
@@ -121,9 +375,68 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
-      <!-- 操作列 -->
+      <!-- 规则名称列：名称 + 状态 + 描述 -->
+      <template #name="{ row }">
+        <div class="gap-2 flex items-center">
+          <span class="font-medium">{{ row.name }}</span>
+        </div>
+        <Tooltip
+          v-if="row.description"
+          :title="row.description"
+          placement="top"
+        >
+          <div class="text-xs text-secondary mt-1 truncate max-w-[160px]">
+            {{ row.description }}
+          </div>
+        </Tooltip>
+      </template>
+      <!-- 触发条件列：按触发器各显示一项 -->
+      <template #triggers="{ row }">
+        <div v-if="getTriggerCellItems(row).length > 0" class="flex flex-col gap-1">
+          <div
+            v-for="(item, i) in getTriggerCellItems(row)"
+            :key="`trigger-${i}`"
+            class="flex items-center gap-1"
+          >
+            <Tag :color="item.color" class="m-0">{{ item.label }}</Tag>
+            <span v-if="item.meta" class="text-xs text-secondary">
+              {{ item.meta }}
+            </span>
+          </div>
+          <Tooltip
+            v-if="hasTimerTrigger(row)"
+            :title="getCronExpression(row)"
+            placement="top"
+          >
+            <span class="text-xs text-secondary">
+              <IconifyIcon icon="lucide:clock" class="mr-1 inline" />
+              {{ getCronFrequency(row) }}
+              <template v-if="getNextExecutionTime(row)">
+                · 下次 {{ formatDateTime(getNextExecutionTime(row) as Date) }}
+              </template>
+            </span>
+          </Tooltip>
+        </div>
+        <span v-else class="text-xs text-secondary">无触发器</span>
+      </template>
+      <!-- 执行动作列：按动作各显示一项 -->
+      <template #actionsCol="{ row }">
+        <div v-if="getActionCellItems(row).length > 0" class="flex flex-col gap-1">
+          <div
+            v-for="(item, i) in getActionCellItems(row)"
+            :key="`action-${i}`"
+            class="flex items-center gap-1"
+          >
+            <Tag :color="item.color" class="m-0">{{ item.label }}</Tag>
+            <span v-if="item.meta" class="text-xs text-secondary">
+              {{ item.meta }}
+            </span>
+          </div>
+        </div>
+        <span v-else class="text-xs text-secondary">无动作</span>
+      </template>
       <template #actions="{ row }">
+        <!-- TODO @AI：1）枚举；2）有没必要，对齐别的模块的开启、禁用 -->
         <TableAction
           :actions="[
             {
diff --git a/apps/web-antd/src/views/iot/rule/scene/modules/form.vue b/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
index 7a2de11bf..2a0e7e71d 100644
--- a/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
@@ -1,87 +1,255 @@
 <script lang="ts" setup>
-import type { RuleSceneApi } from '#/api/iot/rule/scene';
+import type { IotSceneRule, RuleSceneApi } from '#/api/iot/rule/scene';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, reactive, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { useVbenDrawer } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
 
-import { message } from 'ant-design-vue';
+import { Form, message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
 import {
   createSceneRule,
   getSceneRule,
   updateSceneRule,
 } from '#/api/iot/rule/scene';
 import { $t } from '#/locales';
+import {
+  IotRuleSceneActionTypeEnum,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger,
+} from '#/views/iot/utils/constants';
 
-import { useFormSchema } from '../data';
+import ActionSection from '../form/sections/action-section.vue';
+import BasicInfoSection from '../form/sections/basic-info-section.vue';
+import TriggerSection from '../form/sections/trigger-section.vue';
+
+defineOptions({ name: 'IoTRuleSceneForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<RuleSceneApi.SceneRule>();
-const getTitle = computed(() => {
-  return formData.value?.id
+
+const formRef = ref();
+const formData = ref<IotSceneRule>(buildEmptyFormData());
+
+const getTitle = computed(() =>
+  formData.value.id
     ? $t('ui.actionTitle.edit', ['场景规则'])
-    : $t('ui.actionTitle.create', ['场景规则']);
-});
+    : $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({
+const [Drawer, drawerApi] = useVbenDrawer({
   async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
+    try {
+      await formRef.value?.validate();
+    } catch {
       return;
     }
-    modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as RuleSceneApi.SceneRule;
+    drawerApi.lock();
     try {
-      await (formData.value?.id
-        ? updateSceneRule(data)
-        : createSceneRule(data));
-      // 关闭并提示
-      await modalApi.close();
+      const data = { ...formData.value } as IotSceneRule;
+      await (data.id ? updateSceneRule(data) : createSceneRule(data));
+      await drawerApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
-      modalApi.unlock();
+      drawerApi.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();
+    const data = drawerApi.getData<RuleSceneApi.SceneRule>();
+    // 先用列表传入的数据立即回填，避免 await 期间表单显示空白
+    formData.value = data?.id ? normalizeFormData(data) : buildEmptyFormData();
+    await nextTick();
+    formRef.value?.clearValidate?.();
+    // 再异步拉取详情，覆盖以保证字段最新
+    if (data?.id) {
+      drawerApi.lock();
+      try {
+        const fresh = await getSceneRule(data.id);
+        formData.value = normalizeFormData(fresh);
+      } finally {
+        drawerApi.unlock();
+      }
     }
   },
 });
+
+/** 构造空白表单数据 */
+function buildEmptyFormData(): 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: [],
+  };
+}
+
+/** 回显时兜底，保证触发器/执行器数组不为空 */
+function normalizeFormData(result: any): IotSceneRule {
+  return {
+    ...result,
+    triggers: result.triggers?.length
+      ? result.triggers
+      : buildEmptyFormData().triggers,
+    actions: result.actions || [],
+  };
+}
+
+/** 触发器校验 */
+function validateTriggers(_rule: any, value: any, callback: any) {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    callback(new Error('至少需要一个触发器'));
+    return;
+  }
+  for (const [i, trigger] of value.entries()) {
+    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;
+      }
+      // 事件上报 / 服务调用：operator 由前端自动设为 '='，参数值留空表示「事件 / 调用发生即匹配」
+      const isEventOrService =
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE;
+      if (!isEventOrService) {
+        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 &&
+      !trigger.cronExpression
+    ) {
+      callback(new Error(`触发器 ${i + 1}：CRON 表达式不能为空`));
+      return;
+    }
+  }
+  callback();
+}
+
+/** 执行器校验 */
+function validateActions(_rule: any, value: any, callback: any) {
+  if (!value || !Array.isArray(value) || value.length === 0) {
+    callback(new Error('至少需要一个执行器'));
+    return;
+  }
+  for (const [i, action] of value.entries()) {
+    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 &&
+        !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) &&
+      !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' }],
+  description: [
+    {
+      type: 'string',
+      max: 200,
+      message: '场景描述不能超过 200 个字符',
+      trigger: 'blur',
+    },
+  ],
+  triggers: [
+    { required: true, validator: validateTriggers, trigger: 'change' },
+  ],
+  actions: [{ required: true, validator: validateActions, trigger: 'change' }],
+});
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <Form class="mx-4" />
-  </Modal>
+  <Drawer :title="getTitle" class="w-4/5">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules as any"
+      class="mx-4"
+      label-width="110px"
+    >
+      <BasicInfoSection v-model="formData" />
+      <TriggerSection v-model:triggers="formData.triggers as any" />
+      <ActionSection v-model:actions="formData.actions as any" />
+    </Form>
+  </Drawer>
 </template>