fix: prop contentWidth compatible

examples/src/config/defaultSettings.js

+/**
+ * 项目默认配置项
+ * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
+ * navTheme - sidebar theme ['dark', 'light'] 两种主题
+ * colorWeak - 色盲模式
+ * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
+ * fixedHeader - 固定 Header : boolean
+ * fixSiderbar - 固定左侧菜单栏 ： boolean
+ * contentWidth - 内容区布局： 流式 |  固定
+ *
+ * storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
+ *
+ */
+
+export default {
+  navTheme: 'dark', // theme for nav menu
+  primaryColor: '#52C41A', // primary color of ant design
+  layout: 'sidemenu', // nav menu position: `sidemenu` or `topmenu`
+  contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+  fixedHeader: false, // sticky header
+  fixSiderbar: false, // sticky siderbar
+  colorWeak: false,
+  menu: {
+    locale: true
+  },
+  title: 'Ant Design Pro',
+  pwa: false,
+  iconfontUrl: '',
+  production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'
+}

examples/src/layouts/BasicLayout.vue

 <template>
   <pro-layout
+    title="Pro Layout"
     :menus="menus"
     :collapsed="collapsed"
-    :theme="theme"
-    :layout="layout"
-    :contentWidth="contentWidth"
-    :auto-hide-header="autoHideHeader"
     :mediaQuery="query"
     :isMobile="isMobile"
     :handleMediaQuery="handleMediaQuery"
     :handleCollapse="handleCollapse"
     :i18nRender="i18nRender"
+    v-bind="settings"
   >
     <!--    <template v-slot:menuRender>
       <div v-for="(menu, key) in menus" :key="key">
@@ -24,22 +22,28 @@
       </div>
     </template>
     <template v-slot:rightContentRender>
-      <div :class="['ant-pro-global-header-index-right', layout === 'topmenu' && `ant-pro-global-header-index-${theme}`]">
+      <div :class="['ant-pro-global-header-index-right', settings.layout === 'topmenu' && `ant-pro-global-header-index-${settings.theme}`]">
         rightContentRender
       </div>
     </template>
     <template v-slot:footerRender>
       <div>footerRender</div>
     </template>
+    <setting-drawer
+      :settings="settings"
+      @change="handleSettingChange"
+    />
     <router-view />
   </pro-layout>
 </template>
 
 <script>
-import ProLayout from '@ant-design-vue/pro-layout'
 import { asyncRouterMap } from '../config/router.config'
 import { i18nRender } from '../locales'
+
+import defaultSettings from '@/config/defaultSettings'
 import LogoSvg from '../assets/logo.svg?inline'
+import { CONTENT_WIDTH_TYPE } from '@/store/mutation-types'
 
 export default {
   name: 'BasicLayout',
@@ -56,11 +60,27 @@ export default {
       // 布局类型
       layout: 'sidemenu', // 'sidemenu', 'topmenu'
       // 定宽: true / 流式: false
-      contentWidth: 'Fluid', // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
+      contentWidth: false, // layout of content: `Fluid` or `Fixed`, only works when layout is topmenu
       // 主题 'dark' | 'light'
       theme: 'dark',
       // 是否手机模式
-      isMobile: false
+      isMobile: false,
+      settings: {
+        // 布局类型
+        layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
+        // CONTENT_WIDTH_TYPE
+        contentWidth: defaultSettings.contentWidth,
+        // 主题 'dark' | 'light'
+        theme: defaultSettings.navTheme,
+        // 主色调
+        primaryColor: defaultSettings.primaryColor,
+        fixedHeader: defaultSettings.fixedHeader,
+        fixSiderbar: defaultSettings.fixSiderbar,
+        colorWeak: defaultSettings.colorWeak,
+
+        hideHintAlert: false,
+        hideCopyButton: false
+      }
     }
   },
   created () {
@@ -82,15 +102,29 @@ 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
+          break
+        case 'layout':
+          if (value === 'sidemenu') {
+            this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
+          } else {
+            this.settings.fixSiderbar = false
+            this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fixed
+          }
+          break
+      }
+    },
     logoRender () {
       return <LogoSvg />
     },
     footerRender () {
       return <div>custom footer</div>
     }
-  },
-  components: {
-    ProLayout
   }
 }
 </script>

examples/src/main.js

@@ -9,14 +9,16 @@ import i18n from './locales'
 
 import './router/router-guards'
 import './core/library'
-import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
+import ProLayout, { PageHeaderWrapper, SettingDrawer } from '@ant-design-vue/pro-layout'
 import initializer from './core/bootstrap'
 import './global.less'
 import themePluginConfig from '@config/themePluginConfig'
 
 Vue.config.productionTip = false
 
-Vue.component('page-header-wrapper', PageHeaderWrapper)
+Vue.use(ProLayout)
+Vue.use(PageHeaderWrapper)
+Vue.use(SettingDrawer)
 
 window.umi_plugin_ant_themeVar = themePluginConfig.theme
 

src/BasicLayout.jsx

@@ -7,15 +7,18 @@ import Layout from 'ant-design-vue/es/layout'
 
 import { ContainerQuery } from 'vue-container-query'
 import { SiderMenuWrapper, GlobalFooter } from './components'
