From 2e3ea9697290c3b769fa49abfbffe7af07d48d06 Mon Sep 17 00:00:00 2001
From: Envision <9063072+elapsingdreams@user.noreply.gitee.com>
Date: Thu, 15 Aug 2024 23:22:25 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E7=BB=A7=E7=BB=AD=E4=BF=AE=E5=A4=8Dlit?=
 =?UTF-8?q?eyuki=5Fstatus=E7=9B=AE=E5=BD=95=E5=90=8D=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98,=20:lipstick:=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=85=B6=E6=98=BE=E7=A4=BA=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vanilla_resource/templates/css/status.css | 24 ++++++
 .../vanilla_resource/templates/js/status.js   | 74 ++++++++++++-------
 2 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/src/resources/vanilla_resource/templates/css/status.css b/src/resources/vanilla_resource/templates/css/status.css
index 0e8b6ad3..64dfe126 100644
--- a/src/resources/vanilla_resource/templates/css/status.css
+++ b/src/resources/vanilla_resource/templates/css/status.css
@@ -100,6 +100,7 @@
     z-index: 1;
 }
 
+/*
 .disk-title {
     position: absolute;
     color: var(--main-text-color);
@@ -113,6 +114,29 @@
     max-width: calc(100% - 40px);
     z-index: 2;
 }
+*/
+.disk-name {
+    position: absolute;
+    color: var(--main-text-color);
+    font-size: 24px;
+    margin-left: 20px;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 2;
+}
+
+.disk-details {
+    position: absolute;
+    right: 20px;
+    /* 调整位置以确保有足够的空间显示 */
+    color: var(--main-text-color);
+    font-size: 24px;
+    text-align: right;
+    white-space: nowrap;
+    z-index: 2;
+}
 
 #motto-text {
     font-size: 36px;
diff --git a/src/resources/vanilla_resource/templates/js/status.js b/src/resources/vanilla_resource/templates/js/status.js
index 4a623571..6bdf3664 100644
--- a/src/resources/vanilla_resource/templates/js/status.js
+++ b/src/resources/vanilla_resource/templates/js/status.js
@@ -91,17 +91,31 @@ function convertSize(size, precision = 2, addUnit = true, suffix = " XiB") {
  * @param title
  * @param percent 数据
  */
-function createBarChart(title, percent) {
+function createBarChart(title, percent, name) {
     // percent为百分比，最大值为100
-    let diskDiv = document.createElement('div')
-    diskDiv.setAttribute('class', 'disk-info')
-    diskDiv.style.marginBottom = '20px'
+    let diskDiv = document.createElement('div');
+    diskDiv.setAttribute('class', 'disk-info');
+    diskDiv.style.marginBottom = '20px';
     diskDiv.innerHTML = `
-        <div class="disk-title">${title}</div>
+        <div class="disk-name">${name}</div>
+        <div class="disk-details">${title}</div>
         <div class="disk-usage" style="width: ${percent}%"></div>
-    `
+    `;
 
-    return diskDiv
+    updateDiskNameWidth(diskDiv);
+
+    return diskDiv;
+}
+
+// 更新 .disk-name 宽度
+function updateDiskNameWidth(diskInfoElement) {
+    let diskDetails = diskInfoElement.querySelector('.disk-details');
+    let diskName = diskInfoElement.querySelector('.disk-name');
+    let detailsWidth = diskDetails.offsetWidth;
+    let parentWidth = diskInfoElement.offsetWidth;
+
+    let nameMaxWidth = parentWidth - detailsWidth - 20 - 40;
+    diskName.style.maxWidth = `${nameMaxWidth}px`;
 }
 
 function secondsToTextTime(seconds) {
@@ -254,35 +268,34 @@ function main() {
 
 
     cpuChart.setOption(createPieChartOption(`${localData['cpu']}\n${cpuData['percent'].toFixed(1)}%`, [
-        {name: 'used', value: cpuData['percent']},
-        {name: 'free', value: 100 - cpuData['percent']}
+        { name: 'used', value: cpuData['percent'] },
+        { name: 'free', value: 100 - cpuData['percent'] }
     ]))
 
     memChart.setOption(createPieChartOption(`${localData['memory']}\n${memData['percent'].toFixed(1)}%`, [
-        {name: 'process', value: memData['usedProcess']},
-        {name: 'used', value: memData['used'] - memData['usedProcess']},
-        {name: 'free', value: memData['free']}
+        { name: 'process', value: memData['usedProcess'] },
+        { name: 'used', value: memData['used'] - memData['usedProcess'] },
+        { name: 'free', value: memData['free'] }
     ]))
 
 
     swapChart.setOption(createPieChartOption(`${localData['swap']}\n${swapData['percent'].toFixed(1)}%`, [
-        {name: 'used', value: swapData['used']},
-        {name: 'free', value: swapData['free']}
+        { name: 'used', value: swapData['used'] },
+        { name: 'free', value: swapData['free'] }
     ]))
 
 
     // 磁盘信息
-    const diskData = hardwareData['disk']
-    diskData.forEach(
-        (disk) => {
-            let diskTitle = `${disk['name']}  ${localData['free']} ${convertSize(disk['free'])}  ${localData['total']} ${convertSize(disk['total'])}`
-            // 最后一个把margin-bottom去掉
-            let diskDiv = createBarChart(diskTitle, disk['percent'])
-            if (disk === diskData[diskData.length - 1]) {
-                diskDiv.style.marginBottom = '0'
-            }
-            document.getElementById('disk-info').appendChild(createBarChart(diskTitle, disk['percent']))
-        })
+    const diskData = hardwareData['disk'];
+    diskData.forEach((disk) => {
+        let diskTitle = `${localData['free']} ${convertSize(disk['free'])}  ${localData['total']} ${convertSize(disk['total'])}`;
+        let diskDiv = createBarChart(diskTitle, disk['percent'], disk['name']);
+
+        if (disk === diskData[diskData.length - 1]) {
+            diskDiv.style.marginBottom = '0';
+        }
+        document.getElementById('disk-info').appendChild(diskDiv);
+    });
     // 随机一言
     let motto = mottos[Math.floor(Math.random() * mottos.length)]
     let mottoText = motto['text']
@@ -293,4 +306,13 @@ function main() {
 
 }
 
-main()
\ No newline at end of file
+main()
+/*
+// 窗口大小改变监听器 -- Debug
+window.addEventListener('resize', () => {
+    const diskInfos = document.querySelectorAll('.disk-info');
+    diskInfos.forEach(diskInfo => {
+        updateDiskNameWidth(diskInfo);
+    });
+});
+*/
\ No newline at end of file