fix: 优化概览页磁盘显示 (#7023)

frontend/src/lang/modules/en.ts

@@ -11,6 +11,7 @@ const message = {
         true: 'true',
         false: 'false',
         example: 'e.g.:',
+        fit2cloud: 'FIT2CLOUD',
         button: {
             create: 'Create ',
             add: 'Add ',

frontend/src/lang/modules/tw.ts

@@ -10,6 +10,7 @@ const message = {
         true: '是',
         false: '否',
         example: '例：',
+        fit2cloud: '飛致雲',
         button: {
             create: '創建',
             add: '添加',

frontend/src/lang/modules/zh.ts

@@ -10,6 +10,7 @@ const message = {
         true: '是',
         false: '否',
         example: '例：',
+        fit2cloud: '飞致云',
         button: {
             create: '创建',
             add: '添加',

frontend/src/layout/components/AppFooter.vue

@@ -2,7 +2,7 @@
     <div class="footer" :style="{ height: mobile ? '108px' : '48px' }">
         <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
             <div class="flex flex-wrap gap-4">
-                <a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2024 飞致云</a>
+                <a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2024 {{ $t('commons.fit2cloud') }}</a>
             </div>
             <div class="flex flex-row gap-2 md:flex-col lg:flex-row">
                 <SystemUpgrade :footer="true" />

frontend/src/views/home/index.vue

@@ -290,7 +290,6 @@ const isSafety = ref();
 const chartOption = ref('network');
 let timer: NodeJS.Timer | null = null;
 let isInit = ref<boolean>(true);
-let isStatusInit = ref<boolean>(true);
 let isActive = ref(true);
 
 const ioReadBytes = ref<Array<number>>([]);
@@ -429,8 +428,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
     currentInfo.value.uptime = resData.uptime;
 
     loadAppCurrentInfo();
-    isStatusInit.value = false;
+    statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
-    statusRef.value.acceptParams(currentInfo.value, baseInfo.value, isStatusInit.value);
     appRef.value.acceptParams();
     if (isInit) {
         timer = setInterval(async () => {
@@ -443,7 +441,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
 
 const loadAppCurrentInfo = async () => {
     await Promise.all([onLoadCurrentInfo('gpu'), onLoadCurrentInfo('basic'), onLoadCurrentInfo('ioNet')]);
-    statusRef.value.acceptParams(currentInfo.value, baseInfo.value, isStatusInit.value);
+    statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
 };
 
 const onLoadCurrentInfo = async (scope: string) => {

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

@@ -112,7 +112,7 @@
             <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
         </el-col>
         <template v-for="(item, index) of currentInfo.diskData" :key="index">
-            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="showMore || index < 4">
+            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
                 <el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
                     <el-row :gutter="5">
                         <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
@@ -165,15 +165,7 @@
             </el-col>
         </template>
         <template v-for="(item, index) of currentInfo.gpuData" :key="index">
-            <el-col
+            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
-                :xs="12"
-                :sm="12"
-                :md="6"
-                :lg="6"
-                :xl="6"
-                align="center"
-                v-if="showMore || index < 4 - currentInfo.diskData.length"
-            >
                 <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
                     <el-row :gutter="5">
                         <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
@@ -218,16 +210,8 @@
             </el-col>
         </template>
         <template v-for="(item, index) of currentInfo.xpuData" :key="index">
-            <el-col
+            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
-                :xs="12"
+                <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
-                :sm="12"
-                :md="6"
-                :lg="6"
-                :xl="6"
-                align="center"
-                v-if="showMore || index < 4 - currentInfo.diskData.length"
-            >
-                <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
                     <el-row :gutter="5">
                         <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
                     </el-row>
@@ -249,10 +233,10 @@
                         <v-charts
                             @click="goGPU()"
                             height="160px"
-                            :id="`gpu${index}`"
+                            :id="`xpu${index}`"
                             type="pie"
-                            :option="chartsOption[`gpu${index}`]"
+                            :option="chartsOption[`xpu${index}`]"
-                            v-if="chartsOption[`gpu${index}`]"
+                            v-if="chartsOption[`xpu${index}`]"
                         />
                     </template>
                 </el-popover>
@@ -262,18 +246,12 @@
                 <span class="input-help" v-else>{{ item.deviceName }}</span>
             </el-col>
         </template>
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
+        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
-            <el-button v-if="!showMore" link type="primary" @click="showMore = true" class="buttonClass">
+            <el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="buttonClass">
                 {{ $t('tabs.more') }}
                 <el-icon><Bottom /></el-icon>
             </el-button>
-            <el-button
+            <el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="buttonClass">
-                v-if="showMore && currentInfo.diskData.length > 5"
-                type="primary"
-                link
-                @click="showMore = false"
-                class="buttonClass"
-            >
                 {{ $t('tabs.hide') }}
                 <el-icon><Top /></el-icon>
             </el-button>
@@ -288,6 +266,7 @@ import router from '@/routers';
 import i18n from '@/lang';
 import { nextTick, ref } from 'vue';
 const showMore = ref(false);
+const totalCount = ref();
 
 const baseInfo = ref<Dashboard.BaseInfo>({
     websiteNumber: 0,
@@ -355,7 +334,7 @@ const cpuShowAll = ref();
 
 const chartsOption = ref({ cpu: null, memory: null, load: null });
 
-const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo, isInit: boolean): void => {
+const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo): void => {
     currentInfo.value = current;
     baseInfo.value = base;
     chartsOption.value['cpu'] = {
@@ -389,14 +368,15 @@ const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo,
         }
         currentInfo.value.xpuData = currentInfo.value.xpuData || [];
         for (let i = 0; i < currentInfo.value.xpuData.length; i++) {
-            chartsOption.value['gpu' + i] = {
+            chartsOption.value['xpu' + i] = {
-                title: 'GPU-' + currentInfo.value.xpuData[i].deviceID,
+                title: 'XPU-' + currentInfo.value.xpuData[i].deviceID,
                 data: formatNumber(Number(currentInfo.value.xpuData[i].memoryUtil.replaceAll('%', ''))),
             };
         }
-        if (currentInfo.value.diskData.length + currentInfo.value.gpuData.length > 5) {
+
-            showMore.value = isInit ? false : showMore.value || false;
+        totalCount.value =
-        }
+            currentInfo.value.diskData.length + currentInfo.value.gpuData.length + currentInfo.value.xpuData.length;
+        showMore.value = localStorage.getItem('dashboard_show') === 'more';
     });
 };
 
@@ -413,10 +393,29 @@ function loadStatus(val: number) {
     return i18n.global.t('home.runJam');
 }
 
+const isShow = (val: string, index: number) => {
+    let showCount = totalCount.value < 6 ? 5 : 4;
+    switch (val) {
+        case 'disk':
+            return showMore.value || index < showCount;
+        case 'gpu':
+            let gpuCount = showCount - currentInfo.value.diskData.length;
+            return showMore.value || index < gpuCount;
+        case 'xpu':
+            let xpuCount = showCount - currentInfo.value.diskData.length - currentInfo.value.gpuData.length;
+            return showMore.value || index < xpuCount;
+    }
+};
+
 const goGPU = () => {
     router.push({ name: 'GPU' });
 };
 
+const changeShowMore = (show: boolean) => {
+    showMore.value = show;
+    localStorage.setItem('dashboard_show', show ? 'more' : 'hide');
+};
+
 const loadWidth = () => {
     if (!cpuShowAll.value || currentInfo.value.cpuPercent.length < 32) {
         return 310;