starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-09-23 00:00:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust home dashboard styles (#12549)

Browse Source
This commit is contained in:
ssongliu
2026-04-21 16:35:04 +08:00
committed by GitHub
parent 9ebad13bf8
commit 89647304bb
2 changed files with 98 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/home/index.vue
+24 -19
View File
@@ -1128,22 +1128,6 @@ onBeforeUnmount(() => {
}
}
.system-label {
font-weight: 400 !important;
font-size: 14px !important;
color: var(--panel-text-color);
border: none !important;
background: none !important;
width: fit-content !important;
white-space: nowrap !important;
}
.system-content {
font-size: 13px !important;
border: none !important;
width: 100% !important;
}
.my-carousel {
&.no-indicator {
:deep(.el-carousel__indicators) {
@@ -1163,6 +1147,22 @@ onBeforeUnmount(() => {
:deep(.el-descriptions .el-descriptions__body .el-descriptions__table) {
border-spacing: 0 5px !important;
}
:deep(.h-systemInfo .system-label) {
font-weight: 400 !important;
font-size: 14px !important;
color: var(--panel-text-color);
border: none !important;
background: none !important;
width: fit-content !important;
white-space: nowrap !important;
}
:deep(.h-systemInfo .system-content) {
font-size: 13px !important;
border: none !important;
width: 100% !important;
}
}
.simple-node {
@@ -1240,20 +1240,25 @@ onBeforeUnmount(() => {
.memo-content {
min-height: 218px;
border-radius: 4px;
border: 1px solid var(--el-border-color);
background-color: var(--el-fill-color-light);
font-size: 13px;
margin-top: -15px;
margin-left: -10px;
word-wrap: break-word;
white-space: pre-wrap;
:deep(.md-editor) {
background-color: transparent;
}
:deep(.md-editor-content .md-editor-preview) {
font-size: 13px;
}
}
.memo-placeholder {
color: var(--el-text-color-placeholder);
display: inline-block;
font-size: 14px;
font-size: 13px;
}
.dashboard-carousel-setting {
frontend/src/views/host/monitor/monitor/index.vue
+74 -34
View File
@@ -39,7 +39,7 @@
></el-date-picker>
</div>
</template>
<div class="chart">
<div class="chart" v-loading="loadingMap.load">
<v-charts
height="400px"
id="loadLoadChart"
@@ -71,7 +71,7 @@
></el-date-picker>
</div>
</template>
<div class="chart">
<div class="chart" v-loading="loadingMap.cpu">
<v-charts
height="400px"
id="loadCPUChart"
@@ -101,7 +101,7 @@
></el-date-picker>
</div>
</template>
<div class="chart">
<div class="chart" v-loading="loadingMap.memory">
<v-charts
height="400px"
id="loadMemoryChart"
@@ -152,7 +152,7 @@
></el-date-picker>
</div>
</template>
<div class="chart">
<div class="chart" v-loading="loadingMap.io">
<v-charts
height="400px"
id="loadIOChart"
@@ -201,7 +201,7 @@
></el-date-picker>
</div>
</template>
<div class="chart">
<div class="chart" v-loading="loadingMap.network">
<v-charts
height="400px"
id="loadNetworkChart"
@@ -246,6 +246,13 @@ const netOptions = ref();
const ioChoose = ref();
const ioOptions = ref();
const chartsOption = ref({ loadLoadChart: null, loadCPUChart: null, loadMemoryChart: null, loadNetworkChart: null });
const loadingMap = reactive({
load: false,
cpu: false,
memory: false,
io: false,
network: false,
});
const searchTime = ref();
const searchInfo = reactive<Host.MonitorSearch>({
@@ -299,36 +306,41 @@ const search = async (param: string) => {
searchInfo.startTime = searchTime.value[0];
searchInfo.endTime = searchTime.value[1];
}
const res = await loadMonitor(searchInfo);
monitorBase.value = res.data;
for (const item of monitorBase.value) {
if (!item.value) {
item.value = [];
item.date = [];
}
switch (item.param) {
case 'base':
let baseDate = item.date.length === 0 ? loadEmptyDate(timeRangeCpu.value) : item.date;
baseDate = baseDate.map(function (item: any) {
return dateFormatWithoutYear(item);
});
if (param === 'cpu' || param === 'all') {
initCPUCharts(baseDate, item);
}
if (param === 'memory' || param === 'all') {
initMemCharts(baseDate, item);
}
if (param === 'load' || param === 'all') {
initLoadCharts(item);
}
break;
case 'io':
initIOCharts(item);
break;
case 'network':
initNetCharts(item);
break;
setChartLoading(param, true);
try {
const res = await loadMonitor(searchInfo);
monitorBase.value = res.data;
for (const item of monitorBase.value) {
if (!item.value) {
item.value = [];
item.date = [];
}
switch (item.param) {
case 'base':
let baseDate = item.date.length === 0 ? loadEmptyDate(timeRangeCpu.value) : item.date;
baseDate = baseDate.map(function (item: any) {
return dateFormatWithoutYear(item);
});
if (param === 'cpu' || param === 'all') {
initCPUCharts(baseDate, item);
}
if (param === 'memory' || param === 'all') {
initMemCharts(baseDate, item);
}
if (param === 'load' || param === 'all') {
initLoadCharts(item);
}
break;
case 'io':
initIOCharts(item);
break;
case 'network':
initNetCharts(item);
break;
}
}
} finally {
setChartLoading(param, false);
}
};
@@ -356,6 +368,34 @@ const loadOptions = async () => {
search('all');
};
const setChartLoading = (param: string, value: boolean) => {
if (param === 'all') {
loadingMap.load = value;
loadingMap.cpu = value;
loadingMap.memory = value;
loadingMap.io = value;
loadingMap.network = value;
return;
}
switch (param) {
case 'load':
loadingMap.load = value;
break;
case 'cpu':
loadingMap.cpu = value;
break;
case 'memory':
loadingMap.memory = value;
break;
case 'io':
loadingMap.io = value;
break;
case 'network':
loadingMap.network = value;
break;
}
};
function initLoadCharts(item: Host.MonitorData) {
let itemLoadDate = item.date.length === 0 ? loadEmptyDate(timeRangeLoad.value) : item.date;
let loadDate = itemLoadDate.map(function (item: any) {