feat: 新版挂件-网页授权交互

package.json

@@ -57,14 +57,14 @@
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4",
     "xmlbuilder2": "^3.1.1",
-    "zhi-blog-api": "^1.16.0",
+    "zhi-blog-api": "^1.18.0",
     "zhi-common": "^1.11.5",
     "zhi-device": "^2.3.0",
     "zhi-fetch-middleware": "^0.1.19",
-    "zhi-github-middleware": "^0.1.0",
+    "zhi-github-middleware": "^0.1.2",
     "zhi-lib-base": "^0.4.2",
-    "zhi-siyuan-api": "^1.27.2",
-    "zhi-wechatsync-middleware": "^0.1.2",
+    "zhi-siyuan-api": "^1.27.7",
+    "zhi-wechatsync-middleware": "^0.1.7",
     "zhi-xmlrpc-middleware": "^0.2.19"
   }
 }

src/composables/api/useCnblogsApi.ts → src/adaptors/api/cnblogs/useCnblogsApi.ts

@@ -36,6 +36,7 @@ import { getDynPostidKey } from "~/src/components/set/publish/platform/dynamicCo
  * 使用Cnblogs API的自定义hook
  *
  * @param key 配置键值，可选参数
+ * @param newCfg
  * @author terwer
  * @version 0.9.0
  * @since 0.9.0

src/adaptors/api/typecho/config/typechoConfig.ts

@@ -25,7 +25,7 @@
 
 import { MetaweblogConfig } from "~/src/adaptors/api/base/metaweblog/config/MetaweblogConfig.ts"
 import { PageTypeEnum } from "zhi-blog-api"
