feat: show image state in status bar

packages/picgo-plugin-bootstrap/src/index.ts

@@ -17,9 +17,11 @@ import { showPage } from "./dialog"
 import { PageRoute } from "./pageRoute"
 import { ILogger } from "./appLogger"
 import { generateUniqueName, ImageItem, SIYUAN_PICGO_FILE_MAP_KEY, SiyuanPicGo, IPicGo } from "zhi-siyuan-picgo"
+import { initStatusBar, updateStatusBar } from "./statusBar"
 
 export default class PicgoPlugin extends Plugin {
   private logger: ILogger
+  public statusBarElement: any
 
   constructor(options: { app: App; id: string; name: string; i18n: IObject }) {
     super(options)
@@ -29,6 +31,7 @@ export default class PicgoPlugin extends Plugin {
 
   onload() {
     initTopbar(this)
+    initStatusBar(this)
     this.logger.info("PicGo Plugin loaded")
   }
 
@@ -97,10 +100,11 @@ export default class PicgoPlugin extends Plugin {
     const file = files[0]
 
     try {
-      siyuanApi.pushMsg({
-        msg: "检测到剪贴板图片，正在上传，请勿进行任何操作...",
-        timeout: 1000,
-      })
+      // siyuanApi.pushMsg({
+      //   msg: "检测到剪贴板图片，正在上传，请勿进行刷新操作...",
+      //   timeout: 7000,
+      // })
+      updateStatusBar(this, "检测到剪贴板图片，正在上传，请勿进行刷新操作...")
 
       // pageId: string
       // attrs: any
@@ -114,14 +118,23 @@ export default class PicgoPlugin extends Plugin {
       if (imageJsonObj && imageJsonObj.length > 0) {
         const img = imageJsonObj[0]
         if (!img?.imgUrl || img.imgUrl.trim().length == 0) {
-          throw new Error(
-            "图片上传失败，可能原因：PicGO配置错误或者该平台不支持图片覆盖，请检查配置或者尝试上传新图片。请打开picgo.log查看更多信息"
-          )
+          // throw new Error(
+          //   "图片上传失败，可能原因：PicGO配置错误或者该平台不支持图片覆盖，请检查配置或者尝试上传新图片。请打开picgo.log查看更多信息"
+          // )
+          siyuanApi.pushErrMsg({
+            msg: "图片上传失败，可能原因：PicGO配置错误或者该平台不支持图片覆盖，请检查配置或者尝试上传新图片。请打开picgo.log查看更多信息",
+            timeout: 7000,
+          })
+          return
         }
         // 处理上传后续
         await this.handleAfterUpload(ctx, siyuanApi, pageId, file, img, imageItem)
       } else {
-        throw new Error("图片上传失败，可能原因：PicGO配置错误，请检查配置。请打开picgo.log查看更多信息")
+        siyuanApi.pushErrMsg({
+          msg: "图片上传失败，可能原因：PicGO配置错误，请检查配置。请打开picgo.log查看更多信息",
+          timeout: 7000,
+        })
+        // throw new Error("图片上传失败，可能原因：PicGO配置错误，请检查配置。请打开picgo.log查看更多信息")
       }
     } catch (e) {
       siyuanApi.pushErrMsg({
@@ -133,10 +146,11 @@ export default class PicgoPlugin extends Plugin {
 
   private async handleAfterUpload(ctx: IPicGo, siyuanApi: any, pageId: string, file: any, img: any, oldImageitem: any) {
     const SIYUAN_WAIT_SECONDS = ctx.getConfig("siyuan.waitTimeout") || 10
-    siyuanApi.pushMsg({
-      msg: `剪贴板图片上传完成。准备延迟${SIYUAN_WAIT_SECONDS}秒更新元数据，请勿刷新笔记！`,
-      timeout: 7000,
-    })
+    // siyuanApi.pushMsg({
+    //   msg: `剪贴板图片上传完成。准备延迟${SIYUAN_WAIT_SECONDS}秒更新元数据，请勿刷新笔记！`,
+    //   timeout: 7000,
+    // })
+    updateStatusBar(this, `剪贴板图片上传完成。准备延迟${SIYUAN_WAIT_SECONDS}秒更新元数据，请勿刷新笔记！`)
     setTimeout(async () => {
       const formData = new FormData()
       formData.append("file[]", file)
@@ -205,10 +219,11 @@ export default class PicgoPlugin extends Plugin {
       const newImageContent = `![${newImageItem.alt}](${newImageItem.url})`
       await siyuanApi.updateBlock(nodeId, newImageContent, "markdown")
 
-      siyuanApi.pushMsg({
-        msg: `图片元数据更新成功`,
-        timeout: 7000,
-      })
+      // siyuanApi.pushMsg({
+      //   msg: `图片元数据更新成功`,
+      //   timeout: 7000,
+      // })
+      updateStatusBar(this, `图片元数据更新成功`)
     }, SIYUAN_WAIT_SECONDS * 1000)
   }
 

packages/picgo-plugin-bootstrap/src/statusBar.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+import PicgoPlugin from "./index"
+
+export const initStatusBar = (pluginInstance: PicgoPlugin) => {
+  const statusBarTemplate = document.createElement("template")
+  statusBarTemplate.innerHTML = `<div class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="update image status" style="font-size: 12px;"></div>`
+  statusBarTemplate.content.firstElementChild.addEventListener("click", () => {})
+
+  pluginInstance.statusBarElement = pluginInstance.addStatusBar({
+    element: statusBarTemplate.content.firstElementChild as HTMLElement,
+    position: "left",
+  })
+}
+
+export const updateStatusBar = (pluginInstance: PicgoPlugin, statusText: string) => {
+  // console.log(pluginInstance.statusBarElement)
+  pluginInstance.statusBarElement.innerHTML = `<div class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="update image status" style="font-size: 12px;">${statusText}</div>`
+}