From 69e4ddca609fc1328985a97fde34ea9c75718b95 Mon Sep 17 00:00:00 2001
From: Peng-YM <1048217874pengym@gmail.com>
Date: Thu, 15 Apr 2021 17:00:07 +0800
Subject: [PATCH] Reformat codes

---
 web/src/components/BottomNav.vue              |   4 +-
 web/src/components/FlagOperator.vue           |   4 +-
 web/src/components/ProxyList.vue              |  16 +-
 web/src/components/RegexDeleteOperator.vue    |  20 +-
 web/src/components/RegexFilter.vue            |  18 +-
 web/src/components/RegexRenameOperator.vue    |  28 +--
 web/src/components/RegexSortOperator.vue      |  16 +-
 web/src/components/RegionFilter.vue           |  10 +-
 web/src/components/ScriptFilter.vue           |  12 +-
 web/src/components/ScriptOperator.vue         |  14 +-
 web/src/components/SortOperator.vue           |   4 +-
 web/src/components/SpeedDial.vue              |  14 +-
 web/src/components/TopToolbar.vue             |  11 +-
 web/src/components/TypeFilter.vue             |  10 +-
 web/src/components/base/Card.vue              |  10 +-
 web/src/components/base/Item.vue              |  84 +++----
 web/src/components/base/ItemGroup.vue         | 142 ++++++------
 web/src/components/base/ItemSubGroup.vue      |  30 +--
 web/src/components/base/MaterialAlert.vue     |  94 ++++----
 web/src/components/base/MaterialCard.vue      | 206 +++++++++---------
 web/src/components/base/MaterialChartCard.vue | 128 +++++------
 web/src/components/base/MaterialDropdown.vue  |  76 +++----
 web/src/components/base/MaterialSnackbar.vue  |  78 +++----
 web/src/components/base/MaterialStatsCard.vue | 106 ++++-----
 web/src/components/base/MaterialTabs.vue      |  48 ++--
 web/src/components/base/MaterialTestimony.vue |  78 +++----
 web/src/components/base/MaterialWizard.vue    | 106 ++++-----
 web/src/components/base/Subheading.vue        |  28 +--
 web/src/components/base/VComponent.vue        |  42 ++--
 web/src/views/Dashboard.vue                   |   3 +-
 web/src/views/SubEditor.vue                   |  80 +++----
 web/src/views/Subscription.vue                |  33 +--
 web/src/views/User.vue                        |  34 +--
 33 files changed, 796 insertions(+), 791 deletions(-)

diff --git a/web/src/components/BottomNav.vue b/web/src/components/BottomNav.vue
index 1335a3c..3e8157b 100644
--- a/web/src/components/BottomNav.vue
+++ b/web/src/components/BottomNav.vue
@@ -1,10 +1,10 @@
 <template>
   <v-bottom-navigation
+      v-model="activeItem"
       app
+      color="primary"
       fixed
       grow
-      color="primary"
-      v-model="activeItem"
   >
     <v-btn :to="{path: '/'}" value="subscription">
       <span>订阅</span>
diff --git a/web/src/components/FlagOperator.vue b/web/src/components/FlagOperator.vue
index 45e6c3d..66bd820 100644
--- a/web/src/components/FlagOperator.vue
+++ b/web/src/components/FlagOperator.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">flag</v-icon>
+      <v-icon color="primary" left>flag</v-icon>
       国旗
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
diff --git a/web/src/components/ProxyList.vue b/web/src/components/ProxyList.vue
index 1fda257..c271be6 100644
--- a/web/src/components/ProxyList.vue
+++ b/web/src/components/ProxyList.vue
@@ -2,21 +2,21 @@
   <v-list>
     <v-list-item v-for="(proxy, idx) in proxies" :key="idx">
       <v-list-item-content>
-        <v-list-item-title v-text="proxy.name" class="wrap-text"></v-list-item-title>
+        <v-list-item-title class="wrap-text" v-text="proxy.name"></v-list-item-title>
         <v-chip-group>
-          <v-chip x-small color="primary" outlined>
+          <v-chip color="primary" outlined x-small>
             <v-icon left x-small>mdi-server</v-icon>
             {{ proxy.type.toUpperCase() }}
           </v-chip>
-          <v-chip x-small v-if="proxy.udp" color="blue" outlined>
+          <v-chip v-if="proxy.udp" color="blue" outlined x-small>
             <v-icon left x-small>mdi-fire</v-icon>
             UDP
           </v-chip>
-          <v-chip x-small v-if="proxy.tfo" color="success" outlined>
+          <v-chip v-if="proxy.tfo" color="success" outlined x-small>
             <v-icon left x-small>mdi-flash</v-icon>
             TFO
           </v-chip>
-          <v-chip x-small v-if="proxy['skip-cert-verify']" color="error" outlined>
+          <v-chip v-if="proxy['skip-cert-verify']" color="error" outlined x-small>
             <v-icon left x-small>error</v-icon>
             SCERT
           </v-chip>
@@ -26,16 +26,16 @@
         <v-row>
           <v-col>
             <v-btn
+                v-if="proxy.type !== 'http'"
                 icon
                 @click="showQRCode(idx)"
-                v-if="proxy.type !== 'http'"
             >
-              <v-icon small color="grey lighten-1">mdi-qrcode</v-icon>
+              <v-icon color="grey lighten-1" small>mdi-qrcode</v-icon>
             </v-btn>
           </v-col>
           <v-col>
             <v-btn icon @click="showInfo(idx)">
-              <v-icon small color="grey lighten-1">mdi-information</v-icon>
+              <v-icon color="grey lighten-1" small>mdi-information</v-icon>
             </v-btn>
           </v-col>
         </v-row>
diff --git a/web/src/components/RegexDeleteOperator.vue b/web/src/components/RegexDeleteOperator.vue
index 8a5b97f..b0b0b3a 100644
--- a/web/src/components/RegexDeleteOperator.vue
+++ b/web/src/components/RegexDeleteOperator.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">code</v-icon>
+      <v-icon color="primary" left>code</v-icon>
       正则删除
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -35,26 +35,26 @@
     <v-card-text>
       正则表达式
       <v-chip-group
-        column
+          column
       >
         <v-chip
-            close
-            close-icon="mdi-delete"
             v-for="(regex, idx) in regexps"
             :key="idx"
-            @click:close="remove(idx)"
+            close
+            close-icon="mdi-delete"
             @click="edit(idx)"
+            @click:close="remove(idx)"
         >
           {{ regex }}
         </v-chip>
       </v-chip-group>
       <v-text-field
-          placeholder="添加新正则表达式"
-          clearable
-          clear-icon="clear"
-          solo
           v-model="form.regex"
           append-icon="mdi-send"
+          clear-icon="clear"
+          clearable
+          placeholder="添加新正则表达式"
+          solo
           @click:append="add(form.regex)"
           @keyup.enter="add(form.regex)"
       />
diff --git a/web/src/components/RegexFilter.vue b/web/src/components/RegexFilter.vue
index 64eca9a..c8f7675 100644
--- a/web/src/components/RegexFilter.vue
+++ b/web/src/components/RegexFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">filter_list</v-icon>
+      <v-icon color="primary" left>filter_list</v-icon>
       正则过滤
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -50,23 +50,23 @@
           column
       >
         <v-chip
-            close
-            close-icon="mdi-delete"
             v-for="(regex, idx) in regexps"
             :key="idx"
-            @click:close="remove(idx)"
+            close
+            close-icon="mdi-delete"
             @click="edit(idx)"
+            @click:close="remove(idx)"
         >
           {{ regex }}
         </v-chip>
       </v-chip-group>
       <v-text-field
-          placeholder="添加新正则表达式"
-          clearable
-          clear-icon="clear"
-          solo
           v-model="form.regex"
           append-icon="mdi-send"
+          clear-icon="clear"
+          clearable
+          placeholder="添加新正则表达式"
+          solo
           @click:append="add(form.regex)"
           @keyup.enter="add(form.regex)"
       />
diff --git a/web/src/components/RegexRenameOperator.vue b/web/src/components/RegexRenameOperator.vue
index 74f95c3..a28aa6b 100644
--- a/web/src/components/RegexRenameOperator.vue
+++ b/web/src/components/RegexRenameOperator.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">filter_list</v-icon>
+      <v-icon color="primary" left>filter_list</v-icon>
       正则重命名
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -32,15 +32,15 @@
     <v-card-text>
       正则表达式
       <v-chip-group
-        column
+          column
       >
         <v-chip
-            close
-            close-icon="mdi-delete"
             v-for="(chip, idx) in chips"
             :key="idx"
-            @click:close="remove(idx)"
+            close
+            close-icon="mdi-delete"
             @click="edit(idx)"
+            @click:close="remove(idx)"
         >
           {{ chip }}
         </v-chip>
@@ -48,21 +48,21 @@
       <v-row>
         <v-col>
           <v-text-field