-import TypechoUtils from "~/src/adaptors/api/Typecho/TypechoUtils.ts"
+import TypechoUtils from "~/src/adaptors/api/typecho/typechoUtils.ts"
 
 /**
  * Typecho 配置
@@ -34,26 +34,6 @@ import TypechoUtils from "~/src/adaptors/api/Typecho/TypechoUtils.ts"
  * @since 1.0.0
  */
 class TypechoConfig extends MetaweblogConfig {
-  /**
-   * API 地址
-   */
-  public override apiUrl = ""
-
-  /**
-   * 用户名
-   */
-  public override username = ""
-
-  /**
-   * 密码
-   */
-  public override password = ""
-
-  /**
-   * 代理地址
-   */
-  public override middlewareUrl = ""
-
   /**
    * Typecho 配置项
    *

src/composables/api/useTypechoApi.ts → src/adaptors/api/typecho/useTypechoApi.ts

@@ -68,7 +68,7 @@ export const useTypechoApi = async (key?: string, newCfg?: TypechoConfig) => {
       const typechoAuthToken = Utils.emptyOrDefault(process.env.VITE_TYPECHO_AUTH_TOKEN, "")
       const middlewareUrl = Utils.emptyOrDefault(
         process.env.VITE_MIDDLEWARE_URL,
-        "http://localhost:3000/api/middleware"
+        "https://api.terwer.space/api/middleware"
       )
       cfg = new TypechoConfig(typechoApiUrl, typechoUsername, typechoAuthToken, middlewareUrl)
       // 默认值

src/adaptors/api/wordpress/config/wordpressConfig.ts

@@ -34,26 +34,6 @@ import WordpressUtils from "~/src/adaptors/api/wordpress/wordpressUtils.ts"
  * @since 1.0.0
  */
 class WordpressConfig extends MetaweblogConfig {
-  /**
-   * API 地址
-   */
-  public override apiUrl = ""
-
-  /**
-   * 用户名
-   */
-  public override username = ""
-
-  /**
-   * 密码
-   */
-  public override password = ""
-
-  /**
-   * 代理地址
-   */
-  public override middlewareUrl = ""
-
   /**
    * WordPress 配置项
    *

src/composables/api/useWordpressApi.ts → src/adaptors/api/wordpress/useWordpressApi.ts

@@ -68,7 +68,7 @@ export const useWordpressApi = async (key?: string, newCfg?: WordpressConfig) =>
       const wordpressAuthToken = Utils.emptyOrDefault(process.env.VITE_WORDPRESS_AUTH_TOKEN, "")
       const middlewareUrl = Utils.emptyOrDefault(
         process.env.VITE_MIDDLEWARE_URL,
-        "http://localhost:3000/api/middleware"
+        "https://api.terwer.space/api/middleware"
       )
       cfg = new WordpressConfig(wordpressApiUrl, wordpressUsername, wordpressAuthToken, middlewareUrl)
       // 默认值

src/adaptors/index.ts

@@ -23,13 +23,14 @@
  * questions.
  */
 
-import { BlogAdaptor, BlogConfig } from "zhi-blog-api"
+import { BlogAdaptor, WebAdaptor } from "zhi-blog-api"
 import { getSubPlatformTypeByKey, SubPlatformType } from "~/src/components/set/publish/platform/dynamicConfig.ts"
-import { useCnblogsApi } from "~/src/composables/api/useCnblogsApi.ts"
+import { useCnblogsApi } from "~/src/adaptors/api/cnblogs/useCnblogsApi.ts"
 import { createAppLogger } from "~/src/utils/appLogger.ts"
-import { useWordpressApi } from "~/src/composables/api/useWordpressApi.ts"
-import { useTypechoApi } from "~/src/composables/api/useTypechoApi.ts"
-import { useYuqueApi } from "~/src/composables/api/useYuqueApi.ts"
+import { useWordpressApi } from "~/src/adaptors/api/wordpress/useWordpressApi.ts"
+import { useTypechoApi } from "~/src/adaptors/api/typecho/useTypechoApi.ts"
+import { useYuqueApi } from "~/src/adaptors/api/yuque/useYuqueApi.ts"
+import { useZhihuWeb } from "~/src/adaptors/web/zhihu/useZhihuWeb.ts"
 
 /**
  * 适配器统一入口
@@ -46,14 +47,11 @@ class Adaptors {
    * @param key
    * @param newCfg
    */
-  public static async getAdaptor(key: string, newCfg?: any): Promise<BlogAdaptor> {
+  public static async getAdaptor(key: string, newCfg?: any): Promise<BlogAdaptor | WebAdaptor> {
     let blogAdaptor = null
     const type: SubPlatformType = getSubPlatformTypeByKey(key)
 
     switch (type) {
-      case SubPlatformType.Common_Zhihu:{
-        break
-      }
       case SubPlatformType.Common_Yuque: {
         const { blogApi } = await useYuqueApi(key, newCfg)
         blogAdaptor = blogApi
@@ -74,6 +72,11 @@ class Adaptors {
         blogAdaptor = blogApi
         break
       }
+      case SubPlatformType.Custom_Zhihu: {
+        const { webApi } = await useZhihuWeb()
+        blogAdaptor = webApi
+        break
+      }
       default: {
         break
       }

src/adaptors/api/index.ts → src/adaptors/web/zhihu/useZhihuWeb.ts

@@ -23,3 +23,16 @@
  * questions.
  */
 
+import { ZhihuWebAdaptor } from "~/src/adaptors/web/zhihu/zhihuWebAdaptor.ts"
+
+/**
+ * 用于获取ZhihuWeb的API的自定义Hook
+ */
+const useZhihuWeb = async () => {
+  const webApi = new ZhihuWebAdaptor()
+  return {
+    webApi,
+  }
+}
+
+export { useZhihuWeb }

src/composables/api/useZhihuApi.ts → src/adaptors/web/zhihu/zhihuWebAdaptor.ts

@@ -23,3 +23,35 @@
  * questions.
  */
 
+import { WebApi } from "zhi-blog-api"
+import { JsonUtil } from "zhi-common"
+
+/**
+ * 知乎网页授权适配器
+ *
+ * @author terwer
+ * @version 0.9.0
+ * @since 0.9.0
+ */
+class ZhihuWebAdaptor extends WebApi {
+  public async getMetaData(): Promise<object> {
+    const fetchResponse = await fetch(
+      "https://www.zhihu.com/api/v4/me?include=account_status%2Cis_bind_phone%2Cis_force_renamed%2Cemail%2Crenamed_fullname"
+    )
+    const resText = await fetchResponse.text()
+    // console.log(res);
+    const res = JsonUtil.safeParse<any>(resText, {} as any)
+    return {
+      uid: res.uid,
+      title: res.name,
+      avatar: res.avatar_url,
+      supportTypes: ["html"],
+      type: "zhihu",
+      displayName: "知乎",
+      home: "https://www.zhihu.com/settings/account",
+      icon: "https://static.zhihu.com/static/favicon.ico",
+    }
+  }
+}
+
+export { ZhihuWebAdaptor }

src/components/set/PublishSetting.vue

@@ -24,19 +24,18 @@
   -->
 
 <script setup lang="ts">
-import { markRaw, onMounted, reactive, ref } from "vue"
+import { markRaw, onMounted, reactive } from "vue"
 import { useVueI18n } from "~/src/composables/useVueI18n.ts"
-import { Delete, Tools } from "@element-plus/icons-vue"
+import { Delete, Lock, Tools, WarningFilled } from "@element-plus/icons-vue"
 import { useSettingStore } from "~/src/stores/useSettingStore.ts"
 import { SypConfig } from "~/syp.config.ts"
 import { createAppLogger } from "~/src/utils/appLogger.ts"
-import { JsonUtil } from "zhi-common"
+import { JsonUtil, StrUtil } from "zhi-common"
 import {
   AuthMode,
   deletePlatformByKey,
   DynamicConfig,
   DynamicJsonCfg,
-  getDynPostidKey,
   PlatformType,
   replacePlatformByKey,
   setDynamicJsonCfg,
@@ -46,13 +45,14 @@ import { useRouter } from "vue-router"
 import { usePlatformDefine } from "~/src/composables/usePlatformDefine.ts"
 import { ElMessage, ElMessageBox } from "element-plus"
 import { svgIcons } from "~/src/utils/svgIcons.ts"
+import { openBrowserWindow } from "~/src/utils/widgetUtils.ts"
 
 const logger = createAppLogger("publish-setting")
 
 // uses
 const { t } = useVueI18n()
 const router = useRouter()
-const { getSetting, updateSetting, deleteKey, checkAndUpgradeSetting } = useSettingStore()
+const { getSetting, updateSetting, deleteKey } = useSettingStore()
 const { platformTypeList } = usePlatformDefine()
 
 // datas
@@ -143,13 +143,64 @@ const handlePlatformEnabled = async (cfg: DynamicConfig) => {
 }
 
 const handleOpenBrowserAuth = async (cfg: DynamicConfig) => {
-  alert("handleOpenBrowserAuth")
+  ElMessageBox.confirm(
+    `将打开 [${cfg.platformName}] 登录授权页面，您需要在新页面完成登录，然后点击验证查看授权结果，是否继续？`,
+    "网页授权",
+    {
+      type: "warning",
+      icon: markRaw(WarningFilled),
+      confirmButtonText: t("main.opt.ok"),
+      cancelButtonText: t("main.opt.cancel"),
+    }
+  )
+    .then(async () => {
+      openBrowserWindow(cfg.authUrl)
+    })
+    .catch(() => {})
+}
+
+const handleValidateWebAuth = (cfg: DynamicConfig) => {
+  // ElMessage.info("验证中，请关注状态，没有授权表示不可用，已授权表示该平台可正常使用...")
+  ElMessage.success("验证成功，该平台可正常使用")
+  // ElMessage.error(("验证失败，该平台将不可用"))
 }
 
 const handleImportPre = () => {
   ElMessage.info("开发中，敬请期待，您可以自行前往 [新增平台] 选择添加")
 }
 
+const checkAndUpgradeSetting = async (setting: Partial<typeof SypConfig>) => {
+  let isUpgrade = false
+  let logText = ""
+
+  const logMessage = (message: string) => {
+    logger.info(message)
+    logText += `\n${message}`
+  }
+
+  logMessage(t("setting.upgrade.syp.doTip1"))
+
+  if (StrUtil.isEmptyString(setting.version)) {
+    logMessage(t("setting.upgrade.syp.doTip2"))
+
+    // TODO 迁移旧配置
+    // 读取旧的配置文件
+    // 数据转换适配
+    // 更新最新版本号
+    logMessage("TODO，开发中，敬请期待")
+    // setting.version = version
+    //
+    // await updateSetting(setting)
+    //
+    // logMessage(t("setting.upgrade.syp.doTip3"))
+    // isUpgrade = true
+  } else {
+    logMessage(t("setting.upgrade.syp.doTip4"))
+  }
+
+  return { isUpgrade, logText }
+}
+
 const handleCheckAndUpgrade = async () => {
   formData.isUpgradeLoading = true
   formData.showLogMessage = true
@@ -220,7 +271,7 @@ onMounted(async () => {
               <el-col
                 v-for="p in formData.platformTypeList"
                 :key="p.type"
-                :span="24"
+                :span="12"
                 class="col-item"
                 @click="handleAddPlatformStep(p.type)"
               >
@@ -288,13 +339,27 @@ onMounted(async () => {
                         ></el-switch>
                         <el-text
                           v-if="platform.isEnabled"
-                          class="action-btn action-setting"
+                          :class="
+                            platform.authMode === AuthMode.API
+                              ? 'action-btn action-setting'
+                              : 'action-btn action-web-setting'
+                          "
                           @click="handleSinglePlatformSetting(platform)"
                         >
                           <el-icon>
                             <Tools />
                           </el-icon>
-                          {{ platform.authMode === AuthMode.API ? "设置" : "授权" }}
+                          {{ platform.authMode === AuthMode.API ? "设置" : platform.isAuth ? "再次授权" : "授权" }}
+                        </el-text>
+                        <el-text
+                          class="action-btn action-web-auth"
+                          v-if="platform.isEnabled && platform.authMode === AuthMode.WEBSITE && !platform.isAuth"
+                          @click="handleValidateWebAuth(platform)"
+                        >
+                          <el-icon>
+                            <Lock />
+                          </el-icon>
+                          验证
                         </el-text>
                         <el-text
                           v-if="!platform.isEnabled"
@@ -461,12 +526,25 @@ html[class="dark"]
             .action-setting
               font-size 12px
               cursor pointer
+              &:hover
+                color var(--el-color-primary)
+
+            .action-web-setting
+              font-size 12px
+              cursor pointer
+              color var(--el-color-warning)
+              &:hover
+                color var(--el-color-primary)
 
+            .action-web-auth
+              font-size 12px
+              cursor pointer
+              color var(--el-color-error)
               &:hover
                 color var(--el-color-primary)
 
             .action-del
-              color red
+              color var(--el-color-error)
               font-size 12px
               cursor pointer