@creekjs/web-components 1.0.3 → 1.0.5

package/src/creek-table/SearchTable.tsx

@@ -1,73 +1,92 @@
 import { ParamsType, ProTable } from '@ant-design/pro-components';
+import { theme } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
 import _ from 'lodash';
 import { useRef } from 'react';
 
-import { useAutoWidthColumns } from './hooks';
+import { useAutoWidthColumns, useTableScrollHeight } from './hooks';
 import { TableOptionRender } from './TableOptionRender';
-import { TableViewContent } from './TableViewContent';
 import { toolBarRender } from './toolBarRender';
 import { CreekTableProps } from './type';
 
-const useStyles = createStyles(({ prefixCls }) => {
+const useStyles = createStyles(({ css, token }, { scrollY, prefixCls }: { scrollY?: number | string; prefixCls: string }) => {
   return {
-    'creek-table-container': {
-      [`.${prefixCls}-pagination`]: {
-        [`.${prefixCls}-pagination-total-text`]: {
-          flex: `1`,
-        },
-      },
-    },
+    'creek-table-container': css`
+      .${prefixCls}-table-body {
+        overflow-y: auto !important;
+        min-height: ${typeof scrollY === 'number' ? `${scrollY}px` : (scrollY ?? 'auto')};
+
+        /* Firefox 滚动条样式 */
+        scrollbar-width: thin;
+        scrollbar-color: ${token.colorFillSecondary} transparent;
+      }
+
+      /* Webkit (Chrome, Safari, Edge) 滚动条样式 */
+      & *::-webkit-scrollbar {
+        width: 6px !important;
+        height: 6px !important;
+        background-color: transparent !important;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background-color: ${token.colorFillSecondary} !important;
+        border-radius: 3px !important;
+        transition: all 0.3s;
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background-color: ${token.colorFill} !important;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background-color: transparent !important;
+      }
+
+      .${prefixCls}-pagination {
+        .${prefixCls}-pagination-total-text {
+          flex: 1;
+        }
+      }
+    `,
   };
 });
 
 // 独立的 ProTable 组件
 export const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {
-  const {
-    columns,
-    params,
-    prefixCls = 'ant',
-    autoAddFilterForColumn = true,
-    className,
-    optionsRender,
-    tableViewRender,
-    pagination,
-    pageFixedBottom = true,
-    pageFixedBottomConfig,
-    ...restProps
-  } = props;
+  const { columns, prefixCls = 'ant', autoAddFilterForColumn = true, className, optionsRender, tableViewRender, pagination, pageFixedBottom = true, pageFixedBottomConfig, ...restProps } = props;
 
   const proTableRef = useRef<HTMLDivElement>(null);
 
+  const { token } = theme.useToken();
+
   // // 使用自定义 hook 处理工具栏的自适应功能
   // const { shouldCollapse } = useAdaptiveToolBar({
   //   containerRef: proTableRef,
   //   prefixCls,
-  // });
+  // });ƒ
 
   const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns(columns, proTableRef);
 
-  const { styles } = useStyles();
+  const scrollY = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, token.paddingContentVerticalLG, pageFixedBottomConfig?.bottomFix || token.padding);
+
+  const { styles } = useStyles({ scrollY, prefixCls });
+
+  console.log('scrollY', scrollY);
 
   return (
     <div ref={proTableRef}>
       <ProTable<T, U, ValueType>
-        {...restProps}
+        {...props}
         className={classnames(styles['creek-table-container'], className)}
         columns={adaptiveColumns}
         scroll={{
           x: totalWidth,
-          ...restProps.scroll,
+          y: scrollY ?? restProps.scroll?.y,
         }}
         toolbar={{
           ...restProps.toolbar,
         }}
-        pagination={{
-          showTotal: (total) => <span>共 {total} 条</span>,
-          showSizeChanger: true,
-          ...pagination,
-        }}
         optionsRender={(defaultProps, dom) => {
           return _.isFunction(optionsRender)
             ? optionsRender(defaultProps, dom)
@@ -75,18 +94,12 @@ export const SearchProTable = <T extends ParamsType, U extends ParamsType, Value
               ? [<TableOptionRender key="option" defaultDom={dom} importConfig={restProps?.options?.importConfig} exportConfig={restProps?.options?.exportConfig} />]
               : [];
         }}
-        toolBarRender={() => {
-          return toolBarRender({  　shouldCollapse: false, restProps });
+        toolBarRender={(...args) => {
+          return toolBarRender({ shouldCollapse: false, restProps, args });
         }}
         // 在表格内容区上方显示筛选条件
         tableViewRender={(defaultProps, defaultDom) => {
-          return _.isFunction(tableViewRender) ? (
-            <>{tableViewRender(defaultProps, defaultDom)}</>
-          ) : (
-            <TableViewContent<T, U, ValueType> pageFixedBottom={pageFixedBottom} pageFixedBottomConfig={pageFixedBottomConfig} prefixCls={prefixCls}>
-              {defaultDom}
-            </TableViewContent>
-          );
+          return _.isFunction(tableViewRender) ? <>{tableViewRender(defaultProps, defaultDom)}</> : defaultDom;
         }}
       />
     </div>

package/src/creek-table/hooks/index.ts

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

package/src/creek-table/hooks/useTableScrollHeight.tsx

@@ -0,0 +1,63 @@
+import { useDebounceFn, useEventListener } from 'ahooks';
+import { useEffect, useState } from 'react';
+
+export const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom: boolean = true, contentPadding: number = 16, offsetBottom: number = 16) => {
+  const [scrollY, setScrollY] = useState<number | undefined>(undefined);
+
+  const { run: calcHeight } = 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 {
+        // 如果没有找到分页，预留一个高度（假设分页高度为 24px + margin 16px = 40px）
+        // 这样可以避免初始加载时高度过大，导致出现滚动条，然后分页出现后高度又变小
+        height = height - 40;
+      }
+
+      // Minimum height to avoid crashes or ugly rendering
+      setScrollY(height);
+    },
+    { wait: 100 },
+  );
+
+  useEffect(() => {
+    // Initial calculation
+    calcHeight();
+
+    // Observer for DOM changes that might affect position
+    const observer = new MutationObserver(calcHeight);
+    if (tableRef.current) {
+      observer.observe(tableRef.current, { childList: true, subtree: true });
+    }
+    return () => observer.disconnect();
+  }, [tableRef, pageFixedBottom, prefixCls]);
+
+  useEventListener('resize', calcHeight);
+
+  return scrollY;
+};

package/src/creek-table/index.tsx

@@ -4,7 +4,7 @@ import { SearchProTable } from './SearchTable';
 import { CreekTableProps } from './type';
 
 export const CreekTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {
-  const { columns = [],  onSubmit, ...restProps } = props;
+  const { columns = [],  ...restProps } = props;
 
   return (
      <SearchProTable columns={columns} {...restProps} />

package/src/creek-table/toolBarRender.tsx

@@ -1,10 +1,10 @@
 import { DownOutlined } from '@ant-design/icons';
 import { Button, Dropdown } from 'antd';
 
-export const toolBarRender = (options: { shouldCollapse: boolean; restProps: any }) => {
-  const { shouldCollapse, restProps } = options;
+export const toolBarRender = (options: { shouldCollapse: boolean; restProps: any; args?: any[] }) => {
+  const { shouldCollapse, restProps, args = [] } = options;
 
-  const baseActions = restProps.toolBarRender?.() || [];
+  const baseActions = restProps.toolBarRender?.(...args) || [];
   if (!shouldCollapse || baseActions.length <= 1) {
     return baseActions;
   }

package/dist/creek-layout/HeaderContent/UserInfo.d.ts

@@ -1 +0,0 @@
-export declare const UserInfo: () => import("react/jsx-runtime").JSX.Element;

package/dist/creek-layout/HeaderContent/UserInfo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/creek-layout/HeaderContent/UserInfo.tsx"],
-  "sourcesContent": ["import { LogoutOutlined } from \"@ant-design/icons\";\nimport { Avatar, Dropdown, DropDownProps, Space } from \"antd\";\nimport { createStyles } from \"antd-style\";\n\nconst useStyles = createStyles(({ token }) => ({\n  avatarContainer: {\n    backgroundColor: token.colorPrimary,\n    width: 24,\n    height: 24,\n  },\n  userInfoDropdownOverlay: {\n    \".ant-dropdown-menu\": {\n      padding: \"8px 0\",\n    },\n    \".ant-dropdown-menu-item\": {\n      \".ant-dropdown-menu-item-icon\": {\n        fontSize: \"18px\",\n        marginRight: \"8px\",\n      },\n    },\n  },\n}));\n\nexport const UserInfo = () => {\n  const { styles } = useStyles();\n\n  const userInfoMenu: DropDownProps[\"menu\"] = {\n    items: [\n      {\n        key: \"logout\",\n        label: (\n          <Space size={8}>\n            <LogoutOutlined />\n            <span>退出登录</span>\n          </Space>\n        ),\n        onClick: () => {},\n      },\n    ],\n  };\n  return (\n    <Dropdown\n      arrow\n      placement=\"bottom\"\n      overlayClassName={styles.userInfoDropdownOverlay}\n      menu={userInfoMenu}\n    >\n      <Space size={4} align=\"center\">\n        <Avatar className={styles.avatarContainer}>C</Avatar>\n        <span>Creek</span>\n      </Space>\n    </Dropdown>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,kBAAuD;AACvD,wBAA6B;AA6BnB;AA3BV,IAAM,gBAAY,gCAAa,CAAC,EAAE,MAAM,OAAO;AAAA,EAC7C,iBAAiB;AAAA,IACf,iBAAiB,MAAM;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,yBAAyB;AAAA,IACvB,sBAAsB;AAAA,MACpB,SAAS;AAAA,IACX;AAAA,IACA,2BAA2B;AAAA,MACzB,gCAAgC;AAAA,QAC9B,UAAU;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,EAAE;AAEK,IAAM,WAAW,MAAM;AAC5B,QAAM,EAAE,OAAO,IAAI,UAAU;AAE7B,QAAM,eAAsC;AAAA,IAC1C,OAAO;AAAA,MACL;AAAA,QACE,KAAK;AAAA,QACL,OACE,6CAAC,qBAAM,MAAM,GACX;AAAA,sDAAC,+BAAe;AAAA,UAChB,4CAAC,UAAK,kBAAI;AAAA,WACZ;AAAA,QAEF,SAAS,MAAM;AAAA,QAAC;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAK;AAAA,MACL,WAAU;AAAA,MACV,kBAAkB,OAAO;AAAA,MACzB,MAAM;AAAA,MAEN,uDAAC,qBAAM,MAAM,GAAG,OAAM,UACpB;AAAA,oDAAC,sBAAO,WAAW,OAAO,iBAAiB,eAAC;AAAA,QAC5C,4CAAC,UAAK,mBAAK;AAAA,SACb;AAAA;AAAA,EACF;AAEJ;",
-  "names": []
-}

package/dist/creek-layout/HeaderContent/index.d.ts

@@ -1 +0,0 @@
-export declare const HeaderContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/creek-layout/HeaderContent/index.js

@@ -1,49 +0,0 @@
-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-layout/HeaderContent/index.tsx
-var HeaderContent_exports = {};
-__export(HeaderContent_exports, {
-  HeaderContent: () => HeaderContent
-});
-module.exports = __toCommonJS(HeaderContent_exports);
-var import_antd = require("antd");
-var import_antd_style = require("antd-style");
-var import_FullScreen = require("./FullScreen");
-var import_UserInfo = require("./UserInfo");
-var import_jsx_runtime = require("react/jsx-runtime");
-var useStyles = (0, import_antd_style.createStyles)(({}) => ({
-  dividerContainer: {
-    backgroundColor: "#9b9999"
-  }
-}));
-var HeaderContent = () => {
-  const { styles } = useStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Flex, { justify: "space-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Space, { split: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Divider, { type: "vertical", className: styles.dividerContainer }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FullScreen.FullScreen, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_UserInfo.UserInfo, {})
-    ] })
-  ] });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  HeaderContent
-});
-//# sourceMappingURL=index.js.map

