@yoka-ui/ui 1.0.1

package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ListItem } from '../../typing';
+/**
+ * 已选列表组件的 Props
+ */
+interface PropsType {
+    /** 完整列表数据，用于根据 selected 中的 code 取 name 等信息 */
+    list: ListItem[];
+    /** 已选中的 code 数组（顺序即展示顺序） */
+    selected: string[];
+    /** 更新已选列表 */
+    setSelected: (selected: string[]) => void;
+    /** 内容宽度（当前未在 Selected 内使用，可做预留） */
+    contentWidth?: number;
+    /** 每行高度 */
+    rowHeight?: number;
+    /** 是否在名称后展示 code */
+    showCode?: boolean;
+    /** 已选列表中每行的自定义渲染 */
+    checkedCellRender?: (item: ListItem) => React.ReactNode;
+}
+/**
+ * 筛选弹层右侧已选列表：展示已选数量、清空、虚拟列表逐项展示并可删除。
+ */
+declare const Selected: React.FC<PropsType>;
+export default Selected;

package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.js

@@ -0,0 +1,97 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/business/ModCommonFilter/components/PopoverContent/Selected.tsx
+var Selected_exports = {};
+__export(Selected_exports, {
+  default: () => Selected_default
+});
+module.exports = __toCommonJS(Selected_exports);
+var import_TextWithToolTip = __toESM(require("../../../../components/TextWithToolTip"));
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_react_custom_scrollbars = require("react-custom-scrollbars");
+var import_react_virtualized = require("react-virtualized");
+var import_index_module = __toESM(require("./index.module.less"));
+var Selected = ({
+  list,
+  selected,
+  setSelected,
+  rowHeight = 32,
+  showCode,
+  checkedCellRender
+}) => {
+  const listScrollbarsRef = (0, import_react.useRef)(null);
+  const listRef = (0, import_react.useRef)(null);
+  const handleListScrollbarScroll = (event) => {
+    const { scrollTop, scrollLeft } = event.target;
+    if (listRef.current) {
+      listRef.current.Grid.handleScrollEvent({ scrollTop, scrollLeft });
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.selected }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.selectedHeader }, /* @__PURE__ */ import_react.default.createElement("span", null, "已选", selected.length, "个"), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.clear, onClick: () => setSelected([]) }, "清空")), /* @__PURE__ */ import_react.default.createElement(
+    import_react_custom_scrollbars.Scrollbars,
+    {
+      style: { height: 325 },
+      renderThumbVertical: ({ style, ...props }) => /* @__PURE__ */ import_react.default.createElement("div", { ...props, style: { ...style, background: "#EFEFEF", borderRadius: 3 } }),
+      ref: listScrollbarsRef,
+      onScroll: handleListScrollbarScroll
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.selectedContent }, /* @__PURE__ */ import_react.default.createElement(import_react_virtualized.AutoSizer, { disableHeight: true }, ({ width }) => /* @__PURE__ */ import_react.default.createElement(
+      import_react_virtualized.List,
+      {
+        ref: listRef,
+        style: { overflowX: "visible", overflowY: "visible" },
+        rowCount: selected.length,
+        height: 325,
+        width,
+        rowHeight,
+        rowRenderer: ({ index, key, style }) => {
+          const option = list.find((option2) => option2.code === selected[index]);
+          return /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.selectedItem, key, style }, option && checkedCellRender ? checkedCellRender(option) : /* @__PURE__ */ import_react.default.createElement(
+            import_TextWithToolTip.default,
+            {
+              text: (option == null ? void 0 : option.name) + (showCode ? "(" + (option == null ? void 0 : option.code) + ")" : ""),
+              width: "100%"
+            }
+          ), /* @__PURE__ */ import_react.default.createElement(
+            "i",
+            {
+              className: (0, import_classnames.default)("iconfont icon-lajitong", import_index_module.default.close),
+              onClick: () => {
+                setSelected(selected.filter((item) => item !== selected[index]));
+              }
+            }
+          ));
+        }
+      }
+    )))
+  ));
+};
+var Selected_default = Selected;
+//# sourceMappingURL=Selected.js.map

