From 32183336a2c31257e9f51c80a8010f06c39e6097 Mon Sep 17 00:00:00 2001 From: zhaojisen <1301338853@qq.com> Date: Tue, 21 Jan 2025 18:35:34 +0800 Subject: [PATCH 1/2] Perf: Optimism Summery Card --- src/views/dashboard/Pam/DataSummary.vue | 14 +- src/views/dashboard/Pam/SummaryChart.vue | 225 +++++++++-------------- src/views/dashboard/Pam/index.vue | 2 +- 3 files changed, 94 insertions(+), 147 deletions(-) diff --git a/src/views/dashboard/Pam/DataSummary.vue b/src/views/dashboard/Pam/DataSummary.vue index 7fc134015..8c3ececb5 100644 --- a/src/views/dashboard/Pam/DataSummary.vue +++ b/src/views/dashboard/Pam/DataSummary.vue @@ -26,8 +26,10 @@ export default { route: { name: 'PamAccounts' }, total: 0, weekAdd: 0, - connectivityOk: 0, - secretReset: 0 + resetSecret: 0, + connectable: 0, + privilegedAccount: 0, + regularAccount: 0 } } }, @@ -50,8 +52,12 @@ export default { 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 + this.accountConfig.resetSecret = data.total_secret_reset_accounts + this.accountConfig.connectable = data.total_connectivity_ok_accounts + + // TODO 额外两个字段 + // this.accountConfig.privilegedAccount = data.total_privileged_accounts + // this.accountConfig.regularAccount = data.total_regular_accounts } } } diff --git a/src/views/dashboard/Pam/SummaryChart.vue b/src/views/dashboard/Pam/SummaryChart.vue index e0f9a5dcf..b5f19fed3 100644 --- a/src/views/dashboard/Pam/SummaryChart.vue +++ b/src/views/dashboard/Pam/SummaryChart.vue @@ -4,30 +4,28 @@ </div> - <div class="content"> - <div class="info-box"> - <div class="total-number"> - <template v-if="config.route"> - <router-link :to="config.route">{{ config.total }}</router-link> - </template> - <template v-else>{{ config.total }}</template> - </div> - <div class="sub-title">{{ config.subTitle }}</div> + <div class="total-section"> + <!-- {{ $t('Total accounts') }} --> + <div class="sub-title"> Total accounts </div> + <div class="total-account"> {{ config.total }} </div> + + <div class="week-add"> + <!-- {{ $t('WeekAdd') }} 英文内容替换为 New this week --> + <div class="week-add-title"> New this week: </div> + <div class="week-add-value"> + {{ config.weekAdd }} </div> </div> + </div> - <div class="metrics-section"> - <div - v-for="item in summaryItems" - :key="item.key" - class="metric-item" - > - <div class="metric-content"> - <span class="metric-label">{{ $tc(item.label) }}</span> - <span class="metric-value" :class="{'increase': config[item.key] > 0}"> - {{ config[item.key] }} - </span> - </div> - </div> + <div class="metrics-section"> + <div + v-for="item in summaryItems" + :key="item.key" + class="metric-item" + > + <span class="metric-label">{{ $tc(item.label) }}</span> + <span class="metric-value" :class="{'increase': config[item.key] > 0}"> + {{ config[item.key] }} + </span> </div> </div> </div> @@ -50,19 +48,24 @@ export default { return { summaryItems: [ { - key: 'weekAdd', - label: 'WeekAdd', - className: 'add' + label: 'Connectable', + key: 'connectable', + className: 'connection' }, { - key: 'connectivityOk', - label: 'ConnectivityOk', - className: 'connection' + label: 'Reset secret', + key: 'resetSecret', + className: 'reset' }, { - key: 'secretReset', - label: 'SecretReset', - className: 'connection' + label: 'Privileged Account', + key: 'privilegedAccount', + className: 'privileged' + }, + { + label: 'Regular Account', + key: 'regularAccount', + className: 'regular' } ] } @@ -71,6 +74,8 @@ export default { </script> <style lang="scss" scoped> +$text-color: #646A73; + .card { display: flex; flex-direction: column; @@ -80,132 +85,68 @@ export default { background-color: #FFF; overflow: hidden; - .title-section { - flex-shrink: 0; - .title { - font-size: 1rem; - font-weight: 600; - color: var(--color-text-primary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .content { + .total-section { display: flex; flex-direction: column; - flex: 1; - min-height: 0; - gap: 1.5rem; - - .info-box { - display: flex; - flex: 3; - justify-content: center; - flex-direction: column; - gap: 0.375rem; - - .total-number { - font-size: 2rem; - font-weight: 700; - color: var(--color-text-primary); - line-height: 1.2; - - a { - color: inherit; - text-decoration: none; - &:hover { color: var(--color-primary); } - } - } + gap: 0.3rem; - .sub-title { - font-size: 0.875rem; - color: var(--color-icon-primary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + .sub-title { + color: #646A73; + font-size: 0.9rem; + font-weight: 400; } - .metrics-section { - flex: 1; - min-height: 0; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - align-content: flex-end; - - .metric-item { - min-width: 0; - padding: 0.5rem 0; - transition: all 0.2s ease; - cursor: pointer; - - &:hover { - background-color: var(--color-neutral-muted); - transform: translateY(-2px); - } - - .metric-content { - display: flex; - flex-direction: column; - gap: 0.25rem; - - .metric-label { - font-size: 0.75rem; - color: var(--color-icon-primary); - text-transform: uppercase; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .metric-value { - font-size: 1.125rem; - font-weight: 600; - color: var(--color-text-primary); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &.increase { - color: var(--color-primary); - } - } - } - } + .total-account { + color: #1F2329; + font-size: 2rem; + font-weight: 500; + line-height: 2.5rem; } - } - @media (max-width: 768px) { - .content { - gap: 1.25rem; + .week-add { + display: flex; + gap: 0.5rem; + color: #1F2329; + font-weight: 400; + line-height: 1.4rem; + + .week-add-title { + font-size: 0.9rem; + font-weight: inherit; + line-height: inherit; + } - .metrics-section { - grid-template-columns: repeat(3, 1fr); + .week-add-value { + color: #F54A45; + font-size: 0.9rem; + font-weight: inherit; + line-height: inherit; } } } - @media (max-width: 480px) { - .content { - .metrics-section { - grid-template-columns: repeat(2, 1fr); + .metrics-section { + display: flex; + width: 100%; - .metric-item { - padding: 0.375rem 0.5rem; + .metric-item { + display: flex; + flex-direction: column; + gap: 0.3rem; + flex: 1; - &:hover { - transform: translateY(-1px); - } + .metric-label { + color: #646A73; + font-weight: 400; + line-height: 1.4rem; + font-size: 0.9rem; + } - .metric-content { - .metric-value { - font-size: 1rem; - } - } - } + .metric-value { + color: #1F2329; + line-height: 2rem; + font-size: 1.5rem; + font-weight: 500; } } } diff --git a/src/views/dashboard/Pam/index.vue b/src/views/dashboard/Pam/index.vue index 94673d672..06b735c81 100644 --- a/src/views/dashboard/Pam/index.vue +++ b/src/views/dashboard/Pam/index.vue @@ -2,7 +2,6 @@ <Page> <div v-if="this.$hasPerm('rbac.view_console')"> <Announcement /> - <div class="dashboard-container"> <el-row :gutter="20" class="top-summary"> <el-col :lg="16" :xs="24" class="left-column"> @@ -108,6 +107,7 @@ export default { height: 100%; box-shadow: 0 1px 4px rgba(0, 21, 41, .08); transition: all .3s; + border-radius: 0.5rem; ::v-deep .card-content { padding-bottom: unset; From 3b96b3c90be7928ec5300fce0fd7c16d964c2f32 Mon Sep 17 00:00:00 2001 From: zhaojisen <1301338853@qq.com> Date: Tue, 21 Jan 2025 18:55:09 +0800 Subject: [PATCH 2/2] Perf: Optimism Interactive Effect --- src/views/dashboard/Pam/SummaryChart.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/views/dashboard/Pam/SummaryChart.vue b/src/views/dashboard/Pam/SummaryChart.vue index b5f19fed3..869961b4a 100644 --- a/src/views/dashboard/Pam/SummaryChart.vue +++ b/src/views/dashboard/Pam/SummaryChart.vue @@ -134,6 +134,7 @@ $text-color: #646A73; flex-direction: column; gap: 0.3rem; flex: 1; + transition: all 0.3s ease-in-out; .metric-label { color: #646A73; @@ -148,6 +149,15 @@ $text-color: #646A73; font-size: 1.5rem; font-weight: 500; } + + &:hover { + cursor: pointer; + transform: translateY(-0.2rem); + + .metric-value { + color: #1ab394; + } + } } } }