diff --git a/src/components/PageHeader/PageHeader.vue b/src/components/PageHeader/PageHeader.vue
index 8212f9ad8..09ca753e9 100644
--- a/src/components/PageHeader/PageHeader.vue
+++ b/src/components/PageHeader/PageHeader.vue
@@ -6,7 +6,7 @@
         <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>
+            <!-- <h1 v-if="title" class="title">{{ title }}</h1> -->
             <div class="action">
               <slot name="action"></slot>
             </div>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index fe6b78931..34956e561 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -97,7 +97,7 @@ export const asyncRouterMap = [
       {
         path: '/interface',
         name: 'Interface',
-        component: PageView,
+        component: RouteView,
         redirect: '/interface/themes',
         meta: { title: '外观', icon: 'skin' },
         children: [
diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
index 6699d1dc2..64486fec8 100644
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-header-index-wide">
+  <page-view>
     <a-row :gutter="12">
       <a-col
         :xl="10"
@@ -67,10 +67,11 @@
         </a-card>
       </a-col>
     </a-row>
-  </div>
+  </page-view>
 </template>
 
 <script>
+import { PageView } from '@/layouts'
 import { Ellipsis } from '@/components'
 import menuApi from '@/api/menu'
 const columns = [
@@ -99,6 +100,7 @@ const columns = [
 ]
 export default {
   components: {
+    PageView,
     Ellipsis
   },
   data() {
diff --git a/src/views/interface/ThemeEdit.vue b/src/views/interface/ThemeEdit.vue
index 0fc9ffbb2..eb3d8d931 100644
--- a/src/views/interface/ThemeEdit.vue
+++ b/src/views/interface/ThemeEdit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-header-index-wide">
+  <page-view>
     <a-row :gutter="12">
       <a-col
         :xl="18"
@@ -31,15 +31,17 @@
         </a-card>
       </a-col>
     </a-row>
-  </div>
+  </page-view>
 </template>
 
 <script>
 import themeApi from '@/api/theme'
 import ThemeFile from './components/ThemeFile'
 import { codemirror } from 'vue-codemirror-lite'
+import { PageView } from '@/layouts'
 export default {
   components: {
+    PageView,
     codemirror,
     ThemeFile
   },
diff --git a/src/views/interface/ThemeList.vue b/src/views/interface/ThemeList.vue
index 9df63d0ef..47393758a 100644
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-header-index-wide">
+  <page-view>
     <a-row :gutter="12" type="flex" align="middle">
       <a-col
         class="theme-item"
@@ -113,13 +113,17 @@
         </a-col>
       </a-row>
     </a-drawer>
-  </div>
+  </page-view>
 </template>
 
 <script>
+import { PageView } from '@/layouts'
 import themeApi from '@/api/theme'
 
 export default {
+  components: {
+    PageView
+  },
   data() {
     return {
       wrapperCol: {