@creekjs/web-components 1.0.0

package/dist/creek-table/TableOptionRender.js

@@ -0,0 +1,65 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ExportOutlined, ImportOutlined } from '@ant-design/icons';
+import { Space, Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var prefixCls = _ref.prefixCls,
+    token = _ref.token;
+  return {
+    'table-option-render-item': {
+      border: "1px solid ".concat(token.colorBorder),
+      borderRadius: token.borderRadius,
+      padding: '8px',
+      cursor: 'pointer'
+    }
+  };
+});
+export var TableOptionRender = function TableOptionRender(props) {
+  var defaultDom = props.defaultDom,
+    importConfig = props.importConfig,
+    exportConfig = props.exportConfig;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _ref2 = defaultDom || [],
+    _ref3 = _slicedToArray(_ref2, 3),
+    reload = _ref3[0],
+    dis = _ref3[1],
+    setting = _ref3[2];
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 8,
+    children: [importConfig && /*#__PURE__*/_jsx("span", {
+      className: styles['table-option-render-item'],
+      onClick: function onClick() {
+        var _importConfig$onClick;
+        (_importConfig$onClick = importConfig.onClick) === null || _importConfig$onClick === void 0 || _importConfig$onClick.call(importConfig);
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: importConfig.text || '导入',
+        children: importConfig.icon || /*#__PURE__*/_jsx(ImportOutlined, {})
+      })
+    }), exportConfig && /*#__PURE__*/_jsx("span", {
+      className: styles['table-option-render-item'],
+      onClick: function onClick() {
+        var _exportConfig$onClick;
+        (_exportConfig$onClick = exportConfig.onClick) === null || _exportConfig$onClick === void 0 || _exportConfig$onClick.call(exportConfig);
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: exportConfig.text || '导出',
+        children: exportConfig.icon || /*#__PURE__*/_jsx(ExportOutlined, {})
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      className: styles['table-option-render-item'],
+      children: reload
+    }), /*#__PURE__*/_jsx("span", {
+      className: styles['table-option-render-item'],
+      children: setting
+    })]
+  });
+};

package/dist/creek-table/TableViewContent.js

@@ -0,0 +1,45 @@
+import { useDebounceFn, useDeepCompareEffect } from 'ahooks';
+import { useViewportHeight } from "../creek-hooks";
+import { CreekFilterDisplay } from "../creek-search";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// 独立的 TableViewWrapper 组件 - 包含所有表格视图相关逻辑
+export var TableViewContent = function TableViewContent(props) {
+  var prefixCls = props.prefixCls,
+    pageFixedBottomConfig = props.pageFixedBottomConfig,
+    pageFixedBottom = props.pageFixedBottom,
+    children = props.children;
+  var _useViewportHeight = useViewportHeight({
+      isObserverParent: true
+    }),
+    containerRef = _useViewportHeight.containerRef,
+    viewPortHeight = _useViewportHeight.viewPortHeight;
+
+  // 设置antd内容区的高度，使得分页永远在底部
+  var _useDebounceFn = useDebounceFn(function (mainHeight) {
+      var _containerRef$current, _containerRef$current2;
+      var antdTableContentElement = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector(".".concat(prefixCls, "-table"));
+      var antdPaginationElement = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector(".".concat(prefixCls, "-pagination"));
+      if (antdTableContentElement) {
+        var paginationHeight = (antdPaginationElement === null || antdPaginationElement === void 0 ? void 0 : antdPaginationElement.clientHeight) || 0;
+        var bottomFix = (pageFixedBottomConfig === null || pageFixedBottomConfig === void 0 ? void 0 : pageFixedBottomConfig.bottomFix) || 8;
+        var tableContentHeight = mainHeight - paginationHeight - 16 - bottomFix;
+        antdTableContentElement.setAttribute('style', "height: ".concat(tableContentHeight, "px"));
+      }
+    }),
+    setAntdTableContentHeight = _useDebounceFn.run;
+  useDeepCompareEffect(function () {
+    if (pageFixedBottom) {
+      setAntdTableContentHeight(viewPortHeight !== null && viewPortHeight !== void 0 ? viewPortHeight : 0);
+    }
+  }, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);
+
+  // 默认渲染逻辑
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CreekFilterDisplay, {}), /*#__PURE__*/_jsx("div", {
+      ref: containerRef,
+      children: children
+    })]
+  });
+};

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