-import { getComponentFromProp, isFun } from './utils/util'
+import { contentWidthCheck, getComponentFromProp, isFun } from './utils/util'
 import { SiderMenuProps } from './components/SiderMenu'
 import HeaderView, { HeaderViewProps } from './Header'
 import WrapContent from './WrapContent'
 import ConfigProvider from './components/ConfigProvider'
+import PageHeaderWrapper from './components/PageHeaderWrapper'
 
 export const BasicLayoutProps = {
   ...SiderMenuProps,
   ...HeaderViewProps,
+  // 替换兼容 PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
+  contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
   locale: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('en-US'),
   breadcrumbRender: PropTypes.func,
   disableMobile: PropTypes.bool.def(false),
@@ -83,7 +86,6 @@ const BasicLayout = {
       mediaQuery,
       handleMediaQuery,
       handleCollapse,
-      contentWidth,
       siderWidth,
       fixSiderbar,
       i18nRender = defaultI18nRender
@@ -97,6 +99,9 @@ const BasicLayout = {
     const headerContentRender = getComponentFromProp(content, 'headerContentRender')
     const menuRender = getComponentFromProp(content, 'menuRender')
 
+    // 兼容 0.3.4~0.3.8
+    const contentWidth = contentWidthCheck(props.contentWidth)
+
     const isTopMenu = layout === 'topmenu'
     const hasSiderMenu = !isTopMenu
     // If it is a fix menu, calculate padding
@@ -104,6 +109,7 @@ const BasicLayout = {
     const hasLeftPadding = fixSiderbar && !isTopMenu && !isMobile
     const cdProps = {
       ...props,
+      contentWidth,
       hasSiderMenu,
       footerRender,
       menuHeaderRender,
@@ -163,4 +169,10 @@ const BasicLayout = {
   }
 }
 
+BasicLayout.install = function (Vue) {
+  Vue.component(PageHeaderWrapper.name, PageHeaderWrapper)
+  Vue.component('page-container', PageHeaderWrapper)
+  Vue.component('pro-layout', BasicLayout)
+}
+
 export default BasicLayout

src/components/PageHeaderWrapper/index.jsx

@@ -224,4 +224,9 @@ const PageHeaderWrapper = {
   },
 }
 
+PageHeaderWrapper.install = function (Vue) {
+  Vue.component(PageHeaderWrapper.name, PageHeaderWrapper)
+  Vue.component('page-container', PageHeaderWrapper)
+}
+
 export default PageHeaderWrapper

src/components/SettingDrawer/index.jsx

@@ -24,6 +24,8 @@ import Icon from 'ant-design-vue/es/icon'
 import 'ant-design-vue/es/alert/style'
 import Alert from 'ant-design-vue/es/alert'
 
+import antPortal from 'ant-design-vue/es/_util/portalDirective'
+
 import 'ant-design-vue/es/message/style'
 import message from 'ant-design-vue/es/message'
 
@@ -31,7 +33,7 @@ import BlockCheckbox from './BlockCheckbox'
 import ThemeColor from './ThemeColor'
 import LayoutSetting, { renderLayoutSettingItem } from './LayoutChange'
 import { updateTheme, updateColorWeak } from '../../utils/dynamicTheme'
-import { genStringToTheme } from '../../utils/util'
+import { contentWidthCheck, genStringToTheme } from '../../utils/util'
 import CopyToClipboard from 'vue-copy-to-clipboard'
 
 const baseClassName = 'ant-pro-setting-drawer'
@@ -152,7 +154,9 @@ export const settings = {
   primaryColor: PropTypes.string,
   layout: PropTypes.oneOf(['sidemenu', 'topmenu']),
   colorWeak: PropTypes.bool,
-  contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  // contentWidth: PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid'),
+  // 替换兼容 PropTypes.oneOf(['Fluid', 'Fixed']).def('Fluid')
+  contentWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('Fluid'),
   fixedHeader: PropTypes.bool,
   fixSiderbar: PropTypes.bool,
   hideHintAlert: PropTypes.bool.def(false),
@@ -188,7 +192,6 @@ const SettingDrawer = {
       layout = 'sidemenu',
       fixedHeader = false,
       fixSiderbar = false,
-      contentWidth,
       hideHintAlert,
       hideCopyButton,
       colorWeak
@@ -198,6 +201,9 @@ const SettingDrawer = {
     const themeList = getThemeList(i18n)
     const isTopMenu = layout === 'topmenu'
 
+    // 兼容 0.3.4~0.3.8
+    const contentWidth = contentWidthCheck(settings.contentWidth)
+
     const iconStyle = {
       color: '#fff',
       fontSize: 20
@@ -327,4 +333,9 @@ const SettingDrawer = {
   }
 }
 
+SettingDrawer.install = function (Vue) {
+  Vue.use(antPortal)
+  Vue.component(SettingDrawer.name, SettingDrawer)
+}
+
 export default SettingDrawer

src/utils/util.js

@@ -10,6 +10,13 @@ const isFun = (func) => {
   return typeof func === 'function'
 }
 
+// 兼容 0.3.4~0.3.8
+export const contentWidthCheck = (contentWidth) => {
+  return Object.prototype.toString.call(contentWidth) === '[object Boolean]'
+    ? contentWidth === true && 'Fixed' || 'Fluid'
+    : contentWidth
+}
+
 export const layoutContentWidth = (contentType) => {
   return contentType !== 'Fluid'
 }