From 9aa8dff6509ed04b440b9f8c87e4d521c864ffb1 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 17 Jun 2024 21:04:13 +0800
Subject: [PATCH] fix aliyunpan

---
 src/components/FileBrowser.vue             | 29 ++++++++----------
 src/components/filebrowser/FileList.vue    | 26 +++++++++++------
 src/components/filebrowser/FileToolbar.vue | 28 +++++++++++++-----
 src/views/reorganize/FileBrowserView.vue   | 34 +++++++++++++++-------
 4 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue
index 44166d85..02ea3d4c 100644
--- a/src/components/FileBrowser.vue
+++ b/src/components/FileBrowser.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import type { Axios } from 'axios'
-import axios from 'axios'
 import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
-import type { EndPoints } from '@/api/types'
+import type { EndPoints, FileItem } from '@/api/types'
 import api from '@/api'
 import AliyunAuthDialog from './dialog/AliyunAuthDialog.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
@@ -11,8 +10,9 @@ import { isNullOrEmptyObject } from '@/@core/utils'
 // 输入参数
 const props = defineProps({
   storages: String,
-  storage: String,
   path: String,
+  fileid: String,
+  fileidstack: Array as PropType<string[]>,
   tree: Boolean,
   endpoints: Object as PropType<EndPoints>,
   axios: Object as PropType<Axios>,
@@ -65,8 +65,6 @@ const activeStorage = ref('local')
 const refreshPending = ref(false)
 // 排序
 const sort = ref('name')
-// axios实例
-const axiosInstance = ref<Axios>()
 // 阿里云盘认证对话框
 const aliyunAuthDialog = ref(false)
 // 阿里云盘认证参数
@@ -109,8 +107,8 @@ async function storageChanged(storage: string) {
 }
 
 // 路径变化
-function pathChanged(_path: string) {
-  emit('pathchanged', _path)
+function pathChanged(item: FileItem) {
+  emit('pathchanged', item)
 }
 
 // 排序变化
@@ -124,23 +122,19 @@ function aliyunAuthDone() {
   aliyunAuthDialog.value = false
   activeStorage.value = 'aliyun'
 }
-
-// 初始化
-onMounted(() => {
-  activeStorage.value = props.storage ?? 'local'
-  axiosInstance.value = props.axios ?? axios.create(props.axiosconfig)
-})
 </script>
 
 <template>
-  <VCard class="mx-auto" :loading="loading > 0 || !path">
-    <div v-if="path">
+  <VCard class="mx-auto" :loading="loading > 0">
+    <div v-if="path || fileid">
       <FileToolbar
         :path="path"
+        :fileid="fileid"
+        :fileidstack="fileidstack"
         :storages="storagesArray"
         :storage="activeStorage"
         :endpoints="endpoints"
-        :axios="axiosInstance"
+        :axios="axios"
         @storagechanged="storageChanged"
         @pathchanged="pathChanged"
         @foldercreated="refreshPending = true"
@@ -148,10 +142,11 @@ onMounted(() => {
       />
       <FileList
         :path="path"
+        :fileid="fileid"
         :storage="activeStorage"
         :icons="fileIcons"
         :endpoints="endpoints"
-        :axios="axiosInstance"
+        :axios="axios"
         :refreshpending="refreshPending"
         :sort="sort"
         @pathchanged="pathChanged"
diff --git a/src/components/filebrowser/FileList.vue b/src/components/filebrowser/FileList.vue
index e45d4499..5df5c810 100644
--- a/src/components/filebrowser/FileList.vue
+++ b/src/components/filebrowser/FileList.vue
@@ -26,6 +26,7 @@ const inProps = defineProps({
   icons: Object,
   storage: String,
   path: String,
+  fileid: String,
   endpoints: Object as PropType<EndPoints>,
   axios: Object as PropType<Axios>,
   refreshpending: Boolean,
@@ -81,10 +82,10 @@ const nameTestResult = ref<Context>()
 const nameTestDialog = ref(false)
 
 // 目录过滤
-const dirs = computed(() => items.value.filter(item => item.type === 'dir' && item.basename.includes(filter.value)))
+const dirs = computed(() => items.value.filter(item => item.type === 'dir' && item.name.includes(filter.value)))
 
 // 文件过滤
-const files = computed(() => items.value.filter(item => item.type === 'file' && item.basename.includes(filter.value)))
+const files = computed(() => items.value.filter(item => item.type === 'file' && item.name.includes(filter.value)))
 
 // 是否目录
 const isDir = computed(() => inProps.path?.endsWith('/'))
@@ -107,6 +108,7 @@ async function load() {
     .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(inProps.path || ''))
     .replace(/{sort}/g, inProps.sort || 'name')
+    .replace(/{fileid}/g, inProps.fileid || '')
   const config = {
     url,
     method: inProps.endpoints?.list.method || 'get',
@@ -121,7 +123,7 @@ async function load() {
 async function deleteItem(item: FileItem) {
   const confirmed = await createConfirm({
     title: '确认',
-    content: `是否确认删除${item.type === 'dir' ? '目录' : '文件'} ${item.basename}？`,
+    content: `是否确认删除${item.type === 'dir' ? '目录' : '文件'} ${item.name}？`,
   })
 
   if (confirmed) {
@@ -129,6 +131,7 @@ async function deleteItem(item: FileItem) {
     const url = inProps.endpoints?.delete.url
       .replace(/{storage}/g, inProps.storage)
       .replace(/{path}/g, encodeURIComponent(item.path))
+      .replace(/{fileid}/g, inProps.fileid || '')
 
     const config = {
       url,
@@ -144,8 +147,8 @@ async function deleteItem(item: FileItem) {
 }
 
 // 切换路径
-function changePath(_path: string) {
-  emit('pathchanged', _path)
+function changePath(item: FileItem) {
+  emit('pathchanged', item)
 }
 
 // 新窗口中下载文件
@@ -155,6 +158,7 @@ function download(path: string) {
   const url_path = inProps.endpoints?.download.url
     .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(path))
+    .replace(/{fileid}/g, inProps.fileid || '')
   const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
   // 下载文件
   window.open(url, '_blank')
@@ -167,6 +171,7 @@ function getImgLink(path: string) {
   const url_path = inProps.endpoints?.image.url
     .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(path))
+    .replace(/{fileid}/g, inProps.fileid || '')
   return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
 }
 
@@ -183,6 +188,7 @@ async function rename() {
   const url = inProps.endpoints?.rename.url
     .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(currentItem.value?.path || ''))
+    .replace(/{fileid}/g, inProps.fileid || '')
     .replace(/{newname}/g, encodeURIComponent(newName.value))
 
   const config = {
@@ -214,7 +220,7 @@ function formatTime(timestape: number) {
 
 // 监听path变化或者storage变化
 watch(
-  [() => inProps.path, () => inProps.storage],
+  [() => inProps.path, () => inProps.fileid, () => inProps.storage],
   async () => {
     items.value = []
     nameTestResult.value = undefined
@@ -358,7 +364,9 @@ onMounted(() => {
     <VCardText v-if="loading" class="text-center flex flex-col items-center">
       <VProgressCircular size="48" indeterminate color="primary" />
     </VCardText>
-    <VCardText v-if="!path" class="grow d-flex justify-center align-center grey--text"> 选择目录或文件 </VCardText>
+    <VCardText v-if="!inProps.path" class="grow d-flex justify-center align-center grey--text">
+      选择目录或文件
+    </VCardText>
     <VCardText v-else-if="isFile && !isImage" class="text-center break-all">
       <strong>{{ items[0]?.name }}</strong
       ><br />
@@ -366,7 +374,7 @@ onMounted(() => {
       修改时间：{{ formatTime(items[0]?.modify_time || 0) }}
     </VCardText>
     <VCardText v-else-if="isFile && isImage" class="grow d-flex justify-center align-center">
-      <VImg :src="getImgLink(path)" max-width="100%" max-height="100%" />
+      <VImg :src="getImgLink(inProps.path)" max-width="100%" max-height="100%" />
     </VCardText>
     <VCardText v-else-if="dirs.length || files.length" class="p-0">
       <VList subheader>
@@ -381,7 +389,7 @@ onMounted(() => {
           <template #default="{ item }">
             <VHover>
               <template #default="hover">
-                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="changePath(item.path)">
+                <VListItem v-bind="hover.props" class="px-3 pe-1" @click="changePath(item)">
                   <template #prepend>
                     <VIcon
                       v-if="inProps.icons && item.extension"
diff --git a/src/components/filebrowser/FileToolbar.vue b/src/components/filebrowser/FileToolbar.vue
index 7eca134b..018738d4 100644
--- a/src/components/filebrowser/FileToolbar.vue
+++ b/src/components/filebrowser/FileToolbar.vue
@@ -7,6 +7,11 @@ const inProps = defineProps({
   storages: Array as PropType<any[]>,
   storage: String,
   path: String,
+  fileid: String,
+  fileidstack: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
   endpoints: Object as PropType<EndPoints>,
   axios: Object as PropType<Axios>,
 })
@@ -36,13 +41,14 @@ const pathSegments = computed(() => {
   let path_str = ''
   const isFolder = inProps.path?.endsWith('/')
   const segments = inProps.path?.split('/').filter(item => item)
-
+  const fileids = inProps.fileidstack ?? []
   return (
     segments?.map((item, index) => {
       path_str += item + (index < segments.length - 1 || isFolder ? '/' : '')
       return {
         name: item,
         path: path_str,
+        fileid: fileids[index],
       }
     }) ?? []
   )
@@ -56,20 +62,27 @@ const storageObject = computed(() => {
 function changeStorage(code: string) {
   if (inProps.storage !== code) {
     emit('storagechanged', code)
-    emit('pathchanged', '/')
+    emit('pathchanged', {
+      path: '/',
+      fileid: 'root',
+    })
   }
 }
 
 // 路径变化
-function changePath(_path: string) {
-  emit('pathchanged', _path)
+function changePath(_path: string, _fileid: string) {
+  emit('pathchanged', {
+    path: _path,
+    fileid: _fileid,
+  })
 }
 
 // 返回上一级
 function goUp() {
   const segments = pathSegments.value ?? []
   const path = segments?.length === 1 ? '/' : segments[segments.length - 2].path
-  changePath(path)
+  const fileid = segments?.length === 1 ? 'root' : segments[segments.length - 2].fileid
+  changePath(path, fileid)
 }
 
 // 创建目录
@@ -78,6 +91,7 @@ async function mkdir() {
   const url = inProps.endpoints?.mkdir.url
     .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(inProps.path + newFolderName.value))
+    .replace(/{fileid}/g, inProps.fileid || '')
 
   const config = {
     url,
@@ -125,7 +139,7 @@ const sortIcon = computed(() => {
           </VListItem>
         </VList>
       </VMenu>
-      <VBtn variant="text" :input-value="path === '/'" class="px-1" @click="changePath('/')">
+      <VBtn variant="text" :input-value="path === '/'" class="px-1" @click="changePath('/', 'root')">
         <VIcon :icon="storageObject?.icon" class="mr-2" />
         {{ storageObject?.name }}
       </VBtn>
@@ -134,7 +148,7 @@ const sortIcon = computed(() => {
           variant="text"
           :input-value="index === pathSegments.length - 1"
           class="px-1 d-none d-md-block"
-          @click="changePath(segment.path)"
+          @click="changePath(segment.path, inProps.fileidstack[index])"
         >
           <VIcon icon=" mdi-chevron-right" />
           {{ segment.name }}
diff --git a/src/views/reorganize/FileBrowserView.vue b/src/views/reorganize/FileBrowserView.vue
index 78480aab..b15b9aab 100644
--- a/src/views/reorganize/FileBrowserView.vue
+++ b/src/views/reorganize/FileBrowserView.vue
@@ -1,37 +1,43 @@
 <script lang="ts" setup>
 import api from '@/api'
-import { MediaDirectory } from '@/api/types'
+import { FileItem, MediaDirectory } from '@/api/types'
 import FileBrowser from '@/components/FileBrowser.vue'
 
 const endpoints = {
   list: {
-    url: '/filebrowser/{storage}/list?path={path}&sort={sort}',
+    url: '/filebrowser/{storage}/list?path={path}&sort={sort}&fileid={fileid}',
     method: 'get',
   },
   mkdir: {
-    url: '/filebrowser/{storage}/mkdir?path={path}',
+    url: '/filebrowser/{storage}/mkdir?path={path}&fileid={fileid}',
     method: 'get',
   },
   delete: {
-    url: '/filebrowser/{storage}/delete?path={path}',
+    url: '/filebrowser/{storage}/delete?path={path}&fileid={fileid}',
     method: 'get',
   },
   download: {
-    url: '/filebrowser/{storage}/download?path={path}',
+    url: '/filebrowser/{storage}/download?path={path}&fileid={fileid}',
     method: 'get',
   },
   image: {
-    url: '/filebrowser/{storage}/image?path={path}',
+    url: '/filebrowser/{storage}/image?path={path}&fileid={fileid}',
     method: 'get',
   },
   rename: {
-    url: '/filebrowser/{storage}/rename?path={path}&new_name={newname}',
+    url: '/filebrowser/{storage}/rename?path={path}&new_name={newname}&fileid={fileid}',
     method: 'get',
   },
 }
 
 // 当前目录
-const path: Ref<string | undefined> = ref()
+const path = ref<string>('')
+
+// 当前fileid
+const fileid = ref<string>('root')
+
+// fileid的堆栈
+const fileidstack = ref<string[]>(['root'])
 
 // 下载目录列表
 const downloadDirectories = ref<MediaDirectory[]>([])
@@ -84,8 +90,14 @@ async function loadDownloadDirectories() {
 }
 
 // 目录变化
-function pathChanged(_path: string) {
-  path.value = _path
+function pathChanged(item: FileItem) {
+  path.value = item.path
+  fileid.value = item.fileid
+  if (fileidstack.value.includes(item.fileid)) {
+    fileidstack.value = fileidstack.value.slice(0, fileidstack.value.indexOf(item.fileid) + 1)
+  } else {
+    fileidstack.value.push(item.fileid)
+  }
 }
 
 onBeforeMount(loadDownloadDirectories)
@@ -97,6 +109,8 @@ onBeforeMount(loadDownloadDirectories)
       storages="local,aliyun"
       :tree="false"
       :path="path"
+      :fileid="fileid"
+      :fileidstack="fileidstack"
       :endpoints="endpoints"
       :axios="api"
       @pathchanged="pathChanged"