diff --git a/src/api/types.ts b/src/api/types.ts index 2915004c..b8cc0977 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -893,6 +893,7 @@ export interface EndPoints { delete: any download: any image: any + rename: any } // 文件浏览项目 diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue index ff365347..45333bad 100644 --- a/src/components/FileBrowser.vue +++ b/src/components/FileBrowser.vue @@ -129,6 +129,7 @@ onBeforeMount(() => { @loading="loadingChanged" @refreshed="refreshPending = false" @filedeleted="refreshPending = true" + @renamed="refreshPending = true" /> diff --git a/src/components/filebrowser/List.vue b/src/components/filebrowser/List.vue index 3d76bec9..3c59f261 100644 --- a/src/components/filebrowser/List.vue +++ b/src/components/filebrowser/List.vue @@ -8,7 +8,7 @@ import type { EndPoints, FileItem } from '@/api/types' import store from '@/store' // 输入参数 -const props = defineProps({ +const inProps = defineProps({ icons: Object, storage: String, path: String, @@ -18,13 +18,13 @@ const props = defineProps({ }) // 对外事件 -const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted']) +const emit = defineEmits(['loading', 'pathchanged', 'refreshed', 'filedeleted', 'renamed']) // 确认框 const createConfirm = useConfirm() // axios实例 -const axiosInstance = ref(props.axios ?? axios) +const axiosInstance = ref(inProps.axios ?? axios) // 内容列表 const items = ref([]) @@ -32,8 +32,17 @@ const items = ref([]) // 过滤条件 const filter = ref('') +// 重命名弹窗 +const renamePopper = ref(false) + +// 新名称 +const newName = ref('') + +// 当前名称 +const currentItem = ref() + // 存储空间类型 -const storage = ref(props.storage ?? '') +const storage = ref(inProps.storage ?? '') // 目录过滤 const dirs = computed(() => @@ -46,14 +55,14 @@ const files = computed(() => ) // 是否目录 -const isDir = computed(() => props.path?.endsWith('/')) +const isDir = computed(() => inProps.path?.endsWith('/')) // 是否文件 const isFile = computed(() => !isDir.value) // 是否为图片文件 const isImage = computed(() => { - const ext = props.path?.split('.').pop()?.toLowerCase() + const ext = inProps.path?.split('.').pop()?.toLowerCase() return ['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(ext ?? '') }) @@ -61,13 +70,13 @@ const isImage = computed(() => { async function load() { emit('loading', true) if (isDir.value) { - const url = props.endpoints?.list.url + const url = inProps.endpoints?.list.url .replace(/{storage}/g, storage.value) - .replace(/{path}/g, props.path) + .replace(/{path}/g, inProps.path) const config = { url, - method: props.endpoints?.list.method || 'get', + method: inProps.endpoints?.list.method || 'get', } // 加载数据 items.value = await axiosInstance.value.request(config) ?? [] @@ -91,13 +100,13 @@ async function deleteItem(item: FileItem) { if (confirmed) { emit('loading', true) - const url = props.endpoints?.delete.url + const url = inProps.endpoints?.delete.url .replace(/{storage}/g, storage.value) .replace(/{path}/g, item.path) const config = { url, - method: props.endpoints?.delete.method || 'post', + method: inProps.endpoints?.delete.method || 'post', } await axiosInstance.value.request(config) @@ -118,7 +127,7 @@ function download(path: string) { if (!path) return const token = store.state.auth.token - const url_path = props.endpoints?.download.url + const url_path = inProps.endpoints?.download.url .replace(/{storage}/g, storage.value) .replace(/{path}/g, path) const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}` @@ -131,7 +140,7 @@ function getImgLink(path: string) { if (!path) return '' const token = store.state.auth.token - const url_path = props.endpoints?.image.url + const url_path = inProps.endpoints?.image.url .replace(/{storage}/g, storage.value) .replace(/{path}/g, path) return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}` @@ -142,9 +151,40 @@ function transfer(item: FileItem) { // TODO 转移文件 } +// 显示重命名弹窗 +function showRenmae(item: FileItem) { + currentItem.value = item + newName.value = item.name + renamePopper.value = true +} + +// 重命名 +async function rename() { + emit('loading', true) + const url = inProps.endpoints?.rename.url + .replace(/{storage}/g, inProps.storage) + .replace(/{path}/g, currentItem.value?.path) + .replace(/{newname}/g, newName.value) + + const config = { + url, + method: inProps.endpoints?.mkdir.method || 'post', + } + + // 调API + await inProps.axios?.request(config) + + renamePopper.value = false + newName.value = '' + emit('loading', false) + + // 通知重新加载 + emit('renamed') +} + // 监听path变化 watch( - () => props.path, + () => inProps.path, async () => { items.value = [] await load() @@ -153,9 +193,9 @@ watch( // 监听refreshPending变化 watch( - () => props.refreshpending, + () => inProps.refreshpending, async () => { - if (props.refreshpending) { + if (inProps.refreshpending) { await load() emit('refreshed') } @@ -201,6 +241,9 @@ onMounted(() => {