@creekjs/web-components 1.0.0

package/dist/creek-search/CreekSearch.js

@@ -0,0 +1,51 @@
+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 _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); }
+import { createStyles } from 'antd-style';
+import classnames from 'classnames';
+import { CreekSearchProvider } from "./CreekSearchContext";
+import { CreekFilterDisplay } from "./CreekSearchFilterDisplay";
+import { CreekSearchInput } from "./CreekSearchInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref, props) {
+  var token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  return {
+    creekSearchContainer: {
+      padding: '20px 20px 0 20px',
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: props.justify === 'end' ? 'flex-end' : 'flex-start'
+    },
+    creekSearchContainerEnd: _defineProperty({}, "& .".concat(prefixCls, "-tag"), {
+      marginInlineEnd: 0
+    }),
+    creekSearchFilterDisplay: {
+      marginTop: '10px'
+    }
+  };
+});
+export var CreekSearch = function CreekSearch(props) {
+  var _props$columns = props.columns,
+    columns = _props$columns === void 0 ? [] : _props$columns,
+    onSubmit = props.onSubmit,
+    _props$justify = props.justify,
+    justify = _props$justify === void 0 ? 'start' : _props$justify;
+  var _useStyles = useStyles({
+      justify: justify
+    }),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx(CreekSearchProvider, {
+    columns: columns,
+    onSubmit: onSubmit,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classnames(styles.creekSearchContainer, justify === 'end' && styles.creekSearchContainerEnd),
+      children: [/*#__PURE__*/_jsx(CreekSearchInput, {}), /*#__PURE__*/_jsx(CreekFilterDisplay, {
+        className: styles.creekSearchFilterDisplay
+      })]
+    })
+  });
+};

package/dist/creek-search/CreekSearchContext.js

