From a3273e6a707c1de7ee702ca70eda1497958d282d Mon Sep 17 00:00:00 2001
From: zfowed <zfowed@qq.com>
Date: Fri, 17 Jan 2025 02:25:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E5=9C=B0=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bpmn/src/pages/edit/components/Save.vue       | 27 ++++++--
 doc/src/pages/edit/Index.vue                  | 26 ++++++--
 flowchart/src/main/webapp/js/ui/user.js       | 22 ++++++-
 markdown/src/pages/edit/Index.vue             | 27 ++++++--
 .../src/pages/Edit/components/Toolbar.vue     | 25 +++++--
 note/src/pages/edit/Index.vue                 | 26 ++++++--
 ppt/src/views/Editor/EditorHeader/index.vue   | 22 +++++--
 sheet/src/pages/edit/Index.vue                | 26 ++++++--
 whiteboard/src/components/header/Header.jsx   | 25 +++++--
 workbench/src/hooks/useFileHandle.js          | 59 ++++++++++-------
 workbench/src/main.js                         |  4 ++
 workbench/src/pages/workspace/Preview.vue     | 66 +++++++++++++++++++
 workbench/src/router.js                       |  5 ++
 13 files changed, 300 insertions(+), 60 deletions(-)
 create mode 100644 workbench/src/pages/workspace/Preview.vue

diff --git a/bpmn/src/pages/edit/components/Save.vue b/bpmn/src/pages/edit/components/Save.vue
index ac99743..2d65e71 100644
--- a/bpmn/src/pages/edit/components/Save.vue
+++ b/bpmn/src/pages/edit/components/Save.vue
@@ -36,7 +36,7 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   Back,
   CircleCloseFilled,
@@ -60,11 +60,28 @@ const props = defineProps({
 })
 
 // 返回工作台
