style：大屏管理-dropdown组件优化

src/views/report/dashboardList/index.vue

@@ -1,43 +1,21 @@
 <template>
   <ContentWrap>
-    <el-form
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="80px"
-    >
       <el-form-item label="名称" prop="name">
         <el-input
-          v-model="queryParams.name"
+v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery"
-          placeholder="请输入名称"
+          class="!w-240px" />
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input
-          v-model="queryParams.remark"
+v-model="queryParams.remark" placeholder="请输入备注" clearable @keyup.enter="handleQuery"
-          placeholder="请输入备注"
+          class="!w-240px" />
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
       </el-form-item>
       <el-form-item label="启用状态" prop="state">
-        <el-select
+        <el-select v-model="queryParams.state" placeholder="请选择启用状态" clearable class="!w-240px">
-          v-model="queryParams.state"
-          placeholder="请选择启用状态"
-          clearable
-          class="!w-240px"
-        >
           <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
+v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)" :key="dict.value" :label="dict.label"
-            :key="dict.value"
+            :value="dict.value" />
-            :label="dict.label"
-            :value="dict.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -58,23 +36,10 @@
     <div class="dashboard-card-list">
       <el-empty v-if="!loading && list.length === 0" description="暂无数据" />
       <el-row v-else :gutter="16">
-        <el-col
+        <el-col v-for="item in list" :key="item.id" :xl="6" :lg="8" :md="12" :sm="24" :xs="24" class="mb-16px">
-          v-for="item in list"
-          :key="item.id"
-          :xl="6"
-          :lg="8"
-          :md="12"
-          :sm="24"
-          :xs="24"
-          class="mb-16px"
-        >
           <el-card shadow="hover" class="dashboard-card" :body-style="{ padding: '0' }">
             <div class="dashboard-card-image-wrapper" @click="handlePreview(item)">
-              <img
+              <img class="dashboard-card-image" :src="getDashboardImage(item)" alt="封面图" />
-                class="dashboard-card-image"
-                :src="getDashboardImage(item)"
-                alt="封面图"
-              />
               <div class="dashboard-card-state">
                 <el-tag v-if="item.state === 1" type="success" size="small">
                   启用
@@ -94,43 +59,31 @@
                 </div>
               </div>
               <div class="dashboard-card-actions">
-              <el-popover placement="bottom-end" trigger="click" width="140">
+                <el-dropdown trigger="click" placement="bottom-end">
-                <div class="dashboard-card-menu">
-                  <el-button type="primary" text @click="openEditDialog(item)">
-                    编辑
-                  </el-button>
-                  <el-button type="danger" text @click="handleDelete(item)">
-                    删除
-                  </el-button>
-                </div>
-                <template #reference>
                   <el-button text circle>
                     <Icon icon="ep:more" />
                   </el-button>
-                </template>
+                  <template #dropdown>
-              </el-popover>
+                    <el-dropdown-menu class="dashboard-card-menu">
+                      <el-dropdown-item class="dashboard-card-menu-primary" @click="openEditDialog(item)">编辑</el-dropdown-item>
+                      <el-dropdown-item divided class="dashboard-card-menu-danger" @click="handleDelete(item)">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>
             </div>
           </el-card>
         </el-col>
       </el-row>
       <Pagination
-        v-if="total > 0"
+v-if="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-        :total="total"
+        @pagination="getList" />
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getList"
-      />
     </div>
   </ContentWrap>
 
   <el-dialog
-    v-model="createDialogVisible"
+v-model="createDialogVisible" :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'" width="600px"
-    :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'"
+    draggable @closed="handleCreateDialogClosed">
-    width="600px"
-    draggable
-    @closed="handleCreateDialogClosed"
-  >
     <el-form :model="createForm" ref="createFormRef" label-width="80px" :rules="createFormRules">
       <el-form-item label="名称" prop="name">
         <el-input v-model="createForm.name" placeholder="请输入名称" />
@@ -138,104 +91,51 @@
       <el-form-item label="大屏类型" prop="type">
         <el-select v-model="createForm.type" placeholder="请选择大屏类型" class="!w-240px">
           <el-option
-            v-for="dict in getStrDictOptions('mes_goview_type')"
+v-for="dict in getStrDictOptions('mes_goview_type')" :key="dict.value" :label="dict.label"
-            :key="dict.value"
+            :value="dict.value" />
-            :label="dict.label"
-            :value="dict.value"
-          />
         </el-select>
       </el-form-item>
       <el-form-item label="产线" prop="orgId">
         <el-tree-select
-          v-model="createForm.orgId"
+v-model="createForm.orgId" :data="organizationTree" :props="lineTreeProps" filterable clearable
-          :data="organizationTree"
+          class="!w-240px" placeholder="请选择产线" @change="handleOrgChange" />
-          :props="lineTreeProps"
-          filterable
-          clearable
-          class="!w-240px"
-          placeholder="请选择产线"
-          @change="handleOrgChange"
-        />
       </el-form-item>
       <el-form-item label="设备" v-if="createForm.type === '1'">
         <div class="dashboard-device-group-list">
-          <div
+          <div v-for="(group, index) in deviceAttrSelections" :key="index" class="dashboard-device-group">
-            v-for="(group, index) in deviceAttrSelections"
-            :key="index"
-            class="dashboard-device-group"
-          >
             <el-select