@@ -0,0 +1,546 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _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 _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 dayjs from 'dayjs';
+import _ from 'lodash';
+import React, { createContext, useContext, useRef, useState } from 'react';
+
+// ValueType配置接口
+import { jsx as _jsx } from "react/jsx-runtime";
+// ValueType配置映射表
+var VALUE_TYPE_CONFIG_MAP = {
+  // 文本输入类
+  text: {
+    showValueSelector: false,
+    displayName: '文本',
+    componentType: 'input'
+  },
+  textarea: {
+    showValueSelector: false,
+    displayName: '多行文本',
+    componentType: 'input'
+  },
+  password: {
+    showValueSelector: false,
+    displayName: '密码',
+    componentType: 'input'
+  },
+  // 数字类
+  digit: {
+    showValueSelector: true,
+    displayName: '数字',
+    componentType: 'number'
+  },
+  money: {
+    showValueSelector: true,
+    displayName: '金额',
+    componentType: 'number'
+  },
+  percent: {
+    showValueSelector: true,
+    displayName: '百分比',
+    componentType: 'number'
+  },
+  // 选择类
+  select: {
+    showValueSelector: true,
+    displayName: '选择器',
+    componentType: 'select'
+  },
+  radio: {
+    showValueSelector: true,
+    displayName: '单选',
+    componentType: 'radio'
+  },
+  radioButton: {
+    showValueSelector: true,
+    displayName: '单选按钮',
+    componentType: 'radio'
+  },
+  checkbox: {
+    showValueSelector: true,
+    displayName: '多选',
+    componentType: 'checkbox'
+  },
+  switch: {
+    showValueSelector: true,
+    displayName: '开关',
+    componentType: 'radio'
+  },
+  // 日期类 - 单选
+  date: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-MM-DD',
+    isDateTime: true,
+    isRange: false,
+    displayName: '日期',
+    componentType: 'date'
+  },
+  dateWeek: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-wo',
+    isDateTime: true,
+    isRange: false,
+    displayName: '周',
+    componentType: 'date'
+  },
+  dateMonth: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-MM',
+    isDateTime: true,
+    isRange: false,
+    displayName: '月份',
+    componentType: 'date'
+  },
+  dateQuarter: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-[Q]Q',
+    isDateTime: true,
+    isRange: false,
+    displayName: '季度',
+    componentType: 'date'
+  },
+  dateYear: {
+    showValueSelector: true,
+    dateFormat: 'YYYY',
+    isDateTime: true,
+    isRange: false,
+    displayName: '年份',
+    componentType: 'date'
+  },
+  dateTime: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-MM-DD HH:mm:ss',
+    isDateTime: true,
+    isRange: false,
+    displayName: '日期时间',
+    componentType: 'date'
+  },
+  time: {
+    showValueSelector: true,
+    dateFormat: 'HH:mm:ss',
+    isDateTime: true,
+    isRange: false,
+    displayName: '时间',
+    componentType: 'time'
+  },
+  // 日期类 - 范围
+  dateRange: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-MM-DD',
+    isDateTime: true,
+    isRange: true,
+    displayName: '日期范围',
+    componentType: 'dateRange'
+  },
+  dateTimeRange: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-MM-DD HH:mm:ss',
+    isDateTime: true,
+    isRange: true,
+    displayName: '日期时间范围',
+    componentType: 'dateRange'
+  },
+  timeRange: {
+    showValueSelector: true,
+    dateFormat: 'HH:mm:ss',
+    isDateTime: true,
+    isRange: true,
+    displayName: '时间范围',
+    componentType: 'timeRange'
+  },
+  dateWeekRange: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-wo',
+    isDateTime: true,
+    isRange: true,
+    displayName: '周范围',
+    componentType: 'dateRange'
+  },
+  dateMonthRange: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-MM',
+    isDateTime: true,
+    isRange: true,
+    displayName: '月份范围',
+    componentType: 'dateRange'
+  },
+  dateQuarterRange: {
+    showValueSelector: true,
+    dateFormat: 'YYYY-[Q]Q',
+    isDateTime: true,
+    isRange: true,
+    displayName: '季度范围',
+    componentType: 'dateRange'
+  },
+  dateYearRange: {
+    showValueSelector: true,
+    dateFormat: 'YYYY',
+    isDateTime: true,
+    isRange: true,
+    displayName: '年份范围',
+    componentType: 'dateRange'
+  }
+};
+var SearchContext = /*#__PURE__*/createContext(null);
+export var useSearchContext = function useSearchContext() {
+  var context = useContext(SearchContext);
+  if (!context) {
+    throw new Error('useSearchContext must be used within CreekSearchProvider');
+  }
+  return context;
+};
+export var CreekSearchProvider = function CreekSearchProvider(_ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    onSubmit = _ref.onSubmit,
+    beforeSearchSubmit = _ref.beforeSearchSubmit,
+    children = _ref.children;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showValueSelector = _useState6[0],
+    setShowValueSelector = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedColumn = _useState8[0],
+    setSelectedColumn = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    tempValue = _useState10[0],
+    setTempValue = _useState10[1];
+  var inputRef = useRef(null);
+
+  // 筛选条件配置
+  var filterOptions = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) {
+    return item.search !== false || item.hideInSearch !== false;
+  });
+
+  // 获取valueType配置
+  var getValueTypeConfig = function getValueTypeConfig(valueType) {
+    // 如果valueType为undefined，使用默认的text类型
+    var validValueType = valueType || 'text';
+    return VALUE_TYPE_CONFIG_MAP[validValueType] || VALUE_TYPE_CONFIG_MAP['text'];
+  };
+
+  // 判断是否需要显示值选择器
+  var shouldShowValueSelector = function shouldShowValueSelector(column) {
+    var config = getValueTypeConfig(column.valueType);
+    return config.showValueSelector || hasOptions(column);
+  };
+
+  // 格式化日期值
+  var formatDateValue = function formatDateValue(value, config) {
+    if (!value || !config.isDateTime) return value;
+    var formatValue = function formatValue(val) {
+      if (!val) return val;
+      var day = val.format ? val : dayjs(val);
+      return day.format(config.dateFormat);
+    };
+    if (config.isRange && Array.isArray(value)) {
+      var _value = _slicedToArray(value, 2),
+        start = _value[0],
+        end = _value[1];
+      return [formatValue(start), formatValue(end)];
+    }
+    return formatValue(value);
+  };
+
+  // 获取选项数据 - 兼容 valueEnum 和 fieldProps.options
+  var getColumnOptions = function getColumnOptions(column) {
+    var _column$fieldProps;
+    // 优先使用 valueEnum
+    if (column.valueEnum) {
+      if (_typeof(column.valueEnum) === 'object') {
+        return Object.entries(column.valueEnum).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            key = _ref3[0],
+            value = _ref3[1];
+          return {
+            label: _typeof(value) === 'object' ? value.text || value.label || key : value,
+            value: key
+          };
+        });
+      }
+    }
+
+    // 然后检查 fieldProps.options
+    if ((_column$fieldProps = column.fieldProps) !== null && _column$fieldProps !== void 0 && _column$fieldProps.options) {
+      return column.fieldProps.options.map(function (option) {
+        return {
+          label: option.label || option.text || option.value,
+          value: option.value
+        };
+      });
+    }
+    return [];
+  };
+
+  // 获取显示文本 - 兼容 valueEnum 和 fieldProps.options
+  var getDisplayText = function getDisplayText(column, value) {
+    var _column$fieldProps2;
+    // 处理空值
+    if (value === undefined || value === null || value === '') {
+      return value;
+    }
+    var config = getValueTypeConfig(column.valueType);
+
+    // 处理日期时间类型
+    if (config.isDateTime) {
+      var formattedValue = formatDateValue(value, config);
+      if (config.isRange && Array.isArray(formattedValue)) {
+        return "".concat(formattedValue[0], " ~ ").concat(formattedValue[1]);
+      }
+      return formattedValue;
+    }
+
+    // 处理数组类型（多选等）
+    if (Array.isArray(value)) {
+      return value.join(' | ');
+    }
+
+    // 先尝试从 valueEnum 获取
+    if (column.valueEnum && column.valueEnum[value]) {
+      var enumItem = column.valueEnum[value];
+      return _typeof(enumItem) === 'object' ? enumItem.text || enumItem.label || value : enumItem;
+    }
+
+    // 再尝试从 fieldProps.options 获取
+    if ((_column$fieldProps2 = column.fieldProps) !== null && _column$fieldProps2 !== void 0 && _column$fieldProps2.options) {
+      var _option = column.fieldProps.options.find(function (opt) {
+        return opt.value === value;
+      });
+      if (_option) {
+        return _option.label || _option.text || _option.value;
+      }
+    }
+    if (column.valueType === 'switch' && typeof value === 'boolean') {
+      return value ? '开启' : '关闭';
+    }
+    return value;
+  };
+
+  // 判断是否有选项配置
+  var hasOptions = function hasOptions(column) {
+    var _column$fieldProps3;
+    return !!(column.valueEnum || (_column$fieldProps3 = column.fieldProps) !== null && _column$fieldProps3 !== void 0 && _column$fieldProps3.options);
+  };
+
+  // 将 filters 转换成 params 对象
+  var filtersToParams = function filtersToParams(filters) {
+    var params = {};
+
+    // 将 filters 数组转换为 params 对象
+    filters.forEach(function (filter) {
+      if (filter.dataIndex && filter.value !== undefined && filter.value !== null) {
+        params[filter.dataIndex] = filter.value;
+      }
+    });
+
+    // 如果存在 beforeSearchSubmit 钩子，则调用它来修改 params
+    if (beforeSearchSubmit && _.isFunction(beforeSearchSubmit)) {
+      params = beforeSearchSubmit(params);
+    }
+    return params;
+  };
+
+  // 处理搜索输入
+  var handleSearch = function handleSearch(value) {
+    // 检测筛选条件格式 "条件名: 值"
+    var colonIndex = value.lastIndexOf(':');
+    if (colonIndex > 0) {
+      var filterType = value.substring(0, colonIndex).trim();
+      var filterValue = value.substring(colonIndex + 1).trim();
+      var matchingFilter = filterOptions.find(function (f) {
+        return f.title === filterType || f.key === filterType;
+      });
+      if (matchingFilter && filterValue) {
+        addFilter(matchingFilter.dataIndex, {
+          value: filterValue,
+          displayText: getDisplayText(matchingFilter, filterValue)
+        });
+        setSearchValue('');
+        return;
+      }
+    }
+    setSearchValue(value);
+  };
+
+  // 处理选择列名
+  var handleSelectColumn = function handleSelectColumn(value) {
+    var selectedOption = filterOptions.find(function (option) {
+      return option.dataIndex === value;
+    });
+    if (selectedOption) {
+      var shouldShow = shouldShowValueSelector(selectedOption);
+      setSelectedColumn(selectedOption);
+      setShowValueSelector(shouldShow);
+      setSearchValue("".concat(selectedOption.title, ": "));
+      setTempValue(null);
+    }
+  };
+
+  // 添加筛选条件
+  var addFilter = function addFilter(key, options) {
+    var filterConfig = filterOptions.find(function (f) {
+      return f.dataIndex === key;
+    });
+    if (!filterConfig) return;
+    setFilters(function (prev) {
+      var _prev = prev || [];
+      var existingFilter = _prev.find(function (f) {
+        return f.dataIndex === key;
+      });
+      if (existingFilter) {
+        _prev = _prev.map(function (item) {
+          if (item.dataIndex === key) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              value: options.value,
+              displayText: getDisplayText(filterConfig, options.value)
+            });
+          }
+          return item;
+        });
+      } else {
+        _prev.push({
+          dataIndex: key,
+          title: filterConfig.title,
+          value: options.value,
+          displayText: getDisplayText(filterConfig, options.value)
+        });
+      }
+      var _filters = _toConsumableArray(_prev);
+      var params = filtersToParams(_filters);
+      if (onSubmit && _.isFunction(onSubmit)) {
+        onSubmit(params);
+      }
+      return _filters;
+    });
+  };
+
+  // 确认添加筛选条件
+  var confirmAddFilter = function confirmAddFilter() {
+    console.log(selectedColumn, '1111');
+    if (!selectedColumn || tempValue == null) return;
+    var valueType = selectedColumn.valueType,
+      dataIndex = selectedColumn.dataIndex;
+    var config = getValueTypeConfig(valueType);
+    var value = tempValue;
+    var displayValue = '';
+    if (config.isDateTime) {
+      var formattedValue = formatDateValue(tempValue, config);
+      value = formattedValue;
+      if (config.isRange && Array.isArray(formattedValue)) {
+        displayValue = "".concat(formattedValue[0], " ~ ").concat(formattedValue[1]);
+      } else {
+        displayValue = formattedValue;
+      }
+    } else {
+      displayValue = getDisplayText(selectedColumn, tempValue);
+    }
+    console.log(value, 'value');
+    addFilter(dataIndex, {
+      value: value,
+      displayText: displayValue
+    });
+
+    // 收尾
+    setSearchValue('');
+    setShowValueSelector(false);
+    setSelectedColumn(null);
+    setTempValue(null);
+  };
+
+  // 取消选择
+  var cancelValueSelector = function cancelValueSelector() {
+    setShowValueSelector(false);
+    setSelectedColumn(null);
+    setTempValue(null);
+  };
+
+  // 删除筛选条件
+  var removeFilter = function removeFilter(filterId) {
+    setFilters(function (prev) {
+      var _prev = prev === null || prev === void 0 ? void 0 : prev.filter(function (f) {
+        return f.dataIndex !== filterId;
+      });
+      var _filters = _toConsumableArray(_prev);
+      var params = filtersToParams(_filters);
+      if (onSubmit && _.isFunction(onSubmit)) {
+        onSubmit(params);
+      }
+      return _prev || [];
+    });
+  };
+
+  // 重置所有条件
+  var handelRest = function handelRest() {
+    setFilters(function () {
+      if (onSubmit && _.isFunction(onSubmit)) {
+        onSubmit({});
+      }
+      return [];
+    });
+  };
+  var contextValue = {
+    // 状态
+    searchValue: searchValue,
+    filters: filters,
+    showValueSelector: showValueSelector,
+    selectedColumn: selectedColumn,
+    tempValue: tempValue,
+    // 引用
+    inputRef: inputRef,
+    // 配置
+    columns: columns,
+    filterOptions: filterOptions,
+    onSubmit: onSubmit,
+    beforeSearchSubmit: beforeSearchSubmit,
+    // 状态更新方法
+    setSearchValue: setSearchValue,
+    setFilters: setFilters,
+    setShowValueSelector: setShowValueSelector,
+    setSelectedColumn: setSelectedColumn,
+    setTempValue: setTempValue,
+    // 业务方法
+    handleSearch: handleSearch,
+    handleSelectColumn: handleSelectColumn,
+    addFilter: addFilter,
+    confirmAddFilter: confirmAddFilter,
+    cancelValueSelector: cancelValueSelector,
+    removeFilter: removeFilter,
+    handelRest: handelRest,
+    // 工具方法
+    getColumnOptions: getColumnOptions,
+    getDisplayText: getDisplayText,
+    hasOptions: hasOptions,
+    filtersToParams: filtersToParams,
+    getValueTypeConfig: getValueTypeConfig,
+    formatDateValue: formatDateValue,
+    shouldShowValueSelector: shouldShowValueSelector
+  };
+  return /*#__PURE__*/_jsx(SearchContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};

