From cfc012dc7eccc4a1b51ea7725a22aa87cf3a7c64 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 13 Jan 2022 15:34:17 +0800
Subject: [PATCH] refactor: theme setting page

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/components/Input/AttachmentInput.vue      |  47 ++++
 src/config/router.config.js                   |  14 +-
 src/layouts/PageView.vue                      |   2 +
 src/views/interface/ThemeList.vue             |  78 ++-----
 src/views/interface/ThemeSetting.vue          | 220 ++++++++++++++++++
 .../components/ThemeDeleteConfirmModal.vue    |  85 +++++++
 src/views/system/About.vue                    |  15 +-
 7 files changed, 390 insertions(+), 71 deletions(-)
 create mode 100644 src/components/Input/AttachmentInput.vue
 create mode 100644 src/views/interface/ThemeSetting.vue
 create mode 100644 src/views/interface/components/ThemeDeleteConfirmModal.vue

diff --git a/src/components/Input/AttachmentInput.vue b/src/components/Input/AttachmentInput.vue
new file mode 100644
index 000000000..0aee3f3e7
--- /dev/null
+++ b/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>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 24a0d7aa8..5d7a8b14b 100644
--- a/src/config/router.config.js
+++ b/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 }
           }
         ]
       },
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
index 4fcfd6c8c..caf63d00b 100644
--- a/src/layouts/PageView.vue
+++ b/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>
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 99354b3a8..782793d29 100644
--- a/src/views/interface/ThemeList.vue
+++ b/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 = {}
     }
   }
 }
