539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

feat: 也不知道改了啥

Browse Source
This commit is contained in:
539943419 committed 2024-09-29 11:50:39 +08:00
1 parent 9611e9f4ed
commit aec7fcabc9
2 files changed
+182 -113
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/class/VirtualDirectory.ts
+118 -86
View File
@@ -1,51 +1,60 @@
import config from "@/config";
import generateId from "@/hooks/generateId";
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
import type { stats, file, directory } from "@/types/type.ts";
import config from '@/config'
import generateId from '@/hooks/generateId'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import type { stats, file, directory } from '@/types/type.ts'
import difference from 'lodash/difference'
const miaoFetchApi = useMiaoFetchApi();
const miaoFetchApi = useMiaoFetchApi()
const vItemMap = new Map();
// const vDirectoryMap = new Map<string, VirtualDirectory>()
// const vFileMap = new Map<string, VirtualFile>()
export interface Tree {
name: string;
type: "directory";
path: string;
stats: stats;
name: string
type: 'directory'
path: string
stats: stats
files?: {
name: string;
type: "file";
size: number;
stats: stats;
url: string;
}[];
directories?: Tree[];
name: string
type: 'file'
size: number
stats: stats
url: string
}[]
directories?: Tree[]
}
export class VirtualFile {
constructor(info: file, parent: VirtualDirectory) {
this.name = info.name;
this.size = info.size;
this.stats = info.stats;
this.parent = parent;
this.type = "file";
this.id = generateId();
vItemMap.set(this.path, this);
this.name = info.name
this.size = info.size
this.stats = info.stats
this.parent = parent
this.type = 'file'
this.id = generateId()
// if (vFileMap.get(this.path) !== undefined) {
// throw `${this.path} is already exist`
// }
// vFileMap.set(this.path, this)
}
name: string;
type: "file";
size: number;
stats: stats;
parent: VirtualDirectory;
id: number;
storage: { [key: string]: any } = {};
name: string
type: 'file'
size: number
stats: stats
parent: VirtualDirectory
id: number
storage: { [key: string]: any } = {}
get path() {
return `${this.parent.path}${this.name}`;
return `${this.parent.path}${this.name}`
}
get url() {
return `${config.api.get}${this.parent.path}${this.name}`;
return `${config.api.get}${this.parent.path}${this.name}`
}
// destroy() {
// vFileMap.delete(this.path)
// }
}
class VirtualDirectory {
@@ -53,31 +62,34 @@ class VirtualDirectory {
* 除非为根节点，否则必须设置parent
*/
constructor(info: directory, parent?: VirtualDirectory) {
this.name = info.name;
this.stats = info.stats;
this.parent = parent ?? undefined;
this.id = generateId();
vItemMap.set(this.path, this);
this.name = info.name
this.stats = info.stats
this.parent = parent ?? undefined
this.id = generateId()
// if (vDirectoryMap.get(this.path) !== undefined) {
// throw `${this.path} is already exist`
// }
// vDirectoryMap.set(this.path, this)
}
// 文件夹名
name: string;
name: string
// 子文件
files?: VirtualFile[];
files: VirtualFile[] = []
// 子目录
directories?: VirtualDirectory[];
directories: VirtualDirectory[] = []
// 没啥意义，标注一下就是了
type: "directory" = "directory";
type: 'directory' = 'directory'
// 文件夹创建时间等杂项属性
stats: stats;
stats: stats
// 父文件夹
parent?: VirtualDirectory;
parent?: VirtualDirectory
_isUpdated: boolean = false;
_isUpdated: boolean = false
id: number;
id: number
// 用来存储一些标记信息啥的
storage: { [key: string]: any } = {};
storage: { [key: string]: any } = {}
/**
* 获取相对于根目录的路径的层数
@@ -85,7 +97,7 @@ class VirtualDirectory {
* @returns {string}
*/
get layer(): number {
return this.parent ? this.parent.layer + 1 : 0;
return this.parent ? this.parent.layer + 1 : 0
}
/**
* 相对于根目录的路径， 如: "/", "/123/321/"
@@ -94,9 +106,9 @@ class VirtualDirectory {
*/
get path(): string {
if (!this.parent) {
return "/";
return '/'
}
return `${this.parent.path}${this.name}/`;
return `${this.parent.path}${this.name}/`
}
/**
@@ -105,16 +117,16 @@ class VirtualDirectory {
*/
get getParents(): VirtualDirectory[] {
if (!this.parent) {
return [this];
return [this]
}
return [...this.parent.getParents, this];
return [...this.parent.getParents, this]
}
/**
* 获取当前文件夹是否已经请求过至少一次数据
*/
get isUpdated() {
return this._isUpdated;
return this._isUpdated
}
/**
@@ -124,9 +136,9 @@ class VirtualDirectory {
*/
getParent(layer: number): VirtualDirectory {
if (layer <= 0 || !this.parent) {
return this;
return this
}
return this.parent.getParent(layer - 1);
return this.parent.getParent(layer - 1)
}
get tree(): Tree {
@@ -136,68 +148,88 @@ class VirtualDirectory {
path: this.path,
stats: this.stats,
files:
this.files?.map(v => ({
this.files?.map((v) => ({
name: v.name,
type: v.type,
size: v.size,
stats: v.stats,
url: v.url
})) ?? [],
directories: this.directories?.map(v => v.tree) ?? []
};
directories: this.directories?.map((v) => v.tree) ?? []
}
}
// todo: 重构这个函数
// 时间复杂度大爆炸
updateContent(content: (file | directory)[]) {
this._isUpdated = true;
this._isUpdated = true
this.files = this.files ?? [];
this.directories = this.directories ?? [];
const fileNames: string[] = this.files.map(v => v.name);
const dirNames: string[] = this.directories.map(v => v.name);
const itemNames: string[] = content.map(v => v.name);
const itemNames: string[] = content.map((v) => v.name)
// 删去远程端已不存在的文件与文件夹
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
let index = 0;
let index = 0
while (index < target.length) {
if (!itemNames.includes(target[index].name)) {
target.splice(index, 1);
target.splice(index, 1)
} else {
index += 1;
index += 1
}
}
};
_delete(this.files);
_delete(this.directories);
}
const _addFile = (item: file) => {
const nvf =
// vFileMap.get(`${this.path}${item.name}`) ??
new VirtualFile(item, this)
this.files.push(nvf)
}
const _addDirectory = (item: directory) => {
const nvd =
// vDirectoryMap.get(`${this.path}${item.name}/`) ??
new VirtualDirectory(item, this)
this.directories.push(nvd)
}
const newFileNames: string[] = difference(
content.filter((v) => v.type === 'file').map((v) => v.name),
this.files.map((v) => v.name)
)
const newDirectoryNames: string[] = difference(
content.filter((v) => v.type === 'directory').map((v) => v.name),
this.files.map((v) => v.name)
)
_delete(this.files)
_delete(this.directories)
// 加入新的文件与文件夹
for (let item of content) {
if (item.type === "file") {
if (!fileNames.includes(item.name)) {
this.files.push(new VirtualFile(item, this));
}
} else if (item.type === "directory") {
if (!dirNames.includes(item.name)) {
this.directories.push(new VirtualDirectory(item, this));
}
for (let item of content.filter((v) => newFileNames.includes(v.name))) {
_addFile(item as file)
}
for (let item of content.filter((v) =>
newDirectoryNames.includes(v.name)
)) {
_addDirectory(item as directory)
}
}
hasChild(item: VirtualDirectory | VirtualFile): boolean {
if (item.type === "directory") {
return this.directories?.includes(item) ?? false;
if (item.type === 'directory') {
return this.directories?.includes(item) ?? false
} else {
return this.files?.includes(item) ?? false;
return this.files?.includes(item) ?? false
}
}
// destroy() {
// for(const item of [...this.files, ...this.directories]){
// item.destroy()
// }
// vDirectoryMap.delete(this.path)
// }
/**
* 调用后重新向远端拉取文件夹信息并进行更新
* @returns {void}
*/
async update(): Promise<void> {
const data: (file | directory)[] = await miaoFetchApi.get(this);
this.updateContent(data);
const data: (file | directory)[] = await miaoFetchApi.get(this)
this.updateContent(data)
}
}
export default VirtualDirectory;
export default VirtualDirectory
src/plugins/miaoDirectory/miaoDirectory.vue
+64 -27
View File
@@ -1,28 +1,49 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
<miao-drop-handler
@on-virtual-directory="handleDropVDirectory"
@on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
<miaoAlertTipProvider ref="miaoAlertTip">
<div class="miao-directory-item-container" ref="rootDomRef">
<!-- 顶部面包屑导航和工具栏 -->
<miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
:open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
@set-current-directory="setCurrentDirectory" @search="handleSearch"
<miao-directory-top
:color="props.color"
:current-directory="currentDirectory"
@back="handleBack"
:open-menu-option="topBarMenuOption"
@reload="handleReload"
@exit="emit('exit')"
:index="index"
@set-current-directory="setCurrentDirectory"
@search="handleSearch"
@menu-select="handleTopBarMenuSelect" />
<!-- 文件和文件夹列表 -->
<miao-directory-items ref="miaoDirectoryItemRef" :color="props.color"
:showData_directory="showData_directory" :showData_files="showData_files"
:selected-item="selectedItem.value" :index="index" @item-click="handleItemClick"
@item-download="handleItemDownload" @item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart" @item-rename="handleItemRename"
<miao-directory-items
ref="miaoDirectoryItemRef"
:color="props.color"
:showData_directory="showData_directory"
:showData_files="showData_files"
:selected-item="selectedItem.value"
:index="index"
@item-click="handleItemClick"
@item-download="handleItemDownload"
@item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart"
@item-rename="handleItemRename"
@item-select="handleItemSelect" />
<!-- 底部工具栏 -->
<miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
<miao-directory-bottom
:index="index"
@add-new-item="handleAddNewItem"
v-if="false"
@pick-files-upload="handlePickFilesUpload" />
<miao-mask v-model:show="showModel"></miao-mask>
<miao-popup-input ref="popupInput"></miao-popup-input>
</div>
</miaoAlertTipProvider>
</miao-drop-handler>
</template>
@@ -37,13 +58,13 @@ import useVirtualPages from '@/hooks/useVirtualPages'
import { filePicker, renderIcon } from '@/hooks/miaoTools'
import uniq from 'lodash/uniq'
// 导入子组件
import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
import MiaoMask from '@/components/miaoMask.vue'
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
import {
CloseOutline,
SearchOutline,
@@ -80,6 +101,7 @@ const searchText = ref<string>('')
const showDirs = ref<boolean>(true)
const showFiles = ref<boolean>(true)
const miaoDirectoryItemRef = ref()
const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
class SelectedItem {
constructor() {
@@ -227,13 +249,14 @@ const topBarMenuOption = computed(() => {
label: `反选`,
key: 'multiSelect:inversion'
},
selectedItem.value.length === 2 ?
{
selectedItem.value.length === 2
? {
label: `区间内全选`,
key: 'multiSelect:range'
} : undefined
}
: undefined
].filter((v) => v !== undefined),
icon: renderIcon(CheckmarkDoneOutline),
icon: renderIcon(CheckmarkDoneOutline)
},
{
label: '插件',
@@ -259,11 +282,9 @@ const topBarMenuOption = computed(() => {
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
try {
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
if (
virtualDirectory.files === undefined ||
virtualDirectory.directories === undefined
) {
if (!virtualDirectory.isUpdated) {
await virtualDirectory.update()
} else {
virtualDirectory.update()
@@ -279,6 +300,12 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
})
}
currentDirectories.value[0] = virtualDirectory
} catch(e) {
miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
type: 'error',
timeout: 3000
})
}
}
const reload = () => {
@@ -315,10 +342,12 @@ const handleTopBarMenuSelect = (key: string) => {
// selectedItem.clear()
} else if (key === 'showDirs') {
showDirs.value = !showDirs.value
showDirs.value === false && selectedItem.clear(v => v.type !== 'directory')
showDirs.value === false &&
selectedItem.clear((v) => v.type !== 'directory')
} else if (key === 'showFiles') {
showFiles.value = !showFiles.value
showFiles.value === false && selectedItem.clear(v => v.type !== 'file')
showFiles.value === false &&
selectedItem.clear((v) => v.type !== 'file')
} else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
@@ -326,20 +355,29 @@ const handleTopBarMenuSelect = (key: string) => {
const opName = key.split(':')[1]
switch (opName) {
case 'all':
selectedItem.pushArray([...showData_directory.value, ...showData_files.value])
break;
selectedItem.pushArray([
...showData_directory.value,
...showData_files.value
])
break
case 'reset':
selectedItem.clear()
break
case 'inversion':
const sArr = selectedItem.value
const arr = [...showData_directory.value, ...showData_files.value].filter(i => !sArr.includes(i))
const arr = [
...showData_directory.value,
...showData_files.value
].filter((i) => !sArr.includes(i))
selectedItem.clear()
selectedItem.pushArray(arr)
break
case "range":
case 'range':
const _sArr = selectedItem.value
const _arr = [...showData_directory.value, ...showData_files.value]
const _arr = [
...showData_directory.value,
...showData_files.value
]
const _nArr = []
let _counter = 0
for (const i of _arr) {
@@ -357,7 +395,6 @@ const handleTopBarMenuSelect = (key: string) => {
selectedItem.pushArray(_nArr)
break
}
}
}