package/dist/lib/business/ModCommonFilter/components/PopoverContent/Selected.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/business/ModCommonFilter/components/PopoverContent/Selected.tsx"],
+  "sourcesContent": ["import TextWithTooltip from '@/components/TextWithToolTip';\nimport classNames from 'classnames';\nimport React, { useRef } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars';\nimport { AutoSizer, List } from 'react-virtualized';\nimport type { ListItem } from '../../typing';\nimport styles from './index.module.less';\n\n/**\n * 已选列表组件的 Props\n */\ninterface PropsType {\n  /** 完整列表数据，用于根据 selected 中的 code 取 name 等信息 */\n  list: ListItem[];\n  /** 已选中的 code 数组（顺序即展示顺序） */\n  selected: string[];\n  /** 更新已选列表 */\n  setSelected: (selected: string[]) => void;\n  /** 内容宽度（当前未在 Selected 内使用，可做预留） */\n  contentWidth?: number;\n  /** 每行高度 */\n  rowHeight?: number;\n  /** 是否在名称后展示 code */\n  showCode?: boolean;\n  /** 已选列表中每行的自定义渲染 */\n  checkedCellRender?: (item: ListItem) => React.ReactNode;\n}\n\n/**\n * 筛选弹层右侧已选列表：展示已选数量、清空、虚拟列表逐项展示并可删除。\n */\nconst Selected: React.FC<PropsType> = ({\n  list,\n  selected,\n  setSelected,\n  rowHeight = 32,\n  showCode,\n  checkedCellRender,\n}) => {\n  const listScrollbarsRef = useRef<typeof Scrollbars>(null);\n  const listRef = useRef(null);\n\n  /** 将 Scrollbars 滚动同步到 List，保证虚拟列表与滚动条一致 */\n  const handleListScrollbarScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const { scrollTop, scrollLeft } = event.target as HTMLElement;\n    if (listRef.current) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (listRef.current as any).Grid.handleScrollEvent({ scrollTop, scrollLeft });\n    }\n  };\n\n  return (\n    <div className={styles.selected}>\n      <div className={styles.selectedHeader}>\n        <span>已选{selected.length}个</span>\n        <span className={styles.clear} onClick={() => setSelected([])}>\n          清空\n        </span>\n      </div>\n\n      <Scrollbars\n        style={{ height: 325 }}\n        renderThumbVertical={({ style, ...props }) => (\n          <div {...props} style={{ ...style, background: '#EFEFEF', borderRadius: 3 }} />\n        )}\n        ref={listScrollbarsRef}\n        onScroll={handleListScrollbarScroll}\n      >\n        <div className={styles.selectedContent}>\n          <AutoSizer disableHeight>\n            {({ width }: { width: number }) => (\n              <List\n                ref={listRef}\n                style={{ overflowX: 'visible', overflowY: 'visible' }}\n                rowCount={selected.length}\n                height={325}\n                width={width}\n                rowHeight={rowHeight}\n                rowRenderer={({ index, key, style }: { index: number; key: string; style: React.CSSProperties }) => {\n                  const option = list.find((option) => option.code === selected[index]);\n                  return (\n                    <div className={styles.selectedItem} key={key} style={style}>\n                      {option && checkedCellRender ? (\n                        checkedCellRender(option)\n                      ) : (\n                        <TextWithTooltip\n                          text={option?.name + (showCode ? '(' + option?.code + ')' : '')}\n                          width='100%'\n                        ></TextWithTooltip>\n                      )}\n\n                      <i\n                        className={classNames('iconfont icon-lajitong', styles.close)}\n                        onClick={() => {\n                          setSelected(selected.filter((item) => item !== selected[index]));\n                        }}\n                      ></i>\n                    </div>\n                  );\n                }}\n              ></List>\n            )}\n          </AutoSizer>\n        </div>\n      </Scrollbars>\n    </div>\n  );\n};\n\nexport default Selected;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA4B;AAC5B,wBAAuB;AACvB,mBAA8B;AAC9B,qCAA2B;AAC3B,+BAAgC;AAEhC,0BAAmB;AAyBnB,IAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,QAAM,wBAAoB,qBAA0B,IAAI;AACxD,QAAM,cAAU,qBAAO,IAAI;AAG3B,QAAM,4BAA4B,CAAC,UAAyC;AAC1E,UAAM,EAAE,WAAW,WAAW,IAAI,MAAM;AACxC,QAAI,QAAQ,SAAS;AAEnB,MAAC,QAAQ,QAAgB,KAAK,kBAAkB,EAAE,WAAW,WAAW,CAAC;AAAA,IAC3E;AAAA,EACF;AAEA,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAW,oBAAAC,QAAO,YACrB,6BAAAD,QAAA,cAAC,SAAI,WAAW,oBAAAC,QAAO,kBACrB,6BAAAD,QAAA,cAAC,cAAK,MAAG,SAAS,QAAO,GAAC,GAC1B,6BAAAA,QAAA,cAAC,UAAK,WAAW,oBAAAC,QAAO,OAAO,SAAS,MAAM,YAAY,CAAC,CAAC,KAAG,IAE/D,CACF,GAEA,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,IAAI;AAAA,MACrB,qBAAqB,CAAC,EAAE,OAAO,GAAG,MAAM,MACtC,6BAAAA,QAAA,cAAC,SAAK,GAAG,OAAO,OAAO,EAAE,GAAG,OAAO,YAAY,WAAW,cAAc,EAAE,GAAG;AAAA,MAE/E,KAAK;AAAA,MACL,UAAU;AAAA;AAAA,IAEV,6BAAAA,QAAA,cAAC,SAAI,WAAW,oBAAAC,QAAO,mBACrB,6BAAAD,QAAA,cAAC,sCAAU,eAAa,QACrB,CAAC,EAAE,MAAM,MACR,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,EAAE,WAAW,WAAW,WAAW,UAAU;AAAA,QACpD,UAAU,SAAS;AAAA,QACnB,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,aAAa,CAAC,EAAE,OAAO,KAAK,MAAM,MAAkE;AAClG,gBAAM,SAAS,KAAK,KAAK,CAACE,YAAWA,QAAO,SAAS,SAAS,KAAK,CAAC;AACpE,iBACE,6BAAAF,QAAA,cAAC,SAAI,WAAW,oBAAAC,QAAO,cAAc,KAAU,SAC5C,UAAU,oBACT,kBAAkB,MAAM,IAExB,6BAAAD,QAAA;AAAA,YAAC,uBAAAG;AAAA,YAAA;AAAA,cACC,OAAM,iCAAQ,SAAQ,WAAW,OAAM,iCAAQ,QAAO,MAAM;AAAA,cAC5D,OAAM;AAAA;AAAA,UACP,GAGH,6BAAAH,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,kBAAAI,SAAW,0BAA0B,oBAAAH,QAAO,KAAK;AAAA,cAC5D,SAAS,MAAM;AACb,4BAAY,SAAS,OAAO,CAAC,SAAS,SAAS,SAAS,KAAK,CAAC,CAAC;AAAA,cACjE;AAAA;AAAA,UACD,CACH;AAAA,QAEJ;AAAA;AAAA,IACD,CAEL,CACF;AAAA,EACF,CACF;AAEJ;AAEA,IAAO,mBAAQ;",
+  "names": ["React", "styles", "option", "TextWithTooltip", "classNames"]
+}