package/dist/creek-layout/HeaderContent/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/creek-layout/HeaderContent/index.tsx"],
-  "sourcesContent": ["import { Divider, Flex, Space } from 'antd';\nimport { createStyles } from 'antd-style';\n\nimport { FullScreen } from './FullScreen';\nimport { UserInfo } from './UserInfo';\n\nconst useStyles = createStyles(({}) => ({\n  dividerContainer: {\n    backgroundColor: '#9b9999',\n  },\n}));\n\nexport const HeaderContent = () => {\n  const { styles } = useStyles();\n  return (\n    <Flex justify=\"space-between\">\n      <span />\n      <Space split={<Divider type=\"vertical\" className={styles.dividerContainer} />}>\n        <FullScreen />\n        <UserInfo />\n      </Space>\n    </Flex>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqC;AACrC,wBAA6B;AAE7B,wBAA2B;AAC3B,sBAAyB;AAYnB;AAVN,IAAM,gBAAY,gCAAa,CAAC,CAAC,OAAO;AAAA,EACtC,kBAAkB;AAAA,IAChB,iBAAiB;AAAA,EACnB;AACF,EAAE;AAEK,IAAM,gBAAgB,MAAM;AACjC,QAAM,EAAE,OAAO,IAAI,UAAU;AAC7B,SACE,6CAAC,oBAAK,SAAQ,iBACZ;AAAA,gDAAC,UAAK;AAAA,IACN,6CAAC,qBAAM,OAAO,4CAAC,uBAAQ,MAAK,YAAW,WAAW,OAAO,kBAAkB,GACzE;AAAA,kDAAC,gCAAW;AAAA,MACZ,4CAAC,4BAAS;AAAA,OACZ;AAAA,KACF;AAEJ;",
-  "names": []
-}

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

