feat: #319 PicGO图形化配置界面-读取多个图床配置列表

components/picgo/PicgoSetting.vue

@@ -75,19 +75,10 @@ import PicgoConfigSetting from "~/components/picgo/setting/PicgoConfigSetting.vu
   display: block;
   border: solid 1px green;
   border-radius: 4px;
-  /* padding-bottom: 10px; */
   background: var(--custom-app-bg-color);
-  /* margin-bottom: 10px; */
   margin-inline-start: 0;
   margin-inline-end: 0;
   margin: 0 0 10px;
-  padding: 0 16px 12px;
-}
-
-@media only screen and (max-width: 900px) {
-  .picgo-setting-tip {
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
+  padding: 16px;
 }
 </style>

components/picgo/setting/picbedform/GithubForm.vue → components/picgo/setting/PicbedConfigForm.vue

@@ -1,26 +1,28 @@
 <!--
   - 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.
   -->
 
-<template></template>
+<template>
+  <div>config form</div>
+</template>

components/picgo/setting/PicbedSetting.vue

@@ -24,29 +24,35 @@
   -->
 
 <template>
-  <div>
-    <el-form-item>
+  <div class="picbed-setting">
+    <!-- 图床配置列表 -->
+    <div class="bed-type-list">
       <el-button-group>
         <el-button
-          :type="arrayUtil.getRandomItem(btnTypes)"
           v-for="item in picBedData.showPicBedList"
+          :type="
+            currentPicbed === item.type
+              ? 'primary'
+              : arrayUtil.getRandomItem(btnTypes)
+          "
           :key="item.name"
           @click="handlePicBedTypeChange(item)"
           >{{ item.name }}
         </el-button>
       </el-button-group>
-    </el-form-item>
+    </div>
 
-    <el-form-item>
+    <div class="profile-box">
+      <!-- 图床配置列表 -->
       <div class="profile-card-box">
         <div
-          v-bind:key="profile.index"
+          v-bind:key="config._id"
           class="profile-card-item"
-          v-for="profile in profileData.profileList"
+          v-for="config in profileData.profileList.configList"
         >
           <el-card>
             <div class="profile-card-line">
-              <span>{{ profile.profileName }}</span>
+              <span>{{ config._configName }}</span>
               <span class="pull-right">
                 <el-tooltip
                   :content="$t('main.opt.edit')"
@@ -72,49 +78,33 @@
                 </el-tooltip>
               </span>
             </div>
-            <div>{{ formatIsoToZhDate(new Date().toISOString()) }}</div>
-            <div :class="{ selected: profile.selected }">已选中</div>
+            <div>{{ config._updatedAt }}</div>
+            <div
+              :class="{
+                selected: config._id === profileData.profileList.defaultId,
+              }"
+            >
+              {{ $t("setting.picgo.picbed.selected.tip") }}
+            </div>
           </el-card>
         </div>
       </div>
-    </el-form-item>
-
-    <div class="profile-form">
-      <el-form label-width="120px">
-        <div>
-          <el-form-item label="图床配置名">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="Github仓库名">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="Github分支名">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="Token">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="存储路径">
-            <el-input />
-          </el-form-item>
-          <el-form-item label="自定义域名">
-            <el-input />
-          </el-form-item>
-        </div>
-      </el-form>
+
+      <!-- 图床配置表单 -->
+      <div class="profile-form">
+        <picbed-config-form />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive } from "vue"
-import { PicbedType } from "~/utils/common/picbedType"
+import { onMounted, reactive, ref } from "vue"
 import { ElCard } from "element-plus"
-import { formatIsoToZhDate } from "~/utils/dateUtil"
-import { PicbedConfig } from "~/utils/platform/picgo/picbedConfig"
 import picgoUtil from "~/utils/otherlib/picgoUtil"
 import { LogFactory } from "~/utils/logUtil"
 import arrayUtil from "~/utils/arrayUtil"
