feat: add setting drawer

config/themePluginConfig.js

@@ -0,0 +1,115 @@
+export default {
+  theme: [
+    {
+      key: 'dark',
+      fileName: 'dark.css',
+      theme: 'dark'
+    },
+    {
+      key: '#F5222D',
+      fileName: '#F5222D.css',
+      modifyVars: {
+        '@primary-color': '#F5222D'
+      }
+    },
+    {
+      key: '#FA541C',
+      fileName: '#FA541C.css',
+      modifyVars: {
+        '@primary-color': '#FA541C'
+      }
+    },
+    {
+      key: '#FAAD14',
+      fileName: '#FAAD14.css',
+      modifyVars: {
+        '@primary-color': '#FAAD14'
+      }
+    },
+    {
+      key: '#13C2C2',
+      fileName: '#13C2C2.css',
+      modifyVars: {
+        '@primary-color': '#13C2C2'
+      }
+    },
+    {
+      key: '#52C41A',
+      fileName: '#52C41A.css',
+      modifyVars: {
+        '@primary-color': '#52C41A'
+      }
+    },
+    {
+      key: '#2F54EB',
+      fileName: '#2F54EB.css',
+      modifyVars: {
+        '@primary-color': '#2F54EB'
+      }
+    },
+    {
+      key: '#722ED1',
+      fileName: '#722ED1.css',
+      modifyVars: {
+        '@primary-color': '#722ED1'
+      }
+    },
+
+    {
+      key: '#F5222D',
+      theme: 'dark',
+      fileName: 'dark-#F5222D.css',
+      modifyVars: {
+        '@primary-color': '#F5222D'
+      }
+    },
+    {
+      key: '#FA541C',
+      theme: 'dark',
+      fileName: 'dark-#FA541C.css',
+      modifyVars: {
+        '@primary-color': '#FA541C'
+      }
+    },
+    {
+      key: '#FAAD14',
+      theme: 'dark',
+      fileName: 'dark-#FAAD14.css',
+      modifyVars: {
+        '@primary-color': '#FAAD14'
+      }
+    },
+    {
+      key: '#13C2C2',
+      theme: 'dark',
+      fileName: 'dark-#13C2C2.css',
+      modifyVars: {
+        '@primary-color': '#13C2C2'
+      }
+    },
+    {
+      key: '#52C41A',
+      theme: 'dark',
+      fileName: 'dark-#52C41A.css',
+      modifyVars: {
+        '@primary-color': '#52C41A'
+      }
+    },
+    {
+      key: '#2F54EB',
+      theme: 'dark',
+      fileName: 'dark-#2F54EB.css',
+      modifyVars: {
+        '@primary-color': '#2F54EB'
+      }
+    },
+    {
+      key: '#722ED1',
+      theme: 'dark',
+      fileName: 'dark-#722ED1.css',
+      modifyVars: {
+        '@primary-color': '#722ED1'
+      }
+    }
+  ]
+}

package.json

