refactor: theme setting page

package.json

@@ -24,7 +24,7 @@
     "@codemirror/basic-setup": "^0.19.0",
     "@codemirror/lang-html": "^0.19.3",
     "@codemirror/lang-java": "^0.19.1",
-    "@halo-dev/admin-api": "^1.0.0-alpha.44",
+    "@halo-dev/admin-api": "^1.0.0-alpha.46",
     "ant-design-vue": "^1.7.8",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.10.7",

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/components/index.js

@@ -7,6 +7,7 @@ import AttachmentSelectDrawer from './Attachment/AttachmentSelectDrawer'
 import AttachmentUploadModal from './Attachment/AttachmentUploadModal'
 import ReactiveButton from './Button/ReactiveButton'
 import PostTag from './Post/PostTag'
+import AttachmentInput from './Input/AttachmentInput'
 
 const _components = {
   Ellipsis,
@@ -15,7 +16,8 @@ const _components = {
   AttachmentSelectDrawer,
   AttachmentUploadModal,
   ReactiveButton,
-  PostTag
+  PostTag,
+  AttachmentInput
 }
 
 const components = {}

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/core/lazy_lib/components_use.js

@@ -52,7 +52,8 @@ import {
   TimePicker,
   Tooltip,
   Tree,
-  TreeSelect
+  TreeSelect,
+  Descriptions
 } from 'ant-design-vue'
 
 Vue.use(Affix)
@@ -106,6 +107,7 @@ Vue.use(Steps)
 Vue.use(Empty)
 Vue.use(Result)
 Vue.use(Space)
+Vue.use(Descriptions)
 
 // message config
 message.config({

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>