From c956e271a29eae0fae29e642e031784714b93756 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 20 Nov 2024 19:24:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ReorganizeDialog):=20=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E7=9B=AE=E6=A0=87=E8=B7=AF=E5=BE=84=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85?=
 =?UTF-8?q?=E8=A6=81=E7=9A=84=E7=9B=AE=E5=BD=95=E5=8A=A0=E8=BD=BD=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialog/ReorganizeDialog.vue | 63 +++++++---------------
 src/components/input/PathField.vue         | 25 ++++-----
 2 files changed, 29 insertions(+), 59 deletions(-)

diff --git a/src/components/dialog/ReorganizeDialog.vue b/src/components/dialog/ReorganizeDialog.vue
index 87be2f30..d24740a7 100644
--- a/src/components/dialog/ReorganizeDialog.vue
+++ b/src/components/dialog/ReorganizeDialog.vue
@@ -6,7 +6,7 @@ import { storageOptions } from '@/api/constants'
 import { numberValidator } from '@/@validators'
 import { useDisplay } from 'vuetify'
 import ProgressDialog from './ProgressDialog.vue'
-import { FileItem, TransferDirectoryConf } from '@/api/types'
+import { FileItem } from '@/api/types'
 
 // 显示器宽度
 const display = useDisplay()
@@ -85,39 +85,13 @@ const transferForm = reactive({
   from_history: false,
 })
 
-// 所有媒体库目录
-const directories = ref<TransferDirectoryConf[]>([])
-
-// 查询目录
-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)
+// 下载路径更新
+function updateTargetPath(value: string) {
+  if (value !== transferForm.target_path) {
+    transferForm.target_path = value // 仅在值真正改变时更新
   }
 }
 
-// 目的目录下拉框
-const targetDirectories = computed(() => {
-  return directories.value.map(item => item.library_path)
-})
-
-// 监听目的路径变化，配置默认值
-watch(
-  () => transferForm.target_path,
-  async newPath => {
-    if (newPath) {
-      const directory = directories.value.find(item => item.library_path === newPath)
-      if (directory) {
-        transferForm.target_storage = directory.storage ?? 'local'
-        transferForm.transfer_type = directory.transfer_type ?? ''
-        transferForm.scrape = directory.scraping ?? false
-      }
-    }
-  },
-)
-
 // 使用SSE监听加载进度
 function startLoadingProgress() {
   progressText.value = '请稍候 ...'
@@ -190,10 +164,6 @@ async function handleTransferLog(logid: number) {
     console.log(e)
   }
 }
-
-onMounted(() => {
-  loadDirectories()
-})
 </script>
 
 <template>
@@ -229,15 +199,20 @@ onMounted(() => {
                 persistent-hint
               />
             </VCol>
-            <VCol cols="12" md="12">
-              <VCombobox
-                v-model="transferForm.target_path"
-                :items="targetDirectories"
-                label="目的路径"
-                placeholder="留空自动"
-                hint="整理目的路径，留空将自动匹配"
-                persistent-hint
-              />
+            <VCol cols="12">
+              <VPathField @update:modelValue="updateTargetPath" :storage="transferForm.target_storage">
+                <template #activator="{ menuprops }">
+                  <VTextField
+                    v-model="transferForm.target_path"
+                    v-bind="menuprops"
+                    label="目的路径"
+                    placeholder="留空自动"
+                    hint="整理目的路径，留空将自动匹配"
+                    persistent-hint
+                    clearable
+                  />
+                </template>
+              </VPathField>
             </VCol>
           </VRow>
           <VRow>
diff --git a/src/components/input/PathField.vue b/src/components/input/PathField.vue
index 6654fd6a..2b59ca39 100644
--- a/src/components/input/PathField.vue
+++ b/src/components/input/PathField.vue
@@ -3,7 +3,6 @@ import api from '@/api'
 import { FileItem } from '@/api/types'
 import { VTreeview } from 'vuetify/labs/VTreeview'
 
-// 输入变量为默认路径
 const props = defineProps({
   root: {
     type: String,
@@ -16,16 +15,12 @@ const props = defineProps({
   },
 })
 
-// update:modelValue 事件
 const emit = defineEmits(['update:modelValue'])
 
-// 激活的目录
 const activedDirs = ref<string[]>([])
-
-// 打开的目录
 const openedDirs = ref<string[]>([])
+const isUserAction = ref(false) // 标志：是否为用户主动操作
 
-// 目录列表
 const treeItems = ref<FileItem[]>([
   {
     name: '/',
@@ -37,19 +32,16 @@ const treeItems = ref<FileItem[]>([
   },
 ])
 
-// 拉取子目录
 async function fetchDirs(item: any) {
   return api
     .post('/storage/list', item)
     .then((data: any) => {
-      // 只添加目录到子目录
       data = data.filter((i: any) => i.type === 'dir')
       item.children.push(...data)
     })
     .catch(err => console.warn(err))
 }
 
-// 获取选择的目录路径
 const selectedPath = computed(() => {
   if (activedDirs.value.length > 0) {
     return activedDirs.value[0]
@@ -57,13 +49,12 @@ const selectedPath = computed(() => {
   return ''
 })
 
-// 监听目录变化
 watch(activedDirs, newVal => {
-  if (!newVal.length) return
-  emit('update:modelValue', selectedPath)
+  if (!newVal.length || !isUserAction.value) return
+  emit('update:modelValue', selectedPath.value)
+  isUserAction.value = false
 })
 
-// 监听存储变化
 watch(
   () => props.storage,
   async newVal => {
@@ -81,6 +72,10 @@ watch(
     activedDirs.value = []
   },
 )
+
+function handleUserSelect() {
+  isUserAction.value = true
+}
 </script>
 
 <template>
@@ -102,7 +97,7 @@ watch(
       max-height="20rem"
       expand-icon="mdi-folder"
       collapse-icon="mdi-folder-open"
-    >
-    </VTreeview>
+      @update:activated="handleUserSelect"
+    />
   </VMenu>
 </template>