style: Update storage card to include Rclone configuration dialog and improve UI consistency

src/components/cards/StorageCard.vue

@@ -8,6 +8,8 @@ import rclone_png from '@images/misc/rclone.png'
 import api from '@/api'
 import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
 import U115AuthDialog from '../dialog/U115AuthDialog.vue'
+import RcloneConfigDialog from '../dialog/RcloneConfigDialog.vue'
+import { useToast } from 'vue-toast-notification'
 
 // 定义输入
 const props = defineProps({
@@ -17,6 +19,12 @@ const props = defineProps({
   },
 })
 
+// 定义事件
+const emit = defineEmits(['done'])
+
+// 提示信息
+const $toast = useToast()
+
 // 存储总空间
 const total = ref(0)
 
@@ -27,6 +35,8 @@ const available = ref(0)
 const aliyunAuthDialog = ref(false)
 // 115网盘认证对话框
 const u115AuthDialog = ref(false)
+// Rclone配置对话框
+const rcloneConfigDialog = ref(false)
 
 // 打开存储对话框
 function openStorageDialog() {
@@ -37,6 +47,12 @@ function openStorageDialog() {
     case 'u115':
       u115AuthDialog.value = true
       break
+    case 'rclone':
+      rcloneConfigDialog.value = true
+      break
+    default:
+      $toast.info('此存储类型无需配置参数')
+      break
   }
 }
 
@@ -72,6 +88,14 @@ async function queryStorage() {
   }
 }
 
+// 完成配置后的处理
+function handleDone() {
+  aliyunAuthDialog.value = false
+  u115AuthDialog.value = false
+  rcloneConfigDialog.value = false
+  emit('done')
+}
+
 onMounted(() => {
   queryStorage()
 })
@@ -94,12 +118,14 @@ onMounted(() => {
     v-if="aliyunAuthDialog"
     v-model="aliyunAuthDialog"
     @close="aliyunAuthDialog = false"
-    @done="aliyunAuthDialog = false"
+    @done="handleDone"
   />
-  <U115AuthDialog
+  <U115AuthDialog v-if="u115AuthDialog" v-model="u115AuthDialog" @close="u115AuthDialog = false" @done="handleDone" />
-    v-if="u115AuthDialog"
+  <RcloneConfigDialog
-    v-model="u115AuthDialog"
+    v-if="rcloneConfigDialog"
-    @close="u115AuthDialog = false"
+    v-model="rcloneConfigDialog"
-    @done="u115AuthDialog = false"
+    :conf="props.storage.config || {}"
+    @close="rcloneConfigDialog = false"
+    @done="handleDone"
   />
 </template>

src/components/dialog/RcloneConfigDialog.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import api from '@/api'
+
+// 定义输入
+const props = defineProps({
+  conf: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+})
+
+if (!props.conf.filepath) {
+  props.conf.filepath = '/moviepilot/.config/rclone/rclone.conf'
+}
+
+if (!props.conf.content) {
+  props.conf.content = '# 请在此处填写rclone配置文件内容 \n# 请参考 https://rclone.org/docs/ \n# 存储节点名必须为：MP'
+}
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 完成
+async function handleDone() {
+  await savaRcloneConfig()
+  emit('done')
+}
+
+// 保存rclone设置
+async function savaRcloneConfig() {
+  try {
+    await api.post(`storage/save/rclone`, props.conf)
+  } catch (e) {
+    console.error(e)
+  }
+}
+</script>
+
+<template>
+  <VDialog width="50rem" scrollable max-height="85vh">
+    <VCard title="Rclone网盘配置" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="props.conf.filepath" label="rclone配置文件路径" />
+          </VCol>
+          <VCol cols="12">
+            <VAceEditor v-model:value="props.conf.content" lang="ini" theme="monokai" style="block-size: 30rem">
+            </VAceEditor>
+          </VCol>
+        </VRow>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3"> 完成 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/views/dashboard/AnalyticsStorage.vue

@@ -59,7 +59,6 @@ onMounted(() => {
             <VProgressLinear :model-value="usedPercent" color="primary" />
           </p>
         </VCardText>
-
         <!-- Trophy -->
         <VImg :src="trophy" class="trophy" />
       </VCard>

src/views/setting/AccountSettingDirectory.vue

@@ -128,7 +128,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
           >
             <template #item="{ element }">
-              <StorageCard :storage="element" />
+              <StorageCard :storage="element" @done="loadStorages" />
             </template>
           </draggable>
         </VCardText>