-const back = () => {
-  if (process.env.NODE_ENV === 'production') {
-    location.href = '/'
+const back = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (store.autoSaveStatus !== 'success') {
+      await ElMessageBox.confirm(`系统可能不会保存您所做的更改。`, '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
+    }
   } else {
-    location.href = 'http://' + location.hostname + ':9090'
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
   }
 }
 
diff --git a/doc/src/pages/edit/Index.vue b/doc/src/pages/edit/Index.vue
index 124cde2..095e974 100644
--- a/doc/src/pages/edit/Index.vue
+++ b/doc/src/pages/edit/Index.vue
@@ -66,6 +66,7 @@
 import { useStore } from '../../store'
 import { useRoute, useRouter } from 'vue-router'
 import { computed, ref, watch, shallowRef, onBeforeUnmount } from 'vue'
+import { ElMessageBox } from 'element-plus'
 import {
   ArrowLeft,
   CircleCloseFilled,
@@ -84,11 +85,28 @@ const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
-const onBack = () => {
-  if (process.env.NODE_ENV === 'production') {
-    location.href = '/'
+const onBack = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (store.autoSaveStatus !== 'success') {
+      await ElMessageBox.confirm(`系统可能不会保存您所做的更改。`, '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
+    }
   } else {
-    location.href = 'http://' + location.hostname + ':9090'
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
   }
 }
 
diff --git a/flowchart/src/main/webapp/js/ui/user.js b/flowchart/src/main/webapp/js/ui/user.js
index 81d988a..a5d0a63 100644
--- a/flowchart/src/main/webapp/js/ui/user.js
+++ b/flowchart/src/main/webapp/js/ui/user.js
@@ -82,8 +82,26 @@
       this.showMask = false
     },
     methods: {
-      back() {
-        location.href = '/'
+      async back() {
+        if (window.top !== window.self && window.parent) {
+          // 如果是 iframe 中运行，通知上层 window 后退
+          if (this.autoSaveStatus !== 'success') {
+            const answer = window.confirm('系统可能不会保存您所做的更改。')
+            if (!answer) return false
+          }
+          try {
+            window.parent.history.back()
+          } catch (e) {
+            window.parent.postMessage('history-back', '*')
+          }
+        } else {
+          // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+          const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+          const workspaceWindow = window.open(href, 'lx-doc')
+          if (window !== workspaceWindow) {
+            window.close()
+          }
+        }
       },
       // 设置当前自动保存状态
       setAutoSaveStatus(data) {
diff --git a/markdown/src/pages/edit/Index.vue b/markdown/src/pages/edit/Index.vue
index cf890f1..645bbe6 100644
--- a/markdown/src/pages/edit/Index.vue
+++ b/markdown/src/pages/edit/Index.vue
@@ -98,7 +98,7 @@ import { Emoji } from '@vavt/v3-extension'
 import '@vavt/v3-extension/lib/asset/Emoji.css'
 import { ExportPDF } from '@vavt/v3-extension'
 import '@vavt/v3-extension/lib/asset/ExportPDF.css'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import screenfull from 'screenfull'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
@@ -115,11 +115,28 @@ const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
-const onBack = () => {
-  if (process.env.NODE_ENV === 'production') {
-    location.href = '/'
+const onBack = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (store.autoSaveStatus !== 'success') {
+      await ElMessageBox.confirm(`系统可能不会保存您所做的更改。`, '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
+    }
   } else {
-    location.href = 'http://' + location.hostname + ':9090'
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
   }
 }
 
diff --git a/mind-map/src/pages/Edit/components/Toolbar.vue b/mind-map/src/pages/Edit/components/Toolbar.vue
index e07c17a..3aa9e12 100644
--- a/mind-map/src/pages/Edit/components/Toolbar.vue
+++ b/mind-map/src/pages/Edit/components/Toolbar.vue
@@ -198,11 +198,28 @@ export default {
     ...mapActions(['storeFileInfo']),
 
     // 返回工作台页面
-    onBack() {
-      if (process.env.NODE_ENV === 'production') {
-        location.href = '/'
+    async onBack() {
+      if (window.top !== window.self && window.parent) {
+        // 如果是 iframe 中运行，通知上层 window 后退
+        if (this.autoSaveStatus !== 'success') {
+          await this.$confirm(`系统可能不会保存您所做的更改。`, '警告', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+        }
+        try {
+          window.parent.history.back()
+        } catch (e) {
+          window.parent.postMessage('history-back', '*')
+        }
       } else {
-        location.href = 'http://' + location.hostname + ':9090'
+        // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+        const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+        const workspaceWindow = window.open(href, 'lx-doc')
+        if (window !== workspaceWindow) {
+          window.close()
+        }
       }
     },
 
diff --git a/note/src/pages/edit/Index.vue b/note/src/pages/edit/Index.vue
index 905597e..8017334 100644
--- a/note/src/pages/edit/Index.vue
+++ b/note/src/pages/edit/Index.vue
@@ -49,6 +49,7 @@
 import { useStore } from '../../store'
 import { useRoute, useRouter } from 'vue-router'
 import { computed, onMounted, ref, watch } from 'vue'
+import { ElMessageBox } from 'element-plus'
 import {
   ArrowLeft,
   CircleCloseFilled,
@@ -65,11 +66,28 @@ const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
-const onBack = () => {
-  if (process.env.NODE_ENV === 'production') {
-    location.href = '/'
+const onBack = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (store.autoSaveStatus !== 'success') {
+      await ElMessageBox.confirm(`系统可能不会保存您所做的更改。`, '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
+    }
   } else {
-    location.href = 'http://' + location.hostname + ':9090'
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
   }
 }
 
diff --git a/ppt/src/views/Editor/EditorHeader/index.vue b/ppt/src/views/Editor/EditorHeader/index.vue
index 3742685..c274042 100644
--- a/ppt/src/views/Editor/EditorHeader/index.vue
+++ b/ppt/src/views/Editor/EditorHeader/index.vue
@@ -130,11 +130,25 @@ const editingTitle = ref(false)
 const titleInputRef = ref<InstanceType<typeof Input>>()
 const titleValue = ref('')
 
-const onBack = () => {
-  if (process.env.NODE_ENV === 'production') {
-    location.href = '/'
+const onBack = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (mainStore.autoSaveStatus !== 'success') {
+      const answer = window.confirm('系统可能不会保存您所做的更改。')
+      if (!answer) return false
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
+    }
   } else {
-    location.href = 'http://' + location.hostname + ':9090'
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
   }
 }
 
diff --git a/sheet/src/pages/edit/Index.vue b/sheet/src/pages/edit/Index.vue
index 88d94fd..474b5a6 100644
--- a/sheet/src/pages/edit/Index.vue
+++ b/sheet/src/pages/edit/Index.vue
@@ -37,6 +37,7 @@
 import { useStore } from '../../store'
 import { useRoute, useRouter } from 'vue-router'
 import { computed, ref, watch, onMounted } from 'vue'
+import { ElMessageBox } from 'element-plus'
 import {
   ArrowLeft,
   CircleCloseFilled,
@@ -51,11 +52,28 @@ const store = useStore()
 const route = useRoute()
 const router = useRouter()
 
-const onBack = () => {
-  if (process.env.NODE_ENV === 'production') {
-    location.href = '/'
+const onBack = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (store.autoSaveStatus !== 'success') {
+      await ElMessageBox.confirm(`系统可能不会保存您所做的更改。`, '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
+    }
   } else {
-    location.href = 'http://' + location.hostname + ':9090'
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
   }
 }
 
diff --git a/whiteboard/src/components/header/Header.jsx b/whiteboard/src/components/header/Header.jsx
index ddfd7d4..9dc7367 100644
--- a/whiteboard/src/components/header/Header.jsx
+++ b/whiteboard/src/components/header/Header.jsx
@@ -21,14 +21,29 @@ const uploadFilesMap = {}
 let isSaving = false
 let hasWaitSaveTask = false
 
+
 function Header({ excalidrawAPI }) {
   // 返回工作台
-  const onBack = () => {
-    if (process.env.NODE_ENV === 'production') {
-      location.href = '/'
-    } else {
-      location.href = 'http://' + location.hostname + ':9090'
+  const onBack = async () => {
+  if (window.top !== window.self && window.parent) {
+    // 如果是 iframe 中运行，通知上层 window 后退
+    if (store.autoSaveStatus !== 'success') {
+      const answer = window.confirm('系统可能不会保存您所做的更改。')
+      if (!answer) return false
+    }
+    try {
+      window.parent.history.back()
+    } catch (e) {
+      window.parent.postMessage('history-back', '*')
     }
+  } else {
+    // 如果是新窗口打开，跳到工作台标签页并且关闭当前标签页
+    const href = process.env.NODE_ENV === 'production' ? '/' : 'http://' + location.hostname + ':9090'
+    const workspaceWindow = window.open(href, 'lx-doc')
+    if (window !== workspaceWindow) {
+      window.close()
+    }
+  }
   }
 
   // 文件名
diff --git a/workbench/src/hooks/useFileHandle.js b/workbench/src/hooks/useFileHandle.js
index bf50d33..228befe 100644
--- a/workbench/src/hooks/useFileHandle.js
+++ b/workbench/src/hooks/useFileHandle.js
@@ -1,35 +1,18 @@
+import { useRouter } from 'vue-router'
 import api from '@/api'
 import { useStore } from '@/store'
 import { ElMessage } from 'element-plus'
 import emitter from '@/utils/eventBus'
-import { openUrl } from '@/utils'
+// import { openUrl } from '@/utils'
 
 const useFileHandle = () => {
+  const router = useRouter()
   const store = useStore()
   const isDev = process.env.NODE_ENV !== 'production'
   const ip = location.hostname
 
-  // 创建并打开新文件
-  const createAndOpenNewFile = async type => {
-    try {
-      if (!store.currentFolder) {
-        ElMessage.warning('请先选择文件夹')
-        return
-      }
-      const { data } = await api.createFile({
-        name: '未命名文件',
-        folderId: store.currentFolder.id,
-        type
-      })
-      emitter.emit('refresh_list')
-      openEditPage(type, data.id)
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  // 打开编辑页面
-  const openEditPage = (type, uid) => {
+  // 获取编辑页面 URL
+  const getEditPageUrl = (type, uid) => {
     let url = ''
     switch (type) {
       case 'mindMap':
@@ -66,10 +49,40 @@ const useFileHandle = () => {
       default:
         break
     }
-    openUrl(url)
+
+    return url || null
+  }
+
+  // 创建并打开新文件
+  const createAndOpenNewFile = async type => {
+    try {
+      if (!store.currentFolder) {
+        ElMessage.warning('请先选择文件夹')
+        return
+      }
+      const { data } = await api.createFile({
+        name: '未命名文件',
+        folderId: store.currentFolder.id,
+        type
+      })
+      emitter.emit('refresh_list')
+      openEditPage(type, data.id)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  // 打开编辑页面
+  const openEditPage = (type, uid) => {
+    let url = getEditPageUrl(type, uid)
+    if (url) {
+      // openUrl(url)
+      router.push({ name: 'Preview', params: { type, uid } })
+    }
   }
 
   return {
+    getEditPageUrl,
     createAndOpenNewFile,
     openEditPage
   }
diff --git a/workbench/src/main.js b/workbench/src/main.js
index 6f070b1..f44f8c6 100644
--- a/workbench/src/main.js
+++ b/workbench/src/main.js
@@ -8,4 +8,8 @@ import './styles/style.less'
 import './styles/theme.less'
 import '@/assets/iconfont/iconfont.css'
 
+if (!window.name) {
+  window.name = 'lx-doc'
+}
+
 createApp(App).use(router).use(pinia).use(ElementPlus).mount('#app')
diff --git a/workbench/src/pages/workspace/Preview.vue b/workbench/src/pages/workspace/Preview.vue
new file mode 100644
index 0000000..68177be
--- /dev/null
+++ b/workbench/src/pages/workspace/Preview.vue
@@ -0,0 +1,66 @@
+<template>
+  <iframe class="iframe" :name="iframeName" :src="iframeUrl" frameborder="0" allow="*" loading="lazy" />
+</template>
+
+<script lang="js" setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
+import useFileHandle from '@/hooks/useFileHandle'
+
+const { getEditPageUrl } = useFileHandle()
+const router = useRouter()
+const route = useRoute()
+
+const iframeUrl = ref('')
+const iframeName = computed(() => `${route.params.type}_${route.params.uid}`)
+
+// 监听路由变化，更新 iframe 的 URL
+watch(route, () => {
+  iframeUrl.value = getEditPageUrl(route.params.type, route.params.uid)
+}, { immediate: true })
+
+
+// 处理消息
+const handleMessage = (event) => {
+  if (!iframeUrl.value.startsWith(event.origin)) return
+  if (event.data === 'history-back') {
+    router.back()
+  }
+}
+
+// 初始化 iframe URL
+onMounted(() => {
+  // 监听来自 iframe 的消息
+  window.addEventListener('message', handleMessage)
+})
+
+
+// 清理工作
+onUnmounted(() => {
+  window.removeEventListener('message', handleMessage)
+})
+
+
+// onBeforeRouteLeave(async (to, from) => {
+//   return ElMessageBox.confirm(`系统可能不会保存您所做的更改。`, '警告', {
+//     confirmButtonText: '确认',
+//     cancelButtonText: '取消',
+//     type: 'warning'
+//   }).then(async () => {
+//     return true
+//   }, () => {
+//     return false
+//   })
+// })
+</script>
+
+<style scoped>
+/* 添加一些样式以改善 iframe 的外观 */
+.iframe {
+  display: block;
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/workbench/src/router.js b/workbench/src/router.js
index f765ca1..2010c35 100644
--- a/workbench/src/router.js
+++ b/workbench/src/router.js
@@ -34,6 +34,11 @@ const routes = [
         name: 'Panorama',
         path: 'panorama',
         component: () => import('@/pages/workspace/Panorama.vue')
+      },
+      {
+        name: 'Preview',
+        path: 'preview/:type/:uid',
+        component: () => import('@/pages/workspace/Preview.vue')
       }
     ]
   },