-              placeholder="正则表达式"
-              clearable
-              clear-icon="clear"
-              solo
               v-model="form.regex"
+              clear-icon="clear"
+              clearable
+              placeholder="正则表达式"
+              solo
           />
         </v-col>
         <v-col>
           <v-text-field
-              placeholder="替换为"
-              solo
-              clearable
-              clear-icon="clear"
               v-model="form.replace"
               append-icon="mdi-send"
+              clear-icon="clear"
+              clearable
+              placeholder="替换为"
+              solo
               @click:append="add"
               @keyup.enter="add"
           />
diff --git a/web/src/components/RegexSortOperator.vue b/web/src/components/RegexSortOperator.vue
index 756e9bb..142ded4 100644
--- a/web/src/components/RegexSortOperator.vue
+++ b/web/src/components/RegexSortOperator.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">sort</v-icon>
+      <v-icon color="primary" left>sort</v-icon>
       正则排序
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -35,10 +35,10 @@
           column
       >
         <v-chip
-            close
-            close-icon="mdi-delete"
             v-for="(item, idx) in items"
             :key="idx"
+            close
+            close-icon="mdi-delete"
             @click="edit(idx)"
             @click:close="remove(idx)"
         >
@@ -46,12 +46,12 @@
         </v-chip>
       </v-chip-group>
       <v-text-field
-          placeholder="添加新正则表达式"
-          clearable
-          clear-icon="clear"
-          solo
           v-model="form.item"
           append-icon="mdi-send"
+          clear-icon="clear"
+          clearable
+          placeholder="添加新正则表达式"
+          solo
           @click:append="add(form.item)"
           @keyup.enter="add(form.item)"
       />
diff --git a/web/src/components/RegionFilter.vue b/web/src/components/RegionFilter.vue
index 55810ce..80f5b2d 100644
--- a/web/src/components/RegionFilter.vue
+++ b/web/src/components/RegionFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">flag</v-icon>
+      <v-icon color="primary" left>flag</v-icon>
       区域过滤
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -30,13 +30,13 @@
       </v-dialog>
     </v-card-title>
     <v-card-text>
-      <v-chip-group multiple active-class="primary accent-4" v-model="selection" column>
+      <v-chip-group v-model="selection" active-class="primary accent-4" column multiple>
         <v-chip
-            class="ma-2"
             v-for="region in regions"
-            label
             :key="region.name"
             :value="region.value"
+            class="ma-2"
+            label
         >
           {{ region.name }}
         </v-chip>
diff --git a/web/src/components/ScriptFilter.vue b/web/src/components/ScriptFilter.vue
index f14ce16..6257fcb 100644
--- a/web/src/components/ScriptFilter.vue
+++ b/web/src/components/ScriptFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">code</v-icon>
+      <v-icon color="primary" left>code</v-icon>
       脚本过滤器
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -42,12 +42,12 @@
         </v-row>
       </v-radio-group>
       <v-textarea
-          solo
-          clearable
+          v-model="content"
+          :label="hint"
           auto-grow
           clear-icon="clear"
-          :label="hint"
-          v-model="content"
+          clearable
+          solo
       />
     </v-card-text>
   </v-card>
diff --git a/web/src/components/ScriptOperator.vue b/web/src/components/ScriptOperator.vue
index 208eda5..8ebef9a 100644
--- a/web/src/components/ScriptOperator.vue
+++ b/web/src/components/ScriptOperator.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">code</v-icon>
+      <v-icon color="primary" left>code</v-icon>
       脚本操作
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -42,12 +42,12 @@
         </v-row>
       </v-radio-group>
       <v-textarea
-          clearable
-          clear-icon="clear"
-          solo
-          auto-grow
-          :label="hint"
           v-model="content"
+          :label="hint"
+          auto-grow
+          clear-icon="clear"
+          clearable
+          solo
       />
     </v-card-text>
   </v-card>
diff --git a/web/src/components/SortOperator.vue b/web/src/components/SortOperator.vue
index d4d3b54..98377d0 100644
--- a/web/src/components/SortOperator.vue
+++ b/web/src/components/SortOperator.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">sort_by_alpha</v-icon>
+      <v-icon color="primary" left>sort_by_alpha</v-icon>
       节点排序
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
diff --git a/web/src/components/SpeedDial.vue b/web/src/components/SpeedDial.vue
index 21f5b6b..e3c94c3 100644
--- a/web/src/components/SpeedDial.vue
+++ b/web/src/components/SpeedDial.vue
@@ -2,11 +2,11 @@
   <v-fab-transition>
     <v-speed-dial
         v-model="opened"
-        direction="top"
-        left
-        fab
         absolute
         bottom
+        direction="top"
+        fab
+        left
         small
         transition="slide-y-reverse-transition"
     >
@@ -19,14 +19,14 @@
         </v-btn>
       </template>
       <v-btn
-          fab
           color="primary"
+          fab
       >
         <v-icon>mdi-plus</v-icon>
       </v-btn>
       <v-btn
-          fab
           color="primary"
+          fab
       >
         <v-icon>create_new_folder</v-icon>
       </v-btn>
@@ -41,8 +41,6 @@ export default {
       opened: false,
     }
   },
-  computed: {
-
-  }
+  computed: {}
 }
 </script>
diff --git a/web/src/components/TopToolbar.vue b/web/src/components/TopToolbar.vue
index 65992b1..f20c864 100644
--- a/web/src/components/TopToolbar.vue
+++ b/web/src/components/TopToolbar.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <v-app-bar
-        app
-        fixed
-        :mini-variant="false" :clipped="true"
+        :clipped="true"
+        :mini-variant="false"
+        app fixed
     >
-      <v-toolbar-title><h3>{{title}}</h3></v-toolbar-title>
+      <v-toolbar-title><h3>{{ title }}</h3></v-toolbar-title>
     </v-app-bar>
 
   </div>
@@ -19,8 +19,7 @@ export default {
     }
   },
 
