feat: 1.新增视频播放插件。2.新增插件中心

src/class/PluginCenter.ts

@@ -0,0 +1,60 @@
+import useViretualPages from "@/hooks/useVirtualPages"
+import VirtualDirectory, { VirtualFile } from "./VirtualDirectory"
+
+type plugin = {
+    // 用于显示的名字
+    name: string
+    // 判断是否可以使用这个组件
+    // 使用组件即调用下面的func
+    filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+    func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
+}
+
+export default class PluginCenter {
+    constructor() {
+        this.pluginsMap = {}
+    }
+    pluginsMap: {
+        [key: string]: plugin
+    }
+
+    register(key: string, plugin: plugin){
+        this.pluginsMap[key] = plugin
+        console.log(this.pluginsMap)
+    }
+
+    /**
+     * 便捷地注册一个组件为插件，触发时直接用新页面打开
+     */
+    registerComponent(key: string,name: string, component: any, filter:(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean): void {
+        this.register(key, {
+            name,
+            filter,
+            func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => {
+                if(filter(VDirectorys, VFiles) === false){
+                    return
+                }
+                const views = useViretualPages()
+                views.push(component, VDirectorys, VFiles)
+            }
+        })
+    }
+
+    getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
+        const usableList = []
+        for(let key of Object.keys(this.pluginsMap)) {
+            if(this.pluginsMap[key].filter(VDirectorys, VFiles)) {
+                usableList.push(key)
+            }
+        }
+        return usableList.map(key=>({
+            key,
+            ...this.pluginsMap[key]
+        }))
+    }
+
+    usePlugin(key: string, VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
+        this.pluginsMap[key].func(VDirectorys, VFiles)
+    }
+
+}

src/class/VirtualDirectory.ts

@@ -1,3 +1,4 @@
+import config from "@/config";
 import generateId from "@/hooks/generateId";
 import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
 // import { debounce } from "lodash";
@@ -23,6 +24,10 @@ export class VirtualFile {
 	get path() {
 		return `${this.parent.path}${this.name}`;
 	}
+
+	get url() {
+		return `${config.api.get}${this.parent.path}${this.name}`
+	}
 }
 
 class VirtualDirectory {

src/class/VirtualPage.ts

@@ -1,4 +1,4 @@
-import { shallowRef } from "vue";
+import { reactive, shallowRef } from "vue";
 import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
 import generateId from "@/hooks/generateId";
 
@@ -13,7 +13,7 @@ const getRandomWebSafeColor = (() => {
 })();
 
 export default class VirtualPage {
-	constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
+	constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
 		this.component = shallowRef(component);
 		this.currentDirectorys = initObjects?.directorys ?? [];
 		this.currentFiles = initObjects?.files ?? [];
@@ -43,7 +43,7 @@ export default class VirtualPage {
 		if (this._title) {
 			return this._title;
 		}
-		return this.currentDirectorys[0].name;
+		return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
 	}
 
 	setTitle(title: string) {
@@ -61,3 +61,63 @@ export default class VirtualPage {
 		this.refreshKey = Math.random();
 	}
 }
+
+export class VirtualPages {
+	constructor() {
+		this._views = reactive<VirtualPage[]>([]);
+	}
+	_views: VirtualPage[];
+
+	get length() {
+		return this._views.length;
+	}
+
+	/**
+	 * 查询一个页面位于_views中的次序
+	 * @param {any} id 要查询的页面的id
+	 * @returns {any}
+	 */
+	getIndex(id: number) {
+		for (let i in this._views) {
+			if (this._views[i].uid === id) {
+				return parseInt(i);
+			}
+		}
+		return -1;
+	}
+	/**
+	 * 根据id得到view
+	 * @param {any} id 要查询的页面的id
+	 */
+	getView(id: number) {
+		for (let v of this._views) {
+			if (v.uid === id) {
+				return v;
+			}
+		}
+		return undefined;
+	}
+
+	/**
+	 * 推入一个新的页面
+	 */
+	push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
+		index ?? (index = this.length);
+		this._views.splice(
+			index,
+			0,
+			reactive<VirtualPage>(
+				new VirtualPage(component, {
+					directorys: [...(currentDirectorys ?? [])],
+					files: [...(currentFiles ?? [])]
+				})
+			)
+		);
+	}
+	/**
+	 * 根据次序删除一个页面
+	 */
+	deleteView(index: number) {
+		this._views.splice(index, 1);
+	}
+}