fix: 修正请求慢的时候无法加载浮窗问题

layouts/default.vue

@@ -1,6 +1,33 @@
 <script lang="ts" setup>
 import Header from "~/components/default/Header.vue"
 import Footer from "~/components/default/Footer.vue"
+import { createAppLogger } from "~/common/appLogger"
+import { sendMessageToParent } from "~/utils/innerIframeEvent"
+
+const logger = createAppLogger("blog-app-layout")
+
+// datas
+
+onMounted(() => {
+  if (window.self !== window.top) {
+    logger.info("Current window is inside an iframe")
+
+    const isParentWindowLoaded = window.parent.document.readyState === "complete"
+    if (isParentWindowLoaded) {
+      nextTick(() => {
+        const height = document.body.scrollHeight + 10
+        logger.info(`Sending message to parent window with height: ${height}`)
+        sendMessageToParent("updateHeight", height)
+      })
+    } else {
+      logger.info("Parent window has not finished loading yet.")
+    }
+
+    window.addEventListener("load", function () {
+      logger.info("IFrame has finished loading.")
+    })
+  }
+})
 </script>
 
 <template>

nuxt.config.ts

@@ -9,7 +9,7 @@ const generateDynamicV = () => {
 }
 
 const isDev = process.env.NODE_ENV === "development"
