make setting names easy to understand

src/components/PageHeaderWrapper/GridContent.js

@@ -6,7 +6,7 @@ class GridContent extends PureComponent {
   render() {
     const { grid, children } = this.props;
     let className = `${styles.main}`;
-    if (grid === 'Wide') {
+    if (grid === 'Fixed') {
       className = `${styles.main} ${styles.wide}`;
     }
     return <div className={className}>{children}</div>;

src/components/PageHeaderWrapper/index.js

@@ -13,7 +13,7 @@ const PageHeaderWrapper = ({ children, grid, wrapperClassName, top, ...restProps
     <MenuContext.Consumer>
       {value => (
         <PageHeader
-          wide={grid === 'Wide'}
+          wide={grid === 'Fixed'}
           home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
           {...value}
           key="pageheader"

src/components/SettingDrawer/index.js

@@ -3,6 +3,7 @@ import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert } f
 import { formatMessage } from 'umi/locale';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { connect } from 'dva';
+import omit from 'omit.js';
 import styles from './index.less';
 import ThemeColor from './ThemeColor';
 import BlockChecbox from './BlockChecbox';
@@ -39,8 +40,8 @@ class SettingDrawer extends PureComponent {
             onSelect={value => this.changeSetting('grid', value)}
             style={{ width: 80 }}
           >
-            <Select.Option value="Wide">
-              {formatMessage({ id: 'app.setting.gridmode.wide' })}
+            <Select.Option value="Fixed">
+              {formatMessage({ id: 'app.setting.gridmode.fixed' })}
             </Select.Option>
             <Select.Option value="Fluid">
               {formatMessage({ id: 'app.setting.gridmode.fluid' })}
@@ -88,7 +89,7 @@ class SettingDrawer extends PureComponent {
     const nextState = { ...setting };
     nextState[key] = value;
     if (key === 'layout') {
-      nextState.grid = value === 'topmenu' ? 'Wide' : 'Fluid';
+      nextState.grid = value === 'topmenu' ? 'Fixed' : 'Fluid';
     } else if (key === 'fixedHeader' && !value) {
       nextState.autoHideHeader = false;
     }
@@ -198,7 +199,7 @@ class SettingDrawer extends PureComponent {
           </Body>
           <Divider />
           <CopyToClipboard
-            text={JSON.stringify(setting)}
+            text={JSON.stringify(omit(setting, ['colorWeak']), null, 2)}
             onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
           >
             <Button block icon="copy">

src/components/TopNavHeader/index.js

@@ -9,13 +9,13 @@ export default class TopNavHeader extends PureComponent {
     super(props);
 
     this.state = {
-      maxWidth: (props.grid === 'Wide' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+      maxWidth: (props.grid === 'Fixed' ? 1200 : window.innerWidth) - 324 - 165 - 4,
     };
   }
 
   static getDerivedStateFromProps(props) {
     return {
-      maxWidth: (props.grid === 'Wide' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+      maxWidth: (props.grid === 'Fixed' ? 1200 : window.innerWidth) - 324 - 165 - 4,
     };
   }
 
@@ -28,7 +28,7 @@ export default class TopNavHeader extends PureComponent {
           ref={ref => {
             this.maim = ref;
           }}
-          className={`${styles.main} ${grid === 'Wide' ? styles.wide : ''}`}
+          className={`${styles.main} ${grid === 'Fixed' ? styles.wide : ''}`}
         >
           <div className={styles.left}>
             <div className={styles.logo} key="logo" id="logo">

src/defaultSettings.js

@@ -1,10 +1,9 @@
 module.exports = {
-  navTheme: 'dark',
-  primaryColor: '#1890FF',
-  layout: 'sidemenu',
-  grid: 'Fluid',
-  fixedHeader: false,
-  autoHideHeader: false,
-  fixSiderbar: false,
-  colorWeak: false,
+  navTheme: 'dark', // theme for nav menu
+  primaryColor: '#1890FF', // 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
+  autoHideHeader: false, // auto hide header
+  fixSiderbar: false, // sticky siderbar
 };

src/locales/en-US.js

@@ -156,9 +156,9 @@ export default {
   'app.result.success.btn-project': 'View project',
   'app.result.success.btn-print': 'Print',
   'app.setting.pagestyle': 'Page style setting',
-  'app.setting.gridmode': 'Grid Mode',
-  'app.setting.gridmode.wide': 'Wide',
-  'app.setting.gridmode.fluid': 'Fluid',
+  'app.setting.content-width': 'Content Width',
+  'app.setting.content-width.fixed': 'Fixed',
+  'app.setting.content-width.fluid': 'Fluid',
   'app.setting.themecolor': 'Theme Color',
   'app.setting.navigationmode': 'Navigation Mode',
   'app.setting.fixedheader': 'Fixed Header',

src/locales/zh-CN.js

@@ -151,10 +151,10 @@ export default {
   'app.result.success.btn-return': '返回列表',
   'app.result.success.btn-project': '查看项目',
   'app.result.success.btn-print': '打印',
-  'app.setting.pagestyle': '整理风格设置',
-  'app.setting.gridmode': '栅格模式',
-  'app.setting.gridmode.wide': '定宽',
-  'app.setting.gridmode.fluid': '流式',
+  'app.setting.pagestyle': '整体风格设置',
+  'app.setting.content-width': '内容区域宽度',
+  'app.setting.content-width.fixed': '定宽',
+  'app.setting.content-width.fluid': '流式',
   'app.setting.themecolor': '主题色',
   'app.setting.navigationmode': '导航模式',
   'app.setting.fixedheader': '固定 Header',