@@ -0,0 +1,3 @@
+export * from "./useAdaptiveToolBar";
+export * from "./useAutoAddFilterToColumns";
+export * from "./useElementDistance";

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

@@ -0,0 +1,48 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useRef, useState } from 'react';
+import { useElementDistance } from "./useElementDistance";
+export var useAdaptiveToolBar = function useAdaptiveToolBar(options) {
+  var element1Ref = useRef(null);
+  var element2Ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldCollapse = _useState2[0],
+    setShouldCollapse = _useState2[1];
+  var containerRef = options.containerRef,
+    prefixCls = options.prefixCls,
+    _options$minLeftDista = options.minLeftDistance,
+    minLeftDistance = _options$minLeftDista === void 0 ? 48 : _options$minLeftDista,
+    _options$hysteresis = options.hysteresis,
+    hysteresis = _options$hysteresis === void 0 ? 36 : _options$hysteresis;
+  useEffect(function () {
+    var _containerRef$current, _containerRef$current2;
+    element1Ref.current = (containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.querySelector(".".concat(prefixCls, "-pro-table-list-toolbar-left"))) || null;
+    element2Ref.current = (containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || (_containerRef$current2 = _containerRef$current2.querySelector(".".concat(prefixCls, "-pro-table-list-toolbar-right"))) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.querySelector('div')) || null;
+  });
+  var distance = useElementDistance(element1Ref, element2Ref);
+
+  // 方案一：使用滞回逻辑防止震荡
+  useEffect(function () {
+    if (!(distance !== null && distance !== void 0 && distance.x)) return;
+    var currentDistance = distance.x;
+    if (shouldCollapse) {
+      // 当前是折叠状态，需要距离足够大才展开
+      if (currentDistance > minLeftDistance + hysteresis) {
+        setShouldCollapse(false);
+      }
+    } else {
+      // 当前是展开状态，距离小于阈值时折叠
+      if (currentDistance < minLeftDistance) {
+        setShouldCollapse(true);
+      }
+    }
+  }, [distance === null || distance === void 0 ? void 0 : distance.x, minLeftDistance, hysteresis, shouldCollapse]);
+  return {
+    shouldCollapse: shouldCollapse
+  };
+};

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

