feat: 组件化重构-优化tab刷新

terwer · Dec 12, 2022 · d6c01fd · d6c01fd
1 parent d571e87
commit d6c01fd
Show file tree

Hide file tree

Showing 28 changed files with 365 additions and 75 deletions.
diff --git a/components/publish/PublishService.vue b/components/publish/PublishService.vue
@@ -27,29 +27,29 @@
   <el-tabs
     :model-value="defaultTab"
     tab-position="left"
-    @tab-change="serviceTabChange"
+    @tab-click="serviceTabChange"
   >
     <el-tab-pane
       class="pane-platform-main-body"
       name="platform-main"
       :label="$t('service.tab.publish.service')"
     >
-      <platform-main :is-reload="isReloadMain" :page-id="props.pageId" />
+      <platform-main :is-reload="isReloadServiceTab" :page-id="props.pageId" />
     </el-tab-pane>
     <el-tab-pane
       name="platform-setting"
       :label="$t('service.tab.publish.setting')"
     >
-      <platform-setting :is-reload="isReloadSetting" />
+      <platform-setting :is-reload="isReloadServiceTab" />
     </el-tab-pane>
     <el-tab-pane name="post-bind" :label="$t('service.tab.post.bind')">
-      <PostBind :is-reload="isReloadPostBind" :page-id="props.pageId" />
+      <PostBind :is-reload="isReloadServiceTab" :page-id="props.pageId" />
     </el-tab-pane>
     <el-tab-pane
       name="service-switch"
       :label="$t('service.tab.service.switch')"
     >
-      <service-switch :is-reload="isReloadServiceSwitch" />
+      <service-switch :is-reload="isReloadServiceTab" />
     </el-tab-pane>
     <el-tab-pane name="dynamic-platform" :label="$t('dynamic.platform.new')">
       <dynamic-platform />
@@ -61,7 +61,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue"
+import { ref } from "vue"
 import { LogFactory } from "~/utils/logUtil"
 import ChangeLocale from "~/components/publish/tab/ChangeLocale.vue"
 import DynamicPlatform from "~/components/publish/tab/DynamicPlatform.vue"
@@ -74,10 +74,7 @@ const logger = LogFactory.getLogger("components/publish/PublishService.vue")
 
 const defaultTab = ref("platform-main")
 
