From 737c1030a819893b42c39dc898b188e4a09711c7 Mon Sep 17 00:00:00 2001
From: John Niang <johnniang@riseup.net>
Date: Sat, 19 Sep 2020 21:58:58 +0800
Subject: [PATCH] Remove float more actions (halo-dev/console#245)

* Remove float more actions

* Use page header instead of list item

* pref: theme list control button.

Co-authored-by: Ryan Wang <i@ryanc.cc>
---
 package-lock.json                        | 108 ++++++++---
 package.json                             |   3 +-
 src/components/PageHeader/PageHeader.vue | 218 -----------------------
 src/components/PageHeader/index.js       |   2 -
 src/components/Tools/Breadcrumb.vue      |  45 -----
 src/config/router.config.js              |   4 +-
 src/core/lazy_lib/components_use.js      |   2 +
 src/layouts/PageView.vue                 | 135 ++++++--------
 src/views/interface/MenuList.vue         |  49 ++---
 src/views/interface/ThemeEdit.vue        |  28 +--
 src/views/interface/ThemeList.vue        | 118 ++++++------
 11 files changed, 240 insertions(+), 472 deletions(-)
 delete mode 100644 src/components/PageHeader/PageHeader.vue
 delete mode 100644 src/components/PageHeader/index.js
 delete mode 100644 src/components/Tools/Breadcrumb.vue

diff --git a/package-lock.json b/package-lock.json
index e382f053f..81c347853 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2601,34 +2601,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.7",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-          "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/mini-css-extract-plugin": "^0.9.1",
-            "chalk": "^3.0.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^1.2.3",
-            "merge-source-map": "^1.1.0",
-            "source-map": "^0.6.1"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-              "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            }
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -16155,6 +16127,86 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
+      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@types/mini-css-extract-plugin": "^0.9.1",
+        "chalk": "^3.0.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^1.2.3",
+        "merge-source-map": "^1.1.0",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-ls": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vue-ls/-/vue-ls-3.2.1.tgz",
diff --git a/package.json b/package.json
index 57ca51765..1d21d6ae6 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,8 @@
         {
           "ignoreReadBeforeAssign": false
         }
-      ]
+      ],
+      "comma-dangle": 0
     }
   },
   "husky": {
diff --git a/src/components/PageHeader/PageHeader.vue b/src/components/PageHeader/PageHeader.vue
deleted file mode 100644
index 1d5735689..000000000
--- a/src/components/PageHeader/PageHeader.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div class="page-header">
-    <div class="page-header-index-wide">
-      <s-breadcrumb />
-      <div class="detail">
-        <div
-          class="main"
-          v-if="!$route.meta.hiddenHeaderContent"
-        >
-          <div class="row">
-            <img
-              v-if="logo"
-              :src="logo"
-              class="logo"
-            />
-            <!-- <h1 v-if="title" class="title">{{ title }}</h1> -->
-            <div class="action">
-              <slot name="action"></slot>
-            </div>
-          </div>
-          <div class="row">
-            <div
-              v-if="avatar"
-              class="avatar"
-            >
-              <a-avatar :src="avatar" />
-            </div>
-            <div
-              v-if="this.$slots.content"
-              class="headerContent"
-            >
-              <slot name="content"></slot>
-            </div>
-            <div
-              v-if="this.$slots.extra"
-              class="extra"
-            >
-              <slot name="extra"></slot>
-            </div>
-          </div>
-          <div>
-            <slot name="pageMenu"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Breadcrumb from '@/components/Tools/Breadcrumb'
-
-export default {
-  name: 'PageHeader',
-  components: {
-    's-breadcrumb': Breadcrumb
-  },
-  props: {
-    title: {
-      type: [String, Boolean],
-      default: true,
-      required: false
-    },
-    logo: {
-      type: String,
-      default: '',
-      required: false
-    },
-    avatar: {
-      type: String,
-      default: '',
-      required: false
-    }
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.page-header {
-  background: #fff;
-  padding: 16px 32px 0;
-  border-bottom: 1px solid #e8e8e8;
-
-  .breadcrumb {
-    margin-bottom: 16px;
-  }
-
-  .detail {
-    display: flex;
-    /*margin-bottom: 16px;*/
-
-    .avatar {
-      flex: 0 1 72px;
-      margin: 0 24px 8px 0;
-
-      & > span {
-        border-radius: 72px;
-        display: block;
-        width: 72px;
-        height: 72px;
-      }
-    }
-
-    .main {
-      width: 100%;
-      flex: 0 1 auto;
-
-      .row {
-        display: flex;
-        width: 100%;
-
-        .avatar {
-          margin-bottom: 16px;
-        }
-      }
-
-      .title {
-        font-size: 20px;
-        font-weight: 500;
-
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 500;
-        color: rgba(0, 0, 0, 0.85);
-        margin-bottom: 16px;
-        flex: auto;
-      }
-      .logo {
-        width: 28px;
-        height: 28px;
-        border-radius: 4px;
-        margin-right: 16px;
-      }
-      .content,
-      .headerContent {
-        flex: auto;
-        color: rgba(0, 0, 0, 0.45);
-        line-height: 22px;
-
-        .link {
-          margin-top: 16px;
-          line-height: 24px;
-
-          a {
-            font-size: 14px;
-            margin-right: 32px;
-          }
-        }
-      }
-      .extra {
-        flex: 0 1 auto;
-        margin-left: 88px;
-        min-width: 242px;
-        text-align: right;
-      }
-      .action {
-        margin-left: 56px;
-        min-width: 266px;
-        flex: 0 1 auto;
-        text-align: right;
-        &:empty {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.mobile .page-header {
-  .main {
-    .row {
-      flex-wrap: wrap;
-
-      .avatar {
-        flex: 0 1 25%;
-        margin: 0 2% 8px 0;
-      }
-
-      .content,
-      .headerContent {
-        flex: 0 1 70%;
-
-        .link {
-          margin-top: 16px;
-          line-height: 24px;
-
-          a {
-            font-size: 14px;
-            margin-right: 10px;
-          }
-        }
-      }
-
-      .extra {
-        flex: 1 1 auto;
-        margin-left: 0;
-        min-width: 0;
-        text-align: right;
-      }
-
-      .action {
-        margin-left: unset;
-        min-width: 266px;
-        flex: 0 1 auto;
-        text-align: left;
-        margin-bottom: 12px;
-
-        &:empty {
-          display: none;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
deleted file mode 100644
index ec1078c1b..000000000
--- a/src/components/PageHeader/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import PageHeader from './PageHeader'
-export default PageHeader
diff --git a/src/components/Tools/Breadcrumb.vue b/src/components/Tools/Breadcrumb.vue
deleted file mode 100644
index bd45a92d5..000000000
--- a/src/components/Tools/Breadcrumb.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <a-breadcrumb class="breadcrumb">
-    <a-breadcrumb-item
-      v-for="(item, index) in breadList"
-      :key="item.name"
-    >
-      <router-link
-        v-if="item.name != name && index != 1"
-        :to="{ path: item.path === '' ? '/' : item.path }"
-      >{{ item.meta.title }}</router-link>
-      <span v-else>{{ item.meta.title }}</span>
-    </a-breadcrumb-item>
-  </a-breadcrumb>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      name: '',
-      breadList: []
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb() {
-      this.breadList = []
-      // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
-
-      this.name = this.$route.name
-      this.$route.matched.forEach((item) => {
-        // item.name !== 'index' && this.breadList.push(item)
-        this.breadList.push(item)
-      })
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  }
-}
-</script>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 56a194ab7..2210a4b27 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-import { BasicLayout, PageView } from '@/layouts'
+import { BasicLayout, PageView, BlankLayout } from '@/layouts'
 
 export const asyncRouterMap = [
   {
@@ -116,7 +116,7 @@ export const asyncRouterMap = [
       {
         path: '/interface',
         name: 'Interface',
-        component: PageView,
+        component: BlankLayout,
         redirect: '/interface/themes',
         meta: { title: '外观', icon: 'skin' },
         children: [
diff --git a/src/core/lazy_lib/components_use.js b/src/core/lazy_lib/components_use.js
index 2f0de95ce..99b9193e9 100644
--- a/src/core/lazy_lib/components_use.js
+++ b/src/core/lazy_lib/components_use.js
@@ -26,6 +26,7 @@ import {
   Menu,
   Modal,
   notification,
+  PageHeader,
   Pagination,
   Popconfirm,
   Popover,
@@ -78,6 +79,7 @@ Vue.use(List)
 Vue.use(LocaleProvider)
 Vue.use(Menu)
 Vue.use(Modal)
+Vue.use(PageHeader)
 Vue.use(Pagination)
 Vue.use(Popconfirm)
 Vue.use(Popover)
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
index 76b7fb025..af6e87617 100644
--- a/src/layouts/PageView.vue
+++ b/src/layouts/PageView.vue
@@ -1,21 +1,23 @@
 <template>
   <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
-    <!-- pageHeader , route meta :true on hide -->
-    <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
-      <slot slot="action" name="action"></slot>
-      <slot slot="content" name="headerContent"></slot>
-      <div slot="content" v-if="!this.$slots.headerContent && description">
-        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
-        <div class="link">
-          <template v-for="(link, index) in linkList">
-            <a :key="index" :href="link.href">
-              <a-icon :type="link.icon" />
-              <span>{{ link.title }}</span>
-            </a>
-          </template>
-        </div>
+    <div
+      class="page-header"
+      v-if="!$route.meta.hiddenHeaderContent"
+    >
+      <div class="page-header-index-wide">
+        <a-page-header
+          :title="title"
+          :sub-title="subTitle"
+          :breadcrumb="{ props: { routes:breadList } }"
+        >
+          <slot
+            name="extra"
+            slot="extra"
+          >
+          </slot>
+        </a-page-header>
       </div>
-    </page-header>
+    </div>
     <div class="content">
       <div class="page-header-index-wide">
         <slot>
@@ -27,90 +29,57 @@
 </template>
 
 <script>
-import PageHeader from '@/components/PageHeader'
-
 export default {
   name: 'PageView',
-  components: {
-    PageHeader
-  },
   props: {
-    avatar: {
-      type: String,
-      default: null
-    },
     title: {
-      type: [String, Boolean],
-      default: true
-    },
-    logo: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
+    subTitle: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
-      pageTitle: null,
-      description: null,
-      linkList: [],
-      extraImage: '',
-      search: false,
-      tabs: {}
+      breadList: [],
     }
   },
-  mounted() {
-    this.getPageMeta()
+  created() {
+    this.getBreadcrumb()
   },
-  updated() {
-    this.getPageMeta()
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    },
   },
   methods: {
-    getPageMeta() {
-      // eslint-disable-next-line
-      this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
-
-      const content = this.$refs.content
-      if (content) {
-        if (content.pageMeta) {
-          Object.assign(this, content.pageMeta)
-        } else {
-          this.description = content.description
-          this.linkList = content.linkList
-          this.extraImage = content.extraImage
-          this.search = content.search === true
-          this.tabs = content.tabs
-        }
-      }
-    }
-  }
+    getBreadcrumb() {
+      this.breadList = []
+      this.$route.matched.forEach((item) => {
+        item.breadcrumbName = item.meta.title
+        this.breadList.push(item)
+      })
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-  .content {
-    margin: 24px 24px 0;
-    .link {
-      margin-top: 16px;
-      &:not(:empty) {
-        margin-bottom: 16px;
-      }
-      a {
-        margin-right: 32px;
-        height: 24px;
-        line-height: 24px;
-        display: inline-block;
-        i {
-          font-size: 24px;
-          margin-right: 8px;
-          vertical-align: middle;
-        }
-        span {
-          height: 24px;
-          line-height: 24px;
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-    }
+.page-header {
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+  .ant-page-header {
+    padding: 16px 0px;
   }
+  margin: 0 0 24px 0;
+}
+
+.mobile .page-header,
+.tablet .page-header {
+  .ant-page-header {
+    padding: 16px;
+  }
+}
 </style>
diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
index bcfe2ce78..6f64b8930 100644
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
     <a-row :gutter="12">
       <a-col
         :xl="10"
@@ -227,73 +227,74 @@
         </a-card>
       </a-col>
     </a-row>
-  </div>
+  </page-view>
 </template>
 
 <script>
 import { mixin, mixinDevice } from '@/utils/mixin.js'
 import MenuSelectTree from './components/MenuSelectTree'
+import { PageView } from '@/layouts'
 import menuApi from '@/api/menu'
 const columns = [
   {
     title: '名称',
     dataIndex: 'name',
     ellipsis: true,
-    scopedSlots: { customRender: 'name' }
+    scopedSlots: { customRender: 'name' },
   },
   {
     title: '地址',
     ellipsis: true,
-    dataIndex: 'url'
+    dataIndex: 'url',
   },
   {
     title: '分组',
     ellipsis: true,
-    dataIndex: 'team'
+    dataIndex: 'team',
   },
   {
     title: '排序',
-    dataIndex: 'priority'
+    dataIndex: 'priority',
   },
   {
     title: '操作',
     key: 'action',
-    scopedSlots: { customRender: 'action' }
-  }
+    scopedSlots: { customRender: 'action' },
+  },
 ]
 export default {
-  components: { MenuSelectTree },
+  components: { MenuSelectTree, PageView },
   mixins: [mixin, mixinDevice],
   data() {
     return {
       table: {
         columns,
         data: [],
-        loading: false
+        loading: false,
       },
       form: {
         model: {
-          target: '_self'
+          target: '_self',
         },
         saving: false,
         errored: false,
         rules: {
           name: [
             { required: true, message: '* 菜单名称不能为空', trigger: ['change'] },
-            { max: 50, message: '* 菜单名称的字符长度不能超过 50', trigger: ['change'] }
+            { max: 50, message: '* 菜单名称的字符长度不能超过 50', trigger: ['change'] },
           ],
           url: [
             { required: true, message: '* 菜单地址不能为空', trigger: ['change'] },
-            { max: 1023, message: '* 菜单地址的字符长度不能超过 1023', trigger: ['change'] }
+            { max: 1023, message: '* 菜单地址的字符长度不能超过 1023', trigger: ['change'] },
           ],
           icon: [{ max: 50, message: '* 菜单图标的字符长度不能超过 50', trigger: ['change'] }],
-          team: [{ max: 255, message: '* 菜单分组的字符长度不能超过 255', trigger: ['change'] }]
+          team: [{ max: 255, message: '* 菜单分组的字符长度不能超过 255', trigger: ['change'] }],
         },
-        moreField: false
+        moreField: false,
       },
       teams: {
-        data: []
-      }
+        data: [],
+      },
     }
   },
   computed: {
@@ -305,7 +306,7 @@ export default {
     },
     isUpdateMode() {
       return !!this.form.model.id
-    }
+    },
   },
   created() {
     this.handleListMenus()
@@ -316,7 +317,7 @@ export default {
       this.table.loading = true
       menuApi
         .listTree()
-        .then(response => {
+        .then((response) => {
           this.table.data = response.data.data
         })
         .finally(() => {
@@ -326,14 +327,14 @@ export default {
         })
     },
     handleListTeams() {
-      menuApi.listTeams().then(response => {
+      menuApi.listTeams().then((response) => {
         this.teams.data = response.data.data
       })
     },
     handleDeleteMenu(id) {
       menuApi
         .delete(id)
-        .then(response => {
+        .then((response) => {
           this.$message.success('删除成功！')
         })
         .finally(() => {
@@ -343,7 +344,7 @@ export default {
     },
     handleCreateOrUpdateMenu() {
       const _this = this
-      _this.$refs.menuForm.validate(valid => {
+      _this.$refs.menuForm.validate((valid) => {
         if (valid) {
           _this.form.saving = true
           if (_this.isUpdateMode) {
@@ -381,7 +382,7 @@ export default {
         _this.handleListMenus()
         _this.handleListTeams()
       }
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index cdc22d680..11aeed90f 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page-view>
     <a-row :gutter="12">
       <a-col
         :xl="6"
@@ -70,18 +70,20 @@
         </a-card>
       </a-col>
     </a-row>
-  </div>
+  </page-view>
 </template>
 
 <script>
 import themeApi from '@/api/theme'
 import ThemeFile from './components/ThemeFile'
+import { PageView } from '@/layouts'
 import { codemirror } from 'vue-codemirror-lite'
 import 'codemirror/mode/htmlmixed/htmlmixed.js'
 export default {
   components: {
     codemirror,
-    ThemeFile
+    ThemeFile,
+    PageView,
   },
   data() {
     return {
@@ -90,7 +92,7 @@ export default {
         tabSize: 4,
         mode: 'text/html',
         lineNumbers: true,
-        line: true
+        line: true,
       },
       files: [],
       filesLoading: false,
@@ -100,7 +102,7 @@ export default {
       themesLoading: false,
       selectedTheme: {},
       saving: false,
-      saveErrored: false
+      saveErrored: false,
     }
   },
   created() {
@@ -110,7 +112,7 @@ export default {
   },
   methods: {
     handleGetActivatedTheme() {
-      themeApi.getActivatedTheme().then(response => {
+      themeApi.getActivatedTheme().then((response) => {
         this.selectedTheme = response.data.data
       })
     },
@@ -118,7 +120,7 @@ export default {
       this.filesLoading = true
       themeApi
         .listFilesActivated()
-        .then(response => {
+        .then((response) => {
           this.files = response.data.data
         })
         .finally(() => {
@@ -131,7 +133,7 @@ export default {
       this.themesLoading = true
       themeApi
         .listAll()
-        .then(response => {
+        .then((response) => {
           this.themes = response.data.data
         })
         .finally(() => {
@@ -145,7 +147,7 @@ export default {
       this.filesLoading = true
       themeApi
         .listFiles(themeId)
-        .then(response => {
+        .then((response) => {
           this.files = response.data.data
           this.content = ''
           this.file = {}
@@ -178,10 +180,10 @@ export default {
             _this.content = ''
             _this.file = {}
             _this.buttonDisabled = true
-          }
+          },
         })
       }
-      themeApi.getContent(this.selectedTheme.id, file.path).then(response => {
+      themeApi.getContent(this.selectedTheme.id, file.path).then((response) => {
         this.content = response.data.data
         this.file = file
         this.buttonDisabled = false
@@ -199,7 +201,7 @@ export default {
             this.saving = false
           }, 400)
         })
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 32c0f882f..0a8a05785 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -1,5 +1,26 @@
 <template>
-  <div>
+  <page-view
+    :title="activatedTheme?activatedTheme.name:'无'"
+    subTitle="当前启用"
+  >
+    <template slot="extra">
+      <a-button
+        key="2"
+        icon="reload"
+        :loading="themeLoading"
+        @click="handleReload"
+      >
+        刷新
+      </a-button>
+      <a-button
+        key="1"
+        type="primary"
+        icon="plus"
+        @click="uploadThemeVisible = true"
+      >
+        安装
+      </a-button>
+    </template>
     <a-row
       :gutter="12"
       type="flex"
@@ -26,7 +47,7 @@
                   :alt="item.name"
                   :src="item.screenshots || '/images/placeholder.jpg'"
                   loading="lazy"
-                >
+                />
               </div>
               <template
                 class="ant-card-actions"
@@ -112,35 +133,6 @@
       @close="onThemeSettingsClose"
     />
 
-    <div style="position: fixed;bottom: 30px;right: 30px;">
-      <a-dropdown
-        placement="topLeft"
-        :trigger="['click']"
-      >
-        <a-button
-          type="primary"
-          shape="circle"
-          icon="plus"
-          size="large"
-        ></a-button>
-        <a-menu slot="overlay">
-          <a-menu-item>
-            <a
-              rel="noopener noreferrer"
-              href="javascript:void(0);"
-              @click="uploadThemeVisible = true"
-            >安装主题</a>
-          </a-menu-item>
-          <a-menu-item>
-            <a
-              rel="noopener noreferrer"
-              href="javascript:void(0);"
-              @click="handleReload"
-            >刷新列表</a>
-          </a-menu-item>
-        </a-menu>
-      </a-dropdown>
-    </div>
     <a-modal
       title="安装主题"
       v-model="uploadThemeVisible"
@@ -162,8 +154,7 @@
               label="点击选择主题包或将主题包拖拽到此处<br>仅支持 ZIP 格式的文件"
               :uploadHandler="uploadHandler"
               @success="handleUploadSuccess"
-            >
-            </FilePondUpload>
+            ></FilePondUpload>
             <a-alert
               type="info"
               closable
@@ -255,7 +246,7 @@
             >
               <template slot="message">
                 远程地址即主题仓库地址，使用这种方式安装的一般为开发版本，请谨慎使用。
-                <br>更多主题请访问：
+                <br />更多主题请访问：
                 <a
                   target="_blank"
                   href="https://halo.run/p/themes"
@@ -282,18 +273,20 @@
         :filed="prepareUpdateTheme.id"
         :multiple="false"
         @success="handleUploadSuccess"
-      >
-      </FilePondUpload>
+      ></FilePondUpload>
     </a-modal>
-  </div>
+  </page-view>
 </template>
 
 <script>
 import ThemeSettingDrawer from './components/ThemeSettingDrawer'
+import { PageView } from '@/layouts'
 import themeApi from '@/api/theme'
+
 export default {
   components: {
-    ThemeSettingDrawer
+    PageView,
+    ThemeSettingDrawer,
   },
   data() {
     return {
@@ -311,21 +304,24 @@ export default {
       fetchingUrl: null,
       uploadHandler: themeApi.upload,
       updateByUploadHandler: themeApi.updateByUpload,
-      prepareUpdateTheme: {}
+      prepareUpdateTheme: {},
+      activatedTheme: null,
     }
   },
   computed: {
     sortedThemes() {
       const data = this.themes.slice(0)
-      return data.sort(function(a, b) {
+      return data.sort((a, b) => {
         return b.activated - a.activated
       })
-    }
+    },
   },
   created() {
     this.handleListThemes()
+    this.handleGetActivatedTheme()
   },
   destroyed: function() {
+    this.$log.debug('Theme list destroyed.')
     if (this.themeSettingVisible) {
       this.themeSettingVisible = false
     }
@@ -337,11 +333,16 @@ export default {
     next()
   },
   methods: {
+    handleGetActivatedTheme() {
+      themeApi.getActivatedTheme().then((response) => {
+        this.activatedTheme = response.data.data
+      })
+    },
     handleListThemes() {
       this.themeLoading = true
       themeApi
         .listAll()
-        .then(response => {
+        .then((response) => {
           this.themes = response.data.data
         })
         .finally(() => {
@@ -351,15 +352,20 @@ export default {
         })
     },
     handleActiveTheme(theme) {
-      themeApi.active(theme.id).finally(() => {
-        this.handleListThemes()
-      })
+      themeApi
+        .active(theme.id)
+        .finally(() => {
+          this.handleListThemes()
+        })
+        .finally(() => {
+          this.handleGetActivatedTheme()
+        })
     },
     handleUpdateTheme(themeId) {
       const hide = this.$message.loading('更新中...', 0)
       themeApi
         .update(themeId)
-        .then(response => {
+        .then((response) => {
           this.$message.success('更新成功！')
         })
         .finally(() => {
@@ -370,7 +376,7 @@ export default {
     handleDeleteTheme(themeId) {
       themeApi
         .delete(themeId)
-        .then(response => {
+        .then((response) => {
           this.$message.success('删除成功！')
         })
         .finally(() => {
@@ -396,18 +402,18 @@ export default {
       if (!this.fetchingUrl) {
         this.$notification['error']({
           message: '提示',
-          description: '远程地址不能为空！'
+          description: '远程地址不能为空！',
         })
         return
       }
       this.fetchButtonLoading = true
-      themeApi.fetchingBranches(this.fetchingUrl).then(response => {
+      themeApi.fetchingBranches(this.fetchingUrl).then((response) => {
         this.branches = response.data.data
         this.fetchBranches = true
       })
       themeApi
         .fetchingReleases(this.fetchingUrl)
-        .then(response => {
+        .then((response) => {
           this.releases = response.data.data
         })
         .finally(() => {
@@ -419,7 +425,7 @@ export default {
     handleBranchFetching() {
       themeApi
         .fetchingBranch(this.fetchingUrl, this.branches[this.selectedBranch].branch)
-        .then(response => {
+        .then((response) => {
           this.$message.success('拉取成功')
           this.uploadThemeVisible = false
         })
@@ -430,7 +436,7 @@ export default {
     handleReleaseFetching() {
       themeApi
         .fetchingRelease(this.fetchingUrl, this.releases[this.selectedBranch].branch)
-        .then(response => {
+        .then((response) => {
           this.$message.success('拉取成功')
           this.uploadThemeVisible = false
         })
@@ -460,7 +466,7 @@ export default {
         onOk() {
           _this.handleDeleteTheme(item.id)
         },
-        onCancel() {}
+        onCancel() {},
       })
     },
     handleConfirmUpdate(item) {
@@ -472,7 +478,7 @@ export default {
         onOk() {
           that.handleUpdateTheme(item.id)
         },
-        onCancel() {}
+        onCancel() {},
       })
     },
     onSelectChange(value) {
@@ -496,7 +502,7 @@ export default {
     onThemeSettingsClose() {
       this.themeSettingVisible = false
       this.selectedTheme = {}
-    }
-  }
+    },
+  },
 }
 </script>