update
This commit is contained in:
539943419 committed
1 parent
d9363d3b93
commit
a668b3b840
13 files changed
+554
-145
No files matched your search
+94
-38
@@ -1,16 +1,23 @@
|
||||
<template>
|
||||
<div class="container" ref="rootDom">
|
||||
<n-breadcrumb separator=">">
|
||||
<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)">
|
||||
{{ dir.name }}
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
<button v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" style="display: block;">
|
||||
{{ `dir ===> ${dir.name}` }}
|
||||
</button>
|
||||
<a v-for="(file) in currentDirectory?.files" :href="`${baseUrl}/get${file.path}`" target="_blank" style="display: block;">
|
||||
{{ `file ===> ${file.name}` }}
|
||||
</a>
|
||||
<div class="miao-directory-item-container" ref="rootDomRef">
|
||||
<div class="container-top">
|
||||
<n-breadcrumb separator=">">
|
||||
<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)">
|
||||
{{ dir.name }}
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
</div>
|
||||
<div class="container-items">
|
||||
<!-- <miaoDirectoryItem v-if="currentDirectory?.parent" :item="currentDirectory?.parent" name=".." @click="setCurrentDirectory(currentDirectory?.parent)" /> -->
|
||||
<miaoDirectoryItem v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" :item="dir" :key="dir.uid" />
|
||||
<miaoDirectoryItem v-for="(file) in currentDirectory?.files" :item="file" :key="file.uid" @click="openUrl(`${baseUrl}/get${file.path}`)" />
|
||||
</div>
|
||||
<div class="container-bottom">
|
||||
<div>
|
||||
fuck
|
||||
</div>
|
||||
</div>
|
||||
<miaoMask v-model:show="showModel"></miaoMask>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -20,53 +27,102 @@ import type { file, directory } from '@/types/type.ts'
|
||||
import VirtualDirectory from '@/class/virtualDirectory';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Config from '@/config'
|
||||
import dropHandler from '@/hooks/dropHandler';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'onTitleChange', title: string): void
|
||||
}>()
|
||||
import dropHandler, { dropHandlerHooks } from '@/hooks/dropHandler';
|
||||
import miaoMask from '@/components/miaoMask.vue';
|
||||
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue';
|
||||
import useMiaoFetch from '@/hooks/useMiaoFetch';
|
||||
import useDataBus from '@/hooks/useDataBus';
|
||||
|
||||
const { baseUrl } = Config
|
||||
const dataBus = useDataBus()
|
||||
|
||||
const rootDom = ref<HTMLDivElement>()
|
||||
|
||||
const rootDirectory = new VirtualDirectory({
|
||||
name: '根目录',
|
||||
stats: {
|
||||
atimeMs: 0,
|
||||
birthtimeMs: 0,
|
||||
ctimeMs: 0,
|
||||
mtimeMs: 0,
|
||||
}
|
||||
const miaoFetch = useMiaoFetch({
|
||||
retry: 5,
|
||||
})
|
||||
|
||||
const currentDirectory = ref<VirtualDirectory | undefined>(rootDirectory)
|
||||
// 目前展示的Dir
|
||||
const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
|
||||
|
||||
// 是否显示模态框
|
||||
const showModel = ref(0)
|
||||
|
||||
// 用于监听拖拽文件事件
|
||||
const rootDomRef = ref<HTMLDivElement>()
|
||||
|
||||
// 设置显示的dir
|
||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
||||
if (virtualDirectory.files === undefined && virtualDirectory.directorys === undefined) {
|
||||
const data: (file | directory)[] = await (await fetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
|
||||
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
|
||||
if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
|
||||
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
|
||||
virtualDirectory.setContent(data)
|
||||
} else {
|
||||
; (async () => {
|
||||
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
|
||||
virtualDirectory.setContent(data)
|
||||
currentDirectory.value = undefined
|
||||
currentDirectory.value = virtualDirectory
|
||||
})()
|
||||
}
|
||||
// 刷新一下
|
||||
currentDirectory.value = undefined
|
||||
currentDirectory.value = virtualDirectory
|
||||
emit("onTitleChange", currentDirectory.value.name)
|
||||
// emit("onCurrentDirectoryChange", currentDirectory.value)
|
||||
}
|
||||
|
||||
const openUrl = (href: string) => {
|
||||
var oA = document.createElement("a");
|
||||
oA.href = href;
|
||||
oA.target = "_blank";
|
||||
oA.click();
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await setCurrentDirectory(rootDirectory)
|
||||
rootDom.value && dropHandler(rootDom.value, {
|
||||
onDrop(files){
|
||||
console.log(files, files.map(v=>v.name))
|
||||
}
|
||||
})
|
||||
currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
|
||||
// 拖动事件处理
|
||||
const dropFileOption:dropHandlerHooks = {
|
||||
onDropFiles(files: File[]) {
|
||||
const dragData = dataBus.get('dragData')
|
||||
console.log({dragData, files})
|
||||
},
|
||||
onEnter() {
|
||||
showModel.value += 1
|
||||
},
|
||||
onEnd() {
|
||||
showModel.value -= 1
|
||||
},
|
||||
}
|
||||
rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
$top-height: 30px;
|
||||
$bottom-bar-height: 60px;
|
||||
|
||||
.miao-directory-item-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.container-top {
|
||||
height: $top-height;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.container-items {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.container-bottom {
|
||||
height: $bottom-bar-height;
|
||||
background-color: bisque;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user