更新存储卡组件，添加自定义存储配置对话框，优化存储名称显示，并完善国际化文本

src/components/cards/DownloaderCard.vue

@@ -187,8 +187,8 @@ onUnmounted(() => {
         </VCardText>
       </VCard>
     </VHover>
-    <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem" persistent>
+    <VDialog v-if="downloaderInfoDialog" v-model="downloaderInfoDialog" scrollable max-width="40rem">
-      <VCard :title="`${props.downloader.name} - ${t('downloader.title')}`" class="rounded-t">
+      <VCard :title="`${props.downloader.name} - ${t('downloader.title')}`">
         <VDialogCloseBtn v-model="downloaderInfoDialog" />
         <VDivider />
         <VCardText>
@@ -329,7 +329,6 @@ onUnmounted(() => {
                   v-model="downloaderInfo.name"
                   :label="t('downloader.name')"
                   :placeholder="t('downloader.nameRequired')"
-                  :hint="t('downloader.name')"
                   persistent-hint
                   active
                 />

src/components/cards/StorageCard.vue

@@ -6,6 +6,7 @@ import alipan_png from '@images/misc/alipan.webp'
 import u115_png from '@images/misc/u115.png'
 import rclone_png from '@images/misc/rclone.png'
 import alist_png from '@images/misc/alist.svg'
+import custom_png from '@images/misc/database.png'
 import api from '@/api'
 import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
 import U115AuthDialog from '../dialog/U115AuthDialog.vue'
@@ -14,7 +15,6 @@ import AlistConfigDialog from '../dialog/AlistConfigDialog.vue'
 import { useToast } from 'vue-toast-notification'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { useI18n } from 'vue-i18n'
-import { storageOptions } from '@/api/constants'
 
 // 国际化
 const { t } = useI18n()
@@ -44,6 +44,12 @@ const used = computed(() => {
   return total.value - available.value
 })
 
+// 存储
+const storage_ref = ref(props.storage)
+
+// 自定义存储名称
+const customName = ref(props.storage.name)
+
 // 阿里云盘认证对话框
 const aliyunAuthDialog = ref(false)
 // 115网盘认证对话框
@@ -52,6 +58,8 @@ const u115AuthDialog = ref(false)
 const rcloneConfigDialog = ref(false)
 // AList配置对话框
 const aListConfigDialog = ref(false)
+// 自定义存储配置对话框
+const customConfigDialog = ref(false)
 
 // 打开存储对话框
 function openStorageDialog() {
@@ -68,6 +76,9 @@ function openStorageDialog() {
     case 'alist':
       aListConfigDialog.value = true
       break
+    case 'custom':
+      customConfigDialog.value = true
+      break
     default:
       $toast.info(t('storage.noConfigNeeded'))
       break
@@ -87,6 +98,8 @@ const getIcon = computed(() => {
       return rclone_png
     case 'alist':
       return alist_png
+    case 'custom':
+      return custom_png
     default:
       return storage_png
   }
@@ -125,12 +138,9 @@ function handleDone() {
   u115AuthDialog.value = false
   rcloneConfigDialog.value = false
   aListConfigDialog.value = false
-  emit('done')
+  customConfigDialog.value = false
-}
+  storage_ref.value.name = customName.value
-
+  emit('done', storage_ref.value)
-// 根据存储类型获取文本
-function getStorageTypeText(type: string) {
-  return storageOptions.find(option => option.value === type)?.title
 }
 
 onMounted(() => {
@@ -148,7 +158,7 @@ function onClose() {
       <VDialogCloseBtn v-if="storage.type == 'custom'" @click="onClose" />
       <VCardText class="flex justify-space-between align-center gap-3">
         <div class="align-self-start flex-1">
-          <h5 class="text-h6 mb-1">{{ getStorageTypeText(storage.type) }}</h5>
+          <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
           <template v-if="storage.type != 'custom'">
             <div class="mb-3 text-sm" v-if="total">{{ formatBytes(used, 1) }} / {{ formatBytes(total, 1) }}</div>
             <div v-else-if="isNullOrEmptyObject(storage.config)">{{ t('storage.notConfigured') }}</div>
@@ -157,7 +167,7 @@ function onClose() {
             <div class="mb-3 text-sm">{{ t('storage.custom') }}</div>
           </template>
         </div>
-        <VImg :src="getIcon" cover class="mt-5" max-width="3rem" min-width="3rem" />
+        <VImg :src="getIcon" cover class="mt-7" max-width="3rem" min-width="3rem" />
       </VCardText>
       <div class="w-full absolute bottom-0">
         <VProgressLinear v-if="usage > 0" :model-value="usage" :bg-color="progressColor" :color="progressColor" />
@@ -191,5 +201,26 @@ function onClose() {
       @close="aListConfigDialog = false"
       @done="handleDone"
     />
+    <VDialog v-if="customConfigDialog" v-model="customConfigDialog" scrollable max-width="30rem">
+      <VCard>
+        <VCardItem>
+          <VCardTitle>{{ t('storage.custom') }}</VCardTitle>
+          <VDialogCloseBtn v-model="customConfigDialog" />
+        </VCardItem>
+        <VDivider />
+        <VCardText>
+          <VRow>
+            <VCol cols="12" md="6">
+              <VTextField v-model="customName" :label="t('storage.name')" persistent-hint active />
+            </VCol>
+          </VRow>
+        </VCardText>
+        <VCardActions class="pt-3">
+          <VBtn @click="handleDone" variant="elevated" prepend-icon="mdi-content-save" class="px-5">
+            {{ t('common.save') }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
   </div>
 </template>

src/locales/en-US.ts

@@ -727,6 +727,7 @@ export default {
     episode: 'Episode {number}',
   },
   storage: {
+    name: 'Name',
     usedPercent: '{percent}% Used',
     noConfigNeeded: 'This storage type does not require configuration, please configure the directory directly!',
     notConfigured: 'Not Configured',

src/locales/zh-CN.ts

@@ -724,6 +724,7 @@ export default {
     episode: '第{number}集',
   },
   storage: {
+    name: '名称',
     usedPercent: '已使用 {percent}%',
     noConfigNeeded: '此存储类型无需配置参数，请直接配置目录！',
     notConfigured: '未配置',

src/locales/zh-TW.ts

@@ -725,6 +725,7 @@ export default {
     episode: '第{number}集',
   },
   storage: {
+    name: '名稱',
     usedPercent: '已使用 {percent}%',
     noConfigNeeded: '此存儲類型無需配置參數，請直接配置目錄！',
     notConfigured: '未配置',

src/views/setting/AccountSettingDirectory.vue

@@ -102,11 +102,6 @@ async function saveStorages() {
   }
 }
 
-// 修改后生效
-async function updatedStorage() {
-  await loadStorages()
-}
-
 // 查询目录
 async function loadDirectories() {
   try {
@@ -177,7 +172,7 @@ async function loadMediaCategories() {
 // 添加存储
 function addStorage() {
   storages.value.push({
-    name: '自定义存储',
+    name: `${t('storage.custom')} ${storages.value.length + 1}`,
     type: 'custom',
     config: {},
   })
@@ -191,6 +186,14 @@ function removeStorage(storage: StorageConf) {
   }
 }
 
+// 更新存储
+async function updatedStorage(storage: StorageConf) {
+  const index = storages.value.indexOf(storage)
+  if (index > -1) {
+    storages.value[index] = storage
+  }
+}
+
 // 保存设置
 async function saveSystemSettings(value: any) {
   try {
@@ -229,7 +232,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <StorageCard :storage="element" @done="updatedStorage" @close="removeStorage(element)" />
+              <StorageCard :storage="element" @close="removeStorage(element)" @done="updatedStorage" />
             </template>
           </draggable>
         </VCardText>