diff --git a/src/api/types.ts b/src/api/types.ts index 38b90409..d45f8281 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -913,5 +913,5 @@ export interface FileItem { path: string extension: string size: number - children: [] + children: FileItem[] } diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue index 75a1bf94..827cfa79 100644 --- a/src/components/FileBrowser.vue +++ b/src/components/FileBrowser.vue @@ -5,6 +5,7 @@ import axios from 'axios' import Toolbar from './filebrowser/Toolbar.vue' import Tree from './filebrowser/Tree.vue' import List from './filebrowser/List.vue' +import type { EndPoints } from '@/api/types' // 输入参数 const props = defineProps({ @@ -12,16 +13,16 @@ const props = defineProps({ storage: String, path: String, tree: String, - endpoints: Object, + endpoints: Object as PropType, axios: Object as PropType, - axiosConfig: Object, - maxUploadFilesCount: Number, - maxUploadFileSize: Number, + axiosconfig: Object, }) -// 事件 +// 事件f const emit = defineEmits(['change']) +console.log('FileBrowser Init Path', props.path) + const availableStorages = [ { name: '本地', @@ -30,12 +31,6 @@ const availableStorages = [ }, ] -const endpoints = { - list: { url: '/filebrowser/list?path={path}', method: 'get' }, - mkdir: { url: '/filebrowser/mkdir?path={path}', method: 'post' }, - delete: { url: '/filebrowser/delete?path={path}', method: 'post' }, -} - const fileIcons = { zip: 'mdi-folder-zip-outline', rar: 'mdi-folder-zip-outline', @@ -65,7 +60,7 @@ const path = ref(props.path) // 当前存储 const activeStorage = ref('local') // 刷新 -const refreshPending = ref(false) +const refreshPending = ref(true) // axios实例 const axiosInstance = ref() @@ -89,13 +84,14 @@ function storageChanged(storage: string) { function pathChanged(_path: string) { path.value = _path + console.log('Browser changePath', path.value) emit('change', path) } // 初始化 -onMounted(() => { +onBeforeMount(() => { activeStorage.value = props.storage ?? 'local' - axiosInstance.value = props.axios ?? axios.create(props.axiosConfig) + axiosInstance.value = props.axios ?? axios.create(props.axiosconfig) if (!path.value) pathChanged('/') }) @@ -107,7 +103,7 @@ onMounted(() => { :path="path" :storages="storagesArray" :storage="activeStorage" - :endpoints="endpoints" + :endpoints="props.endpoints" :axios="axiosInstance" @storagechanged="storageChanged" @pathchanged="pathChanged" @@ -136,10 +132,10 @@ onMounted(() => { :endpoints="endpoints" :axios="axiosInstance" :refreshpending="refreshPending" - @path-changed="pathChanged" + @pathchanged="pathChanged" @loading="loadingChanged" @refreshed="refreshPending = false" - @file-deleted="refreshPending = true" + @filedeleted="refreshPending = true" /> diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue index 3dc0803f..f93d28f8 100644 --- a/src/components/filebrowser/List.vue +++ b/src/components/filebrowser/List.vue @@ -2,6 +2,7 @@ import type { Axios } from 'axios' import type { PropType } from 'vue' import { useConfirm } from 'vuetify-use-dialog' +import axios from 'axios' import { formatBytes } from '@core/utils/formatters' import type { EndPoints, FileItem } from '@/api/types' @@ -18,20 +19,25 @@ const props = defineProps({ // 对外事件 const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted']) +console.log('List Init Path', props.path) + // 确认框 const createConfirm = useConfirm() +// axios实例 +const axiosInstance = ref(props.axios ?? axios) + // 内容列表 const items = ref([]) // 当前路径 -const path = ref(props.path ?? '') +const path = ref(props.path) // 过滤条件 const filter = ref('') // 存储空间类型 -const storage = ref(props.storage || '') +const storage = ref(props.storage ?? '') // 是否正在加载 const refreshPending = ref(props.refreshpending || false) @@ -47,13 +53,14 @@ const files = computed(() => ) // 是否目录 -const isDir = computed(() => path.value.endsWith('/')) +const isDir = computed(() => path.value?.endsWith('/')) // 是否文件 const isFile = computed(() => !isDir.value) // 调API加载内容 async function load() { + console.log('List load', path.value, isDir.value) if (isDir.value) { const url = props.endpoints?.list.url .replace(/{storage}/g, storage.value) @@ -63,9 +70,9 @@ async function load() { url, method: props.endpoints?.list.method || 'get', } - - const response = await props.axios?.request(config) - items.value = response?.data + console.log('List load', url, config) + // 加载数据 + items.value = await axiosInstance.value.request(config) ?? [] } } @@ -75,7 +82,7 @@ async function deleteItem(item: FileItem) { title: '确认', content: `是否确认删除${ item.type === 'dir' ? '目录' : '文件' - }?
${item.basename}?`, + } ${item.basename}?`, confirmationText: '确认', cancellationText: '取消', dialogProps: { @@ -94,7 +101,7 @@ async function deleteItem(item: FileItem) { method: props.endpoints?.delete.method || 'post', } - await props.axios?.request(config) + await axiosInstance.value.request(config) emit('filedeleted') emit('loading', false) } @@ -102,21 +109,26 @@ async function deleteItem(item: FileItem) { // 切换路径 function changePath(path: string) { + console.log('List changePath', path) emit('pathchanged', path) } // 监听path变化 watch( - () => path.value, + path, async () => { + console.log('List pathChanged', path.value) items.value = [] - await load() if (refreshPending.value) { await load() emit('refreshed') } }, ) + +onMounted(() => { + load() +})