299 lines
9.5 KiB
Vue
299 lines
9.5 KiB
Vue
<template>
|
|
<div class="miao-directory-item-container" ref="rootDomRef">
|
|
<div class="container-top" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
|
|
<div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
|
|
<div class="container-top-breadcrumb">
|
|
<!-- <n-scrollbar x-scrollable> -->
|
|
<div class="container-top-breadcrumb-container">
|
|
<n-breadcrumb separator=">" style="margin-left: 5px;">
|
|
<n-breadcrumb-item :clickable="false">
|
|
<n-icon size="18">
|
|
<CloudOutline />
|
|
</n-icon>
|
|
</n-breadcrumb-item>
|
|
<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)" :clickable="true">
|
|
<div>{{ dir.name }}</div>
|
|
</n-breadcrumb-item>
|
|
</n-breadcrumb>
|
|
</div>
|
|
<!-- </n-scrollbar> -->
|
|
</div>
|
|
<div class="container-top-tools">
|
|
<n-icon class="container-top-tools-item" size="15" @click="handleBack">
|
|
<ChevronBackOutline />
|
|
</n-icon>
|
|
<n-icon class="container-top-tools-item" size="14" @click="handleReload">
|
|
<ReloadOutline class="container-top-tools-item-reload" />
|
|
</n-icon>
|
|
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
|
|
<CloseOutline />
|
|
</n-icon>
|
|
</div>
|
|
</div>
|
|
<div class="container-items" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
|
|
<n-scrollbar>
|
|
<miaoDirectoryItem
|
|
v-for="(dir) in showData_directory"
|
|
@click="setCurrentDirectory(dir)"
|
|
:item="dir"
|
|
:key="dir.uid"
|
|
:color="props.color"
|
|
@delete="handleItemDelete(dir)"
|
|
/>
|
|
<miaoDirectoryItem
|
|
v-for="(file) in showData_files"
|
|
:item="file"
|
|
:key="file.uid"
|
|
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
|
|
@download="openUrl(`${baseUrl}${api.get}${file.path}`, {download: file.name})"
|
|
@delete="handleItemDelete(file)"
|
|
:color="props.color"
|
|
/>
|
|
</n-scrollbar>
|
|
</div>
|
|
<div class="container-bottom" :style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
|
|
<miaoMask v-model:show="showModel"></miaoMask>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
|
import type { file, directory } from '@/types/type.ts'
|
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import Config from '@/config'
|
|
import dropHandler, { dropHandlerHooks } from '@/hooks/dropHandler';
|
|
import miaoMask from '@/components/miaoMask.vue';
|
|
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue';
|
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
|
|
import useDataBus from '@/hooks/useDataBus';
|
|
import { CloudOutline, ChevronBackOutline, ReloadOutline, CloseOutline } from '@vicons/ionicons5'
|
|
import useUploadQueue from '@/hooks/useUploadQueue';
|
|
|
|
const { baseUrl, api } = Config
|
|
const dataBus = useDataBus()
|
|
|
|
const miaoFetchApi = useMiaoFetchApi()
|
|
|
|
const props = defineProps<{
|
|
color: string
|
|
index: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
exit: []
|
|
}>()
|
|
// 是否显示模态框
|
|
const showModel = ref(0)
|
|
|
|
// 目前展示的Dir
|
|
const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
|
|
|
|
// 用于展示的数据，后续会增加排序等操作
|
|
const showData_directory = computed<VirtualDirectory[]>(() => {
|
|
const data = currentDirectory.value?.directorys ? [...currentDirectory.value?.directorys ] : []
|
|
return data
|
|
})
|
|
const showData_files = computed<VirtualFile[]>(() => {
|
|
const data = currentDirectory.value?.files ? [...currentDirectory.value?.files ] : []
|
|
return data
|
|
})
|
|
|
|
// 用于监听拖拽文件事件
|
|
const rootDomRef = ref<HTMLDivElement>()
|
|
|
|
const uploadQueue = useUploadQueue()
|
|
|
|
// 设置显示的dir
|
|
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
|
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
|
|
if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
|
|
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory)
|
|
virtualDirectory.updateContent(data)
|
|
} else {
|
|
; (async () => {
|
|
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory)
|
|
virtualDirectory.updateContent(data)
|
|
currentDirectory.value = undefined
|
|
currentDirectory.value = virtualDirectory
|
|
})()
|
|
}
|
|
// 刷新一下
|
|
currentDirectory.value = undefined
|
|
currentDirectory.value = virtualDirectory
|
|
// emit("onCurrentDirectoryChange", currentDirectory.value)
|
|
}
|
|
|
|
const reload = () => {
|
|
currentDirectory.value && setCurrentDirectory(currentDirectory.value)
|
|
}
|
|
|
|
const openUrl = (href: string, config?: {
|
|
download?: string
|
|
target?: string
|
|
}) => {
|
|
let {target, download} = config ?? {}
|
|
|
|
console.log({target, download, href})
|
|
const a = document.createElement('a');
|
|
a.setAttribute('href', href);
|
|
a.setAttribute('target', target ?? '_blank')
|
|
download && a.setAttribute('download', download);
|
|
a.click();
|
|
}
|
|
|
|
const handleBack = () => {
|
|
if(currentDirectory.value?.parent){
|
|
setCurrentDirectory(currentDirectory.value.parent)
|
|
}
|
|
}
|
|
|
|
const handleReload = () => {
|
|
reload()
|
|
}
|
|
|
|
const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
|
|
const {response} = miaoFetchApi.delete(item)
|
|
// todo: 将删除事件统一用一个事件管理中心管理
|
|
const id = (await response).eventId
|
|
const {response : res} = miaoFetchApi.query(id)
|
|
const eventResult = await res
|
|
if(eventResult.status === 'success'){
|
|
reload()
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
|
|
// 拖动事件处理
|
|
const dropFileOption:dropHandlerHooks = {
|
|
onDropFiles(files: File[]) {
|
|
const dragData = dataBus.pop('dragData')
|
|
console.log({dragData, files})
|
|
if(files && files.length > 0){
|
|
currentDirectory.value && uploadQueue.push(files, currentDirectory.value, {
|
|
onFinish() {
|
|
reload()
|
|
},
|
|
})
|
|
const _f = files[0]
|
|
currentDirectory.value && miaoFetchApi.upload(_f, currentDirectory.value)
|
|
}
|
|
},
|
|
onEnter() {
|
|
showModel.value += 1
|
|
},
|
|
onEnd() {
|
|
showModel.value -= 1
|
|
},
|
|
}
|
|
rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$top-height: 30px;
|
|
$bottom-bar-height: 60px;
|
|
|
|
.miao-directory-item-container {
|
|
position: relative;
|
|
height: 100%;
|
|
width: inherit;
|
|
min-width: 266px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
.container-top {
|
|
height: $top-height;
|
|
width: 100%;
|
|
user-select: none;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
background-color: #f1f1f1;
|
|
.container-top-colorbar {
|
|
height: 70%;
|
|
width: 5px;
|
|
margin-left: 10px;
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
.container-top-breadcrumb {
|
|
position: relative;
|
|
height: 70%;
|
|
width: calc(100% - 95px);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
// overflow: hidden;
|
|
overflow-y: hidden;
|
|
overflow-x: hidden;
|
|
background-color: #ffffff;
|
|
padding: 0 5px;
|
|
border-radius: 0 3px 3px 0;
|
|
.container-top-breadcrumb-container {
|
|
position: absolute;
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
min-width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.container-top-tools {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 70px;
|
|
padding: 0 5px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.container-top-tools-item {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #ffffff00;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s;
|
|
cursor: pointer;
|
|
.container-top-tools-item-reload {
|
|
transition: transform 0.6s ease-in-out;
|
|
}
|
|
&:hover {
|
|
background-color: rgba(128,128,128,0.4);
|
|
}
|
|
&:active .container-top-tools-item-reload {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
&::after {
|
|
content: '';
|
|
height: 60%;
|
|
position: absolute;
|
|
right: -2px;
|
|
width: 2px;
|
|
background-color: #828282;
|
|
}
|
|
}
|
|
}
|
|
.container-items {
|
|
width: 100%;
|
|
height: calc(100% - $top-height - $bottom-bar-height);
|
|
}
|
|
.container-bottom {
|
|
height: $bottom-bar-height;
|
|
background-color: bisque;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
user-select: none;
|
|
box-shadow: 0px 1px 10px #888888;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
</style>
|