1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-11-01 03:37:19 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Optimization of the loading style of the overview page (#8592)

Browse source
This commit is contained in:
ssongliu 2025-05-10 22:35:52 +08:00 • committed by GitHub
parent 6fdddc201f
commit fff7bfc3d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/views/home/app/index.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<CardWithHeader :header="$t('app.app')" class="card-interval" :loading="loading"> <CardWithHeader :header="$t('app.app')" class="card-interval" v-loading="loading">
<template #header-r> <template #header-r>
<el-popover placement="left" :width="226" trigger="click"> <el-popover placement="left" :width="226" trigger="click">
<el-input size="small" v-model="filter" clearable @input="loadOption()" /> <el-input size="small" v-model="filter" clearable @input="loadOption()" />

12
frontend/src/views/home/index.vue
View file

@ -87,7 +87,11 @@
<Status ref="statusRef" style="margin-bottom: 33px" /> <Status ref="statusRef" style="margin-bottom: 33px" />
</template> </template>
</CardWithHeader> </CardWithHeader>
<CardWithHeader :header="$t('menu.monitor')" class="card-interval"> <CardWithHeader
:header="$t('menu.monitor')"
class="card-interval chart-card"
v-loading="!chartsOption['networkChart']"
>
<template #header-r> <template #header-r>
<el-radio-group <el-radio-group
style="float: right; margin-left: 5px" style="float: right; margin-left: 5px"
@ -411,7 +415,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
const res = await loadBaseInfo(searchInfo.ioOption, searchInfo.netOption); const res = await loadBaseInfo(searchInfo.ioOption, searchInfo.netOption);
baseInfo.value = res.data; baseInfo.value = res.data;
currentInfo.value = baseInfo.value.currentInfo; currentInfo.value = baseInfo.value.currentInfo;
await onLoadCurrentInfo(); onLoadCurrentInfo();
isStatusInit.value = false; isStatusInit.value = false;
statusRef.value.acceptParams(currentInfo.value, baseInfo.value); statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
appRef.value.acceptParams(); appRef.value.acceptParams();
@ -634,4 +638,8 @@ onBeforeUnmount(() => {
line-height: 20px; line-height: 20px;
} }
} }
.chart-card {
min-height: 383px;
}
</style> </style>

6
frontend/src/views/home/status/index.vue
View file

@ -331,7 +331,11 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
const cpuShowAll = ref(); const cpuShowAll = ref();
const chartsOption = ref({ cpu: null, memory: null, load: null }); const chartsOption = ref({
cpu: { title: 'CPU', data: 0 },
memory: { title: i18n.global.t('monitor.memory'), data: 0 },
load: { title: i18n.global.t('home.load'), data: 0 },
});
const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo): void => { const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo): void => {
currentInfo.value = current; currentInfo.value = current;