v1.0.0

src/App.vue

@@ -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">
+		<div class="view" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
-			<miao-directory v-model:current-directory="view.currentDirectory"></miao-directory>
+			<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

@@ -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,37 +87,45 @@ 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 fileNames: string[] = this.files.map(v => v.name);
-		const dirNames:string[] = this.directorys.map(v=>v.name)
+		const dirNames: string[] = this.directorys.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){
+			while (index < target.length) {
-				if(!itemNames.includes(target[index].name)){
+				if (!itemNames.includes(target[index].name)) {
-					target.splice(index, 1)
+					target.splice(index, 1);
-				}else{
+				} else {
-					index += 1
+					index += 1;
 				}
 			}
-		}
+		};
-		_delete(this.files)
+		_delete(this.files);
-		_delete(this.directorys)
+		_delete(this.directorys);
 		// 加入新的文件与文件夹
 		for (let item of content) {
 			if (item.type === "file") {
-				if(!fileNames.includes(item.name)){
+				if (!fileNames.includes(item.name)) {
 					this.files.push(new VirtualFile(item, this));
 				}
 			} else if (item.type === "directory") {
-				if(!dirNames.includes(item.name)){
+				if (!dirNames.includes(item.name)) {
 					this.directorys.push(new VirtualDirectory(item, this));
 				}
 			}
 		}
 	}
+
+	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

@@ -1,22 +1,35 @@
 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.uid = generateId();
-		this.currentDirectory = initDirectory
+		this.currentDirectory = initDirectory;
-		this.refreshKey = Math.random()
+		this.refreshKey = Math.random();
+		this.color = getRandomWebSafeColor();
 	}
 	visible: boolean;
 	currentDirectory: VirtualDirectory;
 	// 区分每一个页面的唯一id
 	uid: number;
 	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
-	refreshKey:number;
+	refreshKey: number;
 
-	get title(){
+	color: string;
-		return this.currentDirectory.name
+
+	get title() {
+		return this.currentDirectory.name;
 	}
 
 	// 切换显示状态
@@ -26,11 +39,10 @@ export default class VirtualPage {
 
 	// 设置（同步）正在展示的文件夹
 	setCurrrentDirectory(currDir: VirtualDirectory) {
-		this.currentDirectory = currDir
+		this.currentDirectory = currDir;
 	}
 
-	refresh(){
+	refresh() {
-		this.refreshKey = Math.random()
+		this.refreshKey = Math.random();
 	}
-
 }

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -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

@@ -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

@@ -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

@@ -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",
+	baseUrl,
-	uploadSizeLimit: 1024 * 1024 * 100
+	uploadSizeLimit: 1024 * 1024 * 100,
+	api: {
+		get: '/get'
+	}
 };

src/views/miaoDirectory.vue

@@ -1,28 +1,55 @@
 <template>
 	<div class="miao-directory-item-container" ref="rootDomRef">
 		<div class="container-top">
-			<n-breadcrumb separator=">">
+			<div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
-				<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)">
+			<div class="container-top-breadcrumb">
-					{{ dir.name }}
+				<!-- <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">
+				<!-- </n-scrollbar> -->
-			<!-- <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 class="container-top-tools">
-            <div>
+				<n-icon class="container-top-tools-item" size="15" @click="handleBack">
-                fuck
+					<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()
+        const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
-        virtualDirectory.setContent(data)
+        virtualDirectory.updateContent(data)
     } else {
         ; (async () => {
-            const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}/get${virtualDirectory.path}`)).json()
+            const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
-            virtualDirectory.setContent(data)
+            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) => {
+const openUrl = (href: string, config?: {
-  var oA = document.createElement("a");
+    download?: string
-  oA.href = href;
+    target?: string
-  oA.target = "_blank";
+}) => {
-  oA.click();
+    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

@@ -1,13 +1,37 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
-import { resolve } from 'path'
+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"
+			}
+		}
+	}
+});