-const appBase = "/"
+const appBase = "/plugins/siyuan-blog/"
 const staticV = generateDynamicV()
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -24,7 +24,14 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
+  modules: [
+    "@vueuse/nuxt",
+    "@nuxtjs/i18n-edge",
+    "@element-plus/nuxt",
+    "@nuxtjs/color-mode",
+    "@pinia/nuxt",
+    "@nuxt/image",
+  ],
 
   // vueuse
   vueuse: {
@@ -57,6 +64,14 @@ export default defineNuxtConfig({
     themes: ["dark"],
   },
 
+  // https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
+  ssr: false,
+  router: {
+    options: {
+      hashMode: true,
+    },
+  },
+
   css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],
 
   app: {
@@ -93,11 +108,15 @@ export default defineNuxtConfig({
 
   // 环境变量
   runtimeConfig: {
-    siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    // siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanAuthToken: "",
     public: {
-      defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
-      siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL,
-      waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
+      // defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
+      defaultType: "siyuan",
+      // siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL,
+      siyuanApiUrl: "",
+      // waitTime: process.env.NUXT_PUBLIC_WAIT_TIME,
+      waitTime: "0",
     },
   },
 })

siyuan/iframeEvent.ts

@@ -28,16 +28,17 @@ import { createAppLogger } from "~/common/appLogger"
 
 const logger = createAppLogger("iframe-events")
 let added = false
-export const adjustIframeHeight = (iframeId: string, customHeight?: number) => {
+const adjustIframeHeight = (iframeId: string, customHeight?: number) => {
   const iframe = document.getElementById(iframeId) as HTMLIFrameElement
   let counter = 0
   let lastHeight = "0px" // 将初始高度设为 "0px"
+  const defaultHeight = 350
 
   // 注册定时器
   const interval = setInterval(() => {
     // 获取id为__nuxt的元素高度
     const iframeBody = iframe?.contentWindow?.document.getElementById("__nuxt") as HTMLElement
-    let height = `${customHeight ?? iframeBody.scrollHeight}px`
+    let height = `${customHeight ?? iframeBody?.scrollHeight ?? defaultHeight}px`
     if (height === lastHeight) {
       if (!added) {
         height = height + 10
@@ -65,25 +66,35 @@ export const adjustIframeHeight = (iframeId: string, customHeight?: number) => {
   }
 }
 
-// 监听 message 事件
-window.addEventListener("message", (event) => {
-  const iframe = document.getElementById(popContentIframeId) as HTMLIFrameElement
+/**
+ * 注册 iframe 事件
+ */
+export const registerIframeEvent = () => {
+  // 监听 message 事件
+  window.addEventListener("message", (event) => {
+    const iframe = document.getElementById(popContentIframeId) as HTMLIFrameElement
 
-  // 判断是否是来自指定 iframe 的消息
-  if (event.source === iframe.contentWindow) {
-    const data = event.data
-    // 判断消息类型
-    if (data.type === "updateHeight") {
-      logger.info(`Received update height message from iframe`)
-      const height = data.height
-      // 更新 iframe 高度
-      if (height) {
-        iframe.height = `${height}px`
-        logger.info(`Updated iframe height to ${height}px`)
+    // 判断是否是来自指定 iframe 的消息
+    if (event.source === iframe.contentWindow) {
+      const data = event.data
+      // 判断消息类型
+      if (data.type === "updateHeight") {
+        logger.info(`Received update height message from iframe`)
+        const height = data.height
+        // 更新 iframe 高度
+        if (height) {
+          iframe.height = `${height}px`
+          logger.info(`Updated iframe height to ${height}px`)
+        } else {
+          adjustIframeHeight(popContentIframeId)
+          logger.info(`Auto adjust iframe height to ${height}px`)
+        }
       } else {
-        adjustIframeHeight(popContentIframeId)
-        logger.info(`Auto adjust iframe height to ${height}px`)
+        logger.warn(`Unknown message type, ignore`)
       }
+    } else {
+      logger.warn(`message is not from contentWindow, ignore`)
     }
-  }
-})
+  })
+  logger.info("iframe event registered in plugin main")
+}

siyuan/index.ts

@@ -29,6 +29,7 @@ import { isDev } from "~/common/Constants"
 
 import "./index.styl"
 import { icons } from "~/siyuan/utils/svg"
+import { registerIframeEvent } from "~/siyuan/iframeEvent"
 
 export default class SiyuanBlog extends Plugin {
   public isMobile
@@ -44,7 +45,10 @@ export default class SiyuanBlog extends Plugin {
   onload() {
     // 注册图标
     this.addIcons(icons.iconShare)
+    // 初始化顶部栏以及图标
     initTopbar(this)
+    // 注册 iframe 事件
+    registerIframeEvent()
   }
 
   openSetting() {

siyuan/topbar.ts

@@ -28,8 +28,6 @@ import { Dialog, Menu } from "siyuan"
 import PageUtil from "~/siyuan/utils/pageUtil"
 import { getAvailableOrigin } from "~/siyuan/utils/utils"
 import { contentElement, contentHtml } from "~/siyuan/customElement"
-import { adjustIframeHeight } from "~/siyuan/iframeEvent"
-import { popContentIframeId } from "~/siyuan/siyuanConstants"
 
 /**
  * 顶栏按钮
@@ -51,7 +49,6 @@ export function initTopbar(pluginInstance: SiyuanBlog) {
     const sharePage =
       "/plugins/siyuan-blog/#/share?id=" + PageUtil.getPageId() + "&origin=" + getAvailableOrigin() + "&isSsr=false"
     showPopView(pluginInstance, topBarElement, sharePage)
-    adjustIframeHeight(popContentIframeId)
   })
 
   // topBarElement.addEventListener("click", async () => {

utils/innerIframeEvent.ts

@@ -27,7 +27,7 @@ import { createAppLogger } from "~/common/appLogger"
 
 const logger = createAppLogger("inner-iframe-event")
 
-export const sendMessageToParent = (type: string) => {
+export const sendMessageToParent = (type: string, height?: number) => {
   const win = window.self as any
   if (!win.parent.siyuan) {
     logger.info(`Not in siyuan-note plugin iframe environment, ignore message sending`)
@@ -38,6 +38,6 @@ export const sendMessageToParent = (type: string) => {
   const iframeWindow = window.self
 
   // 向父窗口发送消息
-  iframeWindow.parent.postMessage({ type: type }, "*")
+  iframeWindow.parent.postMessage({ type: type, height: height }, "*")
   logger.info(`Sends a message to the parent window, type => ${type}`)
 }