From 6326f46bf21dd2903c983c58d4b208b14f2f6eef Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 6 Nov 2024 19:44:52 +0800
Subject: [PATCH] =?UTF-8?q?style:=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=8C=E6=9A=97=E9=BB=91=E8=89=B2=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/kpiOverView/index.vue | 109 ++++++++++++++++-----
 1 file changed, 83 insertions(+), 26 deletions(-)

diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue
index b73736d6..891ff313 100644
--- a/src/views/perfManage/kpiOverView/index.vue
+++ b/src/views/perfManage/kpiOverView/index.vue
@@ -700,29 +700,30 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
               <span class="card-title">{{ neType.toUpperCase() }}</span>
             </template>
             <template #extra>
-              <a-dropdown v-if="secondaryKPIs[neType]?.length">
+              <a-dropdown v-if="secondaryKPIs[neType]?.length" :trigger="['click']">
                 <template #overlay>
                   <div class="secondary-kpi-menu" @click.stop>
-                    <div
-                      v-for="kpi in secondaryKPIs[neType]"
-                      :key="kpi.kpiId"
-                      class="secondary-kpi-item"
-                      @click.stop
-                    >
-                      <a-checkbox
-                        :value="kpi.kpiId"
-                        :checked="tempSelectedKPIs.includes(kpi.kpiId)"
-                        @change="(e:any) => handleSecondaryKPIChange(kpi.kpiId, e.target.checked)"
+                    <div class="secondary-kpi-list">
+                      <div
+                        v-for="kpi in secondaryKPIs[neType]"
+                        :key="kpi.kpiId"
+                        class="secondary-kpi-item"
                         @click.stop
                       >
-                        {{ kpi.title }}
-                      </a-checkbox>
+                        <a-checkbox
+                          :value="kpi.kpiId"
+                          :checked="tempSelectedKPIs.includes(kpi.kpiId)"
+                          @change="(e:any) => handleSecondaryKPIChange(kpi.kpiId, e.target.checked)"
+                          @click.stop
+                        >
+                          {{ kpi.title }}
+                        </a-checkbox>
+                      </div>
                     </div>
                   </div>
                 </template>
-                <a-button type="link" size="small">
+                <a-button type="link" size="small" class="more-metrics-btn">
                   <more-outlined />
-                  <down-outlined />
                   <span class="secondary-count">({{ secondaryKPIs[neType].length }})</span>
                 </a-button>
               </a-dropdown>
@@ -777,20 +778,81 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
 }
 /* 其他指标下拉菜单样式 */
 .secondary-kpi-menu {
-  background: #fff;
-  padding: 4px 0;
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-  0 6px 16px 0 rgba(0, 0, 0, 0.08);
+  0 6px 16px 0 rgba(0, 0, 0, 0.08),
+  0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  min-width: 240px;
+  max-width: 320px;
+}
+[data-theme='light'] .secondary-kpi-menu {
+  background: #fff;
+}
+[data-theme='dark'] .secondary-kpi-menu {
+  background: #1f1f1f;
+}
+
+.secondary-kpi-list {
   max-height: 300px;
   overflow-y: auto;
-  min-width: 200px;
+  padding: 4px 0;
+}
+
+.secondary-kpi-list::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.secondary-kpi-list::-webkit-scrollbar-thumb {
+  background: #fff;
+  border-radius: 3px;
+}
+
+.secondary-kpi-list::-webkit-scrollbar-track {
+  border-radius: 3px;
 }
 
 .secondary-kpi-item {
   padding: 8px 12px;
+  transition: background-color 0.3s;
   cursor: pointer;
-  user-select: none;
+}
+
+.more-metrics-btn {
+  display: inline-flex;
+  align-items: center;
+  color: #1890ff;
+  transition: all 0.3s;
+}
+
+.more-metrics-btn:hover {
+  color: #40a9ff;
+  background: rgba(24, 144, 255, 0.1);
+}
+
+.secondary-count {
+  margin-left: 4px;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+/* 优化复选框样式 */
+:deep(.ant-checkbox-wrapper) {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 4px 0;
+}
+
+:deep(.ant-checkbox-wrapper:hover) {
+  color: #1890ff;
+}
+
+:deep(.ant-checkbox-checked .ant-checkbox-inner) {
+  background-color: #1890ff;
+  border-color: #1890ff;
 }
 
 /* 组件统一样式 */
@@ -813,9 +875,4 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
   white-space: nowrap;
 }
 
-/* 添加次要指标数量的样式 */
-.secondary-count {
-  margin-left: 4px;
-  font-size: 12px;
-}
 </style>