perf：【IoT 物联网】场景联动样式 unocss 化

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;

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;

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;

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;