modified the layout of the settings

frontend/src/views/setting/BookingSetting.vue

@@ -9,8 +9,7 @@
         @submit="handleSubmit">
         <a-form-item
           label="提前预约间隔"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-input
             type="number"
             addonAfter="天"
@@ -27,8 +26,7 @@
         </a-form-item>
         <a-form-item
           label="预约间隔(DEV)"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-input
             disabled
             type="number"
@@ -45,8 +43,7 @@
         </a-form-item>
         <a-form-item
           label="开始时间"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-time-picker
             :minuteStep="30"
             :secondStep="60"
@@ -59,8 +56,7 @@
         </a-form-item>
         <a-form-item
           label="结束时间"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-time-picker style="width: 100%;" v-decorator="[
             'end_time',{
               rules: [{ type: 'object', required: true, message: '请选择结束时间' }],
@@ -69,8 +65,7 @@
         </a-form-item>
         <a-form-item
           label="惩罚积分数"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-input
             type="number"
             addonAfter="分"
@@ -86,8 +81,7 @@
         </a-form-item>
         <a-form-item
           label="奖励积分数"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-input
             type="number"
             addonAfter="分"
@@ -119,6 +113,10 @@
     name: 'BookingSetting',
     data () {
       return {
+        layout: {
+          'label-col': { span: 6 },
+          'wrapper-col': { span: 18 }
+        },
         setting: {},
         form: this.$form.createForm(this),
       }

frontend/src/views/setting/GeneralSetting.vue

@@ -4,14 +4,20 @@
       :xs="{span: 24}"
       :sm="{span: 20}"
       :xl="{span: 16}">
-      <a-divider>主题</a-divider>
-      <a-radio-group
-        name="theme"
-        :defaultValue="theme"
-        @change="handleThemeChange">
-        <a-radio value="light">Light</a-radio>
-        <a-radio value="dark">Dark</a-radio>
-      </a-radio-group>
+      <a-form>
+        <a-form-item
+          label="主题"
+          :label-col="{span: 6}"
+          :wrapper-col="{span: 18}">
+          <a-radio-group
+            name="theme"
+            :defaultValue="theme"
+            @change="handleThemeChange">
+            <a-radio value="light">Light</a-radio>
+            <a-radio value="dark">Dark</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
     </a-col>
   </a-card>
 </template>

frontend/src/views/setting/UserSetting.vue

@@ -4,16 +4,20 @@
       :xs="{span: 24}"
       :sm="{span: 20}"
       :xl="{span: 16}">
-      <a-divider>头像</a-divider>
-      <p>TODO</p>
+      <a-form>
+        <a-form-item
+          label="头像"
+          v-bind="layout">
+          TODO
+        </a-form-item>
+      </a-form>
       <a-divider>重置密码</a-divider>
       <a-form
         :form="reset.form"
         @submit="handleSubmit">
         <a-form-item
           label="新密码"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-input
             type="text"
             autocomplete="true"
@@ -29,8 +33,7 @@
         </a-form-item>
         <a-form-item
           label="确认新密码"
-          :label-col="{span: 6}"
-          :wrapper-col="{span: 18}">
+          v-bind="layout">
           <a-input
             type="password"
             autocomplete="true"
@@ -60,6 +63,10 @@
     name: 'UserSetting',
     data () {
       return {
+        layout: {
+          'label-col': { span: 6 },
+          'wrapper-col': { span: 18 }
+        },
         reset: {
           form: this.$form.createForm(this),
         }