add DirectoryTreeInput

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

src/api/types.ts

@@ -736,7 +736,7 @@ export interface EndPoints {
 
 // 文件浏览项目
 export interface FileItem {
-  // 类型
+  // 类型 dir/file
   type: string
   // 文件名
   name: string

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>

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