@@ -0,0 +1,93 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useMemoizedFn, useSafeState } from 'ahooks';
+import { useMemo } from 'react';
+import { CreekSearchValueSelector, useSearchContext } from "../../creek-search";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useAutoAddFilterToColumns = function useAutoAddFilterToColumns(_ref) {
+  var columns = _ref.columns,
+    autoAddFilterForColumn = _ref.autoAddFilterForColumn;
+  var _useSearchContext = useSearchContext(),
+    hasOptions = _useSearchContext.hasOptions,
+    setSelectedColumn = _useSearchContext.setSelectedColumn,
+    filters = _useSearchContext.filters;
+
+  // 管理每列的下拉框状态
+  var _useSafeState = useSafeState({}),
+    _useSafeState2 = _slicedToArray(_useSafeState, 2),
+    filterOpenMap = _useSafeState2[0],
+    setFilterOpenMap = _useSafeState2[1];
+
+  // 获取列的唯一标识
+  var getColumnKey = useMemoizedFn(function (column) {
+    return column.dataIndex;
+  });
+
+  // 控制特定列的下拉框开关
+  var setColumnFilterOpen = useMemoizedFn(function (columnKey, open) {
+    setFilterOpenMap(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, columnKey, open));
+    });
+  });
+
+  // 关闭特定列的下拉框
+  var closeColumnFilter = useMemoizedFn(function (columnKey) {
+    setFilterOpenMap(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, columnKey, false));
+    });
+  });
+
+  // 自动为列添加筛选功能
+  var autoAddFilterToColumns = useMemoizedFn(function () {
+    var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return columns.map(function (column) {
+      if (hasOptions(column)) {
+        var newColumn = _objectSpread({}, column);
+        var columnKey = getColumnKey(newColumn);
+        return _objectSpread(_objectSpread({}, newColumn), {}, {
+          filters: (newColumn === null || newColumn === void 0 ? void 0 : newColumn.filters) || true,
+          onFilter: (newColumn === null || newColumn === void 0 ? void 0 : newColumn.onFilter) || false,
+          filtered: filters.map(function (item) {
+            return item.dataIndex;
+          }).includes(columnKey),
+          filterDropdown: /*#__PURE__*/_jsx(CreekSearchValueSelector, {
+            onConfirm: function onConfirm() {
+              // 点击确认时关闭当前列的下拉框
+              closeColumnFilter(columnKey);
+            }
+          }),
+          filterDropdownProps: {
+            open: filterOpenMap[columnKey] || false,
+            onOpenChange: function onOpenChange(open) {
+              if (open) {
+                var selectedColumn = columns.find(function (item) {
+                  return item.dataIndex === columnKey;
+                });
+                setSelectedColumn(selectedColumn);
+              }
+              setColumnFilterOpen(columnKey, open);
+            }
+          }
+        });
+      }
+      return column;
+    });
+  });
+  var columnsWithFilter = useMemo(function () {
+    return autoAddFilterForColumn ? autoAddFilterToColumns(columns) : columns;
+  }, [columns, filters, autoAddFilterToColumns, filterOpenMap]);
+  return {
+    columnsWithFilter: columnsWithFilter,
+    getColumnKey: getColumnKey
+  };
+};

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

@@ -0,0 +1,58 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useDebounceFn, useEventListener, useLatest } from 'ahooks';
+import { useEffect, useState } from 'react';
+var getElementCenter = function getElementCenter(element) {
+  var rect = element.getBoundingClientRect();
+  return {
+    left: rect.left,
+    width: rect.width
+  };
+};
+var calculateDistance = function calculateDistance(pos1, pos2) {
+  var x = Math.abs(pos2.left - pos1.left - pos1.width);
+  return {
+    x: x
+  };
+};
+export var useElementDistance = function useElementDistance(element1Ref, element2Ref) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    distance = _useState2[0],
+    setDistance = _useState2[1];
+  var distanceRef = useLatest(distance);
+  var _useDebounceFn = useDebounceFn(function () {
+      if (!element1Ref.current || !element2Ref.current) {
+        if (distanceRef.current !== null) {
+          setDistance(null);
+        }
+        return;
+      }
+      var pos1 = getElementCenter(element1Ref.current);
+      var pos2 = getElementCenter(element2Ref.current);
+      var newDistance = calculateDistance(pos1, pos2);
+
+      // 只有当距离发生变化时才更新，避免不必要的重渲染
+      if (!distanceRef.current || distanceRef.current.x !== newDistance.x) {
+        setDistance(newDistance);
+      }
+    }, {
+      wait: 100
+    }),
+    calculateAndUpdateDistance = _useDebounceFn.run;
+
+  // 初始计算
+  useEffect(function () {
+    calculateAndUpdateDistance();
+  }, [element1Ref, element2Ref]);
+
+  // 监听 window 的 resize 和 scroll 事件
+  useEventListener('resize', calculateAndUpdateDistance, {
+    target: window
+  });
+  return distance;
+};

package/dist/creek-table/index.js

