refactor: 新增 API 适配器

components.d.ts

@@ -10,9 +10,11 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ChangeLocal: typeof import('./src/components/set/preference/ChangeLocal.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']

package.json

@@ -26,6 +26,7 @@
     "fast-glob": "^3.2.12",
     "minimist": "^1.2.8",
     "rollup-plugin-livereload": "^2.0.5",
+    "stylus": "^0.59.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
     "unplugin-auto-import": "^0.16.2",

src/App.vue

@@ -29,16 +29,6 @@ import AppLayout from "~/src/layouts/AppLayout.vue"
 // global style
 import "~/src/assets/style.css"
 import "~/src/assets/style.dark.css"
-import { inject } from "vue"
-import { InjectKeys } from "~/src/utils/injectKeys.ts"
-
-// Vue 实例
-// const vueInstance = inject(InjectKeys.VUE_INSTANCE)
-// logger.info("vueInstance=>", vueInstance)
-
-// appInstance
-const appInstance = inject(InjectKeys.APP_INSTANCE) as any
-appInstance.logger.debug("appInstance=>", appInstance)
 </script>
 
 <template>

src/components/publish/PublishIndex.vue

@@ -25,37 +25,78 @@
 
 <script setup lang="ts">
 import { createLogger } from "~/src/utils/simpleLogger.ts"
-import { inject, onBeforeMount } from "vue"
-import { InjectKeys } from "~/src/utils/injectKeys.ts"
+import { ref } from "vue"
 import { AppInstance } from "~/src/appInstance.ts"
 import { Utils } from "~/src/utils/utils.ts"
 import { SiYuanApiAdaptor, SiyuanConfig } from "zhi-siyuan-api"
 
 const logger = createLogger("publisher-index")
 
-// lifecycle
-onBeforeMount(async () => {
-  // appInstance
-  const appInstance: AppInstance = inject(InjectKeys.APP_INSTANCE)
-
-  // const wordpressCfg = {}
-  // const wordpressApiAdaptor = {}
-  // const wordpressApi = Utils.blogApi(appInstance, wordpressApiAdaptor)
-  // const wordpressPosts = await wordpressApi.getRecentPosts(10)
-  // logger.info("wordpress recent post=>", wordpressPosts)
-
-  const siyuanCfg = new SiyuanConfig("", "")
-  // 显示指定修复标题
-  siyuanCfg.fixTitle = true
-  const siyuanApiAdaptor = new SiYuanApiAdaptor(siyuanCfg)
-  const siyuanApi = Utils.blogApi(appInstance, siyuanApiAdaptor)
-  const siyuanPosts = await siyuanApi.getRecentPosts(10)
-  logger.info("siyuan recent post=>", siyuanPosts)
-})
+const logMessage = ref("")
+
+const siyuanGetRecentPosts = async () => {
+  logMessage.value = ""
+  logMessage.value = "siyuan requesting..."
+  try {
+    // appInstance
+    const appInstance = new AppInstance()
+    await appInstance.init()
+    logger.info("appInstance=>", appInstance)
+
+    const siyuanCfg = new SiyuanConfig("", "")
+    // 显示指定修复标题
+    siyuanCfg.fixTitle = true
+    const siyuanApiAdaptor = new SiYuanApiAdaptor(siyuanCfg)
+    const siyuanApi = Utils.blogApi(appInstance, siyuanApiAdaptor)
+    const siyuanPosts = await siyuanApi.getRecentPosts(10)
+    logMessage.value = JSON.stringify(siyuanPosts)
+    logger.info("siyuan recent post=>", siyuanPosts)
+  } catch (e) {
+    logMessage.value = e
+  }
+}
+
+const wordpressGetRecentPosts = async () => {
+  logMessage.value = ""
+  logMessage.value = "wordpress requesting..."
+  try {
+    // appInstance
+    const appInstance = new AppInstance()
+    await appInstance.init()
+    logger.info("appInstance=>", appInstance)
+
+    const wordpressCfg = {}
+    const wordpressApiAdaptor = {}
+    const wordpressApi = Utils.blogApi(appInstance, wordpressApiAdaptor)
+    const wordpressPosts = await wordpressApi.getRecentPosts(10)
+    logMessage.value = JSON.stringify(wordpressPosts)
+    logger.info("wordpress recent post=>", wordpressPosts)
+  } catch (e) {
+    logMessage.value = e
+  }
+}
 </script>
 
 <template>
-  <div>PublishIndex222222</div>
+  <div id="publish-index">
+    <el-tabs type="border-card">
+      <el-tab-pane label="思源">
+        <p><el-button @click="siyuanGetRecentPosts">文章列表</el-button></p>
+        <p><el-button>单篇文章</el-button></p>
+      </el-tab-pane>
+      <el-tab-pane label="WordPress">
+        <p><el-button @click="wordpressGetRecentPosts">文章列表</el-button></p>
+        <p><el-button>单篇文章</el-button></p>
+      </el-tab-pane>
+    </el-tabs>
+
+    <p>
+      <el-input v-model="logMessage" type="textarea" :rows="10" placeholder="日志信息"></el-input>
+    </p>
+  </div>
 </template>
 
-<style scoped></style>
+<style lang="stylus" scoped>
+#publish-index
+  margin 16px 20px
+</style>

src/main.ts

@@ -58,6 +58,7 @@ import { AppInstance } from "~/src/appInstance.ts"
   const appInstance = new AppInstance()
   await appInstance.init()
   app.provide(InjectKeys.APP_INSTANCE, appInstance)
+  logger.info("appInstance provided=>", appInstance)
 
   // ElementPlus
   // 包太大，需要改成按需引入

src/utils/utils.ts

@@ -63,7 +63,7 @@ export class Utils {
 
     if (!apiAdaptor.getUsersBlogs) {
       this.logger.error("ApiAdaptor must implements BlogApi", apiAdaptor)
-      throw new Error(`ApiAdaptor must implements BlogApi`)
+      throw new Error(`ApiAdaptor must implements BlogApi => ${this.getObjectName(apiAdaptor)}`)
     }
 
     if (apiAdaptor.init) {
@@ -72,4 +72,32 @@ export class Utils {
 
     return new BlogAdaptor(apiAdaptor)
   }
+
+  private static getObjectName(obj) {
+    try {
+      // 判断是否为类
+      if (typeof obj === "function" && /^class\s/.test(obj.toString())) {
+        return obj.name
+      }
+      // 判断是否为函数
+      else if (typeof obj === "function") {
+        return obj.name || "anonymous function"
+      }
+      // 判断是否为枚举
+      else if (typeof obj === "object" && Object.values(obj.constructor).includes(obj)) {
+        return Object.keys(obj.constructor)[Object.values(obj.constructor).indexOf(obj)]
+      }
+      // 判断是否为属性
+      else if (typeof obj !== "object") {
+        return obj
+      }
+      // 默认返回空字符串
+      else {
+        return "{}"
+      }
+    } catch (e) {
+      console.error(e)
+      return "{}"
+    }
+  }
 }

src/views/Home.vue

@@ -28,9 +28,7 @@ import PublishIndex from "~/src/components/publish/PublishIndex.vue"
 </script>
 
 <template>
-  <div id="publish-index">
-    <publish-index />
-  </div>
+  <publish-index />
 </template>
 
 <style scoped></style>