From 9335f79c30093b802c512ddc0e9ccc61ec5b7728 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 31 May 2024 15:06:58 +0800
Subject: [PATCH] add DirectoryTreeInput

---
 src/api/index.ts                           | 37 +++++++-------
 src/api/types.ts                           |  2 +-
 src/components/input/DirctoryTreeInput.vue | 57 ++++++++++++++++++++++
 src/main.ts                                |  2 +
 yarn.lock                                  |  5 --
 5 files changed, 79 insertions(+), 24 deletions(-)
 create mode 100644 src/components/input/DirctoryTreeInput.vue

diff --git a/src/api/index.ts b/src/api/index.ts
index a89c32e2..d9f3fa08 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,32 +8,33 @@ const api = axios.create({
 })
 
 // 添加请求拦截器
-api.interceptors.request.use((config) => {
+api.interceptors.request.use(config => {
   // 在请求头中添加token
   const token = store.state.auth.token
-  if (token)
-    config.headers.Authorization = `Bearer ${token}`
+  if (token) config.headers.Authorization = `Bearer ${token}`
 
   return config
 })
 
 // 添加响应拦截器
-api.interceptors.response.use((response) => {
-  return response.data
-}, (error) => {
-  if (!error.response) {
-    // 请求超时
-    return Promise.reject(error)
-  }
-  else if (error.response.status === 403) {
-    // 清除登录状态信息
-    store.dispatch('auth/clearToken')
+api.interceptors.response.use(
+  response => {
+    return response.data
+  },
+  error => {
+    if (!error.response) {
+      // 请求超时
+      return Promise.reject(new Error(error))
+    } else if (error.response.status === 403) {
+      // 清除登录状态信息
+      store.dispatch('auth/clearToken')
 
-    // token验证失败，跳转到登录页面
-    router.push('/login')
-  }
+      // token验证失败，跳转到登录页面
+      router.push('/login')
+    }
 
-  return Promise.reject(error)
-})
+    return Promise.reject(new Error(error))
+  },
+)
 
 export default api
diff --git a/src/api/types.ts b/src/api/types.ts
index dfdc73bf..48f015b3 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -736,7 +736,7 @@ export interface EndPoints {
 
 // 文件浏览项目
 export interface FileItem {
-  // 类型
+  // 类型 dir/file
   type: string
   // 文件名
   name: string
diff --git a/src/components/input/DirctoryTreeInput.vue b/src/components/input/DirctoryTreeInput.vue
new file mode 100644
index 00000000..d3602e37
--- /dev/null
+++ b/src/components/input/DirctoryTreeInput.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import api from '@/api'
+import { VTreeview } from 'vuetify/labs/VTreeview'
+
+// 激活的目录
+const activedDirs = ref<string[]>([])
+
+// 打开的目录
+const openedDirs = ref<string[]>([])
+
+// 目录列表
+const items = ref([
+  {
+    name: '/',
+    path: '/',
+    children: [],
+  },
+])
+
+const itemList = computed(() => {
+  return [
+    {
+      name: '/',
+      path: '/',
+      children: items.value,
+    },
+  ]
+})
+
+// 拉取子目录
+async function fetchDirs(item: any) {
+  return api
+    .get('/filebrowser/listdir?path=' + item.path)
+    .then(res => res)
+    .then((data: any) => {
+      item.children.push(...data)
+    })
+    .catch(err => console.warn(err))
+}
+</script>
+
+<template>
+  <VTreeview
+    v-model:activated="activedDirs"
+    v-model:opened="openedDirs"
+    :items="items"
+    :load-children="fetchDirs"
+    density="compact"
+    item-key="path"
+    item-title="name"
+    item-value="path"
+    activatable
+    open-on-click
+    transition
+  >
+  </VTreeview>
+</template>
diff --git a/src/main.ts b/src/main.ts
index dec7d313..5c5c12c1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,6 +17,7 @@ import '@styles/styles.scss'
 import 'vue-toast-notification/dist/theme-bootstrap.css'
 import { PerfectScrollbarPlugin } from 'vue3-perfect-scrollbar'
 import 'vue3-perfect-scrollbar/style.css'
+import { VTreeview } from 'vuetify/labs/VTreeview'
 import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
 import MediaCard from './components/cards/MediaCard.vue'
 import PosterCard from './components/cards/PosterCard.vue'
@@ -48,6 +49,7 @@ app
   .component('VMediaInfoCard', MediaInfoCard)
   .component('VTorrentCard', TorrentCard)
   .component('VMediaIdSelector', MediaIdSelector)
+  .component('VTreeview', VTreeview)
 
 // 注册插件
 app
diff --git a/yarn.lock b/yarn.lock
index b0ebd4c2..e3cd628c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5853,11 +5853,6 @@ psl@^1.1.28:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
-pull-refresh-vue3@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pull-refresh-vue3/-/pull-refresh-vue3-0.3.1.tgz#e75ffad5d71e30a85b5338f2beca9fc8a1e01432"
-  integrity sha512-DTcosG4LT3dGF/amzMP3YOwQ11x1taxQU3ChGx2SDCT5LMmyNpUD7pb2FAZkB/QEHVSpUTIfCcanfXANkYOXjw==
-
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"