Vue3 实现网盘文件列表树状结构：根据 parentFolderUUID 和 username 查询并支持后退

本文介绍使用 Vue3 实现网盘文件列表树状结构的方案，支持根据 parentFolderUUID 和 username 查询文件和文件夹，并提供后退功能，方便用户浏览和管理文件。

首先，需要定义一个组件来展示文件列表树状结构，可以使用递归组件来实现。具体实现可以参考以下代码：

<template>
  <div>
    <div v-for='(item, index) in folderList' :key='index'>
      <div @click='goToFolder(item)'>
        {{ item.name }}
      </div>
      <div v-if='item.children && item.children.length'>
        <FolderList :folderList='item.children' :parentFolderUUID='item.uuid' :username='username' />
      </div>
    </div>
  </div>
</template>

<script>
import { getFolderList } from '@/api/folder'

export default {
  name: 'FolderList',
  props: {
    folderList: {
      type: Array,
      required: true
    },
    parentFolderUUID: {
      type: String,
      required: true
    },
    username: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      folderList: []
    }
  },
  methods: {
    async goToFolder (folder) {
      if (folder.type === 'folder') {
        this.folderList = await getFolderList(folder.uuid, this.username)
      }
    }
  }
}
</script>

然后，在父组件中，需要定义一个方法来获取根目录的文件列表，并将其传递给子组件。同时，还需要定义一个方法来处理后退操作，即返回上一级目录。具体实现可以参考以下代码：

<template>
  <div>
    <button v-if='parentFolderUUID' @click='goBack'>返回上一级</button>
    <FolderList v-if='folderList && folderList.length' :folderList='folderList' :parentFolderUUID='parentFolderUUID' :username='username' />
  </div>
</template>

<script>
import FolderList from '@/components/FolderList'
import { getFolderList } from '@/api/folder'

export default {
  name: 'FileTree',
  components: {
    FolderList
  },
  props: {
    parentFolderUUID: {
      type: String,
      default: ''
    },
    username: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      folderList: []
    }
  },
  async created () {
    if (!this.parentFolderUUID) {
      this.folderList = await getFolderList('', this.username)
    }
  },
  methods: {
    async goBack () {
      const parentFolder = await getFolder(this.parentFolderUUID)
      this.folderList = await getFolderList(parentFolder.parentFolderUUID, this.username)
      this.parentFolderUUID = parentFolder.parentFolderUUID
    }
  }
}
</script>

最后，在父组件中，将 FileTree 组件挂载到页面上，并传递需要查询的 parentFolderUUID 和 username 参数。具体实现可以参考以下代码：

<template>
  <div>
    <FileTree :parentFolderUUID='parentFolderUUID' :username='username' />
  </div>
</template>

<script>
import FileTree from '@/components/FileTree'

export default {
  name: 'App',
  components: {
    FileTree
  },
  data () {
    return {
      parentFolderUUID: '',
      username: 'testuser'
    }
  }
}
</script>