-  methods: {
-  },
+  methods: {},
 
   computed: {
     title: function () {
diff --git a/web/src/components/TypeFilter.vue b/web/src/components/TypeFilter.vue
index 8be9d38..968ba88 100644
--- a/web/src/components/TypeFilter.vue
+++ b/web/src/components/TypeFilter.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card class="ml-1 mr-1 mb-1 mt-1">
     <v-card-title>
-      <v-icon left color="primary">cloud_circle</v-icon>
+      <v-icon color="primary" left>cloud_circle</v-icon>
       节点类型过滤
       <v-spacer></v-spacer>
       <v-btn icon @click="$emit('up', idx)">
@@ -15,7 +15,7 @@
       </v-btn>
       <v-dialog>
         <template #activator="{on}">
-          <v-btn icon v-on="on">
+          <v-btn v-on="on" icon>
             <v-icon>help</v-icon>
           </v-btn>
         </template>
@@ -30,13 +30,13 @@
       </v-dialog>
     </v-card-title>
     <v-card-text>
-      <v-chip-group multiple active-class="primary accent-4" v-model="selection" column>
+      <v-chip-group v-model="selection" active-class="primary accent-4" column multiple>
         <v-chip
-            class="ma-2"
             v-for="type in types"
-            label
             :key="type.name"
             :value="type.value"
+            class="ma-2"
+            label
         >
           {{ type.name }}
         </v-chip>
diff --git a/web/src/components/base/Card.vue b/web/src/components/base/Card.vue
index 9f43013..7394c69 100644
--- a/web/src/components/base/Card.vue
+++ b/web/src/components/base/Card.vue
@@ -1,9 +1,9 @@
 <script>
-  import { VCard } from 'vuetify/lib'
+import {VCard} from 'vuetify/lib'
 
-  export default {
-    name: 'Card',
+export default {
+  name: 'Card',
 
-    extends: VCard
-  }
+  extends: VCard
+}
 </script>
diff --git a/web/src/components/base/Item.vue b/web/src/components/base/Item.vue
index 4113d14..a8172db 100644
--- a/web/src/components/base/Item.vue
+++ b/web/src/components/base/Item.vue
@@ -1,69 +1,69 @@
 <template>
   <v-list-item
-    :href="href"
-    :rel="href && href !== '#' ? 'noopener' : undefined"
-    :target="href && href !== '#' ? '_blank' : undefined"
-    :to="item.to"
-    :active-class="`primary ${!isDark ? 'black' : 'white'}--text`"
+      :active-class="`primary ${!isDark ? 'black' : 'white'}--text`"
+      :href="href"
+      :rel="href && href !== '#' ? 'noopener' : undefined"
+      :target="href && href !== '#' ? '_blank' : undefined"
+      :to="item.to"
   >
     <v-list-item-icon
-      v-if="text"
-      class="v-list-item__icon--text"
-      v-text="computedText"
+        v-if="text"
+        class="v-list-item__icon--text"
+        v-text="computedText"
     />
 
     <v-list-item-icon v-else-if="item.icon">
-      <v-icon v-text="item.icon" />
+      <v-icon v-text="item.icon"/>
     </v-list-item-icon>
 
     <v-list-item-content v-if="item.title || item.subtitle">
-      <v-list-item-title v-text="item.title" />
+      <v-list-item-title v-text="item.title"/>
 
-      <v-list-item-subtitle v-text="item.subtitle" />
+      <v-list-item-subtitle v-text="item.subtitle"/>
     </v-list-item-content>
   </v-list-item>
 </template>
 
 <script>
-  import Themeable from 'vuetify/lib/mixins/themeable'
+import Themeable from 'vuetify/lib/mixins/themeable'
 
-  export default {
-    name: 'Item',
+export default {
+  name: 'Item',
 
-    mixins: [Themeable],
+  mixins: [Themeable],
 
-    props: {
-      item: {
-        type: Object,
-        default: () => ({
-          href: undefined,
-          icon: undefined,
-          subtitle: undefined,
-          title: undefined,
-          to: undefined
-        })
-      },
-      text: {
-        type: Boolean,
-        default: false
-      }
+  props: {
+    item: {
+      type: Object,
+      default: () => ({
+        href: undefined,
+        icon: undefined,
+        subtitle: undefined,
+        title: undefined,
+        to: undefined
+      })
     },
+    text: {
+      type: Boolean,
+      default: false
+    }
+  },
 
-    computed: {
-      computedText() {
-        if (!this.item || !this.item.title) return ''
+  computed: {
+    computedText() {
+      if (!this.item || !this.item.title) return ''
 
-        let text = ''
+      let text = ''
 
-        this.item.title.split(' ').forEach(val => {
-          text += val.substring(0, 1)
-        })
+      this.item.title.split(' ').forEach(val => {
+        text += val.substring(0, 1)
+      })
 
-        return text
-      },
-      href() {
-        return this.item.href || (!this.item.to ? '#' : undefined)
-      }
+      return text
+    },
+    href() {
+      return this.item.href || (!this.item.to ? '#' : undefined)
     }
   }
+}
 </script>
diff --git a/web/src/components/base/ItemGroup.vue b/web/src/components/base/ItemGroup.vue
index 2b384ec..05da451 100644
--- a/web/src/components/base/ItemGroup.vue
+++ b/web/src/components/base/ItemGroup.vue
@@ -1,105 +1,105 @@
 <template>
   <v-list-group
-    :group="group"
-    :prepend-icon="item.icon"
-    :sub-group="subGroup"
-    append-icon="mdi-menu-down"
-    :color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
+      :color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
+      :group="group"
+      :prepend-icon="item.icon"
+      :sub-group="subGroup"
+      append-icon="mdi-menu-down"
   >
     <template v-slot:activator>
       <v-list-item-icon
-        v-if="text"
-        class="v-list-item__icon--text"
-        v-text="computedText"
+          v-if="text"
+          class="v-list-item__icon--text"
+          v-text="computedText"
       />
 
       <v-list-item-avatar
-        v-else-if="item.avatar"
-        class="align-self-center"
-        color="grey"
+          v-else-if="item.avatar"
+          class="align-self-center"
+          color="grey"
       >
-        <v-img src="https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/avatar.jpg" />
+        <v-img src="https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/avatar.jpg"/>
       </v-list-item-avatar>
 
       <v-list-item-content>
-        <v-list-item-title v-text="item.title" />
+        <v-list-item-title v-text="item.title"/>
       </v-list-item-content>
     </template>
 
     <template v-for="(child, i) in children">
       <base-item-sub-group
-        v-if="child.children"
-        :key="`sub-group-${i}`"
-        :item="child"
+          v-if="child.children"
+          :key="`sub-group-${i}`"
+          :item="child"
       />
 
       <base-item
-        v-else
-        :key="`item-${i}`"
-        :item="child"
-        text
+          v-else
+          :key="`item-${i}`"
+          :item="child"
+          text
       />
     </template>
   </v-list-group>
 </template>
 
 <script>
-  // Utilities
-  import kebabCase from 'lodash/kebabCase'
-  import { mapState } from 'vuex'
+// Utilities
+import kebabCase from 'lodash/kebabCase'
+import {mapState} from 'vuex'
 
-  export default {
-    name: 'ItemGroup',
+export default {
+  name: 'ItemGroup',
 
-    inheritAttrs: false,
+  inheritAttrs: false,
 
-    props: {
-      item: {
-        type: Object,
-        default: () => ({
-          avatar: undefined,
-          group: undefined,
-          title: undefined,
-          children: []
-        })
-      },
-      subGroup: {
-        type: Boolean,
-        default: false
-      },
-      text: {
-        type: Boolean,
-        default: false
-      }
+  props: {
+    item: {
+      type: Object,
+      default: () => ({
+        avatar: undefined,
+        group: undefined,
+        title: undefined,
+        children: []
+      })
     },
-
-    computed: {
-      ...mapState(['barColor']),
-      children() {
-        return this.item.children.map(item => ({
-          ...item,
-          to: !item.to ? undefined : `${this.item.group}/${item.to}`
-        }))
-      },
-      computedText() {
-        if (!this.item || !this.item.title) return ''
-
-        let text = ''
-
-        this.item.title.split(' ').forEach(val => {
-          text += val.substring(0, 1)
-        })
-
-        return text
-      },
-      group() {
-        return this.genGroup(this.item.children)
-      }
+    subGroup: {
+      type: Boolean,
+      default: false
     },
+    text: {
+      type: Boolean,
+      default: false
+    }
+  },
 
-    methods: {
-      genGroup(children) {
-        return children
+  computed: {
+    ...mapState(['barColor']),
+    children() {
+      return this.item.children.map(item => ({
+        ...item,
+        to: !item.to ? undefined : `${this.item.group}/${item.to}`
+      }))
+    },
+    computedText() {
+      if (!this.item || !this.item.title) return ''
+
+      let text = ''
+
+      this.item.title.split(' ').forEach(val => {
+        text += val.substring(0, 1)
+      })
+
+      return text
+    },
+    group() {
+      return this.genGroup(this.item.children)
+    }
+  },
+
+  methods: {
+    genGroup(children) {
+      return children
           .filter(item => item.to)
           .map(item => {
             const parent = item.group || this.item.group
@@ -111,9 +111,9 @@
 
             return group
           }).join('|')
-      }
     }
   }
+}
 </script>
 
 <style>
diff --git a/web/src/components/base/ItemSubGroup.vue b/web/src/components/base/ItemSubGroup.vue
index dfceb00..9fb5c76 100644
--- a/web/src/components/base/ItemSubGroup.vue
+++ b/web/src/components/base/ItemSubGroup.vue
@@ -1,25 +1,25 @@
 <template>
   <base-item-group
-    :item="item"
-    text
-    sub-group
+      :item="item"
+      sub-group
+      text
   />
 </template>
 
 <script>
-  export default {
-    name: 'ItemSubGroup',
+export default {
+  name: 'ItemSubGroup',
 
-    props: {
-      item: {
-        type: Object,
-        default: () => ({
-          avatar: undefined,
-          group: undefined,
-          title: undefined,
-          children: []
-        })
-      }
+  props: {
+    item: {
+      type: Object,
+      default: () => ({
+        avatar: undefined,
+        group: undefined,
+        title: undefined,
+        children: []
+      })
     }
   }
+}
 </script>
diff --git a/web/src/components/base/MaterialAlert.vue b/web/src/components/base/MaterialAlert.vue
index f0336ee..9e43a12 100644
--- a/web/src/components/base/MaterialAlert.vue
+++ b/web/src/components/base/MaterialAlert.vue
@@ -1,64 +1,64 @@
 <script>
-  // Components
-  import { VAlert, VBtn, VIcon } from 'vuetify/lib'
+// Components
+import {VAlert, VBtn, VIcon} from 'vuetify/lib'
 
-  export default {
-    name: 'MaterialAlert',
+export default {
+  name: 'MaterialAlert',
 
-    extends: VAlert,
+  extends: VAlert,
 
-    computed: {
-      __cachedDismissible() {
-        if (!this.dismissible) return null
+  computed: {
+    __cachedDismissible() {
+      if (!this.dismissible) return null
 
-        const color = 'white'
+      const color = 'white'
 
-        return this.$createElement(VBtn, {
-          staticClass: 'v-alert__dismissible',
-          props: {
-            color,
-            icon: true,
-            small: true
-          },
-          attrs: {
-            'aria-label': this.$vuetify.lang.t(this.closeLabel)
-          },
-          on: {
-            // eslint-disable-next-line
-            click: () => (this.isActive = false)
-          }
-        }, [
-          this.$createElement(VIcon, {
-            props: { color }
-          }, '$vuetify.icons.cancel')
-        ])
-      },
-      classes() {
-        return {
-          ...VAlert.options.computed.classes.call(this),
-          'v-alert--material': true
+      return this.$createElement(VBtn, {
+        staticClass: 'v-alert__dismissible',
+        props: {
+          color,
+          icon: true,
+          small: true
+        },
+        attrs: {
+          'aria-label': this.$vuetify.lang.t(this.closeLabel)
+        },
+        on: {
+          // eslint-disable-next-line
+          click: () => (this.isActive = false)
         }
-      },
-      hasColoredIcon() {
-        return true
+      }, [
+        this.$createElement(VIcon, {
+          props: {color}
+        }, '$vuetify.icons.cancel')
+      ])
+    },
+    classes() {
+      return {
+        ...VAlert.options.computed.classes.call(this),
+        'v-alert--material': true
       }
+    },
+    hasColoredIcon() {
+      return true
     }
   }
+}
 </script>
 
 <style lang="sass">
 
-  .v-alert--material
-    margin-top: 32px
+.v-alert--material
+  margin-top: 32px
 
-    .v-alert__icon
-      background-color: #FFFFFF
-      height: 44px
-      min-width: 44px
-      top: -36px
+  .v-alert__icon
+    background-color: #FFFFFF
+    height: 44px
+    min-width: 44px
+    top: -36px
 
-    .v-alert__dismissible
-      align-self: flex-start
-      margin: 0 !important
-      padding: 0 !important
+  .v-alert__dismissible
+    align-self: flex-start
+    margin: 0 !important
+    padding: 0 !important
 </style>
diff --git a/web/src/components/base/MaterialCard.vue b/web/src/components/base/MaterialCard.vue
index 6380d2d..847e61e 100644
--- a/web/src/components/base/MaterialCard.vue
+++ b/web/src/components/base/MaterialCard.vue
@@ -1,168 +1,168 @@
 <template>
   <v-card
-    v-bind="$attrs"
-    :class="classes"
-    class="v-card--material pa-3"
+      v-bind="$attrs"
+      :class="classes"
+      class="v-card--material pa-3"
   >
     <div class="d-flex grow flex-wrap">
       <v-avatar
-        v-if="avatar"
-        size="128"
-        class="mx-auto v-card--material__avatar elevation-12"
-        color="grey"
+          v-if="avatar"
+          class="mx-auto v-card--material__avatar elevation-12"
+          color="grey"
+          size="128"
       >
-        <v-img :src="avatar" />
+        <v-img :src="avatar"/>
       </v-avatar>
 
       <v-sheet
-        v-else
-        :class="{
+          v-else
+          :class="{
           'pa-7': !$slots.image
         }"
-        :color="color"
-        :max-height="icon ? 90 : undefined"
-        :width="inline || icon ? 'auto' : '100%'"
-        class="text-start v-card--material__heading mb-n6"
-        dark
+          :color="color"
+          :max-height="icon ? 90 : undefined"
+          :width="inline || icon ? 'auto' : '100%'"
+          class="text-start v-card--material__heading mb-n6"
+          dark
       >
         <slot
-          v-if="$slots.heading"
-          name="heading"
+            v-if="$slots.heading"
+            name="heading"
         />
 
         <slot
-          v-else-if="$slots.image"
-          name="image"
+            v-else-if="$slots.image"
+            name="image"
         />
 
         <div
-          v-else-if="title && !icon"
-          class="display-1 font-weight-light"
-          v-text="title"
+            v-else-if="title && !icon"
+            class="display-1 font-weight-light"
+            v-text="title"
         />
 
         <v-icon
-          v-else-if="icon"
-          size="32"
-          v-text="icon"
+            v-else-if="icon"
+            size="32"
+            v-text="icon"
         />
 
         <div
-          v-if="text"
-          class="headline font-weight-thin"
-          v-text="text"
+            v-if="text"
+            class="headline font-weight-thin"
+            v-text="text"
         />
       </v-sheet>
 
       <div
-        v-if="$slots['after-heading']"
-        class="ml-6"
+          v-if="$slots['after-heading']"
+          class="ml-6"
       >
-        <slot name="after-heading" />
+        <slot name="after-heading"/>
       </div>
 
       <v-col
-        v-if="hoverReveal"
-        cols="12"
-        class="text-center py-0 mt-n12"
+          v-if="hoverReveal"
+          class="text-center py-0 mt-n12"
+          cols="12"
       >
-        <slot name="reveal-actions" />
+        <slot name="reveal-actions"/>
       </v-col>
 
       <div
-        v-else-if="icon && title"
-        class="ml-4"
+          v-else-if="icon && title"
+          class="ml-4"
       >
         <div
 
-          class="card-title font-weight-light"
-          v-text="title"
+            class="card-title font-weight-light"
+            v-text="title"
         />
       </div>
     </div>
 
-    <slot />
+    <slot/>
 
     <template v-if="$slots.actions">
-      <v-divider class="mt-2" />
+      <v-divider class="mt-2"/>
 
       <v-card-actions class="pb-0">
-        <slot name="actions" />
+        <slot name="actions"/>
       </v-card-actions>
     </template>
   </v-card>
 </template>
 
 <script>
-  export default {
-    name: 'MaterialCard',
+export default {
+  name: 'MaterialCard',
 
-    props: {
-      avatar: {
-        type: String,
-        default: ''
-      },
-      color: {
-        type: String,
-        default: 'success'
-      },
-      hoverReveal: {
-        type: Boolean,
-        default: false
-      },
-      icon: {
-        type: String,
-        default: undefined
-      },
-      image: {
-        type: Boolean,
-        default: false
-      },
-      inline: {
-        type: Boolean,
-        default: false
-      },
-      text: {
-        type: String,
-        default: ''
-      },
-      title: {
-        type: String,
-        default: ''
+  props: {
+    avatar: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: 'success'
+    },
+    hoverReveal: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: undefined
+    },
+    image: {
+      type: Boolean,
+      default: false
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'v-card--material--has-heading': this.hasHeading,
+        'v-card--material--hover-reveal': this.hoverReveal
       }
     },
-
-    computed: {
-      classes() {
-        return {
-          'v-card--material--has-heading': this.hasHeading,
-          'v-card--material--hover-reveal': this.hoverReveal
-        }
-      },
-      hasHeading() {
-        return Boolean(this.$slots.heading || this.title || this.icon)
-      },
-      hasAltHeading() {
-        return Boolean(this.$slots.heading || (this.title && this.icon))
-      }
+    hasHeading() {
+      return Boolean(this.$slots.heading || this.title || this.icon)
+    },
+    hasAltHeading() {
+      return Boolean(this.$slots.heading || (this.title && this.icon))
     }
   }
+}
 </script>
 
 <style lang="sass">
-  .v-card--material
-    &__avatar
-      position: relative
-      top: -64px
-      margin-bottom: -32px
+.v-card--material
+  &__avatar
+    position: relative
+    top: -64px
+    margin-bottom: -32px
 
-    &__heading
-      position: relative
-      top: -40px
-      transition: .3s ease
-      z-index: 1
+  &__heading
+    position: relative
+    top: -40px
+    transition: .3s ease
+    z-index: 1
 
-    &.v-card--material--hover-reveal:hover
-      .v-card--material__heading
-        transform: translateY(-40px)
+  &.v-card--material--hover-reveal:hover
+    .v-card--material__heading
+      transform: translateY(-40px)
 </style>
diff --git a/web/src/components/base/MaterialChartCard.vue b/web/src/components/base/MaterialChartCard.vue
index 25ef3e8..62e2be2 100644
--- a/web/src/components/base/MaterialChartCard.vue
+++ b/web/src/components/base/MaterialChartCard.vue
@@ -1,95 +1,95 @@
 <template>
   <base-material-card
-    class="v-card--material-chart"
-    v-bind="$attrs"
-    v-on="$listeners"
+      v-bind="$attrs"
+      v-on="$listeners"
+      class="v-card--material-chart"
   >
     <template v-slot:heading>
       <chartist
-        :data="data"
-        :event-handlers="eventHandlers"
-        :options="options"
-        :ratio="ratio"
-        :responsive-options="responsiveOptions"
-        :type="type"
-        style="max-height: 150px;"
+          :data="data"
+          :event-handlers="eventHandlers"
+          :options="options"
+          :ratio="ratio"
+          :responsive-options="responsiveOptions"
+          :type="type"
+          style="max-height: 150px;"
       />
     </template>
 
     <slot
-      slot="reveal-actions"
-      name="reveal-actions"
+        slot="reveal-actions"
+        name="reveal-actions"
     />
 
-    <slot />
+    <slot/>
 
     <slot
-      slot="actions"
-      name="actions"
+        slot="actions"
+        name="actions"
     />
   </base-material-card>
 </template>
 
 <script>
-  export default {
-    name: 'MaterialChartCard',
+export default {
+  name: 'MaterialChartCard',
 
-    inheritAttrs: false,
+  inheritAttrs: false,
 
-    props: {
-      data: {
-        type: Object,
-        default: () => ({})
-      },
-      eventHandlers: {
-        type: Array,
-        default: () => ([])
-      },
-      options: {
-        type: Object,
-        default: () => ({})
-      },
-      ratio: {
-        type: String,
-        default: undefined
-      },
-      responsiveOptions: {
-        type: Array,
-        default: () => ([])
-      },
-      type: {
-        type: String,
-        required: true,
-        validator: v => ['Bar', 'Line', 'Pie'].includes(v)
-      }
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    eventHandlers: {
+      type: Array,
+      default: () => ([])
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    },
+    ratio: {
+      type: String,
+      default: undefined
+    },
+    responsiveOptions: {
+      type: Array,
+      default: () => ([])
+    },
+    type: {
+      type: String,
+      required: true,
+      validator: v => ['Bar', 'Line', 'Pie'].includes(v)
     }
   }
+}
 </script>
 
 <style lang="sass">
-  .v-card--material-chart
-    p
-      color: #999
+.v-card--material-chart
+  p
+    color: #999
 
-    .v-card--material__heading
-      max-height: 185px
+  .v-card--material__heading
+    max-height: 185px
 
-      .ct-label
-        color: inherit
-        opacity: .7
-        font-size: 0.975rem
-        font-weight: 100
+    .ct-label
+      color: inherit
+      opacity: .7
+      font-size: 0.975rem
+      font-weight: 100
 
-      .ct-grid
-        stroke: rgba(255, 255, 255, 0.2)
+    .ct-grid
+      stroke: rgba(255, 255, 255, 0.2)
 
-      .ct-series-a .ct-point,
-      .ct-series-a .ct-line,
-      .ct-series-a .ct-bar,
-      .ct-series-a .ct-slice-donut
-          stroke: rgba(255,255,255,.8)
+    .ct-series-a .ct-point,
+    .ct-series-a .ct-line,
+    .ct-series-a .ct-bar,
+    .ct-series-a .ct-slice-donut
+      stroke: rgba(255, 255, 255, .8)
 
-      .ct-series-a .ct-slice-pie,
-      .ct-series-a .ct-area
-          fill: rgba(255,255,255,.4)
+    .ct-series-a .ct-slice-pie,
+    .ct-series-a .ct-area
+      fill: rgba(255, 255, 255, .4)
 </style>
diff --git a/web/src/components/base/MaterialDropdown.vue b/web/src/components/base/MaterialDropdown.vue
index 9be5e8b..da829c8 100644
--- a/web/src/components/base/MaterialDropdown.vue
+++ b/web/src/components/base/MaterialDropdown.vue
@@ -1,20 +1,20 @@
 <template>
   <v-menu
-    v-model="value"
-    :transition="transition"
-    offset-y
-    v-bind="$attrs"
+      v-model="value"
+      v-bind="$attrs"
+      :transition="transition"
+      offset-y
   >
     <template v-slot:activator="{ attrs, on }">
       <v-btn
-        :color="color"
-        default
-        min-width="200"
-        rounded
-        v-bind="attrs"
-        v-on="on"
+          v-bind="attrs"
+          v-on="on"
+          :color="color"
+          default
+          min-width="200"
+          rounded
       >
-        <slot />
+        <slot/>
 
         <v-icon>
           mdi-{{ value ? 'menu-up' : 'menu-down' }}
@@ -25,12 +25,12 @@
     <v-sheet>
       <v-list dense>
         <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          @click="$(`click:action-${item.id}`)"
+            v-for="(item, i) in items"
+            :key="i"
+            @click="$(`click:action-${item.id}`)"
         >
           <v-list-item-content>
-            <v-list-item-title v-text="item.text" />
+            <v-list-item-title v-text="item.text"/>
           </v-list-item-content>
         </v-list-item>
       </v-list>
@@ -39,32 +39,32 @@
 </template>
 
 <script>
-  // Mixins
-  import Proxyable from 'vuetify/lib/mixins/proxyable'
+// Mixins
+import Proxyable from 'vuetify/lib/mixins/proxyable'
 
-  export default {
-    name: 'MaterialDropdown',
+export default {
+  name: 'MaterialDropdown',
 
-    mixins: [Proxyable],
+  mixins: [Proxyable],
 
-    props: {
-      color: {
-        type: String,
-        default: 'primary'
-      },
-      items: {
-        type: Array,
-        default: () => ([
-          {
-            id: undefined,
-            text: undefined
-          }
-        ])
-      },
-      transition: {
-        type: String,
-        default: 'scale-transition'
-      }
+  props: {
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    items: {
+      type: Array,
+      default: () => ([
+        {
+          id: undefined,
+          text: undefined
+        }
+      ])
+    },
+    transition: {
+      type: String,
+      default: 'scale-transition'
     }
   }
+}
 </script>
diff --git a/web/src/components/base/MaterialSnackbar.vue b/web/src/components/base/MaterialSnackbar.vue
index 25660af..4eeb1bd 100644
--- a/web/src/components/base/MaterialSnackbar.vue
+++ b/web/src/components/base/MaterialSnackbar.vue
@@ -1,66 +1,66 @@
 <template>
   <v-snackbar
-    :class="classes"
-    :value="value"
-    v-bind="{
+      v-bind="{
       ...$attrs,
       ...$props,
       'color': 'transparent'
     }"
-    @change="$emit('change', $event)"
+      :class="classes"
+      :value="value"
+      @change="$emit('change', $event)"
   >
     <base-material-alert
-      :color="color"
-      :dismissible="dismissible"
-      :type="type"
-      class="ma-0"
-      dark
+        :color="color"
+        :dismissible="dismissible"
+        :type="type"
+        class="ma-0"
+        dark
     >
-      <slot />
+      <slot/>
     </base-material-alert>
   </v-snackbar>
 </template>
 <script>
-  // Components
-  import { VSnackbar } from 'vuetify/lib'
+// Components
+import {VSnackbar} from 'vuetify/lib'
 
-  export default {
-    name: 'BaseMaterialSnackbar',
+export default {
+  name: 'BaseMaterialSnackbar',
 
-    extends: VSnackbar,
+  extends: VSnackbar,
 
-    props: {
-      dismissible: {
-        type: Boolean,
-        default: true
-      },
-      type: {
-        type: String,
-        default: ''
-      }
+  props: {
+    dismissible: {
+      type: Boolean,
+      default: true
     },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
 
-    computed: {
-      classes() {
-        return {
-          ...VSnackbar.options.computed.classes.call(this),
-          'v-snackbar--material': true
-        }
+  computed: {
+    classes() {
+      return {
+        ...VSnackbar.options.computed.classes.call(this),
+        'v-snackbar--material': true
       }
     }
   }
+}
 </script>
 
 <style lang="sass">
-  .v-snackbar--material
-    margin-top: 32px
-    margin-bottom: 32px
+.v-snackbar--material
+  margin-top: 32px
+  margin-bottom: 32px
 
-    .v-alert--material,
-    .v-snack__wrapper
-      border-radius: 4px
+  .v-alert--material,
+  .v-snack__wrapper
+    border-radius: 4px
 
-    .v-snack__content
-      overflow: visible
-      padding: 0
+  .v-snack__content
+    overflow: visible
+    padding: 0
 </style>
diff --git a/web/src/components/base/MaterialStatsCard.vue b/web/src/components/base/MaterialStatsCard.vue
index b1d919a..1ec5d85 100644
--- a/web/src/components/base/MaterialStatsCard.vue
+++ b/web/src/components/base/MaterialStatsCard.vue
@@ -1,15 +1,15 @@
 <template>
   <base-material-card
-    :icon="icon"
-    class="v-card--material-stats"
-    v-bind="$attrs"
-    v-on="$listeners"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :icon="icon"
+      class="v-card--material-stats"
   >
     <template v-slot:after-heading>
       <div class="ml-auto text-right">
         <div
-          class="body-3 grey--text font-weight-light"
-          v-text="title"
+            class="body-3 grey--text font-weight-light"
+            v-text="title"
         />
 
         <h3 class="display-2 font-weight-light text--primary">
@@ -19,72 +19,72 @@
     </template>
 
     <v-col
-      cols="12"
-      class="px-0"
+        class="px-0"
+        cols="12"
     >
-      <v-divider />
+      <v-divider/>
     </v-col>
 
     <v-icon
-      :color="subIconColor"
-      size="16"
-      class="ml-2 mr-1"
+        :color="subIconColor"
+        class="ml-2 mr-1"
+        size="16"
     >
       {{ subIcon }}
     </v-icon>
 
     <span
-      :class="subTextColor"
-      class="caption grey--text font-weight-light"
-      v-text="subText"
+        :class="subTextColor"
+        class="caption grey--text font-weight-light"
+        v-text="subText"
     />
   </base-material-card>
 </template>
 
 <script>
-  import Card from './Card'
+import Card from './Card'
 
-  export default {
-    name: 'MaterialStatsCard',
+export default {
+  name: 'MaterialStatsCard',
 
-    inheritAttrs: false,
+  inheritAttrs: false,
 
-    props: {
-      ...Card.props,
-      icon: {
-        type: String,
-        required: true
-      },
-      subIcon: {
-        type: String,
-        default: undefined
-      },
-      subIconColor: {
-        type: String,
-        default: undefined
-      },
-      subTextColor: {
-        type: String,
-        default: undefined
-      },
-      subText: {
-        type: String,
-        default: undefined
-      },
-      title: {
-        type: String,
-        default: undefined
-      },
-      value: {
-        type: String,
-        default: undefined
-      },
-      smallValue: {
-        type: String,
-        default: undefined
-      }
+  props: {
+    ...Card.props,
+    icon: {
+      type: String,
+      required: true
+    },
+    subIcon: {
+      type: String,
+      default: undefined
+    },
+    subIconColor: {
+      type: String,
+      default: undefined
+    },
+    subTextColor: {
+      type: String,
+      default: undefined
+    },
+    subText: {
+      type: String,
+      default: undefined
+    },
+    title: {
+      type: String,
+      default: undefined
+    },
+    value: {
+      type: String,
+      default: undefined
+    },
+    smallValue: {
+      type: String,
+      default: undefined
     }
   }
+}
 </script>
 
 <style lang="sass">
diff --git a/web/src/components/base/MaterialTabs.vue b/web/src/components/base/MaterialTabs.vue
index dc9e4b2..ba6df8d 100644
--- a/web/src/components/base/MaterialTabs.vue
+++ b/web/src/components/base/MaterialTabs.vue
@@ -1,43 +1,43 @@
 <template>
   <v-tabs
-    v-model="internalValue"
-    :active-class="`${color} ${$vuetify.theme.dark ? 'black' : 'white'}--text`"
-    class="v-tabs--pill"
-    hide-slider
-    v-bind="$attrs"
+      v-model="internalValue"
+      v-bind="$attrs"
+      :active-class="`${color} ${$vuetify.theme.dark ? 'black' : 'white'}--text`"
+      class="v-tabs--pill"
+      hide-slider
   >
-    <slot />
+    <slot/>
 
-    <slot name="items" />
+    <slot name="items"/>
   </v-tabs>
 </template>
 
 <script>
-  // Mixins
-  import Proxyable from 'vuetify/lib/mixins/proxyable'
+// Mixins
+import Proxyable from 'vuetify/lib/mixins/proxyable'
 
-  export default {
-    name: 'MaterialTabs',
+export default {
+  name: 'MaterialTabs',
 
-    mixins: [Proxyable],
+  mixins: [Proxyable],
 
-    props: {
-      color: {
-        type: String,
-        default: 'primary'
-      }
+  props: {
+    color: {
+      type: String,
+      default: 'primary'
     }
   }
+}
 </script>
 
 <style lang="sass">
-  .v-tabs--pill
+.v-tabs--pill
+  .v-tab,
+  .v-tab:before
+    border-radius: 24px
+
+  &.v-tabs--icons-and-text
     .v-tab,
     .v-tab:before
-      border-radius: 24px
-
-    &.v-tabs--icons-and-text
-      .v-tab,
-      .v-tab:before
-        border-radius: 4px
+      border-radius: 4px
 </style>
diff --git a/web/src/components/base/MaterialTestimony.vue b/web/src/components/base/MaterialTestimony.vue
index 390905e..89315e2 100644
--- a/web/src/components/base/MaterialTestimony.vue
+++ b/web/src/components/base/MaterialTestimony.vue
@@ -2,74 +2,74 @@
   <v-card class="text-center v-card--testimony">
     <div class="pt-6">
       <v-icon
-        color="black"
-        x-large
+          color="black"
+          x-large
       >
         mdi-format-quote-close
       </v-icon>
     </div>
 
     <v-card-text
-      class="display-1 font-weight-light font-italic mb-3"
-      v-text="blurb"
+        class="display-1 font-weight-light font-italic mb-3"
+        v-text="blurb"
     />
 
     <div
-      class="display-2 font-weight-light mb-2"
-      v-text="author"
+        class="display-2 font-weight-light mb-2"
+        v-text="author"
     />
 
     <div
-      class="body-2 text-uppercase grey--text"
-      v-text="handle"
+        class="body-2 text-uppercase grey--text"
+        v-text="handle"
     />
 
     <v-avatar
-      color="grey"
-      size="100"
+        color="grey"
+        size="100"
     >
       <v-img
-        :alt="`${author} Testimonial`"
-        :src="avatar"
+          :alt="`${author} Testimonial`"
+          :src="avatar"
       />
     </v-avatar>
 
-    <div />
+    <div/>
   </v-card>
 </template>
 
 <script>
-  export default {
-    name: 'BaseMaterialTestimony',
+export default {
+  name: 'BaseMaterialTestimony',
 
-    props: {
-      author: {
-        type: String,
-        default: ''
-      },
-      avatar: {
-        type: String,
-        default: 'https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/card-profile1-square.jpg'
-      },
-      blurb: {
-        type: String,
-        default: ''
-      },
-      handle: {
-        type: String,
-        default: ''
-      }
+  props: {
+    author: {
+      type: String,
+      default: ''
+    },
+    avatar: {
+      type: String,
+      default: 'https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/card-profile1-square.jpg'
+    },
+    blurb: {
+      type: String,
+      default: ''
+    },
+    handle: {
+      type: String,
+      default: ''
     }
   }
+}
 </script>
 
 <style lang="sass">
-  .v-card--testimony
-    padding-bottom: 72px
-    margin-bottom: 64px
+.v-card--testimony
+  padding-bottom: 72px
+  margin-bottom: 64px
 
-    .v-avatar
-      position: absolute
-      left: calc(50% - 64px)
-      top: calc(100% - 64px)
+  .v-avatar
+    position: absolute
+    left: calc(50% - 64px)
+    top: calc(100% - 64px)
 </style>
diff --git a/web/src/components/base/MaterialWizard.vue b/web/src/components/base/MaterialWizard.vue
index fa45adb..e31887a 100644
--- a/web/src/components/base/MaterialWizard.vue
+++ b/web/src/components/base/MaterialWizard.vue
@@ -1,8 +1,8 @@
 <template>
   <v-card
-    class="v-card--wizard"
-    elevation="12"
-    max-width="700"
+      class="v-card--wizard"
+      elevation="12"
+      max-width="700"
   >
     <v-card-title class="justify-center display-2 font-weight-light pt-5">
       Build your profile
@@ -13,54 +13,54 @@
     </div>
 
     <v-tabs
-      ref="tabs"
-      v-model="internalValue"
-      background-color="green lighten-5"
-      color="white"
-      grow
-      slider-size="50"
+        ref="tabs"
+        v-model="internalValue"
+        background-color="green lighten-5"
+        color="white"
+        grow
+        slider-size="50"
     >
       <v-tabs-slider
-        class="mt-1"
-        color="success"
+          class="mt-1"
+          color="success"
       />
 
       <v-tab
-        v-for="(item, i) in items"
-        :key="i"
-        :ripple="false"
-        :disabled="!availableSteps.includes(i)"
+          v-for="(item, i) in items"
+          :key="i"
+          :disabled="!availableSteps.includes(i)"
+          :ripple="false"
       >
         {{ item }}
       </v-tab>
     </v-tabs>
 
-    <div class="my-6" />
+    <div class="my-6"/>
 
     <v-card-text>
       <v-tabs-items v-model="internalValue">
-        <slot />
+        <slot/>
       </v-tabs-items>
     </v-card-text>
 
     <v-card-actions class="pb-4 pa-4">
       <v-btn
-        :disabled="internalValue === 0"
-        class="white--text"
-        color="grey darken-2"
-        min-width="125"
-        @click="$emit('click:prev')"
+          :disabled="internalValue === 0"
+          class="white--text"
+          color="grey darken-2"
+          min-width="125"
+          @click="$emit('click:prev')"
       >
         Previous
       </v-btn>
 
-      <v-spacer />
+      <v-spacer/>
 
       <v-btn
-        :disabled="!availableSteps.includes(internalValue + 1)"
-        color="success"
-        min-width="100"
-        @click="$emit('click:next')"
+          :disabled="!availableSteps.includes(internalValue + 1)"
+          color="success"
+          min-width="100"
+          @click="$emit('click:next')"
       >
         {{ internalValue === items.length - 1 ? 'Finish' : 'Next' }}
       </v-btn>
@@ -69,41 +69,41 @@
 </template>
 
 <script>
-  // Mixins
-  import Proxyable from 'vuetify/lib/mixins/proxyable'
+// Mixins
+import Proxyable from 'vuetify/lib/mixins/proxyable'
 
-  export default {
-    name: 'BaseMaterialWizard',
+export default {
+  name: 'BaseMaterialWizard',
 
-    mixins: [Proxyable],
+  mixins: [Proxyable],
 
-    props: {
-      availableSteps: {
-        type: Array,
-        default: () => ([])
-      },
-      items: {
-        type: Array,
-        default: () => ([])
-      }
+  props: {
+    availableSteps: {
+      type: Array,
+      default: () => ([])
+    },
+    items: {
+      type: Array,
+      default: () => ([])
     }
   }
+}
 </script>
 
 <style lang="sass">
-  .v-card--wizard
+.v-card--wizard
+  overflow: visible
+
+  .v-tabs-bar
+    height: 56px
+    padding: 0 8px
+
+  .v-slide-group__wrapper
     overflow: visible
 
-    .v-tabs-bar
-      height: 56px
-      padding: 0 8px
+  .v-tabs-slider
+    border-radius: 4px
 
-    .v-slide-group__wrapper
-      overflow: visible
-
-    .v-tabs-slider
-      border-radius: 4px
-
-    .v-slide-group__wrapper
-      contain: initial
+  .v-slide-group__wrapper
+    contain: initial
 </style>
diff --git a/web/src/components/base/Subheading.vue b/web/src/components/base/Subheading.vue
index 5d89cef..4ef4a20 100644
--- a/web/src/components/base/Subheading.vue
+++ b/web/src/components/base/Subheading.vue
@@ -4,31 +4,31 @@
       {{ subheading }}
       <template v-if="text">
         <span
-          class="subtitle-1"
-          v-text="text"
+            class="subtitle-1"
+            v-text="text"
         />
       </template>
     </h5>
 
     <div class="pt-2">
-      <slot />
+      <slot/>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'Subheading',
+export default {
+  name: 'Subheading',
 
-    props: {
-      subheading: {
-        type: String,
-        default: ''
-      },
-      text: {
-        type: String,
-        default: ''
-      }
+  props: {
+    subheading: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
     }
   }
+}
 </script>
diff --git a/web/src/components/base/VComponent.vue b/web/src/components/base/VComponent.vue
index 0a1a60a..239c9ea 100644
--- a/web/src/components/base/VComponent.vue
+++ b/web/src/components/base/VComponent.vue
@@ -1,22 +1,22 @@
 <template>
   <section class="mb-12 text-center">
     <h1
-      class="font-weight-light mb-2"
-      style="color:#3c4858; font-size:24px"
-      v-text="`Vuetify ${heading}`"
+        class="font-weight-light mb-2"
+        style="color:#3c4858; font-size:24px"
+        v-text="`Vuetify ${heading}`"
     />
 
     <span
-      class="font-weight-light"
-      style="font-size: 16px; color: #3c4858"
+        class="font-weight-light"
+        style="font-size: 16px; color: #3c4858"
     >
       Please checkout the
       <a
-        :href="`https://vuetifyjs.com/${link}`"
-        rel="noopener"
-        target="_blank"
-        class="secondary--text"
-        style="text-decoration:none;"
+          :href="`https://vuetifyjs.com/${link}`"
+          class="secondary--text"
+          rel="noopener"
+          style="text-decoration:none;"
+          target="_blank"
       >
         full documentation
       </a>
@@ -25,18 +25,18 @@
 </template>
 
 <script>
-  export default {
-    name: 'VComponent',
+export default {
+  name: 'VComponent',
 
-    props: {
-      heading: {
-        type: String,
-        default: ''
-      },
-      link: {
-        type: String,
-        default: ''
-      }
+  props: {
+    heading: {
+      type: String,
+      default: ''
+    },
+    link: {
+      type: String,
+      default: ''
     }
   }
+}
 </script>
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
index 5bb0f67..ff468d4 100644
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -5,8 +5,7 @@
 <script>
 export default {
   name: "Dashboard",
-  components: {
-  },
+  components: {},
   computed: {
     pie() {
       const total = 400;
diff --git a/web/src/views/SubEditor.vue b/web/src/views/SubEditor.vue
index 6861c15..887eeba 100644
--- a/web/src/views/SubEditor.vue
+++ b/web/src/views/SubEditor.vue
@@ -2,30 +2,30 @@
   <v-container>
     <v-card class="mb-4">
       <v-subheader>订阅配置</v-subheader>
-      <v-form class="pl-4 pr-4 pb-0" v-model="formState.basicValid">
+      <v-form v-model="formState.basicValid" class="pl-4 pr-4 pb-0">
         <v-text-field
             v-model="options.name"
-            class="mt-2"
             :rules="validations.nameRules"
-            required
+            class="mt-2"
+            clear-icon="clear"
+            clearable
             label="订阅名称"
             placeholder="填入订阅名称，名称需唯一"
-            clearable
-            clear-icon="clear"
+            required
         />
         <!--For Subscription-->
         <v-textarea
             v-if="!isCollection"
             v-model="options.url"
-            class="mt-2"
-            rows="2"
             :rules="validations.urlRules"
-            required
+            auto-grow
+            class="mt-2"
+            clear-icon="clear"
+            clearable
             label="订阅链接"
             placeholder="填入机场原始订阅链接"
-            clearable
-            auto-grow
-            clear-icon="clear"
+            required
+            rows="2"
         />
         <!--For Collection-->
         <v-list
@@ -36,28 +36,28 @@
           <v-list-item v-for="sub in availableSubs" :key="sub.name">
             <v-list-item-avatar>
               <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
-              <v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/>
+              <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon"/>
             </v-list-item-avatar>
             <v-list-item-content>
               {{ sub.name }}
             </v-list-item-content>
             <v-spacer></v-spacer>
             <v-checkbox
-                :value="sub.name"
                 v-model="selected"
+                :value="sub.name"
                 class="pr-1"
             />
           </v-list-item>
         </v-list>
         <v-textarea
             v-model="options.icon"
+            auto-grow
             class="mt-2"
-            rows="2"
+            clear-icon="clear"
+            clearable
             label="图标链接"
             placeholder="填入想要展示的图标链接，可选。"
-            clearable
-            auto-grow
-            clear-icon="clear"
+            rows="2"
         />
       </v-form>
       <v-card-actions>
@@ -65,9 +65,9 @@
         <v-btn icon @click="save">
           <v-icon>save_alt</v-icon>
         </v-btn>
-        <v-dialog max-width="400px" v-model="showShareDialog">
+        <v-dialog v-model="showShareDialog" max-width="400px">
           <template #activator="{on}">
-            <v-btn icon v-on="on">
+            <v-btn v-on="on" icon>
               <v-icon>cloud_circle</v-icon>
             </v-btn>
           </template>
@@ -82,16 +82,16 @@
             </v-card-title>
             <v-textarea
                 v-model="imported"
-                solo
+                :rules="validations.importRules"
+                clear-icon="clear"
+                clearable
                 label="粘贴配置以导入"
                 rows="5"
-                clearable
-                clear-icon="clear"
-                :rules="validations.importRules"
+                solo
             />
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn text color="primary" @click="importConf">确认</v-btn>
+              <v-btn color="primary" text @click="importConf">确认</v-btn>
               <v-btn text @click="showShareDialog = false">取消</v-btn>
             </v-card-actions>
           </v-card>
@@ -105,8 +105,8 @@
         <v-item-group>
           <v-radio-group
               v-model="options.useless"
-              dense
               class="mt-0 mb-0"
+              dense
           >
             过滤非法节点
             <v-row>
@@ -122,8 +122,8 @@
 
           <v-radio-group
               v-model="options.udp"
-              dense
               class="mt-0 mb-0"
+              dense
           >
             UDP转发
             <v-row>
@@ -141,8 +141,8 @@
 
           <v-radio-group
               v-model="options['skip-cert-verify']"
-              dense
               class="mt-0 mb-0"
+              dense
           >
             跳过证书验证
             <v-row>
@@ -159,8 +159,8 @@
           </v-radio-group>
           <v-radio-group
               v-model="options.tfo"
-              dense
               class="mt-0 mb-0"
+              dense
           >
             TCP Fast Open
             <v-row>
@@ -178,13 +178,13 @@
         </v-item-group>
       </v-form>
     </v-card>
-    <v-card class="mb-4" id="processors">
+    <v-card id="processors" class="mb-4">
       <v-subheader>
         节点操作
         <v-spacer></v-spacer>
-        <v-dialog scrollable v-model="dialog">
+        <v-dialog v-model="dialog" scrollable>
           <template #activator="{on}">
-            <v-btn icon v-on="on">
+            <v-btn v-on="on" icon>
               <v-icon color="primary">add_circle</v-icon>
             </v-btn>
           </template>
@@ -192,9 +192,9 @@
             <v-card-title>选择节点操作</v-card-title>
             <v-divider></v-divider>
             <v-card-text>
-              <v-radio-group dense v-model="selectedProcess">
-                <v-radio v-for="(k, idx) in Object.keys(availableProcessors)" :label="availableProcessors[k].name"
-                         :key="idx" :value="k"></v-radio>
+              <v-radio-group v-model="selectedProcess" dense>
+                <v-radio v-for="(k, idx) in Object.keys(availableProcessors)" :key="idx"
+                         :label="availableProcessors[k].name" :value="k"></v-radio>
               </v-radio-group>
             </v-card-text>
             <v-card-actions>
@@ -207,14 +207,14 @@
 
       </v-subheader>
       <v-divider></v-divider>
-      <component v-for="p in processors"
-                 :is="p.component"
+      <component :is="p.component"
+                 v-for="p in processors"
                  :key="p.id"
                  :args="p.args"
                  @dataChanged="dataChanged"
                  @deleteProcess="deleteProcess"
-                 @up="moveUp"
                  @down="moveDown"
+                 @up="moveUp"
       >
       </component>
     </v-card>
@@ -233,6 +233,7 @@ import FlagOperator from "@/components/FlagOperator";
 import ScriptFilter from "@/components/ScriptFilter";
 import ScriptOperator from "@/components/ScriptOperator";
 import RegexSortOperator from "@/components/RegexSortOperator";
+import HandleDuplicateOperator from "@/components/HandleDuplicateOperator";
 
 const AVAILABLE_PROCESSORS = {
   "Flag Operator": {
@@ -267,6 +268,10 @@ const AVAILABLE_PROCESSORS = {
     component: "RegexDeleteOperator",
     name: "删除正则"
   },
+  "Handle Duplicate Operator": {
+    component: "HandleDuplicateOperator",
+    name: "重复节点处理"
+  },
   "Script Filter": {
     component: "ScriptFilter",
     name: "脚本过滤器"
@@ -297,6 +302,7 @@ export default {
     RegexDeleteOperator,
     ScriptFilter,
     ScriptOperator,
+    HandleDuplicateOperator
   },
   data: function () {
     return {
diff --git a/web/src/views/Subscription.vue b/web/src/views/Subscription.vue
index 7536da9..22ca594 100644
--- a/web/src/views/Subscription.vue
+++ b/web/src/views/Subscription.vue
@@ -18,20 +18,20 @@
           >
             <v-list-item-avatar>
               <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
-              <v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/>
+              <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon"/>
             </v-list-item-avatar>
 
             <v-list-item-content>
-              <v-list-item-title v-text="sub.name" class="font-weight-medium"></v-list-item-title>
+              <v-list-item-title class="font-weight-medium" v-text="sub.name"></v-list-item-title>
               <v-list-item-title v-text="sub.url"></v-list-item-title>
             </v-list-item-content>
             <v-list-item-action>
               <v-menu bottom left>
                 <template v-slot:activator="{ on, attrs }">
                   <v-btn
-                      icon
                       v-bind="attrs"
                       v-on="on"
+                      icon
                   >
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
@@ -67,24 +67,24 @@
           <v-list-item
               v-for="collection in collections"
               :key="collection.name"
-              @click="preview(collection, type='collection')"
               dense
+              @click="preview(collection, type='collection')"
           >
             <v-list-item-avatar>
               <v-icon v-if="!collection.icon" color="teal darken-1">mdi-cloud</v-icon>
-              <v-img :src="collection.icon" v-else :class="getIconClass(collection.icon)"/>
+              <v-img v-else :class="getIconClass(collection.icon)" :src="collection.icon"/>
             </v-list-item-avatar>
             <v-list-item-content>
-              <v-list-item-title v-text="collection.name" class="font-weight-medium"></v-list-item-title>
+              <v-list-item-title class="font-weight-medium" v-text="collection.name"></v-list-item-title>
               <v-chip-group
                   column
               >
                 <v-chip
                     v-for="subs in collection.subscriptions"
                     :key="subs"
-                    small
                     class="ma-2 ml-0 mr-1 pa-2"
                     label
+                    small
                 >
                   {{ subs }}
                 </v-chip>
@@ -94,9 +94,9 @@
               <v-menu bottom left>
                 <template v-slot:activator="{ on, attrs }">
                   <v-btn
-                      icon
                       v-bind="attrs"
                       v-on="on"
+                      icon
                   >
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
@@ -117,7 +117,7 @@
         </v-list>
       </v-card-text>
     </v-card>
-    <v-dialog fullscreen hide-overlay transition="dialog-bottom-transition" v-model="showProxyList" scrollable>
+    <v-dialog v-model="showProxyList" fullscreen hide-overlay scrollable transition="dialog-bottom-transition">
       <v-card fluid>
         <v-toolbar
             class="flex-grow-0"
@@ -135,9 +135,9 @@
           </v-toolbar-items>
           <template v-slot:extension>
             <v-tabs
-                grow
-                centered
                 v-model="tab"
+                centered
+                grow
             >
               <v-tabs-slider color="primary"/>
               <v-tab
@@ -158,10 +158,10 @@
               v-model="tab"
           >
             <v-tab-item key="raw">
-              <proxy-list :url="url" :sub="sub" :raw="true" ref="proxyList" :key="url + 'raw'"></proxy-list>
+              <proxy-list :key="url + 'raw'" ref="proxyList" :raw="true" :sub="sub" :url="url"></proxy-list>
             </v-tab-item>
             <v-tab-item key="processed">
-              <proxy-list :url="url" :sub="sub" ref="proxyList" :key="url"></proxy-list>
+              <proxy-list :key="url" ref="proxyList" :sub="sub" :url="url"></proxy-list>
             </v-tab-item>
           </v-tabs-items>
         </v-card-text>
@@ -185,7 +185,7 @@ export default {
       tab: 1,
       editMenu: [
         {
-          title: "复制",
+          title: "链接",
           action: "COPY"
         },
         {
@@ -197,6 +197,10 @@ export default {
           action: "DELETE"
         },
         // {
+        //   title: "副本",
+        //   action: "DUPLICATE"
+        // }
+        // {
         //   title: "上移",
         //   action: "MOVE_UP"
         // },
@@ -245,7 +249,6 @@ export default {
           this.moveUpSubscription(sub.name);
           break
         case 'MOVE_DOWN':
-
           break
       }
     },
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 202b16b..f9586f3 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -6,7 +6,7 @@
         数据同步
         <v-spacer></v-spacer>
         <v-btn icon @click="openGist()">
-          <v-icon small color="primary">visibility</v-icon>
+          <v-icon color="primary" small>visibility</v-icon>
         </v-btn>
       </v-card-title>
       <v-card-text>
@@ -15,20 +15,20 @@
       <v-divider></v-divider>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn small
-               :loading="status.uploading"
-               color="blue-grey"
+        <v-btn :loading="status.uploading"
                class="ma-2 white--text"
+               color="blue-grey"
+               small
                @click="sync('upload')">
           上传
           <v-icon right>
             mdi-cloud-upload
           </v-icon>
         </v-btn>
-        <v-btn small
-               :loading="status.downloading"
-               color="blue-grey"
+        <v-btn :loading="status.downloading"
                class="ma-2 white--text"
+               color="blue-grey"
+               small
                @click="sync('download')">
           恢复
           <v-icon right>
@@ -51,18 +51,18 @@
             <v-col>
               <v-row>
                 <v-text-field
-                    label="GitHub 用户名"
-                    hint="填入GitHub用户名"
                     v-model="settings.githubUser"
-                    clearable clear-icon="clear"
+                    clear-icon="clear"
+                    clearable
+                    hint="填入GitHub用户名" label="GitHub 用户名"
                 />
               </v-row>
               <v-row>
                 <v-text-field
-                    label="GitHub Token"
-                    hint="填入GitHub Token"
                     v-model="settings.gistToken"
-                    clearable clear-icon="clear"
+                    clear-icon="clear"
+                    clearable
+                    hint="填入GitHub Token" label="GitHub Token"
                 />
               </v-row>
             </v-col>
@@ -75,9 +75,9 @@
             </v-list-item-content>
             <v-list-item-action>
               <v-switch
-                  label=""
-                  hide-details
                   v-model="settings.theme.darkMode"
+                  hide-details
+                  label=""
               />
             </v-list-item-action>
           </v-list-item>
@@ -86,7 +86,7 @@
       <v-divider></v-divider>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn small text @click="save()" color="primary">保存</v-btn>
+        <v-btn color="primary" small text @click="save()">保存</v-btn>
       </v-card-actions>
     </v-card>
 
@@ -150,7 +150,7 @@ export default {
       const setLoading = (status) => {
         if (action === 'upload') {
           this.status.uploading = status;
-        } else if (action === 'download'){
+        } else if (action === 'download') {
           this.status.downloading = status;
         }
       }