update

src/App.vue

@@ -1,52 +1,75 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue';
-import { NIcon } from 'naive-ui';
-import { EyeOffOutline, EyeOutline, CloseOutline, AddOutline } from '@vicons/ionicons5'
+import { NIcon, NScrollbar } from 'naive-ui';
+import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical } from '@vicons/ionicons5'
 import miaoDirectory from './views/miaoDirectory.vue';
 import VirtualPage from './class/virtualPage';
+import VirtualDirectory from './class/virtualDirectory';
 
 const views = reactive<VirtualPage[]>([])
 
-const createView = () => {
-  views.push(reactive<VirtualPage>(new VirtualPage()))
+const rootDirectory = new VirtualDirectory({
+  name: '根目录',
+  stats: {
+    atimeMs: 0,
+    birthtimeMs: 0,
+    ctimeMs: 0,
+    mtimeMs: 0,
+  }
+})
+
+const createView = (initDirectory: VirtualDirectory, index?: number) => {
+  index ?? (index = views.length)
+  console.log(initDirectory)
+  views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(initDirectory)))
 }
 
 const deleteView = (index: number) => {
   views.splice(index, 1)
-  if(views.length === 0){
-    createView()
+  if (views.length === 0) {
+    createView(rootDirectory)
   }
 }
 
 onMounted(() => {
-  createView()
+  createView(rootDirectory)
 })
+
+// todo: 让所有伪页面共享一个rootDirectory
 </script>
 
 <template>
 	<div class="view-controler">
-		<div class="tag" v-for="(view, index) of views" :key="view.uid">
-			<div class="tag-title">{{ view.title }}</div>
-			<div class="tag-control">
-				<n-icon class="tag-control-icon icon" @click="view.switchShow()">
-					<EyeOutline v-show="view.visible" class="icon-inner" />
-					<EyeOffOutline v-show="!view.visible" class="icon-inner" />
-				</n-icon>
-				<n-icon class="tag-control-icon icon" @click="deleteView(index)">
-					<CloseOutline class="icon-inner" />
+		<n-scrollbar x-scrollable>
+			<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-control">
+						<n-icon class="tag-control-icon icon" @click="view.switchShow()">
+							<EyeOutline v-show="view.visible" class="icon-inner" />
+							<EyeOffOutline v-show="!view.visible" class="icon-inner" />
+						</n-icon>
+						<n-icon class="tag-control-icon icon" @click="createView(view.currentDirectory, index + 1)">
+							<CopyOutline />
+						</n-icon>
+						<n-icon class="tag-control-icon icon" @click="deleteView(index)">
+							<CloseOutline class="icon-inner" />
+						</n-icon>
+					</div>
+				</div>
+			</div>
+		</n-scrollbar>
+		<div class="view-controler-menu">
+			<div class="view-controler-menu-item">
+				<n-icon class="icon" @click="">
+					<EllipsisVertical class="icon-inner" />
 				</n-icon>
 			</div>
 		</div>
-		<div class="tag-short">
-			<n-icon class="icon icon-larger" @click="createView()" size="20">
-				<AddOutline class="icon-inner" />
-			</n-icon>
-		</div>
 	</div>
 	<div class="view-container">
 		<div class="view" v-for="(view) of views" v-show="view.visible" :key="view.uid">
-			<!-- title: {{ view.title }} -->
-			<miao-directory @on-title-change="(_t) => view.setTitle(_t)"></miao-directory>
+			<miao-directory v-model:current-directory="view.currentDirectory"></miao-directory>
 		</div>
 	</div>
 </template>
@@ -58,53 +81,70 @@ $controler-height: 25px;
   display: flex;
   height: $controler-height;
   width: 100%;
-  overflow: hidden;
+  background-color: #f2f2f2;
+  // overflow: hidden;
 
-  .tag-short {
-    position: relative;
-    // margin-left: 5px;
-    height: $controler-height;
-    width:  $controler-height;
+  .tags-container {
     display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .tag {
-    position: relative;
-    width: 170px;
-    // flex: 1;
-    margin: 0 5px;
-    display: flex;
-    border-radius: 5px 5px 0 0;
-    align-items: center;
-
-    &::after {
-      content: '';
-      height: calc($controler-height*0.6);
-      width: 1px;
-      border-right: 1px solid black;
-      position: absolute;
-      right: 0px;
-    }
-
-    .tag-title {
-      margin-left: 4px;
-      width: 70%;
-      user-select: none;
-    }
-
-    .tag-control {
-      position: absolute;
-      right: 10px;
+    margin-left: 5px;
+    flex: 1;
+    // overflow-x: scroll;
+    .tag {
+      position: relative;
+      width: 170px;
+      margin: 0 5px;
+      // flex: 1;
       display: flex;
+      border-radius: 5px 5px 0 0;
       align-items: center;
 
-
-
-      .tag-control-icon:not(:last-child) {
-        margin-right: 5px;
+      .tag-title {
+        margin-left: 4px;
+        width: 70%;
+        user-select: none;
       }
+
+      .tag-control {
+        position: absolute;
+        right: 10px;
+        display: flex;
+        align-items: center;
+
+        .tag-control-icon:not(:last-child) {
+          margin-right: 5px;
+        }
+      }
+
+      &:not(:last-child)::after {
+        content: '';
+        height: calc($controler-height*0.6);
+        width: 1px;
+        border-right: 1px solid black;
+        position: absolute;
+        right: 0px;
+      }
+    }
+  }
+
+  .view-controler-menu {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    .view-controler-menu-item {
+      height: 100%;
+      aspect-ratio: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &::before {
+        content: '';
+        height: calc($controler-height*0.6);
+        width: 1px;
+        border-right: 1px solid black;
+        position: absolute;
+        left: 2px;
     }
   }
 
@@ -123,23 +163,40 @@ $controler-height: 25px;
       background-color: rgba(128, 128, 128, 0.4);
     }
   }
-
-  .icon-larger {
-    height: calc($controler-height * 0.85);
-    width: calc($controler-height * 0.85);
-  }
 }
 
 .view-container {
   position: relative;
   display: flex;
+  // flex-direction: column;
   height: calc(100% - $controler-height);
+  overflow-y: overlay;
+  overflow-x: overlay;
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 4px;
+  }
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    // background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    // border-radius: 5px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: #999999;
+  }
 
   .view {
-    border: 1px solid black;
-    margin: 0 5px;
-    padding: 3px;
+    // border: 1px solid black;
+    // outline: 1px solid black;
+    // margin: 0 5px;
+    // padding: 3px;
     flex: 1;
+    height: 100%;
   }
 }
 </style>

src/class/virtualDirectory.ts

@@ -1,18 +1,21 @@
+import generateId from "@/hooks/generateId";
 import type { stats, file, directory } from "@/types/type.ts";
 
-class VirtualFile {
+export class VirtualFile {
 	constructor(info: file, parent: VirtualDirectory) {
 		this.name = info.name;
 		this.size = info.size;
 		this.stats = info.stats;
 		this.parent = parent;
 		this.type = "file";
+		this.uid = generateId()
 	}
 	name: string;
 	type: "file";
 	size: number;
 	stats: stats;
 	parent: VirtualDirectory;
+	uid: number
 	get path() {
 		return `${this.parent.path}${this.name}`;
 	}
@@ -24,7 +27,7 @@ class VirtualDirectory {
 		this.type = "directory";
 		this.stats = info.stats;
 		this.parent = parent ?? undefined;
-		// 这里要改
+		this.uid = generateId()
 	}
 	// 文件夹名
 	name: string;
@@ -39,6 +42,8 @@ class VirtualDirectory {
 	// 父文件夹
 	parent?: VirtualDirectory;
 
+	uid: number
+
 	/**
 	 * 获取相对于根目录的路径的层数
 	 * 用于目录下文件定位
@@ -83,13 +88,34 @@ class VirtualDirectory {
 	}
 
 	setContent(content: (file | directory)[]) {
-		this.files = [];
-		this.directorys = [];
+		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 _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
+			let index = 0
+			while(index < target.length){
+				if(!itemNames.includes(target[index].name)){
+					target.splice(index, 1)
+				}else{
+					index += 1
+				}
+			}
+		}
+		_delete(this.files)
+		_delete(this.directorys)
+		// 加入新的文件与文件夹
 		for (let item of content) {
 			if (item.type === "file") {
-				this.files.push(new VirtualFile(item, this));
+				if(!fileNames.includes(item.name)){
+					this.files.push(new VirtualFile(item, this));
+				}
 			} else if (item.type === "directory") {
-				this.directorys.push(new VirtualDirectory(item, this));
+				if(!dirNames.includes(item.name)){
+					this.directorys.push(new VirtualDirectory(item, this));
+				}
 			}
 		}
 	}

src/class/virtualPage.ts

@@ -1,22 +1,36 @@
-import { ref, Ref } from "vue";
+import VirtualDirectory from "./virtualDirectory";
+import generateId from "@/hooks/generateId";
 
 export default class VirtualPage {
-	constructor() {
-		this.visible = ref<boolean>(true);
-		this.title = ref<string>("");
-		this.uid = Math.ceil(Math.random() * 10000000000000);
+	constructor(initDirectory: VirtualDirectory) {
+		this.visible = true;
+		this.uid = generateId()
+		this.currentDirectory = initDirectory
+		this.refreshKey = Math.random()
 	}
-	visible: Ref<boolean>;
-	title: Ref<string>;
+	visible: boolean;
+	currentDirectory: VirtualDirectory;
+	// 区分每一个页面的唯一id
 	uid: number;
+	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
+	refreshKey:number;
 
+	get title(){
+		return this.currentDirectory.name
+	}
+
+	// 切换显示状态
 	switchShow() {
-		// @ts-ignore 你只要知道这是对的就行了
 		this.visible = !this.visible;
 	}
 	
-	setTitle(newTitle: string) {
-		// @ts-ignore 你只要知道这是对的就行了
-		this.title = newTitle;
+	// 设置（同步）正在展示的文件夹
+	setCurrrentDirectory(currDir: VirtualDirectory) {
+		this.currentDirectory = currDir
 	}
+
+	refresh(){
+		this.refreshKey = Math.random()
+	}
+
 }

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -0,0 +1,121 @@
+<template>
+	<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+		<div class="item-main">
+			<Icon class="item-main-icon"></Icon>
+			<div class="item-main-info">
+				<div class="item-main-info-name">
+					{{ name }}
+				</div>
+				<div class="item-main-info-date" v-if="time">
+					{{ time }}
+				</div>
+			</div>
+		</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 { computed, ref } from 'vue';
+import dateFormatter from '@/hooks/dateFormatter';
+import useDataBus from '@/hooks/useDataBus';
+
+const dataBus = useDataBus()
+
+const props = defineProps<{
+  item: VirtualDirectory | VirtualFile
+  name?: string
+}>()
+
+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 Icon = computed(()=>{
+    try{
+        if(props.item.type === 'directory') {
+            return FileTray
+        } else if(props.item.type === 'file') {
+            const aft = props.item.name.split('.').at(-1)?.toLowerCase()
+            if(!aft){
+                throw(1)
+            }else if(['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)){
+                return DocumentText
+            }else if(['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)){
+                return MusicalNotes
+            }else if(['.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif'].includes(aft)){
+                return Images
+            }else if(['mp4', 'm2v', 'mkv'].includes(aft)){
+                return PlayCircle
+            }else if(['js', 'jsx', 'ts', 'tsx'].includes(aft)){
+                return LogoJavascript
+            }else if(['html'].includes(aft)){
+                return LogoChrome
+            }else if(['css', 'scss', 'less'].includes(aft)){
+                return LogoCss3
+            }else if(['vue'].includes(aft)){
+                return LogoVue
+            }
+            return DocumentText
+        }
+    }catch{
+        return Help
+    }
+})
+
+const itemRef = ref()
+
+const handleDragStart = () => {
+    dataBus.set('dragData', props.item)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.miao-item {
+    cursor: pointer;
+    width: 100%;
+    min-width: 250px;
+    // aspect-ratio: 66/9;
+    height: 50px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 0;
+    .item-main {
+        position: relative;
+        width: calc(100% - 15px);
+        height: 95%;
+        background-color: rgb(255, 255, 255);
+        border-radius: 7px;
+        display: flex;
+        align-items: center;
+        transition: background-color 0.3s;
+        .item-main-icon {
+            margin-left: 10px;
+            height: 80%;
+        }
+        .item-main-info {
+            margin-left: 5px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            &-name {
+                user-select: none;
+            }
+            &-date {
+                user-select: none;
+                font-size: small;
+            }
+        }
+        &:hover, &:active {
+            background-color: #d2d2d2;
+        }
+        
+    }
+}
+</style>

src/components/miaoDirectory/miaoHeader.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="miao-directory-item-container">
+        
+    </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped></style>

src/components/miaoHeader.vue

@@ -1,10 +0,0 @@
-<template>
-    <div class="container">
-        
-    </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss" scoped></style>

src/components/miaoMask.vue

@@ -0,0 +1,47 @@
+<template>
+	<transition name="transition">
+		<div class="mask-body" ref="maskBodyRef" v-show="showMask">
+			<slot> {{}} </slot>
+		</div>
+	</transition>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const maskBodyRef = ref<HTMLDivElement>()
+
+const showMask = defineModel<boolean | number>('show', { default: false, required: true })
+
+</script>
+<style lang="scss" scoped>
+.mask-body {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top:0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    &-show {
+        display: flex;
+        transition: opacity 0.3s 0.01s;
+        opacity: 1;
+    }
+    &-hide {
+        opacity: 0;
+        transition: display 0.01s 0.3s;
+        display: none;
+    }
+}
+.transition-enter-active,
+.transition-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.transition-enter-from,
+.transition-leave-to {
+  opacity: 0;
+}
+</style>

src/hooks/dateFormatter.ts

@@ -0,0 +1,20 @@
+export default function dateFormatter(date: Date, fmt: string) {
+	var o:any = {
+		"M+": date.getMonth() + 1, //月份
+		"d+": date.getDate(), //日
+		"h+": date.getHours(), //小时
+		"m+": date.getMinutes(), //分
+		"s+": date.getSeconds(), //秒
+		"q+": Math.floor((date.getMonth() + 3) / 3), //季度
+		"S": date.getMilliseconds() //毫秒
+	};
+	if (/(y+)/.test(fmt)) {
+		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+	}
+	for (var k in o) {
+		if (new RegExp("(" + k + ")").test(fmt)) {
+			fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ?  o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+		}
+	}
+	return fmt;
+}

src/hooks/dropHandler.ts

@@ -2,14 +2,30 @@ import config from "@/config";
 
 const { uploadSizeLimit } = config;
 
-type dropHandlerHooks = {
-	onDrop?: (files: File[]) => void;
-	onEnter?: () => void;
+export type dropHandlerHooks = {
+	/**
+	 * 仅返回小于config.ts中大小限制的文件，不会返回文件夹
+	 */
+	onDropFiles?: (files: File[]) => void;
 	/**
 	 * 当拖动时
 	 */
 	onOver?: () => void;
+	/**
+	 * 当进入时
+	 */
+	onEnter?: () => void;
+
+	/**
+	 * 当离开时
+	 */
 	onLeave?: () => void;
+
+	/**
+	 * 离开或是放下时都会触发
+	 * @returns {any}
+	 */
+	onEnd?: () => void;
 };
 
 const isFile = (file: File) =>
@@ -26,7 +42,6 @@ const isFile = (file: File) =>
 		reader.readAsText(file);
 	});
 
-
 /**
  * 只保留文件，移去文件夹
  * @param {File[]} files
@@ -36,7 +51,6 @@ const filesFilter = async (files: File[]) => {
 	while (index < files.length) {
 		const currentFile = files[index];
 		const _isFile = await isFile(currentFile);
-		console.log(_isFile);
 		if (_isFile) {
 			index += 1;
 			continue;
@@ -48,7 +62,6 @@ const filesFilter = async (files: File[]) => {
 };
 
 export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
-	console.log(dom);
 	dom.addEventListener(
 		"dragenter",
 		function (e) {
@@ -75,6 +88,7 @@ export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHook
 			e.preventDefault();
 			e.stopPropagation();
 			hooks?.onLeave && hooks?.onLeave();
+			hooks?.onEnd && hooks.onEnd();
 		},
 		false
 	);
@@ -87,7 +101,8 @@ export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHook
 			e.stopPropagation();
 			const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
 			await filesFilter(files);
-			hooks?.onDrop && hooks.onDrop(files);
+			hooks?.onDropFiles && hooks.onDropFiles(files);
+			hooks?.onEnd && hooks.onEnd();
 		},
 		false
 	);

src/hooks/generateId.ts

@@ -0,0 +1,16 @@
+const idList: number[] = [];
+
+/**
+ * 生成一个唯一的id
+ * @param {any} length 生成id的长度
+ * @returns {number}
+ */
+export default function generateId(length?: number) {
+	length || (length = 16);
+	let id;
+	while (!id || idList.includes(id)) {
+		id = Math.ceil(Math.random() * 10 ** 16);
+	}
+	idList.push(id)
+    return id
+}

src/hooks/useDataBus.ts

@@ -0,0 +1,15 @@
+const dataStorage: any = {};
+
+export default function useDataBus() {
+	return {
+		set(key: string | number, value: any) {
+			dataStorage[key] = value;
+			return value;
+		},
+		get(key: string | number) {
+			const value = dataStorage[key];
+			dataStorage[key] = undefined;
+			return value;
+		}
+	};
+}

src/hooks/useMiaoFetch.ts

@@ -0,0 +1,22 @@
+type miaoFetchConfig = {
+	retry: number;
+};
+
+export default function useMiaoFetch(config: miaoFetchConfig) {
+	const { retry } = config;
+
+	return async (input: RequestInfo | URL, init?: RequestInit) => {
+		let retryTimes = 0;
+		let err: any;
+		while (retryTimes <= retry) {
+			try {
+				const response = await fetch(input, init);
+				return response;
+			} catch (e) {
+				err = e;
+				retryTimes += 1;
+			}
+		}
+		throw err;
+	};
+}

src/views/miaoDirectory.vue

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