From 23c5ca5a66177fdffd47de28387ebd6384f9da66 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 26 Jul 2025 14:03:16 +0800
Subject: [PATCH 01/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20unocss=20=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rule/scene/components/RuleSceneForm.vue   |  55 +---
 .../scene/components/inputs/NameInput.vue     |  69 +----
 .../components/sections/BasicInfoSection.vue  |  52 +---
 .../components/sections/TriggerSection.vue    | 139 ++--------
 .../selectors/ProductDeviceSelector.vue       | 121 ++-------
 src/views/iot/rule/scene/index.vue            | 253 ++++--------------
 6 files changed, 110 insertions(+), 579 deletions(-)

diff --git a/src/views/iot/rule/scene/components/RuleSceneForm.vue b/src/views/iot/rule/scene/components/RuleSceneForm.vue
index 6b6deacc..93cb2f0c 100644
--- a/src/views/iot/rule/scene/components/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/components/RuleSceneForm.vue
@@ -9,15 +9,15 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     @close="handleClose"
-    class="rule-scene-drawer"
+    class="[--el-drawer-padding-primary:20px]"
   >
-    <div class="rule-scene-form">
+    <div class="h-[calc(100vh-120px)] overflow-y-auto p-20px pb-80px">
       <el-form
         ref="formRef"
         :model="formData"
         :rules="formRules"
         label-width="120px"
-        class="form-container"
+        class="flex flex-col gap-24px"
       >
         <!-- 基础信息配置 -->
         <BasicInfoSection v-model="formData" :rules="formRules" />
@@ -40,7 +40,7 @@
     <!-- 抽屉底部操作栏 -->
     <!-- TODO @puhui999：这个按钮逻辑，和别的模块一致 -->
     <template #footer>
-      <div class="drawer-footer">
+      <div class="absolute bottom-0 left-0 right-0 flex justify-end gap-16px p-16px px-20px bg-[var(--el-bg-color)] border-t border-[var(--el-border-color-light)] shadow-[0_-2px_8px_rgba(0,0,0,0.1)]">
         <el-button @click="handleClose" size="large">取消</el-button>
         <el-button
           type="primary"
@@ -214,53 +214,22 @@ watch(
 </script>
 
 <style scoped>
-.rule-scene-drawer {
-  --el-drawer-padding-primary: 20px;
-}
-
-.rule-scene-form {
-  height: calc(100vh - 120px);
-  overflow-y: auto;
-  padding: 20px;
-  padding-bottom: 80px; /* 为底部操作栏留出空间 */
-}
-
-.form-container {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.drawer-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: flex-end;
-  gap: 16px;
-  padding: 16px 20px;
-  background: var(--el-bg-color);
-  border-top: 1px solid var(--el-border-color-light);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-}
-
 /* 滚动条样式 */
-.rule-scene-form::-webkit-scrollbar {
+.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar {
   width: 6px;
 }
 
-.rule-scene-form::-webkit-scrollbar-track {
+.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar-track {
   background: var(--el-fill-color-light);
   border-radius: 3px;
 }
 
-.rule-scene-form::-webkit-scrollbar-thumb {
+.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar-thumb {
   background: var(--el-border-color);
   border-radius: 3px;
 }
 
-.rule-scene-form::-webkit-scrollbar-thumb:hover {
+.h-\[calc\(100vh-120px\)\]::-webkit-scrollbar-thumb:hover {
   background: var(--el-border-color-dark);
 }
 
@@ -284,20 +253,20 @@ watch(
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .rule-scene-drawer {
+  .el-drawer {
     --el-drawer-size: 100% !important;
   }
 
-  .rule-scene-form {
+  .h-\[calc\(100vh-120px\)\] {
     padding: 16px;
     padding-bottom: 80px;
   }
 
-  .form-container {
+  .flex.flex-col.gap-24px {
     gap: 20px;
   }
 
-  .drawer-footer {
+  .absolute.bottom-0 {
     padding: 12px 16px;
     gap: 12px;
   }
diff --git a/src/views/iot/rule/scene/components/inputs/NameInput.vue b/src/views/iot/rule/scene/components/inputs/NameInput.vue
index bf23ab41..4eba6d38 100644
--- a/src/views/iot/rule/scene/components/inputs/NameInput.vue
+++ b/src/views/iot/rule/scene/components/inputs/NameInput.vue
@@ -1,6 +1,6 @@
 <!-- 场景名称输入组件 -->
 <template>
-  <div class="name-input">
+  <div class="relative w-full">
     <el-input
       v-model="localValue"
       placeholder="请输入场景名称"
@@ -11,21 +11,21 @@
       @input="handleInput"
     >
       <template #prefix>
-        <Icon icon="ep:edit" class="input-icon" />
+        <Icon icon="ep:edit" class="text-[var(--el-text-color-placeholder)]" />
       </template>
     </el-input>
 
     <!-- 智能提示 -->
     <!-- TODO @puhui999：暂时不用考虑智能推荐哈。用途不大 -->
-    <div v-if="showSuggestions && suggestions.length > 0" class="suggestions">
-      <div class="suggestions-header">
-        <span class="suggestions-title">推荐名称</span>
+    <div v-if="showSuggestions && suggestions.length > 0" class="absolute top-full left-0 right-0 z-1000 bg-white border border-[var(--el-border-color-light)] rounded-4px shadow-[var(--el-box-shadow-light)] mt-4px">
+      <div class="p-8px px-12px border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]">
+        <span class="text-12px text-[var(--el-text-color-secondary)] font-500">推荐名称</span>
       </div>
-      <div class="suggestions-list">
+      <div class="max-h-200px overflow-y-auto">
         <div
           v-for="suggestion in suggestions"
           :key="suggestion"
-          class="suggestion-item"
+          class="p-8px px-12px cursor-pointer transition-colors duration-200 text-14px text-[var(--el-text-color-primary)] hover:bg-[var(--el-fill-color-light)] last:border-b-0"
           @click="applySuggestion(suggestion)"
         >
           {{ suggestion }}
@@ -108,59 +108,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.name-input {
-  position: relative;
-  width: 100%;
-}
 
-.input-icon {
-  color: var(--el-text-color-placeholder);
-}
-
-.suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background: white;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 4px;
-  box-shadow: var(--el-box-shadow-light);
-  margin-top: 4px;
-}
-
-.suggestions-header {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  background: var(--el-fill-color-light);
-}
-
-.suggestions-title {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  font-weight: 500;
-}
-
-.suggestions-list {
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.suggestion-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-}
-
-.suggestion-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.suggestion-item:last-child {
-  border-bottom: none;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/sections/BasicInfoSection.vue b/src/views/iot/rule/scene/components/sections/BasicInfoSection.vue
index 36ff24a9..2bdbbf49 100644
--- a/src/views/iot/rule/scene/components/sections/BasicInfoSection.vue
+++ b/src/views/iot/rule/scene/components/sections/BasicInfoSection.vue
@@ -1,13 +1,13 @@
 <!-- 基础信息配置组件 -->
 <template>
-  <el-card class="basic-info-section" shadow="never">
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
-      <div class="section-header">
-        <div class="header-left">
-          <Icon icon="ep:info-filled" class="section-icon" />
-          <span class="section-title">基础信息</span>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:info-filled" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">基础信息</span>
         </div>
-        <div class="header-right">
+        <div class="flex items-center gap-8px">
           <el-tag :type="formData.status === 0 ? 'success' : 'danger'" size="small">
             {{ formData.status === 0 ? '启用' : '禁用' }}
           </el-tag>
@@ -15,7 +15,7 @@
       </div>
     </template>
 
-    <div class="section-content">
+    <div class="p-0">
       <el-row :gutter="24">
         <!-- TODO @puhui999：NameInput、StatusRadio、DescriptionInput 是不是直接写在当前界面哈。有点散； -->
         <el-col :span="12">
@@ -65,44 +65,6 @@ const formData = useVModel(props, 'modelValue', emit)
 </script>
 
 <style scoped>
-.basic-info-section {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-icon {
-  color: var(--el-color-primary);
-  font-size: 18px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-content {
-  padding: 0;
-}
-
 :deep(.el-form-item) {
   margin-bottom: 20px;
 }
diff --git a/src/views/iot/rule/scene/components/sections/TriggerSection.vue b/src/views/iot/rule/scene/components/sections/TriggerSection.vue
index 95e8217d..e16d702e 100644
--- a/src/views/iot/rule/scene/components/sections/TriggerSection.vue
+++ b/src/views/iot/rule/scene/components/sections/TriggerSection.vue
@@ -1,15 +1,15 @@
 <!-- 触发器配置组件 -->
 <template>
-  <el-card class="trigger-section" shadow="never">
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
-      <div class="section-header">
-        <div class="header-left">
-          <Icon icon="ep:lightning" class="section-icon" />
-          <span class="section-title">触发器配置</span>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
           <!-- TODO @puhui999：是不是去掉 maxTriggers；计数 -->
           <el-tag size="small" type="info">{{ triggers.length }}/{{ maxTriggers }}</el-tag>
         </div>
-        <div class="header-right">
+        <div class="flex items-center gap-8px">
           <el-button
             type="primary"
             size="small"
@@ -23,9 +23,9 @@
       </div>
     </template>
 
-    <div class="section-content">
+    <div class="p-0">
       <!-- 空状态 -->
-      <div v-if="triggers.length === 0" class="empty-state">
+      <div v-if="triggers.length === 0">
         <el-empty description="暂无触发器配置">
           <!-- TODO @puhui999：这个要不要去掉哈；入口统一点 -->
           <el-button type="primary" @click="addTrigger">
@@ -36,17 +36,17 @@
       </div>
 
       <!-- 触发器列表 -->
-      <div v-else class="triggers-list">
-        <div v-for="(trigger, index) in triggers" :key="`trigger-${index}`" class="trigger-item">
-          <div class="trigger-header">
-            <div class="trigger-title">
-              <Icon icon="ep:lightning" class="trigger-icon" />
+      <div v-else class="space-y-16px">
+        <div v-for="(trigger, index) in triggers" :key="`trigger-${index}`" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
+          <div class="flex items-center justify-between mb-16px">
+            <div class="flex items-center gap-8px">
+              <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
               <span>触发器 {{ index + 1 }}</span>
               <el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
                 {{ getTriggerTypeName(trigger.type) }}
               </el-tag>
             </div>
-            <div class="trigger-actions">
+            <div>
               <el-button
                 type="danger"
                 size="small"
@@ -60,7 +60,7 @@
             </div>
           </div>
 
-          <div class="trigger-content">
+          <div class="space-y-16px">
             <!-- 触发类型选择 -->
             <TriggerTypeSelector
               :model-value="trigger.type"
@@ -89,12 +89,12 @@
 
       <!-- 添加提示 -->
       <!-- TODO @puhui999：这个要不要去掉哈；入口统一点 -->
-      <div v-if="triggers.length > 0 && triggers.length < maxTriggers" class="add-more">
-        <el-button type="primary" plain @click="addTrigger" class="add-more-btn">
+      <div v-if="triggers.length > 0 && triggers.length < maxTriggers" class="text-center py-16px">
+        <el-button type="primary" plain @click="addTrigger">
           <Icon icon="ep:plus" />
           继续添加触发器
         </el-button>
-        <span class="add-more-text"> 最多可添加 {{ maxTriggers }} 个触发器 </span>
+        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxTriggers }} 个触发器 </span>
       </div>
 
       <!-- 验证结果 -->
@@ -279,107 +279,4 @@ watch(
 )
 </script>
 
-<style scoped>
-.trigger-section {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-}
 
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-icon {
-  color: var(--el-color-primary);
-  font-size: 18px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-content {
-  padding: 0;
-}
-
-.empty-state {
-  padding: 40px 0;
-  text-align: center;
-}
-
-.triggers-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.trigger-item {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.trigger-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.trigger-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.trigger-icon {
-  color: var(--el-color-warning);
-  font-size: 16px;
-}
-
-.trigger-content {
-  padding: 16px;
-}
-
-.add-more {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 16px;
-  padding: 16px;
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  background: var(--el-fill-color-lighter);
-}
-
-.add-more-btn {
-  flex-shrink: 0;
-}
-
-.add-more-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.validation-result {
-  margin-top: 16px;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/selectors/ProductDeviceSelector.vue b/src/views/iot/rule/scene/components/selectors/ProductDeviceSelector.vue
index cb94d8fc..bae5b707 100644
--- a/src/views/iot/rule/scene/components/selectors/ProductDeviceSelector.vue
+++ b/src/views/iot/rule/scene/components/selectors/ProductDeviceSelector.vue
@@ -20,10 +20,10 @@
               :label="product.name"
               :value="product.id"
             >
-              <div class="product-option">
-                <div class="option-content">
-                  <div class="option-name">{{ product.name }}</div>
-                  <div class="option-key">{{ product.productKey }}</div>
+              <div class="flex items-center justify-between w-full py-4px">
+                <div class="flex-1">
+                  <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ product.name }}</div>
+                  <div class="text-12px text-[var(--el-text-color-secondary)]">{{ product.productKey }}</div>
                 </div>
                 <!-- TODO @puhui999：是不是用字典 -->
                 <el-tag size="small" :type="product.status === 0 ? 'success' : 'danger'">
@@ -68,10 +68,10 @@
               :label="device.deviceName"
               :value="device.id"
             >
-              <div class="device-option">
-                <div class="option-content">
-                  <div class="option-name">{{ device.deviceName }}</div>
-                  <div class="option-nickname">{{ device.nickname || '无备注' }}</div>
+              <div class="flex items-center justify-between w-full py-4px">
+                <div class="flex-1">
+                  <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ device.deviceName }}</div>
+                  <div class="text-12px text-[var(--el-text-color-secondary)]">{{ device.nickname || '无备注' }}</div>
                 </div>
                 <el-tag size="small" :type="getDeviceStatusTag(device.state)">
                   {{ getDeviceStatusText(device.state) }}
@@ -84,21 +84,21 @@
     </el-row>
 
     <!-- 选择结果展示 -->
-    <div v-if="localProductId && localDeviceId !== undefined" class="selection-result">
-      <div class="result-header">
-        <Icon icon="ep:check" class="result-icon" />
-        <span class="result-title">已选择设备</span>
+    <div v-if="localProductId && localDeviceId !== undefined" class="mt-16px p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-6px mb-8px">
+        <Icon icon="ep:check" class="text-[var(--el-color-success)] text-16px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">已选择设备</span>
       </div>
-      <div class="result-content">
-        <div class="result-item">
-          <span class="result-label">产品：</span>
-          <span class="result-value">{{ selectedProduct?.name }}</span>
+      <div class="flex flex-col gap-6px ml-22px">
+        <div class="flex items-center gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-40px">产品：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] font-500">{{ selectedProduct?.name }}</span>
           <el-tag size="small" type="primary">{{ selectedProduct?.productKey }}</el-tag>
         </div>
-        <div class="result-item">
-          <span class="result-label">设备：</span>
-          <span v-if="deviceSelectionMode === 'all'" class="result-value">全部设备</span>
-          <span v-else class="result-value">{{ selectedDevice?.deviceName }}</span>
+        <div class="flex items-center gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-40px">设备：</span>
+          <span v-if="deviceSelectionMode === 'all'" class="text-12px text-[var(--el-text-color-primary)] font-500">全部设备</span>
+          <span v-else class="text-12px text-[var(--el-text-color-primary)] font-500">{{ selectedDevice?.deviceName }}</span>
           <el-tag v-if="deviceSelectionMode === 'all'" size="small" type="warning"> 全部 </el-tag>
           <el-tag v-else size="small" :type="getDeviceStatusTag(selectedDevice?.state)">
             {{ getDeviceStatusText(selectedDevice?.state) }}
@@ -288,87 +288,6 @@ watch(
 </script>
 
 <style scoped>
-.product-device-selector {
-  width: 100%;
-}
-
-.product-option,
-.device-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 0;
-}
-
-.option-content {
-  flex: 1;
-}
-
-.option-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 2px;
-}
-
-.option-key,
-.option-nickname {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.selection-result {
-  margin-top: 16px;
-  padding: 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.result-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-
-.result-icon {
-  color: var(--el-color-success);
-  font-size: 16px;
-}
-
-.result-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.result-content {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-left: 22px;
-}
-
-.result-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.result-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  min-width: 40px;
-}
-
-.result-value {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-}
-
 :deep(.el-select-dropdown__item) {
   height: auto;
   padding: 8px 20px;
diff --git a/src/views/iot/rule/scene/index.vue b/src/views/iot/rule/scene/index.vue
index f8c69631..07562352 100644
--- a/src/views/iot/rule/scene/index.vue
+++ b/src/views/iot/rule/scene/index.vue
@@ -1,15 +1,15 @@
 <template>
   <ContentWrap>
     <!-- 页面头部 -->
-    <div class="page-header">
-      <div class="header-left">
-        <h2 class="page-title">
-          <Icon icon="ep:connection" class="title-icon" />
+    <div class="flex justify-between items-start mb-20px">
+      <div class="flex-1">
+        <h2 class="flex items-center m-0 mb-8px text-24px font-600 text-[#303133]">
+          <Icon icon="ep:connection" class="mr-12px text-[#409eff]" />
           场景联动规则
         </h2>
-        <p class="page-description"> 通过配置触发条件和执行动作，实现设备间的智能联动控制 </p>
+        <p class="m-0 text-[#606266] text-14px"> 通过配置触发条件和执行动作，实现设备间的智能联动控制 </p>
       </div>
-      <div class="header-right">
+      <div>
         <el-button type="primary" @click="handleAdd">
           <Icon icon="ep:plus" />
           新增规则
@@ -18,7 +18,7 @@
     </div>
 
     <!-- 搜索和筛选 -->
-    <el-card class="search-card" shadow="never">
+    <el-card class="mb-16px" shadow="never">
       <el-form
         ref="queryFormRef"
         :model="queryParams"
@@ -62,55 +62,55 @@
 
     <!-- 统计卡片 -->
     <!-- TODO @puhui999：这种需要服用的 stats-content、stats-info 的属性，到底 unocss 好，还是现有的 style css 好~ -->
-    <el-row :gutter="16" class="stats-row">
+    <el-row :gutter="16" class="mb-16px">
       <el-col :span="6">
-        <el-card class="stats-card" shadow="hover">
-          <div class="stats-content">
-            <div class="stats-icon total">
+        <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
+          <div class="flex items-center">
+            <div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#667eea] to-[#764ba2]">
               <Icon icon="ep:document" />
             </div>
-            <div class="stats-info">
-              <div class="stats-number">{{ statistics.total }}</div>
-              <div class="stats-label">总规则数</div>
+            <div>
+              <div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.total }}</div>
+              <div class="text-14px text-[#909399] mt-4px">总规则数</div>
             </div>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card class="stats-card" shadow="hover">
-          <div class="stats-content">
-            <div class="stats-icon enabled">
+        <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
+          <div class="flex items-center">
+            <div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#f093fb] to-[#f5576c]">
               <Icon icon="ep:check" />
             </div>
-            <div class="stats-info">
-              <div class="stats-number">{{ statistics.enabled }}</div>
-              <div class="stats-label">启用规则</div>
+            <div>
+              <div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.enabled }}</div>
+              <div class="text-14px text-[#909399] mt-4px">启用规则</div>
             </div>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card class="stats-card" shadow="hover">
-          <div class="stats-content">
-            <div class="stats-icon disabled">
+        <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
+          <div class="flex items-center">
+            <div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#4facfe] to-[#00f2fe]">
               <Icon icon="ep:close" />
             </div>
-            <div class="stats-info">
-              <div class="stats-number">{{ statistics.disabled }}</div>
-              <div class="stats-label">禁用规则</div>
+            <div>
+              <div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.disabled }}</div>
+              <div class="text-14px text-[#909399] mt-4px">禁用规则</div>
             </div>
           </div>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card class="stats-card" shadow="hover">
-          <div class="stats-content">
-            <div class="stats-icon active">
+        <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
+          <div class="flex items-center">
+            <div class="w-48px h-48px rounded-8px flex items-center justify-center text-24px text-white mr-16px bg-gradient-to-br from-[#43e97b] to-[#38f9d7]">
               <Icon icon="ep:lightning" />
             </div>
-            <div class="stats-info">
-              <div class="stats-number">{{ statistics.triggered }}</div>
-              <div class="stats-label">今日触发</div>
+            <div>
+              <div class="text-24px font-600 text-[#303133] leading-none">{{ statistics.triggered }}</div>
+              <div class="text-14px text-[#909399] mt-4px">今日触发</div>
             </div>
           </div>
         </el-card>
@@ -118,36 +118,36 @@
     </el-row>
 
     <!-- 数据表格 -->
-    <el-card class="table-card" shadow="never">
+    <el-card class="mb-20px" shadow="never">
       <el-table v-loading="loading" :data="list" stripe @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column label="规则名称" prop="name" min-width="200">
           <template #default="{ row }">
-            <div class="rule-name-cell">
-              <span class="rule-name">{{ row.name }}</span>
+            <div class="flex items-center gap-8px">
+              <span class="font-500 text-[#303133]">{{ row.name }}</span>
               <!-- TODO @puhui999：字典 -->
               <el-tag
                 :type="row.status === 0 ? 'success' : 'danger'"
                 size="small"
-                class="status-tag"
+                class="flex-shrink-0"
               >
                 {{ row.status === 0 ? '启用' : '禁用' }}
               </el-tag>
             </div>
-            <div v-if="row.description" class="rule-description">
+            <div v-if="row.description" class="text-12px text-[#909399] mt-4px">
               {{ row.description }}
             </div>
           </template>
         </el-table-column>
         <el-table-column label="触发条件" min-width="250">
           <template #default="{ row }">
-            <div class="trigger-summary">
+            <div class="flex flex-wrap gap-4px">
               <el-tag
                 v-for="(trigger, index) in getTriggerSummary(row)"
                 :key="index"
                 type="primary"
                 size="small"
-                class="trigger-tag"
+                class="m-0"
               >
                 {{ trigger }}
               </el-tag>
@@ -156,13 +156,13 @@
         </el-table-column>
         <el-table-column label="执行动作" min-width="250">
           <template #default="{ row }">
-            <div class="action-summary">
+            <div class="flex flex-wrap gap-4px">
               <el-tag
                 v-for="(action, index) in getActionSummary(row)"
                 :key="index"
                 type="success"
                 size="small"
-                class="action-tag"
+                class="m-0"
               >
                 {{ action }}
               </el-tag>
@@ -186,7 +186,7 @@
         <el-table-column label="操作" width="200" fixed="right">
           <template #default="{ row }">
             <!-- TODO @puhui999：间隙大了点 -->
-            <div class="action-buttons">
+            <div class="flex gap-8px">
               <el-button type="primary" link @click="handleEdit(row)">
                 <Icon icon="ep:edit" />
                 编辑
@@ -219,11 +219,11 @@
     </el-card>
 
     <!-- 批量操作 -->
-    <div v-if="selectedRows.length > 0" class="batch-actions">
+    <div v-if="selectedRows.length > 0" class="fixed bottom-20px left-1/2 transform -translate-x-1/2 z-1000">
       <el-card shadow="always">
-        <div class="batch-content">
-          <span class="batch-info"> 已选择 {{ selectedRows.length }} 项 </span>
-          <div class="batch-buttons">
+        <div class="flex items-center gap-16px">
+          <span class="font-500 text-[#303133]"> 已选择 {{ selectedRows.length }} 项 </span>
+          <div class="flex gap-8px">
             <el-button @click="handleBatchEnable">
               <Icon icon="ep:video-play" />
               批量启用
@@ -494,165 +494,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-/** TODO @puhui999：看看下面的，是不是可以用 unocss 替代 */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 20px;
-}
 
-.header-left {
-  flex: 1;
-}
-
-.page-title {
-  display: flex;
-  align-items: center;
-  margin: 0 0 8px 0;
-  font-size: 24px;
-  font-weight: 600;
-  color: #303133;
-}
-
-.title-icon {
-  margin-right: 12px;
-  color: #409eff;
-}
-
-.page-description {
-  margin: 0;
-  color: #606266;
-  font-size: 14px;
-}
-
-.search-card {
-  margin-bottom: 16px;
-}
-
-.stats-row {
-  margin-bottom: 16px;
-}
-
-.stats-card {
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.stats-card:hover {
-  transform: translateY(-2px);
-}
-
-.stats-content {
-  display: flex;
-  align-items: center;
-}
-
-.stats-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  color: white;
-  margin-right: 16px;
-}
-
-.stats-icon.total {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.stats-icon.enabled {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.stats-icon.disabled {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-}
-
-.stats-icon.active {
-  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-}
-
-.stats-number {
-  font-size: 24px;
-  font-weight: 600;
-  color: #303133;
-  line-height: 1;
-}
-
-.stats-label {
-  font-size: 14px;
-  color: #909399;
-  margin-top: 4px;
-}
-
-.table-card {
-  margin-bottom: 20px;
-}
-
-.rule-name-cell {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.rule-name {
-  font-weight: 500;
-  color: #303133;
-}
-
-.status-tag {
-  flex-shrink: 0;
-}
-
-.rule-description {
-  font-size: 12px;
-  color: #909399;
-  margin-top: 4px;
-}
-
-.trigger-summary,
-.action-summary {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.trigger-tag,
-.action-tag {
-  margin: 0;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.batch-actions {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1000;
-}
-
-.batch-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.batch-info {
-  font-weight: 500;
-  color: #303133;
-}
-
-.batch-buttons {
-  display: flex;
-  gap: 8px;
-}
-</style>

From 751daf5fbb946ea5091cf348547159c0296eb5a6 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 26 Jul 2025 14:20:07 +0800
Subject: [PATCH 02/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20unocss=20=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../configs/DeviceControlConfig.vue           |  46 ++----
 .../components/inputs/DescriptionInput.vue    |  89 ++---------
 .../components/previews/ActionPreview.vue     |  69 ++-------
 .../components/sections/ActionSection.vue     | 139 +++---------------
 .../components/sections/PreviewSection.vue    | 125 ++++------------
 5 files changed, 73 insertions(+), 395 deletions(-)

diff --git a/src/views/iot/rule/scene/components/configs/DeviceControlConfig.vue b/src/views/iot/rule/scene/components/configs/DeviceControlConfig.vue
index 38af8220..4b102e3c 100644
--- a/src/views/iot/rule/scene/components/configs/DeviceControlConfig.vue
+++ b/src/views/iot/rule/scene/components/configs/DeviceControlConfig.vue
@@ -1,7 +1,7 @@
 <!-- 设备控制配置组件 -->
 <!-- TODO @puhui999：貌似没生效~~~ -->
 <template>
-  <div class="device-control-config">
+  <div class="flex flex-col gap-16px">
     <!-- 产品和设备选择 -->
     <ProductDeviceSelector
       v-model:product-id="action.productId"
@@ -10,7 +10,7 @@
     />
 
     <!-- 控制参数配置 -->
-    <div v-if="action.productId && action.deviceId" class="control-params">
+    <div v-if="action.productId && action.deviceId" class="space-y-16px">
       <el-form-item label="控制参数" required>
         <el-input
           v-model="paramsJson"
@@ -22,14 +22,14 @@
       </el-form-item>
 
       <!-- 参数示例 -->
-      <div class="params-example">
+      <div class="mt-12px">
         <el-alert title="参数格式示例" type="info" :closable="false" show-icon>
           <template #default>
-            <div class="example-content">
-              <p>属性设置示例：</p>
-              <pre><code>{ "temperature": 25, "power": true }</code></pre>
-              <p>服务调用示例：</p>
-              <pre><code>{ "method": "restart", "params": { "delay": 5 } }</code></pre>
+            <div class="space-y-8px">
+              <p class="m-0 text-14px text-[var(--el-text-color-primary)]">属性设置示例：</p>
+              <pre class="m-0 p-8px bg-[var(--el-fill-color-light)] rounded-4px text-12px text-[var(--el-text-color-regular)] overflow-x-auto"><code>{ "temperature": 25, "power": true }</code></pre>
+              <p class="m-0 text-14px text-[var(--el-text-color-primary)]">服务调用示例：</p>
+              <pre class="m-0 p-8px bg-[var(--el-fill-color-light)] rounded-4px text-12px text-[var(--el-text-color-regular)] overflow-x-auto"><code>{ "method": "restart", "params": { "delay": 5 } }</code></pre>
             </div>
           </template>
         </el-alert>
@@ -37,7 +37,7 @@
     </div>
 
     <!-- 验证结果 -->
-    <div v-if="validationMessage" class="validation-result">
+    <div v-if="validationMessage" class="mt-16px">
       <el-alert
         :title="validationMessage"
         :type="isValid ? 'success' : 'error'"
@@ -140,34 +140,8 @@ watch(
 </script>
 
 <style scoped>
-.device-control-config {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.control-params {
-  margin-top: 16px;
-}
-
-.params-example {
-  margin-top: 8px;
-}
-
-.example-content pre {
-  margin: 4px 0;
-  padding: 8px;
-  background: var(--el-fill-color-light);
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.example-content code {
+:deep(.example-content code) {
   font-family: 'Courier New', monospace;
   color: var(--el-color-primary);
 }
-
-.validation-result {
-  margin-top: 8px;
-}
 </style>
diff --git a/src/views/iot/rule/scene/components/inputs/DescriptionInput.vue b/src/views/iot/rule/scene/components/inputs/DescriptionInput.vue
index e2dbd328..6d7db598 100644
--- a/src/views/iot/rule/scene/components/inputs/DescriptionInput.vue
+++ b/src/views/iot/rule/scene/components/inputs/DescriptionInput.vue
@@ -1,6 +1,6 @@
 <!-- 场景描述输入组件 -->
 <template>
-  <div class="description-input">
+  <div class="relative w-full">
     <el-input
       ref="inputRef"
       v-model="localValue"
@@ -15,22 +15,22 @@
 
     <!-- 描述模板 -->
     <teleport to="body">
-      <div v-if="showTemplates" ref="templateDropdownRef" class="templates" :style="dropdownStyle">
-        <div class="templates-header">
-          <span class="templates-title">描述模板</span>
+      <div v-if="showTemplates" ref="templateDropdownRef" class="fixed z-1000 bg-white border border-[var(--el-border-color-light)] rounded-6px shadow-[var(--el-box-shadow)] min-w-300px max-w-400px" :style="dropdownStyle">
+        <div class="flex items-center justify-between p-12px border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]">
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">描述模板</span>
           <el-button type="text" size="small" @click="showTemplates = false">
             <Icon icon="ep:close" />
           </el-button>
         </div>
-        <div class="templates-list">
+        <div class="max-h-300px overflow-y-auto">
           <div
             v-for="template in descriptionTemplates"
             :key="template.title"
-            class="template-item"
+            class="p-12px border-b border-[var(--el-border-color-lighter)] cursor-pointer transition-colors duration-200 hover:bg-[var(--el-fill-color-light)] last:border-b-0"
             @click="applyTemplate(template)"
           >
-            <div class="template-title">{{ template.title }}</div>
-            <div class="template-content">{{ template.content }}</div>
+            <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-4px">{{ template.title }}</div>
+            <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ template.content }}</div>
           </div>
         </div>
       </div>
@@ -38,7 +38,7 @@
 
     <!-- TODO @puhui999：不用模版哈，简单点。。。 -->
     <!-- 模板按钮 -->
-    <div v-if="!localValue && !showTemplates" class="template-trigger">
+    <div v-if="!localValue && !showTemplates" class="absolute top-2px right-2px">
       <el-button type="text" size="small" @click="toggleTemplates">
         <Icon icon="ep:document" class="mr-1" />
         使用模板
@@ -175,75 +175,4 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-.description-input {
-  position: relative;
-  width: 100%;
-}
 
-.templates {
-  position: fixed;
-  z-index: 9999;
-  background: white;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 300px;
-  max-width: 400px;
-  max-height: 400px;
-  overflow: hidden;
-}
-
-.templates-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  background: var(--el-fill-color-light);
-}
-
-.templates-title {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  font-weight: 500;
-}
-
-.templates-list {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.template-item {
-  padding: 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.template-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.template-item:last-child {
-  border-bottom: none;
-}
-
-.template-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 4px;
-}
-
-.template-content {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-}
-
-.template-trigger {
-  margin-top: 8px;
-  text-align: right;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/previews/ActionPreview.vue b/src/views/iot/rule/scene/components/previews/ActionPreview.vue
index e1876a79..a977173b 100644
--- a/src/views/iot/rule/scene/components/previews/ActionPreview.vue
+++ b/src/views/iot/rule/scene/components/previews/ActionPreview.vue
@@ -1,24 +1,24 @@
 <!-- 执行器预览组件 -->
 <template>
-  <div class="action-preview">
-    <div v-if="actions.length === 0" class="empty-preview">
+  <div class="w-full">
+    <div v-if="actions.length === 0" class="text-center py-20px">
       <el-text type="info" size="small">暂无执行器配置</el-text>
     </div>
-    <div v-else class="action-list">
+    <div v-else class="space-y-12px">
       <div
         v-for="(action, index) in actions"
         :key="index"
-        class="action-item"
+        class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
       >
-        <div class="action-header">
-          <Icon icon="ep:setting" class="action-icon" />
-          <span class="action-title">执行器 {{ index + 1 }}</span>
+        <div class="flex items-center gap-8px mb-8px">
+          <Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">执行器 {{ index + 1 }}</span>
           <el-tag :type="getActionTypeTag(action.type)" size="small">
             {{ getActionTypeName(action.type) }}
           </el-tag>
         </div>
-        <div class="action-content">
-          <div class="action-summary">
+        <div class="pl-24px">
+          <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
             {{ getActionSummary(action) }}
           </div>
         </div>
@@ -73,55 +73,4 @@ const getActionSummary = (action: ActionFormData) => {
 }
 </script>
 
-<style scoped>
-.action-preview {
-  width: 100%;
-}
 
-.empty-preview {
-  text-align: center;
-  padding: 20px 0;
-}
-
-.action-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.action-item {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 4px;
-  background: var(--el-fill-color-blank);
-}
-
-.action-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.action-icon {
-  color: var(--el-color-success);
-  font-size: 14px;
-}
-
-.action-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.action-content {
-  padding: 8px 12px;
-}
-
-.action-summary {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/sections/ActionSection.vue b/src/views/iot/rule/scene/components/sections/ActionSection.vue
index a62ffd1d..7d3fe8d6 100644
--- a/src/views/iot/rule/scene/components/sections/ActionSection.vue
+++ b/src/views/iot/rule/scene/components/sections/ActionSection.vue
@@ -1,15 +1,15 @@
 <!-- 执行器配置组件 -->
 <!-- todo @puhui999：参考“触发器配置”，简化下。 -->
 <template>
-  <el-card class="action-section" shadow="never">
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
-      <div class="section-header">
-        <div class="header-left">
-          <Icon icon="ep:setting" class="section-icon" />
-          <span class="section-title">执行器配置</span>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:setting" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">执行器配置</span>
           <el-tag size="small" type="info">{{ actions.length }}/{{ maxActions }}</el-tag>
         </div>
-        <div class="header-right">
+        <div class="flex items-center gap-8px">
           <el-button
             type="primary"
             size="small"
@@ -23,9 +23,9 @@
       </div>
     </template>
 
-    <div class="section-content">
+    <div class="p-0">
       <!-- 空状态 -->
-      <div v-if="actions.length === 0" class="empty-state">
+      <div v-if="actions.length === 0">
         <el-empty description="暂无执行器配置">
           <el-button type="primary" @click="addAction">
             <Icon icon="ep:plus" />
@@ -35,17 +35,17 @@
       </div>
 
       <!-- 执行器列表 -->
-      <div v-else class="actions-list">
-        <div v-for="(action, index) in actions" :key="`action-${index}`" class="action-item">
-          <div class="action-header">
-            <div class="action-title">
-              <Icon icon="ep:setting" class="action-icon" />
+      <div v-else class="space-y-16px">
+        <div v-for="(action, index) in actions" :key="`action-${index}`" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
+          <div class="flex items-center justify-between mb-16px">
+            <div class="flex items-center gap-8px">
+              <Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
               <span>执行器 {{ index + 1 }}</span>
               <el-tag :type="getActionTypeTag(action.type)" size="small">
                 {{ getActionTypeName(action.type) }}
               </el-tag>
             </div>
-            <div class="action-actions">
+            <div>
               <el-button
                 type="danger"
                 size="small"
@@ -59,7 +59,7 @@
             </div>
           </div>
 
-          <div class="action-content">
+          <div class="space-y-16px">
             <!-- 执行类型选择 -->
             <ActionTypeSelector
               :model-value="action.type"
@@ -87,12 +87,12 @@
       </div>
 
       <!-- 添加提示 -->
-      <div v-if="actions.length > 0 && actions.length < maxActions" class="add-more">
-        <el-button type="primary" plain @click="addAction" class="add-more-btn">
+      <div v-if="actions.length > 0 && actions.length < maxActions" class="text-center py-16px">
+        <el-button type="primary" plain @click="addAction">
           <Icon icon="ep:plus" />
           继续添加执行器
         </el-button>
-        <span class="add-more-text"> 最多可添加 {{ maxActions }} 个执行器 </span>
+        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxActions }} 个执行器 </span>
       </div>
 
       <!-- 验证结果 -->
@@ -266,107 +266,4 @@ watch(
 )
 </script>
 
-<style scoped>
-.action-section {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-}
 
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-icon {
-  color: var(--el-color-primary);
-  font-size: 18px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-content {
-  padding: 0;
-}
-
-.empty-state {
-  padding: 40px 0;
-  text-align: center;
-}
-
-.actions-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.action-item {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.action-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.action-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.action-icon {
-  color: var(--el-color-success);
-  font-size: 16px;
-}
-
-.action-content {
-  padding: 16px;
-}
-
-.add-more {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-top: 16px;
-  padding: 16px;
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  background: var(--el-fill-color-lighter);
-}
-
-.add-more-btn {
-  flex-shrink: 0;
-}
-
-.add-more-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.validation-result {
-  margin-top: 16px;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/sections/PreviewSection.vue b/src/views/iot/rule/scene/components/sections/PreviewSection.vue
index 5f5a5be1..d57fa046 100644
--- a/src/views/iot/rule/scene/components/sections/PreviewSection.vue
+++ b/src/views/iot/rule/scene/components/sections/PreviewSection.vue
@@ -1,14 +1,14 @@
 <!-- 预览区域组件 -->
 <!-- TODO @puhui999：是不是不用这个哈？ -->
 <template>
-  <el-card class="preview-section" shadow="never">
+  <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
-      <div class="section-header">
-        <div class="header-left">
-          <Icon icon="ep:view" class="section-icon" />
-          <span class="section-title">配置预览</span>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <Icon icon="ep:view" class="text-[var(--el-color-primary)] text-18px" />
+          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">配置预览</span>
         </div>
-        <div class="header-right">
+        <div class="flex items-center gap-8px">
           <el-button type="primary" size="small" @click="handleValidate" :loading="validating">
             <Icon icon="ep:check" />
             验证配置
@@ -17,49 +17,49 @@
       </div>
     </template>
 
-    <div class="section-content">
+    <div class="p-0">
       <!-- 基础信息预览 -->
-      <div class="preview-group">
-        <div class="group-header">
-          <Icon icon="ep:info-filled" class="group-icon" />
-          <span class="group-title">基础信息</span>
+      <div class="mb-20px">
+        <div class="flex items-center gap-8px mb-12px">
+          <Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">基础信息</span>
         </div>
-        <div class="group-content">
+        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
           <ConfigPreview :form-data="formData" />
         </div>
       </div>
 
       <!-- 触发器预览 -->
-      <div class="preview-group">
-        <div class="group-header">
-          <Icon icon="ep:lightning" class="group-icon" />
-          <span class="group-title">触发器配置</span>
+      <div class="mb-20px">
+        <div class="flex items-center gap-8px mb-12px">
+          <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发器配置</span>
           <el-tag size="small" type="primary">{{ formData.triggers.length }}</el-tag>
         </div>
-        <div class="group-content">
+        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
           <TriggerPreview :triggers="formData.triggers" />
         </div>
       </div>
 
       <!-- 执行器预览 -->
-      <div class="preview-group">
-        <div class="group-header">
-          <Icon icon="ep:setting" class="group-icon" />
-          <span class="group-title">执行器配置</span>
+      <div class="mb-20px">
+        <div class="flex items-center gap-8px mb-12px">
+          <Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">执行器配置</span>
           <el-tag size="small" type="success">{{ formData.actions.length }}</el-tag>
         </div>
-        <div class="group-content">
+        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
           <ActionPreview :actions="formData.actions" />
         </div>
       </div>
 
       <!-- 验证结果 -->
-      <div class="preview-group">
-        <div class="group-header">
-          <Icon icon="ep:circle-check" class="group-icon" />
-          <span class="group-title">验证结果</span>
+      <div class="mb-20px">
+        <div class="flex items-center gap-8px mb-12px">
+          <Icon icon="ep:circle-check" class="text-[var(--el-color-primary)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">验证结果</span>
         </div>
-        <div class="group-content">
+        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
           <ValidationResult :validation-result="validationResult" />
         </div>
       </div>
@@ -105,75 +105,4 @@ const handleValidate = async () => {
 }
 </script>
 
-<style scoped>
-.preview-section {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-}
 
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-icon {
-  color: var(--el-color-primary);
-  font-size: 18px;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-content {
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.preview-group {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.group-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.group-icon {
-  color: var(--el-color-primary);
-  font-size: 16px;
-}
-
-.group-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.group-content {
-  padding: 16px;
-}
-</style>

From d4555907cc603adabcadb4818770441278bb134b Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 26 Jul 2025 16:33:27 +0800
Subject: [PATCH 03/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20unocss=20=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scene/components/configs/AlertConfig.vue  | 124 +++---------------
 .../components/configs/ConditionConfig.vue    |  65 ++-------
 .../configs/ConditionGroupConfig.vue          | 122 +++--------------
 .../configs/DeviceTriggerConfig.vue           | 115 +++-------------
 .../components/configs/TimerTriggerConfig.vue |  69 ++--------
 .../components/previews/ConfigPreview.vue     |  49 ++-----
 .../components/previews/TriggerPreview.vue    |  69 ++--------
 7 files changed, 88 insertions(+), 525 deletions(-)

diff --git a/src/views/iot/rule/scene/components/configs/AlertConfig.vue b/src/views/iot/rule/scene/components/configs/AlertConfig.vue
index eb23597a..b1dd894a 100644
--- a/src/views/iot/rule/scene/components/configs/AlertConfig.vue
+++ b/src/views/iot/rule/scene/components/configs/AlertConfig.vue
@@ -1,6 +1,6 @@
 <!-- 告警配置组件 -->
 <template>
-  <div class="alert-config">
+  <div class="w-full">
     <!-- TODO @puhui999：触发告警时，不用选择配置哈； -->
     <el-form-item label="告警配置" required>
       <el-select
@@ -18,10 +18,10 @@
           :label="config.name"
           :value="config.id"
         >
-          <div class="alert-option">
-            <div class="option-content">
-              <div class="option-name">{{ config.name }}</div>
-              <div class="option-desc">{{ config.description }}</div>
+          <div class="flex items-center justify-between w-full py-4px">
+            <div class="flex-1">
+              <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ config.name }}</div>
+              <div class="text-12px text-[var(--el-text-color-secondary)]">{{ config.description }}</div>
             </div>
             <el-tag :type="config.enabled ? 'success' : 'danger'" size="small">
               {{ config.enabled ? '启用' : '禁用' }}
@@ -32,32 +32,32 @@
     </el-form-item>
 
     <!-- 告警配置详情 -->
-    <div v-if="selectedConfig" class="alert-details">
-      <div class="details-header">
-        <Icon icon="ep:bell" class="details-icon" />
-        <span class="details-title">{{ selectedConfig.name }}</span>
+    <div v-if="selectedConfig" class="mt-16px p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-8px mb-12px">
+        <Icon icon="ep:bell" class="text-[var(--el-color-warning)] text-16px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ selectedConfig.name }}</span>
         <el-tag :type="selectedConfig.enabled ? 'success' : 'danger'" size="small">
           {{ selectedConfig.enabled ? '启用' : '禁用' }}
         </el-tag>
       </div>
-      <div class="details-content">
-        <div class="detail-item">
-          <span class="detail-label">描述：</span>
-          <span class="detail-value">{{ selectedConfig.description }}</span>
+      <div class="space-y-8px">
+        <div class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">描述：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.description }}</span>
         </div>
-        <div class="detail-item">
-          <span class="detail-label">通知方式：</span>
-          <span class="detail-value">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
+        <div class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">通知方式：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ getNotifyTypeName(selectedConfig.notifyType) }}</span>
         </div>
-        <div v-if="selectedConfig.receivers" class="detail-item">
-          <span class="detail-label">接收人：</span>
-          <span class="detail-value">{{ selectedConfig.receivers.join(', ') }}</span>
+        <div v-if="selectedConfig.receivers" class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px">接收人：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedConfig.receivers.join(', ') }}</span>
         </div>
       </div>
     </div>
 
     <!-- 验证结果 -->
-    <div v-if="validationMessage" class="validation-result">
+    <div v-if="validationMessage" class="mt-16px">
       <el-alert
         :title="validationMessage"
         :type="isValid ? 'success' : 'error'"
@@ -202,90 +202,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.alert-config {
-  width: 100%;
-}
-
-.alert-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 0;
-}
-
-.option-content {
-  flex: 1;
-}
-
-.option-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 2px;
-}
-
-.option-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.alert-details {
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.details-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.details-icon {
-  color: var(--el-color-warning);
-  font-size: 14px;
-}
-
-.details-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.details-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-left: 22px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.detail-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  min-width: 60px;
-  flex-shrink: 0;
-}
-
-.detail-value {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  flex: 1;
-}
-
-.validation-result {
-  margin-top: 8px;
-}
-
 :deep(.el-select-dropdown__item) {
   height: auto;
   padding: 8px 20px;
diff --git a/src/views/iot/rule/scene/components/configs/ConditionConfig.vue b/src/views/iot/rule/scene/components/configs/ConditionConfig.vue
index 686be4e8..0a975516 100644
--- a/src/views/iot/rule/scene/components/configs/ConditionConfig.vue
+++ b/src/views/iot/rule/scene/components/configs/ConditionConfig.vue
@@ -1,7 +1,7 @@
 <!-- 单个条件配置组件 -->
 <!-- TODO @puhui999：这里需要在对下阿里云 IoT，不太对；它是条件类型；然后选择产品、设备；接着选条件类型对应的比较； -->
 <template>
-  <div class="condition-config">
+  <div class="flex flex-col gap-16px">
     <el-row :gutter="16">
       <!-- 属性/事件/服务选择 -->
       <el-col :span="8">
@@ -45,18 +45,18 @@
     </el-row>
 
     <!-- 条件预览 -->
-    <div v-if="conditionPreview" class="condition-preview">
-      <div class="preview-header">
-        <Icon icon="ep:view" class="preview-icon" />
-        <span class="preview-title">条件预览</span>
+    <div v-if="conditionPreview" class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-8px mb-8px">
+        <Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
       </div>
-      <div class="preview-content">
-        <code class="preview-text">{{ conditionPreview }}</code>
+      <div class="pl-24px">
+        <code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono">{{ conditionPreview }}</code>
       </div>
     </div>
 
     <!-- 验证结果 -->
-    <div v-if="validationMessage" class="validation-result">
+    <div v-if="validationMessage" class="mt-8px">
       <el-alert
         :title="validationMessage"
         :type="isValid ? 'success' : 'error'"
@@ -210,55 +210,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.condition-config {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.condition-preview {
-  padding: 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.preview-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-
-.preview-icon {
-  color: var(--el-color-primary);
-  font-size: 14px;
-}
-
-.preview-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-}
-
-.preview-content {
-  margin-left: 20px;
-}
-
-.preview-text {
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-  background: var(--el-fill-color-blank);
-  padding: 8px 12px;
-  border-radius: 4px;
-  display: block;
-  font-family: inherit;
-}
-
-.validation-result {
-  margin-top: 8px;
-}
-
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
diff --git a/src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue b/src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue
index 3e3c02f2..3044cb89 100644
--- a/src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue
+++ b/src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue
@@ -1,17 +1,17 @@
 <!-- 条件组配置组件 -->
 <template>
-  <div class="condition-group-config">
-    <div class="group-content">
+  <div class="p-16px">
+    <div class="space-y-12px">
       <!-- 条件列表 -->
-      <div v-if="group.conditions && group.conditions.length > 0" class="conditions-list">
+      <div v-if="group.conditions && group.conditions.length > 0" class="space-y-12px">
         <div
           v-for="(condition, index) in group.conditions"
           :key="`condition-${index}`"
-          class="condition-item"
+          class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-light)]"
         >
-          <div class="condition-header">
-            <div class="condition-title">
-              <span>条件 {{ index + 1 }}</span>
+          <div class="flex items-center justify-between mb-12px">
+            <div class="flex items-center gap-8px">
+              <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件 {{ index + 1 }}</span>
               <el-tag size="small" type="primary">
                 {{ getConditionTypeName(condition.type) }}
               </el-tag>
@@ -28,7 +28,7 @@
             </el-button>
           </div>
 
-          <div class="condition-content">
+          <div class="p-12px bg-[var(--el-fill-color-blank)] rounded-4px">
             <ConditionConfig
               :model-value="condition"
               @update:model-value="(value) => updateCondition(index, value)"
@@ -41,8 +41,8 @@
 
           <!-- 逻辑连接符 -->
           <!-- TODO @puhui999：不用这个哈； -->
-          <div v-if="index < group.conditions!.length - 1" class="logic-connector">
-            <el-select v-model="group.logicOperator" size="small" style="width: 80px">
+          <div v-if="index < group.conditions!.length - 1" class="flex justify-center mt-8px">
+            <el-select v-model="group.logicOperator" size="small" class="w-80px">
               <el-option label="且" value="AND" />
               <el-option label="或" value="OR" />
             </el-select>
@@ -51,7 +51,7 @@
       </div>
 
       <!-- 空状态 -->
-      <div v-else class="empty-conditions">
+      <div v-else class="py-40px text-center">
         <el-empty description="暂无条件配置" :image-size="80">
           <el-button type="primary" @click="addCondition">
             <Icon icon="ep:plus" />
@@ -65,19 +65,19 @@
         v-if="
           group.conditions && group.conditions.length > 0 && group.conditions.length < maxConditions
         "
-        class="add-condition"
+        class="text-center py-16px"
       >
-        <el-button type="primary" plain @click="addCondition" class="add-condition-btn">
+        <el-button type="primary" plain @click="addCondition">
           <Icon icon="ep:plus" />
           继续添加条件
         </el-button>
-        <span class="add-condition-text"> 最多可添加 {{ maxConditions }} 个条件 </span>
+        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxConditions }} 个条件 </span>
       </div>
     </div>
 
     <!-- 验证结果 -->
     <!-- TODO @puhui999：是不是不用这种提示；只要 validator rules 能展示出来就好了呀。。。 -->
-    <div v-if="validationMessage" class="validation-result">
+    <div v-if="validationMessage" class="mt-8px">
       <el-alert
         :title="validationMessage"
         :type="isValid ? 'success' : 'error'"
@@ -230,96 +230,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.condition-group-config {
-  padding: 16px;
-}
 
-.group-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.conditions-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.condition-item {
-  position: relative;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.condition-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.condition-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.condition-content {
-  padding: 16px;
-}
-
-.logic-connector {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 0;
-  position: relative;
-}
-
-.logic-connector::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 1px;
-  height: 100%;
-  background: var(--el-border-color);
-}
-
-.empty-conditions {
-  padding: 40px 0;
-  text-align: center;
-}
-
-.add-condition {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  background: var(--el-fill-color-lighter);
-}
-
-.add-condition-btn {
-  flex-shrink: 0;
-}
-
-.add-condition-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.validation-result {
-  margin-top: 16px;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue
index 1712f48f..e6400102 100644
--- a/src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue
+++ b/src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue
@@ -1,6 +1,6 @@
 <!-- 设备触发配置组件 -->
 <template>
-  <div class="device-trigger-config">
+  <div class="flex flex-col gap-16px">
     <!-- 产品和设备选择 -->
     <ProductDeviceSelector
       v-model:product-id="trigger.productId"
@@ -10,26 +10,26 @@
 
     <!-- TODO @puhui999：这里有点冗余，建议去掉 -->
     <!-- 设备状态变更提示 -->
-    <div v-if="trigger.type === TriggerTypeEnum.DEVICE_STATE_UPDATE" class="state-update-notice">
+    <div v-if="trigger.type === TriggerTypeEnum.DEVICE_STATE_UPDATE" class="mt-8px">
       <el-alert title="设备状态变更触发" type="info" :closable="false" show-icon>
         <template #default>
-          <p>当选中的设备上线或离线时将自动触发场景规则</p>
-          <p class="notice-tip">无需配置额外的触发条件</p>
+          <p class="m-0">当选中的设备上线或离线时将自动触发场景规则</p>
+          <p class="m-0 mt-4px text-12px text-[var(--el-text-color-secondary)]">无需配置额外的触发条件</p>
         </template>
       </el-alert>
     </div>
 
     <!-- 条件组配置 -->
-    <div v-else-if="needsConditions" class="condition-groups">
-      <div class="condition-groups-header">
-        <div class="header-left">
-          <span class="header-title">触发条件</span>
+    <div v-else-if="needsConditions" class="space-y-12px">
+      <div class="flex items-center justify-between mb-12px">
+        <div class="flex items-center gap-8px">
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发条件</span>
           <!-- TODO @puhui999：去掉数量限制 -->
           <el-tag size="small" type="info">
             {{ trigger.conditionGroups?.length || 0 }}/{{ maxConditionGroups }}
           </el-tag>
         </div>
-        <div class="header-right">
+        <div class="flex items-center gap-8px">
           <el-button
             type="primary"
             size="small"
@@ -45,21 +45,21 @@
       <!-- 条件组列表 -->
       <div
         v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
-        class="condition-groups-list"
+        class="flex flex-col gap-12px"
       >
         <div
           v-for="(group, groupIndex) in trigger.conditionGroups"
           :key="`group-${groupIndex}`"
-          class="condition-group"
+          class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
         >
-          <div class="group-header">
-            <div class="group-title">
+          <div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]">
+            <div class="flex items-center text-14px font-500 text-[var(--el-text-color-primary)]">
               <span>条件组 {{ groupIndex + 1 }}</span>
               <!-- TODO @puhui999：不用“且、或”哈。条件组之间，就是或；条件之间就是且 -->
               <el-select
                 v-model="group.logicOperator"
                 size="small"
-                style="width: 80px; margin-left: 12px"
+                class="w-80px ml-12px"
               >
                 <el-option label="且" value="AND" />
                 <el-option label="或" value="OR" />
@@ -89,7 +89,7 @@
       </div>
 
       <!-- 空状态 -->
-      <div v-else class="empty-conditions">
+      <div v-else class="py-40px text-center">
         <el-empty description="暂无触发条件">
           <el-button type="primary" @click="addConditionGroup">
             <Icon icon="ep:plus" />
@@ -100,7 +100,7 @@
     </div>
 
     <!-- 验证结果 -->
-    <div v-if="validationMessage" class="validation-result">
+    <div v-if="validationMessage" class="mt-8px">
       <el-alert
         :title="validationMessage"
         :type="isValid ? 'success' : 'error'"
@@ -262,86 +262,5 @@ watch(
     updateValidationResult()
   }
 )
-// TODO @puhui999：unocss
+// TODO @puhui999：unocss - 已完成转换
 </script>
-
-<style scoped>
-.device-trigger-config {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.state-update-notice {
-  margin-top: 8px;
-}
-
-.notice-tip {
-  margin: 4px 0 0 0;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.condition-groups-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.condition-groups-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.condition-group {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.group-title {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.empty-conditions {
-  padding: 40px 0;
-  text-align: center;
-}
-
-.validation-result {
-  margin-top: 8px;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue b/src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue
index 7ea742cb..5bb39ab1 100644
--- a/src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue
+++ b/src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue
@@ -1,12 +1,12 @@
 <!-- 定时触发配置组件 -->
 <template>
-  <div class="timer-trigger-config">
-    <div class="config-header">
-      <div class="header-left">
-        <Icon icon="ep:timer" class="header-icon" />
-        <span class="header-title">定时触发配置</span>
+  <div class="flex flex-col gap-16px">
+    <div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-8px">
+        <Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">定时触发配置</span>
       </div>
-      <div class="header-right">
+      <div class="flex items-center gap-8px">
         <el-button type="text" size="small" @click="showBuilder = !showBuilder">
           <Icon :icon="showBuilder ? 'ep:edit' : 'ep:setting'" />
           {{ showBuilder ? '手动编辑' : '可视化编辑' }}
@@ -16,12 +16,12 @@
 
     <!-- 可视化编辑器 -->
     <!-- TODO @puhui999：是不是复用现有的 cron 组件；不然有点重复哈；维护比较复杂 -->
-    <div v-if="showBuilder" class="visual-builder">
+    <div v-if="showBuilder" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
       <CronBuilder v-model="localValue" @validate="handleValidate" />
     </div>
 
     <!-- 手动编辑 -->
-    <div v-else class="manual-editor">
+    <div v-else class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
       <el-form-item label="CRON表达式" required>
         <CronInput v-model="localValue" @validate="handleValidate" />
       </el-form-item>
@@ -31,7 +31,7 @@
     <NextExecutionPreview :cron-expression="localValue" />
 
     <!-- 验证结果 -->
-    <div v-if="validationMessage" class="validation-result">
+    <div v-if="validationMessage" class="mt-8px">
       <el-alert
         :title="validationMessage"
         :type="isValid ? 'success' : 'error'"
@@ -85,55 +85,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.timer-trigger-config {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
 
-.config-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-icon {
-  color: var(--el-color-danger);
-  font-size: 18px;
-}
-
-.header-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.visual-builder,
-.manual-editor {
-  padding: 16px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.validation-result {
-  margin-top: 8px;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/previews/ConfigPreview.vue b/src/views/iot/rule/scene/components/previews/ConfigPreview.vue
index 46b39113..3f7a690f 100644
--- a/src/views/iot/rule/scene/components/previews/ConfigPreview.vue
+++ b/src/views/iot/rule/scene/components/previews/ConfigPreview.vue
@@ -1,21 +1,21 @@
 <!-- 配置预览组件 -->
 <!-- TODO @puhui999：应该暂时不用预览哈 -->
 <template>
-  <div class="config-preview">
-    <div class="preview-items">
-      <div class="preview-item">
-        <span class="item-label">场景名称：</span>
-        <span class="item-value">{{ formData.name || '未设置' }}</span>
+  <div class="w-full">
+    <div class="space-y-8px">
+      <div class="flex items-start gap-8px">
+        <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景名称：</span>
+        <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ formData.name || '未设置' }}</span>
       </div>
-      <div class="preview-item">
-        <span class="item-label">场景状态：</span>
+      <div class="flex items-start gap-8px">
+        <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景状态：</span>
         <el-tag :type="formData.status === 0 ? 'success' : 'danger'" size="small">
           {{ formData.status === 0 ? '启用' : '禁用' }}
         </el-tag>
       </div>
-      <div v-if="formData.description" class="preview-item">
-        <span class="item-label">场景描述：</span>
-        <span class="item-value">{{ formData.description }}</span>
+      <div v-if="formData.description" class="flex items-start gap-8px">
+        <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景描述：</span>
+        <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ formData.description }}</span>
       </div>
     </div>
   </div>
@@ -34,33 +34,4 @@ interface Props {
 defineProps<Props>()
 </script>
 
-<style scoped>
-.config-preview {
-  width: 100%;
-}
 
-.preview-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.preview-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.item-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  min-width: 80px;
-  flex-shrink: 0;
-}
-
-.item-value {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  flex: 1;
-}
-</style>
diff --git a/src/views/iot/rule/scene/components/previews/TriggerPreview.vue b/src/views/iot/rule/scene/components/previews/TriggerPreview.vue
index 0b7d779e..2e255166 100644
--- a/src/views/iot/rule/scene/components/previews/TriggerPreview.vue
+++ b/src/views/iot/rule/scene/components/previews/TriggerPreview.vue
@@ -1,24 +1,24 @@
 <!-- 触发器预览组件 -->
 <template>
-  <div class="trigger-preview">
-    <div v-if="triggers.length === 0" class="empty-preview">
+  <div class="w-full">
+    <div v-if="triggers.length === 0" class="text-center py-20px">
       <el-text type="info" size="small">暂无触发器配置</el-text>
     </div>
-    <div v-else class="trigger-list">
+    <div v-else class="space-y-12px">
       <div
         v-for="(trigger, index) in triggers"
         :key="index"
-        class="trigger-item"
+        class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
       >
-        <div class="trigger-header">
-          <Icon icon="ep:lightning" class="trigger-icon" />
-          <span class="trigger-title">触发器 {{ index + 1 }}</span>
+        <div class="flex items-center gap-8px mb-8px">
+          <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发器 {{ index + 1 }}</span>
           <el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
             {{ getTriggerTypeName(trigger.type) }}
           </el-tag>
         </div>
-        <div class="trigger-content">
-          <div class="trigger-summary">
+        <div class="pl-24px">
+          <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
             {{ getTriggerSummary(trigger) }}
           </div>
         </div>
@@ -77,55 +77,4 @@ const getTriggerSummary = (trigger: TriggerFormData) => {
 }
 </script>
 
-<style scoped>
-.trigger-preview {
-  width: 100%;
-}
 
-.empty-preview {
-  text-align: center;
-  padding: 20px 0;
-}
-
-.trigger-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.trigger-item {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 4px;
-  background: var(--el-fill-color-blank);
-}
-
-.trigger-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.trigger-icon {
-  color: var(--el-color-warning);
-  font-size: 14px;
-}
-
-.trigger-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.trigger-content {
-  padding: 8px 12px;
-}
-
-.trigger-summary {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-}
-</style>

From 52b9c1827e19030cef9cca4fcafab9320e758f08 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 26 Jul 2025 17:04:53 +0800
Subject: [PATCH 04/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20unocss=20=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../selectors/ActionTypeSelector.vue          |  56 +------
 .../components/selectors/OperatorSelector.vue | 112 ++------------
 .../components/selectors/PropertySelector.vue | 130 +++--------------
 .../selectors/TriggerTypeSelector.vue         | 138 +++---------------
 4 files changed, 61 insertions(+), 375 deletions(-)

diff --git a/src/views/iot/rule/scene/components/selectors/ActionTypeSelector.vue b/src/views/iot/rule/scene/components/selectors/ActionTypeSelector.vue
index 336668fa..da86b7ed 100644
--- a/src/views/iot/rule/scene/components/selectors/ActionTypeSelector.vue
+++ b/src/views/iot/rule/scene/components/selectors/ActionTypeSelector.vue
@@ -1,6 +1,6 @@
 <!-- 执行器类型选择组件 -->
 <template>
-  <div class="action-type-selector">
+  <div class="w-full">
     <!-- TODO @puhui999：1）设备属性设置时，貌似没选属性；2）服务调用时，貌似也没的设置哈； -->
     <el-form-item label="执行类型" required>
       <el-select
@@ -15,12 +15,12 @@
           :label="option.label"
           :value="option.value"
         >
-          <div class="action-option">
-            <div class="option-content">
-              <Icon :icon="option.icon" class="option-icon" />
-              <div class="option-info">
-                <div class="option-label">{{ option.label }}</div>
-                <div class="option-desc">{{ option.description }}</div>
+          <div class="flex items-center justify-between w-full py-4px">
+            <div class="flex items-center gap-12px flex-1">
+              <Icon :icon="option.icon" class="text-18px text-[var(--el-color-primary)] flex-shrink-0" />
+              <div class="flex-1">
+                <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ option.label }}</div>
+                <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ option.description }}</div>
               </div>
             </div>
             <el-tag :type="option.tag" size="small">
@@ -97,48 +97,6 @@ const handleChange = (value: number) => {
 </script>
 
 <style scoped>
-.action-type-selector {
-  width: 100%;
-}
-
-.action-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 0;
-}
-
-.option-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-}
-
-.option-icon {
-  font-size: 18px;
-  color: var(--el-color-primary);
-  flex-shrink: 0;
-}
-
-.option-info {
-  flex: 1;
-}
-
-.option-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 2px;
-}
-
-.option-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-}
-
 :deep(.el-select-dropdown__item) {
   height: auto;
   padding: 8px 20px;
diff --git a/src/views/iot/rule/scene/components/selectors/OperatorSelector.vue b/src/views/iot/rule/scene/components/selectors/OperatorSelector.vue
index 43d73d74..9c0c238b 100644
--- a/src/views/iot/rule/scene/components/selectors/OperatorSelector.vue
+++ b/src/views/iot/rule/scene/components/selectors/OperatorSelector.vue
@@ -1,6 +1,6 @@
 <!-- 操作符选择器组件 -->
 <template>
-  <div class="operator-selector">
+  <div class="w-full">
     <el-select
       v-model="localValue"
       placeholder="请选择操作符"
@@ -13,26 +13,26 @@
         :label="operator.label"
         :value="operator.value"
       >
-        <div class="operator-option">
-          <div class="option-content">
-            <div class="option-label">{{ operator.label }}</div>
-            <div class="option-symbol">{{ operator.symbol }}</div>
+        <div class="flex items-center justify-between w-full py-4px">
+          <div class="flex items-center gap-8px">
+            <div class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ operator.label }}</div>
+            <div class="text-12px text-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)] px-6px py-2px rounded-4px font-mono">{{ operator.symbol }}</div>
           </div>
-          <div class="option-desc">{{ operator.description }}</div>
+          <div class="text-12px text-[var(--el-text-color-secondary)]">{{ operator.description }}</div>
         </div>
       </el-option>
     </el-select>
 
     <!-- 操作符说明 -->
     <!-- TODO @puhui999：这个去掉 -->
-    <div v-if="selectedOperator" class="operator-description">
-      <div class="desc-content">
-        <Icon icon="ep:info-filled" class="desc-icon" />
-        <span class="desc-text">{{ selectedOperator.description }}</span>
+    <div v-if="selectedOperator" class="mt-8px p-8px bg-[var(--el-fill-color-light)] rounded-4px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-6px">
+        <Icon icon="ep:info-filled" class="text-12px text-[var(--el-color-info)]" />
+        <span class="text-12px text-[var(--el-text-color-secondary)]">{{ selectedOperator.description }}</span>
       </div>
-      <div v-if="selectedOperator.example" class="desc-example">
-        <span class="example-label">示例：</span>
-        <code class="example-code">{{ selectedOperator.example }}</code>
+      <div v-if="selectedOperator.example" class="flex items-center gap-6px mt-4px">
+        <span class="text-12px text-[var(--el-text-color-secondary)]">示例：</span>
+        <code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] px-4px py-2px rounded-2px font-mono">{{ selectedOperator.example }}</code>
       </div>
     </div>
   </div>
@@ -184,92 +184,6 @@ watch(
 </script>
 
 <style scoped>
-.operator-selector {
-  width: 100%;
-}
-
-.operator-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 0;
-}
-
-.option-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.option-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.option-symbol {
-  font-size: 16px;
-  color: var(--el-color-primary);
-  font-weight: bold;
-  min-width: 20px;
-  text-align: center;
-}
-
-.option-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  max-width: 120px;
-  text-align: right;
-}
-
-.operator-description {
-  margin-top: 8px;
-  padding: 8px 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 4px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.desc-content {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-
-.desc-icon {
-  color: var(--el-color-primary);
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.desc-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.desc-example {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: 18px;
-}
-
-.example-label {
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-}
-
-.example-code {
-  font-size: 11px;
-  color: var(--el-color-primary);
-  background: var(--el-fill-color-blank);
-  padding: 2px 4px;
-  border-radius: 2px;
-  font-family: 'Courier New', monospace;
-}
-
 :deep(.el-select-dropdown__item) {
   height: auto;
   padding: 8px 20px;
diff --git a/src/views/iot/rule/scene/components/selectors/PropertySelector.vue b/src/views/iot/rule/scene/components/selectors/PropertySelector.vue
index 5e95054d..204b7448 100644
--- a/src/views/iot/rule/scene/components/selectors/PropertySelector.vue
+++ b/src/views/iot/rule/scene/components/selectors/PropertySelector.vue
@@ -1,7 +1,7 @@
 <!-- 属性选择器组件 -->
 <!-- TODO @yunai：可能要在 review 下 -->
 <template>
-  <div class="property-selector">
+  <div class="w-full">
     <el-select
       v-model="localValue"
       placeholder="请选择监控项"
@@ -18,12 +18,12 @@
           :label="property.name"
           :value="property.identifier"
         >
-          <div class="property-option">
-            <div class="option-content">
-              <div class="option-name">{{ property.name }}</div>
-              <div class="option-identifier">{{ property.identifier }}</div>
+          <div class="flex items-center justify-between w-full py-4px">
+            <div class="flex-1">
+              <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ property.name }}</div>
+              <div class="text-12px text-[var(--el-text-color-secondary)]">{{ property.identifier }}</div>
             </div>
-            <div class="option-meta">
+            <div class="flex-shrink-0">
               <el-tag :type="getPropertyTypeTag(property.dataType)" size="small">
                 {{ getPropertyTypeName(property.dataType) }}
               </el-tag>
@@ -34,30 +34,30 @@
     </el-select>
 
     <!-- 属性详情 -->
-    <div v-if="selectedProperty" class="property-details">
-      <div class="details-header">
-        <Icon icon="ep:info-filled" class="details-icon" />
-        <span class="details-title">{{ selectedProperty.name }}</span>
+    <div v-if="selectedProperty" class="mt-16px p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-8px mb-12px">
+        <Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">{{ selectedProperty.name }}</span>
         <el-tag :type="getPropertyTypeTag(selectedProperty.dataType)" size="small">
           {{ getPropertyTypeName(selectedProperty.dataType) }}
         </el-tag>
       </div>
-      <div class="details-content">
-        <div class="detail-item">
-          <span class="detail-label">标识符：</span>
-          <span class="detail-value">{{ selectedProperty.identifier }}</span>
+      <div class="space-y-8px ml-24px">
+        <div class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">标识符：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedProperty.identifier }}</span>
         </div>
-        <div v-if="selectedProperty.description" class="detail-item">
-          <span class="detail-label">描述：</span>
-          <span class="detail-value">{{ selectedProperty.description }}</span>
+        <div v-if="selectedProperty.description" class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">描述：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedProperty.description }}</span>
         </div>
-        <div v-if="selectedProperty.unit" class="detail-item">
-          <span class="detail-label">单位：</span>
-          <span class="detail-value">{{ selectedProperty.unit }}</span>
+        <div v-if="selectedProperty.unit" class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">单位：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedProperty.unit }}</span>
         </div>
-        <div v-if="selectedProperty.range" class="detail-item">
-          <span class="detail-label">取值范围：</span>
-          <span class="detail-value">{{ selectedProperty.range }}</span>
+        <div v-if="selectedProperty.range" class="flex items-start gap-8px">
+          <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">取值范围：</span>
+          <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ selectedProperty.range }}</span>
         </div>
       </div>
     </div>
@@ -336,90 +336,6 @@ watch(
 </script>
 
 <style scoped>
-.property-selector {
-  width: 100%;
-}
-
-.property-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 0;
-}
-
-.option-content {
-  flex: 1;
-}
-
-.option-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 2px;
-}
-
-.option-identifier {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  font-family: 'Courier New', monospace;
-}
-
-.option-meta {
-  flex-shrink: 0;
-}
-
-.property-details {
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.details-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.details-icon {
-  color: var(--el-color-primary);
-  font-size: 14px;
-}
-
-.details-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.details-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-left: 22px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.detail-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  min-width: 60px;
-}
-
-.detail-value {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  font-family: 'Courier New', monospace;
-}
-
 :deep(.el-select-dropdown__item) {
   height: auto;
   padding: 8px 20px;
diff --git a/src/views/iot/rule/scene/components/selectors/TriggerTypeSelector.vue b/src/views/iot/rule/scene/components/selectors/TriggerTypeSelector.vue
index 7111d6d7..48648ddf 100644
--- a/src/views/iot/rule/scene/components/selectors/TriggerTypeSelector.vue
+++ b/src/views/iot/rule/scene/components/selectors/TriggerTypeSelector.vue
@@ -1,6 +1,6 @@
 <!-- 触发器类型选择组件 -->
 <template>
-  <div class="trigger-type-selector">
+  <div class="w-full">
     <el-form-item label="触发类型" required>
       <el-select
         v-model="localValue"
@@ -14,13 +14,13 @@
           :label="option.label"
           :value="option.value"
         >
-          <div class="trigger-option">
-            <div class="option-content">
+          <div class="flex items-center justify-between w-full py-4px">
+            <div class="flex items-center gap-12px flex-1">
               <!-- TODO @puhui999：貌似没对齐？ -->
-              <Icon :icon="option.icon" class="option-icon" />
-              <div class="option-info">
-                <div class="option-label">{{ option.label }}</div>
-                <div class="option-desc">{{ option.description }}</div>
+              <Icon :icon="option.icon" class="text-18px text-[var(--el-color-primary)] flex-shrink-0" />
+              <div class="flex-1">
+                <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ option.label }}</div>
+                <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ option.description }}</div>
               </div>
             </div>
             <!-- TODO @puhui999：这个要不去掉？ -->
@@ -34,17 +34,17 @@
 
     <!-- 类型说明 -->
     <!-- TODO @puhui999：这个去掉。感觉没啥内容哈； -->
-    <div v-if="selectedOption" class="type-description">
-      <div class="desc-header">
-        <Icon :icon="selectedOption.icon" class="desc-icon" />
-        <span class="desc-title">{{ selectedOption.label }}</span>
+    <div v-if="selectedOption" class="mt-16px p-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-8px mb-12px">
+        <Icon :icon="selectedOption.icon" class="text-20px text-[var(--el-color-primary)]" />
+        <span class="text-16px font-600 text-[var(--el-text-color-primary)]">{{ selectedOption.label }}</span>
       </div>
-      <div class="desc-content">
-        <p class="desc-text">{{ selectedOption.description }}</p>
-        <div class="desc-features">
-          <div v-for="feature in selectedOption.features" :key="feature" class="feature-item">
-            <Icon icon="ep:check" class="feature-icon" />
-            <span class="feature-text">{{ feature }}</span>
+      <div class="ml-28px">
+        <p class="text-14px text-[var(--el-text-color-regular)] m-0 mb-12px leading-relaxed">{{ selectedOption.description }}</p>
+        <div class="flex flex-col gap-6px">
+          <div v-for="feature in selectedOption.features" :key="feature" class="flex items-center gap-6px">
+            <Icon icon="ep:check" class="text-12px text-[var(--el-color-success)] flex-shrink-0" />
+            <span class="text-12px text-[var(--el-text-color-secondary)]">{{ feature }}</span>
           </div>
         </div>
       </div>
@@ -134,109 +134,7 @@ const handleChange = (value: number) => {
 </script>
 
 <style scoped>
-/** TODO @puhui999：unocss 哈 */
-.trigger-type-selector {
-  width: 100%;
-}
-
-.trigger-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 0;
-}
-
-.option-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-}
-
-.option-icon {
-  font-size: 18px;
-  color: var(--el-color-primary);
-  flex-shrink: 0;
-}
-
-.option-info {
-  flex: 1;
-}
-
-.option-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 2px;
-}
-
-.option-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-}
-
-.type-description {
-  margin-top: 16px;
-  padding: 16px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.desc-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.desc-icon {
-  font-size: 20px;
-  color: var(--el-color-primary);
-}
-
-.desc-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.desc-content {
-  margin-left: 28px;
-}
-
-.desc-text {
-  font-size: 14px;
-  color: var(--el-text-color-regular);
-  margin: 0 0 12px 0;
-  line-height: 1.5;
-}
-
-.desc-features {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.feature-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.feature-icon {
-  font-size: 12px;
-  color: var(--el-color-success);
-  flex-shrink: 0;
-}
-
-.feature-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
+/** TODO @puhui999：unocss 哈 - 已完成转换 */
 :deep(.el-select-dropdown__item) {
   height: auto;
   padding: 8px 20px;

From 8549399ae884549ac92d8ca9447ff3066a084353 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 26 Jul 2025 22:35:59 +0800
Subject: [PATCH 05/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{components => form}/RuleSceneForm.vue    | 77 ++++++++-----------
 .../configs/AlertConfig.vue                   |  0
 .../configs/ConditionConfig.vue               |  0
 .../configs/ConditionGroupConfig.vue          |  0
 .../configs/DeviceControlConfig.vue           |  0
 .../configs/DeviceTriggerConfig.vue           |  0
 .../configs/TimerTriggerConfig.vue            |  0
 .../inputs/CronBuilder.vue                    |  0
 .../{components => form}/inputs/CronInput.vue |  0
 .../inputs/DescriptionInput.vue               |  0
 .../{components => form}/inputs/NameInput.vue |  0
 .../inputs/StatusRadio.vue                    |  0
 .../inputs/ValueInput.vue                     |  0
 .../previews/ActionPreview.vue                |  0
 .../previews/ConfigPreview.vue                |  0
 .../previews/NextExecutionPreview.vue         |  0
 .../previews/TriggerPreview.vue               |  0
 .../previews/ValidationResult.vue             |  0
 .../sections/ActionSection.vue                |  0
 .../sections/BasicInfoSection.vue             |  0
 .../sections/PreviewSection.vue               |  0
 .../sections/TriggerSection.vue               |  0
 .../selectors/ActionTypeSelector.vue          |  0
 .../selectors/OperatorSelector.vue            |  0
 .../selectors/ProductDeviceSelector.vue       |  0
 .../selectors/PropertySelector.vue            |  0
 .../selectors/TriggerTypeSelector.vue         |  0
 .../{components => form}/selectors/types.ts   |  0
 src/views/iot/rule/scene/index.vue            |  2 +-
 29 files changed, 33 insertions(+), 46 deletions(-)
 rename src/views/iot/rule/scene/{components => form}/RuleSceneForm.vue (74%)
 rename src/views/iot/rule/scene/{components => form}/configs/AlertConfig.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/configs/ConditionConfig.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/configs/ConditionGroupConfig.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/configs/DeviceControlConfig.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/configs/DeviceTriggerConfig.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/configs/TimerTriggerConfig.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/inputs/CronBuilder.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/inputs/CronInput.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/inputs/DescriptionInput.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/inputs/NameInput.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/inputs/StatusRadio.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/inputs/ValueInput.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/previews/ActionPreview.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/previews/ConfigPreview.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/previews/NextExecutionPreview.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/previews/TriggerPreview.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/previews/ValidationResult.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/sections/ActionSection.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/sections/BasicInfoSection.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/sections/PreviewSection.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/sections/TriggerSection.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/selectors/ActionTypeSelector.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/selectors/OperatorSelector.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/selectors/ProductDeviceSelector.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/selectors/PropertySelector.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/selectors/TriggerTypeSelector.vue (100%)
 rename src/views/iot/rule/scene/{components => form}/selectors/types.ts (100%)

diff --git a/src/views/iot/rule/scene/components/RuleSceneForm.vue b/src/views/iot/rule/scene/form/RuleSceneForm.vue
similarity index 74%
rename from src/views/iot/rule/scene/components/RuleSceneForm.vue
rename to src/views/iot/rule/scene/form/RuleSceneForm.vue
index 93cb2f0c..8fc3e26d 100644
--- a/src/views/iot/rule/scene/components/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/form/RuleSceneForm.vue
@@ -1,5 +1,4 @@
 <!-- IoT场景联动规则表单 - 主表单组件 -->
-<!-- TODO @puhui999：要不搞个 form 目录，不用 components；保持和别的模块风格一致哈； -->
 <template>
   <el-drawer
     v-model="drawerVisible"
@@ -37,21 +36,9 @@
       </el-form>
     </div>
 
-    <!-- 抽屉底部操作栏 -->
-    <!-- TODO @puhui999：这个按钮逻辑，和别的模块一致 -->
     <template #footer>
-      <div class="absolute bottom-0 left-0 right-0 flex justify-end gap-16px p-16px px-20px bg-[var(--el-bg-color)] border-t border-[var(--el-border-color-light)] shadow-[0_-2px_8px_rgba(0,0,0,0.1)]">
-        <el-button @click="handleClose" size="large">取消</el-button>
-        <el-button
-          type="primary"
-          @click="handleSubmit"
-          :loading="submitLoading"
-          :disabled="!canSubmit"
-          size="large"
-        >
-          {{ isEdit ? '更新' : '创建' }}
-        </el-button>
-      </div>
+      <el-button :disabled="submitLoading" type="primary" @click="handleSubmit">确 定</el-button>
+      <el-button @click="handleClose">取 消</el-button>
     </template>
   </el-drawer>
 </template>
@@ -65,7 +52,7 @@ import PreviewSection from './sections/PreviewSection.vue'
 import { RuleSceneFormData, IotRuleScene } from '@/api/iot/rule/scene/scene.types'
 import { getBaseValidationRules } from '../utils/validation'
 import { transformFormToApi, transformApiToForm, createDefaultFormData } from '../utils/transform'
-import { handleValidationError, showSuccess, withErrorHandling } from '../utils/errorHandler'
+import { ElMessage } from 'element-plus'
 
 /** IoT 场景联动规则表单 - 主表单组件 */
 defineOptions({ name: 'RuleSceneForm' })
@@ -98,7 +85,7 @@ const actionValidation = ref({ valid: true, message: '' })
 
 // 计算属性
 const isEdit = computed(() => !!props.ruleScene?.id)
-const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则')) // TODO @puhui999：这个风格，和别的模块一致；
+const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则'))
 
 const canSubmit = computed(() => {
   return (
@@ -132,49 +119,49 @@ const handleValidate = async () => {
     }
 
     validationResult.value = { valid: true, message: '验证通过' }
-    showSuccess('规则验证通过')
+    ElMessage.success('规则验证通过')
     return true
   } catch (error: any) {
     const message = error.message || '表单验证失败'
     validationResult.value = { valid: false, message }
-    await handleValidationError(message, 'rule-scene-form')
+    ElMessage.error(message)
     return false
   }
 }
 
-// TODO @puhui999：参考下别的模块，不用这么复杂哈；
 const handleSubmit = async () => {
-  const result = await withErrorHandling(
-    async () => {
-      // 验证表单
-      const isValid = await handleValidate()
-      if (!isValid) {
-        throw new Error('表单验证失败')
-      }
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
 
-      // 转换数据格式
-      const apiData = transformFormToApi(formData.value)
+  // 验证触发器和执行器
+  if (!triggerValidation.value.valid) {
+    ElMessage.error(triggerValidation.value.message)
+    return
+  }
+  if (!actionValidation.value.valid) {
+    ElMessage.error(actionValidation.value.message)
+    return
+  }
 
-      // 这里应该调用API保存数据
-      console.log('提交数据:', apiData)
+  // 提交请求
+  submitLoading.value = true
+  try {
+    // 转换数据格式
+    const apiData = transformFormToApi(formData.value)
 
-      // 模拟API调用
-      await new Promise((resolve) => setTimeout(resolve, 1000))
+    // 这里应该调用API保存数据
+    console.log('提交数据:', apiData)
 
-      return apiData
-    },
-    {
-      loadingKey: 'rule-scene-submit',
-      loadingText: isEdit.value ? '更新中...' : '创建中...',
-      context: 'rule-scene-form',
-      showSuccess: true,
-      successMessage: isEdit.value ? '更新成功' : '创建成功'
-    }
-  )
+    // 模拟API调用
+    await new Promise((resolve) => setTimeout(resolve, 1000))
 
-  if (result) {
+    ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+    drawerVisible.value = false
     emit('success')
-    handleClose()
+  } finally {
+    submitLoading.value = false
   }
 }
 
diff --git a/src/views/iot/rule/scene/components/configs/AlertConfig.vue b/src/views/iot/rule/scene/form/configs/AlertConfig.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/configs/AlertConfig.vue
rename to src/views/iot/rule/scene/form/configs/AlertConfig.vue
diff --git a/src/views/iot/rule/scene/components/configs/ConditionConfig.vue b/src/views/iot/rule/scene/form/configs/ConditionConfig.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/configs/ConditionConfig.vue
rename to src/views/iot/rule/scene/form/configs/ConditionConfig.vue
diff --git a/src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue b/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/configs/ConditionGroupConfig.vue
rename to src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
diff --git a/src/views/iot/rule/scene/components/configs/DeviceControlConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/configs/DeviceControlConfig.vue
rename to src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
diff --git a/src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/configs/DeviceTriggerConfig.vue
rename to src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
diff --git a/src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/configs/TimerTriggerConfig.vue
rename to src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
diff --git a/src/views/iot/rule/scene/components/inputs/CronBuilder.vue b/src/views/iot/rule/scene/form/inputs/CronBuilder.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/inputs/CronBuilder.vue
rename to src/views/iot/rule/scene/form/inputs/CronBuilder.vue
diff --git a/src/views/iot/rule/scene/components/inputs/CronInput.vue b/src/views/iot/rule/scene/form/inputs/CronInput.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/inputs/CronInput.vue
rename to src/views/iot/rule/scene/form/inputs/CronInput.vue
diff --git a/src/views/iot/rule/scene/components/inputs/DescriptionInput.vue b/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/inputs/DescriptionInput.vue
rename to src/views/iot/rule/scene/form/inputs/DescriptionInput.vue
diff --git a/src/views/iot/rule/scene/components/inputs/NameInput.vue b/src/views/iot/rule/scene/form/inputs/NameInput.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/inputs/NameInput.vue
rename to src/views/iot/rule/scene/form/inputs/NameInput.vue
diff --git a/src/views/iot/rule/scene/components/inputs/StatusRadio.vue b/src/views/iot/rule/scene/form/inputs/StatusRadio.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/inputs/StatusRadio.vue
rename to src/views/iot/rule/scene/form/inputs/StatusRadio.vue
diff --git a/src/views/iot/rule/scene/components/inputs/ValueInput.vue b/src/views/iot/rule/scene/form/inputs/ValueInput.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/inputs/ValueInput.vue
rename to src/views/iot/rule/scene/form/inputs/ValueInput.vue
diff --git a/src/views/iot/rule/scene/components/previews/ActionPreview.vue b/src/views/iot/rule/scene/form/previews/ActionPreview.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/previews/ActionPreview.vue
rename to src/views/iot/rule/scene/form/previews/ActionPreview.vue
diff --git a/src/views/iot/rule/scene/components/previews/ConfigPreview.vue b/src/views/iot/rule/scene/form/previews/ConfigPreview.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/previews/ConfigPreview.vue
rename to src/views/iot/rule/scene/form/previews/ConfigPreview.vue
diff --git a/src/views/iot/rule/scene/components/previews/NextExecutionPreview.vue b/src/views/iot/rule/scene/form/previews/NextExecutionPreview.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/previews/NextExecutionPreview.vue
rename to src/views/iot/rule/scene/form/previews/NextExecutionPreview.vue
diff --git a/src/views/iot/rule/scene/components/previews/TriggerPreview.vue b/src/views/iot/rule/scene/form/previews/TriggerPreview.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/previews/TriggerPreview.vue
rename to src/views/iot/rule/scene/form/previews/TriggerPreview.vue
diff --git a/src/views/iot/rule/scene/components/previews/ValidationResult.vue b/src/views/iot/rule/scene/form/previews/ValidationResult.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/previews/ValidationResult.vue
rename to src/views/iot/rule/scene/form/previews/ValidationResult.vue
diff --git a/src/views/iot/rule/scene/components/sections/ActionSection.vue b/src/views/iot/rule/scene/form/sections/ActionSection.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/sections/ActionSection.vue
rename to src/views/iot/rule/scene/form/sections/ActionSection.vue
diff --git a/src/views/iot/rule/scene/components/sections/BasicInfoSection.vue b/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/sections/BasicInfoSection.vue
rename to src/views/iot/rule/scene/form/sections/BasicInfoSection.vue
diff --git a/src/views/iot/rule/scene/components/sections/PreviewSection.vue b/src/views/iot/rule/scene/form/sections/PreviewSection.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/sections/PreviewSection.vue
rename to src/views/iot/rule/scene/form/sections/PreviewSection.vue
diff --git a/src/views/iot/rule/scene/components/sections/TriggerSection.vue b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/sections/TriggerSection.vue
rename to src/views/iot/rule/scene/form/sections/TriggerSection.vue
diff --git a/src/views/iot/rule/scene/components/selectors/ActionTypeSelector.vue b/src/views/iot/rule/scene/form/selectors/ActionTypeSelector.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/selectors/ActionTypeSelector.vue
rename to src/views/iot/rule/scene/form/selectors/ActionTypeSelector.vue
diff --git a/src/views/iot/rule/scene/components/selectors/OperatorSelector.vue b/src/views/iot/rule/scene/form/selectors/OperatorSelector.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/selectors/OperatorSelector.vue
rename to src/views/iot/rule/scene/form/selectors/OperatorSelector.vue
diff --git a/src/views/iot/rule/scene/components/selectors/ProductDeviceSelector.vue b/src/views/iot/rule/scene/form/selectors/ProductDeviceSelector.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/selectors/ProductDeviceSelector.vue
rename to src/views/iot/rule/scene/form/selectors/ProductDeviceSelector.vue
diff --git a/src/views/iot/rule/scene/components/selectors/PropertySelector.vue b/src/views/iot/rule/scene/form/selectors/PropertySelector.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/selectors/PropertySelector.vue
rename to src/views/iot/rule/scene/form/selectors/PropertySelector.vue
diff --git a/src/views/iot/rule/scene/components/selectors/TriggerTypeSelector.vue b/src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue
similarity index 100%
rename from src/views/iot/rule/scene/components/selectors/TriggerTypeSelector.vue
rename to src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue
diff --git a/src/views/iot/rule/scene/components/selectors/types.ts b/src/views/iot/rule/scene/form/selectors/types.ts
similarity index 100%
rename from src/views/iot/rule/scene/components/selectors/types.ts
rename to src/views/iot/rule/scene/form/selectors/types.ts
diff --git a/src/views/iot/rule/scene/index.vue b/src/views/iot/rule/scene/index.vue
index 07562352..3f6e175a 100644
--- a/src/views/iot/rule/scene/index.vue
+++ b/src/views/iot/rule/scene/index.vue
@@ -248,7 +248,7 @@
 
 <script setup lang="ts">
 import { ContentWrap } from '@/components/ContentWrap'
-import RuleSceneForm from './components/RuleSceneForm.vue'
+import RuleSceneForm from './form/RuleSceneForm.vue'
 import { IotRuleScene } from '@/api/iot/rule/scene/scene.types'
 import { getRuleSceneSummary } from './utils/transform'
 import { formatDate } from '@/utils/formatTime'

From d3d6f8f8ab5e728c1f2904bc5c78b5be0229b04f Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 27 Jul 2025 22:44:06 +0800
Subject: [PATCH 06/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iot/rule/scene/form/RuleSceneForm.vue     | 135 +++--
 .../scene/form/previews/ActionPreview.vue     |  76 ---
 .../scene/form/previews/ConfigPreview.vue     |  37 --
 .../form/previews/NextExecutionPreview.vue    | 226 -------
 .../scene/form/previews/TriggerPreview.vue    |  80 ---
 .../scene/form/previews/ValidationResult.vue  | 120 ----
 .../scene/form/sections/ActionSection.vue     |  14 +-
 .../scene/form/sections/PreviewSection.vue    | 108 ----
 .../scene/form/sections/TriggerSection.vue    |  17 +-
 src/views/iot/rule/scene/index.vue            | 218 ++++---
 .../iot/rule/scene/utils/errorHandler.ts      | 550 ------------------
 src/views/iot/rule/scene/utils/transform.ts   | 413 -------------
 src/views/iot/rule/scene/utils/validation.ts  | 100 +---
 13 files changed, 275 insertions(+), 1819 deletions(-)
 delete mode 100644 src/views/iot/rule/scene/form/previews/ActionPreview.vue
 delete mode 100644 src/views/iot/rule/scene/form/previews/ConfigPreview.vue
 delete mode 100644 src/views/iot/rule/scene/form/previews/NextExecutionPreview.vue
 delete mode 100644 src/views/iot/rule/scene/form/previews/TriggerPreview.vue
 delete mode 100644 src/views/iot/rule/scene/form/previews/ValidationResult.vue
 delete mode 100644 src/views/iot/rule/scene/form/sections/PreviewSection.vue
 delete mode 100644 src/views/iot/rule/scene/utils/errorHandler.ts
 delete mode 100644 src/views/iot/rule/scene/utils/transform.ts

diff --git a/src/views/iot/rule/scene/form/RuleSceneForm.vue b/src/views/iot/rule/scene/form/RuleSceneForm.vue
index 8fc3e26d..2adc9f50 100644
--- a/src/views/iot/rule/scene/form/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/form/RuleSceneForm.vue
@@ -26,13 +26,6 @@
 
         <!-- 执行器配置 -->
         <ActionSection v-model:actions="formData.actions" @validate="handleActionValidate" />
-
-        <!-- 预览区域 -->
-        <PreviewSection
-          :form-data="formData"
-          :validation-result="validationResult"
-          @validate="handleValidate"
-        />
       </el-form>
     </div>
 
@@ -48,11 +41,16 @@ import { useVModel } from '@vueuse/core'
 import BasicInfoSection from './sections/BasicInfoSection.vue'
 import TriggerSection from './sections/TriggerSection.vue'
 import ActionSection from './sections/ActionSection.vue'
-import PreviewSection from './sections/PreviewSection.vue'
-import { RuleSceneFormData, IotRuleScene } from '@/api/iot/rule/scene/scene.types'
+import {
+  RuleSceneFormData,
+  IotRuleScene,
+  IotRuleSceneTriggerTypeEnum,
+  IotRuleSceneActionTypeEnum,
+  CommonStatusEnum
+} from '@/api/iot/rule/scene/scene.types'
 import { getBaseValidationRules } from '../utils/validation'
-import { transformFormToApi, transformApiToForm, createDefaultFormData } from '../utils/transform'
 import { ElMessage } from 'element-plus'
+import { generateUUID } from '@/utils'
 
 /** IoT 场景联动规则表单 - 主表单组件 */
 defineOptions({ name: 'RuleSceneForm' })
@@ -72,12 +70,93 @@ const emit = defineEmits<Emits>()
 
 const drawerVisible = useVModel(props, 'modelValue', emit)
 
+/**
+ * 创建默认的表单数据
+ */
+const createDefaultFormData = (): RuleSceneFormData => {
+  return {
+    name: '',
+    description: '',
+    status: CommonStatusEnum.ENABLE, // 默认启用状态
+    triggers: [],
+    actions: []
+  }
+}
+
+/**
+ * 将表单数据转换为API请求格式
+ */
+const transformFormToApi = (formData: RuleSceneFormData): IotRuleScene => {
+  return {
+    id: formData.id,
+    name: formData.name,
+    description: formData.description,
+    status: Number(formData.status),
+    triggers:
+      formData.triggers?.map((trigger) => ({
+        type: trigger.type,
+        productKey: trigger.productId ? `product_${trigger.productId}` : undefined,
+        deviceNames: trigger.deviceId ? [`device_${trigger.deviceId}`] : undefined,
+        cronExpression: trigger.cronExpression,
+        conditions:
+          trigger.conditionGroups?.map((group) => ({
+            type: 'property',
+            identifier: trigger.identifier || '',
+            parameters: group.conditions.map((condition) => ({
+              identifier: condition.identifier,
+              operator: condition.operator,
+              value: condition.param
+            }))
+          })) || []
+      })) || [],
+    actions:
+      formData.actions?.map((action) => ({
+        type: action.type,
+        alertConfigId: action.alertConfigId,
+        deviceControl:
+          action.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET ||
+          action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
+            ? {
+                productKey: action.productId ? `product_${action.productId}` : '',
+                deviceNames: action.deviceId ? [`device_${action.deviceId}`] : [],
+                type: 'property',
+                identifier: 'set',
+                params: action.params || {}
+              }
+            : undefined
+      })) || []
+  } as IotRuleScene
+}
+
+/**
+ * 将 API 响应数据转换为表单格式
+ */
+const transformApiToForm = (apiData: IotRuleScene): RuleSceneFormData => {
+  return {
+    ...apiData,
+    status: Number(apiData.status), // 确保状态为数字类型
+    triggers:
+      apiData.triggers?.map((trigger) => ({
+        ...trigger,
+        type: Number(trigger.type),
+        // 为每个触发器添加唯一标识符，解决组件索引重用问题
+        key: generateUUID()
+      })) || [],
+    actions:
+      apiData.actions?.map((action) => ({
+        ...action,
+        type: Number(action.type),
+        // 为每个执行器添加唯一标识符，解决组件索引重用问题
+        key: generateUUID()
+      })) || []
+  }
+}
+
 // 表单数据和状态
 const formRef = ref()
 const formData = ref<RuleSceneFormData>(createDefaultFormData())
 const formRules = getBaseValidationRules()
 const submitLoading = ref(false)
-const validationResult = ref<{ valid: boolean; message?: string } | null>(null)
 
 // 验证状态
 const triggerValidation = ref({ valid: true, message: '' })
@@ -87,16 +166,6 @@ const actionValidation = ref({ valid: true, message: '' })
 const isEdit = computed(() => !!props.ruleScene?.id)
 const drawerTitle = computed(() => (isEdit.value ? '编辑场景联动规则' : '新增场景联动规则'))
 
-const canSubmit = computed(() => {
-  return (
-    formData.value.name &&
-    formData.value.triggers.length > 0 &&
-    formData.value.actions.length > 0 &&
-    triggerValidation.value.valid &&
-    actionValidation.value.valid
-  )
-})
-
 // 事件处理
 const handleTriggerValidate = (result: { valid: boolean; message: string }) => {
   triggerValidation.value = result
@@ -106,29 +175,6 @@ const handleActionValidate = (result: { valid: boolean; message: string }) => {
   actionValidation.value = result
 }
 
-const handleValidate = async () => {
-  try {
-    await formRef.value?.validate()
-
-    if (!triggerValidation.value.valid) {
-      throw new Error(triggerValidation.value.message)
-    }
-
-    if (!actionValidation.value.valid) {
-      throw new Error(actionValidation.value.message)
-    }
-
-    validationResult.value = { valid: true, message: '验证通过' }
-    ElMessage.success('规则验证通过')
-    return true
-  } catch (error: any) {
-    const message = error.message || '表单验证失败'
-    validationResult.value = { valid: false, message }
-    ElMessage.error(message)
-    return false
-  }
-}
-
 const handleSubmit = async () => {
   // 校验表单
   if (!formRef.value) return
@@ -167,7 +213,6 @@ const handleSubmit = async () => {
 
 const handleClose = () => {
   drawerVisible.value = false
-  validationResult.value = null
 }
 
 // 初始化表单数据
diff --git a/src/views/iot/rule/scene/form/previews/ActionPreview.vue b/src/views/iot/rule/scene/form/previews/ActionPreview.vue
deleted file mode 100644
index a977173b..00000000
--- a/src/views/iot/rule/scene/form/previews/ActionPreview.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<!-- 执行器预览组件 -->
-<template>
-  <div class="w-full">
-    <div v-if="actions.length === 0" class="text-center py-20px">
-      <el-text type="info" size="small">暂无执行器配置</el-text>
-    </div>
-    <div v-else class="space-y-12px">
-      <div
-        v-for="(action, index) in actions"
-        :key="index"
-        class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
-      >
-        <div class="flex items-center gap-8px mb-8px">
-          <Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">执行器 {{ index + 1 }}</span>
-          <el-tag :type="getActionTypeTag(action.type)" size="small">
-            {{ getActionTypeName(action.type) }}
-          </el-tag>
-        </div>
-        <div class="pl-24px">
-          <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
-            {{ getActionSummary(action) }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ActionFormData, IotRuleSceneActionTypeEnum } from '@/api/iot/rule/scene/scene.types'
-
-/** 执行器预览组件 */
-defineOptions({ name: 'ActionPreview' })
-
-interface Props {
-  actions: ActionFormData[]
-}
-
-const props = defineProps<Props>()
-
-// 执行器类型映射
-const actionTypeNames = {
-  [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: '属性设置',
-  [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: '服务调用',
-  [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: '触发告警',
-  [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: '恢复告警'
-}
-
-const actionTypeTags = {
-  [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
-  [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
-  [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
-  [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning'
-}
-
-// 工具函数
-const getActionTypeName = (type: number) => {
-  return actionTypeNames[type] || '未知类型'
-}
-
-const getActionTypeTag = (type: number) => {
-  return actionTypeTags[type] || 'info'
-}
-
-const getActionSummary = (action: ActionFormData) => {
-  if (action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER || action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER) {
-    return `告警配置: ${action.alertConfigId ? `配置ID ${action.alertConfigId}` : '未选择'}`
-  } else {
-    const paramsCount = action.params ? Object.keys(action.params).length : 0
-    return `设备控制: 产品${action.productId || '未选择'} 设备${action.deviceId || '未选择'} (${paramsCount}个参数)`
-  }
-}
-</script>
-
-
diff --git a/src/views/iot/rule/scene/form/previews/ConfigPreview.vue b/src/views/iot/rule/scene/form/previews/ConfigPreview.vue
deleted file mode 100644
index 3f7a690f..00000000
--- a/src/views/iot/rule/scene/form/previews/ConfigPreview.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- 配置预览组件 -->
-<!-- TODO @puhui999：应该暂时不用预览哈 -->
-<template>
-  <div class="w-full">
-    <div class="space-y-8px">
-      <div class="flex items-start gap-8px">
-        <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景名称：</span>
-        <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ formData.name || '未设置' }}</span>
-      </div>
-      <div class="flex items-start gap-8px">
-        <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景状态：</span>
-        <el-tag :type="formData.status === 0 ? 'success' : 'danger'" size="small">
-          {{ formData.status === 0 ? '启用' : '禁用' }}
-        </el-tag>
-      </div>
-      <div v-if="formData.description" class="flex items-start gap-8px">
-        <span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">场景描述：</span>
-        <span class="text-12px text-[var(--el-text-color-primary)] flex-1">{{ formData.description }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { RuleSceneFormData } from '@/api/iot/rule/scene/scene.types'
-
-/** 配置预览组件 */
-defineOptions({ name: 'ConfigPreview' })
-
-interface Props {
-  formData: RuleSceneFormData
-}
-
-defineProps<Props>()
-</script>
-
-
diff --git a/src/views/iot/rule/scene/form/previews/NextExecutionPreview.vue b/src/views/iot/rule/scene/form/previews/NextExecutionPreview.vue
deleted file mode 100644
index 2e79929b..00000000
--- a/src/views/iot/rule/scene/form/previews/NextExecutionPreview.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<!-- 下次执行时间预览组件 -->
-<template>
-  <div class="next-execution-preview">
-    <div class="preview-header">
-      <Icon icon="ep:timer" class="preview-icon" />
-      <span class="preview-title">执行时间预览</span>
-    </div>
-    
-    <div v-if="isValidCron" class="preview-content">
-      <div class="current-expression">
-        <span class="expression-label">CRON表达式：</span>
-        <code class="expression-code">{{ cronExpression }}</code>
-      </div>
-      
-      <div class="description">
-        <span class="description-label">执行规律：</span>
-        <span class="description-text">{{ cronDescription }}</span>
-      </div>
-      
-      <div class="next-times">
-        <span class="times-label">接下来5次执行时间：</span>
-        <div class="times-list">
-          <div
-            v-for="(time, index) in nextExecutionTimes"
-            :key="index"
-            class="time-item"
-          >
-            <Icon icon="ep:clock" class="time-icon" />
-            <span class="time-text">{{ time }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <div v-else class="preview-error">
-      <el-alert
-        title="CRON表达式无效"
-        description="请检查CRON表达式格式是否正确"
-        type="error"
-        :closable="false"
-        show-icon
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { validateCronExpression } from '../../utils/validation'
-
-/** 下次执行时间预览组件 */
-defineOptions({ name: 'NextExecutionPreview' })
-
-interface Props {
-  cronExpression?: string
-}
-
-const props = defineProps<Props>()
-
-// 计算属性
-const isValidCron = computed(() => {
-  return props.cronExpression ? validateCronExpression(props.cronExpression) : false
-})
-
-const cronDescription = computed(() => {
-  if (!isValidCron.value) return ''
-  
-  // 简单的CRON描述生成
-  const parts = props.cronExpression?.split(' ') || []
-  if (parts.length < 6) return '无法解析'
-  
-  const [second, minute, hour, day, month, week] = parts
-  
-  // 生成描述
-  let description = ''
-  
-  if (second === '0' && minute === '0' && hour === '12' && day === '*' && month === '*' && week === '?') {
-    description = '每天中午12点执行'
-  } else if (second === '0' && minute === '*' && hour === '*' && day === '*' && month === '*' && week === '?') {
-    description = '每分钟执行一次'
-  } else if (second === '0' && minute === '0' && hour === '*' && day === '*' && month === '*' && week === '?') {
-    description = '每小时执行一次'
-  } else {
-    description = '按自定义时间规律执行'
-  }
-  
-  return description
-})
-
-const nextExecutionTimes = computed(() => {
-  if (!isValidCron.value) return []
-  
-  // 模拟生成下次执行时间
-  const now = new Date()
-  const times = []
-  
-  for (let i = 1; i <= 5; i++) {
-    // 这里应该使用真实的CRON解析库来计算
-    // 暂时生成模拟时间
-    const nextTime = new Date(now.getTime() + i * 60 * 60 * 1000)
-    times.push(nextTime.toLocaleString('zh-CN', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit'
-    }))
-  }
-  
-  return times
-})
-</script>
-
-<style scoped>
-.next-execution-preview {
-  margin-top: 16px;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.preview-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.preview-icon {
-  color: var(--el-color-primary);
-  font-size: 16px;
-}
-
-.preview-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.preview-content {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.current-expression {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.expression-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  min-width: 80px;
-}
-
-.expression-code {
-  font-family: 'Courier New', monospace;
-  background: var(--el-fill-color-light);
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  color: var(--el-color-primary);
-}
-
-.description {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.description-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  min-width: 80px;
-}
-
-.description-text {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-}
-
-.next-times {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.times-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.times-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-left: 12px;
-}
-
-.time-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.time-icon {
-  color: var(--el-color-success);
-  font-size: 12px;
-}
-
-.time-text {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  font-family: 'Courier New', monospace;
-}
-
-.preview-error {
-  padding: 16px;
-}
-</style>
diff --git a/src/views/iot/rule/scene/form/previews/TriggerPreview.vue b/src/views/iot/rule/scene/form/previews/TriggerPreview.vue
deleted file mode 100644
index 2e255166..00000000
--- a/src/views/iot/rule/scene/form/previews/TriggerPreview.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<!-- 触发器预览组件 -->
-<template>
-  <div class="w-full">
-    <div v-if="triggers.length === 0" class="text-center py-20px">
-      <el-text type="info" size="small">暂无触发器配置</el-text>
-    </div>
-    <div v-else class="space-y-12px">
-      <div
-        v-for="(trigger, index) in triggers"
-        :key="index"
-        class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
-      >
-        <div class="flex items-center gap-8px mb-8px">
-          <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发器 {{ index + 1 }}</span>
-          <el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
-            {{ getTriggerTypeName(trigger.type) }}
-          </el-tag>
-        </div>
-        <div class="pl-24px">
-          <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">
-            {{ getTriggerSummary(trigger) }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { TriggerFormData, IotRuleSceneTriggerTypeEnum } from '@/api/iot/rule/scene/scene.types'
-
-/** 触发器预览组件 */
-defineOptions({ name: 'TriggerPreview' })
-
-interface Props {
-  triggers: TriggerFormData[]
-}
-
-const props = defineProps<Props>()
-
-// 触发器类型映射
-const triggerTypeNames = {
-  [IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE]: '设备状态变更',
-  [IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST]: '属性上报',
-  [IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST]: '事件上报',
-  [IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE]: '服务调用',
-  [IotRuleSceneTriggerTypeEnum.TIMER]: '定时触发'
-}
-
-const triggerTypeTags = {
-  [IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE]: 'warning',
-  [IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST]: 'primary',
-  [IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST]: 'success',
-  [IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE]: 'info',
-  [IotRuleSceneTriggerTypeEnum.TIMER]: 'danger'
-}
-
-// 工具函数
-const getTriggerTypeName = (type: number) => {
-  return triggerTypeNames[type] || '未知类型'
-}
-
-const getTriggerTypeTag = (type: number) => {
-  return triggerTypeTags[type] || 'info'
-}
-
-const getTriggerSummary = (trigger: TriggerFormData) => {
-  if (trigger.type === IotRuleSceneTriggerTypeEnum.TIMER) {
-    return `定时执行: ${trigger.cronExpression || '未配置'}`
-  } else if (trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE) {
-    return `设备状态变更: 产品${trigger.productId || '未选择'} 设备${trigger.deviceId || '未选择'}`
-  } else {
-    const conditionCount = trigger.conditionGroups?.reduce((total, group) => total + (group.conditions?.length || 0), 0) || 0
-    return `设备监控: 产品${trigger.productId || '未选择'} 设备${trigger.deviceId || '未选择'} (${conditionCount}个条件)`
-  }
-}
-</script>
-
-
diff --git a/src/views/iot/rule/scene/form/previews/ValidationResult.vue b/src/views/iot/rule/scene/form/previews/ValidationResult.vue
deleted file mode 100644
index f83739f9..00000000
--- a/src/views/iot/rule/scene/form/previews/ValidationResult.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<!-- 验证结果组件 -->
-<template>
-  <div class="validation-result">
-    <div v-if="!validationResult" class="no-validation">
-      <el-text type="info" size="small">
-        <Icon icon="ep:info-filled" />
-        点击"验证配置"按钮检查规则配置
-      </el-text>
-    </div>
-    <div v-else class="validation-content">
-      <el-alert
-        :title="validationResult.valid ? '配置验证通过' : '配置验证失败'"
-        :description="validationResult.message"
-        :type="validationResult.valid ? 'success' : 'error'"
-        :closable="false"
-        show-icon
-      >
-        <template #default>
-          <div v-if="validationResult.valid" class="success-content">
-            <p>{{ validationResult.message || '所有配置项验证通过，规则可以正常运行' }}</p>
-            <div class="success-tips">
-              <Icon icon="ep:check" class="tip-icon" />
-              <span class="tip-text">规则配置完整且有效</span>
-            </div>
-          </div>
-          <div v-else class="error-content">
-            <p>{{ validationResult.message || '配置验证失败，请检查以下问题' }}</p>
-            <div class="error-tips">
-              <div class="tip-item">
-                <Icon icon="ep:warning-filled" class="tip-icon error" />
-                <span class="tip-text">请确保所有必填项都已配置</span>
-              </div>
-              <div class="tip-item">
-                <Icon icon="ep:warning-filled" class="tip-icon error" />
-                <span class="tip-text">请检查触发器和执行器配置是否正确</span>
-              </div>
-            </div>
-          </div>
-        </template>
-      </el-alert>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-/** 验证结果组件 */
-defineOptions({ name: 'ValidationResult' })
-
-interface Props {
-  validationResult?: { valid: boolean; message?: string } | null
-}
-
-defineProps<Props>()
-</script>
-
-<style scoped>
-.validation-result {
-  width: 100%;
-}
-
-.no-validation {
-  text-align: center;
-  padding: 20px 0;
-}
-
-.validation-content {
-  width: 100%;
-}
-
-.success-content,
-.error-content {
-  margin-top: 8px;
-}
-
-.success-content p,
-.error-content p {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.success-tips,
-.error-tips {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tip-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.tip-icon {
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.tip-icon:not(.error) {
-  color: var(--el-color-success);
-}
-
-.tip-icon.error {
-  color: var(--el-color-danger);
-}
-
-.tip-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.success-tips .tip-text {
-  color: var(--el-color-success-dark-2);
-}
-
-.error-tips .tip-text {
-  color: var(--el-color-danger-dark-2);
-}
-</style>
diff --git a/src/views/iot/rule/scene/form/sections/ActionSection.vue b/src/views/iot/rule/scene/form/sections/ActionSection.vue
index 7d3fe8d6..c2707816 100644
--- a/src/views/iot/rule/scene/form/sections/ActionSection.vue
+++ b/src/views/iot/rule/scene/form/sections/ActionSection.vue
@@ -117,7 +117,6 @@ import {
   ActionFormData,
   IotRuleSceneActionTypeEnum as ActionTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
-import { createDefaultActionData } from '../../utils/transform'
 
 /** 执行器配置组件 */
 defineOptions({ name: 'ActionSection' })
@@ -136,6 +135,19 @@ const emit = defineEmits<Emits>()
 
 const actions = useVModel(props, 'actions', emit)
 
+/**
+ * 创建默认的执行器数据
+ */
+const createDefaultActionData = (): ActionFormData => {
+  return {
+    type: ActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
+    productId: undefined,
+    deviceId: undefined,
+    params: {},
+    alertConfigId: undefined
+  }
+}
+
 // 配置常量
 const maxActions = 5
 
diff --git a/src/views/iot/rule/scene/form/sections/PreviewSection.vue b/src/views/iot/rule/scene/form/sections/PreviewSection.vue
deleted file mode 100644
index d57fa046..00000000
--- a/src/views/iot/rule/scene/form/sections/PreviewSection.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<!-- 预览区域组件 -->
-<!-- TODO @puhui999：是不是不用这个哈？ -->
-<template>
-  <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
-    <template #header>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-8px">
-          <Icon icon="ep:view" class="text-[var(--el-color-primary)] text-18px" />
-          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">配置预览</span>
-        </div>
-        <div class="flex items-center gap-8px">
-          <el-button type="primary" size="small" @click="handleValidate" :loading="validating">
-            <Icon icon="ep:check" />
-            验证配置
-          </el-button>
-        </div>
-      </div>
-    </template>
-
-    <div class="p-0">
-      <!-- 基础信息预览 -->
-      <div class="mb-20px">
-        <div class="flex items-center gap-8px mb-12px">
-          <Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">基础信息</span>
-        </div>
-        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
-          <ConfigPreview :form-data="formData" />
-        </div>
-      </div>
-
-      <!-- 触发器预览 -->
-      <div class="mb-20px">
-        <div class="flex items-center gap-8px mb-12px">
-          <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发器配置</span>
-          <el-tag size="small" type="primary">{{ formData.triggers.length }}</el-tag>
-        </div>
-        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
-          <TriggerPreview :triggers="formData.triggers" />
-        </div>
-      </div>
-
-      <!-- 执行器预览 -->
-      <div class="mb-20px">
-        <div class="flex items-center gap-8px mb-12px">
-          <Icon icon="ep:setting" class="text-[var(--el-color-success)] text-16px" />
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">执行器配置</span>
-          <el-tag size="small" type="success">{{ formData.actions.length }}</el-tag>
-        </div>
-        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
-          <ActionPreview :actions="formData.actions" />
-        </div>
-      </div>
-
-      <!-- 验证结果 -->
-      <div class="mb-20px">
-        <div class="flex items-center gap-8px mb-12px">
-          <Icon icon="ep:circle-check" class="text-[var(--el-color-primary)] text-16px" />
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">验证结果</span>
-        </div>
-        <div class="p-12px bg-[var(--el-fill-color-light)] rounded-6px">
-          <ValidationResult :validation-result="validationResult" />
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script setup lang="ts">
-import ConfigPreview from '../previews/ConfigPreview.vue'
-import TriggerPreview from '../previews/TriggerPreview.vue'
-import ActionPreview from '../previews/ActionPreview.vue'
-import ValidationResult from '../previews/ValidationResult.vue'
-import { RuleSceneFormData } from '@/api/iot/rule/scene/scene.types'
-
-/** 预览区域组件 */
-defineOptions({ name: 'PreviewSection' })
-
-interface Props {
-  formData: RuleSceneFormData
-  validationResult?: { valid: boolean; message?: string } | null
-}
-
-interface Emits {
-  (e: 'validate'): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-// 状态
-const validating = ref(false)
-
-// 事件处理
-const handleValidate = async () => {
-  validating.value = true
-  try {
-    // 延迟一下模拟验证过程
-    await new Promise((resolve) => setTimeout(resolve, 500))
-    emit('validate')
-  } finally {
-    validating.value = false
-  }
-}
-</script>
-
-
diff --git a/src/views/iot/rule/scene/form/sections/TriggerSection.vue b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
index e16d702e..3f05ff6e 100644
--- a/src/views/iot/rule/scene/form/sections/TriggerSection.vue
+++ b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
@@ -119,7 +119,6 @@ import {
   TriggerFormData,
   IotRuleSceneTriggerTypeEnum as TriggerTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
-import { createDefaultTriggerData } from '../../utils/transform'
 
 /** 触发器配置组件 */
 defineOptions({ name: 'TriggerSection' })
@@ -138,6 +137,22 @@ const emit = defineEmits<Emits>()
 
 const triggers = useVModel(props, 'triggers', emit)
 
+/**
+ * 创建默认的触发器数据
+ */
+const createDefaultTriggerData = (): TriggerFormData => {
+  return {
+    type: TriggerTypeEnum.DEVICE_PROPERTY_POST, // 默认为设备属性上报
+    productId: undefined,
+    deviceId: undefined,
+    identifier: undefined,
+    operator: undefined,
+    value: undefined,
+    cronExpression: undefined,
+    conditionGroups: []
+  }
+}
+
 // 配置常量
 const maxTriggers = 5
 
diff --git a/src/views/iot/rule/scene/index.vue b/src/views/iot/rule/scene/index.vue
index 3f6e175a..551e64f3 100644
--- a/src/views/iot/rule/scene/index.vue
+++ b/src/views/iot/rule/scene/index.vue
@@ -35,7 +35,6 @@
             class="!w-240px"
           />
         </el-form-item>
-        <!-- TODO @puhui999：字典 -->
         <el-form-item label="规则状态">
           <el-select
             v-model="queryParams.status"
@@ -43,8 +42,12 @@
             clearable
             class="!w-240px"
           >
-            <el-option label="启用" :value="0" />
-            <el-option label="禁用" :value="1" />
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -61,7 +64,6 @@
     </el-card>
 
     <!-- 统计卡片 -->
-    <!-- TODO @puhui999：这种需要服用的 stats-content、stats-info 的属性，到底 unocss 好，还是现有的 style css 好~ -->
     <el-row :gutter="16" class="mb-16px">
       <el-col :span="6">
         <el-card class="cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-2px" shadow="hover">
@@ -125,14 +127,7 @@
           <template #default="{ row }">
             <div class="flex items-center gap-8px">
               <span class="font-500 text-[#303133]">{{ row.name }}</span>
-              <!-- TODO @puhui999：字典 -->
-              <el-tag
-                :type="row.status === 0 ? 'success' : 'danger'"
-                size="small"
-                class="flex-shrink-0"
-              >
-                {{ row.status === 0 ? '启用' : '禁用' }}
-              </el-tag>
+              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
             </div>
             <div v-if="row.description" class="text-12px text-[#909399] mt-4px">
               {{ row.description }}
@@ -169,7 +164,6 @@
             </div>
           </template>
         </el-table-column>
-        <!-- TODO @puhui999：貌似要新增一个字段？ -->
         <el-table-column label="最近触发" prop="lastTriggeredTime" width="180">
           <template #default="{ row }">
             <span v-if="row.lastTriggeredTime">
@@ -185,7 +179,6 @@
         </el-table-column>
         <el-table-column label="操作" width="200" fixed="right">
           <template #default="{ row }">
-            <!-- TODO @puhui999：间隙大了点 -->
             <div class="flex gap-8px">
               <el-button type="primary" link @click="handleEdit(row)">
                 <Icon icon="ep:edit" />
@@ -197,10 +190,9 @@
                 @click="handleToggleStatus(row)"
               >
                 <Icon :icon="row.status === 0 ? 'ep:video-pause' : 'ep:video-play'" />
-                <!-- TODO @puhui999：翻译，字典 -->
                 {{ row.status === 0 ? '禁用' : '启用' }}
               </el-button>
-              <el-button type="danger" link @click="handleDelete(row)">
+              <el-button type="danger" link @click="handleDelete(row.id)">
                 <Icon icon="ep:delete" />
                 删除
               </el-button>
@@ -247,17 +239,17 @@
 </template>
 
 <script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { ContentWrap } from '@/components/ContentWrap'
 import RuleSceneForm from './form/RuleSceneForm.vue'
 import { IotRuleScene } from '@/api/iot/rule/scene/scene.types'
-import { getRuleSceneSummary } from './utils/transform'
 import { formatDate } from '@/utils/formatTime'
 
 /** 场景联动规则管理页面 */
 defineOptions({ name: 'IoTSceneRule' })
 
-const message = useMessage()
-// const { t } = useI18n() // TODO @puhui999：可以删除
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
 
 // 查询参数
 const queryParams = reactive({
@@ -267,12 +259,11 @@ const queryParams = reactive({
   status: undefined as number | undefined
 })
 
-// 数据状态
-// TODO @puhui999：变量名，和别的页面保持一致哈
-const loading = ref(true)
-const list = ref<IotRuleScene[]>([])
-const total = ref(0)
-const selectedRows = ref<IotRuleScene[]>([])
+const loading = ref(true) // 列表的加载中
+const list = ref<IotRuleScene[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const selectedRows = ref<IotRuleScene[]>([]) // 选中的行数据
+const queryFormRef = ref() // 搜索的表单
 
 // 表单状态
 const formVisible = ref(false)
@@ -286,8 +277,96 @@ const statistics = ref({
   triggered: 0
 })
 
-// 获取列表数据
-// TODO @puhui999：接入
+/**
+ * 格式化CRON表达式显示
+ */
+const formatCronExpression = (cron: string): string => {
+  if (!cron) return ''
+
+  // 简单的CRON表达式解析和格式化
+  const parts = cron.trim().split(' ')
+  if (parts.length < 5) return cron
+
+  const [second, minute, hour] = parts
+
+  // 构建可读的描述
+  let description = ''
+
+  if (second === '0' && minute === '0') {
+    if (hour === '*') {
+      description = '每小时'
+    } else if (hour.includes('/')) {
+      const interval = hour.split('/')[1]
+      description = `每${interval}小时`
+    } else {
+      description = `每天${hour}点`
+    }
+  } else if (second === '0') {
+    if (minute === '*') {
+      description = '每分钟'
+    } else if (minute.includes('/')) {
+      const interval = minute.split('/')[1]
+      description = `每${interval}分钟`
+    } else {
+      description = `每小时第${minute}分钟`
+    }
+  } else {
+    if (second === '*') {
+      description = '每秒'
+    } else if (second.includes('/')) {
+      const interval = second.split('/')[1]
+      description = `每${interval}秒`
+    }
+  }
+
+  return description || cron
+}
+
+/**
+ * 获取规则摘要信息
+ */
+const getRuleSceneSummary = (rule: IotRuleScene) => {
+  const triggerSummary =
+    rule.triggers?.map((trigger) => {
+      switch (trigger.type) {
+        case 1:
+          return `设备状态变更 (${trigger.deviceNames?.length || 0}个设备)`
+        case 2:
+          return `属性上报 (${trigger.deviceNames?.length || 0}个设备)`
+        case 3:
+          return `事件上报 (${trigger.deviceNames?.length || 0}个设备)`
+        case 4:
+          return `服务调用 (${trigger.deviceNames?.length || 0}个设备)`
+        case 100:
+          return `定时触发 (${formatCronExpression(trigger.cronExpression || '')})`
+        default:
+          return '未知触发类型'
+      }
+    }) || []
+
+  const actionSummary =
+    rule.actions?.map((action) => {
+      switch (action.type) {
+        case 1:
+          return `设备属性设置 (${action.deviceControl?.deviceNames?.length || 0}个设备)`
+        case 2:
+          return `设备服务调用 (${action.deviceControl?.deviceNames?.length || 0}个设备)`
+        case 100:
+          return '发送告警通知'
+        case 101:
+          return '发送邮件通知'
+        default:
+          return '未知执行类型'
+      }
+    }) || []
+
+  return {
+    triggerSummary: triggerSummary.join(', ') || '无触发器',
+    actionSummary: actionSummary.join(', ') || '无执行器'
+  }
+}
+
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -355,9 +434,7 @@ const getList = async () => {
   }
 }
 
-// TODO @puhui999：方法注释，使用 /** */ 风格
-
-// 更新统计数据
+/** 更新统计数据 */
 const updateStatistics = () => {
   statistics.value = {
     total: list.value.length,
@@ -377,19 +454,20 @@ const getActionSummary = (rule: IotRuleScene) => {
   return getRuleSceneSummary(rule).actionSummary
 }
 
-// 事件处理
+/** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
 
+/** 重置按钮操作 */
 const resetQuery = () => {
   queryParams.name = ''
   queryParams.status = undefined
   handleQuery()
 }
 
-// TODO @puhui999：这个要不还是使用 open 方式，只是弹出的右侧；
+/** 添加/修改操作 */
 const handleAdd = () => {
   currentRule.value = undefined
   formVisible.value = true
@@ -400,78 +478,76 @@ const handleEdit = (row: IotRuleScene) => {
   formVisible.value = true
 }
 
-// TODO @puhui999：handleDelete、handleToggleStatus 保持和别的模块一致哇？
-const handleDelete = async (row: IotRuleScene) => {
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
   try {
-    await ElMessageBox.confirm('确定要删除这个规则吗？', '提示', {
-      type: 'warning'
-    })
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    // await RuleSceneApi.deleteRuleScene(id)
 
-    // 这里应该调用删除API
-    message.success('删除成功')
-    getList()
-  } catch (error) {
-    // 用户取消删除
-  }
+    // 模拟删除操作
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
 }
 
+/** 修改状态 */
 const handleToggleStatus = async (row: IotRuleScene) => {
   try {
-    const newStatus = row.status === 0 ? 1 : 0
-    const action = newStatus === 0 ? '启用' : '禁用'
+    // 修改状态的二次确认
+    const text = row.status === 0 ? '禁用' : '启用'
+    await message.confirm('确认要' + text + '"' + row.name + '"吗?')
+    // 发起修改状态
+    // await RuleSceneApi.updateRuleSceneStatus(row.id, row.status === 0 ? 1 : 0)
 
-    await ElMessageBox.confirm(`确定要${action}这个规则吗？`, '提示', {
-      type: 'warning'
-    })
-
-    // 这里应该调用状态切换API
-    row.status = newStatus
-    message.success(`${action}成功`)
+    // 模拟状态切换
+    row.status = row.status === 0 ? 1 : 0
+    message.success(text + '成功')
+    // 刷新统计
     updateStatistics()
-  } catch (error) {
-    // 用户取消操作
+  } catch {
+    // 取消后，进行恢复按钮
+    row.status = row.status === 0 ? 1 : 0
   }
 }
 
+/** 多选框选中数据 */
 const handleSelectionChange = (selection: IotRuleScene[]) => {
   selectedRows.value = selection
 }
 
-// TODO @puhui999：batch 操作的逻辑，要不和其它 UI 界面保持一致，或者相对一致哈；
+/** 批量启用操作 */
 const handleBatchEnable = async () => {
   try {
-    await ElMessageBox.confirm(`确定要启用选中的 ${selectedRows.value.length} 个规则吗？`, '提示', {
-      type: 'warning'
-    })
-
+    await message.confirm(`确定要启用选中的 ${selectedRows.value.length} 个规则吗？`)
     // 这里应该调用批量启用API
+    // await RuleSceneApi.updateRuleSceneStatusBatch(selectedRows.value.map(row => row.id), 0)
+
+    // 模拟批量启用
     selectedRows.value.forEach((row) => {
       row.status = 0
     })
-
     message.success('批量启用成功')
     updateStatistics()
-  } catch (error) {
-    // 用户取消操作
-  }
+  } catch {}
 }
 
+/** 批量禁用操作 */
 const handleBatchDisable = async () => {
   try {
-    await ElMessageBox.confirm(`确定要禁用选中的 ${selectedRows.value.length} 个规则吗？`, '提示', {
-      type: 'warning'
-    })
-
+    await message.confirm(`确定要禁用选中的 ${selectedRows.value.length} 个规则吗？`)
     // 这里应该调用批量禁用API
+    // await RuleSceneApi.updateRuleSceneStatusBatch(selectedRows.value.map(row => row.id), 1)
+
+    // 模拟批量禁用
     selectedRows.value.forEach((row) => {
       row.status = 1
     })
-
     message.success('批量禁用成功')
     updateStatistics()
-  } catch (error) {
-    // 用户取消操作
-  }
+  } catch {}
 }
 
 const handleBatchDelete = async () => {
diff --git a/src/views/iot/rule/scene/utils/errorHandler.ts b/src/views/iot/rule/scene/utils/errorHandler.ts
deleted file mode 100644
index 81efa1b5..00000000
--- a/src/views/iot/rule/scene/utils/errorHandler.ts
+++ /dev/null
@@ -1,550 +0,0 @@
-/**
- * IoT 场景联动错误处理和用户反馈工具
- */
-
-// TODO @puhui999：这个貌似用不到？
-
-import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
-
-// 错误类型枚举
-export enum ErrorType {
-  VALIDATION = 'validation',
-  NETWORK = 'network',
-  BUSINESS = 'business',
-  SYSTEM = 'system',
-  PERMISSION = 'permission'
-}
-
-// 错误级别枚举
-export enum ErrorLevel {
-  INFO = 'info',
-  WARNING = 'warning',
-  ERROR = 'error',
-  CRITICAL = 'critical'
-}
-
-// 错误信息接口
-export interface ErrorInfo {
-  type: ErrorType
-  level: ErrorLevel
-  code?: string
-  message: string
-  details?: any
-  timestamp?: Date
-  context?: string
-}
-
-// 用户反馈选项
-export interface FeedbackOptions {
-  showMessage?: boolean
-  showNotification?: boolean
-  showDialog?: boolean
-  autoClose?: boolean
-  duration?: number
-  confirmText?: string
-  cancelText?: string
-}
-
-/**
- * 错误处理器类
- */
-export class SceneRuleErrorHandler {
-  private static instance: SceneRuleErrorHandler
-  private errorLog: ErrorInfo[] = []
-  private maxLogSize = 100
-
-  private constructor() {}
-
-  static getInstance(): SceneRuleErrorHandler {
-    if (!SceneRuleErrorHandler.instance) {
-      SceneRuleErrorHandler.instance = new SceneRuleErrorHandler()
-    }
-    return SceneRuleErrorHandler.instance
-  }
-
-  /**
-   * 处理错误
-   */
-  handleError(error: ErrorInfo, options: FeedbackOptions = {}): Promise<boolean> {
-    // 记录错误日志
-    this.logError(error)
-
-    // 根据错误类型和级别选择处理方式
-    return this.processError(error, options)
-  }
-
-  /**
-   * 记录错误日志
-   */
-  private logError(error: ErrorInfo): void {
-    const errorWithTimestamp = {
-      ...error,
-      timestamp: new Date()
-    }
-
-    this.errorLog.unshift(errorWithTimestamp)
-
-    // 限制日志大小
-    if (this.errorLog.length > this.maxLogSize) {
-      this.errorLog = this.errorLog.slice(0, this.maxLogSize)
-    }
-
-    // 开发环境下打印到控制台
-    if (import.meta.env.DEV) {
-      console.error('[SceneRule Error]', errorWithTimestamp)
-    }
-  }
-
-  /**
-   * 处理错误
-   */
-  private async processError(error: ErrorInfo, options: FeedbackOptions): Promise<boolean> {
-    const defaultOptions: FeedbackOptions = {
-      showMessage: true,
-      showNotification: false,
-      showDialog: false,
-      autoClose: true,
-      duration: 3000,
-      confirmText: '确定',
-      cancelText: '取消'
-    }
-
-    const finalOptions = { ...defaultOptions, ...options }
-
-    try {
-      // 根据错误级别决定反馈方式
-      switch (error.level) {
-        case ErrorLevel.INFO:
-          return this.handleInfoError(error, finalOptions)
-        case ErrorLevel.WARNING:
-          return this.handleWarningError(error, finalOptions)
-        case ErrorLevel.ERROR:
-          return this.handleNormalError(error, finalOptions)
-        case ErrorLevel.CRITICAL:
-          return this.handleCriticalError(error, finalOptions)
-        default:
-          return this.handleNormalError(error, finalOptions)
-      }
-    } catch (e) {
-      console.error('Error handler failed:', e)
-      return false
-    }
-  }
-
-  /**
-   * 处理信息级错误
-   */
-  private async handleInfoError(error: ErrorInfo, options: FeedbackOptions): Promise<boolean> {
-    if (options.showMessage) {
-      ElMessage.info({
-        message: error.message,
-        duration: options.duration,
-        showClose: !options.autoClose
-      })
-    }
-    return true
-  }
-
-  /**
-   * 处理警告级错误
-   */
-  private async handleWarningError(error: ErrorInfo, options: FeedbackOptions): Promise<boolean> {
-    if (options.showNotification) {
-      ElNotification.warning({
-        title: '警告',
-        message: error.message,
-        duration: options.duration
-      })
-    } else if (options.showMessage) {
-      ElMessage.warning({
-        message: error.message,
-        duration: options.duration,
-        showClose: !options.autoClose
-      })
-    }
-    return true
-  }
-
-  /**
-   * 处理普通错误
-   */
-  private async handleNormalError(error: ErrorInfo, options: FeedbackOptions): Promise<boolean> {
-    if (options.showDialog) {
-      try {
-        await ElMessageBox.alert(error.message, '错误', {
-          type: 'error',
-          confirmButtonText: options.confirmText
-        })
-        return true
-      } catch (e) {
-        return false
-      }
-    } else if (options.showNotification) {
-      ElNotification.error({
-        title: '错误',
-        message: error.message,
-        duration: options.duration
-      })
-    } else if (options.showMessage) {
-      ElMessage.error({
-        message: error.message,
-        duration: options.duration,
-        showClose: !options.autoClose
-      })
-    }
-    return true
-  }
-
-  /**
-   * 处理严重错误
-   */
-  private async handleCriticalError(error: ErrorInfo, _: FeedbackOptions): Promise<boolean> {
-    try {
-      await ElMessageBox.confirm(`${error.message}\n\n是否重新加载页面？`, '严重错误', {
-        type: 'error',
-        confirmButtonText: '重新加载',
-        cancelButtonText: '继续使用'
-      })
-      // 用户选择重新加载
-      window.location.reload()
-      return true
-    } catch (e) {
-      // 用户选择继续使用
-      return false
-    }
-  }
-
-  /**
-   * 获取错误日志
-   */
-  getErrorLog(): ErrorInfo[] {
-    return [...this.errorLog]
-  }
-
-  /**
-   * 清空错误日志
-   */
-  clearErrorLog(): void {
-    this.errorLog = []
-  }
-
-  /**
-   * 导出错误日志
-   */
-  exportErrorLog(): string {
-    return JSON.stringify(this.errorLog, null, 2)
-  }
-}
-
-/**
- * 预定义的错误处理函数
- */
-export const errorHandler = SceneRuleErrorHandler.getInstance()
-
-/**
- * 验证错误处理
- */
-export function handleValidationError(message: string, context?: string): Promise<boolean> {
-  return errorHandler.handleError(
-    {
-      type: ErrorType.VALIDATION,
-      level: ErrorLevel.WARNING,
-      message,
-      context
-    },
-    {
-      showMessage: true,
-      duration: 4000
-    }
-  )
-}
-
-/**
- * 网络错误处理
- */
-export function handleNetworkError(error: any, context?: string): Promise<boolean> {
-  let message = '网络请求失败'
-
-  if (error?.response?.status) {
-    switch (error.response.status) {
-      case 400:
-        message = '请求参数错误'
-        break
-      case 401:
-        message = '未授权，请重新登录'
-        break
-      case 403:
-        message = '权限不足'
-        break
-      case 404:
-        message = '请求的资源不存在'
-        break
-      case 500:
-        message = '服务器内部错误'
-        break
-      case 502:
-        message = '网关错误'
-        break
-      case 503:
-        message = '服务暂不可用'
-        break
-      default:
-        message = `网络错误 (${error.response.status})`
-    }
-  } else if (error?.message) {
-    message = error.message
-  }
-
-  return errorHandler.handleError(
-    {
-      type: ErrorType.NETWORK,
-      level: ErrorLevel.ERROR,
-      code: error?.response?.status?.toString(),
-      message,
-      details: error,
-      context
-    },
-    {
-      showMessage: true,
-      duration: 5000
-    }
-  )
-}
-
-/**
- * 业务逻辑错误处理
- */
-export function handleBusinessError(
-  message: string,
-  code?: string,
-  context?: string
-): Promise<boolean> {
-  return errorHandler.handleError(
-    {
-      type: ErrorType.BUSINESS,
-      level: ErrorLevel.ERROR,
-      code,
-      message,
-      context
-    },
-    {
-      showMessage: true,
-      duration: 4000
-    }
-  )
-}
-
-/**
- * 系统错误处理
- */
-export function handleSystemError(error: any, context?: string): Promise<boolean> {
-  const message = error?.message || '系统发生未知错误'
-
-  return errorHandler.handleError(
-    {
-      type: ErrorType.SYSTEM,
-      level: ErrorLevel.CRITICAL,
-      message,
-      details: error,
-      context
-    },
-    {
-      showDialog: true
-    }
-  )
-}
-
-/**
- * 权限错误处理
- */
-export function handlePermissionError(
-  message: string = '权限不足',
-  context?: string
-): Promise<boolean> {
-  return errorHandler.handleError(
-    {
-      type: ErrorType.PERMISSION,
-      level: ErrorLevel.WARNING,
-      message,
-      context
-    },
-    {
-      showNotification: true,
-      duration: 5000
-    }
-  )
-}
-
-/**
- * 成功反馈
- */
-export function showSuccess(message: string, duration: number = 3000): void {
-  ElMessage.success({
-    message,
-    duration,
-    showClose: false
-  })
-}
-
-/**
- * 信息反馈
- */
-export function showInfo(message: string, duration: number = 3000): void {
-  ElMessage.info({
-    message,
-    duration,
-    showClose: false
-  })
-}
-
-/**
- * 警告反馈
- */
-export function showWarning(message: string, duration: number = 4000): void {
-  ElMessage.warning({
-    message,
-    duration,
-    showClose: true
-  })
-}
-
-/**
- * 确认对话框
- */
-export function showConfirm(
-  message: string,
-  title: string = '确认',
-  options: {
-    type?: 'info' | 'success' | 'warning' | 'error'
-    confirmText?: string
-    cancelText?: string
-  } = {}
-): Promise<boolean> {
-  const defaultOptions = {
-    type: 'warning' as const,
-    confirmText: '确定',
-    cancelText: '取消'
-  }
-
-  const finalOptions = { ...defaultOptions, ...options }
-
-  return ElMessageBox.confirm(message, title, {
-    type: finalOptions.type,
-    confirmButtonText: finalOptions.confirmText,
-    cancelButtonText: finalOptions.cancelText
-  })
-    .then(() => true)
-    .catch(() => false)
-}
-
-/**
- * 加载状态管理
- */
-export class LoadingManager {
-  private loadingStates = new Map<string, boolean>()
-  private loadingInstances = new Map<string, any>()
-
-  /**
-   * 开始加载
-   */
-  startLoading(key: string, _: string = '加载中...'): void {
-    if (this.loadingStates.get(key)) {
-      return // 已经在加载中
-    }
-
-    this.loadingStates.set(key, true)
-
-    // 这里可以根据需要创建全局加载实例
-    // const loading = ElLoading.service({
-    //   lock: true,
-    //   text,
-    //   background: 'rgba(0, 0, 0, 0.7)'
-    // })
-    // this.loadingInstances.set(key, loading)
-  }
-
-  /**
-   * 结束加载
-   */
-  stopLoading(key: string): void {
-    this.loadingStates.set(key, false)
-
-    const loading = this.loadingInstances.get(key)
-    if (loading) {
-      loading.close()
-      this.loadingInstances.delete(key)
-    }
-  }
-
-  /**
-   * 检查是否在加载中
-   */
-  isLoading(key: string): boolean {
-    return this.loadingStates.get(key) || false
-  }
-
-  /**
-   * 清空所有加载状态
-   */
-  clearAll(): void {
-    this.loadingInstances.forEach((loading) => loading.close())
-    this.loadingStates.clear()
-    this.loadingInstances.clear()
-  }
-}
-
-export const loadingManager = new LoadingManager()
-
-/**
- * 异步操作包装器，自动处理错误和加载状态
- */
-export async function withErrorHandling<T>(
-  operation: () => Promise<T>,
-  options: {
-    loadingKey?: string
-    loadingText?: string
-    context?: string
-    showSuccess?: boolean
-    successMessage?: string
-    errorHandler?: (error: any) => Promise<boolean>
-  } = {}
-): Promise<T | null> {
-  const {
-    loadingKey,
-    loadingText = '处理中...',
-    context,
-    showSuccess = false,
-    // successMessage = '操作成功',
-    errorHandler: customErrorHandler
-  } = options
-
-  try {
-    // 开始加载
-    if (loadingKey) {
-      loadingManager.startLoading(loadingKey, loadingText)
-    }
-
-    // 执行操作
-    const result = await operation()
-
-    // 显示成功消息
-    if (showSuccess) {
-      // showSuccess(successMessage)
-    }
-
-    return result
-  } catch (error) {
-    // 使用自定义错误处理器或默认处理器
-    if (customErrorHandler) {
-      await customErrorHandler(error)
-    } else {
-      await handleNetworkError(error, context)
-    }
-    return null
-  } finally {
-    // 结束加载
-    if (loadingKey) {
-      loadingManager.stopLoading(loadingKey)
-    }
-  }
-}
diff --git a/src/views/iot/rule/scene/utils/transform.ts b/src/views/iot/rule/scene/utils/transform.ts
deleted file mode 100644
index 4d9d6796..00000000
--- a/src/views/iot/rule/scene/utils/transform.ts
+++ /dev/null
@@ -1,413 +0,0 @@
-/**
- * IoT 场景联动数据转换工具函数
- */
-import {
-  IotRuleScene,
-  TriggerConfig,
-  ActionConfig,
-  RuleSceneFormData,
-  TriggerFormData,
-  ActionFormData
-} from '@/api/iot/rule/scene/scene.types'
-import { generateUUID } from '@/utils'
-
-// TODO @puhui999：这些是不是放到对应的界面，会好一丢丢哈？
-
-/**
- * 创建默认的表单数据
- */
-export function createDefaultFormData(): RuleSceneFormData {
-  return {
-    name: '',
-    description: '',
-    status: 0, // TODO @puhui999：枚举值
-    triggers: [],
-    actions: []
-  }
-}
-
-/**
- * 创建默认的触发器数据
- */
-export function createDefaultTriggerData(): TriggerFormData {
-  return {
-    type: 2, // 默认为属性上报 TODO @puhui999：枚举值
-    productId: undefined,
-    deviceId: undefined,
-    identifier: undefined,
-    operator: undefined,
-    value: undefined,
-    cronExpression: undefined,
-    conditionGroups: []
-  }
-}
-
-/**
- * 创建默认的执行器数据
- */
-export function createDefaultActionData(): ActionFormData {
-  return {
-    type: 1, // 默认为属性设置 TODO @puhui999：枚举值
-    productId: undefined,
-    deviceId: undefined,
-    params: {},
-    alertConfigId: undefined
-  }
-}
-
-/**
- * 将表单数据转换为API请求格式
- */
-export function transformFormToApi(formData: RuleSceneFormData): IotRuleScene {
-  // TODO @puhui999：这个关注下
-  // 这里需要根据实际 API 结构进行转换
-  // 暂时返回基本结构
-  return {
-    id: formData.id,
-    name: formData.name,
-    description: formData.description,
-    status: Number(formData.status),
-    triggers: [], // 需要根据实际API结构转换
-    actions: [] // 需要根据实际API结构转换
-  } as IotRuleScene
-}
-
-/**
- * 将 API 响应数据转换为表单格式
- */
-export function transformApiToForm(apiData: IotRuleScene): RuleSceneFormData {
-  return {
-    ...apiData,
-    status: Number(apiData.status), // 确保状态为数字类型
-    triggers:
-      apiData.triggers?.map((trigger) => ({
-        ...trigger,
-        type: Number(trigger.type),
-        // 为每个触发器添加唯一标识符，解决组件索引重用问题
-        key: generateUUID()
-      })) || [],
-    actions:
-      apiData.actions?.map((action) => ({
-        ...action,
-        type: Number(action.type),
-        // 为每个执行器添加唯一标识符，解决组件索引重用问题
-        key: generateUUID()
-      })) || []
-  }
-}
-
-// TODO @puhui999：貌似没用到；
-/**
- * 创建默认的触发器配置
- */
-export function createDefaultTriggerConfig(type?: number): TriggerConfig {
-  const baseConfig: TriggerConfig = {
-    key: generateUUID(),
-    type: type || 2, // 默认为物模型属性上报
-    productKey: '',
-    deviceNames: [],
-    conditions: []
-  }
-
-  // 定时触发的默认配置
-  if (type === 100) {
-    return {
-      ...baseConfig,
-      cronExpression: '0 0 12 * * ?', // 默认每天中午12点
-      productKey: undefined,
-      deviceNames: undefined,
-      conditions: undefined
-    }
-  }
-
-  // 设备状态变更的默认配置
-  if (type === 1) {
-    return {
-      ...baseConfig,
-      conditions: undefined // 设备状态变更不需要条件
-    }
-  }
-
-  // 其他设备触发类型的默认配置
-  return {
-    ...baseConfig,
-    conditions: [
-      {
-        type: 'property',
-        identifier: 'set',
-        parameters: [
-          {
-            identifier: '',
-            operator: '=',
-            value: ''
-          }
-        ]
-      }
-    ]
-  }
-}
-
-// TODO @puhui999：貌似没用到；
-/**
- * 创建默认的执行器配置
- */
-export function createDefaultActionConfig(type?: number): ActionConfig {
-  const baseConfig: ActionConfig = {
-    key: generateUUID(),
-    type: type || 1 // 默认为设备属性设置
-  }
-
-  // 告警相关的默认配置
-  if (type === 100 || type === 101) {
-    return {
-      ...baseConfig,
-      alertConfigId: undefined
-    }
-  }
-
-  // 设备控制的默认配置
-  return {
-    ...baseConfig,
-    deviceControl: {
-      productKey: '',
-      deviceNames: [],
-      type: 'property',
-      identifier: 'set',
-      params: {}
-    }
-  }
-}
-
-// TODO @puhui999：全局已经有类似的
-/**
- * 深度克隆对象（用于避免引用问题）
- */
-export function deepClone<T>(obj: T): T {
-  if (obj === null || typeof obj !== 'object') {
-    return obj
-  }
-
-  if (obj instanceof Date) {
-    return new Date(obj.getTime()) as unknown as T
-  }
-
-  if (obj instanceof Array) {
-    return obj.map((item) => deepClone(item)) as unknown as T
-  }
-
-  if (typeof obj === 'object') {
-    const clonedObj = {} as T
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        clonedObj[key] = deepClone(obj[key])
-      }
-    }
-    return clonedObj
-  }
-
-  return obj
-}
-
-// TODO @puhui999：貌似没用到；
-/**
- * 清理空值和无效数据
- */
-export function cleanFormData(data: IotRuleScene): IotRuleScene {
-  const cleaned = deepClone(data)
-
-  // 清理触发器数据
-  cleaned.triggers =
-    cleaned.triggers?.filter((trigger) => {
-      // 移除类型为空的触发器
-      if (!trigger.type) return false
-
-      // 定时触发器必须有CRON表达式
-      if (trigger.type === 100 && !trigger.cronExpression) return false
-
-      // 设备触发器必须有产品和设备
-      if (trigger.type !== 100 && (!trigger.productKey || !trigger.deviceNames?.length))
-        return false
-
-      return true
-    }) || []
-
-  // 清理执行器数据
-  cleaned.actions =
-    cleaned.actions?.filter((action) => {
-      // 移除类型为空的执行器
-      if (!action.type) return false
-
-      // 告警类型必须有告警配置ID
-      if ((action.type === 100 || action.type === 101) && !action.alertConfigId) return false
-
-      // 设备控制类型必须有完整的设备控制配置
-      if (
-        (action.type === 1 || action.type === 2) &&
-        (!action.deviceControl?.productKey ||
-          !action.deviceControl?.deviceNames?.length ||
-          !action.deviceControl?.identifier ||
-          !action.deviceControl?.params ||
-          Object.keys(action.deviceControl.params).length === 0)
-      ) {
-        return false
-      }
-
-      return true
-    }) || []
-
-  return cleaned
-}
-
-/**
- * 格式化CRON表达式显示
- */
-export function formatCronExpression(cron: string): string {
-  if (!cron) return ''
-
-  // 简单的CRON表达式解析和格式化
-  const parts = cron.trim().split(' ')
-  if (parts.length < 5) return cron
-
-  const [second, minute, hour] = parts
-
-  // 构建可读的描述
-  let description = ''
-
-  if (second === '0' && minute === '0') {
-    if (hour === '*') {
-      description = '每小时'
-    } else if (hour.includes('/')) {
-      const interval = hour.split('/')[1]
-      description = `每${interval}小时`
-    } else {
-      description = `每天${hour}点`
-    }
-  } else if (second === '0') {
-    if (minute === '*') {
-      description = '每分钟'
-    } else if (minute.includes('/')) {
-      const interval = minute.split('/')[1]
-      description = `每${interval}分钟`
-    } else {
-      description = `每小时第${minute}分钟`
-    }
-  } else {
-    if (second === '*') {
-      description = '每秒'
-    } else if (second.includes('/')) {
-      const interval = second.split('/')[1]
-      description = `每${interval}秒`
-    }
-  }
-
-  return description || cron
-}
-
-// TODO @puhui999：貌似没用到；
-/**
- * 验证并修复数据结构
- */
-export function validateAndFixData(data: IotRuleScene): IotRuleScene {
-  const fixed = deepClone(data)
-
-  // 确保必要字段存在
-  if (!fixed.triggers) fixed.triggers = []
-  if (!fixed.actions) fixed.actions = []
-
-  // 修复触发器数据
-  fixed.triggers = fixed.triggers.map((trigger) => {
-    const fixedTrigger = { ...trigger }
-
-    // 确保有key
-    if (!fixedTrigger.key) {
-      fixedTrigger.key = generateUUID()
-    }
-    // 定时触发器不需要产品和设备信息
-    if (fixedTrigger.type === 100) {
-      fixedTrigger.productKey = undefined
-      fixedTrigger.deviceNames = undefined
-      fixedTrigger.conditions = undefined
-    }
-
-    return fixedTrigger
-  })
-
-  // 修复执行器数据
-  fixed.actions = fixed.actions.map((action) => {
-    const fixedAction = { ...action }
-
-    // 确保有key
-    if (!fixedAction.key) {
-      fixedAction.key = generateUUID()
-    }
-
-    // 确保类型为数字
-    if (typeof fixedAction.type === 'string') {
-      fixedAction.type = Number(fixedAction.type)
-    }
-
-    // 修复设备控制参数字段名
-    if (fixedAction.deviceControl && 'data' in fixedAction.deviceControl) {
-      fixedAction.deviceControl.params = (fixedAction.deviceControl as any).data
-      delete (fixedAction.deviceControl as any).data
-    }
-
-    return fixedAction
-  })
-
-  return fixed
-}
-
-// TODO @puhui999：貌似没用到；
-/**
- * 比较两个场景联动规则是否相等（忽略key字段）
- */
-export function isRuleSceneEqual(a: IotRuleScene, b: IotRuleScene): boolean {
-  const cleanA = transformFormToApi(a)
-  const cleanB = transformFormToApi(b)
-
-  return JSON.stringify(cleanA) === JSON.stringify(cleanB)
-}
-
-/**
- * 获取场景联动规则的摘要信息
- */
-export function getRuleSceneSummary(ruleScene: IotRuleScene): {
-  triggerSummary: string[]
-  actionSummary: string[]
-} {
-  const triggerSummary =
-    ruleScene.triggers?.map((trigger) => {
-      switch (trigger.type) {
-        case 1:
-          return `设备状态变更 (${trigger.deviceNames?.length || 0}个设备)`
-        case 2:
-          return `属性上报 (${trigger.deviceNames?.length || 0}个设备)`
-        case 3:
-          return `事件上报 (${trigger.deviceNames?.length || 0}个设备)`
-        case 4:
-          return `服务调用 (${trigger.deviceNames?.length || 0}个设备)`
-        case 100:
-          return `定时触发 (${formatCronExpression(trigger.cronExpression || '')})`
-        default:
-          return '未知触发类型'
-      }
-    }) || []
-
-  const actionSummary =
-    ruleScene.actions?.map((action) => {
-      switch (action.type) {
-        case 1:
-          return `属性设置 (${action.deviceControl?.deviceNames?.length || 0}个设备)`
-        case 2:
-          return `服务调用 (${action.deviceControl?.deviceNames?.length || 0}个设备)`
-        case 100:
-          return '告警触发'
-        case 101:
-          return '告警恢复'
-        default:
-          return '未知执行类型'
-      }
-    }) || []
-  return { triggerSummary, actionSummary }
-}
diff --git a/src/views/iot/rule/scene/utils/validation.ts b/src/views/iot/rule/scene/utils/validation.ts
index f6a49ad4..b3ad93f3 100644
--- a/src/views/iot/rule/scene/utils/validation.ts
+++ b/src/views/iot/rule/scene/utils/validation.ts
@@ -1,15 +1,11 @@
 /**
  * IoT 场景联动表单验证工具函数
  */
-import {
-  FormValidationRules,
-  IotRuleScene,
-  TriggerConfig,
-  ActionConfig
-} from '@/api/iot/rule/scene/scene.types'
+import { FormValidationRules, TriggerConfig, ActionConfig } from '@/api/iot/rule/scene/scene.types'
 import {
   IotRuleSceneTriggerTypeEnum,
-  IotRuleSceneActionTypeEnum
+  IotRuleSceneActionTypeEnum,
+  CommonStatusEnum
 } from '@/api/iot/rule/scene/scene.types'
 
 /** 基础表单验证规则 */
@@ -20,7 +16,12 @@ export const getBaseValidationRules = (): FormValidationRules => ({
   ],
   status: [
     { required: true, message: '场景状态不能为空', trigger: 'change' },
-    { type: 'enum', enum: [0, 1], message: '状态值必须为0或1', trigger: 'change' }
+    {
+      type: 'enum',
+      enum: [CommonStatusEnum.ENABLE, CommonStatusEnum.DISABLE],
+      message: '状态值必须为启用或禁用',
+      trigger: 'change'
+    }
   ],
   description: [
     { type: 'string', max: 200, message: '场景描述不能超过200个字符', trigger: 'blur' }
@@ -179,86 +180,3 @@ export function validateActionConfig(action: ActionConfig): { valid: boolean; me
 
   return { valid: false, message: '未知的执行类型' }
 }
-
-// TODO @puhui999：貌似没用到？
-/** 验证完整的场景联动规则 */
-export function validateRuleScene(ruleScene: IotRuleScene): { valid: boolean; message?: string } {
-  // 基础字段验证
-  if (!ruleScene.name || ruleScene.name.trim().length === 0) {
-    return { valid: false, message: '场景名称不能为空' }
-  }
-  if (ruleScene.status !== 0 && ruleScene.status !== 1) {
-    return { valid: false, message: '场景状态必须为0或1' }
-  }
-  if (!ruleScene.triggers || ruleScene.triggers.length === 0) {
-    return { valid: false, message: '至少需要一个触发器' }
-  }
-  if (!ruleScene.actions || ruleScene.actions.length === 0) {
-    return { valid: false, message: '至少需要一个执行器' }
-  }
-  // 验证每个触发器
-  for (let i = 0; i < ruleScene.triggers.length; i++) {
-    const triggerResult = validateTriggerConfig(ruleScene.triggers[i])
-    if (!triggerResult.valid) {
-      return { valid: false, message: `触发器${i + 1}: ${triggerResult.message}` }
-    }
-  }
-  // 验证每个执行器
-  for (let i = 0; i < ruleScene.actions.length; i++) {
-    const actionResult = validateActionConfig(ruleScene.actions[i])
-    if (!actionResult.valid) {
-      return { valid: false, message: `执行器${i + 1}: ${actionResult.message}` }
-    }
-  }
-  return { valid: true }
-}
-
-// TODO @puhui999：下面 getOperatorOptions、getTriggerTypeOptions、getActionTypeOptions 三个貌似没用到？如果用到的话，要不放到 yudao-ui-admin-vue3/src/views/iot/utils/constants.ts 里
-
-/**
- * 获取操作符选项
- */
-export function getOperatorOptions() {
-  // TODO @puhui999：这个能不能从枚举计算出来，减少后续添加枚举的维护
-  return [
-    { value: '=', label: '等于' },
-    { value: '!=', label: '不等于' },
-    { value: '>', label: '大于' },
-    { value: '>=', label: '大于等于' },
-    { value: '<', label: '小于' },
-    { value: '<=', label: '小于等于' },
-    { value: 'in', label: '包含' },
-    { value: 'not in', label: '不包含' },
-    { value: 'between', label: '介于之间' },
-    { value: 'not between', label: '不在之间' },
-    { value: 'like', label: '字符串匹配' },
-    { value: 'not null', label: '非空' }
-  ]
-}
-
-/**
- * 获取触发类型选项
- */
-export function getTriggerTypeOptions() {
-  // TODO @puhui999：这个能不能从枚举计算出来，减少后续添加枚举的维护
-  return [
-    { value: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE, label: '设备上下线变更' },
-    { value: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST, label: '物模型属性上报' },
-    { value: IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST, label: '设备事件上报' },
-    { value: IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE, label: '设备服务调用' },
-    { value: IotRuleSceneTriggerTypeEnum.TIMER, label: '定时触发' }
-  ]
-}
-
-/**
- * 获取执行类型选项
- */
-export function getActionTypeOptions() {
-  // TODO @puhui999：这个能不能从枚举计算出来，减少后续添加枚举的维护
-  return [
-    { value: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, label: '设备属性设置' },
-    { value: IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE, label: '设备服务调用' },
-    { value: IotRuleSceneActionTypeEnum.ALERT_TRIGGER, label: '告警触发' },
-    { value: IotRuleSceneActionTypeEnum.ALERT_RECOVER, label: '告警恢复' }
-  ]
-}

From 274ecb5dcaa4f3668cca3d2dbc12cb865b7f7b9a Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 28 Jul 2025 16:45:43 +0800
Subject: [PATCH 07/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E5=99=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |    2 +-
 src/api/iot/rule/scene/scene.types.ts         |   13 +-
 .../scene/IoT场景联动规则表单设计思路文档.md  | 1102 -----------------
 .../IotThingModelTSLRespVO数据结构文档.md     |  469 -------
 .../form/configs/DeviceTriggerConfig.vue      |   30 +-
 .../scene/form/configs/TimerTriggerConfig.vue |   64 +-
 .../rule/scene/form/inputs/CronBuilder.vue    |  242 ----
 .../iot/rule/scene/form/inputs/CronInput.vue  |  141 ---
 .../scene/form/inputs/DescriptionInput.vue    |  178 ---
 .../iot/rule/scene/form/inputs/NameInput.vue  |  111 --
 .../rule/scene/form/inputs/StatusRadio.vue    |  158 ---
 .../scene/form/sections/BasicInfoSection.vue  |   38 +-
 .../scene/form/sections/TriggerSection.vue    |  146 +--
 .../form/selectors/TriggerTypeSelector.vue    |  142 ---
 14 files changed, 96 insertions(+), 2740 deletions(-)
 delete mode 100644 src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md
 delete mode 100644 src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md
 delete mode 100644 src/views/iot/rule/scene/form/inputs/CronBuilder.vue
 delete mode 100644 src/views/iot/rule/scene/form/inputs/CronInput.vue
 delete mode 100644 src/views/iot/rule/scene/form/inputs/DescriptionInput.vue
 delete mode 100644 src/views/iot/rule/scene/form/inputs/NameInput.vue
 delete mode 100644 src/views/iot/rule/scene/form/inputs/StatusRadio.vue
 delete mode 100644 src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 568f1669..74ab52a7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -88,7 +88,7 @@
   },
   "editor.formatOnSave": true,
   "[vue]": {
-    "editor.defaultFormatter": "octref.vetur"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "i18n-ally.localesPaths": ["src/locales"],
   "i18n-ally.keystyle": "nested",
diff --git a/src/api/iot/rule/scene/scene.types.ts b/src/api/iot/rule/scene/scene.types.ts
index ca021e72..05523bc5 100644
--- a/src/api/iot/rule/scene/scene.types.ts
+++ b/src/api/iot/rule/scene/scene.types.ts
@@ -173,12 +173,13 @@ interface IotRuleScene extends TenantBaseDO {
   actions: ActionConfig[] // 执行器数组（必填，至少一个）
 }
 
-// 工具类型
-// TODO @puhui999：这些在瞅瞅~
-type TriggerType = (typeof IotRuleSceneTriggerTypeEnum)[keyof typeof IotRuleSceneTriggerTypeEnum]
-type ActionType = (typeof IotRuleSceneActionTypeEnum)[keyof typeof IotRuleSceneActionTypeEnum]
-type MessageType = (typeof IotDeviceMessageTypeEnum)[keyof typeof IotDeviceMessageTypeEnum]
-type OperatorType =
+// 工具类型 - 从枚举中提取类型
+export type TriggerType =
+  (typeof IotRuleSceneTriggerTypeEnum)[keyof typeof IotRuleSceneTriggerTypeEnum]
+export type ActionType =
+  (typeof IotRuleSceneActionTypeEnum)[keyof typeof IotRuleSceneActionTypeEnum]
+export type MessageType = (typeof IotDeviceMessageTypeEnum)[keyof typeof IotDeviceMessageTypeEnum]
+export type OperatorType =
   (typeof IotRuleSceneTriggerConditionParameterOperatorEnum)[keyof typeof IotRuleSceneTriggerConditionParameterOperatorEnum]['value']
 
 // 表单验证规则类型
diff --git a/src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md b/src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md
deleted file mode 100644
index 17e93304..00000000
--- a/src/views/iot/rule/scene/IoT场景联动规则表单设计思路文档.md
+++ /dev/null
@@ -1,1102 +0,0 @@
-// TODO @puhui999：这些后续需要删除哈
-# IoT场景联动规则表单设计思路文档
-
-## 概述
-
-本文档详细描述了IoT场景联动规则表单的设计思路，包括表单结构、组件设计、数据流转和用户交互逻辑。通过Mermaid图直观展示各个组件之间的关系和数据流向。
-
-## 表单整体架构设计
-
-### 1. 表单主体结构
-
-表单采用分步骤设计，包含以下主要部分：
-
-- **基础信息配置**：场景名称、描述、状态
-- **触发器配置**：设备触发或定时触发
-- **执行器配置**：设备控制或告警配置
-- **预览与保存**：配置预览和最终保存
-
-### 2. 组件层次结构图
-
-```mermaid
-graph TB
-    A[RuleSceneForm<br/>主表单组件] --> B[BasicInfoSection<br/>基础信息]
-    A --> C[TriggerSection<br/>触发器配置]
-    A --> D[ActionSection<br/>执行器配置]
-    A --> E[PreviewSection<br/>预览区域]
-
-    %% 基础信息组件
-    B --> B1[NameInput<br/>场景名称输入]
-    B --> B2[DescriptionInput<br/>场景描述输入]
-    B --> B3[StatusRadio<br/>状态选择]
-
-    %% 触发器配置组件
-    C --> C1[TriggerTypeSelector<br/>触发类型选择器]
-    C --> C2[DeviceTriggerConfig<br/>设备触发配置]
-    C --> C3[TimerTriggerConfig<br/>定时触发配置]
-
-    %% 设备触发配置子组件
-    C2 --> C21[ProductSelector<br/>产品选择器]
-    C2 --> C22[DeviceSelector<br/>设备选择器]
-    C2 --> C23[PropertySelector<br/>属性选择器]
-    C2 --> C24[OperatorSelector<br/>操作符选择器]
-    C2 --> C25[ValueInput<br/>值输入]
-    C2 --> C26[ConditionGroupConfig<br/>条件分组配置]
-
-    %% 定时触发配置子组件
-    C3 --> C31[CronInput<br/>CRON表达式输入]
-    C3 --> C32[CronBuilder<br/>可视化CRON构建器]
-    C3 --> C33[NextExecutionPreview<br/>下次执行时间预览]
-
-    %% 执行器配置组件
-    D --> D1[ActionTypeSelector<br/>执行类型选择器]
-    D --> D2[DeviceControlConfig<br/>设备控制配置]
-    D --> D3[AlertConfig<br/>告警配置]
-
-    %% 设备控制配置子组件
-    D2 --> D21[TargetProductSelector<br/>目标产品选择器]
-    D2 --> D22[TargetDeviceSelector<br/>目标设备选择器]
-    D2 --> D23[ControlTypeSelector<br/>控制类型选择器]
-    D2 --> D24[ParamsConfig<br/>参数配置]
-
-    %% 告警配置子组件
-    D3 --> D31[AlertConfigSelector<br/>告警配置选择器]
-
-    %% 预览区域组件
-    E --> E1[ConfigPreview<br/>配置预览]
-    E --> E2[ValidationResult<br/>验证结果]
-    E --> E3[SaveButton<br/>保存按钮]
-
-    %% 样式定义
-    classDef mainComponent fill:#e1f5fe,stroke:#01579b,stroke-width:2px
-    classDef sectionComponent fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
-    classDef subComponent fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
-
-    class A mainComponent
-    class B,C,D,E sectionComponent
-    class B1,B2,B3,C1,C2,C3,C21,C22,C23,C24,C25,C26,C31,C32,C33,D1,D2,D3,D21,D22,D23,D24,D31,E1,E2,E3 subComponent
-```
-
-### 3. 组件层次结构文本
-
-```text
-RuleSceneForm (主表单)
-├── BasicInfoSection (基础信息)
-│   ├── NameInput (场景名称输入)
-│   ├── DescriptionInput (场景描述输入)
-│   └── StatusRadio (状态选择)
-├── TriggerSection (触发器配置)
-│   ├── TriggerTypeSelector (触发类型选择)
-│   ├── DeviceTriggerConfig (设备触发配置)
-│   │   ├── ProductSelector (产品选择器)
-│   │   ├── DeviceSelector (设备选择器)
-│   │   ├── PropertySelector (属性选择器)
-│   │   ├── OperatorSelector (操作符选择器)
-│   │   ├── ValueInput (值输入)
-│   │   └── ConditionGroupConfig (条件分组配置)
-│   └── TimerTriggerConfig (定时触发配置)
-│       ├── CronInput (CRON表达式输入)
-│       ├── CronBuilder (可视化CRON构建器)
-│       └── NextExecutionPreview (下次执行时间预览)
-├── ActionSection (执行器配置)
-│   ├── ActionTypeSelector (执行类型选择)
-│   ├── DeviceControlConfig (设备控制配置)
-│   │   ├── TargetProductSelector (目标产品选择器)
-│   │   ├── TargetDeviceSelector (目标设备选择器)
-│   │   ├── ControlTypeSelector (控制类型选择器)
-│   │   └── ParamsConfig (参数配置)
-│   └── AlertConfig (告警配置)
-│       └── AlertConfigSelector (告警配置选择器)
-└── PreviewSection (预览区域)
-    ├── ConfigPreview (配置预览)
-    ├── ValidationResult (验证结果)
-    └── SaveButton (保存按钮)
-```
-
-## 表单数据结构设计
-
-### 1. 表单数据模型结构图
-
-```mermaid
-classDiagram
-    class RuleSceneFormData {
-        +number id?
-        +string name
-        +string description?
-        +number status
-        +TriggerFormData[] triggers
-        +ActionFormData[] actions
-        +validateForm() boolean
-        +toApiFormat() ApiRequestData
-    }
-
-    class TriggerFormData {
-        +number type
-        +number productId?
-        +number deviceId?
-        +string identifier?
-        +string operator?
-        +string value?
-        +string cronExpression?
-        +ConditionGroupFormData[] conditionGroups?
-        +validateTrigger() boolean
-        +isDeviceTrigger() boolean
-        +isTimerTrigger() boolean
-    }
-
-    class ActionFormData {
-        +number type
-        +number productId?
-        +number deviceId?
-        +Record params?
-        +number alertConfigId?
-        +validateAction() boolean
-        +isDeviceAction() boolean
-        +isAlertAction() boolean
-    }
-
-    class ConditionGroupFormData {
-        +ConditionFormData[] conditions
-        +string logicOperator
-        +validateGroup() boolean
-    }
-
-    class ConditionFormData {
-        +number type
-        +number productId
-        +number deviceId
-        +string identifier
-        +string operator
-        +string param
-        +validateCondition() boolean
-    }
-
-    class TriggerTypeEnum {
-        <<enumeration>>
-        DEVICE_STATE_UPDATE: 1
-        DEVICE_PROPERTY_POST: 2
-        DEVICE_EVENT_POST: 3
-        DEVICE_SERVICE_INVOKE: 4
-        TIMER: 100
-    }
-
-    class ActionTypeEnum {
-        <<enumeration>>
-        DEVICE_PROPERTY_SET: 1
-        DEVICE_SERVICE_INVOKE: 2
-        ALERT_TRIGGER: 100
-        ALERT_RECOVER: 101
-    }
-
-    class OperatorEnum {
-        <<enumeration>>
-        EQUALS: "="
-        NOT_EQUALS: "!="
-        GREATER_THAN: ">"
-        LESS_THAN: "<"
-        IN: "in"
-        BETWEEN: "between"
-    }
-
-    RuleSceneFormData "1" --> "*" TriggerFormData : contains
-    RuleSceneFormData "1" --> "*" ActionFormData : contains
-    TriggerFormData "1" --> "*" ConditionGroupFormData : contains
-    ConditionGroupFormData "1" --> "*" ConditionFormData : contains
-    TriggerFormData --> TriggerTypeEnum : uses
-    ActionFormData --> ActionTypeEnum : uses
-    ConditionFormData --> OperatorEnum : uses
-```
-
-### 2. 表单数据模型代码
-
-```typescript
-interface RuleSceneFormData {
-  // 基础信息
-  id?: number;
-  name: string;
-  description?: string;
-  status: number;
-
-  // 触发器配置
-  triggers: TriggerFormData[];
-
-  // 执行器配置
-  actions: ActionFormData[];
-}
-
-interface TriggerFormData {
-  type: number;
-  productId?: number;
-  deviceId?: number;
-  identifier?: string;
-  operator?: string;
-  value?: string;
-  cronExpression?: string;
-  conditionGroups?: ConditionGroupFormData[];
-}
-
-interface ActionFormData {
-  type: number;
-  productId?: number;
-  deviceId?: number;
-  params?: Record<string, any>;
-  alertConfigId?: number;
-}
-
-interface ConditionGroupFormData {
-  conditions: ConditionFormData[];
-  logicOperator: 'AND' | 'OR';
-}
-
-interface ConditionFormData {
-  type: number;
-  productId: number;
-  deviceId: number;
-  identifier: string;
-  operator: string;
-  param: string;
-}
-```
-
-### 2. 表单验证规则
-
-```typescript
-const validationRules = {
-  name: [
-    { required: true, message: '场景名称不能为空' },
-    { max: 50, message: '场景名称不能超过50个字符' }
-  ],
-  status: [
-    { required: true, message: '场景状态不能为空' },
-    { type: 'enum', enum: [0, 1], message: '状态值必须为0或1' }
-  ],
-  triggers: [
-    { required: true, message: '触发器配置不能为空' },
-    { type: 'array', min: 1, message: '至少需要一个触发器' }
-  ],
-  actions: [
-    { required: true, message: '执行器配置不能为空' },
-    { type: 'array', min: 1, message: '至少需要一个执行器' }
-  ]
-};
-```
-
-## 核心组件设计
-
-### 1. 基础信息组件 (BasicInfoSection)
-
-```vue
-<template>
-  <el-card class="basic-info-section">
-    <template #header>
-      <span>基础信息</span>
-    </template>
-    
-    <el-form :model="formData" :rules="rules" label-width="120px">
-      <el-form-item label="场景名称" prop="name">
-        <el-input 
-          v-model="formData.name" 
-          placeholder="请输入场景名称"
-          maxlength="50"
-          show-word-limit
-        />
-      </el-form-item>
-      
-      <el-form-item label="场景描述" prop="description">
-        <el-input 
-          v-model="formData.description" 
-          type="textarea"
-          placeholder="请输入场景描述"
-          :rows="3"
-          maxlength="200"
-          show-word-limit
-        />
-      </el-form-item>
-      
-      <el-form-item label="场景状态" prop="status">
-        <el-radio-group v-model="formData.status">
-          <el-radio :label="0">开启</el-radio>
-          <el-radio :label="1">关闭</el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-  </el-card>
-</template>
-```
-
-### 2. 触发器配置组件 (TriggerSection)
-
-```vue
-<template>
-  <el-card class="trigger-section">
-    <template #header>
-      <div class="section-header">
-        <span>触发器配置</span>
-        <el-button type="primary" size="small" @click="addTrigger">
-          <el-icon><Plus /></el-icon>
-          添加触发器
-        </el-button>
-      </div>
-    </template>
-    
-    <div v-for="(trigger, index) in triggers" :key="index" class="trigger-item">
-      <div class="trigger-header">
-        <span>触发器 {{ index + 1 }}</span>
-        <el-button 
-          type="danger" 
-          size="small" 
-          text 
-          @click="removeTrigger(index)"
-          v-if="triggers.length > 1"
-        >
-          删除
-        </el-button>
-      </div>
-      
-      <!-- 触发类型选择 -->
-      <TriggerTypeSelector v-model="trigger.type" @change="onTriggerTypeChange(trigger, $event)" />
-      
-      <!-- 设备触发配置 -->
-      <DeviceTriggerConfig 
-        v-if="isDeviceTrigger(trigger.type)"
-        v-model="trigger"
-      />
-      
-      <!-- 定时触发配置 -->
-      <TimerTriggerConfig 
-        v-if="trigger.type === TriggerType.TIMER"
-        v-model="trigger.cronExpression"
-      />
-    </div>
-  </el-card>
-</template>
-```
-
-### 3. 执行器配置组件 (ActionSection)
-
-```vue
-<template>
-  <el-card class="action-section">
-    <template #header>
-      <div class="section-header">
-        <span>执行器配置</span>
-        <el-button type="primary" size="small" @click="addAction">
-          <el-icon><Plus /></el-icon>
-          添加执行器
-        </el-button>
-      </div>
-    </template>
-    
-    <div v-for="(action, index) in actions" :key="index" class="action-item">
-      <div class="action-header">
-        <span>执行器 {{ index + 1 }}</span>
-        <el-button 
-          type="danger" 
-          size="small" 
-          text 
-          @click="removeAction(index)"
-          v-if="actions.length > 1"
-        >
-          删除
-        </el-button>
-      </div>
-      
-      <!-- 执行类型选择 -->
-      <ActionTypeSelector v-model="action.type" @change="onActionTypeChange(action, $event)" />
-      
-      <!-- 设备控制配置 -->
-      <DeviceControlConfig 
-        v-if="isDeviceAction(action.type)"
-        v-model="action"
-      />
-      
-      <!-- 告警配置 -->
-      <AlertConfig 
-        v-if="isAlertAction(action.type)"
-        v-model="action.alertConfigId"
-      />
-    </div>
-  </el-card>
-</template>
-```
-
-## 表单交互流程设计
-
-### 1. 表单初始化流程图
-
-```mermaid
-flowchart TD
-    A[页面加载] --> B[初始化表单数据结构]
-    B --> C[获取基础数据]
-    C --> C1[加载产品列表]
-    C --> C2[加载告警配置列表]
-    C --> C3[加载用户权限信息]
-    C1 --> D[表单渲染]
-    C2 --> D
-    C3 --> D
-    D --> E[建立双向数据绑定]
-    E --> F[表单就绪]
-
-    %% 错误处理
-    C --> G{数据加载失败?}
-    G -->|是| H[显示错误信息]
-    G -->|否| D
-    H --> I[提供重试选项]
-    I --> C
-```
-
-### 2. 触发器配置流程图
-
-```mermaid
-flowchart TD
-    A[开始配置触发器] --> B[选择触发类型]
-    B --> C{触发类型}
-
-    %% 设备触发分支
-    C -->|设备触发| D[设备触发配置]
-    D --> D1[选择产品]
-    D1 --> D2[加载设备列表]
-    D2 --> D3[选择设备]
-    D3 --> D4[加载物模型]
-    D4 --> D5[选择属性/事件]
-    D5 --> D6[选择操作符]
-    D6 --> D7[输入比较值]
-    D7 --> D8[配置条件分组]
-    D8 --> E[触发器配置完成]
-
-    %% 定时触发分支
-    C -->|定时触发| F[定时触发配置]
-    F --> F1[输入CRON表达式]
-    F1 --> F2{表达式格式}
-    F2 -->|正确| F3[显示下次执行时间]
-    F2 -->|错误| F4[显示错误提示]
-    F4 --> F5[提供可视化编辑器]
-    F5 --> F1
-    F3 --> E
-
-    %% 验证
-    E --> G[验证触发器配置]
-    G --> H{验证通过?}
-    H -->|是| I[保存触发器配置]
-    H -->|否| J[显示验证错误]
-    J --> D
-```
-
-### 3. 执行器配置流程图
-
-```mermaid
-flowchart TD
-    A[开始配置执行器] --> B[选择执行类型]
-    B --> C{执行类型}
-
-    %% 设备控制分支
-    C -->|设备控制| D[设备控制配置]
-    D --> D1[选择目标产品]
-    D1 --> D2[加载目标设备列表]
-    D2 --> D3[选择目标设备]
-    D3 --> D4[选择控制类型]
-    D4 --> D5{控制类型}
-    D5 -->|属性设置| D6[配置属性参数]
-    D5 -->|服务调用| D7[配置服务参数]
-    D6 --> E[执行器配置完成]
-    D7 --> E
-
-    %% 告警分支
-    C -->|告警触发/恢复| F[告警配置]
-    F --> F1[选择告警配置项]
-    F1 --> F2[配置告警参数]
-    F2 --> E
-
-    %% 验证
-    E --> G[验证执行器配置]
-    G --> H{验证通过?}
-    H -->|是| I[保存执行器配置]
-    H -->|否| J[显示验证错误]
-    J --> D
-```
-
-### 4. 表单提交流程图
-
-```mermaid
-flowchart TD
-    A[用户点击保存] --> B[表单验证]
-    B --> C{验证通过?}
-    C -->|否| D[显示验证错误]
-    D --> E[用户修正错误]
-    E --> B
-
-    C -->|是| F[数据转换]
-    F --> G[转换为API格式]
-    G --> H[提交请求]
-    H --> I{请求成功?}
-
-    I -->|是| J[显示成功消息]
-    J --> K[跳转到列表页面]
-
-    I -->|否| L[显示错误消息]
-    L --> M[提供重试选项]
-    M --> H
-
-    %% 加载状态
-    H --> N[显示加载状态]
-    N --> I
-```
-
-### 5. 数据流转图
-
-```mermaid
-flowchart LR
-    A[用户输入] --> B[表单组件]
-    B --> C[数据验证]
-    C --> D[状态管理]
-    D --> E[API调用]
-    E --> F[后端处理]
-    F --> G[数据库存储]
-
-    %% 反向数据流
-    G --> H[响应数据]
-    H --> I[状态更新]
-    I --> J[UI更新]
-    J --> K[用户反馈]
-
-    %% 错误处理流
-    C --> L{验证失败?}
-    L -->|是| M[错误提示]
-    M --> A
-
-    E --> N{请求失败?}
-    N -->|是| O[错误处理]
-    O --> K
-```
-
-## 组件状态管理设计
-
-### 1. 状态管理架构图
-
-```mermaid
-graph TB
-    A[全局状态管理] --> B[表单状态]
-    A --> C[UI状态]
-    A --> D[数据缓存状态]
-
-    %% 表单状态
-    B --> B1[formData<br/>表单数据]
-    B --> B2[validationErrors<br/>验证错误]
-    B --> B3[isDirty<br/>数据变更标识]
-    B --> B4[isSubmitting<br/>提交状态]
-
-    %% UI状态
-    C --> C1[loading<br/>加载状态]
-    C --> C2[activeStep<br/>当前步骤]
-    C --> C3[expandedSections<br/>展开的区域]
-    C --> C4[modalVisible<br/>弹窗显示状态]
-
-    %% 数据缓存状态
-    D --> D1[productList<br/>产品列表]
-    D --> D2[deviceList<br/>设备列表]
-    D --> D3[thingModelList<br/>物模型列表]
-    D --> D4[alertConfigList<br/>告警配置列表]
-
-    %% 状态操作
-    E[状态操作] --> E1[updateFormData<br/>更新表单数据]
-    E --> E2[validateForm<br/>验证表单]
-    E --> E3[resetForm<br/>重置表单]
-    E --> E4[submitForm<br/>提交表单]
-
-    %% 样式定义
-    classDef stateClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
-    classDef actionClass fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
-
-    class A,B,C,D stateClass
-    class E,E1,E2,E3,E4 actionClass
-```
-
-### 2. 组件通信图
-
-```mermaid
-sequenceDiagram
-    participant U as User
-    participant F as FormComponent
-    participant T as TriggerSection
-    participant A as ActionSection
-    participant S as StateManager
-    participant API as BackendAPI
-
-    U->>F: 填写基础信息
-    F->>S: updateFormData(basicInfo)
-    S-->>F: 状态更新完成
-
-    U->>T: 配置触发器
-    T->>S: updateTriggers(triggerData)
-    S->>API: loadDeviceList(productId)
-    API-->>S: 返回设备列表
-    S-->>T: 更新设备选项
-
-    U->>A: 配置执行器
-    A->>S: updateActions(actionData)
-    S-->>A: 状态更新完成
-
-    U->>F: 点击保存
-    F->>S: validateForm()
-    S-->>F: 验证结果
-
-    alt 验证通过
-        F->>S: submitForm()
-        S->>API: saveRuleScene(formData)
-        API-->>S: 保存结果
-        S-->>F: 显示成功消息
-    else 验证失败
-        S-->>F: 显示错误信息
-    end
-```
-
-### 3. 数据流向图
-
-```mermaid
-flowchart LR
-    A[用户操作] --> B[组件事件]
-    B --> C[状态更新]
-    C --> D[数据验证]
-    D --> E{验证通过?}
-
-    E -->|是| F[更新状态]
-    E -->|否| G[显示错误]
-
-    F --> H[触发副作用]
-    H --> I[API调用]
-    I --> J[更新缓存]
-    J --> K[UI重新渲染]
-
-    G --> L[用户修正]
-    L --> A
-
-    %% 样式
-    classDef processClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
-    classDef decisionClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px
-    classDef errorClass fill:#ffebee,stroke:#d32f2f,stroke-width:2px
-
-    class A,B,C,D,F,H,I,J,K,L processClass
-    class E decisionClass
-    class G errorClass
-```
-
-## 用户体验优化
-
-### 1. 智能提示和帮助
-
-- **字段说明**：为复杂字段提供详细说明和示例
-- **实时验证**：输入时实时验证数据格式
-- **智能推荐**：根据已选择的产品推荐相关设备
-- **预览功能**：实时预览配置效果
-
-### 2. 错误处理和反馈
-
-- **表单验证**：清晰的错误提示信息
-- **数据加载**：加载状态和错误重试机制
-- **保存反馈**：明确的成功/失败反馈
-
-### 3. 操作便利性
-
-- **批量操作**：支持批量添加/删除触发器和执行器
-- **模板功能**：提供常用场景模板
-- **导入导出**：支持配置的导入和导出
-
-## 响应式设计考虑
-
-### 1. 移动端适配
-
-- **布局调整**：在小屏幕上采用垂直布局
-- **操作优化**：增大点击区域，优化触摸操作
-- **内容精简**：在移动端隐藏非必要信息
-
-### 2. 不同屏幕尺寸适配
-
-- **大屏幕**：充分利用空间，并排显示更多内容
-- **中等屏幕**：平衡内容密度和可读性
-- **小屏幕**：优先显示核心功能
-
-## 性能优化策略
-
-### 1. 组件懒加载
-
-```javascript
-// 懒加载复杂组件
-const DeviceTriggerConfig = defineAsyncComponent(() => 
-  import('./components/DeviceTriggerConfig.vue')
-);
-```
-
-### 2. 数据缓存
-
-```javascript
-// 缓存产品和设备数据
-const productCache = new Map();
-const deviceCache = new Map();
-```
-
-### 3. 防抖处理
-
-```javascript
-// 搜索防抖
-const debouncedSearch = debounce(searchDevices, 300);
-```
-
-## 可访问性设计
-
-### 1. 键盘导航
-
-- 支持Tab键在表单元素间导航
-- 提供快捷键操作
-
-### 2. 屏幕阅读器支持
-
-- 为表单元素提供适当的标签
-- 使用ARIA属性增强可访问性
-
-### 3. 颜色和对比度
-
-- 确保足够的颜色对比度
-- 不仅依赖颜色传达信息
-
-## 表单验证策略
-
-### 1. 验证层次结构图
-
-```mermaid
-graph TB
-    A[表单验证] --> B[字段级验证]
-    A --> C[组件级验证]
-    A --> D[表单级验证]
-    A --> E[业务级验证]
-
-    %% 字段级验证
-    B --> B1[必填验证]
-    B --> B2[格式验证]
-    B --> B3[长度验证]
-    B --> B4[类型验证]
-
-    %% 组件级验证
-    C --> C1[触发器验证]
-    C --> C2[执行器验证]
-    C --> C3[条件组合验证]
-
-    %% 表单级验证
-    D --> D1[数据完整性验证]
-    D --> D2[逻辑一致性验证]
-    D --> D3[依赖关系验证]
-
-    %% 业务级验证
-    E --> E1[设备权限验证]
-    E --> E2[产品可用性验证]
-    E --> E3[规则冲突验证]
-
-    %% 样式定义
-    classDef levelClass fill:#e1f5fe,stroke:#01579b,stroke-width:2px
-    classDef validationClass fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
-
-    class A levelClass
-    class B,C,D,E levelClass
-    class B1,B2,B3,B4,C1,C2,C3,D1,D2,D3,E1,E2,E3 validationClass
-```
-
-### 2. 验证时机图
-
-```mermaid
-stateDiagram-v2
-    [*] --> 字段输入
-    字段输入 --> 实时验证: onChange
-    实时验证 --> 显示错误: 验证失败
-    实时验证 --> 清除错误: 验证通过
-    显示错误 --> 字段输入: 用户修正
-    清除错误 --> 字段输入: 继续输入
-
-    字段输入 --> 失焦验证: onBlur
-    失焦验证 --> 显示警告: 格式错误
-    失焦验证 --> 正常状态: 格式正确
-    显示警告 --> 字段输入: 重新聚焦
-    正常状态 --> 字段输入: 重新聚焦
-
-    字段输入 --> 表单提交: 用户提交
-    表单提交 --> 全量验证
-    全量验证 --> 提交成功: 验证通过
-    全量验证 --> 显示错误: 验证失败
-    提交成功 --> [*]
-    显示错误 --> 字段输入: 用户修正
-```
-
-## 测试策略
-
-### 1. 测试金字塔图
-
-```mermaid
-graph TB
-    A[测试金字塔] --> B[单元测试<br/>Unit Tests<br/>70%]
-    A --> C[集成测试<br/>Integration Tests<br/>20%]
-    A --> D[端到端测试<br/>E2E Tests<br/>10%]
-
-    %% 单元测试详细
-    B --> B1[组件渲染测试]
-    B --> B2[数据验证逻辑测试]
-    B --> B3[用户交互测试]
-    B --> B4[工具函数测试]
-
-    %% 集成测试详细
-    C --> C1[表单提交流程测试]
-    C --> C2[API调用测试]
-    C --> C3[数据转换测试]
-    C --> C4[组件间通信测试]
-
-    %% 端到端测试详细
-    D --> D1[完整用户流程测试]
-    D --> D2[浏览器兼容性测试]
-    D --> D3[响应式设计测试]
-    D --> D4[性能测试]
-
-    %% 样式定义
-    classDef pyramidClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:3px
-    classDef unitClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
-    classDef integrationClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px
-    classDef e2eClass fill:#ffebee,stroke:#d32f2f,stroke-width:2px
-
-    class A pyramidClass
-    class B,B1,B2,B3,B4 unitClass
-    class C,C1,C2,C3,C4 integrationClass
-    class D,D1,D2,D3,D4 e2eClass
-```
-
-### 2. 测试用例覆盖图
-
-```mermaid
-mindmap
-  root((测试用例覆盖))
-    功能测试
-      基础信息
-        名称输入验证
-        描述输入验证
-        状态切换测试
-      触发器配置
-        设备触发配置
-        定时触发配置
-        条件组合测试
-      执行器配置
-        设备控制配置
-        告警配置测试
-      表单提交
-        验证流程测试
-        保存流程测试
-
-    异常测试
-      网络异常
-        API调用失败
-        超时处理
-      数据异常
-        格式错误处理
-        空数据处理
-      用户异常
-        权限不足
-        操作冲突
-
-    性能测试
-      加载性能
-        首屏加载时间
-        组件渲染性能
-      交互性能
-        表单响应速度
-        数据处理性能
-      内存性能
-        内存泄漏检测
-        组件销毁测试
-
-    兼容性测试
-      浏览器兼容
-        Chrome测试
-        Firefox测试
-        Safari测试
-        Edge测试
-      设备兼容
-        桌面端测试
-        平板端测试
-        移动端测试
-```
-
-## 表单设计架构总览
-
-### 完整架构图
-
-```mermaid
-graph TB
-    %% 用户界面层
-    subgraph "用户界面层 (UI Layer)"
-        A[RuleSceneForm 主表单]
-        B[BasicInfoSection 基础信息]
-        C[TriggerSection 触发器配置]
-        D[ActionSection 执行器配置]
-        E[PreviewSection 预览区域]
-    end
-
-    %% 状态管理层
-    subgraph "状态管理层 (State Management)"
-        F[FormState 表单状态]
-        G[ValidationState 验证状态]
-        H[UIState 界面状态]
-        I[CacheState 缓存状态]
-    end
-
-    %% 业务逻辑层
-    subgraph "业务逻辑层 (Business Logic)"
-        J[FormValidator 表单验证器]
-        K[DataTransformer 数据转换器]
-        L[ConfigBuilder 配置构建器]
-        M[RuleEngine 规则引擎]
-    end
-
-    %% 数据访问层
-    subgraph "数据访问层 (Data Access)"
-        N[ProductAPI 产品接口]
-        O[DeviceAPI 设备接口]
-        P[RuleSceneAPI 规则场景接口]
-        Q[AlertAPI 告警接口]
-    end
-
-    %% 工具层
-    subgraph "工具层 (Utilities)"
-        R[CronValidator CRON验证器]
-        S[TypeChecker 类型检查器]
-        T[ErrorHandler 错误处理器]
-        U[Logger 日志记录器]
-    end
-
-    %% 连接关系
-    A --> B
-    A --> C
-    A --> D
-    A --> E
-
-    B --> F
-    C --> F
-    D --> F
-    E --> F
-
-    F --> J
-    G --> J
-    H --> K
-    I --> L
-
-    J --> M
-    K --> M
-    L --> M
-
-    M --> N
-    M --> O
-    M --> P
-    M --> Q
-
-    J --> R
-    K --> S
-    M --> T
-    A --> U
-
-    %% 样式定义
-    classDef uiClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
-    classDef stateClass fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
-    classDef businessClass fill:#e8f5e8,stroke:#2e7d32,stroke-width:2px
-    classDef dataClass fill:#fff3e0,stroke:#f57c00,stroke-width:2px
-    classDef utilClass fill:#fce4ec,stroke:#c2185b,stroke-width:2px
-
-    class A,B,C,D,E uiClass
-    class F,G,H,I stateClass
-    class J,K,L,M businessClass
-    class N,O,P,Q dataClass
-    class R,S,T,U utilClass
-```
-
-### 设计原则总结
-
-```mermaid
-mindmap
-  root((表单设计原则))
-    用户体验
-      直观易用
-        清晰的视觉层次
-        一致的交互模式
-        智能的操作提示
-      响应迅速
-        实时验证反馈
-        快速数据加载
-        流畅的动画效果
-      错误友好
-        明确的错误信息
-        便捷的错误修正
-        优雅的异常处理
-
-    技术架构
-      组件化设计
-        高内聚低耦合
-        可复用的组件
-        清晰的组件边界
-      状态管理
-        集中式状态管理
-        可预测的状态变更
-        高效的状态同步
-      数据流控制
-        单向数据流
-        明确的数据来源
-        可追踪的数据变更
-
-    质量保证
-      代码质量
-        类型安全
-        代码规范
-        充分的注释
-      测试覆盖
-        单元测试
-        集成测试
-        端到端测试
-      性能优化
-        懒加载
-        缓存策略
-        防抖节流
-
-    可维护性
-      模块化结构
-        清晰的目录结构
-        合理的文件组织
-        明确的依赖关系
-      文档完善
-        API文档
-        组件文档
-        使用说明
-      扩展性设计
-        插件化架构
-        配置化开发
-        版本兼容性
-```
-
-## 总结
-
-IoT场景联动规则表单设计需要考虑：
-
-### 1. 核心设计要点
-
-- **复杂性管理**：通过组件化和分步骤设计降低复杂度
-- **用户体验**：提供直观的操作界面和智能提示
-- **数据完整性**：完善的验证机制确保数据质量
-- **扩展性**：模块化设计支持功能扩展
-- **性能优化**：合理的加载和缓存策略
-- **可访问性**：确保所有用户都能正常使用
-
-### 2. 技术实现要点
-
-- **状态管理**：采用集中式状态管理，确保数据流的可控性
-- **组件设计**：高内聚低耦合的组件架构，提高代码复用性
-- **验证策略**：多层次的验证机制，保证数据质量
-- **错误处理**：完善的错误处理和用户反馈机制
-- **性能优化**：懒加载、缓存、防抖等优化策略
-
-### 3. 质量保证
-
-- **测试覆盖**：完整的测试金字塔，确保代码质量
-- **文档完善**：详细的设计文档和使用说明
-- **代码规范**：统一的编码规范和类型安全
-
-通过以上设计思路和详细的Mermaid图表，可以构建一个功能完善、用户友好、技术先进的IoT场景联动规则配置表单系统。
diff --git a/src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md b/src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md
deleted file mode 100644
index 7ad53a65..00000000
--- a/src/views/iot/rule/scene/IotThingModelTSLRespVO数据结构文档.md
+++ /dev/null
@@ -1,469 +0,0 @@
-// TODO @puhui999：这些后续需要删除哈
-# IotThingModelTSLRespVO 数据结构文档
-
-## 概述
-
-`IotThingModelTSLRespVO` 是IoT产品物模型TSL（Thing Specification Language）的响应数据结构，用于返回完整的产品物模型定义，包括属性、事件和服务的详细信息。TSL是阿里云IoT平台定义的一套物模型描述规范。
-
-## 主体数据结构
-
-### IotThingModelTSLRespVO
-
-```typescript
-interface IotThingModelTSLRespVO {
-  productId: number;                    // 产品编号（必填）
-  productKey: string;                   // 产品标识（必填）
-  properties: ThingModelProperty[];     // 属性列表（必填）
-  events: ThingModelEvent[];           // 事件列表（必填）
-  services: ThingModelService[];       // 服务列表（必填）
-}
-```
-
-**字段说明：**
-- `productId`: 产品编号，唯一标识一个IoT产品
-- `productKey`: 产品标识符，用于设备连接和识别
-- `properties`: 设备属性列表，描述设备的状态信息
-- `events`: 设备事件列表，描述设备主动上报的事件
-- `services`: 设备服务列表，描述可以调用的设备功能
-
-## 属性数据结构 (ThingModelProperty)
-
-### 基本结构
-
-```typescript
-interface ThingModelProperty {
-  identifier: string;                   // 属性标识符（必填）
-  name: string;                        // 属性名称（必填）
-  accessMode: string;                  // 访问模式（必填）
-  required?: boolean;                  // 是否必选
-  dataType: string;                    // 数据类型（必填）
-  dataSpecs?: ThingModelDataSpecs;     // 数据规范（非列表型）
-  dataSpecsList?: ThingModelDataSpecs[]; // 数据规范（列表型）
-}
-```
-
-### 字段详细说明
-
-#### identifier（属性标识符）
-- **类型**: `string`
-- **必填**: 是
-- **格式**: 正则表达式 `^[a-zA-Z][a-zA-Z0-9_]{0,31}$`
-- **说明**: 只能由字母、数字和下划线组成，必须以字母开头，长度不超过32个字符
-- **示例**: `"temperature"`, `"humidity"`, `"power_status"`
-
-#### name（属性名称）
-- **类型**: `string`
-- **必填**: 是
-- **说明**: 属性的显示名称，用于界面展示
-- **示例**: `"温度"`, `"湿度"`, `"电源状态"`
-
-#### accessMode（访问模式）
-- **类型**: `string`
-- **必填**: 是
-- **枚举值**:
-  - `"r"`: 只读，设备只能上报，平台不能下发
-  - `"rw"`: 读写，设备可以上报，平台也可以下发
-- **示例**: `"r"`, `"rw"`
-
-#### dataType（数据类型）
-- **类型**: `string`
-- **必填**: 是
-- **枚举值**:
-  - `"int"`: 整数型
-  - `"float"`: 单精度浮点型
-  - `"double"`: 双精度浮点型
-  - `"enum"`: 枚举型
-  - `"bool"`: 布尔型
-  - `"text"`: 文本型
-  - `"date"`: 时间型
-  - `"struct"`: 结构体型
-  - `"array"`: 数组型
-
-## 事件数据结构 (ThingModelEvent)
-
-### 基本结构
-
-```typescript
-interface ThingModelEvent {
-  identifier: string;                   // 事件标识符（必填）
-  name: string;                        // 事件名称（必填）
-  required?: boolean;                  // 是否必选
-  type: string;                        // 事件类型（必填）
-  outputParams?: ThingModelParam[];    // 输出参数
-  method?: string;                     // 执行方法
-}
-```
-
-### 字段详细说明
-
-#### type（事件类型）
-- **类型**: `string`
-- **必填**: 是
-- **枚举值**:
-  - `"info"`: 信息事件
-  - `"alert"`: 告警事件
-  - `"error"`: 故障事件
-
-#### outputParams（输出参数）
-- **类型**: `ThingModelParam[]`
-- **必填**: 否
-- **说明**: 事件触发时返回的参数信息
-
-## 服务数据结构 (ThingModelService)
-
-### 基本结构
-
-```typescript
-interface ThingModelService {
-  identifier: string;                   // 服务标识符（必填）
-  name: string;                        // 服务名称（必填）
-  required?: boolean;                  // 是否必选
-  callType: string;                    // 调用类型（必填）
-  inputParams?: ThingModelParam[];     // 输入参数
-  outputParams?: ThingModelParam[];    // 输出参数
-  method?: string;                     // 执行方法
-}
-```
-
-### 字段详细说明
-
-#### callType（调用类型）
-- **类型**: `string`
-- **必填**: 是
-- **枚举值**:
-  - `"async"`: 异步调用
-  - `"sync"`: 同步调用
-
-## 参数数据结构 (ThingModelParam)
-
-### 基本结构
-
-```typescript
-interface ThingModelParam {
-  identifier: string;                   // 参数标识符（必填）
-  name: string;                        // 参数名称（必填）
-  direction: string;                   // 参数方向（必填）
-  paraOrder?: number;                  // 参数序号
-  dataType: string;                    // 数据类型（必填）
-  dataSpecs?: ThingModelDataSpecs;     // 数据规范（非列表型）
-  dataSpecsList?: ThingModelDataSpecs[]; // 数据规范（列表型）
-}
-```
-
-### 字段详细说明
-
-#### direction（参数方向）
-- **类型**: `string`
-- **必填**: 是
-- **枚举值**:
-  - `"input"`: 输入参数
-  - `"output"`: 输出参数
-
-## 数据规范结构 (ThingModelDataSpecs)
-
-数据规范是一个抽象基类，根据不同的数据类型有不同的具体实现：
-
-### 1. 数值型数据规范 (ThingModelNumericDataSpec)
-
-适用于 `int`、`float`、`double` 类型：
-
-```typescript
-interface ThingModelNumericDataSpec {
-  dataType: "int" | "float" | "double";
-  max: string;                         // 最大值（必填）
-  min: string;                         // 最小值（必填）
-  step: string;                        // 步长（必填）
-  precise?: string;                    // 精度（float/double可选）
-  defaultValue?: string;               // 默认值
-  unit?: string;                       // 单位符号
-  unitName?: string;                   // 单位名称
-}
-```
-
-### 2. 布尔/枚举型数据规范 (ThingModelBoolOrEnumDataSpecs)
-
-适用于 `bool`、`enum` 类型：
-
-```typescript
-interface ThingModelBoolOrEnumDataSpecs {
-  dataType: "bool" | "enum";
-  name: string;                        // 枚举项名称（必填）
-  value: number;                       // 枚举值（必填）
-}
-```
-
-### 3. 文本/时间型数据规范 (ThingModelDateOrTextDataSpecs)
-
-适用于 `text`、`date` 类型：
-
-```typescript
-interface ThingModelDateOrTextDataSpecs {
-  dataType: "text" | "date";
-  length?: number;                     // 数据长度（text类型需要，最大2048）
-  defaultValue?: string;               // 默认值
-}
-```
-
-### 4. 数组型数据规范 (ThingModelArrayDataSpecs)
-
-适用于 `array` 类型：
-
-```typescript
-interface ThingModelArrayDataSpecs {
-  dataType: "array";
-  size: number;                        // 数组元素个数（必填）
-  childDataType: string;               // 数组元素数据类型（必填）
-  dataSpecsList?: ThingModelDataSpecs[]; // 子元素数据规范（struct类型时）
-}
-```
-
-**childDataType 枚举值**:
-- `"struct"`: 结构体
-- `"int"`: 整数
-- `"float"`: 单精度浮点
-- `"double"`: 双精度浮点
-- `"text"`: 文本
-
-### 5. 结构体型数据规范 (ThingModelStructDataSpecs)
-
-适用于 `struct` 类型：
-
-```typescript
-interface ThingModelStructDataSpecs {
-  dataType: "struct";
-  identifier: string;                  // 属性标识符（必填）
-  name: string;                        // 属性名称（必填）
-  accessMode: string;                  // 操作类型（必填）
-  required?: boolean;                  // 是否必选
-  childDataType: string;               // 子数据类型（必填）
-  dataSpecs?: ThingModelDataSpecs;     // 数据规范（非列表型）
-  dataSpecsList?: ThingModelDataSpecs[]; // 数据规范（列表型）
-}
-```
-
-**childDataType 枚举值**:
-- `"int"`: 整数
-- `"float"`: 单精度浮点
-- `"double"`: 双精度浮点
-- `"text"`: 文本
-- `"date"`: 时间
-- `"enum"`: 枚举
-- `"bool"`: 布尔
-
-## 数据类型映射关系
-
-### dataSpecs vs dataSpecsList
-
-- **dataSpecs**: 用于非列表型数据类型（`int`、`float`、`double`、`text`、`date`、`array`）
-- **dataSpecsList**: 用于列表型数据类型（`enum`、`bool`、`struct`）
-
-### JSON多态序列化
-
-数据规范使用Jackson的`@JsonTypeInfo`和`@JsonSubTypes`注解实现多态序列化：
-
-```json
-{
-  "dataType": "int",
-  "max": "100",
-  "min": "0",
-  "step": "1",
-  "unit": "°C",
-  "unitName": "摄氏度"
-}
-```
-
-## 完整示例
-
-### 温度传感器物模型示例
-
-```json
-{
-  "productId": 1024,
-  "productKey": "temperature_sensor",
-  "properties": [
-    {
-      "identifier": "temperature",
-      "name": "温度",
-      "accessMode": "r",
-      "required": true,
-      "dataType": "float",
-      "dataSpecs": {
-        "dataType": "float",
-        "max": "100.0",
-        "min": "-40.0",
-        "step": "0.1",
-        "precise": "1",
-        "unit": "°C",
-        "unitName": "摄氏度"
-      }
-    },
-    {
-      "identifier": "power_switch",
-      "name": "电源开关",
-      "accessMode": "rw",
-      "required": false,
-      "dataType": "bool",
-      "dataSpecsList": [
-        {
-          "dataType": "bool",
-          "name": "关闭",
-          "value": 0
-        },
-        {
-          "dataType": "bool",
-          "name": "开启",
-          "value": 1
-        }
-      ]
-    }
-  ],
-  "events": [
-    {
-      "identifier": "high_temperature_alert",
-      "name": "高温告警",
-      "required": false,
-      "type": "alert",
-      "outputParams": [
-        {
-          "identifier": "current_temp",
-          "name": "当前温度",
-          "direction": "output",
-          "dataType": "float",
-          "dataSpecs": {
-            "dataType": "float",
-            "max": "100.0",
-            "min": "-40.0",
-            "step": "0.1"
-          }
-        }
-      ]
-    }
-  ],
-  "services": [
-    {
-      "identifier": "reset_device",
-      "name": "重置设备",
-      "required": false,
-      "callType": "async",
-      "inputParams": [
-        {
-          "identifier": "reset_type",
-          "name": "重置类型",
-          "direction": "input",
-          "dataType": "enum",
-          "dataSpecsList": [
-            {
-              "dataType": "enum",
-              "name": "软重置",
-              "value": 1
-            },
-            {
-              "dataType": "enum",
-              "name": "硬重置",
-              "value": 2
-            }
-          ]
-        }
-      ],
-      "outputParams": [
-        {
-          "identifier": "result",
-          "name": "执行结果",
-          "direction": "output",
-          "dataType": "bool",
-          "dataSpecsList": [
-            {
-              "dataType": "bool",
-              "name": "失败",
-              "value": 0
-            },
-            {
-              "dataType": "bool",
-              "name": "成功",
-              "value": 1
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
-```
-
-## 前端使用建议
-
-### 1. TypeScript类型定义
-
-建议在前端项目中定义完整的TypeScript接口，确保类型安全：
-
-```typescript
-// 定义完整的类型接口
-export interface IotThingModelTSLRespVO {
-  productId: number;
-  productKey: string;
-  properties: ThingModelProperty[];
-  events: ThingModelEvent[];
-  services: ThingModelService[];
-}
-
-// 使用联合类型处理数据规范的多态性
-export type ThingModelDataSpecs = 
-  | ThingModelNumericDataSpec
-  | ThingModelBoolOrEnumDataSpecs
-  | ThingModelDateOrTextDataSpecs
-  | ThingModelArrayDataSpecs
-  | ThingModelStructDataSpecs;
-```
-
-### 2. 数据验证
-
-```typescript
-// 验证数据类型和数据规范的一致性
-function validateDataSpecs(dataType: string, dataSpecs: any): boolean {
-  switch (dataType) {
-    case 'int':
-    case 'float':
-    case 'double':
-      return dataSpecs.dataType === dataType && 
-             dataSpecs.max !== undefined && 
-             dataSpecs.min !== undefined;
-    case 'bool':
-    case 'enum':
-      return Array.isArray(dataSpecs) && 
-             dataSpecs.every(spec => spec.name && spec.value !== undefined);
-    // ... 其他类型验证
-    default:
-      return false;
-  }
-}
-```
-
-### 3. 数据转换工具
-
-```typescript
-// 将后端数据转换为前端展示格式
-function formatPropertyValue(property: ThingModelProperty, value: any): string {
-  if (property.dataType === 'enum' || property.dataType === 'bool') {
-    const spec = property.dataSpecsList?.find(s => s.value === value);
-    return spec?.name || String(value);
-  }
-  
-  if (property.dataType === 'float' || property.dataType === 'double') {
-    const unit = property.dataSpecs?.unit || '';
-    return `${value}${unit}`;
-  }
-  
-  return String(value);
-}
-```
-
-## 注意事项
-
-1. **数据规范选择**: 根据`dataType`选择使用`dataSpecs`还是`dataSpecsList`
-2. **标识符唯一性**: 在同一产品下，所有功能的`identifier`必须唯一
-3. **数据类型一致性**: 参数的`dataType`必须与其`dataSpecs`的`dataType`保持一致
-4. **枚举值处理**: 布尔型和枚举型数据使用`dataSpecsList`数组存储可选值
-5. **嵌套结构**: 结构体和数组类型可能包含嵌套的数据规范定义
-6. **版本兼容**: 物模型结构可能随版本演进，前端需要做好兼容性处理
-
-这个数据结构为IoT设备的完整功能描述提供了标准化的格式，支持复杂的数据类型和嵌套结构，能够满足各种IoT设备的建模需求。
diff --git a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
index e6400102..629312f2 100644
--- a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@@ -8,25 +8,13 @@
       @change="handleDeviceChange"
     />
 
-    <!-- TODO @puhui999：这里有点冗余，建议去掉 -->
-    <!-- 设备状态变更提示 -->
-    <div v-if="trigger.type === TriggerTypeEnum.DEVICE_STATE_UPDATE" class="mt-8px">
-      <el-alert title="设备状态变更触发" type="info" :closable="false" show-icon>
-        <template #default>
-          <p class="m-0">当选中的设备上线或离线时将自动触发场景规则</p>
-          <p class="m-0 mt-4px text-12px text-[var(--el-text-color-secondary)]">无需配置额外的触发条件</p>
-        </template>
-      </el-alert>
-    </div>
-
     <!-- 条件组配置 -->
-    <div v-else-if="needsConditions" class="space-y-12px">
+    <div v-if="needsConditions" class="space-y-12px">
       <div class="flex items-center justify-between mb-12px">
         <div class="flex items-center gap-8px">
           <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发条件</span>
-          <!-- TODO @puhui999：去掉数量限制 -->
           <el-tag size="small" type="info">
-            {{ trigger.conditionGroups?.length || 0 }}/{{ maxConditionGroups }}
+            {{ trigger.conditionGroups?.length || 0 }}个条件组
           </el-tag>
         </div>
         <div class="flex items-center gap-8px">
@@ -52,18 +40,13 @@
           :key="`group-${groupIndex}`"
           class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
         >
-          <div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]">
+          <div
+            class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]"
+          >
             <div class="flex items-center text-14px font-500 text-[var(--el-text-color-primary)]">
               <span>条件组 {{ groupIndex + 1 }}</span>
               <!-- TODO @puhui999：不用“且、或”哈。条件组之间，就是或；条件之间就是且 -->
-              <el-select
-                v-model="group.logicOperator"
-                size="small"
-                class="w-80px ml-12px"
-              >
-                <el-option label="且" value="AND" />
-                <el-option label="或" value="OR" />
-              </el-select>
+              <el-tag size="small" type="info" class="ml-8px">条件间为"且"关系</el-tag>
             </div>
             <el-button
               type="danger"
@@ -262,5 +245,4 @@ watch(
     updateValidationResult()
   }
 )
-// TODO @puhui999：unocss - 已完成转换
 </script>
diff --git a/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
index 5bb39ab1..6d09cf0c 100644
--- a/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/TimerTriggerConfig.vue
@@ -1,52 +1,23 @@
 <!-- 定时触发配置组件 -->
 <template>
   <div class="flex flex-col gap-16px">
-    <div class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
-      <div class="flex items-center gap-8px">
-        <Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
-        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">定时触发配置</span>
-      </div>
-      <div class="flex items-center gap-8px">
-        <el-button type="text" size="small" @click="showBuilder = !showBuilder">
-          <Icon :icon="showBuilder ? 'ep:edit' : 'ep:setting'" />
-          {{ showBuilder ? '手动编辑' : '可视化编辑' }}
-        </el-button>
-      </div>
+    <div class="flex items-center gap-8px p-12px px-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <Icon icon="ep:timer" class="text-[var(--el-color-danger)] text-18px" />
+      <span class="text-14px font-500 text-[var(--el-text-color-primary)]">定时触发配置</span>
     </div>
 
-    <!-- 可视化编辑器 -->
-    <!-- TODO @puhui999：是不是复用现有的 cron 组件；不然有点重复哈；维护比较复杂 -->
-    <div v-if="showBuilder" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
-      <CronBuilder v-model="localValue" @validate="handleValidate" />
-    </div>
-
-    <!-- 手动编辑 -->
-    <div v-else class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
+    <!-- CRON表达式配置 -->
+    <div class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
       <el-form-item label="CRON表达式" required>
-        <CronInput v-model="localValue" @validate="handleValidate" />
+        <Crontab v-model="localValue" />
       </el-form-item>
     </div>
-
-    <!-- 下次执行时间预览 -->
-    <NextExecutionPreview :cron-expression="localValue" />
-
-    <!-- 验证结果 -->
-    <div v-if="validationMessage" class="mt-8px">
-      <el-alert
-        :title="validationMessage"
-        :type="isValid ? 'success' : 'error'"
-        :closable="false"
-        show-icon
-      />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import CronBuilder from '../inputs/CronBuilder.vue'
-import CronInput from '../inputs/CronInput.vue'
-import NextExecutionPreview from '../previews/NextExecutionPreview.vue'
+import { Crontab } from '@/components/Crontab'
 
 /** 定时触发配置组件 */
 defineOptions({ name: 'TimerTriggerConfig' })
@@ -66,23 +37,4 @@ const emit = defineEmits<Emits>()
 const localValue = useVModel(props, 'modelValue', emit, {
   defaultValue: '0 0 12 * * ?'
 })
-
-// 状态
-const showBuilder = ref(true)
-const validationMessage = ref('')
-const isValid = ref(true)
-
-// 事件处理
-const handleValidate = (result: { valid: boolean; message: string }) => {
-  isValid.value = result.valid
-  validationMessage.value = result.message
-  emit('validate', result)
-}
-
-// 初始验证
-onMounted(() => {
-  handleValidate({ valid: true, message: '定时触发配置验证通过' })
-})
-</script>
-
-
+</script>
\ No newline at end of file
diff --git a/src/views/iot/rule/scene/form/inputs/CronBuilder.vue b/src/views/iot/rule/scene/form/inputs/CronBuilder.vue
deleted file mode 100644
index ac91daff..00000000
--- a/src/views/iot/rule/scene/form/inputs/CronBuilder.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<!-- CRON 可视化构建器组件 -->
-<!-- TODO @puhui999：看看能不能复用全局的 cron 组件 -->
-<template>
-  <div class="cron-builder">
-    <div class="builder-header">
-      <span class="header-title">可视化 CRON 编辑器</span>
-    </div>
-
-    <div class="builder-content">
-      <!-- 快捷选项 -->
-      <div class="quick-options">
-        <span class="options-label">常用配置：</span>
-        <el-button
-          v-for="option in quickOptions"
-          :key="option.label"
-          size="small"
-          @click="applyQuickOption(option)"
-        >
-          {{ option.label }}
-        </el-button>
-      </div>
-
-      <!-- 详细配置 -->
-      <div class="detailed-config">
-        <el-row :gutter="16">
-          <el-col :span="4">
-            <el-form-item label="秒">
-              <el-select v-model="cronParts.second" @change="updateCronExpression">
-                <el-option label="每秒" value="*" />
-                <el-option label="0秒" value="0" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item label="分钟">
-              <el-select v-model="cronParts.minute" @change="updateCronExpression">
-                <el-option label="每分钟" value="*" />
-                <el-option
-                  v-for="i in 60"
-                  :key="i - 1"
-                  :label="`${i - 1}分`"
-                  :value="String(i - 1)"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item label="小时">
-              <el-select v-model="cronParts.hour" @change="updateCronExpression">
-                <el-option label="每小时" value="*" />
-                <el-option
-                  v-for="i in 24"
-                  :key="i - 1"
-                  :label="`${i - 1}时`"
-                  :value="String(i - 1)"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item label="日">
-              <el-select v-model="cronParts.day" @change="updateCronExpression">
-                <el-option label="每日" value="*" />
-                <el-option v-for="i in 31" :key="i" :label="`${i}日`" :value="String(i)" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item label="月">
-              <el-select v-model="cronParts.month" @change="updateCronExpression">
-                <el-option label="每月" value="*" />
-                <el-option
-                  v-for="(month, index) in months"
-                  :key="index"
-                  :label="month"
-                  :value="String(index + 1)"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item label="周">
-              <el-select v-model="cronParts.week" @change="updateCronExpression">
-                <el-option label="每周" value="*" />
-                <el-option
-                  v-for="(week, index) in weeks"
-                  :key="index"
-                  :label="week"
-                  :value="String(index)"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-/** CRON 可视化构建器组件 */
-defineOptions({ name: 'CronBuilder' })
-
-interface Props {
-  modelValue: string
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-  (e: 'validate', result: { valid: boolean; message: string }): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const localValue = useVModel(props, 'modelValue', emit)
-
-// CRON 各部分
-const cronParts = reactive({
-  second: '0',
-  minute: '0',
-  hour: '12',
-  day: '*',
-  month: '*',
-  week: '?'
-})
-
-// 常量数据
-const months = [
-  '1月',
-  '2月',
-  '3月',
-  '4月',
-  '5月',
-  '6月',
-  '7月',
-  '8月',
-  '9月',
-  '10月',
-  '11月',
-  '12月'
-]
-const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-
-// 快捷选项
-const quickOptions = [
-  { label: '每分钟', cron: '0 * * * * ?' },
-  { label: '每小时', cron: '0 0 * * * ?' },
-  { label: '每天中午', cron: '0 0 12 * * ?' },
-  { label: '每天凌晨', cron: '0 0 0 * * ?' },
-  { label: '工作日9点', cron: '0 0 9 * * MON-FRI' },
-  { label: '每周一', cron: '0 0 9 * * MON' }
-]
-
-// 方法
-const updateCronExpression = () => {
-  localValue.value = `${cronParts.second} ${cronParts.minute} ${cronParts.hour} ${cronParts.day} ${cronParts.month} ${cronParts.week}`
-  emit('validate', { valid: true, message: 'CRON表达式验证通过' })
-}
-
-const applyQuickOption = (option: any) => {
-  localValue.value = option.cron
-  parseCronExpression()
-  emit('validate', { valid: true, message: 'CRON表达式验证通过' })
-}
-
-const parseCronExpression = () => {
-  if (!localValue.value) return
-
-  const parts = localValue.value.split(' ')
-  if (parts.length >= 6) {
-    cronParts.second = parts[0] || '0'
-    cronParts.minute = parts[1] || '0'
-    cronParts.hour = parts[2] || '12'
-    cronParts.day = parts[3] || '*'
-    cronParts.month = parts[4] || '*'
-    cronParts.week = parts[5] || '?'
-  }
-}
-
-// 初始化
-onMounted(() => {
-  if (localValue.value) {
-    parseCronExpression()
-  } else {
-    updateCronExpression()
-  }
-})
-</script>
-
-<style scoped>
-.cron-builder {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 6px;
-  background: var(--el-fill-color-blank);
-}
-
-.builder-header {
-  padding: 12px 16px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.header-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.builder-content {
-  padding: 16px;
-}
-
-.quick-options {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-}
-
-.options-label {
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-  white-space: nowrap;
-}
-
-.detailed-config {
-  margin-top: 16px;
-}
-
-:deep(.el-form-item) {
-  margin-bottom: 0;
-}
-
-:deep(.el-form-item__label) {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-</style>
diff --git a/src/views/iot/rule/scene/form/inputs/CronInput.vue b/src/views/iot/rule/scene/form/inputs/CronInput.vue
deleted file mode 100644
index 42591878..00000000
--- a/src/views/iot/rule/scene/form/inputs/CronInput.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<!-- CRON 表达式输入组件 -->
-<!-- TODO @puhui999：看看能不能复用全局的 cron 组件 -->
-<template>
-  <div class="cron-input">
-    <el-input
-      v-model="localValue"
-      placeholder="请输入 CRON 表达式，如：0 0 12 * * ?"
-      @blur="handleBlur"
-      @input="handleInput"
-    >
-      <template #suffix>
-        <el-tooltip content="CRON 表达式帮助" placement="top">
-          <Icon icon="ep:question-filled" class="input-help" @click="showHelp = !showHelp" />
-        </el-tooltip>
-      </template>
-    </el-input>
-
-    <!-- 帮助信息 -->
-    <div v-if="showHelp" class="cron-help">
-      <el-alert title="CRON 表达式格式：秒 分 时 日 月 周" type="info" :closable="false" show-icon>
-        <template #default>
-          <div class="help-content">
-            <p><strong>示例：</strong></p>
-            <ul>
-              <li><code>0 0 12 * * ?</code> - 每天中午12点执行</li>
-              <li><code>0 */5 * * * ?</code> - 每5分钟执行一次</li>
-              <li><code>0 0 9-17 * * MON-FRI</code> - 工作日9-17点每小时执行</li>
-            </ul>
-            <p><strong>特殊字符：</strong></p>
-            <ul>
-              <li><code>*</code> - 匹配任意值</li>
-              <li><code>?</code> - 不指定值（用于日和周）</li>
-              <li><code>/</code> - 间隔触发，如 */5 表示每5个单位</li>
-              <li><code>-</code> - 范围，如 9-17 表示9到17</li>
-              <li><code>,</code> - 列举，如 MON,WED,FRI</li>
-            </ul>
-          </div>
-        </template>
-      </el-alert>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { validateCronExpression } from '../../utils/validation'
-
-/** CRON 表达式输入组件 */
-defineOptions({ name: 'CronInput' })
-
-interface Props {
-  modelValue: string
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-  (e: 'validate', result: { valid: boolean; message: string }): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const localValue = useVModel(props, 'modelValue', emit)
-
-// 状态
-const showHelp = ref(false)
-
-// 事件处理
-const handleInput = () => {
-  validateExpression()
-}
-
-const handleBlur = () => {
-  validateExpression()
-}
-
-const validateExpression = () => {
-  if (!localValue.value) {
-    emit('validate', { valid: false, message: '请输入CRON表达式' })
-    return
-  }
-
-  const isValid = validateCronExpression(localValue.value)
-  if (isValid) {
-    emit('validate', { valid: true, message: 'CRON表达式验证通过' })
-  } else {
-    emit('validate', { valid: false, message: 'CRON表达式格式不正确' })
-  }
-}
-
-// 监听值变化
-watch(
-  () => localValue.value,
-  () => {
-    validateExpression()
-  }
-)
-
-// 初始化
-onMounted(() => {
-  if (localValue.value) {
-    validateExpression()
-  }
-})
-</script>
-
-<style scoped>
-.cron-input {
-  width: 100%;
-}
-
-.input-help {
-  color: var(--el-text-color-placeholder);
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.input-help:hover {
-  color: var(--el-color-primary);
-}
-
-.cron-help {
-  margin-top: 8px;
-}
-
-.help-content ul {
-  margin: 8px 0 0 0;
-  padding-left: 20px;
-}
-
-.help-content li {
-  margin-bottom: 4px;
-}
-
-.help-content code {
-  background: var(--el-fill-color-light);
-  padding: 2px 4px;
-  border-radius: 2px;
-  font-family: 'Courier New', monospace;
-}
-</style>
diff --git a/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue b/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue
deleted file mode 100644
index 6d7db598..00000000
--- a/src/views/iot/rule/scene/form/inputs/DescriptionInput.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<!-- 场景描述输入组件 -->
-<template>
-  <div class="relative w-full">
-    <el-input
-      ref="inputRef"
-      v-model="localValue"
-      type="textarea"
-      placeholder="请输入场景描述（可选）"
-      :rows="3"
-      maxlength="200"
-      show-word-limit
-      resize="none"
-      @input="handleInput"
-    />
-
-    <!-- 描述模板 -->
-    <teleport to="body">
-      <div v-if="showTemplates" ref="templateDropdownRef" class="fixed z-1000 bg-white border border-[var(--el-border-color-light)] rounded-6px shadow-[var(--el-box-shadow)] min-w-300px max-w-400px" :style="dropdownStyle">
-        <div class="flex items-center justify-between p-12px border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]">
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">描述模板</span>
-          <el-button type="text" size="small" @click="showTemplates = false">
-            <Icon icon="ep:close" />
-          </el-button>
-        </div>
-        <div class="max-h-300px overflow-y-auto">
-          <div
-            v-for="template in descriptionTemplates"
-            :key="template.title"
-            class="p-12px border-b border-[var(--el-border-color-lighter)] cursor-pointer transition-colors duration-200 hover:bg-[var(--el-fill-color-light)] last:border-b-0"
-            @click="applyTemplate(template)"
-          >
-            <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-4px">{{ template.title }}</div>
-            <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ template.content }}</div>
-          </div>
-        </div>
-      </div>
-    </teleport>
-
-    <!-- TODO @puhui999：不用模版哈，简单点。。。 -->
-    <!-- 模板按钮 -->
-    <div v-if="!localValue && !showTemplates" class="absolute top-2px right-2px">
-      <el-button type="text" size="small" @click="toggleTemplates">
-        <Icon icon="ep:document" class="mr-1" />
-        使用模板
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-/** 场景描述输入组件 */
-defineOptions({ name: 'DescriptionInput' })
-
-interface Props {
-  modelValue?: string
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const localValue = useVModel(props, 'modelValue', emit, {
-  defaultValue: ''
-})
-
-const showTemplates = ref(false)
-const templateDropdownRef = ref()
-const inputRef = ref()
-const dropdownStyle = ref({})
-
-// 描述模板
-const descriptionTemplates = [
-  {
-    title: '温度控制场景',
-    content: '当环境温度超过设定阈值时，自动启动空调降温设备，确保环境温度保持在舒适范围内。'
-  },
-  {
-    title: '设备监控场景',
-    content: '实时监控关键设备的运行状态，当设备出现异常或离线时，立即发送告警通知相关人员。'
-  },
-  {
-    title: '节能控制场景',
-    content: '根据时间段和环境条件，自动调节设备功率或关闭非必要设备，实现智能节能管理。'
-  },
-  {
-    title: '安防联动场景',
-    content: '当检测到异常情况时，自动触发安防设备联动，包括报警器、摄像头录制等安全措施。'
-  },
-  {
-    title: '定时任务场景',
-    content: '按照预设的时间计划，定期执行设备检查、数据备份或系统维护等自动化任务。'
-  }
-]
-
-// 计算下拉框位置
-const calculateDropdownPosition = () => {
-  if (!inputRef.value) return
-
-  const inputElement = inputRef.value.$el || inputRef.value
-  const rect = inputElement.getBoundingClientRect()
-  const viewportHeight = window.innerHeight
-  const dropdownHeight = 300 // 预估下拉框高度
-
-  let top = rect.bottom + 4
-  let left = rect.left
-
-  // 如果下方空间不够，显示在上方
-  if (top + dropdownHeight > viewportHeight) {
-    top = rect.top - dropdownHeight - 4
-  }
-
-  // 确保不超出左右边界
-  const maxLeft = window.innerWidth - 400 // 下拉框最大宽度
-  if (left > maxLeft) {
-    left = maxLeft
-  }
-  if (left < 10) {
-    left = 10
-  }
-
-  dropdownStyle.value = {
-    top: `${top}px`,
-    left: `${left}px`
-  }
-}
-
-const handleInput = (value: string) => {
-  if (value.length > 0) {
-    showTemplates.value = false
-  }
-}
-
-const applyTemplate = (template: any) => {
-  localValue.value = template.content
-  showTemplates.value = false
-}
-
-const toggleTemplates = () => {
-  showTemplates.value = !showTemplates.value
-  if (showTemplates.value) {
-    nextTick(() => {
-      calculateDropdownPosition()
-    })
-  }
-}
-
-// 点击外部关闭下拉框
-const handleClickOutside = (event: Event) => {
-  if (
-    templateDropdownRef.value &&
-    !templateDropdownRef.value.contains(event.target as Node) &&
-    inputRef.value &&
-    !inputRef.value.$el.contains(event.target as Node)
-  ) {
-    showTemplates.value = false
-  }
-}
-
-// 监听窗口大小变化和点击事件
-onMounted(() => {
-  window.addEventListener('resize', calculateDropdownPosition)
-  window.addEventListener('scroll', calculateDropdownPosition)
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', calculateDropdownPosition)
-  window.removeEventListener('scroll', calculateDropdownPosition)
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
-
-
diff --git a/src/views/iot/rule/scene/form/inputs/NameInput.vue b/src/views/iot/rule/scene/form/inputs/NameInput.vue
deleted file mode 100644
index 4eba6d38..00000000
--- a/src/views/iot/rule/scene/form/inputs/NameInput.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<!-- 场景名称输入组件 -->
-<template>
-  <div class="relative w-full">
-    <el-input
-      v-model="localValue"
-      placeholder="请输入场景名称"
-      maxlength="50"
-      show-word-limit
-      clearable
-      @blur="handleBlur"
-      @input="handleInput"
-    >
-      <template #prefix>
-        <Icon icon="ep:edit" class="text-[var(--el-text-color-placeholder)]" />
-      </template>
-    </el-input>
-
-    <!-- 智能提示 -->
-    <!-- TODO @puhui999：暂时不用考虑智能推荐哈。用途不大 -->
-    <div v-if="showSuggestions && suggestions.length > 0" class="absolute top-full left-0 right-0 z-1000 bg-white border border-[var(--el-border-color-light)] rounded-4px shadow-[var(--el-box-shadow-light)] mt-4px">
-      <div class="p-8px px-12px border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]">
-        <span class="text-12px text-[var(--el-text-color-secondary)] font-500">推荐名称</span>
-      </div>
-      <div class="max-h-200px overflow-y-auto">
-        <div
-          v-for="suggestion in suggestions"
-          :key="suggestion"
-          class="p-8px px-12px cursor-pointer transition-colors duration-200 text-14px text-[var(--el-text-color-primary)] hover:bg-[var(--el-fill-color-light)] last:border-b-0"
-          @click="applySuggestion(suggestion)"
-        >
-          {{ suggestion }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-/** 场景名称输入组件 */
-defineOptions({ name: 'NameInput' })
-
-interface Props {
-  modelValue: string
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const localValue = useVModel(props, 'modelValue', emit)
-
-// 智能提示相关
-const showSuggestions = ref(false)
-const suggestions = ref<string[]>([])
-
-// 常用场景名称模板
-const nameTemplates = [
-  '温度过高自动降温',
-  '设备离线告警通知',
-  '湿度异常自动调节',
-  '夜间安防模式启动',
-  '能耗超标自动关闭',
-  '故障设备自动重启',
-  '定时设备状态检查',
-  '环境数据异常告警'
-]
-
-const handleInput = (value: string) => {
-  if (value.length > 0 && value.length < 10) {
-    // 根据输入内容过滤建议
-    suggestions.value = nameTemplates
-      .filter(
-        (template) =>
-          template.includes(value) || (value.includes('温度') && template.includes('温度'))
-      )
-      .slice(0, 5)
-    showSuggestions.value = suggestions.value.length > 0
-  } else {
-    showSuggestions.value = false
-  }
-}
-
-const handleBlur = () => {
-  // 延迟隐藏建议，允许点击建议项
-  setTimeout(() => {
-    showSuggestions.value = false
-  }, 200)
-}
-
-const applySuggestion = (suggestion: string) => {
-  localValue.value = suggestion
-  showSuggestions.value = false
-}
-
-// 监听外部点击隐藏建议
-onMounted(() => {
-  document.addEventListener('click', (e) => {
-    const target = e.target as HTMLElement
-    if (!target.closest('.name-input')) {
-      showSuggestions.value = false
-    }
-  })
-})
-</script>
-
-
diff --git a/src/views/iot/rule/scene/form/inputs/StatusRadio.vue b/src/views/iot/rule/scene/form/inputs/StatusRadio.vue
deleted file mode 100644
index d8dcc591..00000000
--- a/src/views/iot/rule/scene/form/inputs/StatusRadio.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<!-- 场景状态选择组件 -->
-<template>
-  <div class="status-radio">
-    <el-radio-group 
-      v-model="localValue" 
-      @change="handleChange"
-    >
-      <el-radio :value="0" class="status-option">
-        <div class="status-content">
-          <div class="status-indicator enabled"></div>
-          <div class="status-info">
-            <div class="status-label">启用</div>
-            <div class="status-desc">场景规则生效，满足条件时自动执行</div>
-          </div>
-        </div>
-      </el-radio>
-      
-      <el-radio :value="1" class="status-option">
-        <div class="status-content">
-          <div class="status-indicator disabled"></div>
-          <div class="status-info">
-            <div class="status-label">禁用</div>
-            <div class="status-desc">场景规则暂停，不会触发任何执行动作</div>
-          </div>
-        </div>
-      </el-radio>
-    </el-radio-group>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-
-/** 场景状态选择组件 */
-defineOptions({ name: 'StatusRadio' })
-
-interface Props {
-  modelValue: number
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: number): void
-  (e: 'change', value: number): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const localValue = useVModel(props, 'modelValue', emit)
-
-const handleChange = (value: number) => {
-  emit('change', value)
-}
-</script>
-
-<style scoped>
-.status-radio {
-  width: 100%;
-}
-
-.status-radio :deep(.el-radio) {
-  margin-bottom: 8px;
-}
-
-.status-radio :deep(.el-radio:last-child) {
-  margin-bottom: 0;
-}
-
-:deep(.el-radio-group) {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  width: 100%;
-  align-items: flex-start;
-}
-
-:deep(.el-radio) {
-  margin-right: 0;
-  width: auto;
-  flex: 1;
-  height: auto;
-  align-items: flex-start;
-}
-
-.status-option {
-  width: auto;
-  flex: 1;
-}
-
-:deep(.el-radio__input) {
-  margin-top: 12px;
-  flex-shrink: 0;
-}
-
-:deep(.el-radio__label) {
-  width: 100%;
-  padding-left: 8px;
-}
-
-.status-content {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 6px;
-  transition: all 0.2s;
-  width: 100%;
-  margin-left: 0;
-}
-
-:deep(.el-radio.is-checked) .status-content {
-  border-color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-}
-
-.status-content:hover {
-  border-color: var(--el-color-primary-light-3);
-}
-
-.status-indicator {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  margin-top: 4px;
-  flex-shrink: 0;
-}
-
-.status-indicator.enabled {
-  background: var(--el-color-success);
-  box-shadow: 0 0 0 2px var(--el-color-success-light-8);
-}
-
-.status-indicator.disabled {
-  background: var(--el-color-danger);
-  box-shadow: 0 0 0 2px var(--el-color-danger-light-8);
-}
-
-.status-info {
-  flex: 1;
-}
-
-.status-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  margin-bottom: 4px;
-}
-
-.status-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-}
-
-
-</style>
diff --git a/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue b/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue
index 2bdbbf49..ed3245b1 100644
--- a/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue
+++ b/src/views/iot/rule/scene/form/sections/BasicInfoSection.vue
@@ -16,23 +16,42 @@
     </template>
 
     <div class="p-0">
-      <el-row :gutter="24">
-        <!-- TODO @puhui999：NameInput、StatusRadio、DescriptionInput 是不是直接写在当前界面哈。有点散； -->
+      <el-row :gutter="24" class="mb-24px">
         <el-col :span="12">
           <el-form-item label="场景名称" prop="name" required>
-            <NameInput v-model="formData.name" />
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入场景名称"
+              maxlength="50"
+              show-word-limit
+              clearable
+            />
           </el-form-item>
         </el-col>
-        <!-- TODO @puhui999：每个一行会好点？ -->
         <el-col :span="12">
           <el-form-item label="场景状态" prop="status" required>
-            <StatusRadio v-model="formData.status" />
+            <el-radio-group v-model="formData.status">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
           </el-form-item>
         </el-col>
       </el-row>
-
       <el-form-item label="场景描述" prop="description">
-        <DescriptionInput v-model="formData.description" />
+        <el-input
+          v-model="formData.description"
+          type="textarea"
+          placeholder="请输入场景描述（可选）"
+          :rows="3"
+          maxlength="200"
+          show-word-limit
+          resize="none"
+        />
       </el-form-item>
     </div>
   </el-card>
@@ -40,9 +59,7 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import NameInput from '../inputs/NameInput.vue'
-import DescriptionInput from '../inputs/DescriptionInput.vue'
-import StatusRadio from '../inputs/StatusRadio.vue'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { RuleSceneFormData } from '@/api/iot/rule/scene/scene.types'
 
 /** 基础信息配置组件 */
@@ -61,7 +78,6 @@ const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 const formData = useVModel(props, 'modelValue', emit)
-// TODO @puhui999：看看能不能 unocss
 </script>
 
 <style scoped>
diff --git a/src/views/iot/rule/scene/form/sections/TriggerSection.vue b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
index 3f05ff6e..abf9f75f 100644
--- a/src/views/iot/rule/scene/form/sections/TriggerSection.vue
+++ b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
@@ -6,15 +6,13 @@
         <div class="flex items-center gap-8px">
           <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
           <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
-          <!-- TODO @puhui999：是不是去掉 maxTriggers；计数 -->
-          <el-tag size="small" type="info">{{ triggers.length }}/{{ maxTriggers }}</el-tag>
+          <el-tag size="small" type="info">{{ triggers.length }}个触发器</el-tag>
         </div>
         <div class="flex items-center gap-8px">
           <el-button
             type="primary"
             size="small"
             @click="addTrigger"
-            :disabled="triggers.length >= maxTriggers"
           >
             <Icon icon="ep:plus" />
             添加触发器
@@ -26,13 +24,7 @@
     <div class="p-0">
       <!-- 空状态 -->
       <div v-if="triggers.length === 0">
-        <el-empty description="暂无触发器配置">
-          <!-- TODO @puhui999：这个要不要去掉哈；入口统一点 -->
-          <el-button type="primary" @click="addTrigger">
-            <Icon icon="ep:plus" />
-            添加第一个触发器
-          </el-button>
-        </el-empty>
+        <el-empty description="暂无触发器配置，请点击右上角添加触发器按钮开始配置" />
       </div>
 
       <!-- 触发器列表 -->
@@ -62,18 +54,28 @@
 
           <div class="space-y-16px">
             <!-- 触发类型选择 -->
-            <TriggerTypeSelector
-              :model-value="trigger.type"
-              @update:model-value="(value) => updateTriggerType(index, value)"
-              @change="onTriggerTypeChange(trigger, $event)"
-            />
+            <el-form-item label="触发类型" required>
+              <el-select
+                :model-value="trigger.type"
+                @update:model-value="(value) => updateTriggerType(index, value)"
+                @change="onTriggerTypeChange(trigger, $event)"
+                placeholder="请选择触发类型"
+                class="w-full"
+              >
+                <el-option
+                  v-for="option in triggerTypeOptions"
+                  :key="option.value"
+                  :label="option.label"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
 
             <!-- 设备触发配置 -->
             <DeviceTriggerConfig
               v-if="isDeviceTrigger(trigger.type)"
               :model-value="trigger"
               @update:model-value="(value) => updateTrigger(index, value)"
-              @validate="(result) => handleTriggerValidate(index, result)"
             />
 
             <!-- 定时触发配置 -->
@@ -81,38 +83,16 @@
               v-if="trigger.type === TriggerTypeEnum.TIMER"
               :model-value="trigger.cronExpression"
               @update:model-value="(value) => updateTriggerCronExpression(index, value)"
-              @validate="(result) => handleTriggerValidate(index, result)"
             />
           </div>
         </div>
       </div>
-
-      <!-- 添加提示 -->
-      <!-- TODO @puhui999：这个要不要去掉哈；入口统一点 -->
-      <div v-if="triggers.length > 0 && triggers.length < maxTriggers" class="text-center py-16px">
-        <el-button type="primary" plain @click="addTrigger">
-          <Icon icon="ep:plus" />
-          继续添加触发器
-        </el-button>
-        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxTriggers }} 个触发器 </span>
-      </div>
-
-      <!-- 验证结果 -->
-      <div v-if="validationMessage" class="validation-result">
-        <el-alert
-          :title="validationMessage"
-          :type="isValid ? 'success' : 'error'"
-          :closable="false"
-          show-icon
-        />
-      </div>
     </div>
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import TriggerTypeSelector from '../selectors/TriggerTypeSelector.vue'
 import DeviceTriggerConfig from '../configs/DeviceTriggerConfig.vue'
 import TimerTriggerConfig from '../configs/TimerTriggerConfig.vue'
 import {
@@ -129,7 +109,6 @@ interface Props {
 
 interface Emits {
   (e: 'update:triggers', value: TriggerFormData[]): void
-  (e: 'validate', result: { valid: boolean; message: string }): void
 }
 
 const props = defineProps<Props>()
@@ -153,13 +132,33 @@ const createDefaultTriggerData = (): TriggerFormData => {
   }
 }
 
-// 配置常量
-const maxTriggers = 5
 
-// 验证状态
-const triggerValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
-const validationMessage = ref('')
-const isValid = ref(true)
+
+
+
+// 触发器类型选项
+const triggerTypeOptions = [
+  {
+    value: TriggerTypeEnum.DEVICE_STATE_UPDATE,
+    label: '设备状态变更'
+  },
+  {
+    value: TriggerTypeEnum.DEVICE_PROPERTY_POST,
+    label: '设备属性上报'
+  },
+  {
+    value: TriggerTypeEnum.DEVICE_EVENT_POST,
+    label: '设备事件上报'
+  },
+  {
+    value: TriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+    label: '设备服务调用'
+  },
+  {
+    value: TriggerTypeEnum.TIMER,
+    label: '定时触发'
+  }
+]
 
 // 触发器类型映射
 const triggerTypeNames = {
@@ -180,12 +179,13 @@ const triggerTypeTags = {
 
 // 工具函数
 const isDeviceTrigger = (type: number) => {
-  return [
+  const deviceTriggerTypes = [
     TriggerTypeEnum.DEVICE_STATE_UPDATE,
     TriggerTypeEnum.DEVICE_PROPERTY_POST,
     TriggerTypeEnum.DEVICE_EVENT_POST,
     TriggerTypeEnum.DEVICE_SERVICE_INVOKE
-  ].includes(type)
+  ] as number[]
+  return deviceTriggerTypes.includes(type)
 }
 
 const getTriggerTypeName = (type: number) => {
@@ -198,31 +198,12 @@ const getTriggerTypeTag = (type: number) => {
 
 // 事件处理
 const addTrigger = () => {
-  if (triggers.value.length >= maxTriggers) {
-    return
-  }
-
   const newTrigger = createDefaultTriggerData()
   triggers.value.push(newTrigger)
 }
 
 const removeTrigger = (index: number) => {
   triggers.value.splice(index, 1)
-  delete triggerValidations.value[index]
-
-  // 重新索引验证结果
-  const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
-  Object.keys(triggerValidations.value).forEach((key) => {
-    const numKey = parseInt(key)
-    if (numKey > index) {
-      newValidations[numKey - 1] = triggerValidations.value[numKey]
-    } else if (numKey < index) {
-      newValidations[numKey] = triggerValidations.value[numKey]
-    }
-  })
-  triggerValidations.value = newValidations
-
-  updateValidationResult()
 }
 
 const updateTriggerType = (index: number, type: number) => {
@@ -259,39 +240,6 @@ const onTriggerTypeChange = (trigger: TriggerFormData, type: number) => {
     }
   }
 }
-
-const handleTriggerValidate = (index: number, result: { valid: boolean; message: string }) => {
-  triggerValidations.value[index] = result
-  updateValidationResult()
-}
-
-const updateValidationResult = () => {
-  const validations = Object.values(triggerValidations.value)
-  const allValid = validations.every((v) => v.valid)
-  const hasValidations = validations.length > 0
-
-  if (!hasValidations) {
-    isValid.value = true
-    validationMessage.value = ''
-  } else if (allValid) {
-    isValid.value = true
-    validationMessage.value = '所有触发器配置验证通过'
-  } else {
-    isValid.value = false
-    const errorMessages = validations.filter((v) => !v.valid).map((v) => v.message)
-    validationMessage.value = `触发器配置错误: ${errorMessages.join('; ')}`
-  }
-
-  emit('validate', { valid: isValid.value, message: validationMessage.value })
-}
-
-// 监听触发器数量变化
-watch(
-  () => triggers.value.length,
-  () => {
-    updateValidationResult()
-  }
-)
 </script>
 
 
diff --git a/src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue b/src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue
deleted file mode 100644
index 48648ddf..00000000
--- a/src/views/iot/rule/scene/form/selectors/TriggerTypeSelector.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!-- 触发器类型选择组件 -->
-<template>
-  <div class="w-full">
-    <el-form-item label="触发类型" required>
-      <el-select
-        v-model="localValue"
-        placeholder="请选择触发类型"
-        @change="handleChange"
-        class="w-full"
-      >
-        <el-option
-          v-for="option in triggerTypeOptions"
-          :key="option.value"
-          :label="option.label"
-          :value="option.value"
-        >
-          <div class="flex items-center justify-between w-full py-4px">
-            <div class="flex items-center gap-12px flex-1">
-              <!-- TODO @puhui999：貌似没对齐？ -->
-              <Icon :icon="option.icon" class="text-18px text-[var(--el-color-primary)] flex-shrink-0" />
-              <div class="flex-1">
-                <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{ option.label }}</div>
-                <div class="text-12px text-[var(--el-text-color-secondary)] leading-relaxed">{{ option.description }}</div>
-              </div>
-            </div>
-            <!-- TODO @puhui999：这个要不去掉？ -->
-            <el-tag :type="option.tag" size="small">
-              {{ option.category }}
-            </el-tag>
-          </div>
-        </el-option>
-      </el-select>
-    </el-form-item>
-
-    <!-- 类型说明 -->
-    <!-- TODO @puhui999：这个去掉。感觉没啥内容哈； -->
-    <div v-if="selectedOption" class="mt-16px p-16px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
-      <div class="flex items-center gap-8px mb-12px">
-        <Icon :icon="selectedOption.icon" class="text-20px text-[var(--el-color-primary)]" />
-        <span class="text-16px font-600 text-[var(--el-text-color-primary)]">{{ selectedOption.label }}</span>
-      </div>
-      <div class="ml-28px">
-        <p class="text-14px text-[var(--el-text-color-regular)] m-0 mb-12px leading-relaxed">{{ selectedOption.description }}</p>
-        <div class="flex flex-col gap-6px">
-          <div v-for="feature in selectedOption.features" :key="feature" class="flex items-center gap-6px">
-            <Icon icon="ep:check" class="text-12px text-[var(--el-color-success)] flex-shrink-0" />
-            <span class="text-12px text-[var(--el-text-color-secondary)]">{{ feature }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { IotRuleSceneTriggerTypeEnum } from '@/api/iot/rule/scene/scene.types'
-
-/** 触发器类型选择组件 */
-defineOptions({ name: 'TriggerTypeSelector' })
-
-interface Props {
-  modelValue: number
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: number): void
-  (e: 'change', value: number): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const localValue = useVModel(props, 'modelValue', emit)
-
-// 触发器类型选项
-const triggerTypeOptions = [
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
-    label: '设备状态变更',
-    description: '当设备上线、离线状态发生变化时触发',
-    icon: 'ep:connection',
-    tag: 'warning',
-    category: '设备状态',
-    features: ['监控设备连接状态', '实时响应设备变化', '无需配置额外条件']
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
-    label: '设备属性上报',
-    description: '当设备属性值满足指定条件时触发',
-    icon: 'ep:data-line',
-    tag: 'primary',
-    category: '数据监控',
-    features: ['监控设备属性变化', '支持多种比较条件', '可配置阈值范围']
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
-    label: '设备事件上报',
-    description: '当设备上报特定事件时触发',
-    icon: 'ep:bell',
-    tag: 'success',
-    category: '事件监控',
-    features: ['监控设备事件', '支持事件参数过滤', '实时事件响应']
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
-    label: '设备服务调用',
-    description: '当设备服务被调用时触发',
-    icon: 'ep:service',
-    tag: 'info',
-    category: '服务监控',
-    features: ['监控服务调用', '支持参数条件', '服务执行跟踪']
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.TIMER,
-    label: '定时触发',
-    description: '按照设定的时间计划定时触发',
-    icon: 'ep:timer',
-    tag: 'danger',
-    category: '定时任务',
-    features: ['支持CRON表达式', '灵活的时间配置', '可视化时间设置']
-  }
-]
-
-// 计算属性
-const selectedOption = computed(() => {
-  return triggerTypeOptions.find((option) => option.value === localValue.value)
-})
-
-// 事件处理
-const handleChange = (value: number) => {
-  emit('change', value)
-}
-</script>
-
-<style scoped>
-/** TODO @puhui999：unocss 哈 - 已完成转换 */
-:deep(.el-select-dropdown__item) {
-  height: auto;
-  padding: 8px 20px;
-}
-</style>

From 929bcb4059e73c639e53d35ffcf1b751f0eeacde Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 28 Jul 2025 17:37:28 +0800
Subject: [PATCH 08/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E5=99=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/rule/scene/scene.types.ts         |   2 +
 .../iot/rule/scene/form/RuleSceneForm.vue     |   1 -
 .../form/configs/ConditionGroupConfig.vue     |  75 ++++++----
 .../form/configs/DeviceTriggerConfig.vue      | 135 ++++++++++++------
 4 files changed, 139 insertions(+), 74 deletions(-)

diff --git a/src/api/iot/rule/scene/scene.types.ts b/src/api/iot/rule/scene/scene.types.ts
index 05523bc5..3ae0707f 100644
--- a/src/api/iot/rule/scene/scene.types.ts
+++ b/src/api/iot/rule/scene/scene.types.ts
@@ -151,6 +151,8 @@ interface ActionFormData {
 
 interface ConditionGroupFormData {
   conditions: ConditionFormData[]
+  // 注意：条件组内部的条件固定为"且"关系，条件组之间固定为"或"关系
+  // logicOperator 字段保留用于兼容性，但在UI中固定为 'AND'
   logicOperator: 'AND' | 'OR'
 }
 
diff --git a/src/views/iot/rule/scene/form/RuleSceneForm.vue b/src/views/iot/rule/scene/form/RuleSceneForm.vue
index 2adc9f50..f4b8ca12 100644
--- a/src/views/iot/rule/scene/form/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/form/RuleSceneForm.vue
@@ -44,7 +44,6 @@ import ActionSection from './sections/ActionSection.vue'
 import {
   RuleSceneFormData,
   IotRuleScene,
-  IotRuleSceneTriggerTypeEnum,
   IotRuleSceneActionTypeEnum,
   CommonStatusEnum
 } from '@/api/iot/rule/scene/scene.types'
diff --git a/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue b/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
index 3044cb89..b76d1008 100644
--- a/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
@@ -1,17 +1,37 @@
 <!-- 条件组配置组件 -->
 <template>
   <div class="p-16px">
+    <!-- 条件组说明 -->
+    <div
+      v-if="group.conditions && group.conditions.length > 1"
+      class="mb-12px flex items-center justify-center"
+    >
+      <div
+        class="flex items-center gap-6px px-10px py-4px bg-green-50 border border-green-200 rounded-full text-11px text-green-600"
+      >
+        <Icon icon="ep:info-filled" />
+        <span>组内所有条件必须同时满足（且关系）</span>
+      </div>
+    </div>
+
     <div class="space-y-12px">
       <!-- 条件列表 -->
       <div v-if="group.conditions && group.conditions.length > 0" class="space-y-12px">
         <div
           v-for="(condition, index) in group.conditions"
           :key="`condition-${index}`"
-          class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-light)]"
+          class="p-12px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-light)] shadow-sm hover:shadow-md transition-shadow"
         >
           <div class="flex items-center justify-between mb-12px">
             <div class="flex items-center gap-8px">
-              <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件 {{ index + 1 }}</span>
+              <div class="flex items-center gap-6px">
+                <div
+                  class="w-18px h-18px bg-green-500 text-white rounded-full flex items-center justify-center text-10px font-bold"
+                >
+                  {{ index + 1 }}
+                </div>
+                <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件</span>
+              </div>
               <el-tag size="small" type="primary">
                 {{ getConditionTypeName(condition.type) }}
               </el-tag>
@@ -39,13 +59,21 @@
             />
           </div>
 
-          <!-- 逻辑连接符 -->
-          <!-- TODO @puhui999：不用这个哈； -->
-          <div v-if="index < group.conditions!.length - 1" class="flex justify-center mt-8px">
-            <el-select v-model="group.logicOperator" size="small" class="w-80px">
-              <el-option label="且" value="AND" />
-              <el-option label="或" value="OR" />
-            </el-select>
+          <!-- 条件间的"且"连接符 -->
+          <div
+            v-if="index < group.conditions!.length - 1"
+            class="flex items-center justify-center py-8px"
+          >
+            <div class="flex items-center gap-6px">
+              <!-- 连接线 -->
+              <div class="w-24px h-1px bg-green-300"></div>
+              <!-- 且标签 -->
+              <div class="px-12px py-4px bg-green-100 border-2 border-green-300 rounded-full">
+                <span class="text-12px font-600 text-green-600">且</span>
+              </div>
+              <!-- 连接线 -->
+              <div class="w-24px h-1px bg-green-300"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -53,10 +81,14 @@
       <!-- 空状态 -->
       <div v-else class="py-40px text-center">
         <el-empty description="暂无条件配置" :image-size="80">
-          <el-button type="primary" @click="addCondition">
-            <Icon icon="ep:plus" />
-            添加第一个条件
-          </el-button>
+          <template #description>
+            <div class="space-y-8px">
+              <p class="text-[var(--el-text-color-secondary)]">暂无条件配置</p>
+              <p class="text-12px text-[var(--el-text-color-placeholder)]">
+                条件组需要至少包含一个条件才能生效
+              </p>
+            </div>
+          </template>
         </el-empty>
       </div>
 
@@ -71,20 +103,11 @@
           <Icon icon="ep:plus" />
           继续添加条件
         </el-button>
-        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]"> 最多可添加 {{ maxConditions }} 个条件 </span>
+        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]">
+          最多可添加 {{ maxConditions }} 个条件
+        </span>
       </div>
     </div>
-
-    <!-- 验证结果 -->
-    <!-- TODO @puhui999：是不是不用这种提示；只要 validator rules 能展示出来就好了呀。。。 -->
-    <div v-if="validationMessage" class="mt-8px">
-      <el-alert
-        :title="validationMessage"
-        :type="isValid ? 'success' : 'error'"
-        :closable="false"
-        show-icon
-      />
-    </div>
   </div>
 </template>
 
@@ -229,5 +252,3 @@ onMounted(() => {
   }
 })
 </script>
-
-
diff --git a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
index 629312f2..9d26044e 100644
--- a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@@ -1,4 +1,4 @@
-<!-- 设备触发配置组件 -->
+<!-- 设备触发配置组件 - 优化版本 -->
 <template>
   <div class="flex flex-col gap-16px">
     <!-- 产品和设备选择 -->
@@ -16,6 +16,12 @@
           <el-tag size="small" type="info">
             {{ trigger.conditionGroups?.length || 0 }}个条件组
           </el-tag>
+          <el-tooltip
+            content="条件组之间为'或'关系，满足任意一组即可触发；每个条件组内的条件为'且'关系，需要全部满足"
+            placement="top"
+          >
+            <Icon icon="ep:question-filled" class="text-[var(--el-color-info)] cursor-help" />
+          </el-tooltip>
         </div>
         <div class="flex items-center gap-8px">
           <el-button
@@ -33,64 +39,101 @@
       <!-- 条件组列表 -->
       <div
         v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
-        class="flex flex-col gap-12px"
+        class="space-y-16px"
       >
-        <div
-          v-for="(group, groupIndex) in trigger.conditionGroups"
-          :key="`group-${groupIndex}`"
-          class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]"
-        >
+        <!-- 逻辑关系说明 -->
+        <div v-if="trigger.conditionGroups.length > 1" class="flex items-center justify-center">
           <div
-            class="flex items-center justify-between p-12px px-16px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)]"
+            class="flex items-center gap-8px px-12px py-6px bg-blue-50 border border-blue-200 rounded-full text-12px text-blue-600"
           >
-            <div class="flex items-center text-14px font-500 text-[var(--el-text-color-primary)]">
-              <span>条件组 {{ groupIndex + 1 }}</span>
-              <!-- TODO @puhui999：不用“且、或”哈。条件组之间，就是或；条件之间就是且 -->
-              <el-tag size="small" type="info" class="ml-8px">条件间为"且"关系</el-tag>
-            </div>
-            <el-button
-              type="danger"
-              size="small"
-              text
-              @click="removeConditionGroup(groupIndex)"
-              v-if="trigger.conditionGroups!.length > 1"
-            >
-              <Icon icon="ep:delete" />
-              删除组
-            </el-button>
+            <Icon icon="ep:info-filled" />
+            <span>条件组之间为"或"关系，满足任意一组即可触发</span>
           </div>
+        </div>
 
-          <ConditionGroupConfig
-            :model-value="group"
-            @update:model-value="(value) => updateConditionGroup(groupIndex, value)"
-            :trigger-type="trigger.type"
-            :product-id="trigger.productId"
-            :device-id="trigger.deviceId"
-            @validate="(result) => handleGroupValidate(groupIndex, result)"
-          />
+        <div class="relative">
+          <div
+            v-for="(group, groupIndex) in trigger.conditionGroups"
+            :key="`group-${groupIndex}`"
+            class="relative"
+          >
+            <!-- 条件组容器 -->
+            <div
+              class="border-2 border-[var(--el-border-color-lighter)] rounded-8px bg-[var(--el-fill-color-blank)] shadow-sm hover:shadow-md transition-shadow"
+            >
+              <div
+                class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-[var(--el-border-color-lighter)] rounded-t-6px"
+              >
+                <div class="flex items-center gap-12px">
+                  <div
+                    class="flex items-center gap-8px text-16px font-600 text-[var(--el-text-color-primary)]"
+                  >
+                    <div
+                      class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+                    >
+                      {{ groupIndex + 1 }}
+                    </div>
+                    <span>条件组</span>
+                  </div>
+                  <el-tag size="small" type="success" class="font-500"> 组内条件为"且"关系 </el-tag>
+                </div>
+                <el-button
+                  type="danger"
+                  size="small"
+                  text
+                  @click="removeConditionGroup(groupIndex)"
+                  v-if="trigger.conditionGroups!.length > 1"
+                  class="hover:bg-red-50"
+                >
+                  <Icon icon="ep:delete" />
+                  删除组
+                </el-button>
+              </div>
+
+              <ConditionGroupConfig
+                :model-value="group"
+                @update:model-value="(value) => updateConditionGroup(groupIndex, value)"
+                :trigger-type="trigger.type"
+                :product-id="trigger.productId"
+                :device-id="trigger.deviceId"
+                @validate="(result) => handleGroupValidate(groupIndex, result)"
+              />
+            </div>
+
+            <!-- 条件组间的"或"连接符 -->
+            <div
+              v-if="groupIndex < trigger.conditionGroups!.length - 1"
+              class="flex items-center justify-center py-12px"
+            >
+              <div class="flex items-center gap-8px">
+                <!-- 连接线 -->
+                <div class="w-32px h-1px bg-orange-300"></div>
+                <!-- 或标签 -->
+                <div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
+                  <span class="text-14px font-600 text-orange-600">或</span>
+                </div>
+                <!-- 连接线 -->
+                <div class="w-32px h-1px bg-orange-300"></div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
       <!-- 空状态 -->
       <div v-else class="py-40px text-center">
         <el-empty description="暂无触发条件">
-          <el-button type="primary" @click="addConditionGroup">
-            <Icon icon="ep:plus" />
-            添加第一个条件组
-          </el-button>
+          <template #description>
+            <div class="space-y-8px">
+              <p class="text-[var(--el-text-color-secondary)]">暂无触发条件</p>
+              <p class="text-12px text-[var(--el-text-color-placeholder)]">
+                请使用上方的"添加条件组"按钮来设置触发规则
+              </p>
+            </div>
+          </template>
         </el-empty>
       </div>
     </div>
-
-    <!-- 验证结果 -->
-    <div v-if="validationMessage" class="mt-8px">
-      <el-alert
-        :title="validationMessage"
-        :type="isValid ? 'success' : 'error'"
-        :closable="false"
-        show-icon
-      />
-    </div>
   </div>
 </template>
 
@@ -158,7 +201,7 @@ const addConditionGroup = () => {
 
   const newGroup: ConditionGroupFormData = {
     conditions: [],
-    logicOperator: 'AND'
+    logicOperator: 'AND' // 固定为AND，因为条件组内部条件间为"且"关系
   }
 
   trigger.value.conditionGroups.push(newGroup)

From d7b4db9b4e08e6fd60595b4e6b871a5fd5002942 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 28 Jul 2025 21:38:27 +0800
Subject: [PATCH 09/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E5=99=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/rule/scene/scene.types.ts         |  53 +++-
 .../iot/rule/scene/form/RuleSceneForm.vue     |  69 +++--
 .../scene/form/configs/ConditionConfig.vue    | 212 ++++++++++---
 .../form/configs/ConditionGroupConfig.vue     |   7 +-
 .../configs/ConditionGroupContainerConfig.vue | 247 +++++++++++++++
 .../configs/CurrentTimeConditionConfig.vue    | 287 ++++++++++++++++++
 .../configs/DeviceStatusConditionConfig.vue   | 258 ++++++++++++++++
 .../form/configs/DeviceTriggerConfig.vue      | 249 +++++----------
 .../form/configs/MainConditionConfig.vue      | 114 +++++++
 .../form/configs/SubConditionGroupConfig.vue  | 220 ++++++++++++++
 .../scene/form/sections/TriggerSection.vue    | 226 ++++----------
 .../form/selectors/ConditionTypeSelector.vue  |  80 +++++
 .../scene/form/selectors/DeviceSelector.vue   | 127 ++++++++
 .../scene/form/selectors/ProductSelector.vue  |  81 +++++
 .../iot/rule/scene/form/selectors/types.ts    |  38 ---
 15 files changed, 1815 insertions(+), 453 deletions(-)
 create mode 100644 src/views/iot/rule/scene/form/configs/ConditionGroupContainerConfig.vue
 create mode 100644 src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
 create mode 100644 src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
 create mode 100644 src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
 create mode 100644 src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
 create mode 100644 src/views/iot/rule/scene/form/selectors/ConditionTypeSelector.vue
 create mode 100644 src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
 create mode 100644 src/views/iot/rule/scene/form/selectors/ProductSelector.vue

diff --git a/src/api/iot/rule/scene/scene.types.ts b/src/api/iot/rule/scene/scene.types.ts
index 3ae0707f..3ba5dd25 100644
--- a/src/api/iot/rule/scene/scene.types.ts
+++ b/src/api/iot/rule/scene/scene.types.ts
@@ -46,6 +46,24 @@ const IotRuleSceneTriggerConditionParameterOperatorEnum = {
   NOT_NULL: { name: '非空', value: 'not null' } // 非空
 } as const
 
+// 条件类型枚举
+const IotRuleSceneTriggerConditionTypeEnum = {
+  DEVICE_STATUS: 1, // 设备状态
+  DEVICE_PROPERTY: 2, // 设备属性
+  CURRENT_TIME: 3 // 当前时间
+} as const
+
+// 时间运算符枚举
+const IotRuleSceneTriggerTimeOperatorEnum = {
+  BEFORE_TIME: { name: '在时间之前', value: 'before_time' }, // 在时间之前
+  AFTER_TIME: { name: '在时间之后', value: 'after_time' }, // 在时间之后
+  BETWEEN_TIME: { name: '在时间之间', value: 'between_time' }, // 在时间之间
+  AT_TIME: { name: '在指定时间', value: 'at_time' }, // 在指定时间
+  BEFORE_TODAY: { name: '在今日之前', value: 'before_today' }, // 在今日之前
+  AFTER_TODAY: { name: '在今日之后', value: 'after_today' }, // 在今日之后
+  TODAY: { name: '在今日之间', value: 'today' } // 在今日之间
+} as const
+
 // TODO @puhui999：下面 IotAlertConfigReceiveTypeEnum、DeviceStateEnum 没用到，貌似可以删除下？
 const IotAlertConfigReceiveTypeEnum = {
   SMS: 1, // 短信
@@ -126,7 +144,7 @@ interface RuleSceneFormData {
   name: string
   description?: string
   status: number
-  triggers: TriggerFormData[]
+  trigger: TriggerFormData // 改为单个触发器
   actions: ActionFormData[]
 }
 
@@ -138,7 +156,9 @@ interface TriggerFormData {
   operator?: string
   value?: string
   cronExpression?: string
-  conditionGroups?: ConditionGroupFormData[]
+  // 新的条件结构
+  mainCondition?: ConditionFormData // 主条件（必须满足）
+  conditionGroup?: ConditionGroupContainerFormData // 条件组容器（可选，与主条件为且关系）
 }
 
 interface ActionFormData {
@@ -149,6 +169,17 @@ interface ActionFormData {
   alertConfigId?: number
 }
 
+// 条件组容器（包含多个子条件组，子条件组间为或关系）
+interface ConditionGroupContainerFormData {
+  subGroups: SubConditionGroupFormData[] // 子条件组数组，子条件组间为或关系
+}
+
+// 子条件组（内部条件为且关系）
+interface SubConditionGroupFormData {
+  conditions: ConditionFormData[] // 条件数组，条件间为且关系
+}
+
+// 保留原有接口用于兼容性
 interface ConditionGroupFormData {
   conditions: ConditionFormData[]
   // 注意：条件组内部的条件固定为"且"关系，条件组之间固定为"或"关系
@@ -157,12 +188,14 @@ interface ConditionGroupFormData {
 }
 
 interface ConditionFormData {
-  type: number
-  productId: number
-  deviceId: number
-  identifier: string
-  operator: string
-  param: string
+  type: number // 条件类型：1-设备状态，2-设备属性，3-当前时间
+  productId?: number // 产品ID（设备状态和设备属性时必填）
+  deviceId?: number // 设备ID（设备状态和设备属性时必填）
+  identifier?: string // 标识符（设备属性时必填）
+  operator: string // 操作符
+  param: string // 参数值
+  timeValue?: string // 时间值（当前时间条件时使用）
+  timeValue2?: string // 第二个时间值（时间范围条件时使用）
 }
 
 // 主接口
@@ -210,12 +243,16 @@ export {
   TriggerFormData,
   ActionFormData,
   ConditionGroupFormData,
+  ConditionGroupContainerFormData,
+  SubConditionGroupFormData,
   ConditionFormData,
   IotRuleSceneTriggerTypeEnum,
   IotRuleSceneActionTypeEnum,
   IotDeviceMessageTypeEnum,
   IotDeviceMessageIdentifierEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
+  IotRuleSceneTriggerConditionTypeEnum,
+  IotRuleSceneTriggerTimeOperatorEnum,
   IotAlertConfigReceiveTypeEnum,
   DeviceStateEnum,
   CommonStatusEnum,
diff --git a/src/views/iot/rule/scene/form/RuleSceneForm.vue b/src/views/iot/rule/scene/form/RuleSceneForm.vue
index f4b8ca12..471ea7f8 100644
--- a/src/views/iot/rule/scene/form/RuleSceneForm.vue
+++ b/src/views/iot/rule/scene/form/RuleSceneForm.vue
@@ -22,7 +22,7 @@
         <BasicInfoSection v-model="formData" :rules="formRules" />
 
         <!-- 触发器配置 -->
-        <TriggerSection v-model:triggers="formData.triggers" @validate="handleTriggerValidate" />
+        <TriggerSection v-model:trigger="formData.trigger" @validate="handleTriggerValidate" />
 
         <!-- 执行器配置 -->
         <ActionSection v-model:actions="formData.actions" @validate="handleActionValidate" />
@@ -45,6 +45,7 @@ import {
   RuleSceneFormData,
   IotRuleScene,
   IotRuleSceneActionTypeEnum,
+  IotRuleSceneTriggerTypeEnum,
   CommonStatusEnum
 } from '@/api/iot/rule/scene/scene.types'
 import { getBaseValidationRules } from '../utils/validation'
@@ -77,7 +78,17 @@ const createDefaultFormData = (): RuleSceneFormData => {
     name: '',
     description: '',
     status: CommonStatusEnum.ENABLE, // 默认启用状态
-    triggers: [],
+    trigger: {
+      type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+      productId: undefined,
+      deviceId: undefined,
+      identifier: undefined,
+      operator: undefined,
+      value: undefined,
+      cronExpression: undefined,
+      mainCondition: undefined,
+      conditionGroup: undefined
+    },
     actions: []
   }
 }
@@ -91,23 +102,19 @@ const transformFormToApi = (formData: RuleSceneFormData): IotRuleScene => {
     name: formData.name,
     description: formData.description,
     status: Number(formData.status),
-    triggers:
-      formData.triggers?.map((trigger) => ({
-        type: trigger.type,
-        productKey: trigger.productId ? `product_${trigger.productId}` : undefined,
-        deviceNames: trigger.deviceId ? [`device_${trigger.deviceId}`] : undefined,
-        cronExpression: trigger.cronExpression,
-        conditions:
-          trigger.conditionGroups?.map((group) => ({
-            type: 'property',
-            identifier: trigger.identifier || '',
-            parameters: group.conditions.map((condition) => ({
-              identifier: condition.identifier,
-              operator: condition.operator,
-              value: condition.param
-            }))
-          })) || []
-      })) || [],
+    triggers: [
+      {
+        type: formData.trigger.type,
+        productKey: formData.trigger.productId
+          ? `product_${formData.trigger.productId}`
+          : undefined,
+        deviceNames: formData.trigger.deviceId
+          ? [`device_${formData.trigger.deviceId}`]
+          : undefined,
+        cronExpression: formData.trigger.cronExpression,
+        conditions: [] // TODO: 实现新的条件转换逻辑
+      }
+    ],
     actions:
       formData.actions?.map((action) => ({
         type: action.type,
@@ -131,16 +138,26 @@ const transformFormToApi = (formData: RuleSceneFormData): IotRuleScene => {
  * 将 API 响应数据转换为表单格式
  */
 const transformApiToForm = (apiData: IotRuleScene): RuleSceneFormData => {
+  const firstTrigger = apiData.triggers?.[0]
   return {
     ...apiData,
     status: Number(apiData.status), // 确保状态为数字类型
-    triggers:
-      apiData.triggers?.map((trigger) => ({
-        ...trigger,
-        type: Number(trigger.type),
-        // 为每个触发器添加唯一标识符，解决组件索引重用问题
-        key: generateUUID()
-      })) || [],
+    trigger: firstTrigger
+      ? {
+          ...firstTrigger,
+          type: Number(firstTrigger.type)
+        }
+      : {
+          type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+          productId: undefined,
+          deviceId: undefined,
+          identifier: undefined,
+          operator: undefined,
+          value: undefined,
+          cronExpression: undefined,
+          mainCondition: undefined,
+          conditionGroup: undefined
+        },
     actions:
       apiData.actions?.map((action) => ({
         ...action,
diff --git a/src/views/iot/rule/scene/form/configs/ConditionConfig.vue b/src/views/iot/rule/scene/form/configs/ConditionConfig.vue
index 0a975516..8b9b6dc1 100644
--- a/src/views/iot/rule/scene/form/configs/ConditionConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/ConditionConfig.vue
@@ -1,60 +1,121 @@
 <!-- 单个条件配置组件 -->
-<!-- TODO @puhui999：这里需要在对下阿里云 IoT，不太对；它是条件类型；然后选择产品、设备；接着选条件类型对应的比较； -->
 <template>
   <div class="flex flex-col gap-16px">
+    <!-- 条件类型选择 -->
     <el-row :gutter="16">
-      <!-- 属性/事件/服务选择 -->
       <el-col :span="8">
-        <el-form-item label="监控项" required>
-          <PropertySelector
-            :model-value="condition.identifier"
-            @update:model-value="(value) => updateConditionField('identifier', value)"
-            :trigger-type="triggerType"
-            :product-id="productId"
-            :device-id="deviceId"
-            @change="handlePropertyChange"
-          />
-        </el-form-item>
-      </el-col>
-
-      <!-- 操作符选择 -->
-      <el-col :span="6">
-        <el-form-item label="操作符" required>
-          <OperatorSelector
-            :model-value="condition.operator"
-            @update:model-value="(value) => updateConditionField('operator', value)"
-            :property-type="propertyType"
-            @change="handleOperatorChange"
-          />
-        </el-form-item>
-      </el-col>
-
-      <!-- 值输入 -->
-      <el-col :span="10">
-        <el-form-item label="比较值" required>
-          <ValueInput
-            :model-value="condition.param"
-            @update:model-value="(value) => updateConditionField('param', value)"
-            :property-type="propertyType"
-            :operator="condition.operator"
-            :property-config="propertyConfig"
-            @validate="handleValueValidate"
+        <el-form-item label="条件类型" required>
+          <ConditionTypeSelector
+            :model-value="condition.type"
+            @update:model-value="(value) => updateConditionField('type', value)"
+            @change="handleConditionTypeChange"
           />
         </el-form-item>
       </el-col>
     </el-row>
 
-    <!-- 条件预览 -->
-    <div v-if="conditionPreview" class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
-      <div class="flex items-center gap-8px mb-8px">
-        <Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
-        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
-      </div>
-      <div class="pl-24px">
-        <code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono">{{ conditionPreview }}</code>
+    <!-- 设备状态条件配置 -->
+    <DeviceStatusConditionConfig
+      v-if="condition.type === ConditionTypeEnum.DEVICE_STATUS"
+      :model-value="condition"
+      @update:model-value="updateCondition"
+      @validate="handleValidate"
+    />
+
+    <!-- 设备属性条件配置 -->
+    <div v-else-if="condition.type === ConditionTypeEnum.DEVICE_PROPERTY" class="space-y-16px">
+      <!-- 产品设备选择 -->
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="产品" required>
+            <ProductSelector
+              :model-value="condition.productId"
+              @update:model-value="(value) => updateConditionField('productId', value)"
+              @change="handleProductChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备" required>
+            <DeviceSelector
+              :model-value="condition.deviceId"
+              @update:model-value="(value) => updateConditionField('deviceId', value)"
+              :product-id="condition.productId"
+              @change="handleDeviceChange"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 属性配置 -->
+      <el-row :gutter="16">
+        <!-- 属性/事件/服务选择 -->
+        <el-col :span="6">
+          <el-form-item label="监控项" required>
+            <PropertySelector
+              :model-value="condition.identifier"
+              @update:model-value="(value) => updateConditionField('identifier', value)"
+              :trigger-type="triggerType"
+              :product-id="condition.productId"
+              :device-id="condition.deviceId"
+              @change="handlePropertyChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 操作符选择 -->
+        <el-col :span="6">
+          <el-form-item label="操作符" required>
+            <OperatorSelector
+              :model-value="condition.operator"
+              @update:model-value="(value) => updateConditionField('operator', value)"
+              :property-type="propertyType"
+              @change="handleOperatorChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 值输入 -->
+        <el-col :span="12">
+          <el-form-item label="比较值" required>
+            <ValueInput
+              :model-value="condition.param"
+              @update:model-value="(value) => updateConditionField('param', value)"
+              :property-type="propertyType"
+              :operator="condition.operator"
+              :property-config="propertyConfig"
+              @validate="handleValueValidate"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 条件预览 -->
+      <div
+        v-if="conditionPreview"
+        class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
+      >
+        <div class="flex items-center gap-8px mb-8px">
+          <Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
+        </div>
+        <div class="pl-24px">
+          <code
+            class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono"
+            >{{ conditionPreview }}</code
+          >
+        </div>
       </div>
     </div>
 
+    <!-- 当前时间条件配置 -->
+    <CurrentTimeConditionConfig
+      v-else-if="condition.type === ConditionTypeEnum.CURRENT_TIME"
+      :model-value="condition"
+      @update:model-value="updateCondition"
+      @validate="handleValidate"
+    />
+
     <!-- 验证结果 -->
     <div v-if="validationMessage" class="mt-8px">
       <el-alert
@@ -69,10 +130,18 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import ConditionTypeSelector from '../selectors/ConditionTypeSelector.vue'
+import DeviceStatusConditionConfig from './DeviceStatusConditionConfig.vue'
+import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue'
+import ProductSelector from '../selectors/ProductSelector.vue'
+import DeviceSelector from '../selectors/DeviceSelector.vue'
 import PropertySelector from '../selectors/PropertySelector.vue'
 import OperatorSelector from '../selectors/OperatorSelector.vue'
 import ValueInput from '../inputs/ValueInput.vue'
-import { ConditionFormData } from '@/api/iot/rule/scene/scene.types'
+import {
+  ConditionFormData,
+  IotRuleSceneTriggerConditionTypeEnum
+} from '@/api/iot/rule/scene/scene.types'
 
 /** 单个条件配置组件 */
 defineOptions({ name: 'ConditionConfig' })
@@ -80,8 +149,6 @@ defineOptions({ name: 'ConditionConfig' })
 interface Props {
   modelValue: ConditionFormData
   triggerType: number
-  productId?: number
-  deviceId?: number
 }
 
 interface Emits {
@@ -94,6 +161,9 @@ const emit = defineEmits<Emits>()
 
 const condition = useVModel(props, 'modelValue', emit)
 
+// 常量定义
+const ConditionTypeEnum = IotRuleSceneTriggerConditionTypeEnum
+
 // 状态
 const propertyType = ref<string>('string')
 const propertyConfig = ref<any>(null)
@@ -131,10 +201,56 @@ const getOperatorText = (operator: string) => {
 
 // 事件处理
 const updateConditionField = (field: keyof ConditionFormData, value: any) => {
-  condition.value[field] = value
+  ;(condition.value as any)[field] = value
   emit('update:modelValue', condition.value)
 }
 
+const updateCondition = (newCondition: ConditionFormData) => {
+  condition.value = newCondition
+  emit('update:modelValue', condition.value)
+}
+
+const handleConditionTypeChange = (type: number) => {
+  // 清理不相关的字段
+  if (type === ConditionTypeEnum.DEVICE_STATUS) {
+    condition.value.identifier = undefined
+    condition.value.timeValue = undefined
+    condition.value.timeValue2 = undefined
+  } else if (type === ConditionTypeEnum.CURRENT_TIME) {
+    condition.value.identifier = undefined
+    condition.value.productId = undefined
+    condition.value.deviceId = undefined
+  } else if (type === ConditionTypeEnum.DEVICE_PROPERTY) {
+    condition.value.timeValue = undefined
+    condition.value.timeValue2 = undefined
+  }
+
+  // 重置操作符和参数
+  condition.value.operator = '='
+  condition.value.param = ''
+
+  updateValidationResult()
+}
+
+const handleValidate = (result: { valid: boolean; message: string }) => {
+  isValid.value = result.valid
+  validationMessage.value = result.message
+  emit('validate', result)
+}
+
+const handleProductChange = (productId: number) => {
+  // 产品变化时清空设备和属性
+  condition.value.deviceId = undefined
+  condition.value.identifier = ''
+  updateValidationResult()
+}
+
+const handleDeviceChange = (deviceId: number) => {
+  // 设备变化时清空属性
+  condition.value.identifier = ''
+  updateValidationResult()
+}
+
 const handlePropertyChange = (propertyInfo: { type: string; config: any }) => {
   propertyType.value = propertyInfo.type
   propertyConfig.value = propertyInfo.config
diff --git a/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue b/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
index b76d1008..dff6fe59 100644
--- a/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/ConditionGroupConfig.vue
@@ -128,6 +128,7 @@ interface Props {
   triggerType: number
   productId?: number
   deviceId?: number
+  maxConditions?: number
 }
 
 interface Emits {
@@ -141,7 +142,7 @@ const emit = defineEmits<Emits>()
 const group = useVModel(props, 'modelValue', emit)
 
 // 配置常量
-const maxConditions = 5
+const maxConditions = computed(() => props.maxConditions || 3)
 
 // 验证状态
 const conditionValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
@@ -172,12 +173,12 @@ const addCondition = () => {
     group.value.conditions = []
   }
 
-  if (group.value.conditions.length >= maxConditions) {
+  if (group.value.conditions.length >= maxConditions.value) {
     return
   }
 
   const newCondition: ConditionFormData = {
-    type: props.triggerType,
+    type: 2, // 默认为设备属性条件
     productId: props.productId || 0,
     deviceId: props.deviceId || 0,
     identifier: '',
diff --git a/src/views/iot/rule/scene/form/configs/ConditionGroupContainerConfig.vue b/src/views/iot/rule/scene/form/configs/ConditionGroupContainerConfig.vue
new file mode 100644
index 00000000..bf365ab1
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/ConditionGroupContainerConfig.vue
@@ -0,0 +1,247 @@
+<!-- 条件组容器配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <!-- 条件组容器头部 -->
+    <div
+      class="flex items-center justify-between p-16px bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-8px"
+    >
+      <div class="flex items-center gap-12px">
+        <div class="flex items-center gap-8px text-16px font-600 text-green-700">
+          <div
+            class="w-24px h-24px bg-green-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+          >
+            组
+          </div>
+          <span>附加条件组</span>
+        </div>
+        <el-tag size="small" type="success">与主条件为且关系</el-tag>
+        <el-tag size="small" type="info">
+          {{ modelValue.subGroups?.length || 0 }}个子条件组
+        </el-tag>
+      </div>
+      <div class="flex items-center gap-8px">
+        <el-button
+          type="primary"
+          size="small"
+          @click="addSubGroup"
+          :disabled="(modelValue.subGroups?.length || 0) >= maxSubGroups"
+        >
+          <Icon icon="ep:plus" />
+          添加子条件组
+        </el-button>
+        <el-button type="danger" size="small" text @click="removeContainer">
+          <Icon icon="ep:delete" />
+          删除条件组
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 子条件组列表 -->
+    <div v-if="modelValue.subGroups && modelValue.subGroups.length > 0" class="space-y-16px">
+      <!-- 逻辑关系说明 -->
+      <div v-if="modelValue.subGroups.length > 1" class="flex items-center justify-center">
+        <div
+          class="flex items-center gap-8px px-12px py-6px bg-orange-50 border border-orange-200 rounded-full text-12px text-orange-600"
+        >
+          <Icon icon="ep:info-filled" />
+          <span>子条件组之间为"或"关系，满足任意一组即可触发</span>
+        </div>
+      </div>
+
+      <div class="relative">
+        <div
+          v-for="(subGroup, subGroupIndex) in modelValue.subGroups"
+          :key="`sub-group-${subGroupIndex}`"
+          class="relative"
+        >
+          <!-- 子条件组容器 -->
+          <div
+            class="border-2 border-orange-200 rounded-8px bg-orange-50 shadow-sm hover:shadow-md transition-shadow"
+          >
+            <div
+              class="flex items-center justify-between p-16px bg-gradient-to-r from-orange-50 to-yellow-50 border-b border-orange-200 rounded-t-6px"
+            >
+              <div class="flex items-center gap-12px">
+                <div class="flex items-center gap-8px text-16px font-600 text-orange-700">
+                  <div
+                    class="w-24px h-24px bg-orange-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+                  >
+                    {{ subGroupIndex + 1 }}
+                  </div>
+                  <span>子条件组 {{ subGroupIndex + 1 }}</span>
+                </div>
+                <el-tag size="small" type="warning" class="font-500">组内条件为"且"关系</el-tag>
+                <el-tag size="small" type="info">
+                  {{ subGroup.conditions?.length || 0 }}个条件
+                </el-tag>
+              </div>
+              <el-button
+                type="danger"
+                size="small"
+                text
+                @click="removeSubGroup(subGroupIndex)"
+                class="hover:bg-red-50"
+              >
+                <Icon icon="ep:delete" />
+                删除组
+              </el-button>
+            </div>
+
+            <SubConditionGroupConfig
+              :model-value="subGroup"
+              @update:model-value="(value) => updateSubGroup(subGroupIndex, value)"
+              :trigger-type="triggerType"
+              :max-conditions="maxConditionsPerGroup"
+              @validate="(result) => handleSubGroupValidate(subGroupIndex, result)"
+            />
+          </div>
+
+          <!-- 子条件组间的"或"连接符 -->
+          <div
+            v-if="subGroupIndex < modelValue.subGroups!.length - 1"
+            class="flex items-center justify-center py-12px"
+          >
+            <div class="flex items-center gap-8px">
+              <!-- 连接线 -->
+              <div class="w-32px h-1px bg-orange-300"></div>
+              <!-- 或标签 -->
+              <div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
+                <span class="text-14px font-600 text-orange-600">或</span>
+              </div>
+              <!-- 连接线 -->
+              <div class="w-32px h-1px bg-orange-300"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div
+      v-else
+      class="p-24px border-2 border-dashed border-orange-200 rounded-8px text-center bg-orange-50"
+    >
+      <div class="flex flex-col items-center gap-12px">
+        <Icon icon="ep:plus" class="text-32px text-orange-400" />
+        <div class="text-orange-600">
+          <p class="text-14px font-500 mb-4px">暂无子条件组</p>
+          <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import SubConditionGroupConfig from './SubConditionGroupConfig.vue'
+import {
+  ConditionGroupContainerFormData,
+  SubConditionGroupFormData
+} from '@/api/iot/rule/scene/scene.types'
+
+/** 条件组容器配置组件 */
+defineOptions({ name: 'ConditionGroupContainerConfig' })
+
+interface Props {
+  modelValue: ConditionGroupContainerFormData
+  triggerType: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: ConditionGroupContainerFormData): void
+  (e: 'validate', result: { valid: boolean; message: string }): void
+  (e: 'remove'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const container = useVModel(props, 'modelValue', emit)
+
+// 配置常量
+const maxSubGroups = 3 // 最多3个子条件组
+const maxConditionsPerGroup = 3 // 每组最多3个条件
+
+// 验证状态
+const subGroupValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
+
+// 事件处理
+const addSubGroup = () => {
+  if (!container.value.subGroups) {
+    container.value.subGroups = []
+  }
+
+  if (container.value.subGroups.length >= maxSubGroups) {
+    return
+  }
+
+  const newSubGroup: SubConditionGroupFormData = {
+    conditions: []
+  }
+
+  container.value.subGroups.push(newSubGroup)
+}
+
+const removeSubGroup = (index: number) => {
+  if (container.value.subGroups) {
+    container.value.subGroups.splice(index, 1)
+    delete subGroupValidations.value[index]
+
+    // 重新索引验证结果
+    const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
+    Object.keys(subGroupValidations.value).forEach((key) => {
+      const numKey = parseInt(key)
+      if (numKey > index) {
+        newValidations[numKey - 1] = subGroupValidations.value[numKey]
+      } else if (numKey < index) {
+        newValidations[numKey] = subGroupValidations.value[numKey]
+      }
+    })
+    subGroupValidations.value = newValidations
+
+    updateValidationResult()
+  }
+}
+
+const updateSubGroup = (index: number, subGroup: SubConditionGroupFormData) => {
+  if (container.value.subGroups) {
+    container.value.subGroups[index] = subGroup
+  }
+}
+
+const removeContainer = () => {
+  emit('remove')
+}
+
+const handleSubGroupValidate = (index: number, result: { valid: boolean; message: string }) => {
+  subGroupValidations.value[index] = result
+  updateValidationResult()
+}
+
+const updateValidationResult = () => {
+  if (!container.value.subGroups || container.value.subGroups.length === 0) {
+    emit('validate', { valid: true, message: '条件组容器为空，验证通过' })
+    return
+  }
+
+  const validations = Object.values(subGroupValidations.value)
+  const allValid = validations.every((v: any) => v.valid)
+
+  if (allValid) {
+    emit('validate', { valid: true, message: '条件组容器配置验证通过' })
+  } else {
+    const errorMessages = validations.filter((v: any) => !v.valid).map((v: any) => v.message)
+    emit('validate', { valid: false, message: `子条件组配置错误: ${errorMessages.join('; ')}` })
+  }
+}
+
+// 监听变化
+watch(
+  () => container.value.subGroups,
+  () => {
+    updateValidationResult()
+  },
+  { deep: true, immediate: true }
+)
+</script>
diff --git a/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue b/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
new file mode 100644
index 00000000..66006d09
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
@@ -0,0 +1,287 @@
+<!-- 当前时间条件配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <div class="flex items-center gap-8px p-12px px-16px bg-orange-50 rounded-6px border border-orange-200">
+      <Icon icon="ep:timer" class="text-orange-500 text-18px" />
+      <span class="text-14px font-500 text-orange-700">当前时间条件配置</span>
+    </div>
+
+    <el-row :gutter="16">
+      <!-- 时间操作符选择 -->
+      <el-col :span="8">
+        <el-form-item label="时间条件" required>
+          <el-select
+            :model-value="condition.operator"
+            @update:model-value="(value) => updateConditionField('operator', value)"
+            placeholder="请选择时间条件"
+            class="w-full"
+          >
+            <el-option
+              v-for="option in timeOperatorOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            >
+              <div class="flex items-center justify-between w-full">
+                <div class="flex items-center gap-8px">
+                  <Icon :icon="option.icon" :class="option.iconClass" />
+                  <span>{{ option.label }}</span>
+                </div>
+                <el-tag :type="option.tag" size="small">{{ option.category }}</el-tag>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <!-- 时间值输入 -->
+      <el-col :span="8">
+        <el-form-item label="时间值" required>
+          <el-time-picker
+            v-if="needsTimeInput"
+            :model-value="condition.timeValue"
+            @update:model-value="(value) => updateConditionField('timeValue', value)"
+            placeholder="请选择时间"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            class="w-full"
+          />
+          <el-date-picker
+            v-else-if="needsDateInput"
+            :model-value="condition.timeValue"
+            @update:model-value="(value) => updateConditionField('timeValue', value)"
+            type="datetime"
+            placeholder="请选择日期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="w-full"
+          />
+          <div v-else class="text-[var(--el-text-color-placeholder)] text-14px">
+            无需设置时间值
+          </div>
+        </el-form-item>
+      </el-col>
+
+      <!-- 第二个时间值（范围条件） -->
+      <el-col :span="8" v-if="needsSecondTimeInput">
+        <el-form-item label="结束时间" required>
+          <el-time-picker
+            v-if="needsTimeInput"
+            :model-value="condition.timeValue2"
+            @update:model-value="(value) => updateConditionField('timeValue2', value)"
+            placeholder="请选择结束时间"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            class="w-full"
+          />
+          <el-date-picker
+            v-else
+            :model-value="condition.timeValue2"
+            @update:model-value="(value) => updateConditionField('timeValue2', value)"
+            type="datetime"
+            placeholder="请选择结束日期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="w-full"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 条件预览 -->
+    <div v-if="conditionPreview" class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]">
+      <div class="flex items-center gap-8px mb-8px">
+        <Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
+      </div>
+      <div class="pl-24px">
+        <code class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono">{{ conditionPreview }}</code>
+      </div>
+    </div>
+
+    <!-- 验证结果 -->
+    <div v-if="validationMessage" class="mt-8px">
+      <el-alert
+        :title="validationMessage"
+        :type="isValid ? 'success' : 'error'"
+        :closable="false"
+        show-icon
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { ConditionFormData, IotRuleSceneTriggerTimeOperatorEnum } from '@/api/iot/rule/scene/scene.types'
+
+/** 当前时间条件配置组件 */
+defineOptions({ name: 'CurrentTimeConditionConfig' })
+
+interface Props {
+  modelValue: ConditionFormData
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: ConditionFormData): void
+  (e: 'validate', result: { valid: boolean; message: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const condition = useVModel(props, 'modelValue', emit)
+
+// 时间操作符选项
+const timeOperatorOptions = [
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
+    icon: 'ep:arrow-left',
+    iconClass: 'text-blue-500',
+    tag: 'primary',
+    category: '时间点'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.name,
+    icon: 'ep:arrow-right',
+    iconClass: 'text-green-500',
+    tag: 'success',
+    category: '时间点'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.name,
+    icon: 'ep:sort',
+    iconClass: 'text-orange-500',
+    tag: 'warning',
+    category: '时间段'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
+    icon: 'ep:position',
+    iconClass: 'text-purple-500',
+    tag: 'info',
+    category: '时间点'
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.TODAY.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
+    icon: 'ep:calendar',
+    iconClass: 'text-red-500',
+    tag: 'danger',
+    category: '日期'
+  }
+]
+
+// 状态
+const validationMessage = ref('')
+const isValid = ref(true)
+
+// 计算属性
+const needsTimeInput = computed(() => {
+  const timeOnlyOperators = [
+    IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value
+  ]
+  return timeOnlyOperators.includes(condition.value.operator)
+})
+
+const needsDateInput = computed(() => {
+  return false // 暂时不支持日期输入，只支持时间
+})
+
+const needsSecondTimeInput = computed(() => {
+  return condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
+})
+
+const conditionPreview = computed(() => {
+  if (!condition.value.operator) {
+    return ''
+  }
+  
+  const operatorOption = timeOperatorOptions.find(opt => opt.value === condition.value.operator)
+  const operatorLabel = operatorOption?.label || condition.value.operator
+  
+  if (condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
+    return `当前时间 ${operatorLabel}`
+  }
+  
+  if (!condition.value.timeValue) {
+    return `当前时间 ${operatorLabel} [未设置时间]`
+  }
+  
+  if (needsSecondTimeInput.value && condition.value.timeValue2) {
+    return `当前时间 ${operatorLabel} ${condition.value.timeValue} 和 ${condition.value.timeValue2}`
+  }
+  
+  return `当前时间 ${operatorLabel} ${condition.value.timeValue}`
+})
+
+// 事件处理
+const updateConditionField = (field: keyof ConditionFormData, value: any) => {
+  condition.value[field] = value
+  updateValidationResult()
+}
+
+const updateValidationResult = () => {
+  if (!condition.value.operator) {
+    isValid.value = false
+    validationMessage.value = '请选择时间条件'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  // 今日条件不需要时间值
+  if (condition.value.operator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
+    isValid.value = true
+    validationMessage.value = '当前时间条件配置验证通过'
+    emit('validate', { valid: true, message: validationMessage.value })
+    return
+  }
+
+  if (needsTimeInput.value && !condition.value.timeValue) {
+    isValid.value = false
+    validationMessage.value = '请设置时间值'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  if (needsSecondTimeInput.value && !condition.value.timeValue2) {
+    isValid.value = false
+    validationMessage.value = '请设置结束时间'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  isValid.value = true
+  validationMessage.value = '当前时间条件配置验证通过'
+  emit('validate', { valid: true, message: validationMessage.value })
+}
+
+// 监听变化
+watch(
+  () => [condition.value.operator, condition.value.timeValue, condition.value.timeValue2],
+  () => {
+    updateValidationResult()
+  },
+  { immediate: true }
+)
+
+// 监听操作符变化，清理不相关的时间值
+watch(
+  () => condition.value.operator,
+  (newOperator) => {
+    if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
+      condition.value.timeValue = undefined
+      condition.value.timeValue2 = undefined
+    } else if (!needsSecondTimeInput.value) {
+      condition.value.timeValue2 = undefined
+    }
+  }
+)
+</script>
diff --git a/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
new file mode 100644
index 00000000..f198ed9e
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
@@ -0,0 +1,258 @@
+<!-- 设备状态条件配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <div
+      class="flex items-center gap-8px p-12px px-16px bg-blue-50 rounded-6px border border-blue-200"
+    >
+      <Icon icon="ep:connection" class="text-blue-500 text-18px" />
+      <span class="text-14px font-500 text-blue-700">设备状态条件配置</span>
+    </div>
+
+    <!-- 产品设备选择 -->
+    <el-row :gutter="16">
+      <el-col :span="12">
+        <el-form-item label="产品" required>
+          <ProductSelector
+            :model-value="condition.productId"
+            @update:model-value="(value) => updateConditionField('productId', value)"
+            @change="handleProductChange"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="设备" required>
+          <DeviceSelector
+            :model-value="condition.deviceId"
+            @update:model-value="(value) => updateConditionField('deviceId', value)"
+            :product-id="condition.productId"
+            @change="handleDeviceChange"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 状态和操作符选择 -->
+    <el-row :gutter="16">
+      <!-- 状态选择 -->
+      <el-col :span="12">
+        <el-form-item label="设备状态" required>
+          <el-select
+            :model-value="condition.param"
+            @update:model-value="(value) => updateConditionField('param', value)"
+            placeholder="请选择设备状态"
+            class="w-full"
+          >
+            <el-option
+              v-for="option in deviceStatusOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            >
+              <div class="flex items-center gap-8px">
+                <Icon :icon="option.icon" :class="option.iconClass" />
+                <span>{{ option.label }}</span>
+                <el-tag :type="option.tag" size="small">{{ option.description }}</el-tag>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <!-- 操作符选择 -->
+      <el-col :span="12">
+        <el-form-item label="操作符" required>
+          <el-select
+            :model-value="condition.operator"
+            @update:model-value="(value) => updateConditionField('operator', value)"
+            placeholder="请选择操作符"
+            class="w-full"
+          >
+            <el-option
+              v-for="option in statusOperatorOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            >
+              <div class="flex items-center justify-between w-full">
+                <span>{{ option.label }}</span>
+                <span class="text-12px text-[var(--el-text-color-secondary)]">{{
+                  option.description
+                }}</span>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <!-- 条件预览 -->
+    <div
+      v-if="conditionPreview"
+      class="p-12px bg-[var(--el-fill-color-light)] rounded-6px border border-[var(--el-border-color-lighter)]"
+    >
+      <div class="flex items-center gap-8px mb-8px">
+        <Icon icon="ep:view" class="text-[var(--el-color-info)] text-16px" />
+        <span class="text-14px font-500 text-[var(--el-text-color-primary)]">条件预览</span>
+      </div>
+      <div class="pl-24px">
+        <code
+          class="text-12px text-[var(--el-color-primary)] bg-[var(--el-fill-color-blank)] p-8px rounded-4px font-mono"
+          >{{ conditionPreview }}</code
+        >
+      </div>
+    </div>
+
+    <!-- 验证结果 -->
+    <div v-if="validationMessage" class="mt-8px">
+      <el-alert
+        :title="validationMessage"
+        :type="isValid ? 'success' : 'error'"
+        :closable="false"
+        show-icon
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import ProductSelector from '../selectors/ProductSelector.vue'
+import DeviceSelector from '../selectors/DeviceSelector.vue'
+import { ConditionFormData } from '@/api/iot/rule/scene/scene.types'
+
+/** 设备状态条件配置组件 */
+defineOptions({ name: 'DeviceStatusConditionConfig' })
+
+interface Props {
+  modelValue: ConditionFormData
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: ConditionFormData): void
+  (e: 'validate', result: { valid: boolean; message: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const condition = useVModel(props, 'modelValue', emit)
+
+// 设备状态选项
+const deviceStatusOptions = [
+  {
+    value: 'online',
+    label: '在线',
+    description: '设备已连接',
+    icon: 'ep:circle-check',
+    iconClass: 'text-green-500',
+    tag: 'success'
+  },
+  {
+    value: 'offline',
+    label: '离线',
+    description: '设备已断开',
+    icon: 'ep:circle-close',
+    iconClass: 'text-red-500',
+    tag: 'danger'
+  }
+]
+
+// 状态操作符选项
+const statusOperatorOptions = [
+  {
+    value: '=',
+    label: '等于',
+    description: '状态完全匹配时触发'
+  },
+  {
+    value: '!=',
+    label: '不等于',
+    description: '状态不匹配时触发'
+  }
+]
+
+// 状态
+const validationMessage = ref('')
+const isValid = ref(true)
+
+// 计算属性
+const conditionPreview = computed(() => {
+  if (!condition.value.param || !condition.value.operator) {
+    return ''
+  }
+
+  const statusLabel =
+    deviceStatusOptions.find((opt) => opt.value === condition.value.param)?.label ||
+    condition.value.param
+  const operatorLabel =
+    statusOperatorOptions.find((opt) => opt.value === condition.value.operator)?.label ||
+    condition.value.operator
+
+  return `设备状态 ${operatorLabel} ${statusLabel}`
+})
+
+// 事件处理
+const updateConditionField = (field: keyof ConditionFormData, value: any) => {
+  condition.value[field] = value
+  updateValidationResult()
+}
+
+const handleProductChange = (productId: number) => {
+  // 产品变化时清空设备
+  condition.value.deviceId = undefined
+  updateValidationResult()
+}
+
+const handleDeviceChange = (deviceId: number) => {
+  // 设备变化时可以进行其他处理
+  updateValidationResult()
+}
+
+const updateValidationResult = () => {
+  if (!condition.value.productId) {
+    isValid.value = false
+    validationMessage.value = '请选择产品'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  if (!condition.value.deviceId) {
+    isValid.value = false
+    validationMessage.value = '请选择设备'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  if (!condition.value.param) {
+    isValid.value = false
+    validationMessage.value = '请选择设备状态'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  if (!condition.value.operator) {
+    isValid.value = false
+    validationMessage.value = '请选择操作符'
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
+  }
+
+  isValid.value = true
+  validationMessage.value = '设备状态条件配置验证通过'
+  emit('validate', { valid: true, message: validationMessage.value })
+}
+
+// 监听变化
+watch(
+  () => [
+    condition.value.productId,
+    condition.value.deviceId,
+    condition.value.param,
+    condition.value.operator
+  ],
+  () => {
+    updateValidationResult()
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
index 9d26044e..8457be29 100644
--- a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@@ -8,118 +8,56 @@
       @change="handleDeviceChange"
     />
 
-    <!-- 条件组配置 -->
-    <div v-if="needsConditions" class="space-y-12px">
-      <div class="flex items-center justify-between mb-12px">
-        <div class="flex items-center gap-8px">
-          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">触发条件</span>
-          <el-tag size="small" type="info">
-            {{ trigger.conditionGroups?.length || 0 }}个条件组
-          </el-tag>
-          <el-tooltip
-            content="条件组之间为'或'关系，满足任意一组即可触发；每个条件组内的条件为'且'关系，需要全部满足"
-            placement="top"
-          >
-            <Icon icon="ep:question-filled" class="text-[var(--el-color-info)] cursor-help" />
-          </el-tooltip>
-        </div>
-        <div class="flex items-center gap-8px">
-          <el-button
-            type="primary"
-            size="small"
-            @click="addConditionGroup"
-            :disabled="(trigger.conditionGroups?.length || 0) >= maxConditionGroups"
-          >
-            <Icon icon="ep:plus" />
-            添加条件组
-          </el-button>
-        </div>
-      </div>
-
-      <!-- 条件组列表 -->
+    <!-- 主条件配置 -->
+    <div v-if="needsConditions" class="space-y-16px">
       <div
-        v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
-        class="space-y-16px"
+        class="flex items-center gap-8px p-12px px-16px bg-blue-50 rounded-6px border border-blue-200"
       >
-        <!-- 逻辑关系说明 -->
-        <div v-if="trigger.conditionGroups.length > 1" class="flex items-center justify-center">
-          <div
-            class="flex items-center gap-8px px-12px py-6px bg-blue-50 border border-blue-200 rounded-full text-12px text-blue-600"
-          >
-            <Icon icon="ep:info-filled" />
-            <span>条件组之间为"或"关系，满足任意一组即可触发</span>
-          </div>
-        </div>
-
-        <div class="relative">
-          <div
-            v-for="(group, groupIndex) in trigger.conditionGroups"
-            :key="`group-${groupIndex}`"
-            class="relative"
-          >
-            <!-- 条件组容器 -->
-            <div
-              class="border-2 border-[var(--el-border-color-lighter)] rounded-8px bg-[var(--el-fill-color-blank)] shadow-sm hover:shadow-md transition-shadow"
-            >
-              <div
-                class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-[var(--el-border-color-lighter)] rounded-t-6px"
-              >
-                <div class="flex items-center gap-12px">
-                  <div
-                    class="flex items-center gap-8px text-16px font-600 text-[var(--el-text-color-primary)]"
-                  >
-                    <div
-                      class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
-                    >
-                      {{ groupIndex + 1 }}
-                    </div>
-                    <span>条件组</span>
-                  </div>
-                  <el-tag size="small" type="success" class="font-500"> 组内条件为"且"关系 </el-tag>
-                </div>
-                <el-button
-                  type="danger"
-                  size="small"
-                  text
-                  @click="removeConditionGroup(groupIndex)"
-                  v-if="trigger.conditionGroups!.length > 1"
-                  class="hover:bg-red-50"
-                >
-                  <Icon icon="ep:delete" />
-                  删除组
-                </el-button>
-              </div>
-
-              <ConditionGroupConfig
-                :model-value="group"
-                @update:model-value="(value) => updateConditionGroup(groupIndex, value)"
-                :trigger-type="trigger.type"
-                :product-id="trigger.productId"
-                :device-id="trigger.deviceId"
-                @validate="(result) => handleGroupValidate(groupIndex, result)"
-              />
-            </div>
-
-            <!-- 条件组间的"或"连接符 -->
-            <div
-              v-if="groupIndex < trigger.conditionGroups!.length - 1"
-              class="flex items-center justify-center py-12px"
-            >
-              <div class="flex items-center gap-8px">
-                <!-- 连接线 -->
-                <div class="w-32px h-1px bg-orange-300"></div>
-                <!-- 或标签 -->
-                <div class="px-16px py-6px bg-orange-100 border-2 border-orange-300 rounded-full">
-                  <span class="text-14px font-600 text-orange-600">或</span>
-                </div>
-                <!-- 连接线 -->
-                <div class="w-32px h-1px bg-orange-300"></div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <Icon icon="ep:star-filled" class="text-blue-500 text-18px" />
+        <span class="text-14px font-600 text-blue-700">主条件配置</span>
+        <el-tag size="small" type="primary">必须满足</el-tag>
       </div>
 
+      <MainConditionConfig
+        v-model="trigger.mainCondition"
+        :trigger-type="trigger.type"
+        @validate="handleMainConditionValidate"
+      />
+    </div>
+
+    <!-- 条件组配置 -->
+    <div v-if="needsConditions && trigger.mainCondition" class="space-y-16px">
+      <div class="flex items-center justify-between">
+        <div
+          class="flex items-center gap-8px p-12px px-16px bg-green-50 rounded-6px border border-green-200"
+        >
+          <Icon icon="ep:connection" class="text-green-500 text-18px" />
+          <span class="text-14px font-600 text-green-700">附加条件组</span>
+          <el-tag size="small" type="success">与主条件为且关系</el-tag>
+          <el-tag size="small" type="info">
+            {{ trigger.conditionGroup?.subGroups?.length || 0 }}个子条件组
+          </el-tag>
+        </div>
+        <el-button
+          type="primary"
+          size="small"
+          @click="addConditionGroup"
+          v-if="!trigger.conditionGroup"
+        >
+          <Icon icon="ep:plus" />
+          添加条件组
+        </el-button>
+      </div>
+
+      <!-- 条件组配置 -->
+      <ConditionGroupContainerConfig
+        v-if="trigger.conditionGroup"
+        v-model="trigger.conditionGroup"
+        :trigger-type="trigger.type"
+        @validate="handleConditionGroupValidate"
+        @remove="removeConditionGroup"
+      />
+
       <!-- 空状态 -->
       <div v-else class="py-40px text-center">
         <el-empty description="暂无触发条件">
@@ -140,10 +78,10 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import ProductDeviceSelector from '../selectors/ProductDeviceSelector.vue'
-import ConditionGroupConfig from './ConditionGroupConfig.vue'
+import MainConditionConfig from './MainConditionConfig.vue'
+import ConditionGroupContainerConfig from './ConditionGroupContainerConfig.vue'
 import {
   TriggerFormData,
-  ConditionGroupFormData,
   IotRuleSceneTriggerTypeEnum as TriggerTypeEnum
 } from '@/api/iot/rule/scene/scene.types'
 
@@ -164,11 +102,11 @@ const emit = defineEmits<Emits>()
 
 const trigger = useVModel(props, 'modelValue', emit)
 
-// 配置常量
-const maxConditionGroups = 3
-
 // 验证状态
-const groupValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
+const mainConditionValidation = ref<{ valid: boolean; message: string }>({
+  valid: true,
+  message: ''
+})
 const validationMessage = ref('')
 const isValid = ref(true)
 
@@ -177,62 +115,35 @@ const needsConditions = computed(() => {
   return trigger.value.type !== TriggerTypeEnum.DEVICE_STATE_UPDATE
 })
 
-// 事件处理
-const updateConditionGroup = (index: number, group: ConditionGroupFormData) => {
-  if (trigger.value.conditionGroups) {
-    trigger.value.conditionGroups[index] = group
+// 新的事件处理函数
+const handleMainConditionValidate = (result: { valid: boolean; message: string }) => {
+  mainConditionValidation.value = result
+  updateValidationResult()
+}
+
+const addConditionGroup = () => {
+  if (!trigger.value.conditionGroup) {
+    trigger.value.conditionGroup = {
+      subGroups: []
+    }
   }
 }
 
+// 事件处理
 const handleDeviceChange = ({ productId, deviceId }: { productId?: number; deviceId?: number }) => {
   trigger.value.productId = productId
   trigger.value.deviceId = deviceId
   updateValidationResult()
 }
 
-const addConditionGroup = () => {
-  if (!trigger.value.conditionGroups) {
-    trigger.value.conditionGroups = []
-  }
-
-  if (trigger.value.conditionGroups.length >= maxConditionGroups) {
-    return
-  }
-
-  const newGroup: ConditionGroupFormData = {
-    conditions: [],
-    logicOperator: 'AND' // 固定为AND，因为条件组内部条件间为"且"关系
-  }
-
-  trigger.value.conditionGroups.push(newGroup)
-}
-
-const removeConditionGroup = (index: number) => {
-  if (trigger.value.conditionGroups) {
-    trigger.value.conditionGroups.splice(index, 1)
-    delete groupValidations.value[index]
-
-    // 重新索引验证结果
-    const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
-    Object.keys(groupValidations.value).forEach((key) => {
-      const numKey = parseInt(key)
-      if (numKey > index) {
-        newValidations[numKey - 1] = groupValidations.value[numKey]
-      } else if (numKey < index) {
-        newValidations[numKey] = groupValidations.value[numKey]
-      }
-    })
-    groupValidations.value = newValidations
-
-    updateValidationResult()
-  }
-}
-
-const handleGroupValidate = (index: number, result: { valid: boolean; message: string }) => {
-  groupValidations.value[index] = result
+const handleConditionGroupValidate = (result: { valid: boolean; message: string }) => {
   updateValidationResult()
 }
 
+const removeConditionGroup = () => {
+  trigger.value.conditionGroup = undefined
+}
+
 const updateValidationResult = () => {
   // 基础验证
   if (!trigger.value.productId || !trigger.value.deviceId) {
@@ -250,26 +161,24 @@ const updateValidationResult = () => {
     return
   }
 
-  // 条件组验证
-  if (!trigger.value.conditionGroups || trigger.value.conditionGroups.length === 0) {
+  // 主条件验证
+  if (!trigger.value.mainCondition) {
     isValid.value = false
-    validationMessage.value = '请至少添加一个触发条件组'
+    validationMessage.value = '请配置主条件'
     emit('validate', { valid: false, message: validationMessage.value })
     return
   }
 
-  const validations = Object.values(groupValidations.value)
-  const allValid = validations.every((v) => v.valid)
-
-  if (allValid) {
-    isValid.value = true
-    validationMessage.value = '设备触发配置验证通过'
-  } else {
+  // 主条件详细验证
+  if (!mainConditionValidation.value.valid) {
     isValid.value = false
-    const errorMessages = validations.filter((v) => !v.valid).map((v) => v.message)
-    validationMessage.value = `条件组配置错误: ${errorMessages.join('; ')}`
+    validationMessage.value = `主条件配置错误: ${mainConditionValidation.value.message}`
+    emit('validate', { valid: false, message: validationMessage.value })
+    return
   }
 
+  isValid.value = true
+  validationMessage.value = '设备触发配置验证通过'
   emit('validate', { valid: isValid.value, message: validationMessage.value })
 }
 
diff --git a/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue b/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
new file mode 100644
index 00000000..e8f28515
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
@@ -0,0 +1,114 @@
+<!-- 主条件配置组件 -->
+<template>
+  <div class="flex flex-col gap-16px">
+    <!-- 条件配置提示 -->
+    <div
+      v-if="!modelValue"
+      class="p-16px border-2 border-dashed border-[var(--el-border-color)] rounded-8px text-center"
+    >
+      <div class="flex flex-col items-center gap-12px">
+        <Icon icon="ep:plus" class="text-32px text-[var(--el-text-color-placeholder)]" />
+        <div class="text-[var(--el-text-color-secondary)]">
+          <p class="text-14px font-500 mb-4px">请配置主条件</p>
+          <p class="text-12px">主条件是触发器的核心条件，必须满足才能触发场景</p>
+        </div>
+        <el-button type="primary" @click="addMainCondition">
+          <Icon icon="ep:plus" />
+          添加主条件
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 主条件配置 -->
+    <div
+      v-else
+      class="border border-[var(--el-border-color-lighter)] rounded-8px bg-[var(--el-fill-color-blank)] shadow-sm"
+    >
+      <div
+        class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-[var(--el-border-color-lighter)] rounded-t-6px"
+      >
+        <div class="flex items-center gap-12px">
+          <div
+            class="flex items-center gap-8px text-16px font-600 text-[var(--el-text-color-primary)]"
+          >
+            <div
+              class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
+            >
+              主
+            </div>
+            <span>主条件</span>
+          </div>
+          <el-tag size="small" type="primary" class="font-500">必须满足</el-tag>
+        </div>
+        <el-button
+          type="danger"
+          size="small"
+          text
+          @click="removeMainCondition"
+          class="hover:bg-red-50"
+        >
+          <Icon icon="ep:delete" />
+          删除
+        </el-button>
+      </div>
+
+      <div class="p-16px">
+        <ConditionConfig
+          :model-value="modelValue"
+          @update:model-value="updateCondition"
+          :trigger-type="triggerType"
+          @validate="handleValidate"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ConditionConfig from './ConditionConfig.vue'
+import {
+  ConditionFormData,
+  IotRuleSceneTriggerConditionTypeEnum
+} from '@/api/iot/rule/scene/scene.types'
+
+/** 主条件配置组件 */
+defineOptions({ name: 'MainConditionConfig' })
+
+interface Props {
+  modelValue?: ConditionFormData
+  triggerType: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value?: ConditionFormData): void
+  (e: 'validate', result: { valid: boolean; message: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 事件处理
+const addMainCondition = () => {
+  const newCondition: ConditionFormData = {
+    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
+    productId: undefined,
+    deviceId: undefined,
+    identifier: '',
+    operator: '=',
+    param: ''
+  }
+  emit('update:modelValue', newCondition)
+}
+
+const removeMainCondition = () => {
+  emit('update:modelValue', undefined)
+}
+
+const updateCondition = (condition: ConditionFormData) => {
+  emit('update:modelValue', condition)
+}
+
+const handleValidate = (result: { valid: boolean; message: string }) => {
+  emit('validate', result)
+}
+</script>
diff --git a/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue b/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
new file mode 100644
index 00000000..ff7bac4d
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
@@ -0,0 +1,220 @@
+<!-- 子条件组配置组件 -->
+<template>
+  <div class="p-16px">
+    <!-- 空状态 -->
+    <div
+      v-if="!subGroup.conditions || subGroup.conditions.length === 0"
+      class="text-center py-24px"
+    >
+      <div class="flex flex-col items-center gap-12px">
+        <Icon icon="ep:plus" class="text-32px text-[var(--el-text-color-placeholder)]" />
+        <div class="text-[var(--el-text-color-secondary)]">
+          <p class="text-14px font-500 mb-4px">暂无条件</p>
+          <p class="text-12px">点击下方按钮添加第一个条件</p>
+        </div>
+        <el-button type="primary" @click="addCondition">
+          <Icon icon="ep:plus" />
+          添加条件
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 条件列表 -->
+    <div v-else class="space-y-16px">
+      <div
+        v-for="(condition, conditionIndex) in subGroup.conditions"
+        :key="`condition-${conditionIndex}`"
+        class="relative"
+      >
+        <!-- 条件配置 -->
+        <div
+          class="border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)] shadow-sm"
+        >
+          <div
+            class="flex items-center justify-between p-12px bg-[var(--el-fill-color-light)] border-b border-[var(--el-border-color-lighter)] rounded-t-4px"
+          >
+            <div class="flex items-center gap-8px">
+              <div
+                class="w-20px h-20px bg-blue-500 text-white rounded-full flex items-center justify-center text-10px font-bold"
+              >
+                {{ conditionIndex + 1 }}
+              </div>
+              <span class="text-12px font-500 text-[var(--el-text-color-primary)]"
+                >条件 {{ conditionIndex + 1 }}</span
+              >
+            </div>
+            <el-button
+              type="danger"
+              size="small"
+              text
+              @click="removeCondition(conditionIndex)"
+              v-if="subGroup.conditions!.length > 1"
+              class="hover:bg-red-50"
+            >
+              <Icon icon="ep:delete" />
+            </el-button>
+          </div>
+
+          <div class="p-12px">
+            <ConditionConfig
+              :model-value="condition"
+              @update:model-value="(value) => updateCondition(conditionIndex, value)"
+              :trigger-type="triggerType"
+              @validate="(result) => handleConditionValidate(conditionIndex, result)"
+            />
+          </div>
+        </div>
+
+        <!-- 条件间的"且"连接符 -->
+        <div
+          v-if="conditionIndex < subGroup.conditions!.length - 1"
+          class="flex items-center justify-center py-8px"
+        >
+          <div class="flex items-center gap-8px">
+            <!-- 连接线 -->
+            <div class="w-24px h-1px bg-green-300"></div>
+            <!-- 且标签 -->
+            <div class="px-12px py-4px bg-green-100 border border-green-300 rounded-full">
+              <span class="text-12px font-600 text-green-600">且</span>
+            </div>
+            <!-- 连接线 -->
+            <div class="w-24px h-1px bg-green-300"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加条件按钮 -->
+      <div
+        v-if="
+          subGroup.conditions &&
+          subGroup.conditions.length > 0 &&
+          subGroup.conditions.length < maxConditions
+        "
+        class="text-center py-16px"
+      >
+        <el-button type="primary" plain @click="addCondition">
+          <Icon icon="ep:plus" />
+          继续添加条件
+        </el-button>
+        <span class="block mt-8px text-12px text-[var(--el-text-color-secondary)]">
+          最多可添加 {{ maxConditions }} 个条件
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import ConditionConfig from './ConditionConfig.vue'
+import {
+  SubConditionGroupFormData,
+  ConditionFormData,
+  IotRuleSceneTriggerConditionTypeEnum
+} from '@/api/iot/rule/scene/scene.types'
+
+/** 子条件组配置组件 */
+defineOptions({ name: 'SubConditionGroupConfig' })
+
+interface Props {
+  modelValue: SubConditionGroupFormData
+  triggerType: number
+  maxConditions?: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: SubConditionGroupFormData): void
+  (e: 'validate', result: { valid: boolean; message: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const subGroup = useVModel(props, 'modelValue', emit)
+
+// 配置常量
+const maxConditions = computed(() => props.maxConditions || 3)
+
+// 验证状态
+const conditionValidations = ref<{ [key: number]: { valid: boolean; message: string } }>({})
+
+// 事件处理
+const addCondition = () => {
+  if (!subGroup.value.conditions) {
+    subGroup.value.conditions = []
+  }
+
+  if (subGroup.value.conditions.length >= maxConditions.value) {
+    return
+  }
+
+  const newCondition: ConditionFormData = {
+    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
+    productId: undefined,
+    deviceId: undefined,
+    identifier: '',
+    operator: '=',
+    param: ''
+  }
+
+  subGroup.value.conditions.push(newCondition)
+}
+
+const removeCondition = (index: number) => {
+  if (subGroup.value.conditions) {
+    subGroup.value.conditions.splice(index, 1)
+    delete conditionValidations.value[index]
+
+    // 重新索引验证结果
+    const newValidations: { [key: number]: { valid: boolean; message: string } } = {}
+    Object.keys(conditionValidations.value).forEach((key) => {
+      const numKey = parseInt(key)
+      if (numKey > index) {
+        newValidations[numKey - 1] = conditionValidations.value[numKey]
+      } else if (numKey < index) {
+        newValidations[numKey] = conditionValidations.value[numKey]
+      }
+    })
+    conditionValidations.value = newValidations
+
+    updateValidationResult()
+  }
+}
+
+const updateCondition = (index: number, condition: ConditionFormData) => {
+  if (subGroup.value.conditions) {
+    subGroup.value.conditions[index] = condition
+  }
+}
+
+const handleConditionValidate = (index: number, result: { valid: boolean; message: string }) => {
+  conditionValidations.value[index] = result
+  updateValidationResult()
+}
+
+const updateValidationResult = () => {
+  if (!subGroup.value.conditions || subGroup.value.conditions.length === 0) {
+    emit('validate', { valid: false, message: '子条件组至少需要一个条件' })
+    return
+  }
+
+  const validations = Object.values(conditionValidations.value)
+  const allValid = validations.every((v: any) => v.valid)
+
+  if (allValid) {
+    emit('validate', { valid: true, message: '子条件组配置验证通过' })
+  } else {
+    const errorMessages = validations.filter((v: any) => !v.valid).map((v: any) => v.message)
+    emit('validate', { valid: false, message: `条件配置错误: ${errorMessages.join('; ')}` })
+  }
+}
+
+// 监听变化
+watch(
+  () => subGroup.value.conditions,
+  () => {
+    updateValidationResult()
+  },
+  { deep: true, immediate: true }
+)
+</script>
diff --git a/src/views/iot/rule/scene/form/sections/TriggerSection.vue b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
index abf9f75f..2cfed1b7 100644
--- a/src/views/iot/rule/scene/form/sections/TriggerSection.vue
+++ b/src/views/iot/rule/scene/form/sections/TriggerSection.vue
@@ -1,92 +1,46 @@
-<!-- 触发器配置组件 -->
+<!-- 场景触发器配置组件 -->
 <template>
   <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-8px">
-          <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
-          <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
-          <el-tag size="small" type="info">{{ triggers.length }}个触发器</el-tag>
-        </div>
-        <div class="flex items-center gap-8px">
-          <el-button
-            type="primary"
-            size="small"
-            @click="addTrigger"
-          >
-            <Icon icon="ep:plus" />
-            添加触发器
-          </el-button>
-        </div>
+      <div class="flex items-center gap-8px">
+        <Icon icon="ep:lightning" class="text-[var(--el-color-primary)] text-18px" />
+        <span class="text-16px font-600 text-[var(--el-text-color-primary)]">触发器配置</span>
+        <el-tag size="small" type="info">场景触发器</el-tag>
       </div>
     </template>
 
-    <div class="p-0">
-      <!-- 空状态 -->
-      <div v-if="triggers.length === 0">
-        <el-empty description="暂无触发器配置，请点击右上角添加触发器按钮开始配置" />
-      </div>
+    <div class="p-16px space-y-16px">
+      <!-- 触发事件类型选择 -->
+      <el-form-item label="触发事件类型" required>
+        <el-select
+          :model-value="trigger.type"
+          @update:model-value="(value) => updateTriggerType(value)"
+          @change="onTriggerTypeChange"
+          placeholder="请选择触发事件类型"
+          class="w-full"
+        >
+          <el-option
+            v-for="option in triggerTypeOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
 
-      <!-- 触发器列表 -->
-      <div v-else class="space-y-16px">
-        <div v-for="(trigger, index) in triggers" :key="`trigger-${index}`" class="p-16px border border-[var(--el-border-color-lighter)] rounded-6px bg-[var(--el-fill-color-blank)]">
-          <div class="flex items-center justify-between mb-16px">
-            <div class="flex items-center gap-8px">
-              <Icon icon="ep:lightning" class="text-[var(--el-color-warning)] text-16px" />
-              <span>触发器 {{ index + 1 }}</span>
-              <el-tag :type="getTriggerTypeTag(trigger.type)" size="small">
-                {{ getTriggerTypeName(trigger.type) }}
-              </el-tag>
-            </div>
-            <div>
-              <el-button
-                type="danger"
-                size="small"
-                text
-                @click="removeTrigger(index)"
-                v-if="triggers.length > 1"
-              >
-                <Icon icon="ep:delete" />
-                删除
-              </el-button>
-            </div>
-          </div>
+      <!-- 设备触发配置 -->
+      <DeviceTriggerConfig
+        v-if="isDeviceTrigger(trigger.type)"
+        :model-value="trigger"
+        @update:model-value="updateTrigger"
+      />
 
-          <div class="space-y-16px">
-            <!-- 触发类型选择 -->
-            <el-form-item label="触发类型" required>
-              <el-select
-                :model-value="trigger.type"
-                @update:model-value="(value) => updateTriggerType(index, value)"
-                @change="onTriggerTypeChange(trigger, $event)"
-                placeholder="请选择触发类型"
-                class="w-full"
-              >
-                <el-option
-                  v-for="option in triggerTypeOptions"
-                  :key="option.value"
-                  :label="option.label"
-                  :value="option.value"
-                />
-              </el-select>
-            </el-form-item>
-
-            <!-- 设备触发配置 -->
-            <DeviceTriggerConfig
-              v-if="isDeviceTrigger(trigger.type)"
-              :model-value="trigger"
-              @update:model-value="(value) => updateTrigger(index, value)"
-            />
-
-            <!-- 定时触发配置 -->
-            <TimerTriggerConfig
-              v-if="trigger.type === TriggerTypeEnum.TIMER"
-              :model-value="trigger.cronExpression"
-              @update:model-value="(value) => updateTriggerCronExpression(index, value)"
-            />
-          </div>
-        </div>
-      </div>
+      <!-- 定时触发配置 -->
+      <TimerTriggerConfig
+        v-if="trigger.type === TriggerTypeEnum.TIMER"
+        :model-value="trigger.cronExpression"
+        @update:model-value="updateTriggerCronExpression"
+      />
     </div>
   </el-card>
 </template>
@@ -104,37 +58,17 @@ import {
 defineOptions({ name: 'TriggerSection' })
 
 interface Props {
-  triggers: TriggerFormData[]
+  trigger: TriggerFormData
 }
 
 interface Emits {
-  (e: 'update:triggers', value: TriggerFormData[]): void
+  (e: 'update:trigger', value: TriggerFormData): void
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-const triggers = useVModel(props, 'triggers', emit)
-
-/**
- * 创建默认的触发器数据
- */
-const createDefaultTriggerData = (): TriggerFormData => {
-  return {
-    type: TriggerTypeEnum.DEVICE_PROPERTY_POST, // 默认为设备属性上报
-    productId: undefined,
-    deviceId: undefined,
-    identifier: undefined,
-    operator: undefined,
-    value: undefined,
-    cronExpression: undefined,
-    conditionGroups: []
-  }
-}
-
-
-
-
+const trigger = useVModel(props, 'trigger', emit)
 
 // 触发器类型选项
 const triggerTypeOptions = [
@@ -160,23 +94,6 @@ const triggerTypeOptions = [
   }
 ]
 
-// 触发器类型映射
-const triggerTypeNames = {
-  [TriggerTypeEnum.DEVICE_STATE_UPDATE]: '设备状态变更',
-  [TriggerTypeEnum.DEVICE_PROPERTY_POST]: '属性上报',
-  [TriggerTypeEnum.DEVICE_EVENT_POST]: '事件上报',
-  [TriggerTypeEnum.DEVICE_SERVICE_INVOKE]: '服务调用',
-  [TriggerTypeEnum.TIMER]: '定时触发'
-}
-
-const triggerTypeTags = {
-  [TriggerTypeEnum.DEVICE_STATE_UPDATE]: 'warning',
-  [TriggerTypeEnum.DEVICE_PROPERTY_POST]: 'primary',
-  [TriggerTypeEnum.DEVICE_EVENT_POST]: 'success',
-  [TriggerTypeEnum.DEVICE_SERVICE_INVOKE]: 'info',
-  [TriggerTypeEnum.TIMER]: 'danger'
-}
-
 // 工具函数
 const isDeviceTrigger = (type: number) => {
   const deviceTriggerTypes = [
@@ -188,58 +105,47 @@ const isDeviceTrigger = (type: number) => {
   return deviceTriggerTypes.includes(type)
 }
 
-const getTriggerTypeName = (type: number) => {
-  return triggerTypeNames[type] || '未知类型'
-}
-
-const getTriggerTypeTag = (type: number) => {
-  return triggerTypeTags[type] || 'info'
-}
-
 // 事件处理
-const addTrigger = () => {
-  const newTrigger = createDefaultTriggerData()
-  triggers.value.push(newTrigger)
+const updateTriggerType = (type: number) => {
+  trigger.value.type = type
+  onTriggerTypeChange(type)
 }
 
-const removeTrigger = (index: number) => {
-  triggers.value.splice(index, 1)
+const updateTrigger = (newTrigger: TriggerFormData) => {
+  trigger.value = newTrigger
 }
 
-const updateTriggerType = (index: number, type: number) => {
-  triggers.value[index].type = type
-  onTriggerTypeChange(triggers.value[index], type)
+const updateTriggerCronExpression = (cronExpression?: string) => {
+  trigger.value.cronExpression = cronExpression
 }
 
-const updateTrigger = (index: number, trigger: TriggerFormData) => {
-  triggers.value[index] = trigger
-}
-
-const updateTriggerCronExpression = (index: number, cronExpression?: string) => {
-  triggers.value[index].cronExpression = cronExpression
-}
-
-const onTriggerTypeChange = (trigger: TriggerFormData, type: number) => {
+const onTriggerTypeChange = (type: number) => {
   // 清理不相关的配置
   if (type === TriggerTypeEnum.TIMER) {
-    trigger.productId = undefined
-    trigger.deviceId = undefined
-    trigger.identifier = undefined
-    trigger.operator = undefined
-    trigger.value = undefined
-    trigger.conditionGroups = undefined
-    if (!trigger.cronExpression) {
-      trigger.cronExpression = '0 0 12 * * ?'
+    trigger.value.productId = undefined
+    trigger.value.deviceId = undefined
+    trigger.value.identifier = undefined
+    trigger.value.operator = undefined
+    trigger.value.value = undefined
+    trigger.value.mainCondition = undefined
+    trigger.value.conditionGroup = undefined
+    if (!trigger.value.cronExpression) {
+      trigger.value.cronExpression = '0 0 12 * * ?'
     }
   } else {
-    trigger.cronExpression = undefined
+    trigger.value.cronExpression = undefined
     if (type === TriggerTypeEnum.DEVICE_STATE_UPDATE) {
-      trigger.conditionGroups = undefined
-    } else if (!trigger.conditionGroups) {
-      trigger.conditionGroups = []
+      trigger.value.mainCondition = undefined
+      trigger.value.conditionGroup = undefined
+    } else {
+      // 设备属性、事件、服务触发需要条件配置
+      if (!trigger.value.mainCondition) {
+        trigger.value.mainCondition = undefined // 等待用户配置
+      }
+      if (!trigger.value.conditionGroup) {
+        trigger.value.conditionGroup = undefined // 可选的条件组
+      }
     }
   }
 }
 </script>
-
-
diff --git a/src/views/iot/rule/scene/form/selectors/ConditionTypeSelector.vue b/src/views/iot/rule/scene/form/selectors/ConditionTypeSelector.vue
new file mode 100644
index 00000000..c955ceff
--- /dev/null
+++ b/src/views/iot/rule/scene/form/selectors/ConditionTypeSelector.vue
@@ -0,0 +1,80 @@
+<!-- 条件类型选择器组件 -->
+<template>
+  <el-select
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择条件类型"
+    class="w-full"
+  >
+    <el-option
+      v-for="option in conditionTypeOptions"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    >
+      <div class="flex items-center justify-between w-full">
+        <div class="flex items-center gap-8px">
+          <Icon :icon="option.icon" :class="option.iconClass" />
+          <span>{{ option.label }}</span>
+        </div>
+        <el-tag :type="option.tag" size="small">{{ option.category }}</el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { IotRuleSceneTriggerConditionTypeEnum } from '@/api/iot/rule/scene/scene.types'
+
+/** 条件类型选择器组件 */
+defineOptions({ name: 'ConditionTypeSelector' })
+
+interface Props {
+  modelValue?: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: number): void
+  (e: 'change', value: number): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 条件类型选项
+const conditionTypeOptions = [
+  {
+    value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
+    label: '设备状态',
+    description: '监控设备的在线/离线状态变化',
+    icon: 'ep:connection',
+    iconClass: 'text-blue-500',
+    tag: 'primary',
+    category: '设备'
+  },
+  {
+    value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
+    label: '设备属性',
+    description: '监控设备属性值的变化',
+    icon: 'ep:data-analysis',
+    iconClass: 'text-green-500',
+    tag: 'success',
+    category: '属性'
+  },
+  {
+    value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
+    label: '当前时间',
+    description: '基于当前时间的条件判断',
+    icon: 'ep:timer',
+    iconClass: 'text-orange-500',
+    tag: 'warning',
+    category: '时间'
+  }
+]
+
+// 事件处理
+const handleChange = (value: number) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+</script>
diff --git a/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue b/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
new file mode 100644
index 00000000..9c327cd6
--- /dev/null
+++ b/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
@@ -0,0 +1,127 @@
+<!-- 设备选择器组件 -->
+<template>
+  <el-select
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择设备"
+    filterable
+    clearable
+    class="w-full"
+    :loading="deviceLoading"
+    :disabled="!productId"
+  >
+    <el-option
+      v-for="device in deviceList"
+      :key="device.id"
+      :label="device.deviceName"
+      :value="device.id"
+    >
+      <div class="flex items-center justify-between w-full py-4px">
+        <div class="flex-1">
+          <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{
+            device.deviceName
+          }}</div>
+          <div class="text-12px text-[var(--el-text-color-secondary)]">{{ device.deviceKey }}</div>
+        </div>
+        <div class="flex items-center gap-4px">
+          <el-tag size="small" :type="getStatusType(device.status)">
+            {{ getStatusText(device.status) }}
+          </el-tag>
+          <el-tag size="small" :type="device.activeTime ? 'success' : 'info'">
+            {{ device.activeTime ? '已激活' : '未激活' }}
+          </el-tag>
+        </div>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { DeviceApi } from '@/api/iot/device/device'
+
+/** 设备选择器组件 */
+defineOptions({ name: 'DeviceSelector' })
+
+interface Props {
+  modelValue?: number
+  productId?: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value?: number): void
+  (e: 'change', value?: number): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 状态
+const deviceLoading = ref(false)
+const deviceList = ref<any[]>([])
+
+// 事件处理
+const handleChange = (value?: number) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+// 获取设备列表
+const getDeviceList = async () => {
+  if (!props.productId) {
+    deviceList.value = []
+    return
+  }
+
+  try {
+    deviceLoading.value = true
+    const res = await DeviceApi.getDeviceListByProductId(props.productId)
+    deviceList.value = res || []
+  } catch (error) {
+    console.error('获取设备列表失败:', error)
+    deviceList.value = []
+  } finally {
+    deviceLoading.value = false
+  }
+}
+
+// 设备状态映射
+const getStatusType = (status: number) => {
+  switch (status) {
+    case 0:
+      return 'success' // 正常
+    case 1:
+      return 'danger' // 禁用
+    default:
+      return 'info'
+  }
+}
+
+const getStatusText = (status: number) => {
+  switch (status) {
+    case 0:
+      return '正常'
+    case 1:
+      return '禁用'
+    default:
+      return '未知'
+  }
+}
+
+// 监听产品变化
+watch(
+  () => props.productId,
+  (newProductId) => {
+    if (newProductId) {
+      getDeviceList()
+    } else {
+      deviceList.value = []
+      // 清空当前选择的设备
+      if (props.modelValue) {
+        emit('update:modelValue', undefined)
+        emit('change', undefined)
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/iot/rule/scene/form/selectors/ProductSelector.vue b/src/views/iot/rule/scene/form/selectors/ProductSelector.vue
new file mode 100644
index 00000000..70d95964
--- /dev/null
+++ b/src/views/iot/rule/scene/form/selectors/ProductSelector.vue
@@ -0,0 +1,81 @@
+<!-- 产品选择器组件 -->
+<template>
+  <el-select
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择产品"
+    filterable
+    clearable
+    class="w-full"
+    :loading="productLoading"
+  >
+    <el-option
+      v-for="product in productList"
+      :key="product.id"
+      :label="product.name"
+      :value="product.id"
+    >
+      <div class="flex items-center justify-between w-full py-4px">
+        <div class="flex-1">
+          <div class="text-14px font-500 text-[var(--el-text-color-primary)] mb-2px">{{
+            product.name
+          }}</div>
+          <div class="text-12px text-[var(--el-text-color-secondary)]">{{
+            product.productKey
+          }}</div>
+        </div>
+        <el-tag size="small" :type="product.status === 0 ? 'success' : 'danger'">
+          {{ product.status === 0 ? '正常' : '禁用' }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { ProductApi } from '@/api/iot/product/product'
+
+/** 产品选择器组件 */
+defineOptions({ name: 'ProductSelector' })
+
+interface Props {
+  modelValue?: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value?: number): void
+  (e: 'change', value?: number): void
+}
+
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 状态
+const productLoading = ref(false)
+const productList = ref<any[]>([])
+
+// 事件处理
+const handleChange = (value?: number) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+// 获取产品列表
+const getProductList = async () => {
+  try {
+    productLoading.value = true
+    const res = await ProductApi.getSimpleProductList()
+    productList.value = res || []
+  } catch (error) {
+    console.error('获取产品列表失败:', error)
+    productList.value = []
+  } finally {
+    productLoading.value = false
+  }
+}
+
+// 组件挂载时获取产品列表
+onMounted(() => {
+  getProductList()
+})
+</script>
diff --git a/src/views/iot/rule/scene/form/selectors/types.ts b/src/views/iot/rule/scene/form/selectors/types.ts
index 4446d4a6..df666aea 100644
--- a/src/views/iot/rule/scene/form/selectors/types.ts
+++ b/src/views/iot/rule/scene/form/selectors/types.ts
@@ -130,41 +130,3 @@ export interface PropertySelectorItem {
   event?: ThingModelEvent
   service?: ThingModelService
 }
-
-/** 数据类型枚举 */
-export enum DataTypeEnum {
-  INT = 'int',
-  FLOAT = 'float',
-  DOUBLE = 'double',
-  ENUM = 'enum',
-  BOOL = 'bool',
-  TEXT = 'text',
-  DATE = 'date',
-  STRUCT = 'struct',
-  ARRAY = 'array'
-}
-
-/** 访问模式枚举 */
-export enum AccessModeEnum {
-  READ = 'r',
-  READ_write = 'rw'
-}
-
-/** 事件类型枚举 */
-export enum EventTypeEnum {
-  INFO = 'info',
-  ALERT = 'alert',
-  ERROR = 'error'
-}
-
-/** 调用类型枚举 */
-export enum CallTypeEnum {
-  ASYNC = 'async',
-  SYNC = 'sync'
-}
-
-/** 参数方向枚举 */
-export enum ParamDirectionEnum {
-  INPUT = 'input',
-  OUTPUT = 'output'
-}

From f70d55f088673050763fb71211cbbc5a9509f869 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 28 Jul 2025 22:08:20 +0800
Subject: [PATCH 10/10] =?UTF-8?q?perf=EF=BC=9A=E3=80=90IoT=20=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E7=BD=91=E3=80=91=E5=9C=BA=E6=99=AF=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E5=99=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../configs/DeviceStatusConditionConfig.vue   |   7 -
 .../form/configs/DeviceTriggerConfig.vue      |  69 ++---
 .../form/configs/MainConditionConfig.vue      |  50 +---
 .../form/configs/MainConditionInnerConfig.vue | 282 ++++++++++++++++++
 .../scene/form/selectors/DeviceSelector.vue   |   1 +
 5 files changed, 330 insertions(+), 79 deletions(-)
 create mode 100644 src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue

diff --git a/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
index f198ed9e..bce80b3f 100644
--- a/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceStatusConditionConfig.vue
@@ -1,13 +1,6 @@
 <!-- 设备状态条件配置组件 -->
 <template>
   <div class="flex flex-col gap-16px">
-    <div
-      class="flex items-center gap-8px p-12px px-16px bg-blue-50 rounded-6px border border-blue-200"
-    >
-      <Icon icon="ep:connection" class="text-blue-500 text-18px" />
-      <span class="text-14px font-500 text-blue-700">设备状态条件配置</span>
-    </div>
-
     <!-- 产品设备选择 -->
     <el-row :gutter="16">
       <el-col :span="12">
diff --git a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
index 8457be29..cde929ac 100644
--- a/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@@ -1,23 +1,8 @@
 <!-- 设备触发配置组件 - 优化版本 -->
 <template>
   <div class="flex flex-col gap-16px">
-    <!-- 产品和设备选择 -->
-    <ProductDeviceSelector
-      v-model:product-id="trigger.productId"
-      v-model:device-id="trigger.deviceId"
-      @change="handleDeviceChange"
-    />
-
-    <!-- 主条件配置 -->
-    <div v-if="needsConditions" class="space-y-16px">
-      <div
-        class="flex items-center gap-8px p-12px px-16px bg-blue-50 rounded-6px border border-blue-200"
-      >
-        <Icon icon="ep:star-filled" class="text-blue-500 text-18px" />
-        <span class="text-14px font-600 text-blue-700">主条件配置</span>
-        <el-tag size="small" type="primary">必须满足</el-tag>
-      </div>
-
+    <!-- 主条件配置 - 默认直接展示 -->
+    <div class="space-y-16px">
       <MainConditionConfig
         v-model="trigger.mainCondition"
         :trigger-type="trigger.type"
@@ -26,13 +11,10 @@
     </div>
 
     <!-- 条件组配置 -->
-    <div v-if="needsConditions && trigger.mainCondition" class="space-y-16px">
+    <div v-if="trigger.mainCondition" class="space-y-16px">
       <div class="flex items-center justify-between">
-        <div
-          class="flex items-center gap-8px p-12px px-16px bg-green-50 rounded-6px border border-green-200"
-        >
-          <Icon icon="ep:connection" class="text-green-500 text-18px" />
-          <span class="text-14px font-600 text-green-700">附加条件组</span>
+        <div class="flex items-center gap-8px">
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">附加条件组</span>
           <el-tag size="small" type="success">与主条件为且关系</el-tag>
           <el-tag size="small" type="info">
             {{ trigger.conditionGroup?.subGroups?.length || 0 }}个子条件组
@@ -77,7 +59,7 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import ProductDeviceSelector from '../selectors/ProductDeviceSelector.vue'
+
 import MainConditionConfig from './MainConditionConfig.vue'
 import ConditionGroupContainerConfig from './ConditionGroupContainerConfig.vue'
 import {
@@ -111,9 +93,29 @@ const validationMessage = ref('')
 const isValid = ref(true)
 
 // 计算属性
-const needsConditions = computed(() => {
-  return trigger.value.type !== TriggerTypeEnum.DEVICE_STATE_UPDATE
-})
+
+// 初始化主条件
+const initMainCondition = () => {
+  if (!trigger.value.mainCondition) {
+    trigger.value.mainCondition = {
+      type: trigger.value.type, // 使用触发事件类型作为条件类型
+      productId: undefined,
+      deviceId: undefined,
+      identifier: '',
+      operator: '=',
+      param: ''
+    }
+  }
+}
+
+// 监听触发器类型变化，自动初始化主条件
+watch(
+  () => trigger.value.type,
+  () => {
+    initMainCondition()
+  },
+  { immediate: true }
+)
 
 // 新的事件处理函数
 const handleMainConditionValidate = (result: { valid: boolean; message: string }) => {
@@ -130,13 +132,8 @@ const addConditionGroup = () => {
 }
 
 // 事件处理
-const handleDeviceChange = ({ productId, deviceId }: { productId?: number; deviceId?: number }) => {
-  trigger.value.productId = productId
-  trigger.value.deviceId = deviceId
-  updateValidationResult()
-}
 
-const handleConditionGroupValidate = (result: { valid: boolean; message: string }) => {
+const handleConditionGroupValidate = () => {
   updateValidationResult()
 }
 
@@ -145,10 +142,10 @@ const removeConditionGroup = () => {
 }
 
 const updateValidationResult = () => {
-  // 基础验证
-  if (!trigger.value.productId || !trigger.value.deviceId) {
+  // 主条件验证
+  if (!mainConditionValidation.value.valid) {
     isValid.value = false
-    validationMessage.value = '请选择产品和设备'
+    validationMessage.value = mainConditionValidation.value.message
     emit('validate', { valid: false, message: validationMessage.value })
     return
   }
diff --git a/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue b/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
index e8f28515..7b00355a 100644
--- a/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/MainConditionConfig.vue
@@ -20,52 +20,30 @@
     </div>
 
     <!-- 主条件配置 -->
-    <div
-      v-else
-      class="border border-[var(--el-border-color-lighter)] rounded-8px bg-[var(--el-fill-color-blank)] shadow-sm"
-    >
-      <div
-        class="flex items-center justify-between p-16px bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-[var(--el-border-color-lighter)] rounded-t-6px"
-      >
-        <div class="flex items-center gap-12px">
-          <div
-            class="flex items-center gap-8px text-16px font-600 text-[var(--el-text-color-primary)]"
-          >
-            <div
-              class="w-24px h-24px bg-blue-500 text-white rounded-full flex items-center justify-center text-12px font-bold"
-            >
-              主
-            </div>
-            <span>主条件</span>
-          </div>
-          <el-tag size="small" type="primary" class="font-500">必须满足</el-tag>
+    <div v-else class="space-y-16px">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-8px">
+          <span class="text-14px font-500 text-[var(--el-text-color-primary)]">主条件</span>
+          <el-tag size="small" type="primary">必须满足</el-tag>
         </div>
-        <el-button
-          type="danger"
-          size="small"
-          text
-          @click="removeMainCondition"
-          class="hover:bg-red-50"
-        >
+        <el-button type="danger" size="small" text @click="removeMainCondition">
           <Icon icon="ep:delete" />
           删除
         </el-button>
       </div>
 
-      <div class="p-16px">
-        <ConditionConfig
-          :model-value="modelValue"
-          @update:model-value="updateCondition"
-          :trigger-type="triggerType"
-          @validate="handleValidate"
-        />
-      </div>
+      <MainConditionInnerConfig
+        :model-value="modelValue"
+        @update:model-value="updateCondition"
+        :trigger-type="triggerType"
+        @validate="handleValidate"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import ConditionConfig from './ConditionConfig.vue'
+import MainConditionInnerConfig from './MainConditionInnerConfig.vue'
 import {
   ConditionFormData,
   IotRuleSceneTriggerConditionTypeEnum
@@ -84,7 +62,7 @@ interface Emits {
   (e: 'validate', result: { valid: boolean; message: string }): void
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 const emit = defineEmits<Emits>()
 
 // 事件处理
diff --git a/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue b/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
new file mode 100644
index 00000000..d915c042
--- /dev/null
+++ b/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
@@ -0,0 +1,282 @@
+<!-- 主条件内部配置组件 - 不显示条件类型选择 -->
+<template>
+  <div class="space-y-16px">
+    <!-- 触发事件类型显示 -->
+    <div class="flex items-center gap-8px mb-16px">
+      <span class="text-14px text-[var(--el-text-color-regular)]">触发事件类型：</span>
+      <el-tag size="small" type="primary">{{ getTriggerTypeText(triggerType) }}</el-tag>
+    </div>
+
+    <!-- 设备属性条件配置 -->
+    <div v-if="isDevicePropertyTrigger" class="space-y-16px">
+      <!-- 产品设备选择 -->
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="产品" required>
+            <ProductSelector
+              :model-value="condition.productId"
+              @update:model-value="(value) => updateConditionField('productId', value)"
+              @change="handleProductChange"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="设备" required>
+            <DeviceSelector
+              :model-value="condition.deviceId"
+              @update:model-value="(value) => updateConditionField('deviceId', value)"
+              :product-id="condition.productId"
+              @change="handleDeviceChange"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 属性配置 -->
+      <el-row :gutter="16">
+        <!-- 属性/事件/服务选择 -->
+        <el-col :span="6">
+          <el-form-item label="监控项" required>
+            <PropertySelector
+              :model-value="condition.identifier"
+              @update:model-value="(value) => updateConditionField('identifier', value)"
+              :trigger-type="triggerType"
+              :product-id="condition.productId"
+              :device-id="condition.deviceId"
+              @change="handlePropertyChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 操作符选择 -->
+        <el-col :span="6">
+          <el-form-item label="操作符" required>
+            <OperatorSelector
+              :model-value="condition.operator"
+              @update:model-value="(value) => updateConditionField('operator', value)"
+              :property-type="propertyType"
+              @change="handleOperatorChange"
+            />
+          </el-form-item>
+        </el-col>
+
+        <!-- 值输入 -->
+        <el-col :span="12">
+          <el-form-item label="比较值" required>
+            <ValueInput
+              :model-value="condition.param"
+              @update:model-value="(value) => updateConditionField('param', value)"
+              :property-type="propertyType"
+              :operator="condition.operator"
+              :property-config="propertyConfig"
+              @validate="handleValueValidate"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 条件预览 -->
+      <div v-if="conditionPreview" class="mt-12px">
+        <div class="text-12px text-[var(--el-text-color-secondary)]">
+          预览：{{ conditionPreview }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 设备状态条件配置 -->
+    <div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
+      <DeviceStatusConditionConfig
+        :model-value="condition"
+        @update:model-value="updateCondition"
+        @validate="handleValidate"
+      />
+    </div>
+
+    <!-- 其他触发类型的提示 -->
+    <div v-else class="text-center py-20px">
+      <p class="text-14px text-[var(--el-text-color-secondary)] mb-4px">
+        当前触发事件类型：{{ getTriggerTypeText(triggerType) }}
+      </p>
+      <p class="text-12px text-[var(--el-text-color-placeholder)]">
+        此触发类型暂不需要配置额外条件
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProductSelector from '../selectors/ProductSelector.vue'
+import DeviceSelector from '../selectors/DeviceSelector.vue'
+import PropertySelector from '../selectors/PropertySelector.vue'
+import OperatorSelector from '../selectors/OperatorSelector.vue'
+import ValueInput from '../inputs/ValueInput.vue'
+import DeviceStatusConditionConfig from './DeviceStatusConditionConfig.vue'
+import { ConditionFormData } from '@/api/iot/rule/scene/scene.types'
+import { IotRuleSceneTriggerTypeEnum } from '@/api/iot/rule/scene/scene.types'
+import { useVModel } from '@vueuse/core'
+
+/** 主条件内部配置组件 */
+defineOptions({ name: 'MainConditionInnerConfig' })
+
+interface Props {
+  modelValue: ConditionFormData
+  triggerType: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: ConditionFormData): void
+  (e: 'validate', result: { valid: boolean; message: string }): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 响应式数据
+const condition = useVModel(props, 'modelValue', emit)
+const isValid = ref(true)
+const validationMessage = ref('')
+const propertyType = ref('')
+const propertyConfig = ref<any>(null)
+
+// 计算属性
+const isDevicePropertyTrigger = computed(() => {
+  return (
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+  )
+})
+
+const isDeviceStatusTrigger = computed(() => {
+  return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE
+})
+
+const conditionPreview = computed(() => {
+  if (!condition.value.productId || !condition.value.deviceId || !condition.value.identifier) {
+    return ''
+  }
+  return `设备[${condition.value.deviceId}]的${condition.value.identifier} ${condition.value.operator} ${condition.value.param}`
+})
+
+// 获取触发类型文本
+const getTriggerTypeText = (type: number) => {
+  switch (type) {
+    case IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST:
+      return '设备属性上报'
+    case IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST:
+      return '设备事件上报'
+    case IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE:
+      return '设备服务调用'
+    case IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE:
+      return '设备状态变化'
+    default:
+      return '未知类型'
+  }
+}
+
+// 事件处理
+const updateConditionField = (field: keyof ConditionFormData, value: any) => {
+  condition.value[field] = value
+  updateValidationResult()
+}
+
+const updateCondition = (value: ConditionFormData) => {
+  emit('update:modelValue', value)
+  updateValidationResult()
+}
+
+const handleProductChange = () => {
+  // 产品变化时清空设备和属性
+  condition.value.deviceId = undefined
+  condition.value.identifier = ''
+  updateValidationResult()
+}
+
+const handleDeviceChange = () => {
+  // 设备变化时清空属性
+  condition.value.identifier = ''
+  updateValidationResult()
+}
+
+const handlePropertyChange = (propertyInfo: any) => {
+  if (propertyInfo) {
+    propertyType.value = propertyInfo.type
+    propertyConfig.value = propertyInfo.config
+  }
+  updateValidationResult()
+}
+
+const handleOperatorChange = () => {
+  updateValidationResult()
+}
+
+const handleValueValidate = (result: { valid: boolean; message: string }) => {
+  updateValidationResult()
+}
+
+const handleValidate = (result: { valid: boolean; message: string }) => {
+  isValid.value = result.valid
+  validationMessage.value = result.message
+  emit('validate', result)
+}
+
+// 验证逻辑
+const updateValidationResult = () => {
+  if (isDevicePropertyTrigger.value) {
+    // 设备属性触发验证
+    if (!condition.value.productId) {
+      isValid.value = false
+      validationMessage.value = '请选择产品'
+      emit('validate', { valid: false, message: validationMessage.value })
+      return
+    }
+
+    if (!condition.value.deviceId) {
+      isValid.value = false
+      validationMessage.value = '请选择设备'
+      emit('validate', { valid: false, message: validationMessage.value })
+      return
+    }
+
+    if (!condition.value.identifier) {
+      isValid.value = false
+      validationMessage.value = '请选择监控项'
+      emit('validate', { valid: false, message: validationMessage.value })
+      return
+    }
+
+    if (!condition.value.operator) {
+      isValid.value = false
+      validationMessage.value = '请选择操作符'
+      emit('validate', { valid: false, message: validationMessage.value })
+      return
+    }
+
+    if (!condition.value.param) {
+      isValid.value = false
+      validationMessage.value = '请输入比较值'
+      emit('validate', { valid: false, message: validationMessage.value })
+      return
+    }
+  }
+
+  isValid.value = true
+  validationMessage.value = '主条件配置验证通过'
+  emit('validate', { valid: true, message: validationMessage.value })
+}
+
+// 监听变化
+watch(
+  () => [
+    condition.value.productId,
+    condition.value.deviceId,
+    condition.value.identifier,
+    condition.value.operator,
+    condition.value.param
+  ],
+  () => {
+    updateValidationResult()
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue b/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
index 9c327cd6..8afdf623 100644
--- a/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
+++ b/src/views/iot/rule/scene/form/selectors/DeviceSelector.vue
@@ -80,6 +80,7 @@ const getDeviceList = async () => {
     console.error('获取设备列表失败:', error)
     deviceList.value = []
   } finally {
+    deviceList.value.push({ id: 0, deviceName: '全部设备' })
     deviceLoading.value = false
   }
 }