From b9dde4ebf0d8da45d4c28b2d8faea77409e0f0f0 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 26 Apr 2024 16:13:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=A6=82=E8=A7=88?=
 =?UTF-8?q?=E9=A1=B5=20CPU=20=E6=98=BE=E7=A4=BA=20(#4721)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/interface/setting.ts    |  1 +
 frontend/src/lang/modules/en.ts          |  2 +
 frontend/src/lang/modules/tw.ts          |  2 +
 frontend/src/lang/modules/zh.ts          |  2 +
 frontend/src/views/home/status/index.vue | 57 +++++++++++++++++-------
 5 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/frontend/src/api/interface/setting.ts b/frontend/src/api/interface/setting.ts
index b59018801..677c8800d 100644
--- a/frontend/src/api/interface/setting.ts
+++ b/frontend/src/api/interface/setting.ts
@@ -140,6 +140,7 @@ export namespace Setting {
         upload: string;
     }
     export interface UpgradeInfo {
+        testVersion: string;
         newVersion: string;
         latestVersion: string;
         releaseNote: string;
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 4a262bcdb..a47646532 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -58,6 +58,8 @@ const message = {
             fullscreen: 'Fullscreen',
             quitFullscreen: 'Quit Fullscreen',
             update: 'Edit',
+            showAll: 'Show All',
+            hideSome: 'Hide Some',
         },
         search: {
             timeStart: 'Time start',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 7fcde3b8d..6e6987084 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -58,6 +58,8 @@ const message = {
             fullscreen: '全屏',
             quitFullscreen: '退出全屏',
             update: '編輯',
+            showAll: '顯示所有',
+            hideSome: '隱藏部分',
         },
         search: {
             timeStart: '開始時間',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index e1900f0be..d082f39f1 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -58,6 +58,8 @@ const message = {
             fullscreen: '全屏',
             quitFullscreen: '退出全屏',
             update: '编辑',
+            showAll: '显示所有',
+            hideSome: '隐藏部分',
         },
         search: {
             timeStart: '开始时间',
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 52a7a6bdd..bb131191b 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -1,12 +1,7 @@
 <template>
     <el-row :gutter="10">
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover
-                placement="bottom"
-                :width="currentInfo.cpuPercent.length < 36 ? 300 : (currentInfo.cpuPercent.length / 12) * 150"
-                trigger="hover"
-                v-if="chartsOption['cpu']"
-            >
+            <el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
                 <div>
                     <el-tooltip
                         effect="dark"
@@ -14,7 +9,7 @@
                         v-if="baseInfo.cpuModelName.length > 40"
                         placement="top"
                     >
-                        <el-tag>
+                        <el-tag class="cpuModeTag">
                             {{ baseInfo.cpuModelName.substring(0, 40) + '...' }}
                         </el-tag>
                     </el-tooltip>
@@ -22,14 +17,24 @@
                         {{ baseInfo.cpuModelName }}
                     </el-tag>
                 </div>
-                <el-tag class="tagClass">
-                    {{ $t('home.core') }} *{{ baseInfo.cpuCores }} {{ $t('home.logicCore') }} *{{
-                        baseInfo.cpuLogicalCores
-                    }}
-                </el-tag>
+                <el-tag class="cpuDetailTag">{{ $t('home.core') }} *{{ baseInfo.cpuCores }}</el-tag>
+                <el-tag class="cpuDetailTag">{{ $t('home.logicCore') }} *{{ baseInfo.cpuLogicalCores }}</el-tag>
                 <br />
                 <div v-for="(item, index) of currentInfo.cpuPercent" :key="index">
-                    <el-tag class="tagCPUClass">CPU-{{ index }}: {{ formatNumber(item) }}%</el-tag>
+                    <el-tag v-if="cpuShowAll || (!cpuShowAll && index < 32)" class="tagCPUClass">
+                        CPU-{{ index }}: {{ formatNumber(item) }}%
+                    </el-tag>
+                </div>
+
+                <div v-if="currentInfo.cpuPercent.length > 32" class="mt-1 float-right">
+                    <el-button v-if="!cpuShowAll" @click="cpuShowAll = true" link type="primary" size="small">
+                        {{ $t('commons.button.showAll') }}
+                        <el-icon><DArrowRight /></el-icon>
+                    </el-button>
+                    <el-button v-if="cpuShowAll" @click="cpuShowAll = false" link type="primary" size="small">
+                        {{ $t('commons.button.hideSome') }}
+                        <el-icon><DArrowLeft /></el-icon>
+                    </el-button>
                 </div>
                 <template #reference>
                     <v-charts
@@ -302,6 +307,8 @@ const currentInfo = ref<Dashboard.CurrentInfo>({
     shotTime: new Date(),
 });
 
+const cpuShowAll = ref();
+
 const chartsOption = ref({ cpu: null, memory: null, load: null });
 
 const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo, isInit: boolean): void => {
@@ -359,6 +366,14 @@ const goGPU = () => {
     router.push({ name: 'GPU' });
 };
 
+const loadWidth = () => {
+    if (!cpuShowAll.value || currentInfo.value.cpuPercent.length < 32) {
+        return 310;
+    }
+    let line = Math.floor(currentInfo.value.cpuPercent.length / 16);
+    return line * 141 + 28;
+};
+
 function formatNumber(val: number) {
     return Number(val.toFixed(2));
 }
@@ -369,6 +384,18 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
+.cpuModeTag {
+    justify-content: flex-start !important;
+    text-align: left !important;
+    width: 280px;
+}
+.cpuDetailTag {
+    justify-content: flex-start !important;
+    text-align: left !important;
+    width: 140px;
+    margin-top: 3px;
+    margin-left: 1px;
+}
 .tagClass {
     margin-top: 3px;
 }
@@ -378,8 +405,8 @@ defineExpose({
     text-align: left !important;
     float: left;
     margin-top: 3px;
-    margin-left: 4px;
-    width: 100px;
+    margin-left: 1px;
+    width: 140px;
 }
 
 .buttonClass {