feat: 在线分享第一版-优化弹窗

nuxt.config.ts

@@ -9,7 +9,7 @@ const generateDynamicV = () => {
 }
 
 const isDev = process.env.NODE_ENV === "development"
-const appBase = "/plugins/siyuan-blog/"
+const appBase = "/"
 const staticV = generateDynamicV()
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
@@ -24,14 +24,7 @@ export default defineNuxtConfig({
   },
 
   // build modules
-  modules: [
-    "@vueuse/nuxt",
-    "@nuxtjs/i18n-edge",
-    "@element-plus/nuxt",
-    "@nuxtjs/color-mode",
-    "@pinia/nuxt",
-    "@nuxt/image",
-  ],
+  modules: ["@vueuse/nuxt", "@nuxtjs/i18n", "@element-plus/nuxt", "@nuxtjs/color-mode", "@pinia/nuxt", "@nuxt/image"],
 
   // vueuse
   vueuse: {
@@ -58,14 +51,6 @@ export default defineNuxtConfig({
     plugins: [],
   },
 
-  // 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: {

siyuan/customElement.ts

@@ -24,13 +24,13 @@
  */
 
 /**
- * 绘制图区
+ * 内容区域
+ *
  * @returns element
  */
-export const viewElement = (pageUrl: string) => {
+export const contentElement = (pageUrl: string) => {
   // 包裹图层
   const divElement = document.createElement("div")
-  divElement.id = "blog-container"
 
   // 创建 <iframe> 元素
   const iframe = document.createElement("iframe")
@@ -39,15 +39,14 @@ export const viewElement = (pageUrl: string) => {
   iframe.height = "100%"
 
   divElement.appendChild(iframe)
-
   return divElement
 }
 
 export const contentHtml = (pageUrl: string) => `<style>
-        iframe {
-          width: 100%;
-          height: 100%;
-          border: none;
-        }
-        </style>
-        <iframe src="${pageUrl}" width="100%"></iframe>`
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+  </style>
+  <iframe src="${pageUrl}" width="100%"></iframe>`

siyuan/index.styl

@@ -37,23 +37,20 @@
   margin-right 10px
   margin-top 2px
 
-#blog-container
-  width 750px
-  height 350px
+#pop-content
+  border-radius 4px
+  box-shadow var(--b3-dialog-shadow)
+  border 1px solid var(--b3-theme-surface-lighter)
+  background-color var(--b3-menu-background)
+  padding 8px
+  z-index 999
   overflow hidden
+  box-sizing border-box
+  position absolute
+  height 450px
   iframe
-    display block
     border none
+    border-radius 5px
     margin 0
     padding 0
     overflow hidden
-    width 100%
-    position absolute
-    top 0
-    left 0
-    height 100
-    transform-origin top left
-
-.blog-menu-root
-  .b3-menu__item--current
-    background #fff

siyuan/index.ts

@@ -28,11 +28,11 @@ import { simpleLogger } from "zhi-lib-base"
 import { isDev } from "~/common/Constants"
 
 import "./index.styl"
+import { icons } from "~/siyuan/utils/svg"
 
 export default class SiyuanBlog extends Plugin {
   public isMobile
   public logger
-
   constructor(options: { app: App; id: string; name: string; i18n: IObject }) {
     super(options)
 
@@ -42,6 +42,8 @@ export default class SiyuanBlog extends Plugin {
   }
 
   onload() {
+    // 注册图标
+    this.addIcons(icons.iconShare)
     initTopbar(this)
   }
 

siyuan/topbar.ts

@@ -27,7 +27,7 @@ import { icons } from "./utils/svg"
 import { Dialog, Menu } from "siyuan"
 import PageUtil from "~/siyuan/utils/pageUtil"
 import { getAvailableOrigin } from "~/siyuan/utils/utils"
-import { contentHtml, viewElement } from "~/siyuan/customElement"
+import { contentElement, contentHtml } from "~/siyuan/customElement"
 
 /**
  * 顶栏按钮
@@ -39,23 +39,15 @@ import { contentHtml, viewElement } from "~/siyuan/customElement"
  */
 export function initTopbar(pluginInstance: SiyuanBlog) {
   const topBarElement = pluginInstance.addTopBar({
-    icon: icons.iconTopbar,
+    icon: "iconShare",
     title: pluginInstance.i18n.siyuanBlog,
     position: "right",
-    callback: async (evt) => {
-      const sharePage = "/plugins/siyuan-blog/#/share"
-      showPopView(pluginInstance, evt, sharePage)
-
-      // add blog-menu-root
-      const element = document.getElementById("blog-container")
-      if (element) {
-        const parentMenuRoot = element.closest("#commonMenu")
-        if (parentMenuRoot) {
-          parentMenuRoot.classList.add("blog-menu-root")
-          pluginInstance.logger.info("add blog-menu-root class to #commonMenu")
-        }
-      }
-    },
+    callback: async (evt) => {},
+  })
+
+  topBarElement.addEventListener("click", async () => {
+    const sharePage = "/plugins/siyuan-blog/#/share"
+    showPopView(pluginInstance, topBarElement, sharePage)
   })
 
   // topBarElement.addEventListener("click", async () => {
@@ -138,14 +130,68 @@ const showPage = (pluginInstance: SiyuanBlog, pageUrl: string, title?: string) =
 
 /**
  * 分享选项显示区域
+ * 在 box 元素下方显示一个弹出框
+ *
+ * @param pluginInstance 插件实例对象
+ * @param boxElement 被点击的 box 元素
+ * @param pageUrl 当前页面的 URL
  */
-const showPopView = (pluginInstance: SiyuanBlog, evt: MouseEvent, pageUrl: string) => {
-  pluginInstance.logger.info("show pop view =>", pageUrl)
-  const menu = new Menu()
-  menu.addItem({ element: viewElement(pageUrl) })
-  menu.open({
-    x: evt.x,
-    y: evt.y,
-    isLeft: true,
-  })
+const showPopView = (pluginInstance: SiyuanBlog, boxElement: HTMLElement, pageUrl: string) => {
+  const popContentId = "pop-content"
+  let popContent = document.getElementById(popContentId)
+
+  // 第一次点击，创建浮动框并显示
+  popContent = document.createElement("div")
+  popContent.id = popContentId
+
+  // 获取 box 元素的位置和大小信息
+  const boxRect = boxElement.getBoundingClientRect()
+
+  // 计算浮动框的宽度和位置
+  const popContentWidth = 750 // 假设弹出框的宽度为 750 像素
+  const left = boxRect.left - popContentWidth // 基于 box 元素的左侧定位
+  const top = boxRect.bottom + window.pageYOffset
+
+  // 设置浮动框的样式
+  popContent.style.width = `${popContentWidth}px`
+  popContent.style.left = `${left}px`
+  popContent.style.top = `${top}px`
+  popContent.style.zIndex = "9999"
+  popContent.style.opacity = "0"
+  popContent.style.transition = "opacity 0.3s ease-in-out"
+
+  // 填充内容
+  popContent.innerHTML = contentElement(pageUrl).innerHTML
+
+  document.body.appendChild(popContent)
+
+  // 开启淡入动画
+  setTimeout(() => {
+    if (popContent) {
+      popContent.style.opacity = "1"
+    }
+  }, 50)
+
+  // 监听点击事件，以实现点击弹出框以外区域隐藏弹出框的功能
+  const handleClickOutside = (event: MouseEvent) => {
+    // 判断点击事件是否在弹出框以外的区域
+    if (popContent && !popContent.contains(event.target as Node) && !boxElement.contains(event.target as Node)) {
+      hidePopView()
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }
+  document.addEventListener("click", handleClickOutside)
+
+  function hidePopView() {
+    // 开启淡出动画
+    popContent?.style.setProperty("opacity", "0")
+
+    // 在过渡结束后，删除浮动框
+    setTimeout(() => {
+      // 如果浮动框没有被移除，则进行移除操作
+      if (popContent && popContent.parentNode === document.body) {
+        document.body.removeChild(popContent)
+      }
+    }, 300) // 等待 300ms，即过渡时间，然后再删除浮动框
+  }
 }

siyuan/utils/svg.ts

@@ -23,8 +23,8 @@
  */
 
 export const icons = {
-  iconTopbar: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"/></svg>`,
+  iconShare: `<symbol id="iconShare" height="1em" viewBox="0 0 448 512"><path d="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z"/></symbol>`,
   iconSetting: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>`,
   iconHome: `<svg t="1686849472828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3204" width="16" height="16"><path d="M946.488889 505.002667l-411.875556-411.591111a31.914667 31.914667 0 0 0-45.226666 0l-411.875556 411.591111c-12.003556 12.003556-18.830222 28.302222-18.830222 45.283555a64.056889 64.056889 0 0 0 64 64H166.115556v293.717334c0 17.692444 14.307556 32 32 32h249.912888v-224h111.985778v224h265.898667c17.720889 0 32-14.307556 32-32V614.286222h43.406222a64.056889 64.056889 0 0 0 45.226667-109.283555z" p-id="3205"></path></svg>`,
-  iconBrowser: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 256C0 209.4 12.47 165.6 34.27 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.19 98.47C101 38.53 174 0 256 0C350.8 0 433.5 51.48 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"/></svg>`,
+  iconBrowser: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M0 256C0 209.4 12.47 165.6 34.27 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.19 98.47C101 38.53 174 0 256 0C350.8 0 433.5 51.48 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"/></svg>`,
 }