feat: update container assets

packages/gi-assets-basic/src/components/RichContainer/Component.tsx

@@ -0,0 +1,26 @@
+import { useContainer, useContext } from '@antv/gi-sdk';
+import React from 'react';
+import './index.less';
+
+const ConciseContainer = props => {
+  const { children } = props;
+  const context = useContext();
+  const { config, assets, HAS_GRAPH } = context;
+  const Containers = useContainer(context);
+
+  const [NavbarArea, ViewArea, DataArea, StylingArea, CanvasArea] = Containers;
+  console.log('containers', Containers);
+
+  return (
+    <div className="gi-rich-container">
+      <div className="gi-rich-container-navbar">{NavbarArea.children.map(item => item.component)}</div>
+      <div className="gi-rich-container-toolbar">,,,,,,</div>
+      <div className="gi-rich-container-content">
+        <div className="gi-rich-container-side"></div>
+        <div className="gi-rich-container-canvas">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ConciseContainer;

packages/gi-assets-basic/src/components/RichContainer/index.less

@@ -0,0 +1,43 @@
+@panel-width: 600px;
+.gi-rich-container {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: block;
+
+  .gi-rich-container-navbar {
+    position: relative;
+    height: 54px;
+    width: 100%;
+    background: green;
+  }
+  .gi-rich-container-toolbar {
+    position: relative;
+    height: 44px;
+    width: 100%;
+    background: #f3f5f9;
+    border-bottom: 1px solid #ddd;
+  }
+  .gi-rich-container-content {
+    position: absolute;
+    bottom: 0px;
+    top: 98px;
+    left: 0px;
+    right: 0px;
+    display: flex;
+    .gi-rich-container-side {
+      width: 400px;
+      height: 100%;
+      background: #f3f5f9;
+    }
+    .gi-rich-container-canvas {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: 400px;
+      right: 0px;
+    }
+  }
+}

packages/gi-assets-basic/src/components/ConciseContainer/info.ts → packages/gi-assets-basic/src/components/RichContainer/info.ts

@@ -1,7 +1,7 @@
 const info = {
-  id: 'ConciseContainer',
-  name: '极简布局',
-  desc: '极简布局',
+  id: 'RichContainer',
+  name: '中台布局',
+  desc: '中台布局',
   cover: 'http://xxx.jpg',
   category: 'system-interaction',
   icon: 'icon-home',

packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts

@@ -0,0 +1,88 @@
+const registerMeta = context => {
+  const { GIAC_CONTENT_ITEMS = [], GIAC_ITEMS = [] } = context;
+  return {
+    containers: [
+      {
+        id: 'navbar',
+        name: '顶部导航',
+        required: true,
+        GI_CONTAINER: {
+          title: '集成组件',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            mode: 'multiple',
+          },
+          enum: GIAC_ITEMS,
+          default: [],
+        },
+      },
+      {
+        id: 'view-mode',
+        name: '模式展示',
+        required: true,
+        GI_CONTAINER: {
+          title: '集成组件',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            mode: 'multiple',
+          },
+          enum: GIAC_CONTENT_ITEMS,
+          default: [],
+        },
+      },
+      {
+        id: 'data-query',
+        name: '数据查询',
+        required: true,
+        GI_CONTAINER: {
+          title: '集成组件',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            mode: 'multiple',
+          },
+          enum: GIAC_CONTENT_ITEMS,
+          default: [],
+        },
+      },
+      {
+        id: 'canvas-operator',
+        name: '画布操作',
+        required: true,
+        GI_CONTAINER: {
+          title: '集成组件',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            mode: 'multiple',
+          },
+          enum: GIAC_ITEMS,
+          default: [],
+        },
+      },
+      {
+        id: 'styling-setting',
+        name: '布局样式',
+        required: true,
+        GI_CONTAINER: {
+          title: '集成组件',
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            mode: 'multiple',
+          },
+          enum: GIAC_CONTENT_ITEMS,
+          default: [],
+        },
+      },
+    ],
+  };
+};
+export default registerMeta;

packages/gi-assets-basic/src/components/SideTabs.bak/CollapseContainer.tsx

@@ -0,0 +1,48 @@
+import { Handler } from '@antv/gi-common-components';
+import { utils } from '@antv/gi-sdk';
+import * as React from 'react';
+import type { ContainerProps } from './typing';
+
+const CollapseContainer: React.FunctionComponent<ContainerProps> = props => {
+  const { placement, offset, width, height, defaultVisible } = props;
+
+  const [state, setState] = React.useState({
+    visible: typeof defaultVisible === 'boolean' ? defaultVisible : true,
+  });
+
+  const handleToggle = () => {
+    setState(preState => {
+      return {
+        visible: !preState.visible,
+      };
+    });
+  };
+
+  const postionStyles = utils.getPositionStyles(placement, offset);
+
+  const baseStyle = {
+    ...postionStyles,
+    height,
+    width,
+    padding: '8px',
+    transition: 'all 0.3s ease',
+    overflow: 'visible',
+  };
+  const styles = state.visible ? baseStyle : { ...baseStyle, width: '0px', padding: '0' };
+
+  const { children } = props;
+  return (
+    <div style={styles}>
+      <Handler type={placement === 'LB' || placement === 'LT' ? 'left' : 'right'} handleClick={handleToggle} />
+      <div
+        style={{
+          overflowY: 'auto',
+          height: '100%',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+export default CollapseContainer;