@@ -0,0 +1,25 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["columns", "onSubmit"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { CreekSearchProvider } from "../creek-search";
+import { SearchProTable } from "./SearchTable";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var CreekTable = function CreekTable(props) {
+  var _props$columns = props.columns,
+    columns = _props$columns === void 0 ? [] : _props$columns,
+    onSubmit = props.onSubmit,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(CreekSearchProvider, {
+    columns: columns,
+    onSubmit: onSubmit,
+    children: /*#__PURE__*/_jsx(SearchProTable, _objectSpread({
+      columns: columns
+    }, restProps))
+  });
+};

package/dist/creek-table/toolBarRender.js

@@ -0,0 +1,36 @@
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { DownOutlined } from '@ant-design/icons';
+import { Button, Dropdown } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var toolBarRender = function toolBarRender(options) {
+  var _restProps$toolBarRen;
+  var shouldCollapse = options.shouldCollapse,
+    restProps = options.restProps;
+  var baseActions = ((_restProps$toolBarRen = restProps.toolBarRender) === null || _restProps$toolBarRen === void 0 ? void 0 : _restProps$toolBarRen.call(restProps)) || [];
+  if (!shouldCollapse || baseActions.length <= 1) {
+    return baseActions;
+  }
+  var _baseActions = _toArray(baseActions),
+    first = _baseActions[0],
+    rest = _baseActions.slice(1);
+  return [first, /*#__PURE__*/_jsx(Dropdown, {
+    menu: {
+      items: rest.map(function (item, index) {
+        return {
+          key: index,
+          label: item
+        };
+      })
+    },
+    trigger: ['click'],
+    children: /*#__PURE__*/_jsxs(Button, {
+      children: ["\u66F4\u591A ", /*#__PURE__*/_jsx(DownOutlined, {})]
+    })
+  }, "more")];
+};

package/dist/creek-table/type.js

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from "./bg-center";
+export * from "./creek-config-provider";
+export * from "./creek-icon";
+export * from "./creek-layout";
+export * from "./creek-loading";
+export * from "./creek-search";
+export * from "./creek-table";

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@creekjs/web-components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "father:build": "father build",
+    "father:dev": "father dev"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@ant-design/icons": "^5.5.1",
+    "@ant-design/pro-components": "^2.7.18",
+    "antd-style": "^3.7.1",
+    "zustand": "^5.0.1"
+  }
+}

package/src/bg-center/index.tsx

@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style';
+
+export type BgCenterProps = {
+  children: React.ReactNode;
+};
+
+export const BgCenter = ({ children }: BgCenterProps) => {
+  const useStyles = createStyles(({ token }) => ({
+    bgCenterContianer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.7)',
+      zIndex: token.zIndexBase,
+    },
+  }));
+
+  const { styles } = useStyles();
+
+  return <div className={styles.bgCenterContianer}>{children}</div>;
+};

package/src/creek-config-provider/CreekConfigContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export type CreekConfigContextProps = {
+  iconFontCNs?: string[]
+};
+
+export const CreekConfigContext = createContext<CreekConfigContextProps>({});

package/src/creek-config-provider/index.tsx

@@ -0,0 +1,12 @@
+import { CreekConfigContext, CreekConfigContextProps } from './CreekConfigContext';
+
+export type CreekConfigProviderProps = CreekConfigContextProps & {
+  children?: React.ReactNode;
+};
+
+export const CreekConfigProvider = (props: CreekConfigProviderProps) => {
+  const { children, ...more } = props;
+  return <CreekConfigContext.Provider value={more}>{children}</CreekConfigContext.Provider>;
+};
+
+CreekConfigProvider.CreekConfigContext = CreekConfigContext;

package/src/creek-hooks/index.ts

@@ -0,0 +1 @@
+export * from './useViewportHeight';

package/src/creek-hooks/useViewportHeight.tsx

