fix: #235 支持复制分享链接，支持预览页面使用系统默认浏览器打开

components/detail/PostDetailService.vue

@@ -1,5 +1,5 @@
 <!--
-  - Copyright (c) 2022, Terwer . All rights reserved.
+  - Copyright (c) 2022-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
@@ -26,8 +26,17 @@
 <template>
   <div class="post-detail-wrap">
     <h1 v-if="inSiyuanNewWin" style="display: none">{{ post.title }}</h1>
-    <blockquote class="post-detail-id" style="display: none">
-      本文ID：{{ post.postid }}
+    <blockquote class="post-detail-id">
+      <span class="id-text">本文ID：{{ post.postid }}</span>
+      <el-button size="small" type="warning" @click="handleCopyID"
+        >{{ $t("post.detail.button.copy.id") }}
+      </el-button>
+      <el-button size="small" type="primary" @click="handleShareLink"
+        >{{ $t("post.detail.button.share.link") }}
+      </el-button>
+      <el-button size="small" type="danger" @click="handleOpenInBrowser"
+        >{{ $t("post.detail.button.browser.open") }}
+      </el-button>
     </blockquote>
     <div
       id="post-detail-content"
@@ -45,10 +54,15 @@ import { API } from "~/utils/api"
 import { API_TYPE_CONSTANTS } from "~/utils/constants/apiTypeConstants"
 import { LogFactory } from "~/utils/logUtil"
 import { isInSiyuanNewWinBrowser } from "~/utils/otherlib/siyuanBrowserUtil"
+import { isBrowser } from "~/utils/browserUtil"
+import { ElMessage } from "element-plus"
+import { useI18n } from "vue-i18n"
+import { getPageUrl, goToPage } from "~/utils/otherlib/ChromeUtil"
 
 const logger = LogFactory.getLogger(
   "components/blog/themes/default/PostDetailService.vue"
 )
