重构VirtualPage，所有miaoDirectory以插件形式使用

src/class/virtualPage.ts

@@ -1,35 +1,50 @@
-import VirtualDirectory from "./VirtualDirectory";
+import { shallowRef } from "vue";
+import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
 import generateId from "@/hooks/generateId";
 
 const getRandomWebSafeColor = (() => {
 	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
-	let counter = 0
+	let counter = 0;
 	return () => {
-		const color = webSafeColors[counter % webSafeColors.length]
-		counter += 1
+		const color = webSafeColors[counter % webSafeColors.length];
+		counter += 1;
 		return color;
 	};
 })();
 
 export default class VirtualPage {
-	constructor(initDirectory: VirtualDirectory) {
+	constructor(component: any, initObjects: (VirtualDirectory | VirtualFile)[]) {
+		this.component = shallowRef(component);
+		this.currentObjects = initObjects;
+
 		this.visible = true;
 		this.uid = generateId();
-		this.currentDirectory = initDirectory;
 		this.refreshKey = Math.random();
 		this.color = getRandomWebSafeColor();
 	}
+	component: any;
+	// 是否可见
 	visible: boolean;
-	currentDirectory: VirtualDirectory;
+	// 当前正在使用的文件或是文件夹
+	currentObjects: (VirtualDirectory | VirtualFile)[];
 	// 区分每一个页面的唯一id
 	uid: number;
 	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
 	refreshKey: number;
-
+	// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
 	color: string;
+	// 用于展示的title
+	_title?: string;
 
 	get title() {
-		return this.currentDirectory.name;
+		if (this._title) {
+			return this._title;
+		}
+		return this.currentObjects[0].name;
+	}
+
+	setTitle(title: string) {
+		this._title = title;
 	}
 
 	// 切换显示状态
@@ -37,11 +52,6 @@ export default class VirtualPage {
 		this.visible = !this.visible;
 	}
 
-	// 设置（同步）正在展示的文件夹
-	setCurrrentDirectory(currDir: VirtualDirectory) {
-		this.currentDirectory = currDir;
-	}
-
 	// 刷新，不过好像没有用得到的时候吧
 	// 事实上也不应该用得到，因为更新应该是响应式的
 	refresh() {