feat: page 的 aside 支持配置 asideSticky 来控制是否固定, 默认开启 (#3787)

* feat: page 的 aside 支持配置 asideSticky 来控制是否固定, 默认开启

* 更新 snapshot

* merge 后少了逗号

__tests__/renderers/__snapshots__/Page.test.tsx.snap

@@ -93,11 +93,15 @@ exports[`Renderer:Page classNames 1`] = `
     className="cxd-Page-aside cxd-Page-aside--withWidth aside-class-name"
   >
     <div
-      className="cxd-TplField cxd-Page-asideTplWrapper"
+      className="cxd-Page-asideInner"
     >
-      <span>
+      <div
-        This is aside
+        className="cxd-TplField cxd-Page-asideTplWrapper"
-      </span>
+      >
+        <span>
+          This is aside
+        </span>
+      </div>
     </div>
   </div>
   <div

docs/zh-CN/components/page.md

@@ -247,6 +247,10 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
 
 配置写法和编写普通 css 的体验是一致的，可以使用任意 css 选择符及属性。
 
+## aside 位置固定
+
+通过配置 `asideSticky` 来开关，默认是开启状态。
+
 ## 属性表
 
 | 属性名              | 类型                                      | 默认值                                     | 说明                                                                                  |
@@ -259,6 +263,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
 | asideResizor        | `boolean`                                 |                                            | 页面的边栏区域宽度是否可调整                                                          |
 | asideMinWidth       | `number`                                  |                                            | 页面边栏区域的最小宽度                                                                |
 | asideMaxWidth       | `number`                                  |                                            | 页面边栏区域的最大宽度                                                                |
+| asideSticky         | `boolean`                                 | true                                       | 用来控制边栏固定与否                                                                  |
 | toolbar             | [SchemaNode](../../docs/types/schemanode) |                                            | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |
 | body                | [SchemaNode](../../docs/types/schemanode) |                                            | 往页面的内容区域加内容                                                                |
 | className           | `string`                                  |                                            | 外层 dom 类名                                                                         |

src/renderers/Page.tsx

@@ -92,6 +92,13 @@ export interface PageSchema extends BaseSchema {
    */
   asideResizor?: boolean;
 
+  /**
+   * 边栏内容是否粘住，即不跟随滚动。
+   *
+   * @default true
+   */
+  asideSticky?: boolean;
+
   /**
    * 边栏最小宽度
    */
@@ -228,6 +235,7 @@ export default class Page extends React.Component<PageProps> {
   startX: number;
   startWidth: number;
   codeWrap: HTMLElement;
+  asideInner = React.createRef<HTMLDivElement>();
 
   static defaultProps = {
     asideClassName: '',
@@ -237,6 +245,7 @@ export default class Page extends React.Component<PageProps> {
     // primaryField: 'id',
     toolbarClassName: '',
     messages: {},
+    asideSticky: true,
     pullRefresh: {
       disabled: true
     }
@@ -360,7 +369,8 @@ export default class Page extends React.Component<PageProps> {
   }
 
   componentDidMount() {
-    const {initApi, initFetch, initFetchOn, store, messages} = this.props;
+    const {initApi, initFetch, initFetchOn, store, messages, asideSticky} =
+      this.props;
 
     this.mounted = true;
 
@@ -372,6 +382,12 @@ export default class Page extends React.Component<PageProps> {
         })
         .then(this.initInterval);
     }
+
+    if (asideSticky && this.asideInner.current) {
+      const dom = this.asideInner.current!;
+      const rect = dom.getBoundingClientRect();
+      dom.style.cssText += `position: sticky; top: ${rect.top}px;`;
+    }
   }
 
   componentDidUpdate(prevProps: PageProps) {
@@ -783,15 +799,17 @@ export default class Page extends React.Component<PageProps> {
               asideClassName
             )}
           >
-            {render('aside', aside || '', {
+            <div className={cx(`Page-asideInner`)} ref={this.asideInner}>
-              ...subProps,
+              {render('aside', aside || '', {
-              ...(typeof aside === 'string'
+                ...subProps,
-                ? {
+                ...(typeof aside === 'string'
-                    inline: false,
+                  ? {
-                    className: `Page-asideTplWrapper`
+                      inline: false,
-                  }
+                      className: `Page-asideTplWrapper`
-                : null)
+                    }
-            })}
+                  : null)
+              })}
+            </div>
             {asideResizor ? (
               <div
                 onMouseDown={this.handleResizeMouseDown}