From 3bff292a6d309a5842e95423a792136f2956321e Mon Sep 17 00:00:00 2001
From: snowykami <snowykami@outlook.com>
Date: Sat, 5 Oct 2024 05:56:10 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=BF=AE=E5=A4=8D=E5=9C=86?=
 =?UTF-8?q?=E8=A7=92=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Disk.vue      | 32 +++++++++++++++-----------------
 src/components/HostDisks.vue | 11 -----------
 2 files changed, 15 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/HostDisks.vue

diff --git a/src/components/Disk.vue b/src/components/Disk.vue
index caed723..9545cd9 100644
--- a/src/components/Disk.vue
+++ b/src/components/Disk.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
-
-import {format2Size, getBaseColor, getBlankColor} from "../api/utils.ts";
+import { format2Size, getBaseColor, getBlankColor } from '../api/utils.ts';
 
 const props = defineProps<{
-  mountpoint: string
-  device: string
-  used: number
-  total: number
-  fstype: string
-}>()
-
-const colorUsed = getBaseColor(props.used / props.total * 100)
-const colorBlank = getBlankColor(props.used / props.total * 100)
+  mountpoint: string;
+  device: string;
+  used: number;
+  total: number;
+  fstype: string;
+}>();
 
+const colorUsed = getBaseColor(props.used / props.total * 100);
+const colorBlank = getBlankColor(props.used / props.total * 100);
 </script>
 
 <template>
-  <div class="disk" :style="{backgroundColor: colorBlank}">
-    <div class="disk-used" :style="{width: props.used / props.total * 100 + '%', backgroundColor: colorUsed}"></div>
+  <div class="disk" :style="{ backgroundColor: colorBlank }">
+    <div class="disk-used" :style="{ width: props.used / props.total * 100 + '%', backgroundColor: colorUsed }"></div>
     <div class="hover-text">
       <div class="left-text">
-        <span class="disk-text">{{props.mountpoint}}</span>
+        <span class="disk-text">{{ props.mountpoint }}</span>
       </div>
       <div class="right-text">
         <span class="disk-text">{{ format2Size(props.used, props.total) }} [{{ props.fstype }}]</span>
@@ -30,7 +28,6 @@ const colorBlank = getBlankColor(props.used / props.total * 100)
 </template>
 
 <style scoped>
-
 :host {
   --text-size: 2px;
 }
@@ -39,11 +36,12 @@ const colorBlank = getBlankColor(props.used / props.total * 100)
   margin-top: 0.5rem;
   height: 2rem;
   width: 100%;
-  border-radius: 100px;
+  border-radius: 1rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden; /* Ensure the used part doesn't overflow */
 }
 
 .disk-used {
@@ -51,7 +49,7 @@ const colorBlank = getBlankColor(props.used / props.total * 100)
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: 100px 0 0 100px;
+  clip-path: inset(0 0 0 0 round var(--border-radius)); /* Apply border-radius using clip-path */
 }
 
 .hover-text {
diff --git a/src/components/HostDisks.vue b/src/components/HostDisks.vue
deleted file mode 100644
index 96c0baf..0000000
--- a/src/components/HostDisks.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file