@oceanbase/design 1.0.0-alpha.16 → 1.0.0-alpha.18

package/es/filter/index.d.ts

@@ -7,6 +7,7 @@ export type { FilterCascaderProps, CascaderOption } from './components/FilterCas
 export type { FilterSwitchProps } from './components/FilterSwitch';
 export type { FilterRangeProps, RangeOption } from './components/FilterRange';
 export type { FilterInputProps } from './components/FilterInput';
+export type { FilterSlotProps } from './components/FilterSlot';
 export type { FilterWrapProps } from './components/FilterWrap';
 export type { ResponsiveFilterGroupProps } from './components/ResponsiveFilterGroup';
 declare const Filter: {
@@ -17,6 +18,7 @@ declare const Filter: {
     Cascader: import("react").FC<import("./components/FilterCascader/types").FilterCascaderProps>;
     Switch: import("react").FC<import("./components/FilterSwitch").FilterSwitchProps>;
     Input: import("react").FC<import("./components/FilterInput").FilterInputProps>;
+    Slot: import("react").FC<import("./components/FilterSlot").FilterSlotProps>;
     ResponsiveGroup: import("react").FC<import("./components/ResponsiveFilterGroup").ResponsiveFilterGroupProps>;
 };
 export default Filter;

package/es/filter/index.js

@@ -4,18 +4,24 @@ import Checkbox from "./components/FilterCheckbox";
 import Range from "./components/FilterRange";
 import Input from "./components/FilterInput";
 import Select from "./components/FilterSelect";
+import Slot from "./components/FilterSlot";
 import Switch from "./components/FilterSwitch";
 import Wrap from "./components/FilterWrap";
 import ResponsiveGroup from "./components/ResponsiveFilterGroup";
 export { FilterProvider, useFilterContext } from "./FilterContext";
+function markAsFilterComponent(component) {
+  component.__isFilterComponent = true;
+  return component;
+}
 var Filter = {
-  Select: Select,
-  Checkbox: Checkbox,
-  Range: Range,
-  Wrap: Wrap,
-  Cascader: Cascader,
-  Switch: Switch,
-  Input: Input,
+  Select: markAsFilterComponent(Select),
+  Checkbox: markAsFilterComponent(Checkbox),
+  Range: markAsFilterComponent(Range),
+  Wrap: markAsFilterComponent(Wrap),
+  Cascader: markAsFilterComponent(Cascader),
+  Switch: markAsFilterComponent(Switch),
+  Input: markAsFilterComponent(Input),
+  Slot: markAsFilterComponent(Slot),
   ResponsiveGroup: ResponsiveGroup
 };
 export default Filter;

package/es/filter/style/index.js

@@ -151,7 +151,7 @@ var genFilterButtonStyle = function genFilterButtonStyle(token) {
     justifyContent: 'right',
     color: token.colorText,
     whiteSpace: 'nowrap',
-    maxWidth: '260px',
+    maxWidth: '268px',
     '&:hover': _defineProperty(_defineProperty({}, "".concat(componentCls, "-arrow-icon"), {
       opacity: 0,
       visibility: 'hidden'

package/es/filter/type.d.ts

@@ -21,6 +21,8 @@ export interface BaseFilterProps extends Omit<PopoverProps, 'title' | 'content'
     alwaysCollapse?: boolean;
     /** 是否显示后缀图标区域（包括下拉箭头和清除图标），默认 true */
     showSuffixIcon?: boolean;
+    /** 是否显示清除按钮，默认 true */
+    allowClear?: boolean;
 }
 /** 内部属性，用于标记组件是否在折叠模式中 */
 export interface InternalFilterProps {

package/es/table/index.d.ts

@@ -38,8 +38,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
     SELECTION_ALL: "SELECT_ALL";
     SELECTION_INVERT: "SELECT_INVERT";
     SELECTION_NONE: "SELECT_NONE";
-    Column: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType_1>) => null;
-    ColumnGroup: <RecordType_2 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_2>) => null;
+    Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
+    ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
     Summary: typeof Summary;
     useStyle: (prefixCls: string, rootCls?: string) => readonly [(node: ReactElement<any, string | React.JSXElementConstructor<any>>) => ReactElement<any, string | React.JSXElementConstructor<any>>, string, string];
     useDefaultPagination: (pagination?: false | import("antd").TablePaginationConfig) => false | import("antd").TablePaginationConfig;

package/es/table/style/index.js

@@ -5,19 +5,34 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 { unit } from '@ant-design/cssinjs';
+import { prepareComponentToken } from 'antd/es/table/style';
 import { genStyleHooks } from "../../_util/genComponentStyleHook";
+/**
+ * 单元格是否与全局正文同档（`cellFontSize === token.fontSize`）。
+ */
+var isTableCellBodyFontScale = function isTableCellBodyFontScale(token) {
+  return token.cellFontSize === token.fontSize;
+};
+var getTableCellLineHeight = function getTableCellLineHeight(token) {
+  return isTableCellBodyFontScale(token) ? token.lineHeight : token.lineHeightSM;
+};
+var getTableEmbeddedControlHeight = function getTableEmbeddedControlHeight(token) {
+  return isTableCellBodyFontScale(token) ? token.controlHeight : token.controlHeightSM;
+};
 var genSmallBtnStyle = function genSmallBtnStyle(token) {
   var antCls = token.antCls;
+  var cellLineHeight = getTableCellLineHeight(token);
+  var controlH = getTableEmbeddedControlHeight(token);
   return _defineProperty({}, "".concat(antCls, "-btn:not(").concat(antCls, "-btn-sm):not(").concat(antCls, "-btn-lg)"), _defineProperty(_defineProperty(_defineProperty({
-    height: token.controlHeightSM,
-    fontSize: token.fontSizeSM,
-    lineHeight: token.lineHeightSM
+    height: controlH,
+    fontSize: token.cellFontSize,
+    lineHeight: cellLineHeight
   }, "&:not(".concat(antCls, "-btn-icon-only):not(").concat(antCls, "-btn-circle)"), {
     paddingInline: token.paddingXS
   }), "&".concat(antCls, "-btn-icon-only"), {
-    width: token.controlHeightSM
+    width: controlH
   }), "&".concat(antCls, "-btn-circle"), {
-    minWidth: token.controlHeightSM
+    minWidth: controlH
   }));
 };
 export var genTableStyle = function genTableStyle(token) {
@@ -37,9 +52,10 @@ export var genTableStyle = function genTableStyle(token) {
     marginLG = token.marginLG,
     marginXS = token.marginXS,
     calc = token.calc;
+  var cellLineHeight = getTableCellLineHeight(token);
+  var embeddedControlH = getTableEmbeddedControlHeight(token);
   return _ref2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref2, "".concat(componentCls, "-wrapper ").concat(componentCls), _defineProperty(_defineProperty(_defineProperty({
-    // to match fontSizeSM lineHeight
-    lineHeight: token.lineHeightSM,
+    lineHeight: cellLineHeight,
     color: colorText,
     backgroundColor: colorBgBase,
     borderRadius: borderRadiusLG
@@ -91,8 +107,8 @@ export var genTableStyle = function genTableStyle(token) {
     backgroundColor: colorBgBase
   }), "a", {
     fontWeight: token.fontWeightStrong,
-    // work for ProTable link style
-    fontSize: token.fontSizeSM
+    // work for ProTable link style；与单元格字号一致
+    fontSize: token.cellFontSize
   })), genSmallBtnStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-placeholder td"), {}), "".concat(componentCls, "-empty-wrapper"), {
     minHeight: calc(360).sub(calc(token.paddingXS).mul(2).equal()).equal(),
     display: 'flex',
@@ -182,19 +198,19 @@ export var genTableStyle = function genTableStyle(token) {
     // hide empty when Table loading
     visibility: 'hidden'
   }))), "".concat(componentCls, "-wrapper"), _defineProperty({}, "".concat(componentCls, "-pagination"), _defineProperty(_defineProperty({}, "&".concat(antCls, "-pagination"), _defineProperty(_defineProperty(_defineProperty({
-    fontSize: token.fontSizeSM,
+    fontSize: token.cellFontSize,
     padding: "".concat(unit(token.paddingSM), " 0"),
     margin: 0
   }, "".concat(componentCls, "-wrapper").concat(componentCls, "-has-bordered &"), {
     marginInlineEnd: marginLG
   }), "".concat(antCls, "-pagination-item, ").concat(antCls, "-pagination-total-text, ").concat(antCls, "-pagination-prev, ").concat(antCls, "-pagination-next"), {
-    height: token.controlHeightSM,
-    minWidth: token.controlHeightSM,
-    lineHeight: unit(calc(token.controlHeightSM).sub(calc(token.lineWidth).mul(2)).equal())
+    height: embeddedControlH,
+    minWidth: embeddedControlH,
+    lineHeight: unit(calc(embeddedControlH).sub(calc(token.lineWidth).mul(2)).equal())
   }), "".concat(antCls, "-pagination-options ").concat(antCls, "-select-single"), _defineProperty({
-    height: token.controlHeightSM
+    height: embeddedControlH
   }, "".concat(antCls, "-select-selector"), {
-    fontSize: token.fontSizeSM,
+    fontSize: token.cellFontSize,
     paddingInline: calc(token.paddingXS).sub(token.lineWidth).equal()
   }))), "".concat(componentCls, "-batch-operation-bar"), _objectSpread(_defineProperty({
     position: 'absolute',
@@ -207,6 +223,8 @@ export var genTableStyle = function genTableStyle(token) {
     minHeight: 'auto'
   })));
 };
+
+// 经 genComponentStyleHook 注册为 ['Table','oceanbase']：合并 components.Table，且不与 antd 主 Table 样式钩子冲突。
 export default genStyleHooks('Table', function (token) {
   return [genTableStyle(token)];
-});
+}, prepareComponentToken);

package/es/theme/default.d.ts

@@ -46,5 +46,17 @@ export declare const fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Op
 export declare const fontWeightWeakEn = 300;
 export declare const fontWeightEn = 500;
 export declare const fontWeightStrongEn = 600;
+/** 正文字号（非 Cn），与 token.fontSize 一致；命名对齐 fontFamilyEn / fontWeightEn */
+export declare const fontSizeEn = 13;
+/** Table 单元格字号（非 Cn），与 components.Table.cellFontSize 默认值一致 */
+export declare const tableCellFontSizeEn = 12;
+/** Cn 正文/表内字号补丁（由 config-provider `getLocaleFontSizeThemePatch` 消费） */
+export declare const fontSizeCn = 14;
+export declare const fontHeightCn = 22;
+export declare const lineHeightCn: number;
 declare const _default: import("antd").ThemeConfig;
 export default _default;
+/**
+ * Whether the BCP 47 locale should use Cn typography sizing (14px body + table cells; zh/ja/ko).
+ */
+export declare function isCnLikeLocale(locale: string | undefined): boolean;

package/es/theme/default.js

@@ -89,6 +89,17 @@ export var fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans',
 export var fontWeightWeakEn = 300;
 export var fontWeightEn = 500;
 export var fontWeightStrongEn = 600;
+
+/** 正文字号（非 Cn），与 token.fontSize 一致；命名对齐 fontFamilyEn / fontWeightEn */
+export var fontSizeEn = 13;
+
+/** Table 单元格字号（非 Cn），与 components.Table.cellFontSize 默认值一致 */
+export var tableCellFontSizeEn = fontSizeSM;
+
+/** Cn 正文/表内字号补丁（由 config-provider `getLocaleFontSizeThemePatch` 消费） */
+export var fontSizeCn = 14;
+export var fontHeightCn = 22;
+export var lineHeightCn = fontHeightCn / fontSizeCn;
 var lineHeightSM = 20 / 12;
 var defaultTheme = {
   token: {
@@ -102,9 +113,9 @@ var defaultTheme = {
     borderRadiusMD: borderRadiusMD,
     borderRadiusLG: borderRadiusLG,
     fontSizeSM: fontSizeSM,
-    fontSize: 13,
+    fontSize: fontSizeEn,
     lineHeightSM: lineHeightSM,
-    lineHeight: 20 / 13,
+    lineHeight: 20 / fontSizeEn,
     lineHeightLG: 24 / 16,
     fontHeight: 20,
     fontSizeLG: 16,
@@ -112,12 +123,12 @@ var defaultTheme = {
     fontSizeHeading2: 20,
     fontSizeHeading3: 18,
     fontSizeHeading4: 16,
-    fontSizeHeading5: 13,
+    fontSizeHeading5: fontSizeEn,
     lineHeightHeading1: 32 / 24,
     lineHeightHeading2: 28 / 20,
     lineHeightHeading3: 26 / 18,
     lineHeightHeading4: 24 / 16,
-    lineHeightHeading5: 20 / 13,
+    lineHeightHeading5: 20 / fontSizeEn,
     controlHeightSM: 24,
     controlHeight: 28,
     colorLinkHover: blue5,
@@ -443,4 +454,15 @@ defaultTheme.token = _objectSpread(_objectSpread({}, defaultTheme.token), {}, {
   yellow: defaultTheme === null || defaultTheme === void 0 || (_defaultTheme$token3 = defaultTheme.token) === null || _defaultTheme$token3 === void 0 ? void 0 : _defaultTheme$token3.colorWarning,
   red: defaultTheme === null || defaultTheme === void 0 || (_defaultTheme$token4 = defaultTheme.token) === null || _defaultTheme$token4 === void 0 ? void 0 : _defaultTheme$token4.colorError
 });
-export default formatTheme(defaultTheme);
+export default formatTheme(defaultTheme);
+
+/**
+ * Whether the BCP 47 locale should use Cn typography sizing (14px body + table cells; zh/ja/ko).
+ */
+export function isCnLikeLocale(locale) {
+  if (locale == null || locale === '') {
+    return false;
+  }
+  var primary = String(locale).toLowerCase().replace(/_/g, '-').split('-')[0];
+  return primary === 'zh' || primary === 'ja' || primary === 'ko';
+}

package/lib/_util/genComponentStyleHook.js

@@ -33,8 +33,12 @@ exports.genSelectCommonStyle = genSelectCommonStyle;
 function genStyleHooks(componentName, styleFn, getDefaultToken, options) {
   const normalizedComponentName = Array.isArray(componentName) ? componentName[0] : componentName;
 
-  // Create the component name with OB- prefix
-  const obComponentName = Array.isArray(componentName) ? [`OB-${normalizedComponentName}`, componentName[1]] : `OB-${normalizedComponentName}`;
+  /**
+   * 使用 [Component, subName] 注册，第一维与 antd 一致以便合并 `theme.components[Component]`（如 Table.cellFontSize）；
+   * 第二维与 antd 默认样式区分，避免覆盖/顶替同组件的主样式钩子。
+   */
+  const OCEANBASE_SUB_STYLE = 'oceanbase';
+  const obComponentName = Array.isArray(componentName) ? [normalizedComponentName, `${OCEANBASE_SUB_STYLE}-${componentName[1]}`] : [normalizedComponentName, OCEANBASE_SUB_STYLE];
   return (0, _internal.genStyleHooks)(obComponentName, token => {
     const styles = [];
 

package/lib/alert/index.d.ts

@@ -6,7 +6,7 @@ export interface AlertProps extends AntAlertProps {
     mini?: boolean;
 }
 declare const Alert: {
-    ({ type: typeProp, showIcon, closable, ghost, mini, banner, action, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ type: typeProp, showIcon, closable, closeIcon, ghost, mini, banner, action, prefixCls: customizePrefixCls, className, ...restProps }: AlertProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     ErrorBoundary: typeof import("antd/es/alert/ErrorBoundary").default;
     displayName: string;
 };

package/lib/alert/index.js

@@ -37,6 +37,7 @@ const Alert = ({
   type: typeProp,
   showIcon = true,
   closable,
+  closeIcon,
   ghost,
   mini,
   banner,
@@ -53,7 +54,7 @@ const Alert = ({
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
   const [wrapCSSVar] = (0, _style.default)(prefixCls);
   const alertCls = (0, _classnames.default)({
-    [`${prefixCls}-closable`]: closable,
+    [`${prefixCls}-closable`]: closable || closeIcon,
     [`${prefixCls}-ghost`]: ghost,
     [`${prefixCls}-mini`]: mini,
     [`${prefixCls}-with-action`]: !!action
@@ -62,6 +63,7 @@ const Alert = ({
     type: type,
     showIcon: showIcon,
     closable: closable,
+    closeIcon: closeIcon,
     banner: banner,
     icon: iconMapOutlined[type],
     action: action,

package/lib/config-provider/index.d.ts

@@ -63,5 +63,7 @@ export type ConfigProviderType = React.FC<ConfigProviderProps> & {
     config: typeof AntConfigProvider.config;
     useConfig: typeof AntConfigProvider.useConfig;
 };
+/** Cn 字号补丁（正文 + Table 单元格），供单测与 ConfigProvider 共用。 */
+export declare function getLocaleFontSizeThemePatch(mergedLocale: Locale, mergedTheme: ThemeConfig, resolvedFontSize: number | undefined): ThemeConfig;
 declare const ConfigProvider: ConfigProviderType;
 export default ConfigProvider;

package/lib/config-provider/index.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  getLocaleFontSizeThemePatch: true
+};
 exports.default = void 0;
+exports.getLocaleFontSizeThemePatch = getLocaleFontSizeThemePatch;
 var _react = _interopRequireDefault(require("react"));
 var _antd = require("antd");
 var _cssinjs = require("@ant-design/cssinjs");
@@ -90,6 +93,7 @@ const ExtendedConfigContext = /*#__PURE__*/_react.default.createContext({
   hideOnSinglePage: false,
   injectStaticFunction: true
 });
+/** `en` / `en-gb` → `tokenValueEn`（与 `fontFamilyEn` 等一致）。 */
 const getLocaleTokenValue = (mergedThemeToken, locale, tokenKey, tokenValue, tokenValueEn) => {
   return tokenValue !== mergedThemeToken[tokenKey] ? {
     [tokenKey]: tokenValue
@@ -97,6 +101,37 @@ const getLocaleTokenValue = (mergedThemeToken, locale, tokenKey, tokenValue, tok
     [tokenKey]: tokenValueEn
   } : {};
 };
+
+/** Cn（zh/ja/ko）且仍为拉丁基线 `tokenValueEn` 时 → `tokenValueCn`，结构上与 {@link getLocaleTokenValue} 对称。 */
+const getLocaleTokenValueCn = (mergedThemeToken, locale, tokenKey, tokenValue, tokenValueEn, tokenValueCn) => {
+  return tokenValue !== mergedThemeToken[tokenKey] ? {
+    [tokenKey]: tokenValue
+  } : (0, _default2.isCnLikeLocale)(locale.locale) && (tokenValue === undefined || tokenValue === tokenValueEn) ? {
+    [tokenKey]: tokenValueCn
+  } : {};
+};
+
+/** Cn 字号补丁（正文 + Table 单元格），供单测与 ConfigProvider 共用。 */
+function getLocaleFontSizeThemePatch(mergedLocale, mergedTheme, resolvedFontSize) {
+  const tokenPatch = getLocaleTokenValueCn(mergedTheme.token ?? {}, mergedLocale, 'fontSize', resolvedFontSize, _default2.fontSizeEn, _default2.fontSizeCn);
+  const patch = {};
+  if ('fontSize' in tokenPatch && tokenPatch.fontSize !== undefined) {
+    patch.token = {
+      fontSize: tokenPatch.fontSize,
+      lineHeight: _default2.lineHeightCn,
+      fontHeight: _default2.fontHeightCn
+    };
+  }
+  const cellFs = mergedTheme.components?.Table?.cellFontSize;
+  if ((cellFs === undefined || cellFs === _default2.tableCellFontSizeEn) && (0, _default2.isCnLikeLocale)(mergedLocale.locale)) {
+    patch.components = {
+      Table: {
+        cellFontSize: _default2.fontSizeCn
+      }
+    };
+  }
+  return patch;
+}
 const ConfigProvider = ({
   children,
   theme,
@@ -142,6 +177,7 @@ const ConfigProvider = ({
     token
   } = _theme.default.useToken();
   const fontFamily = mergedTheme.token?.fontFamily || token.fontFamily;
+  const fontSize = mergedTheme.token?.fontSize ?? token.fontSize;
   const fontWeightWeak = mergedTheme.token?.fontWeightWeak || token.fontWeightWeak;
   const fontWeight = mergedTheme.token?.fontWeight || token.fontWeight;
   const fontWeightStrong = mergedTheme.token?.fontWeightStrong || token.fontWeightStrong;
@@ -186,7 +222,7 @@ const ConfigProvider = ({
       }
     }, parentContext.table, table),
     tabs: (0, _lodash.merge)({}, parentContext.tabs, tabs),
-    theme: (0, _lodash.merge)({}, mergedTheme, {
+    theme: (0, _lodash.merge)({}, mergedTheme, getLocaleFontSizeThemePatch(mergedLocale, mergedTheme, fontSize), {
       token: {
         ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontFamily', fontFamily, _default2.fontFamilyEn),
         ...getLocaleTokenValue(mergedTheme.token || {}, mergedLocale, 'fontWeightWeak', fontWeightWeak, _default2.fontWeightWeakEn),

package/lib/filter/FilterContext.d.ts

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-export type FilterComponentName = 'select' | 'checkbox' | 'cascader' | 'switch' | 'range' | 'input';
+export type FilterComponentName = 'select' | 'checkbox' | 'cascader' | 'switch' | 'range' | 'input' | 'slot';
 export type FilterValue = string | string[] | string[][] | boolean | [any, any] | null | undefined;
 export interface FilterValueItem {
     id: string;

package/lib/filter/components/FilterButton.js

@@ -37,6 +37,7 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
   _isInWrapComponent = false,
   _isFlat = false,
   style,
+  allowClear = true,
   ...restProps
 }, ref) => {
   const {
@@ -46,6 +47,7 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
     isCollapsed
   } = (0, _FilterContext.useFilterContext)();
   const [open, setOpen] = (0, _react.useState)(false);
+  const [popoverWidth, setPopoverWidth] = (0, _react.useState)();
   const {
     wrapSSR,
     prefixCls
@@ -77,11 +79,24 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
   const handleOpenChange = newOpen => {
     if (!disabled) {
       setOpen(newOpen);
-      // 调用外部传入的 onOpenChange 回调，让父组件能够实时监听状态变化
       externalOnOpenChange?.(newOpen);
     }
   };
 
+  // 折叠模式下实时监听按钮宽度变化，同步到 Popover 面板宽度
+  (0, _react.useEffect)(() => {
+    if (!open || !isCollapsed || _isInWrapComponent || !innerRef.current) {
+      return;
+    }
+    const el = innerRef.current;
+    setPopoverWidth(el.offsetWidth);
+    const observer = new ResizeObserver(() => {
+      setPopoverWidth(el.offsetWidth);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [open, isCollapsed, _isInWrapComponent]);
+
   // 使用 useMemo 缓存 content，避免每次都重新创建
   const popoverContent = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [!_isFlat && (!isCollapsed || _isInWrapComponent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
@@ -111,11 +126,15 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
     content: popoverContent,
     open: open && !disabled,
     onOpenChange: handleOpenChange,
+    forceRender: _isInWrapComponent,
     styles: {
       body: {
         padding: 0,
         maxWidth: 300,
-        minWidth: 120
+        minWidth: 120,
+        ...(isCollapsed && !_isInWrapComponent && popoverWidth ? {
+          width: popoverWidth
+        } : {})
       }
     },
     ...popoverProps,
@@ -152,11 +171,11 @@ const FilterButton = /*#__PURE__*/(0, _react.forwardRef)(({
           }) : showSuffixIcon ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: (0, _style.getFilterCls)(prefixCls, 'icon-wrapper'),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {
-              className: selected ? (0, _style.getFilterCls)(prefixCls, 'arrow-icon') : '',
+              className: selected && allowClear ? (0, _style.getFilterCls)(prefixCls, 'arrow-icon') : '',
               style: disabled ? {
                 color: 'var(--ob-color-icon-disabled)'
               } : undefined
-            }), selected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            }), selected && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: (0, _style.getFilterCls)(prefixCls, 'clear-icon'),
               onClick: e => {
                 if (!disabled) {

package/lib/filter/components/FilterCascader/components/FlatCascaderContent/index.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
+import type { CascaderPanelProps } from 'antd';
 import type { CascaderOption } from '../../types';
 import type { FilterButtonRef } from '../../../FilterButton';
-interface FlatCascaderContentProps {
+interface FlatCascaderContentProps extends CascaderPanelProps {
     options: CascaderOption[];
-    currentValue: string[][];
+    currentValue: (string | number)[][];
     multiple: boolean;
     filterButtonRef: React.RefObject<FilterButtonRef>;
-    onValueChange: (value: string[][]) => void;
+    onValueChange: (value: (string | number)[][]) => void;
 }
 /**
  * Flat 模式的级联内容容器组件

package/lib/filter/components/FilterCascader/components/FlatCascaderContent/index.js

@@ -23,7 +23,8 @@ const FlatCascaderContent = ({
   currentValue,
   filterButtonRef,
   multiple = false,
-  onValueChange
+  onValueChange,
+  ...restProps
 }) => {
   // 将组件内部的值格式转换为 Cascader.Panel 需要的格式
   // 组件内部：[[parent, child], ...] 或 [[parent, child]]
@@ -43,7 +44,7 @@ const FlatCascaderContent = ({
   }, [currentValue, multiple]);
 
   // 处理 Cascader.Panel 的值变化
-  const handleCascaderChange = (value, _selectedOptions) => {
+  const handleCascaderChange = value => {
     if (multiple) {
       // 多选：value 是 string[][]，如 [['frontend', 'react'], ['backend', 'java']]
       onValueChange(value);
@@ -55,16 +56,22 @@ const FlatCascaderContent = ({
   };
 
   // 使用条件渲染来处理 multiple 属性的类型问题
-  return multiple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader.Panel, {
+  return multiple ?
+  /*#__PURE__*/
+  // @ts-ignore-next-line
+  (0, _jsxRuntime.jsx)(_antd.Cascader.Panel, {
     options: options,
     value: cascaderValue,
     onChange: handleCascaderChange,
-    multiple: multiple
+    multiple: multiple,
+    showCheckedStrategy: _antd.Cascader.SHOW_CHILD,
+    ...restProps
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Cascader.Panel, {
     options: options,
     value: cascaderValue,
     onChange: handleCascaderChange,
-    multiple: false
+    multiple: false,
+    ...restProps
   });
 };
 exports.FlatCascaderContent = FlatCascaderContent;

package/lib/filter/components/FilterCascader/components/NormalCascaderContent.js

@@ -11,7 +11,6 @@ var _theme = _interopRequireDefault(require("../../../../theme"));
 var _input = _interopRequireDefault(require("../../../../input"));
 var _empty = _interopRequireDefault(require("../../../../empty"));
 var _icons = require("@oceanbase/icons");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _style = require("../../../style");
 var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -109,9 +108,7 @@ const NormalCascaderContent = ({
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Flex, {
             gap: _constants.GAP_SIZE_SMALL * 2,
-            className: (0, _classnames.default)((0, _style.getFilterCls)(prefixCls, 'select-option'), {
-              [(0, _style.getFilterCls)(prefixCls, 'has-selected')]: isNodeSelected
-            }),
+            className: (0, _style.getFilterCls)(prefixCls, 'select-option'),
             justify: "space-between",
             align: "center",
             onClick: handleNodeClick,
@@ -207,9 +204,7 @@ const NormalCascaderContent = ({
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Flex, {
             gap: _constants.GAP_SIZE_SMALL * 2,
-            className: (0, _classnames.default)((0, _style.getFilterCls)(prefixCls, 'select-option'), {
-              [(0, _style.getFilterCls)(prefixCls, 'has-selected')]: hasSelectedChildren
-            }),
+            className: (0, _style.getFilterCls)(prefixCls, 'select-option'),
             justify: "space-between",
             align: "center",
             style: {

package/lib/filter/components/FilterCheckbox.js

@@ -143,8 +143,30 @@ const FilterCheckbox = ({
     const iconWidth = 10;
     const iconWidthUnselected = 8;
     const overlapDistance = 6;
-    const containerWidth = iconWidth + (options.length - 1) * overlapDistance + 1;
-    const selectedStatuses = selectedValues || [];
+
+    // 按颜色分组选项，并检查每种颜色是否有选中的选项
+    const colorGroups = [];
+    const colorMap = new Map();
+    options.forEach(option => {
+      if (option.color) {
+        const isSelected = selectedValues.includes(option.value);
+        const existing = colorMap.get(option.color);
+        if (existing) {
+          // 如果已有该颜色，更新选中状态（只要有一个选中即为选中）
+          if (isSelected) {
+            existing.hasSelected = true;
+          }
+        } else {
+          const group = {
+            color: option.color,
+            hasSelected: isSelected
+          };
+          colorMap.set(option.color, group);
+          colorGroups.push(group);
+        }
+      }
+    });
+    const containerWidth = iconWidth + (colorGroups.length - 1) * overlapDistance + 1;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         position: 'relative',
@@ -153,8 +175,8 @@ const FilterCheckbox = ({
         display: 'flex',
         alignItems: 'center'
       },
-      children: options.map((item, index) => {
-        const isSelected = selectedStatuses.includes(item.value) && item.color;
+      children: colorGroups.map((group, index) => {
+        const isSelected = group.hasSelected;
         const baseSize = isSelected ? iconWidth : iconWidthUnselected;
         return isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
@@ -164,10 +186,10 @@ const FilterCheckbox = ({
             height: baseSize,
             borderRadius: '50%',
             zIndex: index,
-            backgroundColor: item.color,
+            backgroundColor: group.color,
             border: `1px solid ${token.white}`
           }
-        }, item.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        }, group.color) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
             position: 'absolute',
             left: index * overlapDistance,
@@ -184,7 +206,7 @@ const FilterCheckbox = ({
               border: `1px solid ${token.colorBorderSecondary}`
             }
           })
-        }, item.value);
+        }, group.color);
       })
     });
   }, [isStatusMode, options, selectedValues, token]);

package/lib/filter/components/FilterInput.d.ts

@@ -11,6 +11,8 @@ export interface FilterInputProps extends BaseFilterProps {
     inputProps?: InputProps;
     /** Switch 组件的额外属性 */
     switchProps?: SwitchProps;
+    /** 是否显示开关，默认为 false */
+    showSwitch?: boolean;
 }
 declare const FilterInput: FC<FilterInputProps>;
 export default FilterInput;