🐛 继续修复liteyuki_status目录名过长布局问题, 💄 更新其显示布局

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;

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')
+    let diskDiv = document.createElement('div');
-    diskDiv.setAttribute('class', 'disk-info')
+    diskDiv.setAttribute('class', 'disk-info');
-    diskDiv.style.marginBottom = '20px'
+    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) {
@@ -272,17 +286,16 @@ function main() {
 
 
     // 磁盘信息
-    const diskData = hardwareData['disk']
+    const diskData = hardwareData['disk'];
-    diskData.forEach(
+    diskData.forEach((disk) => {
-        (disk) => {
+        let diskTitle = `${localData['free']} ${convertSize(disk['free'])}  ${localData['total']} ${convertSize(disk['total'])}`;
-            let diskTitle = `${disk['name']}  ${localData['free']} ${convertSize(disk['free'])}  ${localData['total']} ${convertSize(disk['total'])}`
+        let diskDiv = createBarChart(diskTitle, disk['percent'], disk['name']);
-            // 最后一个把margin-bottom去掉
+
-            let diskDiv = createBarChart(diskTitle, disk['percent'])
         if (disk === diskData[diskData.length - 1]) {
-                diskDiv.style.marginBottom = '0'
+            diskDiv.style.marginBottom = '0';
         }
-            document.getElementById('disk-info').appendChild(createBarChart(diskTitle, disk['percent']))
+        document.getElementById('disk-info').appendChild(diskDiv);
-        })
+    });
     // 随机一言
     let motto = mottos[Math.floor(Math.random() * mottos.length)]
     let mottoText = motto['text']
@@ -294,3 +307,12 @@ function main() {
 }
 
 main()
+/*
+// 窗口大小改变监听器 -- Debug
+window.addEventListener('resize', () => {
+    const diskInfos = document.querySelectorAll('.disk-info');
+    diskInfos.forEach(diskInfo => {
+        updateDiskNameWidth(diskInfo);
+    });
+});
+*/