diff --git a/src/views/interface/ThemeSetting.vue b/src/views/interface/ThemeSetting.vue
new file mode 100644
index 000000000..554d1f1d0
--- /dev/null
+++ b/src/views/interface/ThemeSetting.vue
@@ -0,0 +1,220 @@
+<template>
+  <page-view :sub-title="theme.current.version || '-'" :title="theme.current.name || '-'" affix>
+    <template slot="extra">
+      <a-dropdown>
+        <a-menu slot="overlay">
+          <a-menu-item key="1">
+            <a-icon type="cloud" />
+            在线更新
+          </a-menu-item>
+          <a-menu-item key="2">
+            <a-icon type="file" />
+            本地更新
+          </a-menu-item>
+        </a-menu>
+        <a-button icon="upload">
+          更新
+          <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+      <a-button
+        :disabled="theme.current.activated"
+        icon="delete"
+        type="danger"
+        @click="themeDeleteModal.visible = true"
+      >
+        删除
+      </a-button>
+    </template>
+    <a-spin :spinning="theme.loading">
+      <div v-if="theme.configurations.length > 0" class="card-container">
+        <a-tabs defaultActiveKey="0" type="card">
+          <a-tab-pane :key="0" tab="关于"></a-tab-pane>
+          <a-tab-pane v-for="(group, index) in theme.configurations" :key="index + 1" :tab="group.label">
+            <a-form
+              :wrapperCol="{
+                xl: { span: 8 },
+                lg: { span: 8 },
+                sm: { span: 12 },
+                xs: { span: 24 }
+              }"
+              layout="vertical"
+            >
+              <a-form-item v-for="(item, formItemIndex) in group.items" :key="formItemIndex" :label="item.label + '：'">
+                <p v-if="item.description && item.description !== ''" slot="help" v-html="item.description"></p>
+                <a-input
+                  v-if="item.type === 'TEXT'"
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                  :placeholder="item.placeholder"
+                />
+                <a-input
+                  v-else-if="item.type === 'TEXTAREA'"
+                  v-model="theme.settings[item.name]"
+                  :autoSize="{ minRows: 5 }"
+                  :placeholder="item.placeholder"
+                  type="textarea"
+                />
+                <a-radio-group
+                  v-else-if="item.type === 'RADIO'"
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                >
+                  <a-radio v-for="(option, radioIndex) in item.options" :key="radioIndex" :value="option.value">
+                    {{ option.label }}
+                  </a-radio>
+                </a-radio-group>
+                <a-select
+                  v-else-if="item.type === 'SELECT'"
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                >
+                  <a-select-option v-for="option in item.options" :key="option.value" :value="option.value">
+                    {{ option.label }}
+                  </a-select-option>
+                </a-select>
+                <verte
+                  v-else-if="item.type === 'COLOR'"
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                  model="hex"
+                  picker="square"
+                  style="display: inline-block;height: 24px;"
+                ></verte>
+                <AttachmentInput
+                  v-else-if="item.type === 'ATTACHMENT'"
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                  :placeholder="item.placeholder"
+                />
+                <a-input-number
+                  v-else-if="item.type === 'NUMBER'"
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                  style="width:100%"
+                />
+                <a-switch
+                  v-else-if="item.type === 'SWITCH'"
+                  v-model="theme.settings[item.name]"
+                  :defaultChecked="item.defaultValue"
+                />
+                <a-input
+                  v-else
+                  v-model="theme.settings[item.name]"
+                  :defaultValue="item.defaultValue"
+                  :placeholder="item.placeholder"
+                />
+              </a-form-item>
+              <a-form-item>
+                <ReactiveButton
+                  :errored="theme.saveErrored"
+                  :loading="theme.saving"
+                  erroredText="保存失败"
+                  loadedText="保存成功"
+                  text="保存"
+                  type="primary"
+                  @callback="theme.saveErrored = false"
+                  @click="handleSaveSettings"
+                ></ReactiveButton>
+              </a-form-item>
+            </a-form>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+      <a-empty v-if="theme.configurations.length <= 0 && !theme.loading" description="当前主题无设置选项" />
+    </a-spin>
+
+    <ThemeDeleteConfirmModal
+      :theme="theme.current"
+      :visible.sync="themeDeleteModal.visible"
+      @success="onThemeDeleteSucceed"
+    />
+  </page-view>
+</template>
+<script>
+// components
+import Verte from 'verte'
+import 'verte/dist/verte.css'
+import { PageView } from '@/layouts'
+import ThemeDeleteConfirmModal from './components/ThemeDeleteConfirmModal'
+// utils
+import apiClient from '@/utils/api-client'
+
+export default {
+  name: 'ThemeSetting',
+  components: {
+    PageView,
+    Verte,
+    ThemeDeleteConfirmModal
+  },
+  data() {
+    return {
+      theme: {
+        current: {},
+        settings: [],
+        configurations: [],
+        loading: false,
+        saving: false,
+        saveErrored: false
+      },
+      themeDeleteModal: {
+        visible: false
+      }
+    }
+  },
+  beforeRouteEnter(to, from, next) {
+    // Get post id from query
+    const themeId = to.query.themeId
+    next(async vm => {
+      try {
+        vm.theme.loading = true
+        if (themeId) {
+          const { data } = await apiClient.theme.get(themeId)
+          vm.theme.current = data
+        } else {
+          const { data } = await apiClient.theme.getActivatedTheme()
+          vm.theme.current = data
+        }
+        await vm.handleGetConfigurations()
+        await vm.handleGetSettings()
+      } finally {
+        vm.theme.loading = false
+      }
+    })
+  },
+  methods: {
+    async handleGetConfigurations() {
+      try {
+        const { data } = await apiClient.theme.listConfigurations(this.theme.current.id)
+        this.theme.configurations = data
+      } catch (error) {
+        this.$log.error(error)
+      }
+    },
+    async handleGetSettings() {
+      try {
+        const { data } = await apiClient.theme.listSettings(this.theme.current.id)
+        this.theme.settings = data
+      } catch (error) {
+        this.$log.error(error)
+      }
+    },
+    async handleSaveSettings() {
+      try {
+        this.theme.saving = true
+        await apiClient.theme.saveSettings(this.theme.current.id, this.theme.settings)
+      } catch (error) {
+        this.$log.error(error)
+        this.theme.saveErrored = true
+      } finally {
+        setTimeout(() => {
+          this.theme.saving = false
+        }, 400)
+      }
+    },
+    onThemeDeleteSucceed() {
+      this.$router.replace({ name: 'ThemeList' })
+    }
+  }
+}
+</script>
diff --git a/src/views/interface/components/ThemeDeleteConfirmModal.vue b/src/views/interface/components/ThemeDeleteConfirmModal.vue
new file mode 100644
index 000000000..c34300aa8
--- /dev/null
+++ b/src/views/interface/components/ThemeDeleteConfirmModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <a-modal v-model="modalVisible" :afterClose="onAfterClose" :closable="false" :width="416" destroyOnClose title="提示">
+    <template slot="footer">
+      <a-button @click="modalVisible = false">
+        取消
+      </a-button>
+      <ReactiveButton
+        :errored="deleteErrored"
+        :loading="deleting"
+        erroredText="删除失败"
+        loadedText="删除成功"
+        text="确定"
+        @callback="handleDeleteCallback"
+        @click="handleDelete()"
+      ></ReactiveButton>
+    </template>
+    <p>确定删除【{{ theme.name }}】主题？</p>
+    <a-checkbox v-model="deleteSettings">
+      同时删除主题配置
+    </a-checkbox>
+  </a-modal>
+</template>
+<script>
+import apiClient from '@/utils/api-client'
+
+export default {
+  name: 'ThemeDeleteConfirmModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    theme: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      deleteErrored: false,
+      deleting: false,
+      deleteSettings: false
+    }
+  },
+  computed: {
+    modalVisible: {
+      get() {
+        return this.visible
+      },
+      set(value) {
+        this.$emit('update:visible', value)
+      }
+    }
+  },
+  methods: {
+    async handleDelete() {
+      try {
+        this.deleting = true
+        await apiClient.theme.delete(this.theme.id, this.deleteSettings)
+      } catch (e) {
+        this.deleteErrored = false
+        this.$log.error('Delete theme failed', e)
+      } finally {
+        setTimeout(() => {
+          this.deleting = false
+        }, 400)
+      }
+    },
+    handleDeleteCallback() {
+      if (this.deleteErrored) {
+        this.deleteErrored = false
+      } else {
+        this.modalVisible = false
+        this.$emit('success')
+      }
+    },
+    onAfterClose() {
+      this.deleteErrored = false
+      this.deleting = false
+      this.deleteSettings = false
+      this.$emit('onAfterClose')
+    }
+  }
+}
+</script>
diff --git a/src/views/system/About.vue b/src/views/system/About.vue
index 83f23f638..1eb46881d 100644
--- a/src/views/system/About.vue
+++ b/src/views/system/About.vue
@@ -27,6 +27,7 @@
               <li>版本：{{ environments.version }}</li>
               <li>数据库：{{ environments.database }}</li>
               <li>运行模式：{{ environments.mode }}</li>