@@ -12,9 +12,9 @@
     "postinstall": "opencollective-postinstall"
   },
   "dependencies": {
-    "@ant-design-vue/pro-layout": "^0.2.5",
+    "@ant-design-vue/pro-layout": "^0.2.7",
     "@antv/data-set": "^0.10.2",
-    "ant-design-vue": "1.5.3",
+    "ant-design-vue": "1.5.5",
     "axios": "^0.19.0",
     "core-js": "^3.1.2",
     "enquire.js": "^2.1.6",

src/components/GlobalHeader/RightContent.vue

@@ -16,9 +16,13 @@ export default {
     SelectLang
   },
   props: {
+    topMenu: {
+      type: Boolean,
+      required: true
+    },
     theme: {
       type: String,
-      default: 'light'
+      required: true
     }
   },
   data () {
@@ -30,7 +34,10 @@ export default {
   },
   computed: {
     wrpCls () {
-      return { 'ant-pro-global-header-index-right': true, [`ant-pro-global-header-index-${this.theme}`]: true }
+      return {
+        'ant-pro-global-header-index-right': true,
+        [`ant-pro-global-header-index-${this.topMenu && this.theme || 'light'}`]: true
+      }
     }
   },
   mounted () {

src/layouts/BasicLayout.vue

@@ -3,19 +3,17 @@
     title="Ant Design Pro"
     :menus="menus"
     :collapsed="collapsed"
-    :theme="theme"
-    :layout="layout"
-    :contentWidth="contentWidth"
-    :auto-hide-header="autoHideHeader"
     :mediaQuery="query"
     :isMobile="isMobile"
     :handleMediaQuery="handleMediaQuery"
     :handleCollapse="handleCollapse"
     :logo="logoRender"
     :i18nRender="i18nRender"
+    v-bind="settings"
   >
+    <setting-drawer :settings="settings" @change="handleSettingChange" />
     <template v-slot:rightContentRender>
-      <right-content />
+      <right-content :top-menu="settings.layout === 'topmenu'" :theme="settings.theme" />
     </template>
     <template v-slot:footerRender>
       <global-footer />
@@ -25,20 +23,21 @@
 </template>
 
 <script>
+import { SettingDrawer } from '@ant-design-vue/pro-layout'
 import { i18nRender } from '@/locales'
 import { mapState } from 'vuex'
+import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
+
 import RightContent from '@/components/GlobalHeader/RightContent'
 import GlobalFooter from '@/components/GlobalFooter'
-
 import LogoSvg from '../assets/logo.svg?inline'
-import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
 
 export default {
   name: 'BasicLayout',
   components: {
+    SettingDrawer,
     RightContent,
-    GlobalFooter,
-    LogoSvg
+    GlobalFooter
   },
   data () {
     return {
@@ -46,16 +45,24 @@ export default {
       menus: [],
       // 侧栏收起状态
       collapsed: false,
-      // 自动隐藏头部栏
-      autoHideHeader: false,
+      settings: {
+        // 布局类型
+        layout: 'sidemenu', // 'sidemenu', 'topmenu'
+        // 定宽: true / 流式: false
+        contentWidth: true,
+        // 主题 'dark' | 'light'
+        theme: 'dark',
+        // 主色调
+        primaryColor: '#1890ff',
+        fixedHeader: false,
+        fixSiderbar: false,
+
+        hideHintAlert: false,
+        hideCopyButton: false
+      },
       // 媒体查询
       query: {},
-      // 布局类型
-      layout: 'sidemenu', // 'sidemenu', 'topmenu'
-      // 定宽: true / 流式: false
-      contentWidth: true,
-      // 主题 'dark' | 'light'
-      theme: 'dark',
+
       // 是否手机模式
       isMobile: false
     }
@@ -104,6 +111,23 @@ export default {
     handleCollapse (val) {
       this.collapsed = val
     },
+    handleSettingChange ({ type, value }) {
+      console.log('type', type, value)
+      type && (this.settings[type] = value)
+      switch (type) {
+        case 'contentWidth':
+          this.settings[type] = value === 'Fixed'
+          break
+        case 'layout':
+          if (value === 'sidemenu') {
+            this.settings.contentWidth = false
+          } else {
+            this.settings.fixSiderbar = false
+            this.settings.contentWidth = true
+          }
+          break
+      }
+    },
     logoRender () {
       return <LogoSvg />
     }

src/locales/lang/en-US.js

@@ -13,7 +13,27 @@ const locale = {
   'menu.dashboard': 'Dashboard',
   'menu.dashboard.analysis': 'Analysis',
   'menu.dashboard.monitor': 'Monitor',
-  'menu.dashboard.workplace': 'Workplace'
+  'menu.dashboard.workplace': 'Workplace',
+
+  'app.setting.pagestyle': 'Page style setting',
+  'app.setting.pagestyle.light': 'Light style',
+  'app.setting.pagestyle.dark': 'Dark style',
+  'app.setting.pagestyle.realdark': 'RealDark style',
+  'app.setting.themecolor': 'Theme Color',
+  'app.setting.navigationmode': 'Navigation Mode',
+  'app.setting.content-width': 'Content Width',
+  'app.setting.fixedheader': 'Fixed Header',
+  'app.setting.fixedsidebar': 'Fixed Sidebar',
+  'app.setting.sidemenu': 'Side Menu Layout',
+  'app.setting.topmenu': 'Top Menu Layout',
+  'app.setting.content-width.fixed': 'Fixed',
+  'app.setting.content-width.fluid': 'Fluid',
+  'app.setting.othersettings': 'Other Settings',
+  'app.setting.weakmode': 'Weak Mode',
+  'app.setting.copy': 'Copy Setting',
+  'app.setting.loading': 'Loading theme',
+  'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
+  'app.setting.production.hint': 'Setting panel shows in development environment only, please manually modify'
 }
 
 export default {

src/main.js

@@ -9,6 +9,7 @@ import store from './store/'
 import i18n from './locales'
 import { VueAxios } from './utils/request'
 import ProLayout, { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
+import themePluginConfig from '../config/themePluginConfig'
 
 // mock
 // WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
@@ -27,6 +28,8 @@ Vue.use(VueAxios)
 Vue.component('pro-layout', ProLayout)
 Vue.component('page-header-wrapper', PageHeaderWrapper)
 
+window.umi_plugin_ant_themeVar = themePluginConfig.theme
+
 new Vue({
   router,
   store,

src/views/list/search/SearchLayout.vue

@@ -18,6 +18,18 @@
 </template>
 
 <script>
+const getActiveKey = (path) => {
+  switch (path) {
+    case '/list/search/article':
+      return '1'
+    case '/list/search/project':
+      return '2'
+    case '/list/search/application':
+      return '3'
+    default:
+      return '1'
+  }
+}
 export default {
   name: 'SearchLayout',
   data () {
@@ -31,6 +43,13 @@ export default {
       search: true
     }
   },
+  created () {
+    this.tabActiveKey = getActiveKey(this.$route.path)
+
+    this.$watch('$route', (val) => {
+      this.tabActiveKey = getActiveKey(val.path)
+    })
+  },
   methods: {
     handleTabChange (key) {
       this.tabActiveKey = key

src/views/profile/advanced/Advanced.vue

@@ -43,14 +43,30 @@
 
     <a-card :bordered="false" title="流程进度">
       <a-steps :direction="isMobile && 'vertical' || 'horizontal'" :current="1" progressDot>
-        <a-step title="创建项目">
+        <a-step>
+          <template v-slot:title>
+            <span>创建项目</span>
+          </template>
+          <template v-slot:description>
+            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
+              曲丽丽<a-icon type="dingding" style="margin-left: 8px;" />
+              <div>2016-12-12 12:32</div>
+            </div>
+          </template>
         </a-step>
-        <a-step title="部门初审">
-        </a-step>
-        <a-step title="财务复核">
-        </a-step>
-        <a-step title="完成">
+        <a-step>
+          <template v-slot:title>
+            <span>部门初审</span>
+          </template>
+          <template v-slot:description>
+            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
+              周毛毛<a-icon type="dingding" style="color: rgb(0, 160, 233); margin-left: 8px;" />
+              <div><a>催一下</a></div>
+            </div>
+          </template>
         </a-step>
+        <a-step title="财务复核" />
+        <a-step title="完成" />
       </a-steps>
     </a-card>
 

yarn.lock

@@ -2,17 +2,19 @@
 # yarn lockfile v1
 
 
-"@ant-design-vue/pro-layout@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.npm.taobao.org/@ant-design-vue/pro-layout/download/@ant-design-vue/pro-layout-0.2.5.tgz?cache=0&sync_timestamp=1588774629698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design-vue%2Fpro-layout%2Fdownload%2F%40ant-design-vue%2Fpro-layout-0.2.5.tgz#415dd09b00747d324ca0b25c993bee57580bdcc9"
-  integrity sha1-QV3QmwB0fTJMoLJcmTvuV1gL3Mk=
+"@ant-design-vue/pro-layout@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.npm.taobao.org/@ant-design-vue/pro-layout/download/@ant-design-vue/pro-layout-0.2.7.tgz?cache=0&sync_timestamp=1589462968164&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design-vue%2Fpro-layout%2Fdownload%2F%40ant-design-vue%2Fpro-layout-0.2.7.tgz#664b006dfcf8c2126cd9af745b5c6891f296aa52"
+  integrity sha1-ZksAbfz4whJs2a90W1xokfKWqlI=
   dependencies:
     ant-design-vue "^1.5.3"
     classnames "^2.2.6"
     insert-css "^2.0.0"
     lodash "^4.17.15"
+    omit.js "^1.0.2"
     umi-request "^1.2.11"
     vue-container-query "^0.1.0"
+    vue-copy-to-clipboard "1.0.0"
 
 "@ant-design/colors@^3.1.0", "@ant-design/colors@^3.2.1":
   version "3.2.2"
@@ -1979,10 +1981,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
-ant-design-vue@1.5.3:
-  version "1.5.3"
-  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.5.3.tgz#777a43a76dd233efc72abe9704103dbb2a95c558"
-  integrity sha1-d3pDp23SM+/HKr6XBBA9uyqVxVg=
+ant-design-vue@1.5.5:
+  version "1.5.5"
+  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.5.5.tgz#11e5fabedfb6f51ccedb3f7b1650d5f388157eb3"
+  integrity sha1-EeX6vt+29RzO2z97FlDV84gVfrM=
   dependencies:
     "@ant-design/icons" "^2.1.1"
     "@ant-design/icons-vue" "^2.0.0"
@@ -3359,6 +3361,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.npm.taobao.org/copy-descriptor/download/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npm.taobao.org/copy-to-clipboard/download/copy-to-clipboard-3.3.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcopy-to-clipboard%2Fdownload%2Fcopy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha1-EVqhqZmP+rYZb5MHatbaO5E2Yq4=
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npm.taobao.org/copy-webpack-plugin/download/copy-webpack-plugin-5.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcopy-webpack-plugin%2Fdownload%2Fcopy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88"
@@ -7867,7 +7876,7 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.npm.taobao.org/obuf/download/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha1-Cb6jND1BhZ69RGKS0RydTbYZCE4=
 
-omit.js@^1.0.0:
+omit.js@^1.0.0, omit.js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/omit.js/download/omit.js-1.0.2.tgz#91a14f0eba84066dfa015bf30e474c47f30bc858"
   integrity sha1-kaFPDrqEBm36AVvzDkdMR/MLyFg=
@@ -10438,6 +10447,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/toggle-selection/download/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/toidentifier/download/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -10862,6 +10876,13 @@ vue-container-query@^0.1.0:
     resize-observer-lite "^0.2.3"
     vue "^2.5.17"
 
+vue-copy-to-clipboard@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/vue-copy-to-clipboard/download/vue-copy-to-clipboard-1.0.0.tgz#1d1aa57a342827cfe094846c6aa2c604340c07a4"
+  integrity sha1-HRqlejQoJ8/glIRsaqLGBDQMB6Q=
+  dependencies:
+    copy-to-clipboard "^3.3.1"
+
 vue-cropper@0.4.9:
   version "0.4.9"
   resolved "https://registry.npm.taobao.org/vue-cropper/download/vue-cropper-0.4.9.tgz#fe650f32516ecf29014bbd4a9079191c8dc5a5ae"