@creekjs/web-components 1.0.0

package/src/creek-search/CreekSearchInput.tsx

@@ -0,0 +1,75 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { AutoComplete, Input, Popover } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+
+import { useSearchContext } from './CreekSearchContext';
+import { CreekSearchValueSelector } from './CreekSearchValueSelector';
+
+const useStyles = createStyles(({ token, prefixCls }) => {
+
+  return {
+    searchWrapper: {
+      width: 350,
+      position: 'relative',
+    },
+    autoCompleteContainer: {
+      width: '100%',
+    },
+    searchInput: {
+      [`& .${prefixCls}-input`]: { fontSize: token.fontSize },
+      [`& .${prefixCls}-input-prefix`]: { color: token.colorTextTertiary },
+    },
+    popoverContent: {
+      [`& .${prefixCls}-popover-inner`]: { padding: 0 },
+    },
+  };
+});
+
+// 搜索输入框组件
+const SearchInput = () => {
+  const { styles } = useStyles();
+  const { searchValue, filterOptions, inputRef, setSearchValue, handleSearch, handleSelectColumn } = useSearchContext();
+
+  // AutoComplete 选项
+  const autoCompleteOptions = filterOptions?.map((option) => ({
+    value: option.dataIndex,
+    label: option.title,
+  }));
+
+  return (
+    <AutoComplete ref={inputRef} className={styles.autoCompleteContainer} options={autoCompleteOptions} onSearch={setSearchValue} onSelect={handleSelectColumn} value={searchValue} allowClear>
+      <Input placeholder="添加筛选条件" prefix={<SearchOutlined />} onPressEnter={(e) => handleSearch((e.target as HTMLInputElement).value)} className={styles.searchInput} />
+    </AutoComplete>
+  );
+};
+
+export type CreekSearchInputProps = {
+  className?: string;
+};
+// 主搜索输入组件
+export const CreekSearchInput = (props: CreekSearchInputProps) => {
+  const { className } = props;
+  const { styles } = useStyles();
+  const { showValueSelector, cancelValueSelector } = useSearchContext();
+
+  return (
+    <div className={classNames(styles.searchWrapper, className)}>
+      <Popover
+        content={<CreekSearchValueSelector />}
+        trigger="click"
+        arrow={false}
+        open={showValueSelector}
+        onOpenChange={(visible) => {
+          if (!visible) {
+            cancelValueSelector();
+          }
+        }}
+        overlayClassName={styles.popoverContent}
+        placement="bottomLeft"
+      >
+        <SearchInput />
+      </Popover>
+    </div>
+  );
+};

package/src/creek-search/CreekSearchValueSelector.tsx

