From f2ff05f4e354833cdf7a46333049d4d51fff0593 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Thu, 12 Sep 2024 03:31:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=9F=BA=E4=BA=8Eiframe=E7=9A=84=E6=8F=92=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E9=80=BB=E8=BE=91=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           | 133 ++++++++++----------------
 src/class/VirtualDirectory.ts         |  35 ++++++-
 src/hooks/buildFromTree.ts            |  15 +++
 src/plugins/miaoIframe/miaoIframe.vue |  21 +++-
 4 files changed, 120 insertions(+), 84 deletions(-)
 create mode 100644 src/hooks/buildFromTree.ts

diff --git a/src/App.vue b/src/App.vue
index e6916de..f2ea87a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -113,109 +113,79 @@ 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>
     <div class="view">
         <miao-message-provider ref="messageProviderRef">
-        <div class="view-controller">
-            <n-scrollbar x-scrollable>
-                <div class="tabs-container">
-                    <transition-group name="tab">
-                        <div
-                            class="tab"
-                            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
-                                class="tab-point"
-                                :style="{ backgroundColor: view.color }"></div>
-                            <div class="tab-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="
+            <div class="view-controller">
+                <n-scrollbar x-scrollable>
+                    <div class="tabs-container">
+                        <transition-group name="tab">
+                            <div class="tab" 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 class="tab-point" :style="{ backgroundColor: view.color }"></div>
+                                <div class="tab-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.component,
                                             view.currentDirectories,
                                             view.currentFiles,
                                             index + 1
                                         )
-                                    ">
-                                    <CopyOutline />
-                                </n-icon>
-                                <n-icon
-                                    class="tag-control-icon icon"
-                                    @click="deleteView(index)">
-                                    <CloseOutline class="icon-inner" />
-                                </n-icon>
+                                        ">
+                                        <CopyOutline />
+                                    </n-icon>
+                                    <n-icon class="tag-control-icon icon" @click="deleteView(index)">
+                                        <CloseOutline class="icon-inner" />
+                                    </n-icon>
+                                </div>
                             </div>
-                        </div>
-                    </transition-group>
-                </div>
-            </n-scrollbar>
-            <div class="view-controller-menu">
-                <div class="view-controller-menu-item">
-                    <n-dropdown
-                        trigger="click"
-                        :options="openMenuOption"
-                        @select="handleMenuSelect">
-                        <n-icon class="icon">
-                            <EllipsisVertical class="icon-inner" />
-                        </n-icon>
-                    </n-dropdown>
+                        </transition-group>
+                    </div>
+                </n-scrollbar>
+                <div class="view-controller-menu">
+                    <div class="view-controller-menu-item">
+                        <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
+                            <n-icon class="icon">
+                                <EllipsisVertical class="icon-inner" />
+                            </n-icon>
+                        </n-dropdown>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="view-container">
-            <transition-group name="page">
-                <div
-                    class="view-container-item"
-                    v-for="(view, index) of views._views"
-                    v-show="view.visible"
-                    :key="view.id">
-                    <component
-                        :is="view.component"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.id"
-                        :color="view.color"
-                        :view="view"
-                        :views="views"
-                        @exit="deleteView(index)"></component>
-                </div>
-            </transition-group>
-        </div>
+            <div class="view-container">
+                <transition-group name="page">
+                    <div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
+                        :key="view.id">
+                        <component :is="view.component" v-model:current-directories="view.currentDirectories"
+                            v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
+                            :views="views" @exit="deleteView(index)"></component>
+                    </div>
+                </transition-group>
+            </div>
         </miao-message-provider>
     </div>
     <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
     <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component
-            @click="(e: any) => e.stopPropagation()"
-            :is="modalData?.component"
-            v-bind="modalData?.props"></component>
+        <component @click="(e: any) => e.stopPropagation()" :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;
diff --git a/src/class/VirtualDirectory.ts b/src/class/VirtualDirectory.ts
index 58745dd..890a730 100644
--- a/src/class/VirtualDirectory.ts
+++ b/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 ?? [];
diff --git a/src/hooks/buildFromTree.ts b/src/hooks/buildFromTree.ts
new file mode 100644
index 0000000..4f9d06a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/plugins/miaoIframe/miaoIframe.vue b/src/plugins/miaoIframe/miaoIframe.vue
index dd377aa..c793a95 100644
--- a/src/plugins/miaoIframe/miaoIframe.vue
+++ b/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 { onMounted, ref } from 'vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+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>