package/dist/lib/business/ModCommonFilter/components/PopoverContent/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { CategoryItem, ListItem, TerminalItem } from '../../typing';
+/**
+ * 筛选弹层内容组件的 Props
+ */
+interface PropsType {
+    /** 弹层是否打开，用于重置「是否操作过」状态 */
+    popOpen: boolean;
+    /** 分类列表，用于左侧分类 Tab */
+    category?: CategoryItem[];
+    /** 终端列表，用于 Content 内终端 Tab（如全部/PC/APP） */
+    terminal?: TerminalItem[];
+    /** 可选列表数据 */
+    list: ListItem[];
+    /** 搜索框占位文案 */
+    placeholder: string;
+    /** 标题后缀，如「筛选{title}」中的 title */
+    title: string;
+    /** 当前已选中的项（code 数组） */
+    selected: string[];
+    /** 设置已选中项 */
+    setSelected: (selected: string[]) => void;
+    /** 当前选中的分类 code */
+    categorySelected: string;
+    /** 设置选中的分类 */
+    setCategorySelected: (categorySelected: string) => void;
+    /** 列表列数（多列网格） */
+    columnCount: number;
+    /** 是否展示 code（名称后是否带括号 code） */
+    showCode: boolean;
+    /** 内容区宽度 */
+    contentWidth?: number;
+    /** 行高 */
+    rowHeight?: number;
+    /** 底部备注文案或节点 */
+    remark?: string | React.ReactNode;
+    /** 已选列表中每项的渲染函数 */
+    checkedCellRender?: (item: ListItem) => React.ReactNode;
+    /** 可选列表中每项的渲染函数 */
+    cellRender?: (item: ListItem) => React.ReactNode;
+    /** 点击「确认」时的回调 */
+    handleVerify: () => void;
+    /** 点击「取消」时的回调 */
+    handleClear: () => void;
+}
+/**
+ * 通用筛选弹层内容：左侧分类 + 中间可选列表 + 右侧已选列表 + 底部确认/取消。
+ * 未产生任何勾选变化时，「确认」按钮禁用。
+ */
+declare const PopoverContent: React.FC<PropsType>;
+export default PopoverContent;

