feat: 新版挂件-优化发布交互

src/components/set/PublishSetting.vue

@@ -71,7 +71,6 @@ const formData = reactive({
 
   dynamicConfigArray: [] as DynamicConfig[],
 
-  isWebAuthLoading: false,
   isUpgradeLoading: false,
   showLogMessage: false,
   logMessage: "",
@@ -256,7 +255,7 @@ const _handleValidateOpenBrowserAuth = (cfg: DynamicConfig) => {
   const cookieCb = async (dynCfg: DynamicConfig, cookies: ElectronCookie[]) => {
     // ElMessage.info("验证中，请关注状态，没有授权表示不可用，已授权表示该平台可正常使用...")
     logger.debug("get cookie result=>", cookies)
-    formData.isWebAuthLoading = true
+    dynCfg.isWebAuthLoading = true
 
     try {
       const appInstance = new AppInstance()
@@ -302,14 +301,14 @@ const _handleValidateOpenBrowserAuth = (cfg: DynamicConfig) => {
     formData.setting[DYNAMIC_CONFIG_KEY] = dynJsonCfg
     // 更新状态
     await updateSetting(formData.setting)
-    formData.isWebAuthLoading = false
+    dynCfg.isWebAuthLoading = false
   }
 
   openBrowserWindow(cfg.authUrl, cfg, cookieCb)
 }
 
 const _handleValidateChromeExtensionAuth = async (cfg: DynamicConfig) => {
-  formData.isWebAuthLoading = true
+  cfg.isWebAuthLoading = true
 
   try {
     const appInstance = new AppInstance()
@@ -343,7 +342,7 @@ const _handleValidateChromeExtensionAuth = async (cfg: DynamicConfig) => {
   formData.setting[DYNAMIC_CONFIG_KEY] = dynJsonCfg
   // 更新状态
   await updateSetting(formData.setting)
-  formData.isWebAuthLoading = false
+  cfg.isWebAuthLoading = false
 }
 
 const _handleValidateCookieAuth = async (cfg: DynamicConfig) => {
@@ -544,7 +543,7 @@ onMounted(async () => {
                           class="action-btn action-web-auth"
                           @click="handleValidateWebAuth(platform)"
                           :size="'small'"
-                          :loading="formData.isWebAuthLoading"
+                          :loading="platform.isWebAuthLoading"
                         >
                           <el-icon>
                             <Lock />
@@ -789,4 +788,4 @@ html[class="dark"]
 
     .add-btn
       margin-top 12px
-</style>
+</style>

src/components/set/publish/platform/dynamicConfig.ts

@@ -67,6 +67,11 @@ export class DynamicConfig {
    */
   isAuth: boolean
 
+  /**
+   * 授权加载中
+   */
+  isWebAuthLoading?: boolean
+
   /**
    * 授权模式
    */

src/workers/quickPublish.vue

@@ -24,13 +24,77 @@
   -->
 
 <script setup lang="ts">
+import { onMounted, reactive } from "vue"
+import { useRoute } from "vue-router"
+import { useVueI18n } from "~/src/composables/useVueI18n.ts"
+import { createAppLogger } from "~/src/utils/appLogger.ts"
 
+const logger = createAppLogger("quick-publish-worker")
+
+// uses
+const { t } = useVueI18n()
+const route = useRoute()
+
+// datas
+const params = reactive(route.params)
+const key = params.key as string
+const id = params.id as string
+const formData = reactive({
+  isPublishLoading: false,
+  publishStatus: false,
+  errMsg: "",
+})
+
+const doPublish = async () => {
+  try {
+    formData.publishStatus = true
+  } catch (e) {
+    formData.errMsg = t("main.opt.failure") + "=>" + e
+    logger.error(e)
+    formData.publishStatus = false
+  }
+}
+
+onMounted(async () => {
+  formData.isPublishLoading = true
+  setTimeout(async () => {
+    await doPublish()
+    formData.isPublishLoading = false
+  }, 200)
+})
 </script>
 
 <template>
-<div>quick publishing...</div>
+  <div id="quick-publish-box">
+    <div class="publish-tips">
+      <div v-if="formData.isPublishLoading" class="is-loading info-tips">
+        <i class="el-icon is-loading"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg></i>
+        发布中，请稍后...：
+      </div>
+      <div v-else-if="formData.publishStatus" class="success-tips">
+        发布到 [博客园] 成功， <a href="https://www.baidu.com" target="_blank">查看文章</a>
+      </div>
+      <div v-else class="fail-tips">发布到 [博客园] 失败，异常如下：{{ formData.errMsg }}</div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="stylus">
-
-</style>
+.top-tip
+  margin 10px 0
+  padding-left 0
+#quick-publish-box
+  .publish-tips
+    margin 10px
+    margin-top 8px
+    font-size 14px
+    .info-tips
+      color var(--el-color-info)
+      .is-loading
+        vertical-align middle
+        margin-top -4px
+    .success-tips
+      color var(--el-color-success)
+    .fail-tips
+      color var(--el-color-error)
+</style>