@@ -1,4 +0,0 @@
-import { ParamsType } from '@ant-design/pro-components';
-import { CreekTableProps } from './type';
-export type CreekTableViewRender<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = CreekTableProps<T, U, ValueType>['tableViewRender'];
-export declare const TableViewContent: <T extends ParamsType, U extends ParamsType, ValueType = "text">(props: CreekTableProps<T, U, ValueType>) => import("react/jsx-runtime").JSX.Element;

package/dist/creek-table/TableViewContent.js

@@ -1,66 +0,0 @@
-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/TableViewContent.tsx
-var TableViewContent_exports = {};
-__export(TableViewContent_exports, {
-  TableViewContent: () => TableViewContent
-});
-module.exports = __toCommonJS(TableViewContent_exports);
-var import_ahooks = require("ahooks");
-var import_creek_hooks = require("../creek-hooks");
-var import_jsx_runtime = require("react/jsx-runtime");
-var TableViewContent = (props) => {
-  const { prefixCls, pageFixedBottomConfig, pageFixedBottom, children } = props;
-  const { containerRef, viewPortHeight } = (0, import_creek_hooks.useViewportHeight)({
-    isObserverParent: true
-  });
-  const { run: setAntdTableContentHeight } = (0, import_ahooks.useDebounceFn)(
-    (mainHeight) => {
-      var _a, _b, _c;
-      const antdTableContentElement = (_a = containerRef.current) == null ? void 0 : _a.querySelector(`.${prefixCls}-table`);
-      const antdPaginationElement = (_b = containerRef.current) == null ? void 0 : _b.querySelector(`.${prefixCls}-pagination`);
-      if (antdTableContentElement) {
-        const paginationHeight = (antdPaginationElement == null ? void 0 : antdPaginationElement.clientHeight) || 0;
-        const bottomFix = (pageFixedBottomConfig == null ? void 0 : pageFixedBottomConfig.bottomFix) || 20;
-        const parentElement = (_c = containerRef.current) == null ? void 0 : _c.parentElement;
-        let parentPaddingBottom = 0;
-        if (parentElement) {
-          const style = window.getComputedStyle(parentElement);
-          parentPaddingBottom = parseFloat(style.paddingBottom) || 0;
-        }
-        const tableContentHeight = mainHeight - paginationHeight - parentPaddingBottom - bottomFix - parentPaddingBottom;
-        antdTableContentElement.setAttribute("style", `height: ${tableContentHeight}px`);
-      }
-    },
-    {
-      wait: 16
-    }
-  );
-  (0, import_ahooks.useDeepCompareEffect)(() => {
-    if (pageFixedBottom) {
-      setAntdTableContentHeight(viewPortHeight ?? 0);
-    }
-  }, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, children }) });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  TableViewContent
-});
-//# sourceMappingURL=TableViewContent.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/creek-table/TableViewContent.tsx"],
-  "sourcesContent": ["import { ParamsType } from '@ant-design/pro-components';\n\nimport { useDebounceFn, useDeepCompareEffect } from 'ahooks';\n\nimport { useViewportHeight } from '../creek-hooks';\nimport { CreekTableProps } from './type';\n\nexport type CreekTableViewRender<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = CreekTableProps<T, U, ValueType>['tableViewRender'];\n\n// 独立的 TableViewWrapper 组件 - 包含所有表格视图相关逻辑\nexport const TableViewContent = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {\n  const { prefixCls, pageFixedBottomConfig, pageFixedBottom, children } = props;\n\n  const { containerRef, viewPortHeight } = useViewportHeight({\n    isObserverParent: true,\n  });\n\n  // 设置antd内容区的高度，使得分页永远在底部\n  const { run: setAntdTableContentHeight } = useDebounceFn(\n    (mainHeight: number) => {\n      const antdTableContentElement = containerRef.current?.querySelector(`.${prefixCls}-table`);\n      const antdPaginationElement = containerRef.current?.querySelector(`.${prefixCls}-pagination`);\n      if (antdTableContentElement) {\n        const paginationHeight = antdPaginationElement?.clientHeight || 0;\n        const bottomFix = pageFixedBottomConfig?.bottomFix || 20;\n        const parentElement = containerRef.current?.parentElement;\n        let parentPaddingBottom = 0;\n        if (parentElement) {\n          const style = window.getComputedStyle(parentElement);\n          parentPaddingBottom = parseFloat(style.paddingBottom) || 0;\n        }\n        const tableContentHeight = mainHeight - paginationHeight - parentPaddingBottom - bottomFix - parentPaddingBottom;\n        antdTableContentElement.setAttribute('style', `height: ${tableContentHeight}px`);\n      }\n    },\n    {\n      wait: 16,\n    },\n  );\n\n  useDeepCompareEffect(() => {\n    if (pageFixedBottom) {\n      setAntdTableContentHeight(viewPortHeight ?? 0);\n    }\n  }, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);\n\n  // 默认渲染逻辑\n  return (\n    <>\n      <div ref={containerRef}>{children}</div>\n    </>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAoD;AAEpD,yBAAkC;AA4C9B;AAtCG,IAAM,mBAAmB,CAAiE,UAA4C;AAC3I,QAAM,EAAE,WAAW,uBAAuB,iBAAiB,SAAS,IAAI;AAExE,QAAM,EAAE,cAAc,eAAe,QAAI,sCAAkB;AAAA,IACzD,kBAAkB;AAAA,EACpB,CAAC;AAGD,QAAM,EAAE,KAAK,0BAA0B,QAAI;AAAA,IACzC,CAAC,eAAuB;AAnB5B;AAoBM,YAAM,2BAA0B,kBAAa,YAAb,mBAAsB,cAAc,IAAI;AACxE,YAAM,yBAAwB,kBAAa,YAAb,mBAAsB,cAAc,IAAI;AACtE,UAAI,yBAAyB;AAC3B,cAAM,oBAAmB,+DAAuB,iBAAgB;AAChE,cAAM,aAAY,+DAAuB,cAAa;AACtD,cAAM,iBAAgB,kBAAa,YAAb,mBAAsB;AAC5C,YAAI,sBAAsB;AAC1B,YAAI,eAAe;AACjB,gBAAM,QAAQ,OAAO,iBAAiB,aAAa;AACnD,gCAAsB,WAAW,MAAM,aAAa,KAAK;AAAA,QAC3D;AACA,cAAM,qBAAqB,aAAa,mBAAmB,sBAAsB,YAAY;AAC7F,gCAAwB,aAAa,SAAS,WAAW,sBAAsB;AAAA,MACjF;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,IACR;AAAA,EACF;AAEA,0CAAqB,MAAM;AACzB,QAAI,iBAAiB;AACnB,gCAA0B,kBAAkB,CAAC;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,yBAAyB,CAAC;AAG/D,SACE,2EACE,sDAAC,SAAI,KAAK,cAAe,UAAS,GACpC;AAEJ;",
-  "names": []
-}

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

