Update ThemeList.vue

package-lock.json

@@ -2393,6 +2393,11 @@
       "resolved": "http://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "animate.css": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.0.tgz",
+      "integrity": "sha512-u3iMXDJr0cxMdQocIciDiou9Au4L5f9uT+/jCtprw3s1j3HcfCuI+khF+90Ps2KdsEhM2soF7SXB4WUvI3HlXg=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -15470,6 +15475,11 @@
         }
       }
     },
+    "vue-fragment": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.0.tgz",
+      "integrity": "sha512-nobmbbOSOx59fm7U00BDz14Yvqitwx7NPQGYDTKg3+dNDGTDCRNy/q2kfr5hV4S0l4fQG0kvC+rbCmENLmHUSA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",

src/views/interface/ThemeList.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row :gutter="12" type="flex" align="middle">
+    <a-row
+      :gutter="12"
+      type="flex"
+      align="middle"
+    >
       <a-col
         class="theme-item"
         :xl="6"
@@ -21,9 +25,20 @@
           <div class="theme-control">
             <span class="theme-title">{{ theme.properties.name }}</span>
             <a-button-group class="theme-button">
-              <a-button type="primary" v-if="activatedTheme == theme.key" disabled>已启用</a-button>
+              <a-button
-              <a-button type="primary" @click="activeTheme(theme.key)" v-else>启用</a-button>
+                type="primary"
-              <a-button @click="optionModal(theme.key)" v-if="activatedTheme == theme.key">设置</a-button>
+                v-if="activatedTheme == theme.key"
+                disabled
+              >已启用</a-button>
+              <a-button
+                type="primary"
+                @click="activeTheme(theme.key)"
+                v-else
+              >启用</a-button>
+              <a-button
+                @click="optionModal(theme.key)"
+                v-if="activatedTheme == theme.key"
+              >设置</a-button>
               <a-popconfirm
                 :title="'确定删除【' + theme.properties.name + '】主题？'"
                 @confirm="deleteTheme(theme.key)"
@@ -38,34 +53,52 @@
         </a-card>
       </a-col>
     </a-row>
-    <a-modal :title="optionTheme + ' 主题设置'" width="90%" v-model="visible">
+    <a-modal
+      :title="optionTheme + ' 主题设置'"
+      width="90%"
+      v-model="visible"
+    >
       <a-row>
-        <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+        <a-col
+          :xl="24"
+          :lg="24"
+          :md="24"
+          :sm="24"
+          :xs="24"
+        >
           <div class="card-container">
             <a-tabs type="card">
               <a-tab-pane
-                v-for="(group,index) in themeOptions"
+                v-for="(group,index) in themeConfiguration"
                 :key="index"
-                :tab="group.description"
+                :tab="group.label"
               >
                 <a-form layout="vertical">
                   <a-form-item
                     v-for="(item,index1) in group.items"
-                    :label="item.description+'：'"
+                    :label="item.label + '：'"
                     :key="index1"
                     :wrapper-col="wrapperCol"
                   >
-                    <a-input :v-model="'options.'+item.description" v-if="item.type=='text'"/>
+                    <a-input
+                      v-model="themeOptions[item.name]"
+                      v-if="item.type=='text'"
+                    />
+                    <a-input
+                      v-model="themeOptions[item.name]"
+                      v-if="item.type='email'"
+                      type="email"
+                    />
                     <a-input
                       type="textarea"
                       :autosize="{ minRows: 5 }"
-                      :v-model="'options.'+item.description"
+                      v-model="themeOptions[item.name]"
                       v-else-if="item.type=='textarea'"
                     />
                     <a-radio-group
                       v-decorator="['radio-group']"
                       defaultValue="false"
-                      :v-model="'options.'+item.description"
+                      v-model="themeOptions[item.name]"
                       v-else-if="item.type=='radio'"
                     >
                       <a-radio
@@ -75,7 +108,7 @@
                       >{{ option.label }}</a-radio>
                     </a-radio-group>
                     <a-select
-                      :v-model="'options.'+item.description"
+                      v-model="themeOptions[item.name]"
                       v-else-if="item.type=='select'"
                     >
                       <a-select-option
@@ -86,7 +119,10 @@
                     </a-select>
                   </a-form-item>
                   <a-form-item>
-                    <a-button type="primary" @click="saveOptions">保存</a-button>
+                    <a-button
+                      type="primary"
+                      @click="saveOptions"
+                    >保存</a-button>
                   </a-form-item>
                 </a-form>
               </a-tab-pane>
@@ -115,8 +151,9 @@ export default {
       optionUrl: 'https://ryanc.cc',
       // TODO 从api获取当前使用的主题
       activatedTheme: 'anatole',
-      themeOptions: [],
+      themeConfiguration: [],
-      options: []
+      options: {},
+      themeOptions: {}
     }
   },
   created() {
@@ -130,7 +167,7 @@ export default {
     },
     optionModal(theme) {
       themeApi.listOptions('anatole').then(response => {
-        this.themeOptions = response.data.data
+        this.themeConfiguration = response.data.data
         this.optionTheme = theme
         this.visible = true
         this.loadOptions()