feat: 初步实现基于iframe的插件的部分逻辑。

src/App.vue

@@ -113,10 +113,12 @@ onMounted(async () => {
     await init(messageProviderRef.value?.alertTip)
     pluginCenter = usePluginCenter()
     pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
+    console.log(rootDirectory.tree)
 })
 
 // @ts-ignore
 provide('globalAlertTip', messageProviderRef.value?.alertTip)
+provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
@@ -126,37 +128,21 @@ provide('globalAlertTip', messageProviderRef.value?.alertTip)
                 <n-scrollbar x-scrollable>
                     <div class="tabs-container">
                         <transition-group name="tab">
-                        <div
+                            <div class="tab" v-for="(view, index) of views._views" :key="view.id">
-                            class="tab"
+                                <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
-                            v-for="(view, index) of views._views"
-                            :key="view.id">
-                            <span
-                                class="tab-title"
-                                :title="view.title"
-                                @click="handleClickTitle(index)">
                                     {{
                                         view.title.length > 5 && 0
                                             ? `${view.title.substring(0, 5)}...`
                                             : view.title
                                     }}
                                 </span>
-                            <div
+                                <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
-                                class="tab-point"
-                                :style="{ backgroundColor: view.color }"></div>
                                 <div class="tab-control">
-                                <n-icon
+                                    <n-icon class="tag-control-icon icon" @click="view.switchShow()">
-                                    class="tag-control-icon icon"
+                                        <EyeOutline v-show="view.visible" class="icon-inner" />
-                                    @click="view.switchShow()">
+                                        <EyeOffOutline v-show="!view.visible" class="icon-inner" />
-                                    <EyeOutline
-                                        v-show="view.visible"
-                                        class="icon-inner" />
-                                    <EyeOffOutline
-                                        v-show="!view.visible"
-                                        class="icon-inner" />
                                     </n-icon>