package/dist/lib/business/ModCommonFilter/components/PopoverContent/index.js

@@ -0,0 +1,101 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/business/ModCommonFilter/components/PopoverContent/index.tsx
+var PopoverContent_exports = {};
+__export(PopoverContent_exports, {
+  default: () => PopoverContent_default
+});
+module.exports = __toCommonJS(PopoverContent_exports);
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Category = __toESM(require("./Category"));
+var import_Content = __toESM(require("./Content"));
+var import_index_module = __toESM(require("./index.module.less"));
+var import_Selected = __toESM(require("./Selected"));
+var PopoverContent = ({
+  popOpen,
+  category,
+  terminal,
+  list,
+  placeholder,
+  title,
+  selected,
+  setSelected,
+  categorySelected,
+  setCategorySelected,
+  columnCount = 1,
+  showCode = false,
+  contentWidth,
+  rowHeight,
+  checkedCellRender,
+  cellRender,
+  handleVerify,
+  handleClear,
+  remark
+}) => {
+  const [hasOperation, setHasOperation] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (popOpen) {
+      setHasOperation(false);
+    }
+  }, [popOpen]);
+  const submitButtonClass = (0, import_classnames.default)(import_index_module.default.item, import_index_module.default.submit, !hasOperation && import_index_module.default.disabled);
+  const cancelButtonClass = (0, import_classnames.default)(import_index_module.default.item, import_index_module.default.cancel);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.popoverContent }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.header }, "筛选", title), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.body }, /* @__PURE__ */ import_react.default.createElement(import_Category.default, { category, categorySelected, setCategorySelected }), /* @__PURE__ */ import_react.default.createElement(
+    import_Content.default,
+    {
+      terminal,
+      list,
+      selected,
+      setSelected,
+      placeholder,
+      categorySelected,
+      columnCount,
+      contentWidth,
+      rowHeight,
+      showCode,
+      setHasOperation,
+      cellRender
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_Selected.default,
+    {
+      list,
+      selected,
+      setSelected,
+      contentWidth,
+      rowHeight,
+      showCode,
+      checkedCellRender
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.footer }, /* @__PURE__ */ import_react.default.createElement("span", { className: import_index_module.default.remark }, remark), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { className: submitButtonClass, disabled: !hasOperation, type: "primary", onClick: handleVerify }, "确认"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { className: cancelButtonClass, type: "default", onClick: handleClear }, "取消")));
+};
+var PopoverContent_default = PopoverContent;
+//# sourceMappingURL=index.js.map

