From f29f408b676d5dff3bef0d16d0eec8da8a6f2d3c Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 31 May 2024 20:35:57 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=9B=AE=E5=BD=95=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...diaDirectoryCard.vue => DirectoryCard.vue} | 17 ++++++++++--
 .../{DirctoryTreeInput.vue => PathField.vue}  | 27 ++++++++++---------
 src/main.ts                                   |  2 ++
 src/views/setting/AccountSettingDirectory.vue |  7 ++---
 4 files changed, 35 insertions(+), 18 deletions(-)
 rename src/components/cards/{MediaDirectoryCard.vue => DirectoryCard.vue} (83%)
 rename src/components/input/{DirctoryTreeInput.vue => PathField.vue} (78%)

diff --git a/src/components/cards/MediaDirectoryCard.vue b/src/components/cards/DirectoryCard.vue
similarity index 83%
rename from src/components/cards/MediaDirectoryCard.vue
rename to src/components/cards/DirectoryCard.vue
index 4d022b4a..943c7af2 100644
--- a/src/components/cards/MediaDirectoryCard.vue
+++ b/src/components/cards/DirectoryCard.vue
@@ -17,6 +17,9 @@ const props = defineProps({
   height: String,
 })
 
+// 路径
+const path = ref<string>('')
+
 // 类型下拉字典
 const typeItems = [
   { title: '全部', value: '' },
@@ -25,13 +28,19 @@ const typeItems = [
 ]
 
 // 定义触发的自定义事件
-const emit = defineEmits(['close', 'changed'])
+const emit = defineEmits(['close', 'changed', 'update:modelValue'])
 
 // 按钮点击
 function onClose() {
   emit('close')
 }
 
+// 路径更新
+function updatePath(value: string) {
+  path.value = value
+  emit('update:modelValue', value)
+}
+
 // 根据选中的媒体类型，获取对应的媒体类别
 const getCategories = computed(() => {
   const default_value = [{ title: '全部', value: '' }]
@@ -60,7 +69,11 @@ const getCategories = computed(() => {
       <VForm>
         <VRow>
           <VCol>
-            <VTextField v-model="props.directory.path" variant="underlined" label="路径" />
+            <VPathField @update:modelValue="updatePath">
+              <template #activator="{ menuprops }">
+                <VTextField v-model="props.directory.path" v-bind="menuprops" variant="underlined" label="路径" />
+              </template>
+            </VPathField>
           </VCol>
         </VRow>
         <VRow>
diff --git a/src/components/input/DirctoryTreeInput.vue b/src/components/input/PathField.vue
similarity index 78%
rename from src/components/input/DirctoryTreeInput.vue
rename to src/components/input/PathField.vue
index 11b01a72..a48c826e 100644
--- a/src/components/input/DirctoryTreeInput.vue
+++ b/src/components/input/PathField.vue
@@ -21,13 +21,10 @@ const activedDirs = ref<string[]>([])
 // 打开的目录
 const openedDirs = ref<string[]>([])
 
-// 当前选中的目录
-const selectedDir = ref<string>('')
-
 // 目录列表
 const treeItems = ref<FileItem[]>([
   {
-    name: props.root,
+    name: '/',
     path: props.root,
     children: [],
     type: '',
@@ -48,11 +45,18 @@ async function fetchDirs(item: any) {
     .catch(err => console.warn(err))
 }
 
+// 获取选择的目录路径
+const selectedPath = computed(() => {
+  if (activedDirs.value.length > 0) {
+    return activedDirs.value[0]
+  }
+  return ''
+})
+
 // 监听目录变化
 watch(activedDirs, newVal => {
   if (!newVal.length) return
-  selectedDir.value = newVal[0]
-  emit('update:modelValue', newVal[0])
+  emit('update:modelValue', selectedPath)
 })
 
 onMounted(() => {
@@ -61,27 +65,24 @@ onMounted(() => {
 </script>
 
 <template>
-  <VMenu>
+  <VMenu :close-on-content-click="false" content-class="cursor-default">
     <template v-slot:activator="{ props }">
-      <VTextField v-model="selectedDir" label="路径" variant="underlined" v-bind="props"></VTextField>
+      <slot name="activator" :menuprops="props" />
     </template>
     <VTreeview
       v-model:activated="activedDirs"
       v-model:opened="openedDirs"
       :items="treeItems"
       :load-children="fetchDirs"
-      density="compact"
       item-key="path"
       item-title="name"
       item-value="path"
       item-type="unknown"
       activatable
-      open-on-click
-      transition
       return-object
       max-height="20rem"
-      selectable
-      class="cursor-pointer"
+      expand-icon="mdi-folder"
+      collapse-icon="mdi-folder-open"
     >
     </VTreeview>
   </VMenu>
diff --git a/src/main.ts b/src/main.ts
index 5c5c12c1..98f711d9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -26,6 +26,7 @@ import PersonCard from './components/cards/PersonCard.vue'
 import MediaInfoCard from './components/cards/MediaInfoCard.vue'
 import TorrentCard from './components/cards/TorrentCard.vue'
 import MediaIdSelector from './components/misc/MediaIdSelector.vue'
+import PathField from './components/input/PathField.vue'
 import { fixArrayAt } from '@/@core/utils/compatibility'
 
 // 修复低版本Safari等浏览器数组不支持at函数的问题
@@ -50,6 +51,7 @@ app
   .component('VTorrentCard', TorrentCard)
   .component('VMediaIdSelector', MediaIdSelector)
   .component('VTreeview', VTreeview)
+  .component('VPathField', PathField)
 
 // 注册插件
 app
diff --git a/src/views/setting/AccountSettingDirectory.vue b/src/views/setting/AccountSettingDirectory.vue
index 3ede81f7..9dce98db 100644
--- a/src/views/setting/AccountSettingDirectory.vue
+++ b/src/views/setting/AccountSettingDirectory.vue
@@ -5,7 +5,7 @@ import draggable from 'vuedraggable'
 import { VRow } from 'vuetify/lib/components/index.mjs'
 import api from '@/api'
 import { MediaDirectory } from '@/api/types'
-import MediaDirectoryCard from '@/components/cards/MediaDirectoryCard.vue'
+import DirectoryCard from '@/components/cards/DirectoryCard.vue'
 
 // 媒体库设置项
 const transferSettings = ref({
@@ -223,10 +223,11 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-directory-card' }"
           >
             <template #item="{ element }">
-              <MediaDirectoryCard
+              <DirectoryCard
                 type="download"
                 :directory="element"
                 :categories="mediaCategories"
+                @update:modelValue="(value: string) => (element.path = value)"
                 @close="downloadCardClose(element.name)"
               />
             </template>
@@ -256,7 +257,7 @@ onMounted(() => {
             :component-data="{ 'class': 'grid gap-3 grid-directory-card' }"
           >
             <template #item="{ element }">
-              <MediaDirectoryCard
+              <DirectoryCard
                 type="library"
                 :directory="element"
                 :categories="mediaCategories"