-                                <n-icon
+                                    <n-icon class="tag-control-icon icon" @click="
-                                    class="tag-control-icon icon"
-                                    @click="
                                         createView(
                                             view.component,
                                             view.currentDirectories,
@@ -166,9 +152,7 @@ provide('globalAlertTip', messageProviderRef.value?.alertTip)
                                         ">
                                         <CopyOutline />
                                     </n-icon>
-                                <n-icon
+                                    <n-icon class="tag-control-icon icon" @click="deleteView(index)">
-                                    class="tag-control-icon icon"
-                                    @click="deleteView(index)">
                                         <CloseOutline class="icon-inner" />
                                     </n-icon>
                                 </div>
@@ -178,10 +162,7 @@ provide('globalAlertTip', messageProviderRef.value?.alertTip)
                 </n-scrollbar>
                 <div class="view-controller-menu">
                     <div class="view-controller-menu-item">
-                    <n-dropdown
+                        <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
-                        trigger="click"
-                        :options="openMenuOption"
-                        @select="handleMenuSelect">
                             <n-icon class="icon">
                                 <EllipsisVertical class="icon-inner" />
                             </n-icon>
@@ -191,20 +172,11 @@ provide('globalAlertTip', messageProviderRef.value?.alertTip)
             </div>
             <div class="view-container">
                 <transition-group name="page">
-                <div
+                    <div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
-                    class="view-container-item"
-                    v-for="(view, index) of views._views"
-                    v-show="view.visible"
                         :key="view.id">
-                    <component
+                        <component :is="view.component" v-model:current-directories="view.currentDirectories"
-                        :is="view.component"
+                            v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
-                        v-model:current-directories="view.currentDirectories"
+                            :views="views" @exit="deleteView(index)"></component>
-                        v-model:current-files="view.currentFiles"
-                        :id="view.id"
-                        :color="view.color"
-                        :view="view"
-                        :views="views"
-                        @exit="deleteView(index)"></component>
                     </div>
                 </transition-group>
             </div>
@@ -212,10 +184,8 @@ provide('globalAlertTip', messageProviderRef.value?.alertTip)
     </div>
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component
+        <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
-            @click="(e: any) => e.stopPropagation()"
+        </component>
-            :is="modalData?.component"
-            v-bind="modalData?.props"></component>
     </MiaoMask>
 </template>
 
@@ -379,6 +349,7 @@ $tag-width: 170px;
 .view {
     .view-controller {
         .tabs-container {
+
             .tab-move,
             .tab-enter-active {
                 transition: all 0.2s ease;

src/class/VirtualDirectory.ts

@@ -6,6 +6,21 @@ import type { stats, file, directory } from "@/types/type.ts";
 
 const miaoFetchApi = useMiaoFetchApi();
 
+export interface Tree {
+	name: string;
+	type: 'directory';
+	path: string;
+	stats: stats;
+	files?: {
+		name: string;
+		type: 'file';
+		size: number;
+		stats: stats;
+		url: string;
+	}[];
+	directories?: Tree[];
+}
+
 export class VirtualFile {
 	constructor(info: file, parent: VirtualDirectory) {
 		this.name = info.name;
@@ -26,7 +41,7 @@ export class VirtualFile {
 	}
 
 	get url() {
-		return `${config.api.get}${this.parent.path}${this.name}`
+		return `${config.api.get}${this.parent.path}${this.name}`;
 	}
 }
 
@@ -96,6 +111,24 @@ class VirtualDirectory {
 		return this.parent.getParent(layer - 1);
 	}
 
+	get tree(): Tree {
+		return {
+			name: this.name,
+			type: this.type,
+			path: this.path,
+			stats: this.stats,
+			files:
+				this.files?.map(v => ({
+					name: v.name,
+					type: v.type,
+					size: v.size,
+					stats: v.stats,
+					url: v.url
+				})) ?? [],
+			directories: this.directories?.map(v => v.tree) ?? []
+		};
+	}
+
 	updateContent(content: (file | directory)[]) {
 		this.files = this.files ?? [];
 		this.directories = this.directories ?? [];

src/hooks/buildFromTree.ts

@@ -0,0 +1,15 @@
+import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
+
+/**
+ * 通过VirtualDirectory的.tree重建文件夹树
+ * @param {any} data:Tree
+ * @returns {any}
+ */
+const buildFromTree = (data: Tree) => {
+    const root = new VirtualDirectory(data)
+    root.files = data.files?.map(v=>new VirtualFile(v, root))
+    root.directories = data.directories?.map(v=>buildFromTree(v))
+    return root
+}
+
+export default buildFromTree;

src/plugins/miaoIframe/miaoIframe.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="miao-markdown-container-miaomiaomiao">
         <iframe
+            ref="iframeRef"
             :src="iframeSrc"
             frameborder="0"
             class="iframe-container-iframe"></iframe>
@@ -8,17 +9,33 @@
 </template>
 
 <script setup lang="ts">
-import { VirtualFile } from '@/class/VirtualDirectory'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { onMounted, ref } from 'vue'
+import { cloneDeep } from 'lodash';
+import { inject, onMounted, ref } from 'vue'
+import buildFromTree from '../../hooks/buildFromTree';
 
+const root = inject('rootDirectory') as VirtualDirectory
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
 const iframeSrc = ref<string>()
+const iframeRef = ref<HTMLIFrameElement>();
 
+const sendRootTree = () => {
+    iframeRef.value?.contentWindow && iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), "*");
+}
+
+const handleIframeMessage = (e: MessageEvent<any>) => {
+    // const data = e.data;
+    sendRootTree()
+}
 onMounted(() => {
     iframeSrc.value = currentFiles.value[0].url
+    if (typeof window.addEventListener != "undefined") {
+      window.addEventListener("message", handleIframeMessage, false);
+    }
+    console.log(buildFromTree(cloneDeep(root.tree)))
 })
 </script>