feat: add setting drawer

sendya · sendya · commit a85c43808578 · 2020-05-14T22:06:30.000+08:00
diff --git a/config/themePluginConfig.js b/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'
+      }
+    }
+  ]
+}
diff --git a/package.json b/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",
diff --git a/src/components/GlobalHeader/RightContent.vue b/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 () {
diff --git a/src/layouts/BasicLayout.vue b/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,37 +23,46 @@
 </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 {
       // base
       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 />
     }
diff --git a/src/locales/lang/en-US.js b/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 {
diff --git a/src/main.js b/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,
diff --git a/src/views/list/search/SearchLayout.vue b/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
diff --git a/src/views/profile/advanced/Advanced.vue b/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>
 
diff --git a/yarn.lock b/yarn.lock
