Merge pull request #122 from terwer/dev

feat: PC客户端支持切换ip [实验性]

components/default/Detail.vue

@@ -49,7 +49,7 @@ await setCurrentPost(props.pageId)
 
 // datas
 const attrs = JsonUtil.safeParse<any>(currentPost.post?.attrs ?? "{}", {})
-const shareEnabled = attrs["custom-publish-status"] === "publish"
+const shareEnabled = attrs["custom-publish-status"] === "publish" || attrs["custom-publish-status"] === "preview"
 const isExpires = checkExpires(attrs)
 logger.info(`current document status,shareEnabled => ${shareEnabled}, isExpires => ${isExpires}`)
 if (!props.overrideSeo) {

components/default/Footer.vue

@@ -3,7 +3,6 @@ import { version } from "~/package.json"
 import { DateUtil } from "zhi-common"
 import { useI18n } from "vue-i18n"
 import { useThemeMode } from "~/composables/useThemeMode"
-import { useSiyuanDevice } from "~/composables/useSiyuanDevice"
 import { useBaseUrl } from "~/plugins/renderer/useClientBaseUrl"
 
 // uses

composables/api/usePostApi.ts

@@ -25,13 +25,14 @@
 
 import { createAppLogger } from "~/common/appLogger"
 import { SiYuanApiAdaptor, SiyuanConfig } from "zhi-siyuan-api"
+import { useSiyuanApi } from "~/composables/api/useSiyuanApi"
 
 /**
  * 文档相关
  */
 export const usePostApi = () => {
   const logger = createAppLogger("use-post")
-  const env = useRuntimeConfig()
+  const { blogApi } = useSiyuanApi()
 
   const getPost = async (id: string, useSlug?: boolean, skipBody?: boolean) => {
     logger.info("Loading post from remote api...")
@@ -41,8 +42,6 @@ export const usePostApi = () => {
     // logger.info("siyuanApiUrl=>", env.public.siyuanApiUrl)
     // logger.info("siyuanAuthToken=>", env.siyuanAuthToken)
 
-    const siyuanConfig = new SiyuanConfig(env.public.siyuanApiUrl, env.siyuanAuthToken)
-    const blogApi = new SiYuanApiAdaptor(siyuanConfig)
     const postid = id.replace(/\.html$/, "")
     return await blogApi.getPost(postid, useSlug, skipBody)
   }

composables/api/useSiyuanApi.ts

@@ -24,19 +24,36 @@
  */
 
 import { SiYuanApiAdaptor, SiyuanConfig, SiyuanKernelApi } from "zhi-siyuan-api"
+import { createAppLogger } from "~/common/appLogger"
 
 /**
  * 通用 Siyuan API 封装
  */
 export const useSiyuanApi = () => {
+  const logger = createAppLogger("use-siyuan-api")
   const env = useRuntimeConfig()
 
   const siyuanConfig = new SiyuanConfig(env.public.siyuanApiUrl, env.siyuanAuthToken)
+  siyuanConfig.cookie = env.siyuanCookie
   const blogApi = new SiYuanApiAdaptor(siyuanConfig)
   const kernelApi = new SiyuanKernelApi(siyuanConfig)
 
+  const isStorageViaSiyuanApi = () => {
+    // docker - 在 .env.docker 配置 NUXT_PUBLIC_DEFAULT_TYPE=siyuan
+    // vercel - 在环境变量配置 NUXT_PUBLIC_DEFAULT_TYPE=siyuan
+    // node - 启动参数加 NUXT_PUBLIC_DEFAULT_TYPE=siyuan node NUXT_PUBLIC_SIYUAN_API_URL=http://127.0.0.1:6806
+    // 插件SPA(PC客户端) - nuxt.siyuan.config.ts 写死 NUXT_PUBLIC_DEFAULT_TYPE: siyuan
+    // 插件SPA(Docker浏览器客户端) - nuxt.siyuan.config.ts 写死 NUXT_PUBLIC_DEFAULT_TYPE: siyuan
+    // 插件SPA(本地客户端浏览器) - nuxt.siyuan.config.ts 写死 NUXT_PUBLIC_DEFAULT_TYPE: siyuan
+    const storeViaSiyuanApi = env.public.defaultType === "siyuan"
+    logger.info("defaultType=>", env.public.defaultType)
+    logger.info("storeViaSiyuanApi=>", String(storeViaSiyuanApi))
+    return storeViaSiyuanApi
+  }
+
   return {
     blogApi,
     kernelApi,
+    isStorageViaSiyuanApi,
   }
 }

composables/useSiyuanDevice.ts

@@ -34,7 +34,6 @@ export const useSiyuanDevice = () => {
 
   const isInSiyuanMainWin = () => {
     const deviceType = DeviceDetection.getDevice()
-    // 三种情况，主窗口、挂件、新窗口
     const isSiyuanOrSiyuanNewWin = deviceType === DeviceTypeEnum.DeviceType_Siyuan_MainWin
     logger.debug("deviceType=>", deviceType)
     logger.debug("isSiyuanOrSiyuanNewWin=>", String(isSiyuanOrSiyuanNewWin))
@@ -43,7 +42,6 @@ export const useSiyuanDevice = () => {
 
   const isInSiyuanWidget = () => {
     const deviceType = DeviceDetection.getDevice()
-    // 三种情况，主窗口、挂件、新窗口
     const isSiyuanOrSiyuanNewWin = deviceType === DeviceTypeEnum.DeviceType_Siyuan_Widget
     logger.debug("deviceType=>", deviceType)
     logger.debug("isSiyuanOrSiyuanNewWin=>", String(isSiyuanOrSiyuanNewWin))
@@ -52,7 +50,6 @@ export const useSiyuanDevice = () => {
 
   const isInSiyuanOrSiyuanNewWin = () => {
     const deviceType = DeviceDetection.getDevice()
-    // 三种情况，主窗口、挂件、新窗口
     const isSiyuanOrSiyuanNewWin =
       deviceType === DeviceTypeEnum.DeviceType_Siyuan_MainWin ||
       deviceType === DeviceTypeEnum.DeviceType_Siyuan_NewWin ||

docs.md

@@ -82,6 +82,11 @@ docker push terwer/nuxt3-blog:latest
 docker compose -f docker-compose-hub.yml up --build --remove-orphans
 ```
 
+```
+Error response from daemon: network 84c2ef99951fa08c37c3bf3f6b484bf149bfb283142a306ba285af4053961eaa not found 
+--force-recreate
+```
+
 搭配思源：https://github.com/terwer/my-note-docker/blob/main/docker-compose.yml
 
 直接使用已打包的，参考 `docker-compose-hub.yml`，可能需要配置 `.env.docker`，可以复制 `.env.docker.example`，然后修改即可

locales/en_US.ts

@@ -91,4 +91,7 @@ export default {
   "share.link.expires.error":
     "Please enter a number that must be legal and no older than 7 days! For perpetual effect, enter 0",
   "go.home": "Go home",
+  "form.select": "Select",
+  "form.nodata": "No data",
+  "change.ip.title": "Change IP",
 }

locales/zh_CN.ts

@@ -89,4 +89,7 @@ export default {
   "blog.index.home.exists": "对不起，该页面已设置为主页，请先移除主页再取消分享",
   "share.link.expires.error": "请输入必须为一个合法且不大于 7 天的数字！如需永久生效，请输入0",
   "go.home": "打开主页",
+  "form.select": "请选择",
+  "form.nodata": "暂无数据",
+  "change.ip.title": "切换IP",
 }

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: {
@@ -47,7 +54,7 @@ export default defineNuxtConfig({
     define: {
       "process.env.DEV_MODE": `"${isDev}"`,
       "process.env.APP_BASE": `"${appBase}"`,
-      "process.env.SSR": `"true"`,
+      "process.env.SSR": `"false"`,
     },
     plugins: [],
   },
@@ -58,6 +65,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: {
@@ -94,11 +109,17 @@ export default defineNuxtConfig({
 
   // 环境变量
   runtimeConfig: {
-    siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    // siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanAuthToken: "",
+    // siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
+    siyuanCookie: "",
     public: {
-      defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE ?? "siyuan",
-      siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL ?? "http://127.0.0.1:6806",
-      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",
     },
   },
 })

nuxt.node.config.ts

@@ -95,6 +95,7 @@ export default defineNuxtConfig({
   // 环境变量
   runtimeConfig: {
     siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
     public: {
       defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE ?? "siyuan",
       siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL ?? "http://127.0.0.1:6806",

nuxt.siyuan.config.ts

@@ -111,6 +111,8 @@ export default defineNuxtConfig({
   runtimeConfig: {
     // siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
     siyuanAuthToken: "",
+    // siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
+    siyuanCookie: "",
     public: {
       // defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
       defaultType: "siyuan",

nuxt.vercel.config.ts

@@ -95,6 +95,7 @@ export default defineNuxtConfig({
   // 环境变量
   runtimeConfig: {
     siyuanAuthToken: process.env.NUXT_SIYUAN_AUTH_TOKEN,
+    siyuanCookie: process.env.NUXT_SIYUAN_COOKIE,
     public: {
       defaultType: process.env.NUXT_PUBLIC_DEFAULT_TYPE,
       siyuanApiUrl: process.env.NUXT_PUBLIC_SIYUAN_API_URL,

pages/share.vue

@@ -10,6 +10,7 @@ import { JsonUtil, StrUtil } from "zhi-common"
 import { useMethodAsync } from "~/composables/useMethodAsync"
 import { useMethod } from "~/composables/useMethod"
 import { sendMessageToParent } from "~/utils/innerIframeEvent"
+import { getAllIps } from "~/utils/urlUtil"
 
 const logger = createAppLogger("share-page")
 const { t } = useI18n()
@@ -40,6 +41,12 @@ const seoMeta = {
 } as any
 useSeoMeta(seoMeta)
 
+// 初始化 ip
+const url = new URL(origin.value)
+const hostname = url.hostname
+const ips = getAllIps()
+ips.push(hostname)
+
 // datas
 const attrs = JsonUtil.safeParse<any>(post?.attrs ?? "{}", {})
 const formData = reactive({
@@ -48,6 +55,10 @@ const formData = reactive({
   optionEnabled: false,
   expiredTime: attrs["custom-expires"] ?? "0",
   isHome: setting.homePageId === id.value,
+  ip: hostname,
+  ipList: ips.map((ip: string) => {
+    return { value: ip, label: ip }
+  }),
 })
 const { optionState, optionToggle } = useShareOptionToggle(formData.optionEnabled)
 
@@ -135,6 +146,12 @@ const handleExpiresTime = async () => {
     }
   )
 }
+
+const handleIpChange = (val: string) => {
+  const url = new URL(formData.shareLink)
+  url.hostname = val
+  formData.shareLink = url.toString()
+}
 </script>
 
 <template>
@@ -195,6 +212,20 @@ const handleExpiresTime = async () => {
         <div class="item-right"></div>
       </div>
 
+      <div v-if="optionState" class="share-item">
+        <div class="item-left">
+          <span class="change-ip-title">{{ t("change.ip.title") }}</span>
+          <el-select
+            v-model="formData.ip"
+            class="m-2"
+            :placeholder="t('form.select')"
+            no-data-text="t('form.nodata')"
+            @change="handleIpChange"
+          >
+            <el-option v-for="item in formData.ipList" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </div>
       <div v-if="optionState" class="share-item expires-link-item">
         <div class="expires-link expires-link-label">
           {{ t("share.other.option.link.expires") }}
@@ -302,4 +333,6 @@ const handleExpiresTime = async () => {
   .el-page-header__content
     ::v-deep(.el-switch)
       display inline-flex
+.change-ip-title
+  margin-right 10px
 </style>

plugins/renderer/useServerAssets.ts

@@ -41,8 +41,6 @@ export const useServerAssets = () => {
    * @returns {string} 第一个<img>元素的src属性值，如果不存在则返回空字符串
    */
   const getFirstImageSrc = (html: string): string => {
-    logger.info(`getFirstImageSrc called with argument ${html}`) // 记录日志
-
     // 使用 cheerio 加载 HTML 代码
     const $ = cheerio.load(html)
 

siyuan/iframeEvent.ts

@@ -28,8 +28,7 @@ import { createAppLogger } from "~/common/appLogger"
 import SiyuanBlog from "~/siyuan/index"
 
 const logger = createAppLogger("iframe-events")
-let added = false
-const adjustIframeHeight = (iframeId: string, customHeight?: number) => {
+const adjustIframeHeight = (pluginInstance: SiyuanBlog, iframeId: string, customHeight?: number) => {
   const iframe = document.getElementById(iframeId) as HTMLIFrameElement
   let counter = 0
   let lastHeight = "0px" // 将初始高度设为 "0px"
@@ -41,9 +40,9 @@ const adjustIframeHeight = (iframeId: string, customHeight?: number) => {
     const iframeBody = iframe?.contentWindow?.document.getElementById("__nuxt") as HTMLElement
     let height = `${customHeight ?? iframeBody?.scrollHeight ?? defaultHeight}px`
     if (height === lastHeight) {
-      if (!added) {
+      if (!pluginInstance.isAddHeight) {
         height = height + 10
-        added = true
+        pluginInstance.isAddHeight = true
         logger.info(`Added 10px height for ${iframeId}`)
       }
       counter++
@@ -85,7 +84,10 @@ export const registerIframeEvent = (pluginInstance: SiyuanBlog) => {
       // 判断消息类型
       if (data.type === "updateHeight") {
         logger.info(`Try to cancel loading`)
-        pluginInstance.popView.cancelLoading()
+        if (!pluginInstance.popViewLoaded) {
+          pluginInstance.popView.cancelLoading()
+          pluginInstance.popViewLoaded = true
+        }
 
         logger.info(`Received update height message from iframe`)
         const height = data.height
@@ -94,7 +96,7 @@ export const registerIframeEvent = (pluginInstance: SiyuanBlog) => {
           iframe.height = `${height}px`
           logger.info(`Updated iframe height to ${height}px`)
         } else {
-          adjustIframeHeight(popContentIframeId)
+          adjustIframeHeight(pluginInstance, popContentIframeId)
           logger.info(`Auto adjust iframe height to ${height}px`)
         }
       } else {

siyuan/index.ts

@@ -35,6 +35,8 @@ export default class SiyuanBlog extends Plugin {
   public isMobile
   public logger
   public popView: any
+  public popViewLoaded = false
+  public isAddHeight = false
 
   constructor(options: { app: App; id: string; name: string; i18n: IObject }) {
     super(options)