+const { t } = useI18n()
 
 const props = defineProps({
   pageId: {
@@ -62,11 +76,7 @@ const inSiyuanNewWin = ref(isInSiyuanNewWinBrowser())
 /* 监听props */
 watch(
   () => props.pageId,
-  /**/ (oldValue, newValue) => {
-    // Here you can add you functionality
-    // as described in the name you will get old and new value of watched property
-    // 默认选中vuepress
-    // setBooleanConf(SWITCH_CONSTANTS.SWITCH_VUEPRESS_KEY, true)
+  (oldValue, newValue) => {
     initPage()
     logger.debug("文章详情查看初始化")
   }
@@ -75,6 +85,50 @@ watch(
 const defaultPost = new Post()
 const post = ref(defaultPost)
 
+const handleCopyID = () => {
+  if (isBrowser()) {
+    // document.execCommand("copy");
+
+    // Copy the selected text to the clipboard
+    navigator.clipboard.writeText(post.value.postid).then(
+      function () {
+        // The text has been successfully copied to the clipboard
+        ElMessage.success(t("main.copy.success"))
+      },
+      function (err) {
+        // An error occurred while copying the text
+        ElMessage.error(t("main.copy.failure") + err)
+      }
+    )
+  }
+}
+
+const handleShareLink = () => {
+  if (isBrowser()) {
+    const pageId = post.value.postid
+    const pageUrl = "/detail/index.html?id=" + pageId
+    const url = getPageUrl(pageUrl)
+    // document.execCommand("copy");
+
+    // Copy the selected text to the clipboard
+    navigator.clipboard.writeText(url).then(
+      function () {
+        // The text has been successfully copied to the clipboard
+        ElMessage.success(t("main.copy.success"))
+      },
+      function (err) {
+        // An error occurred while copying the text
+        ElMessage.error(t("main.copy.failure") + err)
+      }
+    )
+  }
+}
+
+const handleOpenInBrowser = () => {
+  const pageId = post.value.postid
+  goToPage("/detail/index.html?id=" + pageId)
+}
+
 const initPage = async () => {
   if (!props.pageId || props.pageId === "") {
     return
@@ -139,17 +193,16 @@ h2 {
 }
 
 .post-detail-wrap .post-detail-id {
-  margin-top: 10px;
   display: block;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  margin-inline-start: 4px;
-  margin-inline-end: 24px;
   border: solid 1px green;
   border-radius: 4px;
   padding: 10px;
   background: var(--custom-app-bg-color);
-  margin-bottom: 0;
+  margin: 16px 0 0;
+}
+
+.id-text {
+  margin-right: 16px;
 }
 </style>
 <style scoped></style>

locales/en_US.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022, Terwer . All rights reserved.
+ * Copyright (c) 2022-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
@@ -307,4 +307,7 @@ export default {
     "If you are using a browser plug -in, you need to download the configuration Picgo client from here: https://github.com/Molunerfinn/PicGo/releases",
   "picgo.siyuan.tip":
     "If you are using Siyuan notes pendants, you need to configure your own integration of PICGO. The pendant version of the PICGO configuration file is:`[Siyuan Workspace]/data/widgets/sy-post-publisher/lib/picgo/picgo.cfg.json`，Please refer to the official picgo document for configuration：https://picgo.github.io/PicGo-Core-Doc/zh/guide/config.html#%E6%89%8B%E5%8A%A8%E7%94%9F%E6%88%90",
+  "post.detail.button.copy.id": "Copy post ID",
+  "post.detail.button.share.link": "Copy share link",
+  "post.detail.button.browser.open": "Open with default browser",
 }

locales/zh_CN.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022, Terwer . All rights reserved.
+ * Copyright (c) 2022-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
@@ -319,4 +319,7 @@ export default {
     "您当前使用的是浏览器插件，需要从这里下载配置 PicGO 客户端：https://github.com/Molunerfinn/PicGo/releases",
   "picgo.siyuan.tip":
     "您当前使用的是思源笔记挂件，需要自行配置已经集成好的PicGO，挂件版 PicGO 配置文件在：`[思源工作空间]/data/widgets/sy-post-publisher/lib/picgo/picgo.cfg.json`，请参考PicGO官方文档进行配置：https://picgo.github.io/PicGo-Core-Doc/zh/guide/config.html#%E6%89%8B%E5%8A%A8%E7%94%9F%E6%88%90",
+  "post.detail.button.copy.id": "复制本文ID",
+  "post.detail.button.share.link": "复制分享链接",
+  "post.detail.button.browser.open": "默认浏览器打开",
 }

package.json

@@ -20,7 +20,7 @@
     "extChromeWin": "pwsh scripts/ext.ps1",
     "extChromeDev": "bash scripts/extDev.sh",
     "extFirefox": "bash scripts/extFV2.sh",
-    "newVersion": "cd scripts && python3 version.py 0.6.0 && cd ../"
+    "newVersion": "cd scripts && python3 version.py 0.6.1 && cd ../"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",

public/manifest.dev.json

@@ -1,6 +1,6 @@
 {
   "name": "开发版 - 思源笔记发布辅助工具",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "manifest_version": 3,
   "author": "terwer",
   "description": "思源笔记发布辅助工具，支持博客式只读浏览，多平台文章发布。",

public/manifest.prod.json

@@ -1,6 +1,6 @@
 {
   "name": "思源笔记发布辅助工具",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "manifest_version": 3,
   "author": "terwer",
   "icons": {

public/mv2/manifest-v2-for-firefox.json

@@ -1,6 +1,6 @@
 {
   "name": "开发版 - 思源笔记发布辅助工具",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "manifest_version": 2,
   "author": "terwer",
   "icons": {

public/widget.json

@@ -2,5 +2,5 @@
   "name": "sy-post-publisher",
   "author": "terwer",
   "url": "https://github.com/terwer/src-sy-post-publisher",
-  "version": "0.6.0"
+  "version": "0.6.1"
 }

utils/otherlib/ChromeUtil.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022, Terwer . All rights reserved.
+ * Copyright (c) 2022-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
@@ -45,7 +45,7 @@ const logger = LogFactory.getLogger()
  * @param split 例如：/，但部分情况下无需传递此参数
  *
  */
-function getPageUrl(pageUrl, split) {
+export const getPageUrl = (pageUrl, split) => {
   // While we could have used `let url = "index.html"`, using runtime.getURL is a bit more robust as
   // it returns a full URL rather than just a path that Chrome needs to be resolved contextually at
   // runtime.