@@ -1,24 +0,0 @@
-import { Divider, Flex, Space } from 'antd';
-import { createStyles } from 'antd-style';
-
-import { FullScreen } from './FullScreen';
-import { UserInfo } from './UserInfo';
-
-const useStyles = createStyles(({}) => ({
-  dividerContainer: {
-    backgroundColor: '#9b9999',
-  },
-}));
-
-export const HeaderContent = () => {
-  const { styles } = useStyles();
-  return (
-    <Flex justify="space-between">
-      <span />
-      <Space split={<Divider type="vertical" className={styles.dividerContainer} />}>
-        <FullScreen />
-        <UserInfo />
-      </Space>
-    </Flex>
-  );
-};

package/src/creek-table/TableViewContent.tsx

@@ -1,53 +0,0 @@
-import { ParamsType } from '@ant-design/pro-components';
-
-import { useDebounceFn, useDeepCompareEffect } from 'ahooks';
-
-import { useViewportHeight } from '../creek-hooks';
-import { CreekTableProps } from './type';
-
-export type CreekTableViewRender<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = CreekTableProps<T, U, ValueType>['tableViewRender'];
-
-// 独立的 TableViewWrapper 组件 - 包含所有表格视图相关逻辑
-export const TableViewContent = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {
-  const { prefixCls, pageFixedBottomConfig, pageFixedBottom, children } = props;
-
-  const { containerRef, viewPortHeight } = useViewportHeight({
-    isObserverParent: true,
-  });
-
-  // 设置antd内容区的高度，使得分页永远在底部
-  const { run: setAntdTableContentHeight } = useDebounceFn(
-    (mainHeight: number) => {
-      const antdTableContentElement = containerRef.current?.querySelector(`.${prefixCls}-table`);
-      const antdPaginationElement = containerRef.current?.querySelector(`.${prefixCls}-pagination`);
-      if (antdTableContentElement) {
-        const paginationHeight = antdPaginationElement?.clientHeight || 0;
-        const bottomFix = pageFixedBottomConfig?.bottomFix || 20;
-        const parentElement = containerRef.current?.parentElement;
-        let parentPaddingBottom = 0;
-        if (parentElement) {
-          const style = window.getComputedStyle(parentElement);
-          parentPaddingBottom = parseFloat(style.paddingBottom) || 0;
-        }
-        const tableContentHeight = mainHeight - paginationHeight - parentPaddingBottom - bottomFix - parentPaddingBottom;
-        antdTableContentElement.setAttribute('style', `height: ${tableContentHeight}px`);
-      }
-    },
-    {
-      wait: 16,
-    },
-  );
-
-  useDeepCompareEffect(() => {
-    if (pageFixedBottom) {
-      setAntdTableContentHeight(viewPortHeight ?? 0);
-    }
-  }, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);
-
-  // 默认渲染逻辑
-  return (
-    <>
-      <div ref={containerRef}>{children}</div>
-    </>
-  );
-};