fix: settings sync

Author: sendya

package.json

@@ -59,6 +59,6 @@
     "opencollective-postinstall": "^2.0.2",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.6.10",
-    "webpack-theme-color-replacer": "^1.2.17"
+    "webpack-theme-color-replacer": "^1.3.12"
   }
 }

src/components/GlobalHeader/RightContent.vue

@@ -43,7 +43,7 @@ export default {
     wrpCls () {
       return {
         'ant-pro-global-header-index-right': true,
-        [`ant-pro-global-header-index-${(this.topMenu && this.isMobile) && this.theme || 'light'}`]: true
+        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
       }
     }
   },

src/config/defaultSettings.js

@@ -17,16 +17,14 @@ export default {
   navTheme: 'dark', // theme for nav menu
   primaryColor: '#52C41A', // primary color of ant design
   layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
-  contentWidth: 'Fixed', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+  contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
   fixedHeader: false, // sticky header
-  autoHideHeader: false, //  auto hide header
   fixSiderbar: false, // sticky siderbar
   colorWeak: false,
   menu: {
     locale: true
   },
   title: 'Ant Design Pro',
-  multiTab: false,
   pwa: false,
   iconfontUrl: '',
   production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'

src/layouts/BasicLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <pro-layout
-    title="Ant Design Pro"
+    :title="title"
     :menus="menus"
     :collapsed="collapsed"
     :mediaQuery="query"
@@ -13,7 +13,7 @@
   >
     <setting-drawer :settings="settings" @change="handleSettingChange" />
     <template v-slot:rightContentRender>
-      <right-content :top-menu="settings.layout === 'topmenu'" :theme="settings.theme" />
+      <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
     </template>
     <template v-slot:footerRender>
       <global-footer />
@@ -23,11 +23,12 @@
 </template>
 
 <script>
-import { SettingDrawer } from '@ant-design-vue/pro-layout'
+import { SettingDrawer, updateTheme } 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 defaultSettings from '@/config/defaultSettings'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import GlobalFooter from '@/components/GlobalFooter'
 import LogoSvg from '../assets/logo.svg?inline'
@@ -45,18 +46,19 @@ export default {
       menus: [],
       // 侧栏收起状态
       collapsed: false,
+      title: defaultSettings.title,
       settings: {
         // 布局类型
-        layout: 'sidemenu', // 'sidemenu', 'topmenu'
+        layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
         // 定宽: true / 流式: false
-        contentWidth: false,
+        contentWidth: defaultSettings.layout === 'sidemenu' ? false : defaultSettings.contentWidth === 'Fixed',
         // 主题 'dark' | 'light'
-        theme: 'dark',
+        theme: defaultSettings.navTheme,
         // 主色调
-        primaryColor: '#1890ff',
-        fixedHeader: false,
-        fixSiderbar: false,
-        colorWeak: false,
+        primaryColor: defaultSettings.primaryColor,
+        fixedHeader: defaultSettings.fixedHeader,
+        fixSiderbar: defaultSettings.fixSiderbar,
+        colorWeak: defaultSettings.colorWeak,
 
         hideHintAlert: false,
         hideCopyButton: false
@@ -95,6 +97,9 @@ export default {
         }, 16)
       })
     }
+
+    // first update color
+    updateTheme(this.settings.primaryColor)
   },
   methods: {
     i18nRender,

yarn.lock

@@ -11174,10 +11174,10 @@ webpack-sources@*, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sourc
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-theme-color-replacer@^1.2.17:
-  version "1.3.10"
-  resolved "https://registry.npm.taobao.org/webpack-theme-color-replacer/download/webpack-theme-color-replacer-1.3.10.tgz#2d61336ae4ba288cf8704457cdf8568525b10fca"
-  integrity sha1-LWEzauS6KIz4cERXzfhWhSWxD8o=
+webpack-theme-color-replacer@^1.3.12:
+  version "1.3.12"
+  resolved "https://registry.npm.taobao.org/webpack-theme-color-replacer/download/webpack-theme-color-replacer-1.3.12.tgz#0593a3149310c0e5b6b85afeccd61925b1b8e86b"
+  integrity sha1-BZOjFJMQwOW2uFr+zNYZJbG46Gs=
   dependencies:
     webpack-sources "*"