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
+323 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.vue
+16 -12
View File
@@ -44,6 +44,7 @@ onMounted(() => {
<div class="tags-container">
<div class="tag" v-for="(view, index) of views" :key="view.uid">
<div class="tag-title">{{ view.title }}</div>
<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
<div class="tag-control">
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
<EyeOutline v-show="view.visible" class="icon-inner" />
@@ -68,8 +69,8 @@ onMounted(() => {
</div>
</div>
<div class="view-container">
<div class="view" v-for="(view) of views" v-show="view.visible" :key="view.uid">
<miao-directory v-model:current-directory="view.currentDirectory"></miao-directory>
<div class="view" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
</div>
</div>
</template>
@@ -81,7 +82,7 @@ $controler-height: 25px;
display: flex;
height: $controler-height;
width: 100%;
background-color: #f2f2f2;
background-color: #dadada;
// overflow: hidden;
.tags-container {
@@ -100,10 +101,17 @@ $controler-height: 25px;
.tag-title {
margin-left: 4px;
width: 70%;
// width: 70%;
user-select: none;
}
.tag-point {
height: 5px;
aspect-ratio: 1;
border-radius: 66px;
margin-left: 5px;
}
.tag-control {
position: absolute;
right: 10px;
@@ -172,6 +180,10 @@ $controler-height: 25px;
height: calc(100% - $controler-height);
overflow-y: overlay;
overflow-x: overlay;
.view {
flex: 1;
height: 100%;
}
&::-webkit-scrollbar {
position: absolute;
width: 4px;
@@ -190,13 +202,5 @@ $controler-height: 25px;
background: #999999;
}
.view {
// border: 1px solid black;
// outline: 1px solid black;
// margin: 0 5px;
// padding: 3px;
flex: 1;
height: 100%;
}
}
</style>
src/class/virtualDirectory.ts
+22 -14
View File
@@ -8,14 +8,14 @@ export class VirtualFile {
this.stats = info.stats;
this.parent = parent;
this.type = "file";
this.uid = generateId()
this.uid = generateId();
}
name: string;
type: "file";
size: number;
stats: stats;
parent: VirtualDirectory;
uid: number
uid: number;
get path() {
return `${this.parent.path}${this.name}`;
}
@@ -27,7 +27,7 @@ class VirtualDirectory {
this.type = "directory";
this.stats = info.stats;
this.parent = parent ?? undefined;
this.uid = generateId()
this.uid = generateId();
}
// 文件夹名
name: string;
@@ -42,7 +42,7 @@ class VirtualDirectory {
// 父文件夹
parent?: VirtualDirectory;
uid: number
uid: number;
/**
* 获取相对于根目录的路径的层数
@@ -87,25 +87,25 @@ class VirtualDirectory {
return this.parent.getParent(layer - 1);
}
setContent(content: (file | directory)[]) {
updateContent(content: (file | directory)[]) {
this.files = this.files ?? [];
this.directorys = this.directorys ?? [];
const fileNames:string[] = this.files.map(v=>v.name)
const dirNames:string[] = this.directorys.map(v=>v.name)
const itemNames:string[] = content.map(v=>v.name)
const fileNames: string[] = this.files.map(v => v.name);
const dirNames: string[] = this.directorys.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.directorys)
};
_delete(this.files);
_delete(this.directorys);
// 加入新的文件与文件夹
for (let item of content) {
if (item.type === "file") {
@@ -119,5 +119,13 @@ class VirtualDirectory {
}
}
}
hasChild(item: VirtualDirectory | VirtualFile): boolean {
if (item.type === "directory") {
return this.directorys?.includes(item) ?? false;
} else {
return this.files?.includes(item) ?? false;
}
}
}
export default VirtualDirectory;
src/class/virtualPage.ts
+19 -7
View File
@@ -1,12 +1,23 @@
import VirtualDirectory from "./virtualDirectory";
import generateId from "@/hooks/generateId";
const getRandomWebSafeColor = (() => {
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
let counter = 0
return () => {
const color = webSafeColors[counter % webSafeColors.length]
counter += 1
return color;
};
})();
export default class VirtualPage {
constructor(initDirectory: VirtualDirectory) {
this.visible = true;
this.uid = generateId()
this.currentDirectory = initDirectory
this.refreshKey = Math.random()
this.uid = generateId();
this.currentDirectory = initDirectory;
this.refreshKey = Math.random();
this.color = getRandomWebSafeColor();
}
visible: boolean;
currentDirectory: VirtualDirectory;
@@ -15,8 +26,10 @@ export default class VirtualPage {
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
refreshKey: number;
color: string;
get title() {
return this.currentDirectory.name
return this.currentDirectory.name;
}
// 切换显示状态
@@ -26,11 +39,10 @@ export default class VirtualPage {
// 设置（同步）正在展示的文件夹
setCurrrentDirectory(currDir: VirtualDirectory) {
this.currentDirectory = currDir
this.currentDirectory = currDir;
}
refresh() {
this.refreshKey = Math.random()
this.refreshKey = Math.random();
}
}
src/components/miaoDirectory/miaoDirectoryItem.vue
+70 -9
View File
@@ -1,6 +1,7 @@
<template>
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
<div class="item-main">
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
<Icon class="item-main-icon"></Icon>
<div class="item-main-info">
<div class="item-main-info-name">
@@ -10,30 +11,61 @@
{{ time }}
</div>
</div>
<n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
<div class="item-main-option" @click="e=>e.stopPropagation()">
<EllipsisVertical class="item-main-option-icon" />
</div>
</n-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/virtualDirectory';
import { DocumentText, FileTray, Help, Images, LogoChrome, LogoCss3, LogoJavascript, LogoVue, MusicalNotes, PlayCircle } from '@vicons/ionicons5';
import { DocumentText, FileTray, Help, Image, LogoChrome, LogoCss3, LogoJavascript, LogoVue, PlayCircle, EllipsisVertical, Disc } from '@vicons/ionicons5';
import { computed, ref } from 'vue';
import dateFormatter from '@/hooks/dateFormatter';
import useDataBus from '@/hooks/useDataBus';
import { NDropdown } from 'naive-ui';
const dataBus = useDataBus()
const emit = defineEmits<{
download: []
}>()
const props = defineProps<{
item: VirtualDirectory | VirtualFile
name?: string
color:string
}>()
const itemType = ref<'file' | 'directory'>(props.item.type)
const name = props.name ?? props.item.name
const time = computed(()=>{
return dateFormatter(new Date(props.item.stats.mtimeMs), "yyyy-MM-dd hh:mm:ss");
})
const dropDownOptions = computed(()=> {
const options = []
if(itemType.value === 'file'){
options.push(...[{
label: '下载',
key: 'download',
}
])
}
return options
})
const handleDropdownSelect = (key: 'download') => {
console.log(key)
emit(key)
}
const Icon = computed(()=>{
try{
if(props.item.type === 'directory') {
@@ -45,9 +77,9 @@ const Icon = computed(()=>{
}else if(['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)){
return DocumentText
}else if(['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)){
return MusicalNotes
return Disc
}else if(['.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif'].includes(aft)){
return Images
return Image
}else if(['mp4', 'm2v', 'mkv'].includes(aft)){
return PlayCircle
}else if(['js', 'jsx', 'ts', 'tsx'].includes(aft)){
@@ -69,15 +101,14 @@ const Icon = computed(()=>{
const itemRef = ref()
const handleDragStart = () => {
dataBus.set('dragData', props.item)
dataBus.set('dragData', [ props.item ])
}
</script>
<style lang="scss" scoped>
.miao-item {
cursor: pointer;
width: 100%;
width: calc(100% - 16px);
min-width: 250px;
// aspect-ratio: 66/9;
height: 50px;
@@ -85,22 +116,28 @@ const handleDragStart = () => {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
margin: 10px 8px;
.item-main {
position: relative;
width: calc(100% - 15px);
width: 100%;
height: 95%;
background-color: rgb(255, 255, 255);
border-radius: 7px;
display: flex;
align-items: center;
transition: background-color 0.3s;
.item-main-front {
height: 100%;
width: 10px;
border-radius: 7px 0 0 7px ;
background-color: rgb(0, 0, 0);
}
.item-main-icon {
margin-left: 10px;
height: 80%;
}
.item-main-info {
margin-left: 5px;
margin-left: 10px;
height: 100%;
display: flex;
flex-direction: column;
@@ -112,6 +149,30 @@ const handleDragStart = () => {
font-size: small;
}
}
.item-main-option {
height: 100%;
width: 20px;
position: absolute;
right: 0;
border-radius: 0 7px 7px 0;
background-color: rgba(0, 0, 0, 0);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
.item-main-option-icon {
color: #000;
transition: color 0.15s;
}
&:hover, &:active {
background-color: #8b8b8b;
.item-main-option-icon {
color: #FFF;
}
}
}
&:hover, &:active {
background-color: #d2d2d2;
}
src/components/miaoDirectory/miaoHeader.vue
-10
View File
@@ -1,10 +0,0 @@
<template>
<div class="miao-directory-item-container">
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped></style>
src/components/miaoMask.vue
+1
View File
@@ -24,6 +24,7 @@ const showMask = defineModel<boolean | number>('show', { default: false, require
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
z-index: 7058214053994319;
&-show {
display: flex;
transition: opacity 0.3s 0.01s;
src/config.ts
+7 -2
View File
@@ -1,4 +1,9 @@
const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
export default {
baseUrl: "http://127.0.0.1:17705",
uploadSizeLimit: 1024 * 1024 * 100
baseUrl,
uploadSizeLimit: 1024 * 1024 * 100,
api: {
get: '/get'
}
};
src/views/miaoDirectory.vue
+159 -25
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 }}
<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>
<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}`)" />
<!-- </n-scrollbar> -->
</div>
<div class="container-bottom">
<div>
fuck
<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 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" :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>
vite.config.ts
+29 -5
View File
@@ -1,13 +1,37 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
"@": resolve(__dirname, "src")
}
},
server: {
proxy: {
"/get": {
target: "http://127.0.0.1:17705",
changeOrigin: true,
rewrite: path => path.replace(/^\/get/, "/get")
}
}
})
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html")
},
output: {
// 配置输出为单文件
inlineDynamicImports: true,
manualChunks: undefined,
entryFileNames: "bundle.js",
format: "iife", // 立即执行函数格式
name: "MyBundle"
}
}
}
});