+              <li>启用主题：{{ activatedTheme.name }}</li>
               <li>启动时间：{{ environments.startTime | moment }}</li>
             </ul>
             <a class="mr-3" href="https://halo.run" target="_blank"
@@ -123,7 +124,8 @@ export default {
       checking: false,
       isLatest: false,
       latestData: {},
-      versionContentVisible: false
+      versionContentVisible: false,
+      activatedTheme: {}
     }
   },
   computed: {
@@ -145,19 +147,24 @@ export default {
   },
   created() {
     this.getEnvironments()
+    this.handleGetActivatedTheme()
     this.fetchContributors()
   },
   methods: {
     async getEnvironments() {
-      await apiClient.getEnvironment().then(response => {
-        this.environments = response.data
-      })
+      const { data } = await apiClient.getEnvironment()
+      this.environments = data
       this.checkServerUpdate()
     },
+    async handleGetActivatedTheme() {
+      const { data } = await apiClient.theme.getActivatedTheme()
+      this.activatedTheme = data
+    },
     handleCopyEnvironments() {
       const text = `版本：${this.environments.version}
 数据库：${this.environments.database}
 运行模式：${this.environments.mode}
+启用主题：${this.activatedTheme.name}
 User Agent：${navigator.userAgent}`
       this.$copyText(text)
         .then(message => {