feat:#85 Google插件扩展-当前页面使用发布工具

README.md

@@ -123,24 +123,21 @@ manual `h(...)` calls), you can enable Volar's Take Over mode by following these
 
 You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
 
-## Devlopment
-
-```bash
-yarn
-yarn dev
-```
-
 ## Tool Version
 
 |Tool|Version|
 | ------| ----------|
 |node|v16.16.0|
 |yarn|1.22.19|
 
-## Init Project
+## Devlopment
 
 ```bash
-yarn create vite
+npm i -g vercel
+npm i -g yarn
+# yarn create vite
+yarn
+yarn vdev
 ```
 
 ## Deploy
@@ -157,11 +154,4 @@ yarn w
 yarn e
 ```
 
-## ~~Vercel CLI~~
-
-```
-npm i -g vercel
-```
-
-[Vercel CLI](https://vercel.com/docs/cli#introduction/installing-the-cli)
-
+[Vercel CLI](https://vercel.com/docs/cli#introduction/installing-the-cli)

package.json

@@ -6,6 +6,7 @@
   "packageManager": "yarn@1.22.19",
   "scripts": {
     "dev": "vite",
+    "vdev": "vercel dev",
     "build": "vue-tsc --noEmit && vite build",
     "build-siyuan": "vue-tsc --noEmit && BUILD_TYPE=siyuan vite build",
     "preview": "vite preview",

src/components/PublishService.vue

@@ -1,13 +1,13 @@
 <template>
   <el-tabs :model-value="defaultTab" tab-position="left" @tab-change="serviceTabChange">
     <el-tab-pane name="plantform-main" :label="$t('service.tab.publish.service')">
-      <plantform-main :is-reload="isReloadMain"/>
+      <plantform-main :is-reload="isReloadMain" :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane name="plantform-setting" :label="$t('service.tab.publish.setting')">
       <plantform-setting :is-reload="isReloadSetting"/>
     </el-tab-pane>
     <el-tab-pane name="post-bind" :label="$t('service.tab.post.bind')">
-      <post-bind :is-reload="isReloadPostBind"/>
+      <post-bind :is-reload="isReloadPostBind" :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane name="service-switch" :label="$t('service.tab.service.switch')">
       <service-switch/>
@@ -32,6 +32,17 @@ let isReloadSetting = ref(false)
 let isReloadMain = ref(false)
 let isReloadPostBind = ref(false)
 
+const props = defineProps({
+  isReload: {
+    type: Boolean,
+    default: false
+  },
+  pageId: {
+    type: String,
+    default: undefined
+  }
+})
+
 const serviceTabChange = (name: string) => {
   logUtil.logInfo("serviceTabChange=>", name)
   if ("plantform-setting" == name) {
@@ -50,7 +61,7 @@ const serviceTabChange = (name: string) => {
 }
 
 onMounted(() => {
-  defaultTab.value = getQueryString("tab") || defaultTab.value
+  // defaultTab.value = getQueryString("tab") || defaultTab.value
 })
 
 </script>

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

@@ -5,21 +5,28 @@
         <span class="text"> &copy;2011-2022 </span>
         <span class="s-dark" @click="goGithub()"> sy-post-publisher </span>
         <span class="text"> v0.0.3. </span>
-        <span class="text s-dark" @click="toggleDark()">{{ isDark ? $t('theme.mode.light') : $t('theme.mode.dark') }}</span>
+        <span class="text s-dark" @click="toggleDark()">{{
+            isDark ? $t('theme.mode.light') : $t('theme.mode.dark')
+          }}</span>
+        <span class="text">.</span> <span class="text s-dark" @click="newWin()"> 新窗口打开 </span>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import {useDark, useToggle} from "@vueuse/core";
+import {goToPage} from "../../../../lib/chrome/ChromeUtil";
 
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
 
 const goGithub = () => {
   window.open("https://github.com/terwer/src-sy-post-publisher")
 }
+const newWin = () => {
+  goToPage("/blog/index.html")
+}
 </script>
 
 <script lang="ts">
@@ -35,7 +42,7 @@ export default {
   text-align: center;
 }
 
-.footer .text{
+.footer .text {
   vertical-align: middle;
 }
 

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="post-list" v-if="!showDetail">
+    <div id="post-list" v-if="showHome">
       <el-autocomplete
           class="s-input"
           v-model="state"
@@ -36,13 +36,15 @@
         <!--
         <el-table-column prop="dateCreated" label="发布时间" width="150"/>
         -->
-        <el-table-column align="right" width="150">
+        <el-table-column align="right" width="250">
           <template #header>
             <div style="text-align: center;">操作</div>
           </template>
           <template #default="scope">
             <el-button size="small" @click="handleView(scope.$index, scope.row)">预览</el-button>
             <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">发布</el-button>
+            <el-button size="small" type="primary" @click="handleNewWinEdit(scope.$index, scope.row)">新窗口发布
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -60,13 +62,17 @@
       />
 
       <el-alert class="top-data-tip"
-                title="温馨提示：1. 请保证思源笔记启动并且打开伺服，默认伺服地址：http://127.0.0.1:6806。2. 发布操作会打开新页面，此窗口将关闭。"
+                title="温馨提示：请保证思源笔记启动并且打开伺服，默认伺服地址：http://127.0.0.1:6806。"
                 type="info" :closable="false"/>
     </div>
 
-    <div id="post-detail" v-else>
+    <div id="post-detail" v-if="showDetail">
       <DefaultPostDetail :post="postDetail" @on-change="emitFn"/>
     </div>
+
+    <div id="post-publisher" v-if="showPublish">
+      <default-publish :publish-data="publishData" @on-change="emitPublishBackFn"/>
+    </div>
   </div>
 </template>
 
@@ -77,16 +83,21 @@ import {formatIsoToZhDate} from "../../../../lib/util";
 import {API} from "../../../../lib/api";
 import {API_TYPE_CONSTANTS} from "../../../../lib/constants/apiTypeConstants";
 import {mdToHtml, removeTitleNumber} from "../../../../lib/htmlUtil";
-import {goToPage} from "../../../../lib/chrome/ChromeUtil";
-import {ElMessageBox} from "element-plus/es";
 import {useI18n} from "vue-i18n";
 import {getRootBlocksCount} from "../../../../lib/platform/siyuan/siYuanApi";
-import DefaultPostDetail from "./DefaultPostDetail.vue";
 import {Post} from "../../../../lib/common/post";
+import DefaultPostDetail from "./DefaultPostDetail.vue";
+import DefaultPublish from "./DefaultPublish.vue";
+import {goToPage} from "../../../../lib/chrome/ChromeUtil";
+import {ElMessageBox} from "element-plus";
 
 const {t} = useI18n()
+
+const showHome = ref(true)
 const showDetail = ref(false)
+const showPublish = ref(false)
 const postDetail = ref()
+const publishData = ref()
 
 // search
 interface LinkItem {
@@ -169,17 +180,54 @@ const handleView = (index: number, row: any) => {
   post.description = row.description
   postDetail.value = post
 
+  showPublish.value = false;
+  showHome.value = false;
   showDetail.value = true;
 }
 
 const emitFn = () => {
+  showPublish.value = false;
+  showHome.value = true;
   showDetail.value = false;
   // console.log("emitFn");
 }
 
+const emitPublishBackFn = () => {
+  emitFn()
+}
+
 const handleEdit = (index: number, row: any) => {
-  goToPage("/index.html?id=" + row.postid)
-  console.log(index, row)
+  // goToPage("/index.html?id=" + row.postid)
+  // console.log(index, row)
+  const post = new Post();
+  post.postid = row.postid
+  post.title = row.title
+  publishData.value = post
+
+  showPublish.value = true;
+  showHome.value = false;
+  showDetail.value = false;
+}
+
+const handleNewWinEdit = (index: number, row: any) => {
+  ElMessageBox.confirm(
+      "此操作会打开新页面，此窗口将关闭，是否继续？",
+      t('main.opt.warning'),
+      {
+        confirmButtonText: t('main.opt.ok'),
+        cancelButtonText: t('main.opt.cancel'),
+        type: 'warning',
+      }
+  ).then(async () => {
+    goToPage("/index.html?id=" + row.postid)
+    console.log(index, row)
+  }).catch(() => {
+    // ElMessage({
+    //   type: 'error',
+    //   message: t("main.opt.failure"),
+    // })
+    logUtil.logInfo("操作已取消")
+  });
 }
 
 const handleRowClick = (row: any, column: any, event: any) => {
@@ -239,15 +287,6 @@ export default {
 .s-input {
   min-width: 500px !important;
 }
-
-/* 预览样式 */
-.tb-preview-body {
-
-}
-
-.tb-preview-body img {
-  max-width: 99%;
-}
 </style>
 <style scoped>
 .top-data-tip {

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

@@ -53,6 +53,15 @@ 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/DefaultPublish.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <el-page-header class="publish-header" :icon="ArrowLeft" title="返回" @click="onBack">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3"> {{ props.publishData.title }} - 文章发布 </span>
+        </div>
+      </template>
+    </el-page-header>
+
+    <publish-service :page-id="props.publishData.postid"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ArrowLeft} from '@element-plus/icons-vue'
+import PublishService from "../../../../components/PublishService.vue";
+import {Post} from "../../../../lib/common/post";
+
+const props = defineProps({
+  publishData: {
+    type: Post,
+    default: new Post()
+  }
+})
+const emit = defineEmits<{
+  (e: 'on-change'): void
+}>()
+
+const onBack = () => {
+  emit("on-change");
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: "DefaultPublish"
+}
+</script>
+
+<style scoped>
+.publish-header{
+  margin-bottom: 16px;
+}
+</style>

src/components/tab/PlantformMain.vue

@@ -1,7 +1,7 @@
 <template>
   <el-tabs type="border-card">
     <el-tab-pane :label="$t('main.publish.to.vuepress')" v-if="vuepressEnabled">
-      <vuepress-main :is-reload="isReloadVuepressMain"/>
+      <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/>
@@ -10,7 +10,7 @@
       <confluence-main/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.cnblogs')" v-if="cnblogsEnabled">
-      <cnblogs-main/>
+      <cnblogs-main :page-id="props.pageId"/>
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.wordpress')" v-if="wordpressEnabled">
       <wordpress-main/>
@@ -101,8 +101,13 @@ const props = defineProps({
   isReload: {
     type: Boolean,
     default: false
+  },
+  pageId: {
+    type: String,
+    default: undefined
   }
 })
+
 /*监听props*/
 watch(() => props.isReload, /**/(oldValue, newValue) => {
   initConf();