@creekjs/web-components 1.0.3 → 1.0.5

package/dist/creek-table/SearchTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/creek-table/SearchTable.tsx"],
-  "sourcesContent": ["import { ParamsType, ProTable } from '@ant-design/pro-components';\nimport { createStyles } from 'antd-style';\nimport classnames from 'classnames';\nimport _ from 'lodash';\nimport { useRef } from 'react';\n\nimport { useAutoWidthColumns } from './hooks';\nimport { TableOptionRender } from './TableOptionRender';\nimport { TableViewContent } from './TableViewContent';\nimport { toolBarRender } from './toolBarRender';\nimport { CreekTableProps } from './type';\n\nconst useStyles = createStyles(({ prefixCls }) => {\n  return {\n    'creek-table-container': {\n      [`.${prefixCls}-pagination`]: {\n        [`.${prefixCls}-pagination-total-text`]: {\n          flex: `1`,\n        },\n      },\n    },\n  };\n});\n\n// 独立的 ProTable 组件\nexport const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n  const {\n    columns,\n    params,\n    prefixCls = 'ant',\n    autoAddFilterForColumn = true,\n    className,\n    optionsRender,\n    tableViewRender,\n    pagination,\n    pageFixedBottom = true,\n    pageFixedBottomConfig,\n    ...restProps\n  } = props;\n\n  const proTableRef = useRef<HTMLDivElement>(null);\n\n  // // 使用自定义 hook 处理工具栏的自适应功能\n  // const { shouldCollapse } = useAdaptiveToolBar({\n  //   containerRef: proTableRef,\n  //   prefixCls,\n  // });\n\n  const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns(columns, proTableRef);\n\n  const { styles } = useStyles();\n\n  return (\n    <div ref={proTableRef}>\n      <ProTable<T, U, ValueType>\n        {...restProps}\n        className={classnames(styles['creek-table-container'], className)}\n        columns={adaptiveColumns}\n        scroll={{\n          x: totalWidth,\n          ...restProps.scroll,\n        }}\n        toolbar={{\n          ...restProps.toolbar,\n        }}\n        pagination={{\n          showTotal: (total) => <span>共 {total} 条</span>,\n          showSizeChanger: true,\n          ...pagination,\n        }}\n        optionsRender={(defaultProps, dom) => {\n          return _.isFunction(optionsRender)\n            ? optionsRender(defaultProps, dom)\n            : restProps?.options\n              ? [<TableOptionRender key=\"option\" defaultDom={dom} importConfig={restProps?.options?.importConfig} exportConfig={restProps?.options?.exportConfig} />]\n              : [];\n        }}\n        toolBarRender={() => {\n          return toolBarRender({  　shouldCollapse: false, restProps });\n        }}\n        // 在表格内容区上方显示筛选条件\n        tableViewRender={(defaultProps, defaultDom) => {\n          return _.isFunction(tableViewRender) ? (\n            <>{tableViewRender(defaultProps, defaultDom)}</>\n          ) : (\n            <TableViewContent<T, U, ValueType> pageFixedBottom={pageFixedBottom} pageFixedBottomConfig={pageFixedBottomConfig} prefixCls={prefixCls}>\n              {defaultDom}\n            </TableViewContent>\n          );\n        }}\n      />\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAqC;AACrC,wBAA6B;AAC7B,wBAAuB;AACvB,oBAAc;AACd,mBAAuB;AAEvB,mBAAoC;AACpC,+BAAkC;AAClC,8BAAiC;AACjC,2BAA8B;AAyDE;AAtDhC,IAAM,gBAAY,gCAAa,CAAC,EAAE,UAAU,MAAM;AAChD,SAAO;AAAA,IACL,yBAAyB;AAAA,MACvB,CAAC,IAAI,sBAAsB,GAAG;AAAA,QAC5B,CAAC,IAAI,iCAAiC,GAAG;AAAA,UACvC,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAGM,IAAM,iBAAiB,CAAiE,UAA4C;AACzI,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,kBAAc,qBAAuB,IAAI;AAQ/C,QAAM,EAAE,SAAS,iBAAiB,WAAW,QAAI,kCAAoB,SAAS,WAAW;AAEzF,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,SACE,4CAAC,SAAI,KAAK,aACR;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,kBAAAA,SAAW,OAAO,uBAAuB,GAAG,SAAS;AAAA,MAChE,SAAS;AAAA,MACT,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG,UAAU;AAAA,MACf;AAAA,MACA,SAAS;AAAA,QACP,GAAG,UAAU;AAAA,MACf;AAAA,MACA,YAAY;AAAA,QACV,WAAW,CAAC,UAAU,6CAAC,UAAK;AAAA;AAAA,UAAG;AAAA,UAAM;AAAA,WAAE;AAAA,QACvC,iBAAiB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA,MACA,eAAe,CAAC,cAAc,QAAQ;AAtE9C;AAuEU,eAAO,cAAAC,QAAE,WAAW,aAAa,IAC7B,cAAc,cAAc,GAAG,KAC/B,uCAAW,WACT,CAAC,4CAAC,8CAA+B,YAAY,KAAK,eAAc,4CAAW,YAAX,mBAAoB,cAAc,eAAc,4CAAW,YAAX,mBAAoB,gBAA5G,QAA0H,CAAE,IACpJ,CAAC;AAAA,MACT;AAAA,MACA,eAAe,MAAM;AACnB,mBAAO,oCAAc,EAAI,gBAAgB,OAAO,UAAU,CAAC;AAAA,MAC7D;AAAA,MAEA,iBAAiB,CAAC,cAAc,eAAe;AAC7C,eAAO,cAAAA,QAAE,WAAW,eAAe,IACjC,2EAAG,0BAAgB,cAAc,UAAU,GAAE,IAE7C,4CAAC,4CAAkC,iBAAkC,uBAA8C,WAChH,sBACH;AAAA,MAEJ;AAAA;AAAA,EACF,GACF;AAEJ;",
-  "names": ["classnames", "_"]
+  "sourcesContent": ["import { ParamsType, ProTable } from '@ant-design/pro-components';\nimport { theme } from 'antd';\nimport { createStyles } from 'antd-style';\nimport classnames from 'classnames';\nimport _ from 'lodash';\nimport { useRef } from 'react';\n\nimport { useAutoWidthColumns, useTableScrollHeight } from './hooks';\nimport { TableOptionRender } from './TableOptionRender';\nimport { toolBarRender } from './toolBarRender';\nimport { CreekTableProps } from './type';\n\nconst useStyles = createStyles(({ css, token }, { scrollY, prefixCls }: { scrollY?: number | string; prefixCls: string }) => {\n  return {\n    'creek-table-container': css`\n      .${prefixCls}-table-body {\n        overflow-y: auto !important;\n        min-height: ${typeof scrollY === 'number' ? `${scrollY}px` : (scrollY ?? 'auto')};\n\n        /* Firefox 滚动条样式 */\n        scrollbar-width: thin;\n        scrollbar-color: ${token.colorFillSecondary} transparent;\n      }\n\n      /* Webkit (Chrome, Safari, Edge) 滚动条样式 */\n      & *::-webkit-scrollbar {\n        width: 6px !important;\n        height: 6px !important;\n        background-color: transparent !important;\n      }\n\n      & *::-webkit-scrollbar-thumb {\n        background-color: ${token.colorFillSecondary} !important;\n        border-radius: 3px !important;\n        transition: all 0.3s;\n      }\n\n      & *::-webkit-scrollbar-thumb:hover {\n        background-color: ${token.colorFill} !important;\n      }\n\n      & *::-webkit-scrollbar-track {\n        background-color: transparent !important;\n      }\n\n      .${prefixCls}-pagination {\n        .${prefixCls}-pagination-total-text {\n          flex: 1;\n        }\n      }\n    `,\n  };\n});\n\n// 独立的 ProTable 组件\nexport const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n  const { columns, prefixCls = 'ant', autoAddFilterForColumn = true, className, optionsRender, tableViewRender, pagination, pageFixedBottom = true, pageFixedBottomConfig, ...restProps } = props;\n\n  const proTableRef = useRef<HTMLDivElement>(null);\n\n  const { token } = theme.useToken();\n\n  // // 使用自定义 hook 处理工具栏的自适应功能\n  // const { shouldCollapse } = useAdaptiveToolBar({\n  //   containerRef: proTableRef,\n  //   prefixCls,\n  // });ƒ\n\n  const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns(columns, proTableRef);\n\n  const scrollY = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, token.paddingContentVerticalLG, pageFixedBottomConfig?.bottomFix || token.padding);\n\n  const { styles } = useStyles({ scrollY, prefixCls });\n\n  console.log('scrollY', scrollY);\n\n  return (\n    <div ref={proTableRef}>\n      <ProTable<T, U, ValueType>\n        {...props}\n        className={classnames(styles['creek-table-container'], className)}\n        columns={adaptiveColumns}\n        scroll={{\n          x: totalWidth,\n          y: scrollY ?? restProps.scroll?.y,\n        }}\n        toolbar={{\n          ...restProps.toolbar,\n        }}\n        optionsRender={(defaultProps, dom) => {\n          return _.isFunction(optionsRender)\n            ? optionsRender(defaultProps, dom)\n            : restProps?.options\n              ? [<TableOptionRender key=\"option\" defaultDom={dom} importConfig={restProps?.options?.importConfig} exportConfig={restProps?.options?.exportConfig} />]\n              : [];\n        }}\n        toolBarRender={(...args) => {\n          return toolBarRender({ shouldCollapse: false, restProps, args });\n        }}\n        // 在表格内容区上方显示筛选条件\n        tableViewRender={(defaultProps, defaultDom) => {\n          return _.isFunction(tableViewRender) ? <>{tableViewRender(defaultProps, defaultDom)}</> : defaultDom;\n        }}\n      />\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAqC;AACrC,kBAAsB;AACtB,wBAA6B;AAC7B,wBAAuB;AACvB,oBAAc;AACd,mBAAuB;AAEvB,mBAA0D;AAC1D,+BAAkC;AAClC,2BAA8B;AAoFb;AAjFjB,IAAM,gBAAY,gCAAa,CAAC,EAAE,KAAK,MAAM,GAAG,EAAE,SAAS,UAAU,MAAwD;AAC3H,SAAO;AAAA,IACL,yBAAyB;AAAA,SACpB;AAAA;AAAA,sBAEa,OAAO,YAAY,WAAW,GAAG,cAAe,WAAW;AAAA;AAAA;AAAA;AAAA,2BAItD,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAWL,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAMN,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOzB;AAAA,WACE;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF,CAAC;AAGM,IAAM,iBAAiB,CAAiE,UAA4C;AAvD3I;AAwDE,QAAM,EAAE,SAAS,YAAY,OAAO,yBAAyB,MAAM,WAAW,eAAe,iBAAiB,YAAY,kBAAkB,MAAM,uBAAuB,GAAG,UAAU,IAAI;AAE1L,QAAM,kBAAc,qBAAuB,IAAI;AAE/C,QAAM,EAAE,MAAM,IAAI,kBAAM,SAAS;AAQjC,QAAM,EAAE,SAAS,iBAAiB,WAAW,QAAI,kCAAoB,SAAS,WAAW;AAEzF,QAAM,cAAU,mCAAqB,WAAW,aAAa,iBAAiB,MAAM,2BAA0B,+DAAuB,cAAa,MAAM,OAAO;AAE/J,QAAM,EAAE,OAAO,IAAI,UAAU,EAAE,SAAS,UAAU,CAAC;AAEnD,UAAQ,IAAI,WAAW,OAAO;AAE9B,SACE,4CAAC,SAAI,KAAK,aACR;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,kBAAAA,SAAW,OAAO,uBAAuB,GAAG,SAAS;AAAA,MAChE,SAAS;AAAA,MACT,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG,aAAW,eAAU,WAAV,mBAAkB;AAAA,MAClC;AAAA,MACA,SAAS;AAAA,QACP,GAAG,UAAU;AAAA,MACf;AAAA,MACA,eAAe,CAAC,cAAc,QAAQ;AAzF9C,YAAAC,KAAA;AA0FU,eAAO,cAAAC,QAAE,WAAW,aAAa,IAC7B,cAAc,cAAc,GAAG,KAC/B,uCAAW,WACT,CAAC,4CAAC,8CAA+B,YAAY,KAAK,eAAcD,MAAA,uCAAW,YAAX,gBAAAA,IAAoB,cAAc,eAAc,4CAAW,YAAX,mBAAoB,gBAA5G,QAA0H,CAAE,IACpJ,CAAC;AAAA,MACT;AAAA,MACA,eAAe,IAAI,SAAS;AAC1B,mBAAO,oCAAc,EAAE,gBAAgB,OAAO,WAAW,KAAK,CAAC;AAAA,MACjE;AAAA,MAEA,iBAAiB,CAAC,cAAc,eAAe;AAC7C,eAAO,cAAAC,QAAE,WAAW,eAAe,IAAI,2EAAG,0BAAgB,cAAc,UAAU,GAAE,IAAM;AAAA,MAC5F;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "names": ["classnames", "_a", "_"]
 }

package/dist/creek-table/TableOptionRender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOptionRender.d.ts","sourceRoot":"","sources":["../../src/creek-table/TableOptionRender.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAIxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAa5C,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,UAAU,EAAE,SAAS,GAAG,MAAM,IAAI;IACnG,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,0EAA2E,uBAAuB,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,4CAgC/I,CAAC"}

package/dist/creek-table/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useAdaptiveToolBar';
 export * from './useAutoWidthColumns';
 export * from './useElementDistance';
+export * from './useTableScrollHeight';

package/dist/creek-table/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}

