Finished: picgo-setting page FE part

src/renderer/components/SettingPage.vue

@@ -44,7 +44,7 @@
             <span slot="title">PicGo设置</span>
           </el-menu-item>
         </el-menu>
-        <i class="el-icon-setting setting-window" @click="openDialog"></i>
+        <i class="el-icon-info setting-window" @click="openDialog"></i>
       </el-col>
       <el-col :span="19" :offset="5">
         <router-view></router-view>
@@ -150,7 +150,6 @@ import pkg from '../../../package.json'
 import keyDetect from 'utils/key-binding'
 import { remote } from 'electron'
 import db from '../../datastore'
-import { picBed } from '../../datastore/pic-bed'
 const { Menu, dialog, BrowserWindow } = remote
 export default {
   name: 'setting-page',
@@ -181,7 +180,7 @@ export default {
       shortKey: {
         upload: db.read().get('shortKey.upload').value()
       },
-      picBed
+      picBed: this.$picBed
     }
   },
   created () {
@@ -318,7 +317,7 @@ export default {
     overflow-x hidden
     overflow-y auto
     width 170px
-    .el-icon-setting.setting-window
+    .el-icon-info.setting-window
       position fixed 
       bottom 4px
       left 4px

src/renderer/components/SettingView/Gallery.vue

@@ -143,7 +143,9 @@ export default {
   color #eee
   font-size 20px
   text-align center
-  margin 20px auto
+  margin 10px auto
+  .sub-title
+    font-size 14px
 #gallery-view
   .gallery-list
     height 360px

src/renderer/components/SettingView/PicGoSetting.vue

@@ -1,17 +1,21 @@
 <template>
   <div id="picgo-setting">
-    <el-row :gutter="16">
-      <el-col :span="12" :offset="6">
     <div class="view-title">
       PicGo设置
+      <div class="sub-title">
+        注意保存设置
       </div>
+    </div>
+    <el-row class="setting-list">
+      <el-col :span="15" :offset="4">
+        <el-row>
         <el-form
           label-width="120px"
           label-position="right"
           size="small"
         >
           <el-form-item
-            label="设定快捷键"
+            label="修改快捷键"
           >
             <el-button type="primary" round size="mini">点击设置</el-button>
           </el-form-item>
@@ -29,7 +33,39 @@
               inactive-text="关"
             ></el-switch>
           </el-form-item>
+          <el-form-item
+            label="开机自启"
+          >
+            <el-switch
+              v-model="form.autoStart"
+              active-text="开"
+              inactive-text="关"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="上传前重命名"
+          >
+            <el-switch
+              v-model="form.rename"
+              active-text="开"
+              inactive-text="关"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            label="选择显示的图床"
+          >
+            <el-checkbox-group v-model="form.showPicBedList">
+              <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>
   </div>
@@ -40,8 +76,12 @@ export default {
   data () {
     return {
       form: {
-        updateHelper: false
-      }
+        updateHelper: false,
+        showPicBedList: [],
+        autoStart: false,
+        rename: false
+      },
+      picBed: this.$picBed
     }
   }
 }
@@ -55,6 +95,11 @@ export default {
   text-align center
   margin 20px auto
 #picgo-setting
+  .setting-list
+    height 360px
+    box-sizing border-box
+    overflow-y auto
+    overflow-x hidden
   .el-form
     label  
       line-height 32px
@@ -81,4 +126,13 @@ export default {
       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
+      margin-left 0
+    .confirm-button
+      width 100%
 </style>

src/renderer/main.js

@@ -8,6 +8,7 @@ import store from './store'
 import db from '../datastore/index'
 import { webFrame } from 'electron'
 import './assets/fonts/iconfont.css'
+import { picBed } from '../datastore/pic-bed'
 Vue.use(ElementUI)
 
 webFrame.setVisualZoomLevelLimits(1, 1)
@@ -16,6 +17,7 @@ webFrame.setLayoutZoomLevelLimits(0, 0)
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.prototype.$db = db
+Vue.prototype.$picBed = picBed
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */