From bc084922f7b990f2968e7433bf11457a3b0391e3 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sat, 20 Jul 2024 09:36:46 +0800
Subject: [PATCH] style: add name field to StorageConf interface and update
 StorageCard component to display storage name

---
 src/api/types.ts                     |  2 ++
 src/components/cards/StorageCard.vue | 48 ++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index a25fdb57..bd5e7415 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -885,6 +885,8 @@ export interface NotificationSwitchConf {
 
 // 存储配置
 export interface StorageConf {
+  // 名称
+  name: string
   // 类型 local/alipan/u115/rclone
   type: string
   // 配置
diff --git a/src/components/cards/StorageCard.vue b/src/components/cards/StorageCard.vue
index 11645e02..f58e603e 100644
--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -1,2 +1,46 @@
-<script setup lang="ts"></script>
-<template></template>
+<script setup lang="ts">
+import { StorageConf } from '@/api/types'
+import { formatBytes } from '@core/utils/formatters'
+import storage_png from '@images/misc/storage.png'
+
+// 定义输入
+defineProps({
+  storage: {
+    type: Object as PropType<StorageConf>,
+    required: true,
+  },
+})
+
+// 存储总空间
+const total = ref(0)
+
+// 存储可用空间
+const available = ref(0)
+
+// 计算存储使用率
+const usage = computed(() => {
+  return Math.round((available.value / (total.value || 1)) * 1000) / 10
+})
+</script>
+<template>
+  <VCard>
+    <VCardText class="flex justify-space-between align-center gap-3">
+      <div>
+        <h5 class="text-h5 mb-1">{{ storage.name }}</h5>
+        <div class="text-body-1 mb-3">空间使用率 {{ usage }}%</div>
+        <div class="d-flex align-center flex-wrap">
+          <h4 class="text-h4">{{ formatBytes(available) }}</h4>
+          <div class="d-flex align-center">
+            /
+            <span class="text-body-1 text-success">
+              {{ formatBytes(total) }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <div style="min-block-size: 6rem">
+        <VImg :src="storage_png" cover />
+      </div>
+    </VCardText>
+  </VCard>
+</template>