package/dist/creek-table/hooks/index.js

@@ -19,10 +19,12 @@ module.exports = __toCommonJS(hooks_exports);
 __reExport(hooks_exports, require("./useAdaptiveToolBar"), module.exports);
 __reExport(hooks_exports, require("./useAutoWidthColumns"), module.exports);
 __reExport(hooks_exports, require("./useElementDistance"), module.exports);
+__reExport(hooks_exports, require("./useTableScrollHeight"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./useAdaptiveToolBar"),
   ...require("./useAutoWidthColumns"),
-  ...require("./useElementDistance")
+  ...require("./useElementDistance"),
+  ...require("./useTableScrollHeight")
 });
 //# sourceMappingURL=index.js.map

package/dist/creek-table/hooks/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/creek-table/hooks/index.ts"],
-  "sourcesContent": ["export * from './useAdaptiveToolBar';\nexport * from './useAutoWidthColumns';\nexport * from './useElementDistance';\n\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,iCAAd;AACA,0BAAc,kCADd;AAEA,0BAAc,iCAFd;",
+  "sourcesContent": ["export * from './useAdaptiveToolBar';\nexport * from './useAutoWidthColumns';\nexport * from './useElementDistance';\nexport * from './useTableScrollHeight';\n\n\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,iCAAd;AACA,0BAAc,kCADd;AAEA,0BAAc,iCAFd;AAGA,0BAAc,mCAHd;",
   "names": []
 }

package/dist/creek-table/hooks/useAdaptiveToolBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAdaptiveToolBar.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/useAdaptiveToolBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA+B,MAAM,OAAO,CAAC;AAGtE,eAAO,MAAM,kBAAkB,YAAa;IAC1C,YAAY,EAAE,iBAAiB,WAAW,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;CAoCA,CAAC"}

package/dist/creek-table/hooks/useAutoWidthColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoWidthColumns.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/useAutoWidthColumns.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AA4ExE,eAAO,MAAM,mBAAmB,0BACrB,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,YACrC,UAAU,cAAc,CAAC;aACvB,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;CAiInF,CAAC"}

package/dist/creek-table/hooks/useElementDistance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementDistance.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/useElementDistance.tsx"],"names":[],"mappings":";AAGA,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;AAO/C,UAAU,QAAQ;IAChB,CAAC,EAAE,MAAM,CAAC;CACX;AAeD,eAAO,MAAM,kBAAkB,wDAAuD,QAAQ,GAAG,IAoChG,CAAC"}

package/dist/creek-table/hooks/useTableScrollHeight.d.ts

@@ -0,0 +1 @@
+export declare const useTableScrollHeight: (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom?: boolean, contentPadding?: number, offsetBottom?: number) => number | undefined;

package/dist/creek-table/hooks/useTableScrollHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableScrollHeight.d.ts","sourceRoot":"","sources":["../../../src/creek-table/hooks/useTableScrollHeight.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,cAAe,MAAM,YAAY,MAAM,SAAS,CAAC,cAAc,CAAC,oBAAmB,OAAO,mBAAyB,MAAM,iBAAqB,MAAM,uBA2DpL,CAAC"}

package/dist/creek-table/hooks/useTableScrollHeight.js

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/creek-table/hooks/useTableScrollHeight.tsx
+var useTableScrollHeight_exports = {};
+__export(useTableScrollHeight_exports, {
+  useTableScrollHeight: () => useTableScrollHeight
+});
+module.exports = __toCommonJS(useTableScrollHeight_exports);
+var import_ahooks = require("ahooks");
+var import_react = require("react");
+var useTableScrollHeight = (prefixCls, tableRef, pageFixedBottom = true, contentPadding = 16, offsetBottom = 16) => {
+  const [scrollY, setScrollY] = (0, import_react.useState)(void 0);
+  const { run: calcHeight } = (0, import_ahooks.useDebounceFn)(
+    () => {
+      if (!pageFixedBottom || !tableRef.current)
+        return;
+      const tableEl = tableRef.current;
+      const tableHeader = tableEl.querySelector(`.${prefixCls}-table-thead`);
+      const tableBody = tableEl.querySelector(`.${prefixCls}-table-body`);
+      let top = 0;
+      if (tableHeader) {
+        top = tableHeader.getBoundingClientRect().bottom;
+      } else if (tableBody) {
+        top = tableBody.getBoundingClientRect().top;
+      }
+      const windowHeight = window.innerHeight;
+      let height = windowHeight - top - contentPadding - offsetBottom;
+      const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);
+      if (pagination) {
+        const paginationHeight = pagination.clientHeight;
+        const styles = window.getComputedStyle(pagination);
+        const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+        height = height - paginationHeight - totalPaginationMargin;
+      } else {
+        height = height - 40;
+      }
+      setScrollY(height);
+    },
+    { wait: 100 }
+  );
+  (0, import_react.useEffect)(() => {
+    calcHeight();
+    const observer = new MutationObserver(calcHeight);
+    if (tableRef.current) {
+      observer.observe(tableRef.current, { childList: true, subtree: true });
+    }
+    return () => observer.disconnect();
+  }, [tableRef, pageFixedBottom, prefixCls]);
+  (0, import_ahooks.useEventListener)("resize", calcHeight);
+  return scrollY;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTableScrollHeight
+});
+//# sourceMappingURL=useTableScrollHeight.js.map

