Skip to content

Commit

Permalink
Perf: Optimism Summery Card
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZhaoJiSen
ZhaoJiSen committed Jan 21, 2025
1 parent fb9d9d6 commit b849d83
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 147 deletions.
14 changes: 10 additions & 4 deletions src/views/dashboard/Pam/DataSummary.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
},
Expand All @@ -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
}
}
}
Expand Down
225 changes: 83 additions & 142 deletions src/views/dashboard/Pam/SummaryChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,28 @@
<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">{{ 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>
Expand All @@ -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'
}
]
}
Expand All @@ -71,6 +74,8 @@ export default {
</script>

<style lang="scss" scoped>
$text-color: #646A73;
.card {
display: flex;
flex-direction: column;
Expand All @@ -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;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/views/dashboard/Pam/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit b849d83

Please sign in to comment.