From dbe23eaac7e2b98c1bf09a719126ba953897f385 Mon Sep 17 00:00:00 2001
From: Aqr-K <95741669+Aqr-K@users.noreply.github.com>
Date: Sat, 14 Sep 2024 01:25:55 +0800
Subject: [PATCH] style: Optimize the progress bar and the display of remaining
 storage space.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化进度条和剩余存储空间的显示。
---
 src/components/cards/StorageCard.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/cards/StorageCard.vue b/src/components/cards/StorageCard.vue
index da06916c..dae73446 100644
--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -31,6 +31,11 @@ const total = ref(0)
 // 存储可用空间
 const available = ref(0)
 
+// 储存已用空间
+const used = computed(() => {
+  return total.value - available.value
+})
+
 // 阿里云盘认证对话框
 const aliyunAuthDialog = ref(false)
 // 115网盘认证对话框
@@ -85,7 +90,7 @@ const progressColor = computed(() => {
 
 // 计算存储使用率
 const usage = computed(() => {
-  return Math.round((available.value / (total.value || 1)) * 1000) / 10
+  return Math.round(((used.value) / (total.value || 1)) * 1000) / 10
 })
 
 // 查询存储信息
@@ -116,7 +121,7 @@ onMounted(() => {
     <VCardText class="flex justify-space-between align-center gap-3">
       <div class="align-self-start flex-1">
         <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
-        <div class="mb-3 text-sm" v-if="total">{{ formatBytes(available, 1) }} / {{ formatBytes(total, 1) }}</div>
+        <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
         <div v-else>未配置</div>
       </div>
       <VImg :src="getIcon" cover class="mt-5" max-width="3rem" min-width="3rem" />