style: Update grid-template-columns in grid-directory-card to use a minimum width of 24rem

src/components/cards/DirectoryCard.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { MediaDirectory } from '@/api/types'
+import type { TransferDirectoryConf } from '@/api/types'
 import { VTextField } from 'vuetify/lib/components/index.mjs'
 
 // 输入参数
 const props = defineProps({
   type: String, // download/library
   directory: {
-    type: Object as PropType<MediaDirectory>,
+    type: Object as PropType<TransferDirectoryConf>,
     required: true, // 必填参数
   },
   categories: {
@@ -17,8 +17,11 @@ const props = defineProps({
   height: String,
 })
 
-// 路径
-const path = ref<string>('')
+// 下载路径
+const downloadPath = ref<string>('')
+
+// 媒体库路径
+const libraryPath = ref<string>('')
 
 // 类型下拉字典
 const typeItems = [
@@ -27,6 +30,37 @@ const typeItems = [
   { title: '电视剧', value: '电视剧' },
 ]
 
+// 存储下拉字典
+const storageItems = [
+  { title: '本地', value: 'local' },
+  { title: '阿里云盘', value: 'alipan' },
+  { title: '115网盘', value: 'u115' },
+  { title: 'Rclone网盘', value: 'rclone' },
+]
+
+// 自动整理方式下拉字典
+const transferSourceItems = [
+  { title: '不自动整理', value: '' },
+  { title: '下载器监控', value: 'downloader' },
+  { title: '目录监控', value: 'monitor' },
+]
+
+// 整理方式下拉字典
+const transferTypeItems = [
+  { title: '复制', value: 'copy' },
+  { title: '移动', value: 'move' },
+  { title: '硬链接', value: 'link' },
+  { title: '软链接', value: 'softlink' },
+]
+
+// 覆盖模式下拉字典
+const overwriteModeItems = [
+  { title: '从不', value: 'never' },
+  { title: '总是', value: 'always' },
+  { title: '按文件大小', value: 'size' },
+  { title: '仅保留最新版本', value: 'latest' },
+]
+
 // 定义触发的自定义事件
 const emit = defineEmits(['close', 'changed', 'update:modelValue'])
 
@@ -35,10 +69,22 @@ function onClose() {
   emit('close')
 }
 
-// 路径更新
-function updatePath(value: string) {
-  path.value = value
-  emit('update:modelValue', value)
+// 下载路径更新
+function updateDownloadPath(value: string) {
+  downloadPath.value = value
+  emit('update:modelValue', {
+    download: downloadPath.value,
+    library: libraryPath.value,
+  })
+}
+
+// 媒体库路径更新
+function updateLibraryPath(value: string) {
+  libraryPath.value = value
+  emit('update:modelValue', {
+    download: downloadPath.value,
+    library: libraryPath.value,
+  })
 }
 
 // 根据选中的媒体类型，获取对应的媒体类别
@@ -68,34 +114,99 @@ const getCategories = computed(() => {
     <VCardText>
       <VForm>
         <VRow>
-          <VCol>
-            <VPathField @update:modelValue="updatePath">
-              <template #activator="{ menuprops }">
-                <VTextField v-model="props.directory.path" v-bind="menuprops" variant="underlined" label="路径" />
-              </template>
-            </VPathField>
-          </VCol>
-        </VRow>
-        <VRow>
-          <VCol cols="4">
+          <VCol cols="6">
             <VSelect
               v-model="props.directory.media_type"
               variant="underlined"
               :items="typeItems"
               label="媒体类型"
-              @update:modelValue="props.directory.category = ''"
+              @update:modelValue="props.directory.media_category = ''"
             />
           </VCol>
-          <VCol>
-            <VSelect v-model="props.directory.category" variant="underlined" :items="getCategories" label="媒体类别" />
+          <VCol cols="6">
+            <VSelect
+              v-model="props.directory.media_category"
+              variant="underlined"
+              :items="getCategories"
+              label="媒体类别"
+            />
+          </VCol>
+          <VCol cols="4">
+            <VSelect v-model="props.directory.storage" variant="underlined" :items="storageItems" label="下载存储" />
+          </VCol>
+          <VCol cols="8">
+            <VPathField @update:modelValue="updateDownloadPath">
+              <template #activator="{ menuprops }">
+                <VTextField
+                  v-model="props.directory.download_path"
+                  v-bind="menuprops"
+                  variant="underlined"
+                  label="下载目录"
+                />
+              </template>
+            </VPathField>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
+            <VSwitch v-model="props.directory.download_type_folder" label="按类型分类"></VSwitch>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_category || props.directory.media_category === ''">
+            <VSwitch v-model="props.directory.download_category_folder" label="按类别分类"></VSwitch>
           </VCol>
         </VRow>
         <VRow>
-          <VCol v-if="!props.directory.category || props.directory.category === ''">
-            <VSwitch v-model="props.directory.auto_category" label="自动分类"></VSwitch>
+          <VCol>
+            <VSelect
+              v-model="props.directory.monitor_type"
+              variant="underlined"
+              :items="transferSourceItems"
+              label="自动整理"
+            />
           </VCol>
-          <VCol v-if="type === 'library'">
-            <VSwitch v-model="props.directory.scrape" label="刮削元数据"></VSwitch>
+        </VRow>
+        <VDivider v-if="$props.directory.monitor_type" class="my-3 bg-primary" />
+        <VRow v-if="$props.directory.monitor_type">
+          <VCol cols="4">
+            <VSelect
+              v-model="props.directory.transfer_type"
+              variant="underlined"
+              :items="transferTypeItems"
+              label="整理方式"
+            />
+          </VCol>
+          <VCol cols="8">
+            <VSelect
+              v-model="props.directory.overwrite_mode"
+              variant="underlined"
+              :items="overwriteModeItems"
+              label="覆盖模式"
+            />
+          </VCol>
+          <VCol cols="4">
+            <VSelect v-model="props.directory.storage" variant="underlined" :items="storageItems" label="媒体库存储" />
+          </VCol>
+          <VCol cols="8">
+            <VPathField @update:modelValue="updateLibraryPath">
+              <template #activator="{ menuprops }">
+                <VTextField
+                  v-model="props.directory.library_path"
+                  v-bind="menuprops"
+                  variant="underlined"
+                  label="媒体库目录"
+                />
+              </template>
+            </VPathField>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_type || props.directory.media_type === ''">
+            <VSwitch v-model="props.directory.library_type_folder" label="按类型分类"></VSwitch>
+          </VCol>
+          <VCol cols="6" v-if="!props.directory.media_category || props.directory.media_category === ''">
+            <VSwitch v-model="props.directory.library_category_folder" label="按类别分类"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.renaming" label="智能重命名"></VSwitch>
+          </VCol>
+          <VCol cols="6">
+            <VSwitch v-model="props.directory.scraping" label="刮削元数据"></VSwitch>
           </VCol>
         </VRow>
       </VForm>

src/components/cards/StorageCard.vue

@@ -4,6 +4,7 @@ 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'
+import rclone_png from '@images/misc/rclone.png'
 
 // 定义输入
 const props = defineProps({
@@ -28,6 +29,8 @@ const getIcon = computed(() => {
       return alipan_png
     case 'u115':
       return u115_png
+    case 'rclone':
+      return rclone_png
     default:
       return storage_png
   }
@@ -48,7 +51,7 @@ const usage = computed(() => {
           <h4 class="text-h4">{{ formatBytes(available) }}</h4>
         </div>
       </div>
-      <VImg :src="getIcon" cover class="m-3" />
+      <VImg :src="getIcon" cover class="m-3" max-width="6rem" />
     </VCardText>
   </VCard>
 </template>

src/styles/styles.scss

@@ -166,7 +166,7 @@
 }
 
 .grid-directory-card {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
   padding-block-end: 1rem;
 }
 

src/views/setting/AccountSettingDirectory.vue

@@ -51,7 +51,14 @@ async function saveStorages() {
 }
 
 // 查询目录
-async function loadDirectories() {}
+async function loadDirectories() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/Directories')
+    directories.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 保存目录
 async function saveDirectories() {
@@ -59,7 +66,15 @@ async function saveDirectories() {
 }
 
 // 添加媒体库目录
-function addDirectory() {}
+function addDirectory() {
+  directories.value.push({
+    name: '新目录',
+    storage: 'local',
+    download_path: '',
+    priority: -1,
+    monitor_type: '',
+  })
+}
 
 // 调用API查询自动分类配置
 async function loadMediaCategories() {
@@ -117,11 +132,10 @@ onMounted(() => {
             item-key="pri"
             tag="div"
             @end="orderDirectoryCards"
-            :component-data="{ 'class': 'grid gap-3 grid-app-card' }"
+            :component-data="{ 'class': 'grid gap-3 grid-directory-card items-start' }"
           >
             <template #item="{ element }">
               <DirectoryCard
-                type="library"
                 :directory="element"
                 :categories="mediaCategories"
                 @update:modelValue="(value: string) => (element.path = value)"