refactor: theme setting page

Signed-off-by: Ryan Wang <[email protected]>

src/components/Input/AttachmentInput.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <a-input :defaultValue="defaultValue" :placeholder="placeholder" :value="value" @change="onInputChange">
+      <a slot="addonAfter" href="javascript:void(0);" @click="attachmentDrawerVisible = true">
+        <a-icon type="picture" />
+      </a>
+    </a-input>
+    <AttachmentSelectDrawer
+      v-model="attachmentDrawerVisible"
+      title="选择附件"
+      @listenToSelect="handleSelectAttachment"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'AttachmentInput',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    defaultValue: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      attachmentDrawerVisible: false
+    }
+  },
+  methods: {
+    onInputChange(e) {
+      this.$emit('input', e.target.value)
+    },
+    handleSelectAttachment(data) {
+      this.$emit('input', encodeURI(data.path))
+      this.attachmentDrawerVisible = false
+    }
+  }
+}
+</script>

src/config/router.config.js

@@ -141,16 +141,22 @@ export const asyncRouterMap = [
             meta: { title: '主题', hiddenHeaderContent: false }
           },
           {
-            path: '/interface/menus',
-            name: 'MenuList',
-            component: () => import('@/views/interface/MenuList'),
-            meta: { title: '菜单', hiddenHeaderContent: false }
+            path: '/interface/themes/setting',
+            name: 'ThemeSetting',
+            component: () => import('@/views/interface/ThemeSetting'),
+            meta: { title: '主题设置', hiddenHeaderContent: false }
           },
           {
             path: '/interface/themes/edit',
             name: 'ThemeEdit',
             component: () => import('@/views/interface/ThemeEdit'),
             meta: { title: '主题编辑', hiddenHeaderContent: false }
+          },
+          {
+            path: '/interface/menus',
+            name: 'MenuList',
+            component: () => import('@/views/interface/MenuList'),
+            meta: { title: '菜单设置', hiddenHeaderContent: false }
           }
         ]
       },

src/layouts/PageView.vue

@@ -6,6 +6,7 @@
           <a-page-header :breadcrumb="{ props: { routes: breadList } }" :sub-title="subTitle" :title="title">
             <slot slot="extra" name="extra"></slot>
             <slot slot="footer" name="footer"></slot>
+            <slot name="content" />
           </a-page-header>
         </div>
       </div>
@@ -15,6 +16,7 @@
         <a-page-header :breadcrumb="{ props: { routes: breadList } }" :sub-title="subTitle" :title="title">
           <slot slot="extra" name="extra"></slot>
           <slot slot="footer" name="footer"></slot>
+          <slot name="content" />
         </a-page-header>
       </div>
     </div>

src/views/interface/ThemeList.vue

@@ -29,7 +29,7 @@
                   <a-icon style="margin-right:3px" type="lock" />
                   启用
                 </div>
-                <div @click="handleOpenThemeSettingDrawer(item)">
+                <div @click="handleRouteToThemeSetting(item)">
                   <a-icon style="margin-right:3px" type="setting" />
                   设置
                 </div>
@@ -49,7 +49,7 @@
                     </a-menu-item>
                     <a-menu-item :key="3" @click="handleOpenLocalUpdateModal(item)">
                       <a-icon style="margin-right:3px" type="file" />
-                      从主题包更新
+                      本地更新
                     </a-menu-item>
                   </a-menu>
                 </a-dropdown>
@@ -143,45 +143,27 @@
         @success="handleUploadSucceed"
       ></FilePondUpload>
     </a-modal>
-    <a-modal
-      v-model="themeDeleteModal.visible"
-      :afterClose="onThemeDeleteModalClose"
-      :closable="false"
-      :width="416"
-      destroyOnClose
-      title="提示"
-    >
-      <template slot="footer">
-        <a-button @click="themeDeleteModal.visible = false">
-          取消
-        </a-button>
-        <ReactiveButton
-          :errored="themeDeleteModal.deleteErrored"
-          :loading="themeDeleteModal.deleting"
-          erroredText="删除失败"
-          loadedText="删除成功"
-          text="确定"
-          @callback="handleDeleteThemeCallback"
-          @click="handleDeleteTheme(themeDeleteModal.selected.id, themeDeleteModal.deleteSettings)"
-        ></ReactiveButton>
-      </template>
-      <p>确定删除【{{ themeDeleteModal.selected.name }}】主题？</p>
-      <a-checkbox v-model="themeDeleteModal.deleteSettings">
-        同时删除主题配置
-      </a-checkbox>
-    </a-modal>
+
+    <ThemeDeleteConfirmModal
+      :theme="themeDeleteModal.selected"
+      :visible.sync="themeDeleteModal.visible"
+      @onAfterClose="themeDeleteModal.selected = {}"
+      @success="handleListThemes"
+    />
   </page-view>
 </template>
 
 <script>
 import ThemeSettingDrawer from './components/ThemeSettingDrawer'
+import ThemeDeleteConfirmModal from './components/ThemeDeleteConfirmModal'
 import { PageView } from '@/layouts'
 import apiClient from '@/utils/api-client'
 
 export default {
   components: {
     PageView,
-    ThemeSettingDrawer
+    ThemeSettingDrawer,
+    ThemeDeleteConfirmModal
   },
   data() {
     return {
@@ -216,10 +198,7 @@ export default {
 
       themeDeleteModal: {
         visible: false,
-        deleteSettings: false,
-        selected: {},
-        deleting: false,
-        deleteErrored: false
+        selected: {}
       },
 
       themeSettingDrawer: {
@@ -281,27 +260,6 @@ export default {
         this.handleListThemes()
       })
     },
-    handleDeleteTheme(themeId, deleteSettings) {
-      this.themeDeleteModal.deleting = true
-      apiClient.theme
-        .delete(themeId, deleteSettings)
-        .catch(() => {
-          this.themeDeleteModal.deleteErrored = false
-        })
-        .finally(() => {
-          setTimeout(() => {
-            this.themeDeleteModal.deleting = false
-          }, 400)
-        })
-    },
-    handleDeleteThemeCallback() {
-      if (this.themeDeleteModal.deleteErrored) {
-        this.themeDeleteModal.deleteErrored = false
-      } else {
-        this.themeDeleteModal.visible = false
-        this.handleListThemes()
-      }
-    },
     handleUploadSucceed() {
       this.installModal.visible = false
       this.localUpdateModel.visible = false
@@ -336,9 +294,8 @@ export default {
       this.localUpdateModel.selected = item
       this.localUpdateModel.visible = true
     },
-    handleOpenThemeSettingDrawer(theme) {
-      this.themeSettingDrawer.selected = theme
-      this.themeSettingDrawer.visible = true
+    handleRouteToThemeSetting(theme) {
+      this.$router.push({ name: 'ThemeSetting', query: { themeId: theme.id } })
     },
     handleOpenThemeDeleteModal(item) {
       this.themeDeleteModal.visible = true
@@ -377,11 +334,6 @@ export default {
     onThemeSettingsDrawerClose() {
       this.themeSettingDrawer.visible = false
       this.themeSettingDrawer.selected = {}
-    },
-    onThemeDeleteModalClose() {
-      this.themeDeleteModal.visible = false
-      this.themeDeleteModal.deleteSettings = false
-      this.themeDeleteModal.selected = {}
     }
   }
 }