Finished: custom picbed setting for displaying visible or none

src/datastore/pic-bed.js

@@ -3,29 +3,39 @@ import qiniuUpload from '../main/utils/qiniuUpload'
 import tcYunUpload from '../main/utils/tcYunUpload'
 import upYunUpload from '../main/utils/upYunUpload'
 import githubUpload from '../main/utils/githubUpload'
+import db from './index'
 
-const picBed = [
-  {
-    type: 'weibo',
-    name: '微博图床'
-  },
-  {
-    type: 'qiniu',
-    name: '七牛图床'
-  },
-  {
-    type: 'tcyun',
-    name: '腾讯云COS'
-  },
-  {
-    type: 'upyun',
-    name: '又拍云图床'
-  },
-  {
-    type: 'github',
-    name: 'GitHub图床'
-  }
-]
+let picBed = db.read().get('picBed.list').value()
+
+if (!picBed) {
+  picBed = [
+    {
+      type: 'weibo',
+      name: '微博图床',
+      visible: true
+    },
+    {
+      type: 'qiniu',
+      name: '七牛图床',
+      visible: true
+    },
+    {
+      type: 'tcyun',
+      name: '腾讯云COS',
+      visible: true
+    },
+    {
+      type: 'upyun',
+      name: '又拍云图床',
+      visible: true
+    },
+    {
+      type: 'github',
+      name: 'GitHub图床',
+      visible: true
+    }
+  ]
+}
 
 const picBedHandler = {
   weibo: weiboUpload,

src/renderer/components/SettingPage.vue

@@ -30,14 +30,18 @@
               <i class="el-icon-menu"></i>
               <span>图床设置</span>
             </template>
-            <el-menu-item
+            <template
               v-for="item in picBed"
-              :index="item.type"
-              :key="item.type"
             >
-              <i :class="`el-icon-ui-${item.type}`"></i>
-              <span slot="title">{{ item.name }}</span>
-            </el-menu-item>
+              <el-menu-item
+                v-if="item.visible"
+                :index="item.type"
+                :key="item.type"
+              >
+                <i :class="`el-icon-ui-${item.type}`"></i>
+                <span slot="title">{{ item.name }}</span>
+              </el-menu-item>
+            </template>
           </el-submenu>
           <el-menu-item index="setting">
             <i class="el-icon-setting"></i>
@@ -91,29 +95,6 @@
         <el-button type="primary" @click="confirmKeyBinding">确定</el-button>
       </span>
     </el-dialog>
-    <el-dialog
-      title="修改快捷键"
-      :visible.sync="keyBindingVisible"
-    >
-      <el-form
-        label-width="80px"
-      >
-        <el-form-item
-          label="快捷上传"
-        >
-          <el-input 
-            class="align-center"
-            @keydown.native.prevent="keyDetect('upload', $event)"
-            v-model="shortKey.upload"
-            :autofocus="true"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer">
-        <el-button @click="cancelKeyBinding">取消</el-button>
-        <el-button type="primary" @click="confirmKeyBinding">确定</el-button>
-      </span>
-    </el-dialog>
     <el-dialog
       title="自定义链接格式"
       :visible.sync="customLinkVisible"
@@ -219,27 +200,6 @@ export default {
           click () {
             _this.visible = true
           }
-        },
-        {
-          label: '修改快捷键',
-          click () {
-            _this.keyBindingVisible = true
-          }
-        },
-        {
-          label: '自定义链接格式',
-          click () {
-            _this.customLinkVisible = true
-          }
-        },
-        {
-          label: '打开更新助手',
-          type: 'checkbox',
-          checked: _this.$db.get('picBed.showUpdateTip').value(),
-          click () {
-            const value = _this.$db.read().get('picBed.showUpdateTip').value()
-            _this.$db.read().set('picBed.showUpdateTip', !value).write()
-          }
         }
       ]
       this.menu = Menu.buildFromTemplate(template)

src/renderer/components/SettingView/PicGoSetting.vue

@@ -2,9 +2,6 @@
   <div id="picgo-setting">
     <div class="view-title">
       PicGo设置
-      <div class="sub-title">
-        注意保存设置
-      </div>
     </div>
     <el-row class="setting-list">
       <el-col :span="15" :offset="4">
@@ -17,12 +14,12 @@
           <el-form-item
             label="修改快捷键"
           >
-            <el-button type="primary" round size="mini">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="keyBindingVisible = true">点击设置</el-button>
           </el-form-item>
           <el-form-item
             label="自定义链接格式"
           >
-            <el-button type="primary" round size="mini">点击设置</el-button>
+            <el-button type="primary" round size="mini" @click="customLinkVisible = true">点击设置</el-button>
           </el-form-item>
           <el-form-item
             label="打开更新助手"
@@ -31,6 +28,7 @@
               v-model="form.updateHelper"
               active-text="开"
               inactive-text="关"
+              @change="updateHelperChange"
             ></el-switch>
           </el-form-item>
           <el-form-item
@@ -54,34 +52,162 @@
           <el-form-item
             label="选择显示的图床"
           >
-            <el-checkbox-group v-model="form.showPicBedList">
+            <el-checkbox-group
+              v-model="form.showPicBedList"
+              @change="handleShowPicBedListChange"
+            >
               <el-checkbox
                 v-for="(item, index) in picBed"
                 :label="item.name"
               ></el-checkbox>
             </el-checkbox-group>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="" round class="confirm-button">保存设置</el-button>
-          </el-form-item>
         </el-form>
         </el-row>
       </el-col>
     </el-row>
