style: Update StorageCard component to display storage icons based on storage type

src/components/cards/StorageCard.vue

@@ -2,9 +2,11 @@
 import { StorageConf } from '@/api/types'
 import { formatBytes } from '@core/utils/formatters'
 import storage_png from '@images/misc/storage.png'
+import alipan_png from '@images/misc/alipan.webp'
+import u115_png from '@images/misc/u115.png'
 
 // 定义输入
-defineProps({
+const props = defineProps({
   storage: {
     type: Object as PropType<StorageConf>,
     required: true,
@@ -17,30 +19,36 @@ const total = ref(0)
 // 存储可用空间
 const available = ref(0)
 
+// 根据存储类型选择图标
+const getIcon = computed(() => {
+  switch (props.storage.type) {
+    case 'local':
+      return storage_png
+    case 'alipan':
+      return alipan_png
+    case 'u115':
+      return u115_png
+    default:
+      return storage_png
+  }
+})
+
 // 计算存储使用率
 const usage = computed(() => {
   return Math.round((available.value / (total.value || 1)) * 1000) / 10
 })
 </script>
 <template>
-  <VCard>
+  <VCard variant="tonal">
     <VCardText class="flex justify-space-between align-center gap-3">
-      <div>
+      <div class="align-self-start">
         <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">
+        <div v-if="available" 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>
+      <VImg :src="getIcon" cover class="m-3" />
     </VCardText>
   </VCard>
 </template>

src/views/setting/AccountSettingDirectory.vue

@@ -6,6 +6,7 @@ import { VRow } from 'vuetify/lib/components/index.mjs'
 import api from '@/api'
 import { TransferDirectoryConf, StorageConf } from '@/api/types'
 import DirectoryCard from '@/components/cards/DirectoryCard.vue'
+import StorageCard from '@/components/cards/StorageCard.vue'
 
 // 所有下载目录
 const directories = ref<TransferDirectoryConf[]>([])
@@ -28,12 +29,26 @@ function orderDirectoryCards() {
 }
 
 // 查询存储
-async function loadStorages() {}
+async function loadStorages() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Storages')
+
+    storages.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 保存存储
-async function saveStorages() {}
-// 添加存储
-function addStorage() {}
+async function saveStorages() {
+  try {
+    const result: { [key: string]: any } = await api.post('system/setting/Storages', storages.value)
+    if (result.success) $toast.success('存储设置保存成功')
+    else $toast.error('存储设置保存失败！')
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 查询目录
 async function loadDirectories() {}
@@ -69,7 +84,7 @@ onMounted(() => {
       <VCard>
         <VCardItem>
           <VCardTitle>存储</VCardTitle>
-          <VCardSubtitle>设置本地或网盘存储参数。</VCardSubtitle>
+          <VCardSubtitle>设置本地或网盘存储。</VCardSubtitle>
         </VCardItem>
         <VCardText>
           <draggable
@@ -80,15 +95,12 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <StorageCard type="download" :storage="element" />
+              <StorageCard :storage="element" />
             </template>
           </draggable>
         </VCardText>
         <VCardText>
           <VBtn type="submit" class="me-2" @click="saveStorages"> 保存 </VBtn>
-          <VBtn color="success" variant="tonal" @click="addStorage">
-            <VIcon icon="mdi-plus" />
-          </VBtn>
         </VCardText>
       </VCard>
     </VCol>