-              v-model="group.deviceId"
+v-model="group.deviceId" placeholder="请选择设备" clearable filterable class="!w-160px mr-8px"
-              placeholder="请选择设备"
+              @change="(val) => handleDeviceChange(val, index)">
-              clearable
+              <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName" :value="item.id" />
-              filterable
-              class="!w-160px mr-8px"
-              @change="(val) => handleDeviceChange(val, index)"
-            >
-              <el-option
-                v-for="item in deviceList"
-                :key="item.id"
-                :label="item.deviceName"
-                :value="item.id"
-              />
             </el-select>
             <el-select
-              v-model="group.attributeIds"
+v-model="group.attributeIds" multiple collapse-tags collapse-tags-tooltip
-              multiple
+              :disabled="!group.deviceId" placeholder="请选择点位" clearable filterable class="!w-260px">
-              collapse-tags
-              collapse-tags-tooltip
-              :disabled="!group.deviceId"
-              placeholder="请选择点位"
-              clearable
-              filterable
-              class="!w-260px"
-            >
               <el-option
-                v-for="attr in (deviceAttributeOptionsMap[String(group.deviceId)] || [])"
+v-for="attr in (deviceAttributeOptionsMap[String(group.deviceId)] || [])" :key="attr.id"
-                :key="attr.id"
+                :label="attr.attributeName" :value="attr.id" />
-                :label="attr.attributeName"
-                :value="attr.id"
-              />
             </el-select>
             <el-button
-              v-if="deviceAttrSelections.length > 1"
+v-if="deviceAttrSelections.length > 1" type="danger" text class="dashboard-device-remove-btn"
-              type="danger"
+              @click="removeDeviceAttrGroup(index)" circle>
-              text
-              class="dashboard-device-remove-btn"
-              @click="removeDeviceAttrGroup(index)"
-              circle
-            >
               <Icon icon="ep:minus" />
             </el-button>
           </div>
           <el-button
-            type="primary"
+type="primary" text @click="addDeviceAttrGroup" :disabled="deviceAttrSelections.length >= 8"
-            text
+            class="mt-8px">
-            @click="addDeviceAttrGroup"
-            :disabled="deviceAttrSelections.length >= 8"
-            class="mt-8px"
-          >
             <Icon icon="ep:plus" class="mr-5px" /> 添加设备
           </el-button>
         </div>
       </el-form-item>
       <el-form-item label="内容">
-        <el-input
+        <el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="请输入内容" />
-          v-model="createForm.content"
-          type="textarea"
-          :rows="4"
-          placeholder="请输入内容"
-        />
       </el-form-item>
       <el-form-item label="备注">
         <el-input v-model="createForm.remark" placeholder="请输入备注" />
       </el-form-item>
       <el-form-item label="启用状态">
-        <el-switch
+        <el-switch v-model="createForm.state" :active-value="1" :inactive-value="0" />
-          v-model="createForm.state"
-          :active-value="1"
-          :inactive-value="0"
-        />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -425,7 +325,7 @@ const normalizeDeviceIdsList = (val: any): { deviceId: number; attributesIds: nu
         if (Array.isArray(parsed)) {
           return normalizeDeviceIdsList(parsed)
         }
-      } catch {}
+      } catch { }
     }
     const ids = trimmed
       .split(',')
@@ -456,9 +356,9 @@ const openEditDialog = (item: DashboardItem) => {
   deviceAttrSelections.value =
     createForm.deviceIdsList && createForm.deviceIdsList.length
       ? createForm.deviceIdsList.slice(0, 8).map((g) => ({
-          deviceId: g.deviceId,
+        deviceId: g.deviceId,
-          attributeIds: Array.isArray(g.attributesIds) ? g.attributesIds.slice() : []
+        attributeIds: Array.isArray(g.attributesIds) ? g.attributesIds.slice() : []
-        }))
+      }))
       : [{ deviceId: undefined, attributeIds: [] }]
   deviceAttrSelections.value.forEach((g) => {
     if (g.deviceId) {
@@ -546,7 +446,7 @@ const handleDelete = async (item: DashboardItem) => {
     })
     message.success('删除成功')
     await getList()
-  } catch {}
+  } catch { }
 }
 
 const loadOrganizationTree = async () => {
@@ -690,6 +590,26 @@ onMounted(() => {
   min-width: 120px;
 }
 
+:deep(.el-dropdown-menu__item.dashboard-card-menu-primary) {
+  color: var(--el-color-primary);
+}
+
+:deep(.el-dropdown-menu__item.dashboard-card-menu-primary:hover),
+:deep(.el-dropdown-menu__item.dashboard-card-menu-primary:focus) {
+  color: var(--el-color-primary);
+  background-color: var(--el-color-primary-light-9);
+}
+
+:deep(.el-dropdown-menu__item.dashboard-card-menu-danger) {
+  color: var(--el-color-danger);
+}
+
+:deep(.el-dropdown-menu__item.dashboard-card-menu-danger:hover),
+:deep(.el-dropdown-menu__item.dashboard-card-menu-danger:focus) {
+  color: var(--el-color-danger);
+  background-color: var(--el-color-danger-light-9);
+}
+
 .dashboard-device-group-list {
   display: flex;
   flex-direction: column;