package/dist/creek-table/hooks/useTableScrollHeight.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/creek-table/hooks/useTableScrollHeight.tsx"],
+  "sourcesContent": ["import { useDebounceFn, useEventListener } from 'ahooks';\nimport { useEffect, useState } from 'react';\n\nexport const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom: boolean = true, contentPadding: number = 16, offsetBottom: number = 16) => {\n  const [scrollY, setScrollY] = useState<number | undefined>(undefined);\n\n  const { run: calcHeight } = useDebounceFn(\n    () => {\n      if (!pageFixedBottom || !tableRef.current) return;\n\n      const tableEl = tableRef.current;\n\n      const tableHeader = tableEl.querySelector(`.${prefixCls}-table-thead`);\n      const tableBody = tableEl.querySelector(`.${prefixCls}-table-body`);\n\n      let top = 0;\n      if (tableHeader) {\n        top = tableHeader.getBoundingClientRect().bottom;\n      } else if (tableBody) {\n        top = tableBody.getBoundingClientRect().top;\n      }\n\n      const windowHeight = window.innerHeight;\n  \n      let height = windowHeight - top -  contentPadding - offsetBottom;\n\n      const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);\n\n      if (pagination) {\n        const paginationHeight = pagination.clientHeight;\n\n        const styles = window.getComputedStyle(pagination);\n        const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);\n\n        height = height - paginationHeight - totalPaginationMargin;\n      } else {\n        // 如果没有找到分页，预留一个高度（假设分页高度为 24px + margin 16px = 40px）\n        // 这样可以避免初始加载时高度过大，导致出现滚动条，然后分页出现后高度又变小\n        height = height - 40;\n      }\n\n      // Minimum height to avoid crashes or ugly rendering\n      setScrollY(height);\n    },\n    { wait: 100 },\n  );\n\n  useEffect(() => {\n    // Initial calculation\n    calcHeight();\n\n    // Observer for DOM changes that might affect position\n    const observer = new MutationObserver(calcHeight);\n    if (tableRef.current) {\n      observer.observe(tableRef.current, { childList: true, subtree: true });\n    }\n    return () => observer.disconnect();\n  }, [tableRef, pageFixedBottom, prefixCls]);\n\n  useEventListener('resize', calcHeight);\n\n  return scrollY;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAgD;AAChD,mBAAoC;AAE7B,IAAM,uBAAuB,CAAC,WAAmB,UAA2C,kBAA2B,MAAM,iBAAyB,IAAI,eAAuB,OAAO;AAC7L,QAAM,CAAC,SAAS,UAAU,QAAI,uBAA6B,MAAS;AAEpE,QAAM,EAAE,KAAK,WAAW,QAAI;AAAA,IAC1B,MAAM;AACJ,UAAI,CAAC,mBAAmB,CAAC,SAAS;AAAS;AAE3C,YAAM,UAAU,SAAS;AAEzB,YAAM,cAAc,QAAQ,cAAc,IAAI,uBAAuB;AACrE,YAAM,YAAY,QAAQ,cAAc,IAAI,sBAAsB;AAElE,UAAI,MAAM;AACV,UAAI,aAAa;AACf,cAAM,YAAY,sBAAsB,EAAE;AAAA,MAC5C,WAAW,WAAW;AACpB,cAAM,UAAU,sBAAsB,EAAE;AAAA,MAC1C;AAEA,YAAM,eAAe,OAAO;AAE5B,UAAI,SAAS,eAAe,MAAO,iBAAiB;AAEpD,YAAM,aAAa,QAAQ,cAAc,IAAI,sBAAsB;AAEnE,UAAI,YAAY;AACd,cAAM,mBAAmB,WAAW;AAEpC,cAAM,SAAS,OAAO,iBAAiB,UAAU;AACjD,cAAM,wBAAwB,WAAW,OAAO,SAAS,IAAI,WAAW,OAAO,YAAY;AAE3F,iBAAS,SAAS,mBAAmB;AAAA,MACvC,OAAO;AAGL,iBAAS,SAAS;AAAA,MACpB;AAGA,iBAAW,MAAM;AAAA,IACnB;AAAA,IACA,EAAE,MAAM,IAAI;AAAA,EACd;AAEA,8BAAU,MAAM;AAEd,eAAW;AAGX,UAAM,WAAW,IAAI,iBAAiB,UAAU;AAChD,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,SAAS,SAAS,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAAA,IACvE;AACA,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,iBAAiB,SAAS,CAAC;AAEzC,sCAAiB,UAAU,UAAU;AAErC,SAAO;AACT;",
+  "names": []
+}

