sparkles: feat: add Editor Layout new Components

.github/workflows/release.yml

@@ -59,6 +59,9 @@ jobs:
       - name: Install deps
         run: pnpm install
 
+      - name: Pre Build
+        run: pnpm run build
+
       - name: release
         run: pnpm run release
         env:

CHANGELOG.md

@@ -90,7 +90,11 @@
 
 #### ✨ 新特性
 
-- Add max Height & Width control in DraggelPannel, update snapshot.
+- Add Editor Layout new Components, Change Name as EdiorLayout, merge master & update snapshot, update pannel defaultSize, update snapshot, update styles & props.
+
+#### 🐛 修复
+
+- Ci bulid fixed, merge main, release workflow update, revert workflow, test workflow, update styles.
 
 <br/>
 
@@ -99,8 +103,21 @@
 
 #### What's improved
 
-- Add max Height & Width control in DraggelPannel ([ceaec8b](https://github.com/ant-design/pro-editor/commit/ceaec8b))
-- Update snapshot ([abd1748](https://github.com/ant-design/pro-editor/commit/abd1748))
+- Add Editor Layout new Components ([927cc46](https://github.com/ant-design/pro-editor/commit/927cc46))
+- Change Name as EdiorLayout ([c1e4c00](https://github.com/ant-design/pro-editor/commit/c1e4c00))
+- Merge master & update snapshot ([fed6ff8](https://github.com/ant-design/pro-editor/commit/fed6ff8))
+- Update pannel defaultSize ([af323ec](https://github.com/ant-design/pro-editor/commit/af323ec))
+- Update snapshot ([5f77048](https://github.com/ant-design/pro-editor/commit/5f77048))
+- Update styles & props ([decb858](https://github.com/ant-design/pro-editor/commit/decb858))
+
+#### What's fixed
+
+- Ci bulid fixed ([24df343](https://github.com/ant-design/pro-editor/commit/24df343))
+- Merge main ([ae678e0](https://github.com/ant-design/pro-editor/commit/ae678e0))
+- Release workflow update ([59acc60](https://github.com/ant-design/pro-editor/commit/59acc60))
+- Revert workflow ([7785cc1](https://github.com/ant-design/pro-editor/commit/7785cc1))
+- Test workflow ([2905ee9](https://github.com/ant-design/pro-editor/commit/2905ee9))
+- Update styles ([241de5b](https://github.com/ant-design/pro-editor/commit/241de5b))
 
 </details>
 
@@ -110,13 +127,13 @@
 
 </div>
 
-### [Version&nbsp;0.29.2](https://github.com/ant-design/pro-editor/compare/v0.29.1...v0.29.2)
+## [Version&nbsp;0.30.0-rc.2](https://github.com/ant-design/pro-editor/compare/v0.30.0-rc.1...v0.30.0-rc.2)
 
-<sup>Released on **2023-12-04**</sup>
+<sup>Released on **2023-12-05**</sup>
 
 #### 🐛 修复
 
-- Add build into workflow, update test yml.
+- Ci bulid fixed, update styles.
 
 <br/>
 
@@ -125,8 +142,8 @@
 
 #### What's fixed
 
-- Add build into workflow ([9c97246](https://github.com/ant-design/pro-editor/commit/9c97246))
-- Update test yml ([d81d82e](https://github.com/ant-design/pro-editor/commit/d81d82e))
+- Ci bulid fixed ([24df343](https://github.com/ant-design/pro-editor/commit/24df343))
+- Update styles ([241de5b](https://github.com/ant-design/pro-editor/commit/241de5b))
 
 </details>
 
@@ -136,22 +153,35 @@
 
 </div>
 
-### [Version&nbsp;0.29.1](https://github.com/ant-design/pro-editor/compare/v0.29.0...v0.29.1)
+## [Version&nbsp;0.30.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.29.2...v0.30.0-rc.1)
 
-<sup>Released on **2023-12-01**</sup>
+<sup>Released on **2023-12-04**</sup>
+
+#### ✨ 新特性
+
+- Add Editor Layout new Components, update pannel defaultSize, update snapshot, update styles & props.
 
 #### 🐛 修复
 
-- Fix dependencies.
+- Merge main, revert workflow, test workflow.
 
 <br/>
 
 <details>
 <summary><kbd>Improvements and Fixes</kbd></summary>
 
+#### What's improved
+
+- Add Editor Layout new Components ([927cc46](https://github.com/ant-design/pro-editor/commit/927cc46))
+- Update pannel defaultSize ([af323ec](https://github.com/ant-design/pro-editor/commit/af323ec))
+- Update snapshot ([5f77048](https://github.com/ant-design/pro-editor/commit/5f77048))
+- Update styles & props ([decb858](https://github.com/ant-design/pro-editor/commit/decb858))
+
 #### What's fixed
 
-- Fix dependencies, closes [#112](https://github.com/ant-design/pro-editor/issues/112) ([efb4e46](https://github.com/ant-design/pro-editor/commit/efb4e46))
+- Merge main ([ae678e0](https://github.com/ant-design/pro-editor/commit/ae678e0))
+- Revert workflow ([7785cc1](https://github.com/ant-design/pro-editor/commit/7785cc1))
+- Test workflow ([2905ee9](https://github.com/ant-design/pro-editor/commit/2905ee9))
 
 </details>
 
@@ -161,17 +191,17 @@
 
 </div>
 
-## [Version&nbsp;0.29.0](https://github.com/ant-design/pro-editor/compare/v0.28.0...v0.29.0)
+## [Version&nbsp;0.29.0-rc.1](https://github.com/ant-design/pro-editor/compare/v0.28.0...v0.29.0-rc.1)
 
-<sup>Released on **2023-11-30**</sup>
+<sup>Released on **2023-12-04**</sup>
 
 #### ✨ 新特性
 
-- Sortablelist support renderHeader".
+- Add Editor Layout new Components, sortablelist support renderHeader", update pannel defaultSize, update snapshot.
 
 #### 🐛 修复
 
-- Workflow update.
+- Revert workflow, test workflow.
 
 <br/>
 
@@ -180,11 +210,15 @@
 
 #### What's improved
 
+- Add Editor Layout new Components ([927cc46](https://github.com/ant-design/pro-editor/commit/927cc46))
 - Sortablelist support renderHeader" ([53d75fd](https://github.com/ant-design/pro-editor/commit/53d75fd))
+- Update pannel defaultSize ([af323ec](https://github.com/ant-design/pro-editor/commit/af323ec))
+- Update snapshot ([5f77048](https://github.com/ant-design/pro-editor/commit/5f77048))
 
 #### What's fixed
 
-- Workflow update ([5325ef5](https://github.com/ant-design/pro-editor/commit/5325ef5))
+- Revert workflow ([7785cc1](https://github.com/ant-design/pro-editor/commit/7785cc1))
+- Test workflow ([2905ee9](https://github.com/ant-design/pro-editor/commit/2905ee9))
 
 </details>
 

src/DraggablePanel/style.ts

@@ -116,7 +116,6 @@ export const useStyle = createStyles(({ token, css, cx }, prefix: string) => {
     fixed: cx(
       `${prefix}-fixed`,
       css`
-        background: ${token.colorBgContainer};
         overflow: hidden;
       `,
     ),

src/Layout/components/HeaderAndFooter.tsx

@@ -0,0 +1,123 @@
+import ActionIcon from '@/ActionIcon';
+import { MenuUnfoldOutlined } from '@ant-design/icons';
+import { DropDownProps, Dropdown, Flex, FlexProps } from 'antd';
+import { ReactNode } from 'react';
+import { ThemeLayoutType } from '..';
+import { getPrefixCls } from '../../theme';
+import { useStyle } from './../style';
+
+enum typeEnum {
+  header = 'header',
+  footer = 'footer',
+}
+
+type iconDropdownType = {
+  icon?: ReactNode;
+  dropdown?: DropDownProps;
+  title?: ReactNode;
+  render?: (props: iconDropdownType, defalutDom?: ReactNode) => JSX.Element;
+};
+
+interface HeaderFooterSettings {
+  iconConfig?: iconDropdownType | false;
+  extra?: ReactNode;
+  flex?: FlexProps;
+  hide?: boolean;
+  render?: (props: HeaderFooterSettings) => JSX.Element;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: ReactNode;
+  type?: typeEnum | string;
+  themeType?: ThemeLayoutType;
+}
+
+const HeaderAndFooter = (props: HeaderFooterSettings) => {
+  const {
+    children,
+    render,
+    hide = false,
+    flex = {
+      justify: 'space-between',
+      align: 'center',
+      className: '',
+    },
+    type = 'header',
+    extra,
+    iconConfig = {
+      icon: <MenuUnfoldOutlined />,
+      dropdown: undefined,
+      title: '',
+      render,
+    },
+    themeType,
+    style = {},
+    className,
+  } = props || {};
+
+  const prefixCls = getPrefixCls('layout');
+
+  const { styles, cx } = useStyle({ prefixCls, themeType });
+
+  if (hide) {
+    return null;
+  }
+  if (render) {
+    return render(props);
+  }
+
+  const IconDom = () => {
+    if (iconConfig === false) return null;
+    const { icon, dropdown, title, render } = iconConfig || {};
+
+    if (!dropdown)
+      return (
+        <div className={styles.headerAndFooterIcon}>
+          <ActionIcon icon={icon} />
+          {title}
+        </div>
+      );
+
+    const DefalutIconDom = (
+      <>
+        <Dropdown
+          trigger={['click']}
+          placement={type === typeEnum.header ? 'bottomLeft' : 'topLeft'}
+          {...iconConfig.dropdown}
+        >
+          <ActionIcon icon={icon} />
+        </Dropdown>
+        {title}
+      </>
+    );
+
+    if (render) {
+      return render(iconConfig, DefalutIconDom);
+    }
+
+    return DefalutIconDom;
+  };
+
+  return (
+    <Flex
+      key={type === typeEnum.header ? 'editor-layout-header' : 'editor-layout-footer'}
+      {...flex}
+      className={cx(
+        type === typeEnum.header ? styles.header : styles.footer,
+        styles.flexContainer,
+        flex?.className,
+        className,
+      )}
+      style={style}
+    >
+      {/* 虽然是放在 flex 中，但实际上是 absoult 定位到最中间 */}
+      <div className={styles.headerAndFooterCenterChildren}>{children}</div>
+      <div className={styles.headerAndFooterIcon}>
+        <IconDom />
+      </div>
+      {extra && <div className={styles.headerAndFooterExtra}>{extra}</div>}
+    </Flex>
+  );
+};
+
+export { HeaderAndFooter };
+export type { HeaderFooterSettings, typeEnum };

src/Layout/components/LayoutTypeContainer.tsx

@@ -0,0 +1,96 @@
+import { Flex } from 'antd';
+import { ReactNode } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { LayoutTypeEnum, ThemeLayoutType } from '..';
+import { getPrefixCls } from '../../theme';
+import { useStyle } from './../style';
+
+type LayoutTypeContainerProps = {
+  pannels: ReactNode[];
+  headerandfooter: ReactNode[];
+  type: LayoutTypeEnum;
+  themeType: ThemeLayoutType;
+};
+
+const LayoutTypeContainer = (props: LayoutTypeContainerProps) => {
+  const { type, pannels, themeType, headerandfooter, ...rest } = props;
+  const prefixCls = getPrefixCls('layout');
+  const { styles } = useStyle({ prefixCls, themeType });
+
+  const [LeftPannelDom, RightPannelDom, BottomPannelDom, CenterPannelDom] = pannels;
+  const [HeaderDom, FooterDom] = headerandfooter;
+
+  console.log('type', type);
+
+  if (type === 'Left&Right') {
+    return (
+      <Flexbox className={styles.layout} {...rest}>
+        {HeaderDom}
+        <Flex className={styles.container}>
+          {LeftPannelDom}
+          <Flex vertical flex={1}>
+            {CenterPannelDom}
+            {BottomPannelDom}
+          </Flex>
+          {RightPannelDom}
+        </Flex>
+        {FooterDom}
+      </Flexbox>
+    );
+  }
+
+  if (type === 'LeftFull') {
+    return (
+      <Flexbox className={styles.layout} {...rest}>
+        {HeaderDom}
+        <Flex className={styles.container}>
+          {LeftPannelDom}
+          <Flex vertical flex={1}>
+            <Flex flex={1}>
+              {CenterPannelDom}
+              {RightPannelDom}
+            </Flex>
+            {BottomPannelDom}
+          </Flex>
+        </Flex>
+        {FooterDom}
+      </Flexbox>
+    );
+  }
+
+  if (type === 'RightFull') {
+    return (
+      <Flexbox className={styles.layout} {...rest}>
+        {HeaderDom}
+        <Flex className={styles.container}>
+          <Flex vertical flex={1}>
+            <Flex flex={1}>
+              {LeftPannelDom}
+              {CenterPannelDom}
+            </Flex>
+            {BottomPannelDom}
+          </Flex>
+          {RightPannelDom}
+        </Flex>
+        {FooterDom}
+      </Flexbox>
+    );
+  }
+
+  return (
+    <>
+      <Flexbox className={styles.layout} {...rest}>
+        {HeaderDom}
+        <Flex className={styles.container}>
+          {LeftPannelDom}
+          {CenterPannelDom}
+          {RightPannelDom}
+        </Flex>
+        {BottomPannelDom}
+        {FooterDom}
+      </Flexbox>
+    </>
+  );
+};
+
+export { LayoutTypeContainer };