package/dist/lib/business/ModCommonFilter/components/PopoverContent/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/business/ModCommonFilter/components/PopoverContent/index.tsx"],
+  "sourcesContent": ["import { Button } from 'antd';\nimport classNames from 'classnames';\nimport React, { useEffect, useState } from 'react';\nimport type { CategoryItem, ListItem, TerminalItem } from '../../typing';\nimport Category from './Category';\nimport Content from './Content';\nimport styles from './index.module.less';\nimport Selected from './Selected';\n\n/**\n * 筛选弹层内容组件的 Props\n */\ninterface PropsType {\n  /** 弹层是否打开，用于重置「是否操作过」状态 */\n  popOpen: boolean;\n  /** 分类列表，用于左侧分类 Tab */\n  category?: CategoryItem[];\n  /** 终端列表，用于 Content 内终端 Tab（如全部/PC/APP） */\n  terminal?: TerminalItem[];\n  /** 可选列表数据 */\n  list: ListItem[];\n  /** 搜索框占位文案 */\n  placeholder: string;\n  /** 标题后缀，如「筛选{title}」中的 title */\n  title: string;\n  /** 当前已选中的项（code 数组） */\n  selected: string[];\n  /** 设置已选中项 */\n  setSelected: (selected: string[]) => void;\n  /** 当前选中的分类 code */\n  categorySelected: string;\n  /** 设置选中的分类 */\n  setCategorySelected: (categorySelected: string) => void;\n  /** 列表列数（多列网格） */\n  columnCount: number;\n  /** 是否展示 code（名称后是否带括号 code） */\n  showCode: boolean;\n  /** 内容区宽度 */\n  contentWidth?: number;\n  /** 行高 */\n  rowHeight?: number;\n  /** 底部备注文案或节点 */\n  remark?: string | React.ReactNode;\n  /** 已选列表中每项的渲染函数 */\n  checkedCellRender?: (item: ListItem) => React.ReactNode;\n  /** 可选列表中每项的渲染函数 */\n  cellRender?: (item: ListItem) => React.ReactNode;\n  /** 点击「确认」时的回调 */\n  handleVerify: () => void;\n  /** 点击「取消」时的回调 */\n  handleClear: () => void;\n}\n\n/**\n * 通用筛选弹层内容：左侧分类 + 中间可选列表 + 右侧已选列表 + 底部确认/取消。\n * 未产生任何勾选变化时，「确认」按钮禁用。\n */\nconst PopoverContent: React.FC<PropsType> = ({\n  popOpen,\n  category,\n  terminal,\n  list,\n  placeholder,\n  title,\n  selected,\n  setSelected,\n  categorySelected,\n  setCategorySelected,\n  columnCount = 1,\n  showCode = false,\n  contentWidth,\n  rowHeight,\n  checkedCellRender,\n  cellRender,\n  handleVerify,\n  handleClear,\n  remark,\n}) => {\n  /** 是否在本次弹层内有过勾选操作，未操作时确认按钮禁用 */\n  const [hasOperation, setHasOperation] = useState(false);\n\n  /** 弹层打开时重置「是否操作过」，避免沿用上次状态 */\n  useEffect(() => {\n    if (popOpen) {\n      setHasOperation(false);\n    }\n  }, [popOpen]);\n\n  const submitButtonClass = classNames(styles.item, styles.submit, !hasOperation && styles.disabled);\n  const cancelButtonClass = classNames(styles.item, styles.cancel);\n\n  return (\n    <div className={styles.popoverContent}>\n      <div className={styles.header}>筛选{title}</div>\n      <div className={styles.body}>\n        <Category category={category} categorySelected={categorySelected} setCategorySelected={setCategorySelected} />\n        <Content\n          terminal={terminal}\n          list={list}\n          selected={selected}\n          setSelected={setSelected}\n          placeholder={placeholder}\n          categorySelected={categorySelected}\n          columnCount={columnCount}\n          contentWidth={contentWidth}\n          rowHeight={rowHeight}\n          showCode={showCode}\n          setHasOperation={setHasOperation}\n          cellRender={cellRender}\n        />\n        <Selected\n          list={list}\n          selected={selected}\n          setSelected={setSelected}\n          contentWidth={contentWidth}\n          rowHeight={rowHeight}\n          showCode={showCode}\n          checkedCellRender={checkedCellRender}\n        />\n      </div>\n      <div className={styles.footer}>\n        <span className={styles.remark}>{remark}</span>\n        <Button className={submitButtonClass} disabled={!hasOperation} type='primary' onClick={handleVerify}>\n          确认\n        </Button>\n        <Button className={cancelButtonClass} type='default' onClick={handleClear}>\n          取消\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default PopoverContent;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAuB;AACvB,wBAAuB;AACvB,mBAA2C;AAE3C,sBAAqB;AACrB,qBAAoB;AACpB,0BAAmB;AACnB,sBAAqB;AAkDrB,IAAM,iBAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAGtD,8BAAU,MAAM;AACd,QAAI,SAAS;AACX,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,wBAAoB,kBAAAA,SAAW,oBAAAC,QAAO,MAAM,oBAAAA,QAAO,QAAQ,CAAC,gBAAgB,oBAAAA,QAAO,QAAQ;AACjG,QAAM,wBAAoB,kBAAAD,SAAW,oBAAAC,QAAO,MAAM,oBAAAA,QAAO,MAAM;AAE/D,SACE,6BAAAC,QAAA,cAAC,SAAI,WAAW,oBAAAD,QAAO,kBACrB,6BAAAC,QAAA,cAAC,SAAI,WAAW,oBAAAD,QAAO,UAAQ,MAAG,KAAM,GACxC,6BAAAC,QAAA,cAAC,SAAI,WAAW,oBAAAD,QAAO,QACrB,6BAAAC,QAAA,cAAC,gBAAAC,SAAA,EAAS,UAAoB,kBAAoC,qBAA0C,GAC5G,6BAAAD,QAAA;AAAA,IAAC,eAAAE;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACA,6BAAAF,QAAA;AAAA,IAAC,gBAAAG;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF,GACA,6BAAAH,QAAA,cAAC,SAAI,WAAW,oBAAAD,QAAO,UACrB,6BAAAC,QAAA,cAAC,UAAK,WAAW,oBAAAD,QAAO,UAAS,MAAO,GACxC,6BAAAC,QAAA,cAAC,sBAAO,WAAW,mBAAmB,UAAU,CAAC,cAAc,MAAK,WAAU,SAAS,gBAAc,IAErG,GACA,6BAAAA,QAAA,cAAC,sBAAO,WAAW,mBAAmB,MAAK,WAAU,SAAS,eAAa,IAE3E,CACF,CACF;AAEJ;AAEA,IAAO,yBAAQ;",
+  "names": ["classNames", "styles", "React", "Category", "Content", "Selected"]
+}

