perf: 【IoT 物联网】场景联动优化 ActionTypeSelector 的内容直接内联在主组件中

src/views/iot/rule/scene/form/sections/ActionSection.vue

@@ -1,5 +1,4 @@
 <!-- 执行器配置组件 -->
-<!-- todo @puhui999：参考“触发器配置”，简化下。 -->
 <template>
   <el-card class="border border-[var(--el-border-color-light)] rounded-8px" shadow="never">
     <template #header>
@@ -65,11 +64,24 @@
 
           <div class="space-y-16px">
             <!-- 执行类型选择 -->
-            <ActionTypeSelector
+            <div class="w-full">
-              :model-value="action.type"
+              <el-form-item label="执行类型" required>
-              @update:model-value="(value) => updateActionType(index, value)"
+                <el-select
-              @change="onActionTypeChange(action, $event)"
+                  :model-value="action.type"
-            />
+                  @update:model-value="(value) => updateActionType(index, value)"
+                  @change="(value) => onActionTypeChange(action, value)"
+                  placeholder="请选择执行类型"
+                  class="w-full"
+                >
+                  <el-option
+                    v-for="option in getActionTypeOptions()"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
 
             <!-- 设备控制配置 -->
             <DeviceControlConfig
@@ -119,7 +131,6 @@
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import ActionTypeSelector from '../selectors/ActionTypeSelector.vue'
 import DeviceControlConfig from '../configs/DeviceControlConfig.vue'
 import AlertConfig from '../configs/AlertConfig.vue'
 import type { Action } from '@/api/iot/rule/scene'
@@ -127,7 +138,8 @@ import {
   IotRuleSceneActionTypeEnum as ActionTypeEnum,
   isDeviceAction,
   isAlertAction,
-  getActionTypeLabel
+  getActionTypeLabel,
+  getActionTypeOptions
 } from '@/views/iot/utils/constants'
 
 /** 执行器配置组件 */
@@ -152,7 +164,7 @@ const createDefaultActionData = (): Action => {
     productId: undefined,
     deviceId: undefined,
     identifier: undefined, // 物模型标识符（服务调用时使用）
-    params: {},
+    params: undefined,
     alertConfigId: undefined
   }
 }
@@ -212,7 +224,7 @@ const onActionTypeChange = (action: Action, type: number) => {
     // 设备控制类型：清理告警配置，确保设备参数存在
     action.alertConfigId = undefined
     if (!action.params) {
-      action.params = {}
+      action.params = ''
     }
     // 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
     if (action.identifier && type !== action.type) {

src/views/iot/rule/scene/form/selectors/ActionTypeSelector.vue

@@ -1,113 +0,0 @@
-<!-- 执行器类型选择组件 -->
-<template>
-  <div class="w-full">
-    <!-- TODO @puhui999：1）设备属性设置时，貌似没选属性；2）服务调用时，貌似也没的设置哈； -->
-    <!-- TODO @puhui999：执行器的样式风格，需要统一； -->
-    <el-form-item label="执行类型" required>
-      <el-select
-        v-model="localValue"
-        placeholder="请选择执行类型"
-        @change="handleChange"
-        class="w-full"
-      >
-        <el-option
-          v-for="option in actionTypeOptions"
-          :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">
-              <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">
-              {{ option.category }}
-            </el-tag>
-          </div>
-        </el-option>
-      </el-select>
-    </el-form-item>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { IotRuleSceneActionTypeEnum } from '@/views/iot/utils/constants'
-
-/** 执行器类型选择组件 */
-defineOptions({ name: 'ActionTypeSelector' })
-
-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)
-
-// 执行器类型选项
-// TODO @puhui999：我们是不是弱化 icon 和 tag；所有组件，让整体交互更简洁和一致；
-const actionTypeOptions = [
-  {
-    value: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
-    label: '设备属性设置',
-    description: '设置目标设备的属性值',
-    icon: 'ep:edit',
-    tag: 'primary',
-    category: '设备控制'
-  },
-  {
-    value: IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
-    label: '设备服务调用',
-    description: '调用目标设备的服务',
-    icon: 'ep:service',
-    tag: 'success',
-    category: '设备控制'
-  },
-  {
-    value: IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
-    label: '触发告警',
-    description: '触发系统告警通知',
-    icon: 'ep:warning',
-    tag: 'danger',
-    category: '告警通知'
-  },
-  {
-    value: IotRuleSceneActionTypeEnum.ALERT_RECOVER,
-    label: '恢复告警',
-    description: '恢复已触发的告警',
-    icon: 'ep:circle-check',
-    tag: 'warning',
-    category: '告警通知'
-  }
-]
-
-// 事件处理
-const handleChange = (value: number) => {
-  emit('change', value)
-}
-</script>
-
-<style scoped>
-:deep(.el-select-dropdown__item) {
-  height: auto;
-  padding: 8px 20px;
-}
-</style>

src/views/iot/utils/constants.ts

@@ -274,35 +274,19 @@ export const IotRuleSceneActionTypeEnum = {
 export const getActionTypeOptions = () => [
   {
     value: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
-    label: '设备属性设置',
+    label: '设备属性设置'
-    description: '设置目标设备的属性值',
-    icon: 'ep:edit',
-    tag: 'primary',
-    category: '设备控制'
   },
   {
     value: IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
-    label: '设备服务调用',
+    label: '设备服务调用'
-    description: '调用目标设备的服务',
-    icon: 'ep:service',
-    tag: 'success',
-    category: '设备控制'
   },
   {
     value: IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
-    label: '触发告警',
+    label: '触发告警'
-    description: '触发系统告警通知',
-    icon: 'ep:warning',
-    tag: 'danger',
-    category: '告警通知'
   },
   {
     value: IotRuleSceneActionTypeEnum.ALERT_RECOVER,
-    label: '恢复告警',
+    label: '恢复告警'
-    description: '恢复已触发的告警',
-    icon: 'ep:circle-check',
-    tag: 'warning',
-    category: '告警通知'
   }
 ]