+    <el-dialog
+      title="修改快捷键"
+      :visible.sync="keyBindingVisible"
+      :modal-append-to-body="false"
+    >
+      <el-form
+        label-width="80px"
+      >
+        <el-form-item
+          label="快捷上传"
+        >
+          <el-input 
+            class="align-center"
+            @keydown.native.prevent="keyDetect('upload', $event)"
+            v-model="shortKey.upload"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelKeyBinding">取消</el-button>
+        <el-button type="primary" @click="confirmKeyBinding">确定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      title="自定义链接格式"
+      :visible.sync="customLinkVisible"
+      :modal-append-to-body="false"
+    >
+      <el-form
+        label-position="top"
+        :model="customLink"
+        ref="customLink"
+        :rules="rules"
+      >
+        <el-form-item
+          label="用占位符$url来表示url的位置"
+          prop="value"
+        >
+          <el-input 
+            class="align-center"
+            v-model="customLink.value"
+            :autofocus="true"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div>
+        如[]($url)
+      </div>
+      <span slot="footer">
+        <el-button @click="cancelCustomLink">取消</el-button>
+        <el-button type="primary" @click="confirmCustomLink">确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
+import db from '../../../datastore'
+import keyDetect from 'utils/key-binding'
 export default {
   name: 'picgo-setting',
   data () {
+    const customLinkRule = (rule, value, callback) => {
+      if (!/\$url/.test(value)) {
+        return callback(new Error('必须含有$url'))
+      } else {
+        return callback()
+      }
+    }
     return {
       form: {
-        updateHelper: false,
+        updateHelper: this.$db.get('picBed.showUpdateTip').value(),
         showPicBedList: [],
-        autoStart: false,
-        rename: false
+        autoStart: this.$db.get('picBed.autoStart').value() || false,
+        rename: this.$db.get('picBed.rename').value() || false
       },
-      picBed: this.$picBed
+      picBed: this.$picBed,
+      keyBindingVisible: false,
+      customLinkVisible: false,
+      customLink: {
+        value: db.read().get('customLink').value() || '$url'
+      },
+      shortKey: {
+        upload: db.read().get('shortKey.upload').value()
+      },
+      rules: {
+        value: [
+          { validator: customLinkRule, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created () {
+    this.form.showPicBedList = this.picBed.map(item => {
+      if (item.visible) {
+        return item.name
+      }
+    })
+    console.log(this.picBed)
+  },
+  methods: {
+    keyDetect (type, event) {
+      this.shortKey[type] = keyDetect(event).join('+')
+    },
+    cancelKeyBinding () {
+      this.keyBindingVisible = false
+      this.shortKey = db.read().get('shortKey').value()
+    },
+    confirmKeyBinding () {
+      const oldKey = db.read().get('shortKey').value()
+      db.read().set('shortKey', this.shortKey).write()
+      this.keyBindingVisible = false
+      this.$electron.ipcRenderer.send('updateShortKey', oldKey)
+    },
+    cancelCustomLink () {
+      this.customLinkVisible = false
+      this.customLink.value = db.read().get('customLink').value() || '$url'
+    },
+    confirmCustomLink () {
+      this.$refs.customLink.validate((valid) => {
+        if (valid) {
+          db.read().set('customLink', this.customLink.value).write()
+          this.customLinkVisible = false
+          this.$electron.ipcRenderer.send('updateCustomLink')
+        } else {
+          return false
+        }
+      })
+    },
+    updateHelperChange (val) {
+      this.$db.read().set('picBed.showUpdateTip', val).write()
+    },
+    handleShowPicBedListChange (val) {
+      const list = this.picBed.map(item => {
+        if (!val.includes(item.name)) {
+          item.visible = false
+        } else {
+          item.visible = true
+        }
+        return item
+      })
+      this.$db.read().set('picBed.list', list).write()
     }
   }
 }
@@ -98,43 +224,44 @@ export default {
   .sub-title
     font-size 14px
   .setting-list
-    height 340px
+    height 360px
     box-sizing border-box
     overflow-y auto
     overflow-x hidden
-  .el-form
-    label  
-      line-height 32px
-      padding-bottom 0
-      color #eee
-    .el-button-group
-      width 100%
-      .el-button
-        width 50%
-    .el-input__inner
-      border-radius 19px
-    .el-radio-group
-      margin-left 25px
-    .el-switch__label
-      color #eee
-      &.is-active
-        color #409EFF
-    .el-icon-question
-      font-size 20px
-      float right
-      margin-top 9px
-      color #eee
-      cursor pointer
-      transition .2s color ease-in-out
-      &:hover
-        color #409EFF
-    .el-checkbox-group
-      label
+  .setting-list
+    .el-form
+      label  
+        line-height 32px
+        padding-bottom 0
+        color #eee
+      .el-button-group
+        width 100%
+        .el-button
+          width 50%
+      .el-input__inner
+        border-radius 19px
+      .el-radio-group
+        margin-left 25px
+      .el-switch__label
+        color #eee
+        &.is-active
+          color #409EFF
+      .el-icon-question
+        font-size 20px
+        float right
+        margin-top 9px
+        color #eee
+        cursor pointer
+        transition .2s color ease-in-out
+        &:hover
+          color #409EFF
+      .el-checkbox-group
+        label
+          margin-right 30px
+          width 100px
+      .el-checkbox+.el-checkbox
         margin-right 30px
-        width 100px
-    .el-checkbox+.el-checkbox
-      margin-right 30px
-      margin-left 0
-    .confirm-button
-      width 100%
+        margin-left 0
+      .confirm-button
+        width 100%
 </style>