云盘逻辑

数据结构

export interface SourceInfo {
    sourceId: string // 资源主键ID
    sourcePath: string // 资源ID路径
    sourceType: SourceType // 资源类型 // 1文件 0 文件夹
    sourceName: string // 资源名称
    ext: string // 文件扩展名，文件夹为空
    size: number // byte资源大小，文件夹包含子文件夹
   ...
}

export type FolderTreeItem = Pick<SourceInfo, 'sourceId' | 'sourceName'> & {
    disabled?: boolean // 是否精致编辑
}

export type FolderTree = FolderTreeItem & {
    subFolder: FolderTree[]
}

export interface FolderMap {
    [folderKey: string]: FolderTree
}

渲染逻辑

1. 项目启动自动加载一级文件夹
2. 展开 siderbar 文件夹：

• 如果 FolderMap[id]（当前展开的文件夹） subFolder 为空，则通过 id 去获取其资源
• 如果 subFolder 不为空，则直接展开 subFolder
• 即 siderbar 文件夹展开或收起，不一定会更新文件夹列表数据

3. 查看文件夹资源（点击 siderbar 文件夹名称）

• 通过当前 folderId 去获取文件夹资源

4. 新增文件夹

• 会在当前父文件夹前插入新文件夹，不刷新 table data，但会更新左侧 folder menu

5. 删除、重命名文件、文件夹

• 成功后会刷新 table data 以及左侧 folder menu （可优化）

6. 上传文件、文件夹

• 上传成功后，如果停留在当前父文件，则刷新父文件夹资源
• 文件夹上传成功后，刷新左侧菜单

文件解析逻辑

1. 全局上传，保证路由切换不会出错
2. 用户选择文件、文件夹后，使用vue3-simple-uploader解析文件、文件夹
3. 将 simpleUploader 解析后的数据通过全局$bus 通知给文件分析组件，处理后，push 至上传的 batchPool 里

自动上传

1. 监听待上传的数组长度，从 batchPool 找到下一个上传的批次
2. 如果当前没有正在上传的批次，则开始上传第一个等待上传的批次（防止页面卡死，目前关闭同时上传多个批次）

上传文件（autoUploadFile）核心逻辑

1. 检查文件名称是否存在

• uploadCheck()：同名文件存在提示用户，用户选择跳过、替换、保留两者（后端重命名） 暂时默认保留两者

2. 将文件大小给后端，后端返回切片列表，包括每个切片的 boss 地址

• fetchFilePartsInfo()：filePartsMap 用于记录每个 file 的信息，包括 parentFolderId、fileName、batchCode（所属的上传批次 id）、multiparts[]（eTag、partNum、putUrl…）

3. 遍历切片数组，将 file 切块，再上传切片

• uploadFileParts()上传文件，每次同时上传5片，更新每片上传成功后的 eTag，

4. 全部切片上传成功后，调用合并接口，并将已完成的 file 从 filePartsMap 移除

• postAllPart()

单文件上传

1. 更新上传状态为正在上传，更新当前批次为上传中
2. 执行上传文件逻辑
3. 上传完成后，上传状态为停止上传，更新当前批次为已完成，如有需要刷新父文件夹资源列表

文件夹上传

1. 更新上传状态为正在上传，更新当前批次为上传中
2. 使用 vue3-simple-uplod 解析文件，采用的是广度优先遍历，fileList 展开：当前文件夹->子文件->subFolder1（包含该文件夹下的 fileList）->subFolder2
3. 当遇到文件夹，先调接口创建一个文件夹，遍历其 fileList，将 file 走上传文件逻辑
4. 当 file 都上传完后，遇见新的 folder 递归第 3 步
5. 更新侧边 folder 目录，全部上传成功后，更新当前批次为已完成，如有需要刷新父文件夹资源列表