页面的区域可以固定配置,而不是根据内容自动 (#2336)

src/locale/de-DE.ts

@@ -204,5 +204,8 @@ register('de-DE', {
   'Year.placeholder': 'Wählen Sie ein Jahr',
   'rotate': 'Drehen',
   'Editor.fullscreen': 'Schirmfüllend Modus',
-  'Editor.exitFullscreen': 'Zurücktreten Schirmfüllend Modus'
+  'Editor.exitFullscreen': 'Zurücktreten Schirmfüllend Modus',
+  'region.body': 'body region',
+  'region.toolbar': 'toolbar region',
+  'region.aside': 'aside region'
 });

src/locale/en-US.ts

@@ -204,5 +204,8 @@ register('en-US', {
   'Year.placeholder': 'Select a Year',
   'rotate': 'Rotate',
   'Editor.fullscreen': 'full screen',
-  'Editor.exitFullscreen': 'exit fullscreen mode'
+  'Editor.exitFullscreen': 'exit fullscreen mode',
+  'region.body': 'body region',
+  'region.toolbar': 'toolbar region',
+  'region.aside': 'aside region'
 });

src/locale/zh-CN.ts

@@ -208,5 +208,8 @@ register('zh-CN', {
   'Year.placeholder': '请选择年',
   'rotate': '旋转',
   'Editor.fullscreen': '全屏',
-  'Editor.exitFullscreen': '退出全屏'
+  'Editor.exitFullscreen': '退出全屏',
+  'region.body': '内容区',
+  'region.toolbar': '工具栏',
+  'region.aside': '边栏'
 });

src/renderers/Page.tsx

@@ -144,6 +144,12 @@ export interface PageSchema extends BaseSchema {
    * css 变量
    */
   cssVars?: any;
+
+  /**
+   * 默认不设置自动感觉内容来决定要不要展示这些区域
+   * 如果配置了，以配置为主。
+   */
+  regions?: Array<'aside' | 'body' | 'toolbar' | 'header'> | void;
 }
 
 export interface PageProps
@@ -443,7 +449,9 @@ export default class Page extends React.Component<PageProps> {
       store,
       initApi,
       env,
-      classnames: cx
+      classnames: cx,
+      regions,
+      translate: __
     } = this.props;
 
     const subProps = {
@@ -452,7 +460,9 @@ export default class Page extends React.Component<PageProps> {
     };
     let header, right;
 
-    if (title || subTitle) {
+    if (
+      Array.isArray(regions) ? ~regions.indexOf('header') : title || subTitle
+    ) {
       header = (
         <div className={cx(`Page-header`, headerClassName)}>
           {title ? (
@@ -480,10 +490,10 @@ export default class Page extends React.Component<PageProps> {
       );
     }
 
-    if (toolbar) {
+    if (Array.isArray(regions) ? ~regions.indexOf('toolbar') : toolbar) {
       right = (
         <div className={cx(`Page-toolbar`, toolbarClassName)}>
-          {render('toolbar', toolbar, subProps)}
+          {render('toolbar', toolbar || __('region.toolbar'), subProps)}
         </div>
       );
     }
@@ -513,7 +523,9 @@ export default class Page extends React.Component<PageProps> {
       classnames: cx,
       header,
       showErrorMsg,
-      initApi
+      initApi,
+      regions,
+      translate: __
     } = this.props;
 
     const subProps = {
@@ -523,7 +535,9 @@ export default class Page extends React.Component<PageProps> {
       loading: store.loading
     };
 
-    const hasAside = aside && (!Array.isArray(aside) || aside.length);
+    const hasAside = Array.isArray(regions)
+      ? ~regions.indexOf('aside')
+      : aside && (!Array.isArray(aside) || aside.length);
 
     let cssVarsContent = '';
     if (cssVars) {
@@ -565,7 +579,7 @@ export default class Page extends React.Component<PageProps> {
 
         {hasAside ? (
           <div className={cx(`Page-aside`, asideClassName)}>
-            {render('aside', aside as any, {
+            {render('aside', aside || __('region.aside'), {
               ...subProps,
               ...(typeof aside === 'string'
                 ? {
@@ -578,7 +592,6 @@ export default class Page extends React.Component<PageProps> {
         ) : null}
 
         <div className={cx('Page-content')}>
-          {header ? render('header', header, subProps) : null}
           <div className={cx('Page-main')}>
             {this.renderHeader()}
             <div className={cx(`Page-body`, bodyClassName)}>
@@ -594,7 +607,9 @@ export default class Page extends React.Component<PageProps> {
                 </Alert>
               ) : null}
 
-              {body ? render('body', body, subProps) : null}
+              {(Array.isArray(regions) ? ~regions.indexOf('body') : body)
+                ? render('body', body || __('region.body'), subProps)
+                : null}
             </div>
           </div>
         </div>