feat:#85 Google插件扩展-文章详情页支持新窗口单独预览

public/manifest.json

@@ -15,6 +15,7 @@
     {
       "resources": [
         "blog/index.html",
+        "detail/index.html",
         "index.html"
       ],
       "matches": [

src/components/Detail.vue

@@ -0,0 +1,15 @@
+<template>
+  <BlogDetail :page-id="undefined"/>
+</template>
+
+<script lang="ts">
+import BlogDetail from "./blog/BlogDetail.vue";
+
+export default {
+  name: "Detail",
+  components: {BlogDetail}
+}
+</script>
+
+<style scoped>
+</style>

src/components/blog/BlogDetail.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="post-detail-content-box">
+    <div class="btn-publish">
+      <el-button size="small" type="primary" @click="handlePublish">发布到其他平台</el-button>
+    </div>
+
+    <!-- 文章详情 -->
+    <DefaultPostDetailService :page-id="pid"/>
+
+    <locale-changer/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {goToPage} from "../../lib/chrome/ChromeUtil";
+import {getPageId} from "../../lib/platform/siyuan/siyuanUtil";
+import {onMounted, ref} from "vue";
+import LocaleChanger from "../tab/ChangeLocale.vue";
+
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
+
+const pid = ref("")
+
+const handlePublish = (e: any) => {
+  e.preventDefault()
+  goToPage("/index.html?id=" + pid.value, "/")
+}
+
+const initPage = async () => {
+  const pageId = await getPageId(true, props.pageId);
+  if (!pageId || pageId === "") {
+    return
+  }
+  pid.value = pageId
+}
+
+onMounted(async () => {
+  await initPage()
+})
+</script>
+
+<script lang="ts">
+import DefaultPostDetailService from "./themes/default/DefaultPostDetailService.vue";
+
+export default {
+  name: "BlogDetail",
+  components: {DefaultPostDetailService}
+}
+</script>
+
+<style scoped>
+.post-detail-content-box {
+  padding: 10px;
+}
+
+.post-detail-content-box .btn-publish {
+  /*margin-left: 10px;*/
+  cursor: pointer;
+  padding: 10px 10px 0 0;
+}
+</style>

src/components/blog/themes/default/DefaultMain.vue

@@ -251,7 +251,7 @@ const handleNewWinEdit = (index: number, row: any) => {
         type: 'warning',
       }
   ).then(async () => {
-    goToPage("/index.html?id=" + row.postid)
+    goToPage("/index.html?id=" + row.postid, "/")
     console.log(index, row)
   }).catch(() => {
     // ElMessage({

src/components/blog/themes/default/DefaultPostDetail.vue

@@ -14,12 +14,8 @@
         <el-button size="small" type="primary" @click="handleNewWinPublish">新窗口发布到其他平台</el-button>
       </div>
 
-      <div class="post-detail-content-box">
-        <div id="post-detail-content"
-             v-highlight
-             v-html="post.description"
-        ></div>
-      </div>
+      <!-- 文章详情 -->
+      <DefaultPostDetailService :page-id="props.post.postid"/>
     </div>
   </div>
 </template>
@@ -28,6 +24,7 @@
 import {Post} from "../../../../lib/common/post";
 import {ArrowLeft} from '@element-plus/icons-vue'
 import {goToPage} from "../../../../lib/chrome/ChromeUtil";
+import DefaultPostDetailService from "./DefaultPostDetailService.vue";
 
 const props = defineProps({
   post: {
@@ -48,7 +45,7 @@ const handlePublish = (e: any) => {
 }
 const handleNewWinPublish = (e: any) => {
   e.preventDefault()
-  goToPage("/index.html?id=" + props.post?.postid)
+  goToPage("/index.html?id=" + props.post?.postid, "/")
 }
 </script>
 
@@ -58,15 +55,6 @@ export default {
 }
 </script>
 
-<style>
-/* 预览样式 */
-#post-detail-content {
-}
-
-#post-detail-content img {
-  max-width: 99%;
-}
-</style>
 <style scoped>
 #post-detail-body {
   min-width: 600px !important;

src/components/blog/themes/default/DefaultPostDetailService.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="post-detail-content"
+       v-highlight
+       v-html="post.description"
+  ></div>
+</template>
+
+<script lang="ts" setup>
+import {Post} from "../../../../lib/common/post";
+import {onMounted, ref, watch} from "vue";
+import {API} from "../../../../lib/api";
+import {API_TYPE_CONSTANTS} from "../../../../lib/constants/apiTypeConstants";
+import logUtil from "../../../../lib/logUtil";
+
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
+
+/*监听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)
+  initPage();
+  logUtil.logInfo("文章详情查看初始化")
+})
+
+const defaultPost = new Post()
+const post = ref(defaultPost)
+
+const initPage = async () => {
+  const api = new API(API_TYPE_CONSTANTS.API_TYPE_SIYUAN)
+  const siyuanPost = await api.getPost(props.pageId || "")
+  post.value = siyuanPost
+}
+
+onMounted(async () => {
+  await initPage()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: "DefaultPostDetailService"
+}
+</script>
+
+<style>
+/* 预览样式 */
+#post-detail-content {
+}
+
+#post-detail-content img {
+  max-width: 99%;
+}
+</style>
+<style scoped>
+
+</style>

src/components/tab/PlantformMain.vue

@@ -4,25 +4,25 @@
       <vuepress-main :is-reload="isReloadVuepressMain" :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.jvue')" v-if="jvueEnabled">
-      <j-vue-main/>
+      <j-vue-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.conf')" v-if="confEnabled">
-      <confluence-main/>
+      <confluence-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.cnblogs')" v-if="cnblogsEnabled">
       <cnblogs-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.wordpress')" v-if="wordpressEnabled">
-      <wordpress-main/>
+      <wordpress-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.liandi')" v-if="liandiEnabled">
-      <liandi-main/>
+      <liandi-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.yuque')" v-if="yuqueEnabled">
-      <yuque-main/>
+      <yuque-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.kms')" v-if="kmsEnabled">
-      <kms-main/>
+      <kms-main :page-id="props.pageId"/>
     </el-tab-pane>
 
     <!-- 动态平台发布 -->
@@ -32,7 +32,7 @@
     </el-tab-pane>
     <el-tab-pane v-for="wcfg in formData.wordpressArray"
                  :label="wcfg.plantformName+'_'+wcfg.plantformType.toUpperCase().substring(0,1)">
-      <metaweblog-main :api-type="wcfg.plantformKey"/>
+      <metaweblog-main :api-type="wcfg.plantformKey" :page-id="props.pageId"/>
     </el-tab-pane>
   </el-tabs>
 </template>

src/components/tab/main/CommonBlogMain.vue

@@ -233,7 +233,7 @@ const complexMode = () => {
 }
 
 const initPage = async () => {
-  const pageId = await getPageId(true);
+  const pageId = await getPageId(true, props.pageId);
   if (!pageId || pageId === "") {
     return
   }

src/components/tab/main/commonblogmainadaptor/KmsMain.vue

@@ -1,12 +1,19 @@
 <template>
-  <CommonBlogMain :api-type="apiType"/>
+  <CommonBlogMain :api-type="apiType" :page-id="props.pageId"/>
 </template>
 
 <script lang="ts" setup>
 import {ref} from "vue";
 import {API_TYPE_CONSTANTS} from "../../../../lib/constants/apiTypeConstants";
 
 const apiType = ref(API_TYPE_CONSTANTS.API_TYPE_KMS)
+
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
 </script>
 
 <script lang="ts">

src/components/tab/main/commonblogmainadaptor/LiandiMain.vue

@@ -1,12 +1,19 @@
 <template>
-  <CommonBlogMain :api-type="apiType"/>
+  <CommonBlogMain :api-type="apiType" :page-id="props.pageId"/>
 </template>
 
 <script lang="ts" setup>
 import {ref} from "vue";
 import {API_TYPE_CONSTANTS} from "../../../../lib/constants/apiTypeConstants";
 
 const apiType = ref(API_TYPE_CONSTANTS.API_TYPE_LIANDI)
+
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
 </script>
 
 <script lang="ts">

src/components/tab/main/commonblogmainadaptor/YuqueMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <CommonBlogMain :api-type="apiType"/>
+  <CommonBlogMain :api-type="apiType" :page-id="props.pageId"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,6 +8,12 @@ import {API_TYPE_CONSTANTS} from "../../../../lib/constants/apiTypeConstants";
 
 const apiType = ref(API_TYPE_CONSTANTS.API_TYPE_YUQUE)
 
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
 </script>
 
 <script lang="ts">

src/components/tab/main/metaweblogmainadaptor/ConfluenceMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <metaweblog-main :api-type="apiType" :use-adaptor="true"/>
+  <metaweblog-main :api-type="apiType" :use-adaptor="true" :page-id="props.pageId"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,6 +8,12 @@ import {ref} from "vue";
 
 const apiType = ref(API_TYPE_CONSTANTS.API_TYPE_CONFLUENCE)
 
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
 </script>
 
 <script lang="ts">

src/components/tab/main/metaweblogmainadaptor/JVueMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <metaweblog-main :api-type="apiType"/>
+  <metaweblog-main :api-type="apiType" :page-id="props.pageId"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,6 +8,12 @@ import {ref} from "vue";
 
 const apiType = ref(API_TYPE_CONSTANTS.API_TYPE_JVUE)
 
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
 </script>
 
 <script lang="ts">

src/components/tab/main/metaweblogmainadaptor/WordpressMain.vue

@@ -1,5 +1,5 @@
 <template>
-  <metaweblog-main :api-type="apiType"/>
+  <metaweblog-main :api-type="apiType" :page-id="props.pageId"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,6 +8,12 @@ import {ref} from "vue";
 
 const apiType = ref(API_TYPE_CONSTANTS.API_TYPE_WORDPRESS)
 
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
 </script>
 
 <script lang="ts">