package/dist/lib/business/ModCommonFilter/components/PopoverContent/index.module.less

@@ -0,0 +1,260 @@
+/*
+  基本样式
+*/
+
+@primaryColor: #3b86f9;
+@iconPrimaryColor: #0a6bfd;
+@fontPrimaryColor: #0a6bfd;
+@borderPrimaryColor: #b0cffe;
+@globalBgColor: #edeff4;
+
+@ykFontFamilySemibold: 'PingFangSC-Semibold', 'PingFang SC', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
+  sans-serif;
+@ykFontFamilyRegular: 'PingFangSC-Regular', 'PingFang SC', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
+  sans-serif;
+@ykFontFamilyMedium: 'PingFangSC-Medium', 'PingFang SC', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial,
+  sans-serif;
+
+.popoverContent {
+  position: relative;
+
+  .header {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    padding: 0 20px;
+    color: #333;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 50px;
+    border-bottom: 1px solid #ecedf1;
+  }
+
+  .body {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+
+    .category {
+      position: relative;
+      width: 150px;
+      border-right: 1px solid #ecedf1;
+
+      .categoryItem {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 15px 0 15px;
+        color: #666;
+        line-height: 40px;
+        white-space: nowrap;
+        cursor: pointer;
+
+        .categoryItemIcon {
+          flex-shrink: 0;
+          color: inherit;
+          transform: rotate(-90deg);
+          visibility: hidden;
+        }
+
+        &:hover {
+          .kind-item-icon {
+            opacity: 1;
+          }
+        }
+      }
+
+      .categoryItemActive {
+        color: #0a6bfd;
+        font-weight: 600;
+
+        .categoryItemIcon {
+          visibility: visible;
+        }
+      }
+    }
+
+    .content {
+      position: relative;
+      flex: 1;
+
+      .contentHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        border-bottom: 1px solid #ecedf1;
+
+        :global {
+          .ant-tabs {
+            max-width: 300px;
+
+            .ant-tabs-tab {
+              margin-left: 20px;
+              color: #666;
+            }
+
+            & > .ant-tabs-nav {
+              height: 40px;
+              margin-bottom: 0;
+            }
+          }
+
+          .ant-divider {
+            margin: 0 20px;
+          }
+        }
+
+        .search {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          width: auto;
+          padding: 0 20px;
+          border: none;
+          box-shadow: none;
+
+          :global {
+            .icon-sousuo {
+              color: #666;
+            }
+          }
+        }
+      }
+
+      .contentList {
+        position: relative;
+
+        .checkAll {
+          display: flex;
+          align-items: center;
+          height: 40px;
+          padding: 0 20px;
+        }
+
+        .contentListInner {
+          padding: 0 20px;
+        }
+
+        :global {
+          .ant-checkbox-wrapper {
+            display: flex;
+
+            .ant-checkbox {
+              align-self: flex-start;
+              margin-top: 3px;
+            }
+          }
+
+          .ant-checkbox-inner {
+            border-radius: 2px;
+          }
+
+          .ant-checkbox + span {
+            color: #666;
+            padding-inline-end: 0;
+            padding-inline-start: 6px;
+          }
+        }
+      }
+    }
+
+    .selected {
+      width: 220px;
+      color: #666;
+      border-left: 1px solid #ecedf1;
+
+      .selectedHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+        padding: 0 20px;
+        color: #666;
+        border-bottom: 1px solid #ecedf1;
+
+        .clear {
+          color: @iconPrimaryColor;
+          font-size: 12px;
+          cursor: pointer;
+        }
+      }
+
+      .selectedContent {
+        padding: 0 15px;
+
+        .selectedItem {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 8px;
+
+          .close {
+            color: #a1a1a1;
+            cursor: pointer;
+
+            &:hover {
+              color: @iconPrimaryColor;
+            }
+          }
+        }
+      }
+    }
+
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      img {
+        width: 125px;
+        margin-bottom: 10px;
+      }
+
+      p {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .footer {
+    position: relative;
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    padding: 20px;
+    border-top: 1px solid #ededed;
+
+    // .save {
+    //   color: #333333;
+    //   background: #fff;
+    //   border: 1px solid #f0f1f3;
+    //   transition: all 0.1s linear;
+
+    //   &.disabled {
+    //     color: #999999 !important;
+    //     background: #ededed !important;
+    //     cursor: not-allowed;
+    //   }
+
+    //   &:hover {
+    //     background: #f9fafc;
+    //   }
+    // }
+
+    .item {
+      width: 100px;
+      border-radius: 2px;
+    }
+
+    .remark {
+      flex: 1;
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}

package/dist/lib/business/ModCommonFilter/index.d.ts

@@ -0,0 +1,53 @@
+import { PopoverProps } from 'antd';
+import React from 'react';
+import type { CategoryItem, ListItem, TerminalItem } from './typing';
+/**
+ * 通用筛选器组件的 Props
+ */
+export interface ModCommonFilterProps {
+    /** 当前选中的值（code 数组），受控 */
+    value: string[];
+    /** 选中项变化回调 */
+    onChange: (value: string[]) => void;
+    /** 可选列表数据 */
+    list: ListItem[];
+    /** 筛选维度名称，如「品类」「品牌」 */
+    title: string;
+    /** 按钮/标题前缀文案，如「筛选」 */
+    prefixTitle?: string;
+    /** 按钮左侧图标 */
+    iconPrefix?: React.ReactNode;
+    /** 分类列表，有则弹层左侧展示分类 Tab */
+    category?: CategoryItem[];
+    /** 终端列表，有则弹层内展示终端 Tab（如全部/PC/APP） */
+    terminal?: TerminalItem[];
+    /** 搜索框占位文案 */
+    placeholder?: string;
+    /** Popover 层级 */
+    zIndex?: number;
+    /** Popover 弹出方向 */
+    placement?: PopoverProps['placement'];
+    /** 透传给 antd Popover 的额外属性 */
+    popoverProps?: PopoverProps;
+    /** 可选列表列数（多列网格） */
+    columnCount?: number;
+    /** 内容区宽度 */
+    contentWidth?: number;
+    /** 列表行高 */
+    rowHeight?: number;
+    /** 是否在名称后展示 code */
+    showCode?: boolean;
+    /** 可选列表中每项的自定义渲染 */
+    cellRender?: (item: ListItem) => React.ReactNode;
+    /** 已选列表中每项的自定义渲染 */
+    checkedCellRender?: (item: ListItem) => React.ReactNode;
+    /** 弹层底部备注文案或节点 */
+    remark?: string | React.ReactNode;
+    /** 自定义触发区域，不传则使用默认 FilterButton */
+    filterChildren?: React.ReactNode;
+}
+/**
+ * 通用筛选器：点击按钮打开 Popover，内为分类 + 可选列表 + 已选列表，确认后回调 onChange。
+ */
+declare const ModCommonFilter: React.FC<ModCommonFilterProps>;
+export default ModCommonFilter;