@@ -0,0 +1,324 @@
+import { ParamsType } from '@ant-design/pro-components';
+import { Button, Checkbox, DatePicker, Input, InputNumber, Radio, Select, Space, Switch, TimePicker } from 'antd';
+import { createStyles } from 'antd-style';
+import _ from 'lodash';
+import { useEffect, useMemo } from 'react';
+
+import { useSearchContext } from './CreekSearchContext';
+
+const { RangePicker } = DatePicker;
+const { RangePicker: TimeRangePicker } = TimePicker;
+
+// 组件渲染器接口
+interface ComponentRendererProps {
+  column: any;
+  value: any;
+  onChange: (value: any) => void;
+  className?: string;
+}
+
+// 各类型组件渲染器
+const ComponentRenderer = ({ column, value, onChange, className }: ComponentRendererProps) => {
+  const { getValueTypeConfig, getColumnOptions, hasOptions } = useSearchContext();
+
+  const { valueType, fieldProps = {} } = column;
+
+  const config = getValueTypeConfig(valueType);
+  const baseStyle = { width: '100%' };
+  const mergedProps = { ...fieldProps, style: { ...baseStyle, ...fieldProps.style } };
+
+  // 如果有选项配置，优先使用选项组件
+  if (hasOptions(column)) {
+    const options = getColumnOptions(column);
+
+    switch (config.componentType) {
+      case 'radio':
+        const radioOptions = options.map((option) => ({
+          ...option,
+        }));
+
+        return <Radio.Group {...mergedProps} className={className} value={value} onChange={(e) => onChange(e.target.value)} options={radioOptions} />;
+
+      case 'checkbox':
+        const currentValue = value || [];
+        const allValues = options.map((opt) => opt.value);
+        const checkAll = allValues.length === currentValue.length && allValues.length > 0;
+        const indeterminate = currentValue.length > 0 && currentValue.length < allValues.length;
+
+        const handleCheckboxChange = (checkedValues: any[]) => {
+          onChange(checkedValues);
+        };
+
+        const onCheckAllChange = (e: any) => {
+          onChange(e.target.checked ? allValues : []);
+        };
+
+        return (
+          <div className={className}>
+            <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll} style={{ marginBottom: 4 }}>
+              全部
+            </Checkbox>
+            <Checkbox.Group {...mergedProps} value={currentValue} onChange={handleCheckboxChange} options={options} />
+          </div>
+        );
+
+      case 'select':
+      default:
+        return <Select {...mergedProps} placeholder="请选择" value={value} onChange={onChange} options={options} showSearch allowClear />;
+    }
+  }
+
+  // 根据组件类型渲染对应组件
+  switch (config.componentType) {
+    case 'input':
+      return <Input {...mergedProps} placeholder={fieldProps.placeholder || '请输入值'} value={value} onChange={(e) => onChange(e.target.value)} />;
+
+    case 'number':
+      return <InputNumber {...mergedProps} placeholder={fieldProps.placeholder || '请输入数字'} value={value} onChange={onChange} />;
+
+    case 'select':
+      // 处理switch类型的特殊情况
+      if (valueType === 'switch') {
+        return <Select {...mergedProps} placeholder="请选择" value={value} onChange={onChange} allowClear />;
+      }
+      return <Select {...mergedProps} placeholder="请选择" value={value} onChange={onChange} allowClear />;
+
+    case 'switch':
+      return <Switch {...mergedProps} checked={value} onChange={onChange} />;
+
+    case 'date':
+      const dateProps = {
+        ...mergedProps,
+        placeholder: fieldProps.placeholder || '请选择日期',
+        value: value,
+        onChange: onChange,
+      };
+
+      // 根据具体的日期类型渲染不同的组件
+      switch (valueType) {
+        case 'dateTime':
+          return <DatePicker {...dateProps} showTime />;
+        case 'dateMonth':
+          return <DatePicker {...dateProps} picker="month" />;
+        case 'dateWeek':
+          return <DatePicker {...dateProps} picker="week" />;
+        case 'dateQuarter':
+          return <DatePicker {...dateProps} picker="quarter" />;
+        case 'dateYear':
+          return <DatePicker {...dateProps} picker="year" />;
+        case 'date':
+        default:
+          return <DatePicker {...dateProps} />;
+      }
+
+    case 'dateRange':
+      const rangeProps = {
+        ...mergedProps,
+        placeholder: fieldProps.placeholder || ['开始日期', '结束日期'],
+        value: value,
+        onChange: onChange,
+      };
+
+      // 根据具体的日期范围类型渲染不同的组件
+      switch (valueType) {
+        case 'dateTimeRange':
+          return <RangePicker {...rangeProps} showTime />;
+        case 'dateMonthRange':
+          return <RangePicker {...rangeProps} picker="month" />;
+        case 'dateWeekRange':
+          return <RangePicker {...rangeProps} picker="week" />;
+        case 'dateQuarterRange':
+          return <RangePicker {...rangeProps} picker="quarter" />;
+        case 'dateYearRange':
+          return <RangePicker {...rangeProps} picker="year" />;
+        case 'dateRange':
+        default:
+          return <RangePicker {...rangeProps} />;
+      }
+
+    case 'time':
+      return <TimePicker {...mergedProps} placeholder={fieldProps.placeholder || '请选择时间'} value={value} onChange={onChange} />;
+
+    case 'timeRange':
+      return <TimeRangePicker {...mergedProps} placeholder={fieldProps.placeholder || ['开始时间', '结束时间']} value={value} onChange={onChange} />;
+
+    case 'radio':
+      const iswitch = valueType === 'switch';
+      const radioOptions = [
+        { label: '开', value: true },
+        { label: '关', value: false },
+      ];
+      const _radioOptions = iswitch ? radioOptions : mergedProps.options;
+
+      // 如果valueType是switch，使用RadioButton样式
+      return <Radio.Group {...mergedProps} options={_radioOptions} className={className} value={value} onChange={(e) => onChange(e.target.value)} />;
+
+    case 'checkbox':
+      return <Checkbox.Group {...mergedProps} className={className} value={value} onChange={onChange} />;
+
+    default:
+      return <Input {...mergedProps} placeholder="请输入值" value={value} onChange={(e) => onChange(e.target.value)} />;
+  }
+};
+
+// 样式定义
+const useStyles = createStyles(({ token, prefixCls }) => {
+  const selectedBgColor = '#F5F7F9';
+
+  // 公共选项样式
+  const optionBase = {
+    width: '100%',
+    padding: 8,
+    borderRadius: 2,
+    marginBottom: 4,
+    marginInlineEnd: 0,
+    '&:hover': { backgroundColor: selectedBgColor },
+  };
+
+  return {
+    valueSelectorContent: {
+      padding: 8,
+      borderBottom: `1px solid ${token.colorBorderSecondary}`,
+
+      // 复用公共样式
+      [`& .${prefixCls}-checkbox-wrapper, & .${prefixCls}-radio-wrapper`]: optionBase,
+
+      // checked 状态
+      [`& .${prefixCls}-checkbox-wrapper-checked, & .${prefixCls}-radio-wrapper-checked`]: {
+        backgroundColor: selectedBgColor,
+      },
+    },
+
+    valueSelectorActions: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      gap: token.marginXS,
+      padding: 8,
+    },
+    verticalStyle: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+
+    // 不同宽度样式
+    smallSelector: { width: 80 },
+    narrowSelector: { width: 150 },
+    mediumSelector: { width: 280 },
+    wideSelector: { width: 350 },
+  };
+});
+
+export type CreekSearchValueSelectorProps<T extends ParamsType, U extends ParamsType> = {
+  onConfirm?: () => void;
+};
+
+// 根据不同类型获取初始值
+const getInitialValue = (componentType: string) => {
+  switch (componentType) {
+    case 'checkbox':
+      return [];
+    case 'switch':
+      return false;
+    case 'number':
+      return undefined; // InputNumber 使用 undefined 而不是 null
+    default:
+      return null;
+  }
+};
+
+// 值选择器组件
+export const CreekSearchValueSelector = <T extends ParamsType, U extends ParamsType>(props: CreekSearchValueSelectorProps<T, U>) => {
+  const { styles } = useStyles();
+  const searchContext = useSearchContext();
+
+  const { selectedColumn, tempValue, setTempValue, confirmAddFilter, getValueTypeConfig, filters } = searchContext;
+  const { onConfirm } = props;
+
+  const config = getValueTypeConfig(selectedColumn?.valueType);
+
+  // 获取当前过滤器的值
+  const currentFilterValue = useMemo(() => {
+    const currentFilter = filters.find((item) => item.dataIndex === selectedColumn?.dataIndex);
+    return currentFilter?.value;
+  }, [filters, selectedColumn]);
+
+  // 计算实际显示的值
+  const actualValue = useMemo(() => {
+    // 如果 tempValue 已设置（不是 null 和 undefined），优先使用 tempValue
+    if (tempValue !== null && tempValue !== undefined) {
+      return tempValue;
+    }
+    // 否则使用当前过滤器的值，如果也没有则使用初始值
+    return currentFilterValue ?? getInitialValue(config.componentType);
+  }, [tempValue, currentFilterValue, selectedColumn?.valueType, config.componentType]);
+
+  // 当选择的列发生变化时，重置 tempValue 为当前过滤器的值
+  useEffect(() => {
+    if (selectedColumn) {
+      const currentFilter = filters.find((item) => item.dataIndex === selectedColumn.dataIndex);
+      if (currentFilter?.value !== undefined) {
+        setTempValue(currentFilter.value);
+      } else {
+        // 如果没有现有的过滤器值，设置为初始值
+        setTempValue(getInitialValue(config.componentType));
+      }
+    }
+  }, [selectedColumn?.dataIndex]); // 只在 selectedColumn.dataIndex 变化时触发
+
+  // 根据组件类型获取合适的宽度
+  const getPopoverWidth = () => {
+    switch (config.componentType) {
+      case 'select':
+      case 'radio':
+      case 'checkbox':
+      case 'switch':
+        return styles.narrowSelector;
+      case 'number':
+        return styles.mediumSelector;
+      case 'date':
+      case 'dateRange':
+      case 'time':
+      case 'timeRange':
+      default:
+        return styles.wideSelector;
+    }
+  };
+
+  // 重置值的处理
+  const handleReset = () => {
+    const initialValue = getInitialValue(config.componentType);
+    setTempValue(initialValue);
+  };
+
+  // 处理值的变化
+  const handleValueChange = (value: any) => {
+    setTempValue(value);
+  };
+
+  return selectedColumn ? (
+    <div className={getPopoverWidth()}>
+      <div className={styles.valueSelectorContent}>
+        <ComponentRenderer column={selectedColumn} value={actualValue} onChange={handleValueChange} className={['radio', 'checkbox'].includes(config.componentType) ? styles.verticalStyle : ''} />
+      </div>
+      <div className={styles.valueSelectorActions}>
+        <Space size="small">
+          <Button size="small" onClick={handleReset}>
+            重置
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => {
+              confirmAddFilter();
+              if (_.isFunction(onConfirm)) {
+                onConfirm();
+              }
+            }}
+          >
+            确定
+          </Button>
+        </Space>
+      </div>
+    </div>
+  ) : null;
+};

