mirror of
https://github.com/jumpserver/lina.git
synced 2026-01-29 21:28:52 +00:00
Perf: Optimism Summery Card
This commit is contained in:
zhaojisen
ZhaoJiSen
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
<div class="total-section">
|
||||
<!-- {{ $t('Total accounts') }} -->
|
||||
<div class="sub-title"> Total accounts </div>
|
||||
<div class="total-account"> {{ config.total }} </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="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"
|
||||
>
|
||||
<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'
|
||||
},
|
||||
{
|
||||
key: 'connectivityOk',
|
||||
label: 'ConnectivityOk',
|
||||
label: 'Connectable',
|
||||
key: 'connectable',
|
||||
className: 'connection'
|
||||
},
|
||||
{
|
||||
key: 'secretReset',
|
||||
label: 'SecretReset',
|
||||
className: 'connection'
|
||||
label: 'Reset secret',
|
||||
key: 'resetSecret',
|
||||
className: 'reset'
|
||||
},
|
||||
{
|
||||
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;
|
||||
gap: 0.3rem;
|
||||
|
||||
.info-box {
|
||||
.sub-title {
|
||||
color: #646A73;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.total-account {
|
||||
color: #1F2329;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.week-add-value {
|
||||
color: #F54A45;
|
||||
font-size: 0.9rem;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metrics-section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.metric-item {
|
||||
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); }
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-icon-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.metrics-section {
|
||||
gap: 0.3rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.metric-label {
|
||||
color: #646A73;
|
||||
font-weight: 400;
|
||||
line-height: 1.4rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
gap: 1.25rem;
|
||||
|
||||
.metrics-section {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.content {
|
||||
.metrics-section {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
.metric-item {
|
||||
padding: 0.375rem 0.5rem;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.metric-content {
|
||||
.metric-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.metric-value {
|
||||
color: #1F2329;
|
||||
line-height: 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user