feat: page侧栏支持左右位置

baidu · Oct 22, 2024 · efde130 · efde130
1 parent 7be22e4
commit efde130
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 4 deletions.
diff --git a/docs/zh-CN/components/page.md b/docs/zh-CN/components/page.md
@@ -251,6 +251,30 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
 
 通过配置 `asideSticky` 来开关，默认是开启状态。
 
+## aside 展示位置
+
+通过配置 `asidePosition`，可以控制侧边栏的展示位置。
+
+```schema
+{
+  "type": "page",
+  "asideResizor": true,
+  "asidePosition": "right",
+  "aside": [
+    {
+      "type": "tpl",
+      "tpl": "这是侧边栏部分"
+    }
+  ],
+  "body": [
+    {
+      "type": "tpl",
+      "tpl": "这是内容区"
+    }
+  ]
+}
+```
+
 ## 属性表
 
 | 属性名              | 类型                                      | 默认值                                     | 说明                                                                                  |
@@ -264,6 +288,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
 | asideMinWidth       | `number`                                  |                                            | 页面边栏区域的最小宽度                                                                |
 | asideMaxWidth       | `number`                                  |                                            | 页面边栏区域的最大宽度                                                                |
 | asideSticky         | `boolean`                                 | true                                       | 用来控制边栏固定与否                                                                  |
+| asidePosition       | `"left" \| "right"`                       | `"left"`                                   | 页面边栏区域的位置                                                                    |
 | toolbar             | [SchemaNode](../../docs/types/schemanode) |                                            | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |
 | body                | [SchemaNode](../../docs/types/schemanode) |                                            | 往页面的内容区域加内容                                                                |
 | className           | `string`                                  |                                            | 外层 dom 类名                                                                         |

diff --git a/packages/amis-editor/src/plugin/Page.tsx b/packages/amis-editor/src/plugin/Page.tsx
@@ -222,6 +222,24 @@ export class PagePlugin extends BasePlugin {
                     inputClassName: 'is-inline',
                     pipeIn: defaultValue(true),
                     hiddenOn: 'this.regions && !this.regions.includes("aside")'
+                  },
+                  {
+                    type: 'button-group-select',
+                    name: 'asidePosition',
+                    size: 'sm',
+                    label: '边栏位置',
+                    pipeIn: defaultValue('left'),
+                    options: [
+                      {
+                        label: '左',
+                        value: 'left'
+                      },
+                      {
+                        label: '右',
+                        value: 'right'
+                      }
+                    ],
+                    hiddenOn: 'this.regions && !this.regions.includes("aside")'
                   }
                 ]
               },

diff --git a/packages/amis-ui/scss/components/_page.scss b/packages/amis-ui/scss/components/_page.scss
@@ -144,6 +144,21 @@
     }
   }
 
+  // 右侧侧边栏时，调整侧边栏相关的样式
+  .#{$ns}Page--rightAside {
+    flex-direction: row-reverse;
+
+    > .#{$ns}Page-aside {
+      border-left: var(--borderWidth) solid var(--borderColor);
+      border-right: unset;
+
+      > .#{$ns}Page-asideResizor {
+        left: px2rem(-6px);
+        right: unset;
+      }
+    }
+  }
+
   .#{$ns}Page--asideSticky {
     > .#{$ns}Page-aside {
       position: sticky;

diff --git a/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -124,7 +124,7 @@ exports[`Renderer:Page 1`] = `
 exports[`Renderer:Page classNames 1`] = `
 <div>
   <div
-    class="cxd-Page cxd-Page--withSidebar cxd-Page--asideSticky"
+    class="cxd-Page cxd-Page--withSidebar cxd-Page--asideSticky cxd-Page--leftAside"
   >
     <div
       class="cxd-Page-aside cxd-Page-aside--withWidth aside-class-name"

diff --git a/packages/amis/src/renderers/Page.tsx b/packages/amis/src/renderers/Page.tsx
@@ -107,6 +107,13 @@ export interface PageSchema extends BaseSchema, SpinnerExtraProps {
    */
   asideSticky?: boolean;
 
+  /**
+   * 边栏位置
+   *
+   * @default 'left'
+   */
+  asidePosition?: 'left' | 'right';
+
   /**
    * 边栏最小宽度
    */
@@ -253,6 +260,7 @@ export default class Page extends React.Component<PageProps> {
     toolbarClassName: '',
     messages: {},
     asideSticky: true,
+    asidePosition: 'left',
     pullRefresh: {
       disabled: true
     }
@@ -666,9 +674,14 @@ export default class Page extends React.Component<PageProps> {
 
   @autobind
   handleResizeMouseMove(e: MouseEvent) {
-    const {asideMinWidth = 160, asideMaxWidth = 350} = this.props;
+    const {
+      asideMinWidth = 160,
+      asideMaxWidth = 350,
+      asidePosition
+    } = this.props;
     const dx = e.clientX - this.startX;
-    const mx = this.startWidth + dx;
+    const mx =
+      asidePosition === 'right' ? this.startWidth - dx : this.startWidth + dx;
     const width = Math.min(Math.max(mx, asideMinWidth), asideMaxWidth);
     this.codeWrap.style.cssText += `width: ${width}px`;
   }
@@ -994,7 +1007,8 @@ export default class Page extends React.Component<PageProps> {
       id,
       wrapperCustomStyle,
       env,
-      themeCss
+      themeCss,
+      asidePosition
     } = this.props;
 
     const subProps = {
@@ -1018,6 +1032,7 @@ export default class Page extends React.Component<PageProps> {
           `Page`,
           hasAside ? `Page--withSidebar` : '',
           hasAside && asideSticky ? `Page--asideSticky` : '',
+          hasAside && asidePosition ? `Page--${asidePosition}Aside` : '',
           className,
           setThemeClassName({
             name: 'baseControlClassName',