-const isReloadSetting = ref(false)
-const isReloadMain = ref(false)
-const isReloadPostBind = ref(false)
-const isReloadServiceSwitch = ref(false)
+const isReloadServiceTab = ref(false)
 
 const props = defineProps({
   isReload: {
@@ -92,24 +89,8 @@ const props = defineProps({
 
 const serviceTabChange = (name) => {
   logger.debug("serviceTabChange=>", name)
-  if (name === "platform-setting") {
-    isReloadSetting.value = !isReloadSetting.value
-    logger.debug("platform-setting change=>")
-  } else if (name === "platform-main") {
-    isReloadMain.value = !isReloadMain.value
-    logger.debug("platform-main change=>")
-  } else if (name === "post-bind") {
-    isReloadPostBind.value = !isReloadPostBind.value
-    logger.debug("post-bind change=>")
-  } else if (name === "service-switch") {
-    isReloadServiceSwitch.value = !isReloadServiceSwitch.value
-    logger.debug("service-switch change=>")
-  }
+  isReloadServiceTab.value = !isReloadServiceTab.value
 }
-
-onMounted(() => {
-  // defaultTab.value = getQueryString("tab") || defaultTab.value
-})
 </script>
 
 <style scoped>

diff --git a/components/publish/tab/PlatformMain.vue b/components/publish/tab/PlatformMain.vue
@@ -24,49 +24,97 @@
   -->
 
 <template>
-  <el-tabs type="border-card" v-if="tabCountStore.tabCount > 0">
+  <el-tabs
+    v-if="tabCountStore.tabCount > 0"
+    type="border-card"
+    @tab-click="mainTabChange"
+  >
     <!-- Github -->
     <el-tab-pane :label="$t('main.publish.to.vuepress')" v-if="vuepressEnabled">
-      <vuepress-main :is-reload="props.isReload" :page-id="props.pageId" />
+      <vuepress-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.hugo')" v-if="hugoEnabled">
-      <hugo-main :is-reload="props.isReload" :page-id="props.pageId" />
+      <hugo-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.hexo')" v-if="hexoEnabled">
-      <hexo-main :is-reload="props.isReload" :page-id="props.pageId" />
+      <hexo-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.jekyll')" v-if="jekyllEnabled">
-      <jekyll-main :is-reload="props.isReload" :page-id="props.pageId" />
+      <jekyll-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
 
     <!-- Metaweblog API -->
     <el-tab-pane :label="$t('main.publish.to.jvue')" v-if="jvueEnabled">
-      <j-vue-main :page-id="props.pageId" />
+      <j-vue-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.conf')" v-if="confEnabled">
-      <confluence-main :page-id="props.pageId" />
+      <confluence-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :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" />
+      <cnblogs-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
 
     <!-- Wordpress -->
     <el-tab-pane
       :label="$t('main.publish.to.wordpress')"
       v-if="wordpressEnabled"
     >
-      <wordpress-main :page-id="props.pageId" />
+      <wordpress-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
 
     <!-- Common API -->
     <el-tab-pane :label="$t('main.publish.to.liandi')" v-if="liandiEnabled">
-      <liandi-main :page-id="props.pageId" />
+      <liandi-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.yuque')" v-if="yuqueEnabled">
-      <yuque-main :page-id="props.pageId" />
+      <yuque-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane :label="$t('main.publish.to.kms')" v-if="kmsEnabled">
-      <kms-main :page-id="props.pageId" />
+      <kms-main
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
 
     <!-- 动态平台发布 -->
@@ -76,8 +124,9 @@
       :label="gcfg.platformName"
     >
       <github-main
-        :api-type="gcfg.platformKey"
         :is-reload="props.isReload"
+        :api-type="gcfg.platformKey"
+        :is-main-reload="isReloadMainTab"
         :page-id="props.pageId"
         :slug-type="gcfg.slugType"
       />
@@ -87,14 +136,24 @@
       :key="mcfg.platformKey"
       :label="mcfg.platformName"
     >
-      <metaweblog-main :api-type="mcfg.platformKey" :page-id="props.pageId" />
+      <metaweblog-main
+        :api-type="mcfg.platformKey"
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
     <el-tab-pane
       v-for="wcfg in formData.wordpressArray"
       :key="wcfg.platformKey"
       :label="wcfg.platformName"
     >
-      <metaweblog-main :api-type="wcfg.platformKey" :page-id="props.pageId" />
+      <metaweblog-main
+        :api-type="wcfg.platformKey"
+        :is-main-reload="isReloadMainTab"
+        :is-reload="props.isReload"
+        :page-id="props.pageId"
+      />
     </el-tab-pane>
   </el-tabs>
   <div v-else>
@@ -108,7 +167,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, watch } from "vue"
+import { onMounted, reactive, ref, watch } from "vue"
 import { useTabCount } from "~/composables/publish/tabCountCom"
 import { LogFactory } from "~/utils/logUtil"
 import VuepressMain from "~/components/publish/tab/main/github/VuepressMain.vue"
@@ -149,6 +208,8 @@ const {
   doCount,
 } = useTabCount()
 
+const isReloadMainTab = ref(false)
+
 const formData = reactive({
   dynamicConfigArray: [],
   githubArray: [],
@@ -202,6 +263,10 @@ const props = defineProps({
   },
 })
 
+const mainTabChange = () => {
+  isReloadMainTab.value = !isReloadMainTab.value
+}
+
 /**
  * 监听props
  */

diff --git a/components/publish/tab/main/CommonBlogMain.vue b/components/publish/tab/main/CommonBlogMain.vue
@@ -285,7 +285,7 @@ import {
   CommonblogCfg,
   ICommonblogCfg,
 } from "~/utils/platform/commonblog/commonblogCfg"
-import { nextTick, onMounted, reactive, ref } from "vue"
+import { nextTick, onMounted, reactive, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import { SIYUAN_PAGE_ATTR_KEY } from "~/utils/constants/siyuanPageConstants"
 import { ElMessage, ElMessageBox } from "element-plus/es"
@@ -332,6 +332,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isMainReload: {
+    type: Boolean,
+    default: false,
+  },
   useCat: {
     type: Boolean,
     default: false,
@@ -999,6 +1003,26 @@ const doCancel = async (isInit) => {
     await initPage()
   }
 }
+
+/**
+ * 监听props
+ */
+watch(
+  () => props.isReload,
+  async () => {
+    // 初始化
+    await initPage()
+    logger.debug(props.apiType + "_Main检测到设置更新操作，刷新页面")
+  }
+)
+watch(
+  () => props.isMainReload,
+  async () => {
+    // 初始化
+    await initPage()
+    logger.debug(props.apiType + "_Main左右切换tab，刷新页面")
+  }
+)
 </script>
 
 <style scoped>

diff --git a/components/publish/tab/main/GithubMain.vue b/components/publish/tab/main/GithubMain.vue
@@ -52,7 +52,10 @@
         <div class="github-form">
           <el-form label-width="100px">
             <!-- 文章标题 -->
-            <div class="form-post-title">
+            <div
+              v-if="pageModeData.etype !== PageEditMode.EditMode_source"
+              class="form-post-title"
+            >
               <el-form-item :label="$t('main.title')">
                 <el-input v-model="slugData.title" :disabled="true" />
               </el-form-item>
@@ -364,6 +367,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isMainReload: {
+    type: Boolean,
+    default: false,
+  },
   apiType: {
     type: String,
     default: "",
@@ -413,7 +420,15 @@ watch(
   async () => {
     // 初始化
     await initPublishMethods.initPage()
-    logger.debug(props.apiType + "_Main检测到更新操作，刷新页面")
+    logger.debug(props.apiType + "_Main检测到设置更新操作，刷新页面")
+  }
+)
+watch(
+  () => props.isMainReload,
+  async () => {
+    // 初始化
+    await initPublishMethods.initPage()
+    logger.debug(props.apiType + "_Main左右切换tab，刷新页面")
   }
 )
 onMounted(async () => {

diff --git a/components/publish/tab/main/MetaweblogMain.vue b/components/publish/tab/main/MetaweblogMain.vue
@@ -261,7 +261,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, reactive, ref } from "vue"
+import { nextTick, onMounted, reactive, ref, watch } from "vue"
 import { ElMessage, ElMessageBox } from "element-plus"
 import { useI18n } from "vue-i18n"
 import { SIYUAN_PAGE_ATTR_KEY } from "~/utils/constants/siyuanPageConstants"
@@ -309,6 +309,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isMainReload: {
+    type: Boolean,
+    default: false,
+  },
   apiType: {
     type: String,
     default: "",
@@ -825,6 +829,27 @@ const doCancel = async (isInit) => {
     await initPage()
   }
 }
+
+// life cycle
+/**
+ * 监听props
+ */
+watch(
+  () => props.isReload,
+  async () => {
+    // 初始化
+    await initPage()
+    logger.debug(props.apiType + "_Main检测到设置更新操作，刷新页面")
+  }
+)
+watch(
+  () => props.isMainReload,
+  async () => {
+    // 初始化
+    await initPage()
+    logger.debug(props.apiType + "_Main左右切换tab，刷新页面")
+  }
+)
 </script>
 
 <style scoped>