fix: adjust home dashboard styles (#12549)

Author: ssongliu

frontend/src/views/home/index.vue

@@ -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

@@ -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) {