enhance the file browser

src/components/filebrowser/FileList.vue

@@ -26,7 +26,6 @@ const { appMode } = usePWA()
 // 输入参数
 const inProps = defineProps({
   icons: Object,
-  storage: String,
   endpoints: Object as PropType<EndPoints>,
   axios: {
     type: Function,
@@ -183,6 +182,8 @@ function changeSelectMode() {
 // 调API加载文件夹内的内容
 async function list_files() {
   loading.value = true
+  const takeURISnapshot = () => [inProps.item.storage, inProps.item.path].join(':/');
+  const prevURI = takeURISnapshot();
   emit('loading', true)
 
   // 参数
@@ -195,7 +196,12 @@ async function list_files() {
   }
 
   // 加载数据
-  items.value = (await inProps.axios.request(config)) ?? []
+  const data = (await inProps.axios.request(config)) ?? []
+  // 如果当前路径已经变化，则放弃此次加载结果
+  if (prevURI !== takeURISnapshot()) {
+    return;
+  }
+  items.value = data
   emit('loading', false)
   loading.value = false
 
@@ -446,9 +452,9 @@ watch(
   },
 )
 
-// 监听item变化或者storage变化
+// 监听item变化
 watch(
-  [() => inProps.item, () => inProps.storage],
+  [() => inProps.item],
   async () => {
     // 清空列表
     items.value = []
@@ -550,7 +556,7 @@ async function scrape(item: FileItem, confirm: boolean = true) {
     progressDialog.value = true
     progressText.value = t('file.scraping', { path: item.path })
 
-    const result: { [key: string]: any } = await api.post(`media/scrape/${inProps.storage}`, item)
+    const result: { [key: string]: any } = await api.post(`media/scrape/${inProps.item.storage}`, item)
 
     // 关闭进度条
     progressDialog.value = false
@@ -808,7 +814,7 @@ onMounted(() => {
       v-if="transferPopper"
       v-model="transferPopper"
       :items="transferItems"
-      :target_storage="inProps.storage"
+      :target_storage="inProps.item.storage"
       @done="transferDone"
       @close="transferPopper = false"
     />

src/components/filebrowser/FileNavigator.vue

@@ -42,7 +42,7 @@ const availableHeight = computed(() => {
 const props = defineProps({
   storage: {
     type: String,
-    default: 'local',
+    required: true,
   },
   currentPath: {
     type: String,
@@ -223,7 +223,7 @@ watch(
 watch(
   () => props.items,
   newItems => {
-    if (newItems && newItems.length > 0) {
+    if (newItems) {
       // 过滤出目录项
       const dirs = newItems.filter(item => item.type === 'dir')
 
@@ -284,7 +284,7 @@ onMounted(async () => {
 })
 
 onActivated(() => {
-  updateHeight()
+  // updateHeight()
 })
 </script>
 
@@ -309,7 +309,6 @@ onActivated(() => {
           <span>{{ t('file.rootDirectory') }}</span>
         </div>
       </div>
-
       <!-- 加载根目录 -->
       <div v-if="loading['/']" class="tree-loading">
         <VProgressCircular indeterminate size="24" color="primary" class="ma-2" />

src/components/filebrowser/FileToolbar.vue

@@ -13,7 +13,6 @@ const display = useDisplay()
 // 输入参数
 const inProps = defineProps({
   storages: Array as PropType<any[]>,
-  storage: String,
   item: {
     type: Object as PropType<FileItem>,
     required: true,
@@ -67,12 +66,12 @@ const pathSegments = computed(() => {
 
 // 当前存储
 const storageObject = computed(() => {
-  return inProps.storages?.find(item => item.value === inProps.storage)
+  return inProps.storages?.find(item => item.value === inProps.item.storage)
 })
 
 // 切换存储
 function changeStorage(code: string) {
-  if (inProps.storage !== code) {
+  if (inProps.item.storage!== code) {
     emit('storagechanged', code)
   }
 }