From 5b7245da4308aaab3522da9df1d32c9106659291 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Wed, 8 Jan 2025 16:03:49 +0800
Subject: [PATCH] Perf: Optimize the DataSummary style

---
 src/views/dashboard/Pam/DataSummary.vue  |  15 +-
 src/views/dashboard/Pam/SummaryChart.vue | 218 +++++++++++++++--------
 src/views/dashboard/Pam/index.vue        |  15 +-
 3 files changed, 170 insertions(+), 78 deletions(-)

diff --git a/src/views/dashboard/Pam/DataSummary.vue b/src/views/dashboard/Pam/DataSummary.vue
index a22ce194c..7fc134015 100644
--- a/src/views/dashboard/Pam/DataSummary.vue
+++ b/src/views/dashboard/Pam/DataSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="16">
-      <el-col :lg="24" :sm="12">
+      <el-col :lg="24">
         <SummaryChart :config="accountConfig" />
       </el-col>
     </el-row>
@@ -25,7 +25,9 @@ export default {
         data: [],
         route: { name: 'PamAccounts' },
         total: 0,
-        weekAdd: 0
+        weekAdd: 0,
+        connectivityOk: 0,
+        secretReset: 0
       }
     }
   },
@@ -39,17 +41,18 @@ export default {
         {
           params: {
             total_accounts: 1,
-            total_week_add_accounts: 1
+            total_week_add_accounts: 1,
+            total_secret_reset_accounts: 1,
+            total_connectivity_ok_accounts: 1
           }
         }
       )
 
       this.accountConfig.total = data.total_accounts
       this.accountConfig.weekAdd = data.total_week_add_accounts
+      this.accountConfig.secretReset = data.total_secret_reset_accounts
+      this.accountConfig.connectivityOk = data.total_connectivity_ok_accounts
     }
   }
 }
 </script>
-
-<style scoped>
-</style>
diff --git a/src/views/dashboard/Pam/SummaryChart.vue b/src/views/dashboard/Pam/SummaryChart.vue
index 85e7a7bb9..8ba3586f6 100644
--- a/src/views/dashboard/Pam/SummaryChart.vue
+++ b/src/views/dashboard/Pam/SummaryChart.vue
@@ -1,35 +1,33 @@
 <template>
-  <div class="card">
-    <div class="card-content">
-      <div class="title">
-        <Title :config="config" />
-      </div>
-      <div class="sub">{{ config.subTitle }}</div>
-      <slot class="custom">
-        <div>
+  <div class="summary-card">
+    <div class="title-section">
+      <Title :config="config" />
+    </div>
+
+    <div class="content">
+      <div class="info-box">
+        <div class="total-number">
           <template v-if="config.route">
-            <router-link :to="config.route">
-              <div class="num"> {{ config.total }} </div>
-            </router-link>
-          </template>
-          <template v-else>
-            <div class="num">{{ config.total }}</div>
+            <router-link :to="config.route">{{ config.total }}</router-link>
           </template>
+          <template v-else>{{ config.total }}</template>
         </div>
-        <div class="add">
-          <span class="add-num">
-            {{ $tc('WeekAdd') }}：
-            <span :class="{'increase': config.weekAdd > 0}" style="font-size: 14px;">
-              {{ config.weekAdd }}
-            </span>
-          </span>
-          <span class="add-icon">
-            <svg-icon v-if="config.icon" :icon-class="config.icon" class="font" />
+        <div class="sub-title">{{ config.subTitle }}</div>
+      </div>
+
+      <div class="metrics-section">
+        <div
+          v-for="item in summaryItems"
+          :key="item.key"
+          class="metric-item"
+        >
+          <span class="metric-value" :class="{'increase': config[item.key] > 0}">
+            {{ config[item.key] }}
           </span>
+          <span class="metric-label">{{ $tc(item.label) }}</span>
         </div>
-      </slot>
+      </div>
     </div>
-    <div class="ring" />
   </div>
 </template>
 