package/dist/creek-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/creek-table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAEzC,eAAO,MAAM,UAAU,0EAA2E,gBAAgB,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,4CAMjI,CAAC"}

package/dist/creek-table/index.js

@@ -25,7 +25,7 @@ module.exports = __toCommonJS(creek_table_exports);
 var import_SearchTable = require("./SearchTable");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CreekTable = (props) => {
-  const { columns = [], onSubmit, ...restProps } = props;
+  const { columns = [], ...restProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SearchTable.SearchProTable, { columns, ...restProps });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/creek-table/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/creek-table/index.tsx"],
-  "sourcesContent": ["import { ParamsType } from '@ant-design/pro-components';\n\nimport { SearchProTable } from './SearchTable';\nimport { CreekTableProps } from './type';\n\nexport const CreekTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n  const { columns = [],  onSubmit, ...restProps } = props;\n\n  return (\n     <SearchProTable columns={columns} {...restProps} />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,yBAA+B;AAO1B;AAJE,IAAM,aAAa,CAAiE,UAA4C;AACrI,QAAM,EAAE,UAAU,CAAC,GAAI,UAAU,GAAG,UAAU,IAAI;AAElD,SACG,4CAAC,qCAAe,SAAmB,GAAG,WAAW;AAEtD;",
+  "sourcesContent": ["import { ParamsType } from '@ant-design/pro-components';\n\nimport { SearchProTable } from './SearchTable';\nimport { CreekTableProps } from './type';\n\nexport const CreekTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n  const { columns = [],  ...restProps } = props;\n\n  return (\n     <SearchProTable columns={columns} {...restProps} />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,yBAA+B;AAO1B;AAJE,IAAM,aAAa,CAAiE,UAA4C;AACrI,QAAM,EAAE,UAAU,CAAC,GAAI,GAAG,UAAU,IAAI;AAExC,SACG,4CAAC,qCAAe,SAAmB,GAAG,WAAW;AAEtD;",
   "names": []
 }

package/dist/creek-table/toolBarRender.d.ts

@@ -1,4 +1,5 @@
 export declare const toolBarRender: (options: {
     shouldCollapse: boolean;
     restProps: any;
+    args?: any[];
 }) => any;

package/dist/creek-table/toolBarRender.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolBarRender.d.ts","sourceRoot":"","sources":["../../src/creek-table/toolBarRender.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,YAAa;IAAE,cAAc,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;CAAE,QAwB/F,CAAC"}

package/dist/creek-table/toolBarRender.js

@@ -27,8 +27,8 @@ var import_antd = require("antd");
 var import_jsx_runtime = require("react/jsx-runtime");
 var toolBarRender = (options) => {
   var _a;
-  const { shouldCollapse, restProps } = options;
-  const baseActions = ((_a = restProps.toolBarRender) == null ? void 0 : _a.call(restProps)) || [];
+  const { shouldCollapse, restProps, args = [] } = options;
+  const baseActions = ((_a = restProps.toolBarRender) == null ? void 0 : _a.call(restProps, ...args)) || [];
   if (!shouldCollapse || baseActions.length <= 1) {
     return baseActions;
   }

package/dist/creek-table/toolBarRender.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/creek-table/toolBarRender.tsx"],
-  "sourcesContent": ["import { DownOutlined } from '@ant-design/icons';\nimport { Button, Dropdown } from 'antd';\n\nexport const toolBarRender = (options: { shouldCollapse: boolean; restProps: any }) => {\n  const { shouldCollapse, restProps } = options;\n\n  const baseActions = restProps.toolBarRender?.() || [];\n  if (!shouldCollapse || baseActions.length <= 1) {\n    return baseActions;\n  }\n\n  const [first, ...rest] = baseActions;\n\n  return [\n    first,\n    <Dropdown\n      key=\"more\"\n      menu={{\n        items: rest.map((item: React.ReactDOM, index: number) => ({ key: index, label: item })),\n      }}\n      trigger={['click']}\n    >\n      <Button>\n        更多 <DownOutlined />\n      </Button>\n    </Dropdown>,\n  ];\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAC7B,kBAAiC;AAqB3B;AAnBC,IAAM,gBAAgB,CAAC,YAAyD;AAHvF;AAIE,QAAM,EAAE,gBAAgB,UAAU,IAAI;AAEtC,QAAM,gBAAc,eAAU,kBAAV,uCAA+B,CAAC;AACpD,MAAI,CAAC,kBAAkB,YAAY,UAAU,GAAG;AAC9C,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,OAAO,GAAG,IAAI,IAAI;AAEzB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM;AAAA,UACJ,OAAO,KAAK,IAAI,CAAC,MAAsB,WAAmB,EAAE,KAAK,OAAO,OAAO,KAAK,EAAE;AAAA,QACxF;AAAA,QACA,SAAS,CAAC,OAAO;AAAA,QAEjB,uDAAC,sBAAO;AAAA;AAAA,UACH,4CAAC,6BAAa;AAAA,WACnB;AAAA;AAAA,MARI;AAAA,IASN;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { DownOutlined } from '@ant-design/icons';\nimport { Button, Dropdown } from 'antd';\n\nexport const toolBarRender = (options: { shouldCollapse: boolean; restProps: any; args?: any[] }) => {\n  const { shouldCollapse, restProps, args = [] } = options;\n\n  const baseActions = restProps.toolBarRender?.(...args) || [];\n  if (!shouldCollapse || baseActions.length <= 1) {\n    return baseActions;\n  }\n\n  const [first, ...rest] = baseActions;\n\n  return [\n    first,\n    <Dropdown\n      key=\"more\"\n      menu={{\n        items: rest.map((item: React.ReactDOM, index: number) => ({ key: index, label: item })),\n      }}\n      trigger={['click']}\n    >\n      <Button>\n        更多 <DownOutlined />\n      </Button>\n    </Dropdown>,\n  ];\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAC7B,kBAAiC;AAqB3B;AAnBC,IAAM,gBAAgB,CAAC,YAAuE;AAHrG;AAIE,QAAM,EAAE,gBAAgB,WAAW,OAAO,CAAC,EAAE,IAAI;AAEjD,QAAM,gBAAc,eAAU,kBAAV,mCAA0B,GAAG,UAAS,CAAC;AAC3D,MAAI,CAAC,kBAAkB,YAAY,UAAU,GAAG;AAC9C,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,OAAO,GAAG,IAAI,IAAI;AAEzB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM;AAAA,UACJ,OAAO,KAAK,IAAI,CAAC,MAAsB,WAAmB,EAAE,KAAK,OAAO,OAAO,KAAK,EAAE;AAAA,QACxF;AAAA,QACA,SAAS,CAAC,OAAO;AAAA,QAEjB,uDAAC,sBAAO;AAAA;AAAA,UACH,4CAAC,6BAAa;AAAA,WACnB;AAAA;AAAA,MARI;AAAA,IASN;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/creek-table/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/creek-table/type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,UAAU,EAAE,SAAS,GAAG,MAAM,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,EAAG,SAAS,CAAC,GAAG;IAC/I,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE;QACtB,+BAA+B;QAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG;QACpD,YAAY,CAAC,EAAE,kBAAkB,CAAC;QAClC,YAAY,CAAC,EAAE,kBAAkB,CAAC;KACnC,CAAC;IAEF,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC,CAAC"}

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creekjs/web-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/creek-hooks/useApp/DrawerHelper.tsx

@@ -19,7 +19,7 @@ export const DrawerHelper: React.FC<DrawerHelperProps> = ({ open, config, onClos
         open={open}
         onOpenChange={(visible) => !visible && onClose()}
         drawerProps={{
-          destroyOnClose: true,
+          destroyOnHidden: true,
           onClose,
           ...((config as FormDrawerConfig).drawerProps || {}),
         }}
@@ -34,7 +34,7 @@ export const DrawerHelper: React.FC<DrawerHelperProps> = ({ open, config, onClos
     <Drawer
       open={open}
       onClose={onClose}
-      destroyOnClose
+      destroyOnHidden
       {...(restConfig as NormalDrawerConfig)}
     >
       {content}

package/src/creek-hooks/useApp/ModalHelper.tsx

@@ -19,7 +19,7 @@ export const ModalHelper: React.FC<ModalHelperProps> = ({ open, config, onClose
         open={open}
         onOpenChange={(visible) => !visible && onClose()}
         modalProps={{
-          destroyOnClose: true,
+          destroyOnHidden: true,
           onCancel: onClose,
           ...((config as FormModalConfig).modalProps || {}),
         }}
@@ -34,7 +34,7 @@ export const ModalHelper: React.FC<ModalHelperProps> = ({ open, config, onClose
     <Modal
       open={open}
       onCancel={onClose}
-      destroyOnClose
+      destroyOnHidden
       {...(restConfig as NormalModalConfig)}
     >
       {content}

package/src/creek-layout/{HeaderContent → ActionRender}/UserInfo.tsx

@@ -1,4 +1,3 @@
-import { LogoutOutlined } from "@ant-design/icons";
 import { Avatar, Dropdown, DropDownProps, Space } from "antd";
 import { createStyles } from "antd-style";
 
@@ -21,33 +20,23 @@ const useStyles = createStyles(({ token }) => ({
   },
 }));
 
-export const UserInfo = () => {
+export interface UserInfoProps {
+  name?: React.ReactNode;
+  avatar?: string;
+  menu?: DropDownProps['menu'];
+}
+
+export const UserInfo = (props: UserInfoProps) => {
   const { styles } = useStyles();
+  const { name, avatar, menu } = props;
 
-  const userInfoMenu: DropDownProps["menu"] = {
-    items: [
-      {
-        key: "logout",
-        label: (
-          <Space size={8}>
-            <LogoutOutlined />
-            <span>退出登录</span>
-          </Space>
-        ),
-        onClick: () => {},
-      },
-    ],
-  };
   return (
-    <Dropdown
-      arrow
-      placement="bottom"
-      overlayClassName={styles.userInfoDropdownOverlay}
-      menu={userInfoMenu}
-    >
+    <Dropdown arrow placement="bottom" overlayClassName={styles.userInfoDropdownOverlay} menu={menu}>
       <Space size={4} align="center">
-        <Avatar className={styles.avatarContainer}>C</Avatar>
-        <span>Creek</span>
+        <Avatar className={styles.avatarContainer} src={avatar}>
+          {name}
+        </Avatar>
+        <span>{name}</span>
       </Space>
     </Dropdown>
   );

package/src/creek-layout/ActionRender/index.tsx

@@ -0,0 +1,3 @@
+export { FullScreen } from './FullScreen';
+export { UserInfo } from './UserInfo';
+

package/src/creek-layout/index.tsx

@@ -1,16 +1,22 @@
-import { ProLayout, ProLayoutProps } from "@ant-design/pro-components";
-import { useMemoizedFn } from "ahooks";
-import { theme } from "antd";
-import classnames from "classnames";
+import { ProLayout, ProLayoutProps } from '@ant-design/pro-components';
+import { useMemoizedFn } from 'ahooks';
+import { theme } from 'antd';
+import classnames from 'classnames';
 
-import { CollapsedButton, useCollapsedStore } from "./CollapseButton";
-import { Exception } from "./Exception";
-import { HeaderContent } from "./HeaderContent";
+import { FullScreen, UserInfo } from './ActionRender';
+import { CollapsedButton, useCollapsedStore } from './CollapseButton';
+import { Exception } from './Exception';
 
 export type LayoutProps = ProLayoutProps & {
   runtimeConfig: ProLayoutProps;
   userConfig?: ProLayoutProps;
   navigate?: (path?: string | number) => void;
+  showFullScreen?: boolean;
+  userInfo?: {
+    name?: React.ReactNode;
+    avatar?: string;
+    menu?: any;
+  };
   initialInfo?: {
     initialState: any;
     loading: boolean;
@@ -19,68 +25,63 @@ export type LayoutProps = ProLayoutProps & {
 };
 
 export const CreekLayout = (props: LayoutProps) => {
-  const {
-    route,
-    userConfig,
-    runtimeConfig,
-    children,
-    location,
-    navigate,
-    ...more
-  } = props;
+  const { route, userConfig, runtimeConfig, children, location, navigate, showFullScreen, userInfo, ...more } = props;
 
   const { useToken } = theme;
   const { token } = useToken();
 
   const { collapsed } = useCollapsedStore();
 
-  const menuItemRender: ProLayoutProps["menuItemRender"] = useMemoizedFn(
-    (itemProps, defaultDom) => {
-      return (
-        <span
-          onClick={() => {
-            if (navigate) {
-              navigate(itemProps.path);
-            }
-          }}
-        >
-          {defaultDom}
-        </span>
-      );
-    }
-  );
+  const menuItemRender: ProLayoutProps['menuItemRender'] = useMemoizedFn((itemProps, defaultDom) => {
+    return (
+      <span
+        onClick={() => {
+          if (navigate) {
+            navigate(itemProps.path);
+          }
+        }}
+      >
+        {defaultDom}
+      </span>
+    );
+  });
+
+  const actions: React.ReactNode[] = [];
+  if (showFullScreen) {
+    actions.push(<FullScreen key="full-screen" />);
+  }
+  if (userInfo) {
+    actions.push(<UserInfo key="user-info" {...userInfo} />);
+  }
 
   return (
     <ProLayout
-      className={classnames("creek-layout-container", userConfig?.className)}
-      layout="mix"
+      className={classnames('creek-layout-container', userConfig?.className)}
       route={route}
       title={userConfig?.title}
       siderWidth={212}
       location={location}
       menuItemRender={menuItemRender}
-      headerContentRender={() => {
-        return <HeaderContent />;
-      }}
+      actionsRender={() => actions}
       token={{
         header: {
-          colorBgHeader: "#fff",
-          colorHeaderTitle: "rgba(0, 0, 0, 0.80);",
+          colorBgHeader: '#fff',
+          colorHeaderTitle: 'rgba(0, 0, 0, 0.80);',
           colorTextMenuSelected: token.colorPrimary,
           heightLayoutHeader: 48,
         },
         sider: {
-          colorMenuBackground: "#f7f8fa",
-          colorBgMenuItemSelected: "transparent",
+          colorMenuBackground: '#f7f8fa',
+          colorBgMenuItemSelected: 'transparent',
           colorTextMenuActive: token.colorPrimary,
           colorTextMenuSelected: token.colorPrimary,
           colorTextMenuItemHover: token.colorPrimary,
-          colorTextMenu: "#333",
+          colorTextMenu: '#333',
         },
         pageContainer: {
-          paddingBlockPageContainerContent: 20,
-          paddingInlinePageContainerContent: 20,
-          colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);'
+          paddingBlockPageContainerContent: token.padding,
+          paddingInlinePageContainerContent: token.padding,
+          colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);',
         },
       }}
       fixSiderbar
@@ -96,4 +97,4 @@ export const CreekLayout = (props: LayoutProps) => {
   );
 };
 
-export * from "./Exception";
+export * from './Exception';