feat: 在线分享第一版-新增分享页面

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: {
@@ -51,6 +58,14 @@ 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: {

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "serve": "bash scripts/serve.sh",
     "dev": "bash scripts/dev.sh",
+    "pluginDev": "zhi-build --watch",
     "build": "bash scripts/build.sh",
     "nodeBuild": "bash scripts/node.sh",
     "vercelBuild": "bash scripts/vercel.sh",

pages/setting.vue

@@ -15,8 +15,14 @@ const { t } = useI18n()
         <default-setting-change-local />
       </el-tab-pane>
     </el-tabs>
-    <el-alert :title="t('setting.need.reload')" type="warning" />
+
+    <div class="setting-tips">
+      <el-alert :title="t('setting.need.reload')" type="warning" />
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="stylus" scoped>
+.setting-tips
+  margin-top 20px
+</style>

siyuan/customElement.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+/**
+ * 绘制图区
+ * @returns element
+ */
+export const viewElement = (pageUrl: string) => {
+  // 包裹图层
+  const divElement = document.createElement("div")
+  divElement.id = "blog-container"
+
+  // 创建 <style> 元素
+  const style = document.createElement("style")
+  style.innerHTML = `
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  `
+
+  // 创建 <iframe> 元素
+  const iframe = document.createElement("iframe")
+  iframe.src = pageUrl
+  iframe.width = "100%"
+
+  // 将 <style> 和 <iframe> 元素添加到父级容器中
+  divElement.appendChild(style)
+  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>`

siyuan/index.styl

@@ -35,4 +35,8 @@
   width 12px
   height 12px
   margin-right 10px
-  margin-top 2px
+  margin-top 2px
+
+#blog-container
+  width 750px
+  height 550px

siyuan/topbar.ts

@@ -26,7 +26,8 @@ import SiyuanBlog from "./index"
 import { icons } from "./utils/svg"
 import { Dialog, Menu } from "siyuan"
 import PageUtil from "~/siyuan/utils/pageUtil"
-import {getAvailableOrigin} from "~/siyuan/utils/utils";
+import { getAvailableOrigin } from "~/siyuan/utils/utils"
+import { contentHtml, viewElement } from "~/siyuan/customElement"
 
 /**
  * 顶栏按钮
@@ -41,13 +42,16 @@ export function initTopbar(pluginInstance: SiyuanBlog) {
     icon: icons.iconTopbar,
     title: pluginInstance.i18n.siyuanBlog,
     position: "right",
-    callback: () => {},
+    callback: async (evt) => {
+      const sharePage = "/plugins/siyuan-blog/#/share"
+      await addOpenView(pluginInstance, evt, sharePage)
+    },
   })
 
-  topBarElement.addEventListener("click", async () => {
-    const sharePage = "/plugins/siyuan-blog/#/share"
-    showPage(pluginInstance, sharePage, pluginInstance.i18n.shareOptions)
-  })
+  // topBarElement.addEventListener("click", async () => {
+  //   const sharePage = "/plugins/siyuan-blog/#/share"
+  //   showPage(pluginInstance, sharePage, pluginInstance.i18n.shareOptions)
+  // })
 
   // 添加右键菜单
   topBarElement.addEventListener("contextmenu", async () => {
@@ -113,21 +117,27 @@ export const showSettingPage = (pluginInstance: SiyuanBlog) => {
 
 const showPage = (pluginInstance: SiyuanBlog, pageUrl: string, title?: string) => {
   pluginInstance.logger.info("open page =>", pageUrl)
-
-  const contentHtml = `<style>
-        iframe {
-          width: 100%;
-          height: 100%;
-          border: none;
-        }
-        </style>
-        <iframe src="${pageUrl}" width="100%"></iframe>`
-
   new Dialog({
     title: `${pluginInstance.i18n.siyuanBlog}${title ? " - " + title : ""}`,
     transparent: false,
-    content: contentHtml,
+    content: contentHtml(pageUrl),
     width: "60%",
     height: "550px",
   } as any)
 }
+
+/**
+ * 分享选项显示区域
+ */
+const addOpenView = async (pluginInstance: SiyuanBlog, evt: MouseEvent, pageUrl: string) => {
+  pluginInstance.logger.info("show page =>", pageUrl)
+  const menu = new Menu()
+  menu.addItem({ element: viewElement(pageUrl) })
+  menu.open({
+    x: evt.x,
+    y: evt.y,
+    h: 550,
+    w: 750,
+    isLeft: true,
+  })
+}