feat: #319 PicGO图形化配置界面-插件适配

components/picgo/PicgoSetting.vue

@@ -81,8 +81,8 @@
         特别提示：picgo插件未经过全量测试，不保证所有插件都能运行，目前已经测试可用的插件如下：
       </p>
       <p>
-        <a href="https://github.com/fhyoga/picgo-plugin-watermark"
-          >picgo-plugin-watermark</a
+        <a href="https://github.com/terwer/picgo-plugin-watermark-elec"
+          >picgo-plugin-watermark-elec</a
         >
         搜索关键词：watermark
       </p>

components/picgo/common/ConfigForm.vue

@@ -43,15 +43,13 @@
     <div class="config-form">
       <el-form ref="$configForm" label-width="250px" :model="configRuleForm">
         <el-form-item
-          :label="$t('setting.picgo.picbed.uploader.config.name')"
+          :label="$t('setting.picgo.config.name')"
           required
           prop="_configName"
         >
           <el-input
             v-model="configRuleForm._configName"
-            :placeholder="
-              $t('setting.picgo.picbed.uploader.config.name.placeholder')
-            "
+            :placeholder="$t('setting.picgo.config.name.placeholder')"
           />
         </el-form-item>
 
@@ -126,9 +124,10 @@ const logger = LogFactory.getLogger(
 const props = defineProps({
   // 配置类型：plugin、transfer还是uploader
   configType: String,
+  config: Object,
+
   // 对于uploader来说是图床类型
   id: String,
-  config: Object,
   // 当前配置项的uuid
   configId: String,
   isNewForm: Boolean,
@@ -174,9 +173,32 @@ function handleConfigChange(val: any) {
 
 function getCurConfigFormData() {
   const configId = props.configId
-  const curTypeConfigList =
-    picgoUtil.getPicgoConfig(`uploader.${props.id}.configList`) || []
-  return curTypeConfigList.find((i) => i._id === configId) || {}
+  let curConfig
+  switch (props.configType) {
+    case "plugin": {
+      curConfig = picgoUtil.getPicgoConfig(`${props.configId}`) || {
+        _configName: props.configId,
+      }
+      break
+    }
+    case "uploader": {
+      const curTypeConfigList =
+        picgoUtil.getPicgoConfig(`uploader.${props.id}.configList`) || []
+      curConfig = curTypeConfigList.find((i) => i._id === configId) || {}
+      break
+    }
+    case "transformer": {
+      curConfig =
+        picgoUtil.getPicgoConfig(`transformer.${props.configId}`) || {}
+      break
+    }
+    default:
+      curConfig = {}
+      break
+  }
+
+  console.log("curConfig=>", curConfig)
+  return curConfig
 }
 
 function handleConfig(val: IPicGoPluginConfig[]) {
@@ -240,24 +262,24 @@ const onBack = () => {
 
 const onSubmit = async () => {
   const result = (await validate()) || false
+
+  console.log("准备保存配置result", result)
   if (result !== false) {
-    // 图床配置表单
-    if (props.configType === "uploader") {
-      picgoUtil.updateUploaderConfig(props.id, result?._id, result)
+    switch (props.configType) {
+      case "plugin":
+        picgoUtil.savePicgoConfig(`${props.configId}`, result)
+        break
+      case "uploader":
+        picgoUtil.updateUploaderConfig(props.id, result?._id, result)
+        break
+      case "transformer":
+        picgoUtil.savePicgoConfig(`transformer.${props.configId}`, result)
+        break
     }
-
-    onBack()
   }
-}
 
-// const initPage = () => {
-//   logger.warn("configList=>", configList)
-//   configRuleForm._configName = props?.config?._configName ?? "New Config"
-// }
-
-// onBeforeMount(() => {
-//   initPage()
-// })
+  onBack()
+}
 </script>
 
 <style scoped>

components/picgo/setting/PicgoPluginSetting.vue

@@ -35,15 +35,14 @@
       <el-tooltip
         :content="$t('setting.picgo.plugin.import.local')"
         placement="left"
-        v-if="false"
       >
         <el-button class="el-icon-download" @click="handleImportLocalPlugin">
           <font-awesome-icon icon="fa-solid fa-download" />
         </el-button>
       </el-tooltip>
     </div>
 
-    <div class="plugin-list-box">
+    <div class="plugin-list-box" v-if="!showPluginConfigForm">
       <div class="plugin-search-box">
         <el-row
           class="handle-bar"
@@ -104,6 +103,12 @@
                     {{ item.author }}
                   </span>
                   <span class="plugin-item__config">
+                    <span class="config-button work" v-if="checkWork(item)">
+                      {{ $t("setting.picgo.plugin.work") }}
+                    </span>
+                    <span class="config-button nowork" v-else>
+                      {{ $t("setting.picgo.plugin.nowork") }}
+                    </span>
                     <template v-if="searchText">
                       <template v-if="!item.hasInstall">
                         <span
@@ -150,6 +155,17 @@
         </el-row>
       </div>
     </div>
+    <!-- 插件自定义配置表单 -->
+    <div class="plugin-config-form" v-else>
+      <config-form
+        :config-type="pluginConfigData.currentType"
+        :id="pluginConfigData.currentType"
+        :config-id="pluginConfigData.configName"
+        :config="pluginConfigData.config"
+        :is-new-form="false"
+        @on-change="emitBackFn"
+      />
+    </div>
   </div>
 </template>
 
@@ -170,6 +186,7 @@ import sysUtil from "~/utils/otherlib/sysUtil"
 import { debounce, DebouncedFunc } from "lodash"
 import { useI18n } from "vue-i18n"
 import { PicgoPageMenuType } from "~/utils/platform/picgo/picgoPlugin"
+import ConfigForm from "~/components/picgo/common/ConfigForm.vue"
 
 const logger = LogFactory.getLogger(
   "components/picgo/setting/PicgoPluginSetting.vue"
@@ -196,6 +213,12 @@ const npmSearchText = computed(() => {
     : searchText.value
 })
 let getSearchResult: DebouncedFunc<(val: string) => void>
+const showPluginConfigForm = ref(false)
+const pluginConfigData = reactive({
+  currentType: "plugin",
+  configName: "",
+  config: {},
+})
 
 watch(npmSearchText, (val: string) => {
   if (val) {
@@ -207,11 +230,21 @@ watch(npmSearchText, (val: string) => {
   }
 })
 
+function emitBackFn() {
+  showPluginConfigForm.value = false
+}
+
 // handles
 function getPluginList() {
   picgoUtil.ipcHandleEvent("getPluginList")
 }
 
+const checkWork = (item) => {
+  console.log("checkWork item=>", item)
+  const WORKED_PLUGINS = ["watermark-elec", "s3", "minio"]
+  return WORKED_PLUGINS.includes(item.name)
+}
+
 function openHomepage(url: string) {
   if (url) {
     goToPage(url)
@@ -336,6 +369,7 @@ function handleSearchResult(item: INPMSearchResultObject) {
       gui = true
     }
   }
+
   return {
     name,
     fullName: item.package.name,
@@ -367,7 +401,9 @@ onBeforeMount(() => {
     const rawArgs = data.rawArgs
     if (rawArgs.success) {
       const list = rawArgs.data
-      pluginData.pluginList = list
+      pluginData.pluginList = list.map((item) => {
+        item.isWork = checkWork(item)
+      })
       pluginData.pluginNameList = list.map((item) => item.fullName)
 
       logger.info("插件列表已经成功加载.", list)
@@ -468,10 +504,10 @@ onBeforeMount(() => {
     logger.info("_configName=>", _configName)
     logger.info("_config=>", _config)
 
-    // currentType.value = _currentType
-    // configName.value = _configName
-    // dialogVisible.value = true
-    // config.value = _config
+    pluginConfigData.currentType = _currentType
+    pluginConfigData.configName = _configName
+    pluginConfigData.config = _config
+    showPluginConfigForm.value = true
   })
 
   getPluginList()
@@ -675,6 +711,13 @@ $darwinBg = #172426
       &.install
         right 0
 
+      &.work
+        background: #3c8833;
+
+      &.nowork
+        background: #843333;
+        margin-right: 20px;
+
         &:hover
           background: #1B9EF3
           color #fff

locales/en_US.ts

@@ -446,6 +446,8 @@ export default {
   "setting.picgo.picbed.uploader.config.name": "Picbed config name",
   "setting.picgo.picbed.uploader.config.name.placeholder":
     "Please input config name",
+  "setting.picgo.config.name": "Config name",
+  "setting.picgo.config.name.placeholder": "Please input config name",
   "setting.picgo.index.tip":
     "Note: The image uploaded here will not be automatically inserted into the document. Please manually click the copy button to copy the link, and then Ctrl+V to paste it into the document. This picture list only shows the pictures contained in this document.",
   "setting.picgo.index.copy.link": "Copy link",
@@ -485,4 +487,6 @@ export default {
   "setting.picgo.plugin.disable": "Disable plugin",
   "setting.picgo.plugin.update": "Update plugin",
   "setting.picgo.plugin.config.setting": "Plugin setting",
+  "setting.picgo.plugin.work": "Work",
+  "setting.picgo.plugin.nowork": "Nowork",
 }

locales/zh_CN.ts

@@ -445,6 +445,8 @@ export default {
   "setting.picgo.picbed.current.tip": "当前默认图床是：",
   "setting.picgo.picbed.uploader.config.name": "图床配置名",
   "setting.picgo.picbed.uploader.config.name.placeholder": "请输入配置名称",
+  "setting.picgo.config.name": "配置名称",
+  "setting.picgo.config.name.placeholder": "请输入配置名称",
   "setting.picgo.index.tip":
     "注意：1、此处上传的图片不会自动插入文档中，请手动点击按钮复制链接，然后 Ctrl+V 粘贴到文档中。2、对于文档当中原本已经存在的本地图片，点击上传之后不会直接替换原始图片，只会存储本地图片与图床图片的映射信息，需要在发布文章时手动勾选【使用图床】才会进行临时链接替换，请知悉。这样做是为了不破坏其他地方对文档图片的处理。当然，您也可以手动复制图床链接，然后删除原图片，替换为图床图片。3、该图片列表仅展示此文档包含的图片。",
   "setting.picgo.index.copy.link": "复制链接",
@@ -483,4 +485,6 @@ export default {
   "setting.picgo.plugin.disable": "禁用插件",
   "setting.picgo.plugin.update": "更新插件",
   "setting.picgo.plugin.config.setting": "插件设置",
+  "setting.picgo.plugin.work": "兼容",
+  "setting.picgo.plugin.nowork": "不兼容",
 }

utils/otherlib/picgoUtil.js

@@ -85,7 +85,7 @@ const getPicgoConfig = (key = undefined) => {
  * @param _config IObj | string
  * @param value ?: any
  */
-const savePicgoConfig = (_config, value = "") => {
+const savePicgoConfig = (_config, value = undefined) => {
   const syWin = siyuanBrowserUtil.getSiyuanWindow()
   const picgo = syWin.SyPicgo.getPicgoObj()
 
@@ -586,23 +586,27 @@ const buildPluginMenu = (plugin, i18nFunc) => {
   // 插件自定义菜单配置
   const pluginI18n = i18nFunc(PicgoPageMenuType.PicgoPageMenuType_Plugin)
   for (const i in plugin.config) {
-    if (plugin.config[i].config.length > 0) {
-      const obj = {
-        label: `${pluginI18n["setting.picgo.plugin.config.setting"]} - ${
-          plugin.config[i].fullName || plugin.config[i].name
-        }`,
-        click() {
-          const currentType = i
-          const configName = plugin.config[i].fullName || plugin.config[i].name
-          const config = plugin.config[i].config
-          ipcHandleEvent("picgoConfigPlugin", {
-            currentType: currentType,
-            configName: configName,
-            config: config,
-          })
-        },
+    // 图床分多份单独配置
+    if (i !== "uploader") {
+      if (plugin.config[i].config.length > 0) {
+        const obj = {
+          label: `${pluginI18n["setting.picgo.plugin.config.setting"]} - ${
+            plugin.config[i].fullName || plugin.config[i].name
+          }`,
+          click() {
+            const currentType = i
+            const configName =
+              plugin.config[i].fullName || plugin.config[i].name
+            const config = plugin.config[i].config
+            ipcHandleEvent("picgoConfigPlugin", {
+              currentType: currentType,
+              configName: configName,
+              config: config,
+            })
+          },
+        }
+        template.push(obj)
       }
-      template.push(obj)
     }
   }