package/dist/creek-search/CreekSearchFilterDisplay.js

@@ -0,0 +1,97 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { Flex, Space, Tag } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
+import { useSearchContext } from "./CreekSearchContext";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 样式定义
+var useStyles = createStyles(function (_ref) {
+  var token = _ref.token;
+  return {
+    filtersDisplay: {
+      padding: "0 0 ".concat(token.padding, "px"),
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: token.marginXS
+    },
+    filterTag: {
+      borderRadius: token.borderRadiusSM,
+      fontSize: token.fontSizeSM,
+      backgroundColor: '#f2f3f5',
+      padding: "2px 12px 2px 8px"
+    },
+    filterTagTitle: {
+      color: '#81838A'
+    },
+    filterTagValue: {
+      color: '#42464E'
+    },
+    clearButtonContainer: {
+      marginLeft: token.marginXS,
+      borderLeft: "1px solid #EBEDF1",
+      paddingLeft: 8,
+      height: 20
+    },
+    clearTextContainer: {
+      color: '#1E2128',
+      fontWeight: 500,
+      cursor: 'pointer'
+    }
+  };
+});
+export var CreekFilterDisplay = function CreekFilterDisplay(props) {
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useSearchContext = useSearchContext(),
+    filters = _useSearchContext.filters,
+    removeFilter = _useSearchContext.removeFilter,
+    handelRest = _useSearchContext.handelRest;
+  var className = props.className;
+
+  // 渲染筛选条件标签
+  var renderFilterTags = function renderFilterTags(filterList) {
+    return /*#__PURE__*/_jsx(Space, {
+      size: 4,
+      wrap: true,
+      children: filterList === null || filterList === void 0 ? void 0 : filterList.map(function (filter) {
+        return /*#__PURE__*/_jsxs(Tag, {
+          closable: true,
+          onClose: function onClose() {
+            return removeFilter(filter.dataIndex);
+          },
+          className: styles.filterTag,
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: styles.filterTagTitle,
+            children: [" ", filter.title, ":"]
+          }), /*#__PURE__*/_jsxs("span", {
+            className: styles.filterTagValue,
+            children: [" ", filter.displayText]
+          })]
+        }, filter.dataIndex);
+      })
+    });
+  };
+
+  // 如果没有筛选条件，不渲染
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Flex, {
+    className: classNames(styles.filtersDisplay, className),
+    wrap: true,
+    children: [/*#__PURE__*/_jsx("span", {
+      children: renderFilterTags(filters)
+    }), /*#__PURE__*/_jsxs(Space, {
+      className: styles.clearButtonContainer,
+      align: "center",
+      size: 4,
+      onClick: handelRest,
+      children: [/*#__PURE__*/_jsx(DeleteOutlined, {}), /*#__PURE__*/_jsx("span", {
+        className: styles.clearTextContainer,
+        children: "\u6E05\u7A7A"
+      })]
+    })]
+  });
+};