@@ -0,0 +1,154 @@
+import { useDebounceEffect, useDeepCompareEffect, useEventListener, useMemoizedFn, useMount, useUnmount } from 'ahooks';
+import { useRef, useState } from 'react';
+
+interface UseViewportHeightOptions {
+  /** 底部保留空间（如固定在底部的元素高度），默认 0 */
+  bottomOffset?: number;
+  /** 顶部保留空间，默认自动计算到容器顶部的距离 */
+  topOffset?: number;
+  /** 额外的边距，默认 0 */
+  margin?: number;
+  /** 最小高度，默认 0 */
+  minHeight?: number;
+  /** 最大高度，不设置则无限制 */
+  maxHeight?: number;
+  /** 是否启用调试模式，会在控制台输出计算信息 */
+  debug?: boolean;
+  /** 防抖延迟时间（毫秒），默认 16ms */
+  debounceDelay?: number;
+  /** 依赖项数组，当这些值变化时会重新计算高度（比如搜索条件） */
+  deps?: React.DependencyList;
+
+  isObserverParent?: boolean;
+}
+
+export const useViewportHeight = (options: UseViewportHeightOptions = {}) => {
+  const { bottomOffset = 0, topOffset, margin = 0, minHeight = 0, maxHeight, debug = false, debounceDelay = 16, deps = [], isObserverParent } = options;
+
+  const [viewPortHeight, setHeight] = useState<number | undefined>(undefined);
+  let containerRef = useRef<HTMLDivElement| null>(null);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+  const mutationObserverRef = useRef<MutationObserver | null>(null);
+
+  // 使用 useMemoizedFn 缓存计算函数，避免不必要的重新创建
+  const calculateHeight = useMemoizedFn(() => {
+    if (!containerRef.current) return;
+
+    const container = containerRef.current;
+    const rect = container.getBoundingClientRect();
+
+    // 计算顶部偏移量
+    const calculatedTopOffset = topOffset ?? rect.top;
+
+    // 计算可用高度
+    const viewportHeight = window.innerHeight;
+    let availableHeight = viewportHeight - calculatedTopOffset - bottomOffset - margin;
+
+    // 应用最小/最大高度限制
+    if (minHeight > 0) {
+      availableHeight = Math.max(availableHeight, minHeight);
+    }
+
+    if (maxHeight && maxHeight > 0) {
+      availableHeight = Math.min(availableHeight, maxHeight);
+    }
+
+    if (debug) {
+      console.log('计算可视区域高度:', {
+        viewportHeight,
+        calculatedTopOffset,
+        bottomOffset,
+        margin,
+        minHeight,
+        maxHeight,
+        availableHeight,
+        containerRect: rect,
+      });
+    }
+
+    setHeight(availableHeight);
+  });
+
+  // 使用 ahooks 的 useEventListener 监听窗口 resize 事件
+  useEventListener('resize', calculateHeight, { target: () => window });
+
+  // 使用 useDebounceEffect 处理依赖项变化时的防抖计算
+  useDebounceEffect(
+    () => {
+      if (containerRef.current) {
+        calculateHeight();
+      }
+    },
+    [...deps, topOffset, bottomOffset, margin, minHeight, maxHeight],
+    { wait: debounceDelay },
+  );
+
+  // 初始化计算
+  useMount(() => {
+    calculateHeight();
+  });
+
+  // 设置观察器
+  const setupObservers = useMemoizedFn(() => {
+    if (!containerRef.current) return;
+
+    const container = containerRef.current;
+    const observerParent = isObserverParent ? container.parentElement : container;
+
+    if(!observerParent) return;
+
+    cleanupObservers();
+
+    resizeObserverRef.current = new ResizeObserver(() => {
+      calculateHeight();
+    });
+    
+    resizeObserverRef.current.observe(container);
+
+    mutationObserverRef.current = new MutationObserver(() => {
+      setTimeout(calculateHeight, 0);
+    });
+
+    mutationObserverRef.current.observe(observerParent, {
+      childList: true,
+      subtree: false, // 只监听直接子节点变化
+      attributes: false,
+    });
+  });
+
+  // 清理观察器
+  const cleanupObservers = useMemoizedFn(() => {
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+
+    if (mutationObserverRef.current) {
+      mutationObserverRef.current.disconnect();
+      mutationObserverRef.current = null;
+    }
+  });
+
+
+  // 组件卸载时清理
+  useUnmount(() => {
+    cleanupObservers();
+  });
+
+  useDeepCompareEffect(() => {
+    if(containerRef.current) {
+      setupObservers();
+    }
+  }, [containerRef.current])
+
+  return {
+    /** 容器引用，需要绑定到目标元素的容器 */
+    containerRef,
+    /** 计算得出的可视区域高度 */
+    viewPortHeight,
+    /** 手动重新计算高度的方法 */
+    recalculate: calculateHeight,
+    /** 是否已完成高度计算 */
+    isCalculated: viewPortHeight !== undefined,
+  };
+};