feat: 概览界面针对磁盘显示优化

frontend/src/lang/modules/en.ts

@@ -257,6 +257,7 @@ const message = {
         runJam: 'Run Blockaged',
 
         core: 'Physical core',
+        coreUnit: 'Core',
         logicCore: 'Logic core',
         loadAverage: 'Average load in the last {0} minutes',
         load: 'Load',
@@ -274,6 +275,7 @@ const message = {
     },
     tabs: {
         more: 'More',
+        hide: 'Hide',
         closeCurrent: 'Close current',
         closeOther: 'Close other',
         closeAll: 'Close All',

frontend/src/lang/modules/zh.ts

@@ -270,6 +270,7 @@ const message = {
         runJam: '运行堵塞',
 
         core: '物理核心',
+        coreUnit: '核',
         logicCore: '逻辑核心',
         loadAverage: '最近 {0} 分钟平均负载',
         load: '负载',
@@ -287,6 +288,7 @@ const message = {
     },
     tabs: {
         more: '更多',
+        hide: '收起',
         closeCurrent: '关闭当前',
         closeOther: '关闭其它',
         closeAll: '关闭所有',

frontend/src/views/home/status/index.vue

@@ -33,7 +33,7 @@
                 </template>
             </el-popover>
             <span class="input-help">
-                ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) Core
+                ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) {{ $t('home.coreUnit') }}
             </span>
         </el-col>
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
@@ -69,14 +69,23 @@
             align="center"
             v-for="(item, index) of currentInfo.diskData"
             :key="index"
+            v-show="showMore || index < 4"
         >
             <el-popover placement="bottom" :width="300" trigger="hover">
+                <el-row :gutter="5">
+                    <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
+                </el-row>
+                <el-row :gutter="5">
+                    <el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
+                </el-row>
+                <el-row :gutter="5">
+                    <el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
+                </el-row>
+                <el-row :gutter="5">
+                    <el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
+                </el-row>
                 <el-row :gutter="5">
                     <el-col :span="12">
-                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
-                        <el-tag class="tagClass">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
-                        <el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
-                        <el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
                         <div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
                         <el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
                         <el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
@@ -88,17 +97,11 @@
 
                     <el-col :span="12">
                         <div>
-                            <el-tag style="margin-top: 108px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
+                            <el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
                         </div>
-                        <el-tag class="tagClass">
+                        <el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
-                            {{ $t('home.total') }}: {{ formatNumber(item.total / 1024 / 1024 / 1024) }} GB
+                        <el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
-                        </el-tag>
+                        <el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.used') }}: {{ formatNumber(item.used / 1024 / 1024 / 1024) }} GB
-                        </el-tag>
-                        <el-tag class="tagClass">
-                            {{ $t('home.free') }}: {{ formatNumber(item.free / 1024 / 1024 / 1024) }} GB
-                        </el-tag>
                         <el-tag class="tagClass">
                             {{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
                         </el-tag>
@@ -108,22 +111,43 @@
                     <div :id="`disk${index}`" class="chartClass"></div>
                 </template>
             </el-popover>
-            <span class="input-help">
+            <span class="input-help">{{ computeSize(item.used) }} / {{ computeSize(item.total) }}</span>
-                ( {{ formatNumber(item.used / 1024 / 1024 / 1024) }} /
+        </el-col>
-                {{ formatNumber(item.total / 1024 / 1024 / 1024) }} ) GB
+        <el-col v-if="!showMore" :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            </span>
+            <el-button link type="primary" @click="showMore = true" class="buttonClass">
+                {{ $t('tabs.more') }}
+                <el-icon><Bottom /></el-icon>
+            </el-button>
+        </el-col>
+        <el-col
+            v-if="showMore && currentInfo.diskData.length > 5"
+            :xs="12"
+            :sm="12"
+            :md="6"
+            :lg="6"
+            :xl="6"
+            align="center"
+            style="float: right"
+        >
+            <el-button type="primary" link @click="showMore = false" class="buttonClass">
+                {{ $t('tabs.hide') }}
+                <el-icon><Top /></el-icon>
+            </el-button>
         </el-col>
     </el-row>
 </template>
 
 <script setup lang="ts">
 import { Dashboard } from '@/api/interface/dashboard';
+import { computeSize } from '@/utils/util';
 import i18n from '@/lang';
 import * as echarts from 'echarts';
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
+const showMore = ref(true);
+
 const baseInfo = ref<Dashboard.BaseInfo>({
     websiteNumber: 0,
     databaseNumber: 0,
@@ -185,11 +209,12 @@ const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo):
     freshChart('load', i18n.global.t('home.load'), formatNumber(currentInfo.value.loadUsagePercent));
     nextTick(() => {
         for (let i = 0; i < currentInfo.value.diskData.length; i++) {
-            freshChart(
+            let itemPath = currentInfo.value.diskData[i].path;
-                'disk' + i,
+            itemPath = itemPath.length > 12 ? itemPath.substring(0, 9) + '...' : itemPath;
-                currentInfo.value.diskData[i].path,
+            freshChart('disk' + i, itemPath, formatNumber(currentInfo.value.diskData[i].usedPercent));
-                formatNumber(currentInfo.value.diskData[i].usedPercent),
+        }
-            );
+        if (currentInfo.value.diskData.length > 5) {
+            showMore.value = false;
         }
     });
 };
@@ -349,4 +374,15 @@ defineExpose({
     width: 100%;
     height: 160px;
 }
+.buttonClass {
+    margin-top: 28%;
+    font-size: 14px;
+}
+.nameTag {
+    margin-top: 3px;
+    height: auto;
+    display: inline-block;
+    white-space: normal;
+    line-height: 1.8;
+}
 </style>