package/src/creek-search/index.tsx

@@ -0,0 +1,5 @@
+export * from './CreekSearch';
+export * from './CreekSearchContext';
+export * from './CreekSearchFilterDisplay';
+export * from './CreekSearchInput';
+export * from './CreekSearchValueSelector';

package/src/creek-search/type.ts

@@ -0,0 +1,9 @@
+export type CreekSearchAddFilterOption = {
+  value: any;
+  displayText?: string;
+};
+
+export type CreekSearchFilter = CreekSearchAddFilterOption & {
+  dataIndex: string;
+  title: string;
+};

package/src/creek-table/SearchTable.tsx

@@ -0,0 +1,115 @@
+import { ParamsType, ProTable } from '@ant-design/pro-components';
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
+import _ from 'lodash';
+import { useMemo, useRef } from 'react';
+
+import { CreekFilterDisplay, CreekSearchInput, useSearchContext } from '../creek-search';
+
+import { useAdaptiveToolBar, useAutoAddFilterToColumns } from './hooks';
+import { TableOptionRender } from './TableOptionRender';
+import { TableViewContent } from './TableViewContent';
+import { toolBarRender } from './toolBarRender';
+import { CreekTableProps } from './type';
+
+const useStyles = createStyles(({ prefixCls }) => {
+  return {
+    'creek-table-container': {
+      [`.${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 searchContext = useSearchContext();
+  const { filters, filtersToParams } = searchContext;
+
+  const proTableRef = useRef(null);
+
+  // 使用自定义 hook 处理列的筛选功能（包含状态管理）
+  const { columnsWithFilter } = useAutoAddFilterToColumns({
+    columns,
+    autoAddFilterForColumn,
+  });
+
+  // 使用自定义 hook 处理工具栏的自适应功能
+  const { shouldCollapse } = useAdaptiveToolBar({
+    containerRef: proTableRef,
+    prefixCls,
+  });
+
+  const { styles } = useStyles();
+
+  // 获取搜素的参数
+  const finalParams = useMemo(() => {
+    let result = filtersToParams(filters) as U;
+    return result;
+  }, [filters]);
+
+  return (
+    <div ref={proTableRef}>
+      <ProTable<T, U, ValueType>
+        {...restProps}
+        className={classnames(styles['creek-table-container'], className)}
+        columns={columnsWithFilter}
+        toolbar={{
+          ...restProps.toolbar,
+        }}
+        params={{
+          ...params,
+          ...finalParams,
+        }}
+        search={false}
+        pagination={{
+          showTotal: (total) => <span>共 {total} 条</span>,
+          showSizeChanger: true,
+          ...pagination,
+        }}
+        optionsRender={(defaultProps, dom) => {
+          return _.isFunction(optionsRender)
+            ? optionsRender(defaultProps, dom)
+            : restProps?.options
+              ? [<TableOptionRender key="option" defaultDom={dom} importConfig={restProps?.options?.importConfig} exportConfig={restProps?.options?.exportConfig} />]
+              : [];
+        }}
+        toolBarRender={() => {
+          return toolBarRender({ shouldCollapse, restProps  });
+        }}
+        // 在 headerTitle 中只放搜索输入框
+        headerTitle={<CreekSearchInput />}
+        // 在表格内容区上方显示筛选条件
+        tableViewRender={(defaultProps, defaultDom) => {
+          return _.isFunction(tableViewRender) ? (
+            <>
+              <CreekFilterDisplay />
+              {tableViewRender(defaultProps, defaultDom)}
+            </>
+          ) : (
+            <TableViewContent<T, U, ValueType> pageFixedBottom={pageFixedBottom} pageFixedBottomConfig={pageFixedBottomConfig} prefixCls={prefixCls}>
+              {defaultDom}
+            </TableViewContent>
+          );
+        }}
+      />
+    </div>
+  );
+};

package/src/creek-table/TableOptionRender.tsx

@@ -0,0 +1,57 @@
+import { ExportOutlined, ImportOutlined } from '@ant-design/icons';
+import { ParamsType } from '@ant-design/pro-components';
+import { Space, Tooltip } from 'antd';
+import { createStyles } from 'antd-style';
+
+import { OptionRenderCustom } from './type';
+
+const useStyles = createStyles(({ prefixCls, token }) => {
+  return {
+    'table-option-render-item': {
+      border: `1px solid ${token.colorBorder}`,
+      borderRadius: token.borderRadius,
+      padding: '8px',
+      cursor: 'pointer',
+    },
+  };
+});
+
+export type TableOptionRenderProps<T extends ParamsType, U extends ParamsType, ValueType = 'text'> = {
+  defaultDom?: React.ReactNode[];
+  importConfig?: OptionRenderCustom;
+  exportConfig?: OptionRenderCustom;
+};
+
+export const TableOptionRender = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: TableOptionRenderProps<T, U, ValueType>) => {
+  const { defaultDom, importConfig, exportConfig } = props;
+
+  const { styles } = useStyles();
+
+  const [reload, dis, setting] = defaultDom || [];
+  return (
+    <Space size={8}>
+      {importConfig && (
+        <span
+          className={styles['table-option-render-item']}
+          onClick={() => {
+            importConfig.onClick?.();
+          }}
+        >
+          <Tooltip title={importConfig.text || '导入'}>{importConfig.icon || <ImportOutlined />}</Tooltip>
+        </span>
+      )}
+      {exportConfig && (
+        <span
+          className={styles['table-option-render-item']}
+          onClick={() => {
+            exportConfig.onClick?.();
+          }}
+        >
+          <Tooltip title={exportConfig.text || '导出'}>{exportConfig.icon || <ExportOutlined />}</Tooltip>
+        </span>
+      )}
+      <span className={styles['table-option-render-item']}>{reload}</span>
+      <span className={styles['table-option-render-item']}>{setting}</span>
+    </Space>
+  );
+};

package/src/creek-table/TableViewContent.tsx

@@ -0,0 +1,44 @@
+import { ParamsType } from '@ant-design/pro-components';
+
+import { useDebounceFn, useDeepCompareEffect } from 'ahooks';
+
+import { useViewportHeight } from '../creek-hooks';
+import { CreekFilterDisplay } from '../creek-search';
+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 || 8;
+      const tableContentHeight = mainHeight - paginationHeight - 16 - bottomFix;
+      antdTableContentElement.setAttribute('style', `height: ${tableContentHeight}px`);
+    }
+  });
+
+  useDeepCompareEffect(() => {
+    if (pageFixedBottom) {
+      setAntdTableContentHeight(viewPortHeight ?? 0);
+    }
+  }, [viewPortHeight, pageFixedBottom, setAntdTableContentHeight]);
+
+  // 默认渲染逻辑
+  return (
+    <>
+      <CreekFilterDisplay />
+      <div ref={containerRef}>{children}</div>
+    </>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from './useAdaptiveToolBar';
+export * from './useAutoAddFilterToColumns';
+export * from './useElementDistance';
+

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

@@ -0,0 +1,45 @@
+import { MutableRefObject, useEffect, useRef, useState } from 'react';
+import { useElementDistance } from './useElementDistance';
+
+export const useAdaptiveToolBar = (options: {
+  containerRef: MutableRefObject<HTMLElement | null>;
+  prefixCls: string;
+  minLeftDistance?: number;
+  hysteresis?: number; // 滞回差值
+}) => {
+  const element1Ref = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement | null>;
+  const element2Ref = useRef<HTMLElement>(null) as MutableRefObject<HTMLElement | null>;
+  const [shouldCollapse, setShouldCollapse] = useState(false);
+
+  const { containerRef, prefixCls, minLeftDistance = 48, hysteresis = 36 } = options;
+
+  useEffect(() => {
+    element1Ref.current = containerRef?.current?.querySelector(`.${prefixCls}-pro-table-list-toolbar-left`) || null;
+    element2Ref.current = containerRef?.current?.querySelector(`.${prefixCls}-pro-table-list-toolbar-right`)?.querySelector('div') || null;
+  });
+
+  const distance = useElementDistance(element1Ref, element2Ref);
+
+  // 方案一：使用滞回逻辑防止震荡
+  useEffect(() => {
+    if (!distance?.x) return;
+
+    const currentDistance = distance.x;
+
+    if (shouldCollapse) {
+      // 当前是折叠状态，需要距离足够大才展开
+      if (currentDistance > minLeftDistance + hysteresis) {
+        setShouldCollapse(false);
+      }
+    } else {
+      // 当前是展开状态，距离小于阈值时折叠
+      if (currentDistance < minLeftDistance) {
+        setShouldCollapse(true);
+      }
+    }
+  }, [distance?.x, minLeftDistance, hysteresis, shouldCollapse]);
+
+  return {
+    shouldCollapse,
+  };
+};