feat: 支持授权码模式下的分享（实验性）

README.md

@@ -12,6 +12,8 @@ The core idea of this plugin is: `Everything is a Page` . You can set a page to
 
 [docs](https://blog.terwer.space/s/20230621001422-xsimx5v)
 
+> Important: Due to the 1.7.0+ new authorization code mode sharing dependency 2.9.3 ontology changes, this version only supports more than 2.9.3 clients, lower than this version, please use the old version of the plugin!
+
 ## Core Features
 
 * **One-click sharing**: You can share your documents to the local area network with just one click. If you need to share remotely, you can deploy it on a server using Docker and then install the plugin.

README_zh_CN.md

@@ -12,6 +12,8 @@
 
 [帮助文档](https://blog.terwer.space/s/20230621001422-xsimx5v)
 
+> 重要提示：由于 1.7.0+ 新增的 `授权码模式分享（实验性）` 依赖 293 本体改动，此版本仅支持 293 以上客户端，低于此版本，请使用旧版插件！
+
 ## 核心特色
 
 - **一键分享**：支持一键分享文档到局域网，如果需要远程分享，可使用 docker 部署在服务器，然后安装插件

components/static/Footer.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { version } from "~/package.json"
+import { DateUtil } from "zhi-common"
+import { useI18n } from "vue-i18n"
+import { useBaseUrl } from "~/plugins/renderer/useClientBaseUrl"
+import { useStaticThemeMode } from "~/composables/useStaticThemeMode"
+
+// uses
+const { t } = useI18n()
+const { colorMode, toggleDark } = await useStaticThemeMode()
+const { getHome } = useBaseUrl()
+
+// datas
+const v = ref(version)
+const nowYear = DateUtil.nowYear()
+
+// methods
+const goGithub = () => {
+  window.open("https://github.com/terwer/siyuan-plugin-blog")
+}
+
+const goAbout = () => {
+  window.open("https://blog.terwer.space/about")
+}
+
+// methods
+const goHome = async () => {
+  const home = getHome()
+  window.open(home)
+}
+</script>
+
+<template>
+  <div class="footer">
+    <div>
+      <span class="text"> &copy;2011-{{ nowYear }} </span>
+      <span class="text s-dark" @click="goGithub()">&nbsp;siyuan-plugin-blog&nbsp;</span>
+
+      <span class="text">v{{ v }}&nbsp;</span>
+
+      <span class="text s-dark" @click="goHome()">{{ t("go.home") }}</span>
+
+      <span class="text">.</span>
+      <span class="text s-dark" @click="goAbout()">{{ t("syp.about") }}</span>
+
+      <span class="text">.</span>
+      <span class="text s-dark" @click="toggleDark()">{{
+        colorMode ? t("theme.mode.light") : t("theme.mode.dark")
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.footer {
+  font-size: 12px;
+  color: #bbb;
+  text-align: center;
+  padding-bottom: 8px;
+}
+
+.footer .text {
+  vertical-align: middle;
+}
+
+.s-dark {
+  color: var(--el-color-primary);
+  cursor: pointer;
+}
+</style>

components/static/Header.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <header></header>
+</template>
+
+<style scoped></style>

composables/useStaticThemeMode.ts

@@ -0,0 +1,134 @@
+/*
+ * 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.
+ */
+
+import { BrowserUtil } from "zhi-device"
+import { createAppLogger } from "~/common/appLogger"
+
+// 创建日志记录器
+const logger = createAppLogger("use-theme-mode")
+
+export const useStaticThemeMode = async () => {
+  // 获取颜色模式和运行时配置
+  const color = useColorMode()
+  const env = useRuntimeConfig()
+  const appBase = process.env.APP_BASE
+
+  // computes
+  // 获取颜色模式并暴露 computed 属性
+  const colorMode = computed({
+    get: () => {
+      return color.value === "dark"
+    },
+    set: (value) => {
+      color.value = value ? "dark" : "light"
+    },
+  })
+
+  // methods
+  // 切换暗黑模式
+  const toggleDark = async () => {
+    colorMode.value = !colorMode.value
+    switchMode()
+  }
+
+  // 在 mounted 生命周期中处理加载后逻辑
+  // onMounted(() => {
+  // })
+
+  const siyuanV = "2.9.1"
+  const hljsV = "11.5.0"
+  const siyuanLightTheme = "Zhihu"
+  const siyuanDarkTheme = "Zhihu"
+  const siyuanThemeV = "0.0.7"
+  const detectedMode = color.preference
+  const isDarkMode = detectedMode === "dark"
+  useHead({
+    htmlAttrs: {
+      lang: "zh_CN",
+      "data-theme-mode": detectedMode,
+      "data-light-theme": siyuanLightTheme,
+      "data-dark-theme": siyuanDarkTheme,
+    },
+    link: [
+      {
+        rel: "stylesheet",
+        id: "themeDefaultStyle",
+        href: `${appBase}resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`,
+      },
+      {
+        rel: "stylesheet",
+        id: "themeStyle",
+        href: `${appBase}resources/appearance/themes/${
+          isDarkMode ? siyuanDarkTheme : siyuanLightTheme
+        }/theme.css?v=${siyuanThemeV}`,
+      },
+      {
+        rel: "stylesheet",
+        id: "protyleHljsStyle",
+        href: `${appBase}resources/stage/protyle/js/highlight.js/styles/vs${
+          isDarkMode ? "2015" : ""
+        }.min.css?v=${hljsV}`,
+      },
+    ],
+  })
+
+  // ==================================================
+  // private methods
+  // ==================================================
+  const switchMode = () => {
+    const isDarkMode = color.value === "dark"
+    setThemeMode(isDarkMode)
+  }
+
+  // 设置主题模式
+  const setThemeMode = (isDarkMode: boolean) => {
+    if (BrowserUtil.isInBrowser) {
+      setCssAndThemeMode(isDarkMode)
+      // 记录日志
+      logger.debug(isDarkMode ? "Browser Dark Mode" : "Browser Light Mode")
+      logger.info(`Auto set mode, isDark => ${isDarkMode}`)
+    }
+
+    color.preference = isDarkMode ? "dark" : "light"
+  }
+
+  // 根据浏览器模式设置 CSS 和主题模式
+  const setCssAndThemeMode = (isDarkMode: boolean) => {
+    // 默认主题适配
+    const themeDefaultStyle = document.querySelector("#themeDefaultStyle") as any
+    themeDefaultStyle.href =
+      appBase + `resources/appearance/themes/${isDarkMode ? "midnight" : "daylight"}/theme.css?v=${siyuanV}`
+
+    // 代码块适配
+    const protyleHljsStyle = document.querySelector("#protyleHljsStyle") as any
+    protyleHljsStyle.href =
+      appBase + `resources/stage/protyle/js/highlight.js/styles/vs${isDarkMode ? "2015" : ""}.min.css?v=${hljsV}`
+
+    // 颜色模式属性
+    document.documentElement.dataset.themeMode = isDarkMode ? "dark" : "light"
+  }
+
+  return { colorMode, toggleDark }
+}

layouts/default.vue

@@ -1,6 +1,4 @@
 <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"
 
@@ -32,11 +30,11 @@ onMounted(() => {
 
 <template>
   <el-container>
-    <Header />
+    <default-header />
     <el-main>
       <slot />
     </el-main>
-    <Footer />
+    <default-footer />
   </el-container>
 </template>
 

layouts/static.vue

@@ -27,9 +27,11 @@
 
 <template>
   <el-container>
+    <static-header />
     <el-main>
       <slot />
     </el-main>
+    <static-footer />
   </el-container>
 </template>
 

pages/share.vue

@@ -5,7 +5,7 @@ import { createAppLogger } from "~/common/appLogger"
 import { useShareOptionToggle } from "~/composables/useShareOptionToggle"
 import copy from "copy-to-clipboard"
 import { useSiyuanApi } from "~/composables/api/useSiyuanApi"
-import { PostStatusEnum } from "zhi-blog-api"
+import { Post, PostStatusEnum } from "zhi-blog-api"
 import { JsonUtil, StrUtil } from "zhi-common"
 import { useMethodAsync } from "~/composables/useMethodAsync"
 import { useMethod } from "~/composables/useMethod"
@@ -94,6 +94,7 @@ const handleShare = (val: any) => {
         // 自适应高度
         sendMessageToParent("updateHeight")
 
+        const shareJsonFile = `/data/public/siyuan-blog/${id.value}.json`
         if (val) {
           // 分享
           await kernelApi.setBlockAttrs(id.value, {
@@ -103,8 +104,12 @@ const handleShare = (val: any) => {
 
           // 保存一份 MD 文档到 public 解决授权码问题
           if (formData.accessCodeEnabled) {
-            const sDom = post.editorDom ?? "<h1>404 Not Found</h1>"
-            await kernelApi.saveTextData(`/data/public/s/${id.value}.html`, sDom)
+            // 只暴露有限的属性
+            const sPost = new Post()
+            sPost.title = post.title
+            sPost.editorDom = post.editorDom
+            const sJson = JSON.stringify(sPost) ?? "{}"
+            await kernelApi.saveTextData(shareJsonFile, sJson)
             logger.info("save shared md to public")
           } else {
             logger.info("shared in public mode")
@@ -118,7 +123,7 @@ const handleShare = (val: any) => {
 
           // 删除 MD
           if (formData.accessCodeEnabled) {
-            await kernelApi.removeFile(`/data/public/s/${id.value}.html`)
+            await kernelApi.removeFile(shareJsonFile)
             logger.info("removed md due to disable sharing")
           } else {
             logger.info("disable share in public mode")