Added: custom url rules

src/renderer/components/SettingPage.vue

@@ -115,13 +115,17 @@
     >
       <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"
+            v-model="customLink.value"
             :autofocus="true"
           ></el-input>
         </el-form-item>
@@ -145,6 +149,13 @@ const { Menu, dialog, BrowserWindow } = remote
 export default {
   name: 'setting-page',
   data () {
+    const customLinkRule = (rule, value, callback) => {
+      if (!/\$url/.test(value)) {
+        return callback(new Error('必须含有$url'))
+      } else {
+        return callback()
+      }
+    }
     return {
       version: process.env.NODE_ENV === 'production' ? pkg.version : 'Dev',
       defaultActive: 'upload',
@@ -152,7 +163,14 @@ export default {
       visible: false,
       keyBindingVisible: false,
       customLinkVisible: false,
-      customLink: db.read().get('customLink').value() || '$url',
+      customLink: {
+        value: db.read().get('customLink').value() || '$url'
+      },
+      rules: {
+        value: [
+          { validator: customLinkRule, trigger: 'blur' }
+        ]
+      },
       os: '',
       shortKey: {
         upload: db.read().get('shortKey.upload').value()
@@ -238,12 +256,18 @@ export default {
     },
     cancelCustomLink () {
       this.customLinkVisible = false
-      this.customLink = db.read().get('customLink').value() || '$url'
+      this.customLink.value = db.read().get('customLink').value() || '$url'
     },
     confirmCustomLink () {
-      db.read().set('customLink', this.customLink).write()
+      this.$refs.customLink.validate((valid) => {
-      this.customLinkVisible = false
+        if (valid) {
-      this.$electron.ipcRenderer.send('updateCustomLink')
+          db.read().set('customLink', this.customLink.value).write()
+          this.customLinkVisible = false
+          this.$electron.ipcRenderer.send('updateCustomLink')
+        } else {
+          return false
+        }
+      })
     }
   },
   beforeRouteEnter: (to, from, next) => {

src/renderer/components/SettingView/Gallery.vue

@@ -111,6 +111,14 @@ export default {
     padding 8px 0
     overflow-y auto
     overflow-x hidden
+    &::-webkit-scrollbar
+      width 8px
+      height 8px
+    &::-webkit-scrollbar-thumb
+      border-radius 4px
+      background #6f6f6f
+    &::&::-webkit-scrollbar-track
+      background-color transparent
     .el-col
       height 150px
       position relative