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

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;
   }

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>

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;
 }

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>

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;

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>