refactor: two column layout

packages/app/src/components/pages/AdminLoader/Page/index.tsx

@@ -47,10 +47,11 @@ export function Page(props: any) {
       </Helmet>
       <PageHeader title={data.title} ghost={false} {...restProps} />
       <div className={'page-content'}>
-        <Row className={'nb-row'} gutter={24}>
+        <div className={'noco-row'}>
           {views.map(view => {
             let viewName: string;
             let span = 24;
+            let float = 'left';
             if (typeof view === 'string') {
               viewName = view;
             }
@@ -61,9 +62,12 @@ export function Page(props: any) {
               } else if (view.width === '100%') {
                 span = 24;
               }
+              if (view.float == 'right') {
+                float = 'right';
+              }
             }
             return (
-              <Col style={{ marginBottom: 24 }} span={span}>
+              <div className={`noco-col noco-col-${span} float-${float}`}>
                 <View
                   wrapper={'card'}
                   currentRowId={currentRowId}
@@ -110,10 +114,10 @@ export function Page(props: any) {
                   }}
                   viewName={viewName}
                 />
-              </Col>
+              </div>
             );
           })}
-        </Row>
+        </div>
       </div>
     </div>
   );

packages/app/src/components/pages/AdminLoader/Page/style.less

@@ -22,3 +22,45 @@
     }
   }
 }
+
+.noco-row {
+  margin: 0 -12px;
+  &::after {
+    content: ' ';
+    clear: both;
+    display: block;
+  }
+  .noco-col {
+    margin-left: 12px;
+    margin-right: 12px;
+    margin-bottom: 24px;
+    width: calc(50% - 24px);
+    float: left;
+  }
+  .noco-col-24 {
+    width: calc(100% - 24px);
+  }
+  .float-left {
+    float: left;
+    clear: left;
+  }
+  .float-right {
+    float: right;
+    clear: right;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .page-content {
+    margin: 0;
+    margin-top: 1px;
+  }
+  .noco-row {
+    margin: 0;
+    .noco-col {
+      width: 100%;
+      margin: 0;
+      margin-bottom: 1px;
+    }
+  }
+}

packages/plugin-pages/src/collections/menus_views_v2.ts

@@ -66,6 +66,26 @@ export default {
         { label: '50%', value: '50%' },
         { label: '100%', value: '100%' },
       ],
+      component: {
+        type: 'radio',
+        'x-linkages': [
+          {
+            "type": "value:visible",
+            "target": "float",
+            "condition": "{{ $self.value && $self.value === '50%' }}"
+          },
+        ]
+      },
+    },
+    {
+      interface: 'radio',
+      type: 'string',
+      name: 'float',
+      title: '位置',
+      dataSource: [
+        { label: '左边', value: 'left' },
+        { label: '右边', value: 'right' },
+      ],
       component: {
         type: 'radio',
       },
@@ -227,7 +247,8 @@ export default {
       fields: [
         'view',
         'view.collection.title',
-        'width'
+        'width',
+        'float'
       ],
       detailsOpenMode: 'drawer', // window
       details: ['form'],
@@ -241,6 +262,7 @@ export default {
       fields: [
         'view',
         'width',
+        'float',
         'returnType',
         'redirect',
         'message',
@@ -264,6 +286,7 @@ export default {
       fields: [
         'view',
         'width',
+        'float',
         'returnType',
         'redirect',
         'message',