fix(status): fix status bar text overflow, fix #59

koishijs · Jan 24, 2024 · 6ff13f0 · 6ff13f0
1 parent 4e176f8
commit 6ff13f0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/plugins/status/client/load/load-bar.vue b/plugins/status/client/load/load-bar.vue
@@ -8,6 +8,7 @@
         :class="[type, 'bar']"
         :style="{ width: percentage(distribution[index]) }">
         <template v-if="index === maxIndex">{{ caption }}</template>
+        <template v-else-if="maxIndex === -1 && distribution[index] >= 0.2">{{ percentage(distribution[index]) }}</template>
       </span>
     </span>
   </div>
@@ -20,8 +21,8 @@ import { computed } from 'vue'
 
 const props = defineProps<{ rate: LoadRate, title: string }>()
 
-function percentage(value: number, digits = 3) {
-  return (value * 100).toFixed(digits) + '%'
+function percentage(value: number, digits = 1) {
+  return +(value * 100).toFixed(digits) + '%'
 }
 
 const types = ['used', 'app', 'free'] as const
@@ -33,7 +34,7 @@ const distribution = computed(() => [
 ])
 
 const maxIndex = computed(() => {
-  return distribution.value.indexOf(Math.max(...distribution.value))
+  return distribution.value.findIndex(value => value >= 0.5)
 })
 
 const caption = computed(() => {
@@ -58,7 +59,7 @@ const caption = computed(() => {
   .body {
     width: 10rem;
     height: 0.8rem;
-    font-size: 0.8em;
+    font-size: 10px;
     position: relative;
     display: inline;
     background-color: var(--k-c-divisor);
@@ -75,22 +76,23 @@ const caption = computed(() => {
     display: flex;
     align-items: center;
     justify-content: center;
+    white-space: pre;
   }
 
   .used {
     background-color: var(--primary);
     color: white;
     transition: color 0.3s ease, background-color 0.3s ease;
     &:hover {
-      background-color: var(--primary-tint);
+      background-color: var(--primary-tint, var(--primary));
     }
   }
 
   .app {
     background-color: var(--k-color-warning);
     transition: color 0.3s ease, background-color 0.3s ease;
     &:hover {
-      background-color: var(--k-color-warning-tint);
+      background-color: var(--k-color-warning-tint, var(--k-color-warning));
     }
   }
 }

diff --git a/plugins/status/package.json b/plugins/status/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@koishijs/plugin-status",
   "description": "Status view for Koishi",
-  "version": "7.4.8",
+  "version": "7.4.10",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [