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

v1.0.0

Browse Source
This commit is contained in:
539943419 committed 2024-08-11 01:00:49 +08:00
1 parent a668b3b840
commit 1d4feb471c
9 files changed
+342 -103
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/miaoDirectory.vue
+163 -29
View File
@@ -1,28 +1,55 @@
<template>
<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 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">
<!-- <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 class="container-items" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
<n-scrollbar>
<miaoDirectoryItem v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" :item="dir" :key="dir.uid" :color="props.color" />
<miaoDirectoryItem
v-for="(file) in currentDirectory?.files"
:item="file"
:key="file.uid"
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
@download="openUrl(`${baseUrl}${api.get}${file.path}`, {download: file.name})"
:color="props.color"
/>
</n-scrollbar>
</div>
<div class="container-bottom">
<div>
fuck
</div>
</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 } from 'naive-ui'
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
import type { file, directory } from '@/types/type.ts'
import VirtualDirectory from '@/class/virtualDirectory';
import { onMounted, ref } from 'vue';
@@ -32,14 +59,24 @@ import miaoMask from '@/components/miaoMask.vue';
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue';
import useMiaoFetch from '@/hooks/useMiaoFetch';
import useDataBus from '@/hooks/useDataBus';
import { CloudOutline, ChevronBackOutline, ReloadOutline, CloseOutline } from '@vicons/ionicons5'
const { baseUrl } = Config
const { baseUrl, api } = Config
const dataBus = useDataBus()
const miaoFetch = useMiaoFetch({
retry: 5,
})
const props = defineProps<{
color: string
index: number
}>()
const emit = defineEmits<{
exit: []
}>()
// 目前展示的Dir
const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
@@ -53,12 +90,12 @@ const rootDomRef = ref<HTMLDivElement>()
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
virtualDirectory.setContent(data)
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
virtualDirectory.updateContent(data)
} else {
; (async () => {
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
virtualDirectory.setContent(data)
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
virtualDirectory.updateContent(data)
currentDirectory.value = undefined
currentDirectory.value = virtualDirectory
})()
@@ -69,11 +106,34 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// emit("onCurrentDirectoryChange", currentDirectory.value)
}
const openUrl = (href: string) => {
var oA = document.createElement("a");
oA.href = href;
oA.target = "_blank";
oA.click();
const openUrl = (href: string, config?: {
download?: string
target?: string
}) => {
let {target, download} = config ?? {}
console.log({target, download})
const a = document.createElement('a');
a.setAttribute('href', href);
a.setAttribute('target', target ?? '_blank')
a.setAttribute('download', download ?? '');
a.click();
// var a = document.createElement("a");
// a.setAttribute('href', href)
// a.setAttribute('target', target ?? '_blank')
// a.setAttribute('download', download ?? '')
// console.log({target, download})
// a.click();
}
const handleBack = () => {
if(currentDirectory.value?.parent){
setCurrentDirectory(currentDirectory.value.parent)
}
}
const handleReload = () => {
currentDirectory.value && setCurrentDirectory(currentDirectory.value)
}
onMounted(async () => {
@@ -102,19 +162,91 @@ $bottom-bar-height: 60px;
.miao-directory-item-container {
position: relative;
height: 100%;
width: 100%;
width: inherit;
min-width: 266px;
display: flex;
flex-direction: column;
overflow: hidden;
.container-top {
height: $top-height;
width: 100%;
user-select: none;
margin-bottom: 5px;
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: -1px;
width: 2px;
background-color: #828282;
}
}
}
.container-items {
flex: 1;
width: 100%;
background-color: #f8f8f8;
height: calc(100% - $top-height - $bottom-bar-height);
}
.container-bottom {
height: $bottom-bar-height;
@@ -123,6 +255,8 @@ $bottom-bar-height: 60px;
justify-content: center;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
}
}
</style>