+import PicbedConfigForm from "~/components/picgo/setting/PicbedConfigForm.vue"
 
 const logger = LogFactory.getLogger(
   "components/picgo/setting/PicbedSetting.vue"
@@ -124,16 +114,19 @@ const picBedData = reactive({
   showPicBedList: <IPicBedType[]>[],
 })
 const profileData = reactive({
-  profileList: <PicbedConfig[]>[],
+  profileList: {
+    configList: [],
+    defaultId: "",
+  },
 })
 
 // 按钮类型
-const btnTypes = ["primary", "success", "info", "warning", "danger"]
+const btnTypes = ["success", "info", "warning", "danger"]
+const currentPicbed = ref("")
 
 const getPicBeds = () => {
   const picBeds = picgoUtil.getPicBeds() as IPicBedType[]
-  logger.warn("获取支持的图床类型：", picBeds)
-  picBedData.showPicBedList = picBeds
+  return picBeds
     .map((item: IPicBedType) => {
       if (item.visible) {
         return item
@@ -143,33 +136,36 @@ const getPicBeds = () => {
     .filter((item) => item) as IPicBedType[]
 }
 
-const getProfileList = (bedType: PicbedType) => {
-  const picbedCfgList = <PicbedConfig[]>[]
+const getProfileList = (bedType: string): IUploaderConfigItem => {
+  const profileList = picgoUtil.getUploaderConfigList(bedType)
+  return profileList
+}
 
-  for (let i = 0; i < 12; i++) {
-    const picbedCfg = new PicbedConfig()
-    const index = i + 1
-    picbedCfg.index = index
-    picbedCfg.profileName = "Profile-" + index
+const handlePicBedTypeChange = (item: IPicBedType) => {
+  currentPicbed.value = item.type
 
-    if (i === 0) {
-      picbedCfg.selected = true
-    }
+  reloadConfig(item.type)
+  logger.info("item=>", item)
+}
+
+const reloadConfig = (bedType = undefined) => {
+  // 获取图床列表
+  const picbeds = getPicBeds()
 
-    picbedCfgList.push(picbedCfg)
+  // 默认第一个图床
+  if (!bedType) {
+    bedType = picbeds.length > 0 ? picbeds[0].type : "github"
   }
 
-  return picbedCfgList
-}
+  currentPicbed.value = bedType
 
-const handlePicBedTypeChange = (item: IPicBedType) => {
-  console.log("item=>", item)
+  picBedData.showPicBedList = picbeds
+  profileData.profileList = getProfileList(bedType)
 }
 
 onMounted(() => {
-  // 获取图床列表
-  getPicBeds()
-  profileData.profileList = getProfileList(PicbedType.PICBED_GITHUB)
+  // 重新加载配置
+  reloadConfig()
 })
 </script>
 

components/picgo/setting/PicgoConfigSetting.vue

@@ -66,7 +66,6 @@ const form = reactive({
 function getPicBeds() {
   const picBeds = picgoUtil.getPicBeds() as IPicBedType[]
   picBed.value = picBeds
-  logger.warn("获取支持的图床类型：", picBeds)
 
   form.showPicBedList = picBed.value
     .map((item: IPicBedType) => {

locales/en_US.ts

@@ -437,4 +437,5 @@ export default {
   "setting.picgo.picgo.open.config.file": "Open config file",
   "setting.picgo.picgo.click.to.open": "Click open",
   "setting.picgo.picgo.choose.showed.picbed": "Please select showed picbed",
+  "setting.picgo.picbed.selected.tip": "Selected",
 }

locales/zh_CN.ts

@@ -437,4 +437,5 @@ export default {
   "setting.picgo.picgo.open.config.file": "打开配置文件",
   "setting.picgo.picgo.click.to.open": "点击打开",
   "setting.picgo.picgo.choose.showed.picbed": "请选择显示的图床",
+  "setting.picgo.picbed.selected.tip": "已选中",
 }

package.json

@@ -44,7 +44,7 @@
     "shorthash2": "^1.0.3",
     "simple-xmlrpc": "^1.1.1",
     "transliteration": "^2.3.5",
-    "uuidv4": "^6.2.13",
+    "uuid": "^9.0.0",
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.2"
   },

typings/picgo.d.ts

@@ -41,3 +41,13 @@ interface IObj {
 interface IStringKeyMap {
   [propName: string]: any
 }
+
+/**
+ * 某个PicGO平台配置列表
+ */
+interface IUploaderConfigItem {
+  configList: IUploaderConfigListItem[]
+  defaultId: string
+}
+
+type IUploaderConfigListItem = IStringKeyMap & IUploaderListItemMetaInfo

utils/idUtil.ts

@@ -24,7 +24,7 @@
  */
 
 import shortHash from "shorthash2"
-import { uuid } from "uuidv4"
+import { v4 as uuidv4 } from "uuid"
 
 /**
  * 唯一ID
@@ -38,7 +38,7 @@ export function newID(): string {
  * ID生成统一入口
  */
 const newUuid = () => {
-  return uuid()
+  return uuidv4()
 }
 
 const idUtil = {