@@ -47,78 +45,158 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      summaryItems: [
+        {
+          key: 'weekAdd',
+          label: 'WeekAdd',
+          className: 'add'
+        },
+        {
+          key: 'connectivityOk',
+          label: 'ConnectivityOk',
+          className: 'connection'
+        },
+        {
+          key: 'secretReset',
+          label: 'SecretReset',
+          className: 'connection'
+        }
+      ]
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.card {
+.summary-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
   width: 100%;
-  padding: 20px;
   background-color: #FFF;
 
-  .card-content {
-    padding-bottom: 16px;
-    border-bottom: 1px solid #EFF0F1;
-
-    .title,
-    .num {
+  .title-section {
+    .title {
+      font-size: 1.125rem;
+      font-weight: 600;
       color: var(--color-text-primary);
+      letter-spacing: -0.01em;
     }
+  }
 
-    .title {
-      margin-bottom: 12px;
-    }
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 2rem;
 
-    .num {
-      font-weight: 500;
-      font-size: 32px;
-      line-height: 40px;
-      margin-bottom: 4px;
-    }
+    .info-box {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      flex: 1;
+      min-width: 160px;
+      padding: 1rem 0;
 
-    .sub,
-    .add {
-      color: var(--color-icon-primary);
-    }
+      .total-number {
+        font-size: 2.25rem;
+        font-weight: 700;
+        color: var(--color-text-primary);
+        line-height: 1;
+        letter-spacing: -0.02em;
 
-    .sub {
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 20px;
-      margin-bottom: 4px;
+        a {
+          color: inherit;
+          text-decoration: none;
+          transition: color 0.2s ease;
+          &:hover { color: var(--color-primary); }
+        }
+      }
+
+      .sub-title {
+        font-size: 0.875rem;
+        color: var(--color-icon-primary);
+        font-weight: 500;
+      }
     }
 
-    .add {
+    .metrics-section {
       display: flex;
       justify-content: space-between;
+      flex-wrap: nowrap;
+      gap: 0.75rem;
+
+      .metric-item {
+        min-width: 120px;
+        padding: 0.75rem 0;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-2px);
+        }
+
+        .metric-value {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: var(--color-text-primary);
+          letter-spacing: -0.01em;
+
+          &.increase {
+            color: var(--color-primary);
+          }
+        }
+
+        .metric-label {
+          font-size: 0.75rem;
+          font-weight: 500;
+          color: var(--color-icon-primary);
+          text-transform: uppercase;
+          letter-spacing: 0.02em;
+        }
+      }
     }
   }
 
-  .custom {
-    display: flex;
-    justify-content: space-between;
-    font-weight: 500;
-    font-size: 32px;
-    padding-bottom: 18px;
-  }
+  @media (max-width: 768px) {
+    padding: 1.25rem;
+    gap: 1.25rem;
+
+    .content {
+      gap: 1rem;
+
+      .info-box {
+        width: 100%;
+        padding: 0.875rem 0;
 
-  .ring {
-    padding: 26px 0 10px;
+        .total-number {
+          font-size: 2rem;
+        }
+      }
 
-    & ::v-deep .echarts {
-      width: 100% !important;
-      height: 278px !important;
+      .metrics-section {
+        width: 100%;
+        justify-content: space-between;
+
+        .metric-item {
+          flex: 1;
+          min-width: calc(33.333% - 0.5rem);
+          max-width: calc(50% - 0.5rem);
+        }
+      }
     }
   }
 
-  .font {
-    font-size: 18px;
-  }
+  @media (max-width: 480px) {
+    padding: 1rem;
 
-  .increase {
-    color: var(--color-primary);
+    .metrics-section .metric-item {
+      min-width: calc(50% - 0.375rem);
+    }
   }
 }
 </style>
diff --git a/src/views/dashboard/Pam/index.vue b/src/views/dashboard/Pam/index.vue
index 98b5bb3c9..af5ca0d7f 100644
--- a/src/views/dashboard/Pam/index.vue
+++ b/src/views/dashboard/Pam/index.vue
@@ -5,7 +5,7 @@
 
       <div class="dashboard-container">
         <el-row :gutter="20" class="top-summary">
-          <el-col :span="18" :lg="18" :xs="24" class="left-column">
+          <el-col :lg="16" :xs="24" class="left-column">
             <div class="account-wrapper">
               <AccountSummary class="summary-card" />
             </div>
@@ -13,7 +13,7 @@
               <RiskSummary class="summary-card" />
             </div>
           </el-col>
-          <el-col :span="6" :lg="6" :xs="24">
+          <el-col :lg="8" :xs="24" class="right-column">
             <DataSummary class="summary-card" />
           </el-col>
         </el-row>
@@ -81,6 +81,11 @@ export default {
       flex-direction: column;
       gap: 1.25rem;
     }
+
+    .right-column {
+      max-height: 286px;
+      height: 286px;
+    }
   }
 
   .bottom-section {
@@ -119,6 +124,12 @@ export default {
     box-shadow: 0 1px 4px rgba(0,21,41,.08);
   }
 
+  @media screen and (max-width: 1200px) {
+    .right-column {
+      margin-top: 1.25rem;
+    }
+  }
+
   @media screen and (max-width: 768px) {
     padding: 0.625rem;