✨ Feature: support multiple config (#1016)

public/i18n/en.yml

@@ -109,6 +109,9 @@ SETTINGS_SET_DEFAULT_PICBED: Set Default Picbed
 SETTINGS_NOT_CONFIG_OPTIONS: Not Config Options
 SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: Use Builtin Clipboard to Upload
 SETTINGS_CHOOSE_LANGUAGE: Choose Language
+UPLOADER_CONFIG_NAME: Configuration Name
+UPLOADER_CONFIG_PLACEHOLDER: Please Enter Configuration Name
+SELECTED_SETTING_HINT: Selected
 
 # shortcut-page
 

public/i18n/zh-CN.yml

@@ -110,6 +110,9 @@ SETTINGS_NOT_CONFIG_OPTIONS: 暂无配置项
 SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: 使用内置剪贴板上传
 SETTINGS_CHOOSE_LANGUAGE: 选择语言
 BUILTIN_CLIPBOARD_TIPS: 使用内置剪贴板函数而不是调用脚本获取剪贴板图片
+UPLOADER_CONFIG_NAME: 图床配置名
+UPLOADER_CONFIG_PLACEHOLDER: 请输入配置名称
+SELECTED_SETTING_HINT: 已选中
 
 # shortcut-page
 

public/i18n/zh-TW.yml

@@ -110,6 +110,9 @@ SETTINGS_NOT_CONFIG_OPTIONS: 暫無設定選項
 SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: 使用內建剪貼簿上傳
 SETTINGS_CHOOSE_LANGUAGE: 選擇語言
 BUILTIN_CLIPBOARD_TIPS: 使用內建剪貼簿函數而不是調用腳本取得剪貼簿內的照片
+UPLOADER_CONFIG_NAME: 圖床配置名
+UPLOADER_CONFIG_PLACEHOLDER: 請輸入配置名稱
+SELECTED_SETTING_HINT: 已選中
 
 # shortcut-page
 

src/renderer/components/ConfigForm.vue

@@ -7,6 +7,18 @@
       ref="form"
       size="mini"
     >
+      <el-form-item
+        :label="$T('UPLOADER_CONFIG_NAME')"
+        required
+        prop="_configName"
+      >
+        <el-input
+          type="input"
+          v-model="ruleForm._configName"
+          :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
+        ></el-input>
+      </el-form-item>
+      <!-- dynamic config -->
       <el-form-item
         v-for="(item, index) in configList"
         :label="item.alias || item.name"
@@ -115,10 +127,12 @@ export default class extends Vue {
   }
 
   async handleConfig (val: IPicGoPluginConfig[]) {
-    this.ruleForm = Object.assign({}, {})
-    const config = await this.getConfig<IPicGoPluginConfig>(this.getConfigType())
+    const config = await this.getCurConfigFormData()
+    const configId = this.$route.params.configId
+    this.ruleForm = Object.assign({}, config)
     if (val.length > 0) {
       this.configList = cloneDeep(val).map((item) => {
+        if (!configId) return item
         let defaultValue = item.default !== undefined
           ? item.default
           : item.type === 'checkbox'
@@ -138,6 +152,12 @@ export default class extends Vue {
       })
     }
   }
+
+  async getCurConfigFormData () {
+    const configId = this.$route.params.configId
+    const curTypeConfigList = await this.getConfig<IStringKeyMap[]>(`uploader.${this.id}.configList`) || []
+    return curTypeConfigList.find(i => i._id === configId) || {}
+  }
 }
 </script>
 <style lang='stylus'>

src/renderer/layouts/Main.vue

@@ -39,7 +39,7 @@
             >
               <el-menu-item
                 v-if="item.visible"
-                :index="`picbeds-${item.type}`"
+                :index="`uploader-config-page-${item.type}`"
                 :key="item.type"
               >
                 <!-- <i :class="`el-icon-ui-${item.type}`"></i> -->
@@ -211,17 +211,17 @@ export default class extends Vue {
   }
 
   handleSelect (index: string) {
-    const type = index.match(/picbeds-/)
+    const type = index.match(/uploader-config-page-/)
     if (type === null) {
       this.$router.push({
         name: index
       })
     } else {
-      const picBed = index.replace(/picbeds-/, '')
+      const type = index.replace(/uploader-config-page-/, '')
       this.$router.push({
-        name: 'picbeds',
+        name: 'UploaderConfigPage',
         params: {
-          type: picBed
+          type
         }
       })
       // if (this.$builtInPicBed.includes(picBed)) {

src/renderer/pages/UploaderConfigPage.vue

@@ -0,0 +1,226 @@
+<template>
+  <div id="config-list-view">
+    <div class="view-title">
+      {{ $T('SETTINGS') }}
+    </div>
+    <el-row :gutter="15" justify="space-between" align="center" type="flex" class="config-list">
+      <el-col
+        class="config-item-col"
+        v-for="item in curConfigList"
+        :key="item._id"
+        :span="11"
+        :offset="1"
+      >
+        <div
+          :class="`config-item ${defaultConfigId === item._id ? 'selected' : ''}`"
+          @click="() => selectItem(item._id)"
+        >
+          <div class="config-name">{{item._configName}}</div>
+          <div class="config-update-time">{{formatTime(item._updatedAt)}}</div>
+          <div v-if="defaultConfigId === item._id" class="default-text">{{$T('SELECTED_SETTING_HINT')}}</div>
+          <div class="operation-container">
+            <i class="el-icon-edit" @click="openEditPage(item._id)"></i>
+            <i :class="`el-icon-delete ${curConfigList.length <= 1 ? 'disabled' : ''}`" @click.stop="() => deleteConfig(item._id)"></i>
+          </div>
+        </div>
+      </el-col>
+      <el-col
+        class="config-item-col"
+        :span="11"
+        :offset="1"
+      >
+        <div
+          class="config-item config-item-add"
+          @click="addNewConfig"
+        >
+          <i class="el-icon-plus"></i>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row type="flex" justify="center" :span="24" class="set-default-container">
+      <el-button class="set-default-btn" type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">{{ $T('SETTINGS_SET_DEFAULT_PICBED') }}</el-button>
+    </el-row>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import dayjs from 'dayjs'
+import { completeUploaderMetaConfig } from '../utils/uploader'
+import mixin from '@/utils/ConfirmButtonMixin'
+
+@Component({
+  name: 'UploaderConfigPage',
+  mixins: [mixin]
+})
+export default class extends Vue {
+  type!: string;
+  curConfigList: IStringKeyMap[] = [];
+  defaultConfigId = '';
+
+  async selectItem (id: string) {
+    await this.saveConfig(`uploader.${this.type}.defaultId`, id)
+    const activeConfig = this.curConfigList.find(i => i._id === id)
+    await this.saveConfig(`picBed.${this.type}`, activeConfig)
+    this.defaultConfigId = id
+  }
+
+  created () {
+    this.type = this.$route.params.type
+    this.getCurrentConfigList()
+  }
+
+  async getCurrentConfigList () {
+    const curUploaderConfig = await this.getConfig<IStringKeyMap>(`uploader.${this.type}`) ?? {}
+    let curConfigList = curUploaderConfig?.configList
+    this.defaultConfigId = curUploaderConfig?.defaultId
+
+    if (!curConfigList) {
+      curConfigList = await this.fixUploaderConfig()
+    }
+
+    this.curConfigList = curConfigList
+  }
+
+  async fixUploaderConfig (): Promise<IStringKeyMap[]> {
+    const curUploaderConfig = await this.getConfig<IStringKeyMap>(`picBed.${this.type}`) ?? {}
+
+    if (!curUploaderConfig._id) {
+      Object.assign(
+        curUploaderConfig,
+        completeUploaderMetaConfig(curUploaderConfig)
+      )
+    }
+
+    const curUploaderConfigList = [curUploaderConfig]
+    await this.saveConfig(`uploader.${this.type}`, {
+      configList: curUploaderConfigList,
+      defaultId: curUploaderConfig._id
+    })
+
+    // fix exist config
+    await this.saveConfig(`picBed.${this.type}`, curUploaderConfig)
+
+    this.defaultConfigId = curUploaderConfig._id
+
+    return curUploaderConfigList
+  }
+
+  openEditPage (configId: string) {
+    this.$router.push({
+      name: 'picbeds',
+      params: {
+        type: this.type,
+        configId
+      },
+      query: {
+        defaultConfigId: this.defaultConfigId
+      }
+    })
+  }
+
+  formatTime (time: number):string {
+    return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
+  }
+
+  async deleteConfig (id: string) {
+    if (this.curConfigList.length <= 1) return
+    const updatedConfigList = this.curConfigList.filter(i => i._id !== id)
+
+    if (id === this.defaultConfigId) {
+      await this.selectItem(updatedConfigList[0]._id)
+    }
+
+    await this.saveConfig(`uploader.${this.type}.configList`, updatedConfigList)
+    this.curConfigList = updatedConfigList
+  }
+
+  addNewConfig () {
+    this.$router.push({
+      name: 'picbeds',
+      params: {
+        type: this.type,
+        configId: ''
+      }
+    })
+  }
+
+  setDefaultPicBed (type: string) {
+    this.saveConfig({
+      'picBed.current': type,
+      'picBed.uploader': type
+    })
+    // @ts-ignore 来自mixin的数据
+    this.defaultPicBed = type
+    const successNotification = new Notification(this.$T('SETTINGS_DEFAULT_PICBED'), {
+      body: this.$T('TIPS_SET_SUCCEED')
+    })
+    successNotification.onclick = () => {
+      return true
+    }
+  }
+}
+</script>
+<style lang='stylus'>
+#config-list-view
+  position relative
+  min-height 100%
+  overflow-x hidden
+  overflow-y auto
+  padding-bottom 50px
+  box-sizing border-box
+  .config-list
+    flex-wrap wrap
+    width: 98%
+    .config-item
+      height 85px
+      margin-bottom 20px
+      border-radius 4px
+      cursor pointer
+      box-sizing border-box
+      padding 8px
+      background rgba(130, 130, 130, .2)
+      border 1px solid transparent
+      box-shadow 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
+      position relative
+      .config-name
+        color #eee
+        font-size 16px
+      .config-update-time
+        color #aaa
+        font-size 14px
+        margin-top 10px
+      .default-text
+        color #67C23A
+        font-size 12px
+        margin-top 5px
+      .operation-container
+        position absolute
+        right 5px
+        top 8px
+        font-size 18pxc
+        display flex
+        align-items center
+        color #eee
+        .el-icon-edit
+        .el-icon-delete
+          cursor pointer
+        .el-icon-edit
+          margin-right 10px
+        .disabled
+          cursor not-allowed
+          color #aaa
+    .config-item-add
+      display: flex
+      justify-content: center
+      align-items: center
+      color: #eee
+      font-size: 28px
+    .selected
+      border 1px solid #409EFF
+  .set-default-container
+    position absolute
+    bottom 10px
+    width 100%
+    .set-default-btn
+      width 250px
+</style>

src/renderer/pages/picbeds/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="others-view">
-    <el-row :gutter="16" class="setting-list">
-      <el-col :span="16" :offset="4">
+    <el-row :gutter="20" class="setting-list">
+      <el-col :span="20" :offset="2">
         <div class="view-title">
           {{ picBedName }} {{ $T('SETTINGS') }}
         </div>
@@ -13,15 +13,11 @@
           :id="type"
         >
           <el-form-item>
-            <el-button-group>
-              <el-button type="primary" @click="handleConfirm" round>{{ $T('CONFIRM') }}</el-button>
-              <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type">{{ $T('SETTINGS_SET_DEFAULT_PICBED') }}</el-button>
-            </el-button-group>
+            <el-button class="confirm-btn" type="primary" @click="handleConfirm" round>{{ $T('CONFIRM') }}</el-button>
           </el-form-item>
         </config-form>
         <div v-else class="single">
           <div class="notice">{{ $T('SETTINGS_NOT_CONFIG_OPTIONS') }}</div>
-          <el-button type="success" @click="setDefaultPicBed(type)" round :disabled="defaultPicBed === type" size="mini">{{ $T('SETTINGS_SET_DEFAULT_PICBED') }}</el-button>
         </div>
       </el-col>
     </el-row>
@@ -35,6 +31,7 @@ import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
+import { completeUploaderMetaConfig } from '@/utils/uploader'
 import { trimValues } from '@/utils/common'
 
 @Component({
@@ -58,15 +55,36 @@ export default class extends Vue {
     // @ts-ignore
     const result = await this.$refs.configForm.validate()
     if (result !== false) {
-      this.saveConfig({
-        [`picBed.${this.type}`]: trimValues(result)
-      })
+      const configListConfigPath = `uploader.${this.type}.configList`
+      const configList = await this.getConfig<IStringKeyMap[]>(configListConfigPath)
+      // Finds the specified item from the config array and modifies it
+      const existItem = configList?.find(item => item._id === result._id)
+      // edit
+      if (existItem) {
+        Object.assign(existItem, trimValues(result), {
+          _updatedAt: Date.now()
+        })
+      } else { // add new
+        configList?.push(trimValues(completeUploaderMetaConfig(result)))
+      }
+
+      await this.saveConfig(configListConfigPath, configList)
+      existItem && await this.shouldUpdateDefaultConfig(existItem)
+
       const successNotification = new Notification(this.$T('SETTINGS_RESULT'), {
         body: this.$T('TIPS_SET_SUCCEED')
       })
       successNotification.onclick = () => {
         return true
       }
+      this.$router.back()
+    }
+  }
+
+  shouldUpdateDefaultConfig (item: IStringKeyMap) {
+    const curDefaultConfigId = this.$route.query.defaultConfigId
+    if (item._id === curDefaultConfigId) {
+      this.saveConfig(`picBed.${this.type}`, item)
     }
   }
 
@@ -101,6 +119,8 @@ export default class extends Vue {
     height 425px
     overflow-y auto
     overflow-x hidden
+  .confirm-btn
+    width: 250px
   .el-form
     label
       line-height 22px

src/renderer/router/index.ts

@@ -32,7 +32,7 @@ export default new Router({
           name: 'upload'
         },
         {
-          path: 'picbeds/:type',
+          path: 'picbeds/:type/:configId',
           component: () => import(/* webpackChunkName: "Other" */ '@/pages/picbeds/index.vue'),
           name: 'picbeds'
         },
@@ -58,6 +58,11 @@ export default new Router({
           path: 'shortKey',
           component: () => import(/* webpackChunkName: "ShortkeyPage" */ '@/pages/ShortKey.vue'),
           name: 'shortKey'
+        },
+        {
+          path: 'uploader-config-page/:type',
+          component: () => import(/* webpackChunkName: "Other" */ '@/pages/UploaderConfigPage.vue'),
+          name: 'UploaderConfigPage'
         }
       ]
     },

src/renderer/utils/uploader.ts

@@ -0,0 +1,11 @@
+import { uuid } from 'uuidv4'
+
+export const completeUploaderMetaConfig = (originData: IStringKeyMap): IStringKeyMap => {
+  return Object.assign({
+    _configName: 'Default'
+  }, originData, {
+    _id: uuid(),
+    _createdAt: Date.now(),
+    _updatedAt: Date.now()
+  })
+}

src/universal/types/i18n.d.ts

@@ -105,6 +105,9 @@ interface ILocales {
   SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD: string
   SETTINGS_CHOOSE_LANGUAGE: string
   BUILTIN_CLIPBOARD_TIPS: string
+  UPLOADER_CONFIG_NAME: string
+  UPLOADER_CONFIG_PLACEHOLDER: string
+  SELECTED_SETTING_HINT: string
   SHORTCUT_NAME: string
   SHORTCUT_BIND: string
   SHORTCUT_STATUS: string