feat: #319 PicGO图形化配置界面-配置表单处理

components/picgo/setting/PicbedConfigForm.vue

@@ -119,25 +119,102 @@
 
 <script lang="ts" setup>
 import { ArrowLeft } from "@element-plus/icons-vue"
-import { onBeforeMount, reactive, ref } from "vue"
+import { onBeforeMount, reactive, ref, toRefs, watch } from "vue"
+import { FormInstance } from "element-plus"
+import { cloneDeep, union } from "lodash"
+import picgoUtil from "~/utils/otherlib/picgoUtil"
 
 const props = defineProps({
+  type: String,
   config: Object,
+  configId: String,
+  isNewForm: Boolean,
 })
 
+const $form = ref<FormInstance>()
 const emits = defineEmits(["on-change"])
 
 const configList = ref<IPicGoPluginConfig[]>([])
 const ruleForm = reactive<IStringKeyMap>({})
 
+watch(
+  toRefs(props.config),
+  (val) => {
+    handleConfigChange(val)
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+)
+
+function handleConfigChange(val: any) {
+  handleConfig(val)
+}
+
+/**
+ * 获取当前表单数据
+ */
+function getCurConfigFormData(): IStringKeyMap[] {
+  const configId = props.configId
+  const curTypeConfigList =
+    picgoUtil.getPicgoConfig(`uploader.${props.type}.configList`) || []
+  return curTypeConfigList.find((i) => i._id === configId) || {}
+}
+
+function handleConfig(val: IPicGoPluginConfig[]) {
+  const config = getCurConfigFormData()
+  const configId = props.isNewForm ? undefined : props.configId
+  Object.assign(ruleForm, config)
+  if (val.length > 0) {
+    configList.value = cloneDeep(val).map((item) => {
+      if (!configId) return item
+      let defaultValue =
+        item.default !== undefined
+          ? item.default
+          : item.type === "checkbox"
+          ? []
+          : null
+      if (item.type === "checkbox") {
+        const defaults =
+          item.choices
+            ?.filter((i: any) => {
+              return i.checked
+            })
+            .map((i: any) => i.value) || []
+        defaultValue = union(defaultValue, defaults)
+      }
+      if (config && config[item.name] !== undefined) {
+        defaultValue = config[item.name]
+      }
+      ruleForm[item.name] = defaultValue
+      return item
+    })
+  }
+}
+
+async function validate(): Promise<IStringKeyMap | false> {
+  return new Promise((resolve) => {
+    $form.value?.validate((valid: boolean) => {
+      if (valid) {
+        resolve(ruleForm)
+      } else {
+        resolve(false)
+        return false
+      }
+    })
+  })
+}
+
 const onBack = () => {
   emits("on-change")
 }
 
-const onSubmit = () => {
-  alert("onSubmit")
-
-  onBack()
+const onSubmit = async () => {
+  const result = (await validate()) || false
+  if (result !== false) {
+    onBack()
+  }
 }
 
 const initPage = () => {

components/picgo/setting/PicbedSetting.vue

@@ -114,6 +114,9 @@
       <div class="profile-form" v-else>
         <picbed-config-form
           :config="profileData.curConfig"
+          :config-id="profileData.defaultConfigId"
+          :is-new-form="isNewForm"
+          :type="type"
           @on-change="emitBackFn"
         />
       </div>
@@ -198,16 +201,6 @@ function selectItem(id: string) {
   alert("selectItem=>" + id)
 }
 
-/**
- * 获取当前表单数据
- */
-function getCurConfigFormData(): IStringKeyMap[] {
-  const configId = profileData.defaultConfigId
-  const curTypeConfigList =
-    picgoUtil.getPicgoConfig(`uploader.${type.value}.configList`) || []
-  return curTypeConfigList.find((i) => i._id === configId) || {}
-}
-
 /**
  * 新增配置
  */
@@ -223,7 +216,7 @@ function addNewConfig() {
  * @param id 配置ID
  */
 function editConfig(id: string) {
-  const config = getCurConfigFormData()
+  const config = picgoUtil.getPicBedConfig(type.value)
   profileData.curConfig = config
 
   isNewForm.value = false

public/manifest.dev.json

@@ -0,0 +1,25 @@
+{
+  "name": "开发版 - 思源笔记发布辅助工具",
+  "version": "0.7.0",
+  "manifest_version": 3,
+  "author": "terwer",
+  "description": "思源笔记发布辅助工具，支持博客式只读浏览，多平台文章发布。",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "host_permissions": ["*://*/*"],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "blog/index.html",
+        "detail/index.html",
+        "publish/index.html",
+        "index.html"
+      ],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  "action": {
+    "default_popup": "blog/index.html"
+  }
+}

public/manifest.prod.json

@@ -0,0 +1,37 @@
+{
+  "name": "思源笔记发布辅助工具",
+  "version": "0.7.0",
+  "manifest_version": 3,
+  "author": "terwer",
+  "icons": {
+    "16": "images/icon16.png",
+    "32": "images/icon32.png",
+    "48": "images/icon48.png",
+    "128": "images/icon128.png"
+  },
+  "description": "思源笔记发布辅助工具，支持博客式只读浏览，多平台文章发布。",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "host_permissions": ["*://*/*"],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "blog/index.html",
+        "detail/index.html",
+        "publish/index.html",
+        "index.html"
+      ],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  "action": {
+    "default_icon": {
+      "16": "images/icon16.png",
+      "32": "images/icon32.png",
+      "48": "images/icon48.png",
+      "128": "images/icon128.png"
+    },
+    "default_popup": "blog/index.html"
+  }
+}

utils/otherlib/picgoUtil.js

@@ -173,25 +173,25 @@ const completeUploaderMetaConfig = (originData) => {
  * @author terwer
  * @since 0.7.0
  */
-// export const getPicBedConfig = (type) => {
-//   const syWin = siyuanBrowserUtil.getSiyuanWindow()
-//   const picgo = syWin.SyPicgo.getPicgoObj()
-//
-//   const name = picgo.helper.uploader.get(type)?.name || type
-//   if (picgo.helper.uploader.get(type)?.config) {
-//     const _config = picgo.helper.uploader.get(type).config(picgo)
-//     const config = handleConfigWithFunction(_config)
-//     return {
-//       config,
-//       name,
-//     }
-//   } else {
-//     return {
-//       config: [],
-//       name,
-//     }
-//   }
-// }
+export const getPicBedConfig = (type) => {
+  const syWin = siyuanBrowserUtil.getSiyuanWindow()
+  const picgo = syWin.SyPicgo.getPicgoObj()
+
+  const name = picgo.helper.uploader.get(type)?.name || type
+  if (picgo.helper.uploader.get(type)?.config) {
+    const _config = picgo.helper.uploader.get(type).config(picgo)
+    const config = handleConfigWithFunction(_config)
+    return {
+      config,
+      name,
+    }
+  } else {
+    return {
+      config: [],
+      name,
+    }
+  }
+}
 
 /**
  * upgrade old uploader config to new format
@@ -369,6 +369,9 @@ const picgoUtil = {
   getPicgoConfig,
   savePicgoConfig,
 
+  // form
+  getPicBedConfig,
+
   // uploader
   getPicBeds,
   getUploaderConfigList,