💚 fix: update styles

ant-design · Dec 5, 2023 · 241de5b · 241de5b
1 parent d698cce
commit 241de5b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 19 deletions.
diff --git a/src/Layout/index.tsx b/src/Layout/index.tsx
@@ -1,5 +1,5 @@
 import { DraggablePanel } from '@ant-design/pro-editor';
-import { FlexProps, TabsProps } from 'antd';
+import { Flex, FlexProps, TabsProps } from 'antd';
 import { Size } from 're-resizable';
 import { ReactNode } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
@@ -126,30 +126,51 @@ const BasicLayout = (props: LayoutProps) => {
     centerPannel,
   ].map(DraggablePanelRender);
 
-  const HeaderDom = (props: HeaderFooterSettings) => {
-    const { children, render } = props || {};
+  const [HeaderDom, FooterDom] = [header, footer].map((props, index) => {
+    const {
+      children,
+      render,
+      hide = false,
+      flex = {
+        justify: 'space-between',
+        align: 'center',
+        className: '',
+      },
+    } = props || {};
+    if (hide) {
+      return <></>;
+    }
     if (render) {
       return render(props);
     }
-    return <div className={styles.header}>{children}</div>;
-  };
-
-  const FooterDom = (props: HeaderFooterSettings) => {
-    const { children } = props || {};
-    return <div className={styles.footer}>{children}</div>;
-  };
+    return (
+      <Flex
+        key={index === 0 ? 'editor-layout-header' : 'editor-layout-footer'}
+        {...flex}
+        className={cx(
+          index === 0 ? styles.header : styles.footer,
+          styles.flexContainer,
+          flex?.className,
+        )}
+      >
+        <div>Icon</div>
+        {children}
+        <div>Extra</div>
+      </Flex>
+    );
+  });
 
   return (
     <>
       <Flexbox className={styles.layout} {...rest}>
-        <HeaderDom />
+        {HeaderDom}
         <div className={styles.container}>
           {LeftPannelDom}
           {CenterPannelDom}
           {RightPannelDom}
         </div>
         {BottomPannelDom}
-        <FooterDom />
+        {FooterDom}
       </Flexbox>
     </>
   );

diff --git a/src/Layout/style.ts b/src/Layout/style.ts
@@ -23,27 +23,34 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
         min-height: 48px;
         border-radius: ${token.borderRadius}px;
         background-color: ${token.colorFillQuaternary};
-        margin: ${token.margin / 4}px;
+        margin: ${token.margin / 4 + 2}px;
+        margin-bottom: 0;
       `,
     ),
     footer: cx(
       `${prefixCls}-footer`,
       css`
         height: 28px;
-        width: 100%;
-        margin: ${token.margin / 4}px;
+        margin: ${token.margin / 4 + 2}px;
+        border-radius: ${token.borderRadius}px;
         background-color: ${token.colorFillQuaternary};
       `,
     ),
 
+    flexContainer: cx(
+      `${prefixCls}-flex-container`,
+      css`
+        padding: ${token.margin / 2 + 2}px;
+      `,
+    ),
+
     centerPannel: cx(
       `${prefixCls}-center-pannel`,
       css`
         flex: 1;
-
         .${prefixCls}-pannel {
-          height: calc(100% - ${token.margin / 2 + 1}px);
-          width: calc(100% - ${token.margin / 2 - 2}px);
+          height: calc(100% - ${token.margin / 2 - 2}px - ${token.margin + 4}px);
+          // width: calc(100% - ${token.margin / 2 - 2}px - ${token.margin + 4}px);
           margin: ${token.margin / 4 + 2}px ${token.margin / 4 - 1}px;
         }
       `,
@@ -62,7 +69,8 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
         border-radius: ${token.borderRadius}px;
         background-color: ${token.colorFillQuaternary};
         margin: ${token.margin / 4 + 2}px;
-        height: calc(100% - ${token.margin / 2 + 1}px);
+        height: calc(100% - ${token.margin / 4}px - ${token.margin + 4}px);
+        padding: ${token.margin / 2 + 2}px;
       `,
     ),