@pisell/materials 6.11.4 → 6.11.5

package/lib/components/PisellTabbar/constants.js

@@ -29,7 +29,7 @@ var import_locales = require("../../locales");
 var DEFAULT_LEVEL_CONFIG = {
   level1: {
     superTabsBg: "#3b2865",
-    cardWidth: 100,
+    cardWidth: 106,
     cardHeight: 60,
     paddingLeft: 0
   },
@@ -69,8 +69,9 @@ var DEFAULT_ITEMS = {
     id: "-1",
     shop_id: 9,
     parent_id: 0,
-    name: "Search",
-    slug: "Search",
+    name: (0, import_locales.getText)("table-filter-search"),
+    text: (0, import_locales.getText)("table-filter-search"),
+    slug: "search",
     key: "search",
     icon: "",
     customClick: true
@@ -87,7 +88,7 @@ var DEFAULT_ITEMS = {
   }
 };
 var LEVEL_ADD_ITEMS = {
-  level1: ["expand"],
+  level1: ["search", "expand"],
   level2: ["expand", "all"],
   level3: ["expand", "all"]
 };

package/lib/components/PisellTabbar/hooks/useActiveKey.d.ts

@@ -19,6 +19,12 @@ interface UseActiveKeyReturn {
     getActiveKey: (level: number) => string | number;
     /** 内部设置方法（用于同步外部值） */
     _setActiveKey: (value: (string | number)[]) => void;
+    /** 设置缓存key */
+    setCacheActiveKey: (val: (string | number)[]) => void;
+    /** 重置value为缓存key */
+    resetActiveKey: () => void;
+    /** 获取缓存key */
+    getCacheActiveKey: () => (string | number)[];
 }
 /**
  * Tabbar 激活状态管理 Hook

package/lib/components/PisellTabbar/hooks/useActiveKey.js

@@ -26,6 +26,16 @@ var import_react = require("react");
 var useActiveKey = (props) => {
   const { initialActiveKey = [], onChange } = props;
   const [activeKey, _setActiveKey] = (0, import_react.useState)(initialActiveKey);
+  const cacheActiveKey = (0, import_react.useRef)([]);
+  const setCacheActiveKey = (val) => {
+    cacheActiveKey.current = [...val];
+  };
+  const resetActiveKey = () => {
+    let val = cacheActiveKey.current;
+    _setActiveKey(val);
+    onChange == null ? void 0 : onChange(val);
+    cacheActiveKey.current = [];
+  };
   const setActiveKey = (level, key, cKey) => {
     const newActiveKey = [...activeKey];
     newActiveKey.splice(level + 1);
@@ -37,12 +47,15 @@ var useActiveKey = (props) => {
     onChange == null ? void 0 : onChange(newActiveKey);
   };
   const getActiveKey = (level) => {
-    return activeKey[level];
+    return activeKey == null ? void 0 : activeKey[level];
   };
   return {
     activeKey,
     setActiveKey,
     getActiveKey,
+    resetActiveKey,
+    getCacheActiveKey: () => cacheActiveKey.current,
+    setCacheActiveKey,
     /**
      * 内部设置方法，用于同步外部传入的 value
      * 会进行深比较，避免不必要的更新

package/lib/components/PisellTabbar/hooks/useExpand.d.ts

@@ -18,6 +18,7 @@ interface UseExpandReturn {
     toggleExpand: (level: LevelType) => void;
     /** 获取指定层级的展开状态 */
     getExpand: (level: LevelType) => boolean;
+    closeAll: () => void;
 }
 /**
  * Tabbar 展开状态管理 Hook

package/lib/components/PisellTabbar/hooks/useExpand.js

@@ -37,6 +37,13 @@ var useExpand = (props = {}) => {
       [level]: !prev[level]
     }));
   }, []);
+  const closeAll = () => {
+    setExpand({
+      level1: false,
+      level2: false,
+      level3: false
+    });
+  };
   const getExpand = (0, import_react.useCallback)(
     (level) => {
       return expand[level];
@@ -47,7 +54,8 @@ var useExpand = (props = {}) => {
     expand,
     setExpand,
     toggleExpand,
-    getExpand
+    getExpand,
+    closeAll
   };
 };
 var useExpand_default = useExpand;

package/lib/components/PisellTabbar/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties } from 'react';
 /**
  * Tabbar 数据源项类型
  */
@@ -62,31 +62,6 @@ export interface ExpandState {
  * 层级类型
  */
 export declare type LevelType = 'level1' | 'level2' | 'level3';
-/**
- * TabbarLevel 组件属性
- */
-export interface TabbarLevelProps {
-    /** SKU ID */
-    skuId: string;
-    /** 数据源 */
-    dataSource: TabbarDataSource[];
-    /** 当前激活的面板 key */
-    activePanelKey: string | number;
-    /** 层级 */
-    level: LevelType;
-    /** 设置激活面板 key */
-    setActivePanelKey: (key: string | number, item?: TabbarDataSource) => void;
-    /** 是否展开 */
-    expand: boolean;
-    /** 展开处理函数 */
-    handleExpand: () => void;
-    /** 渲染子级内容 */
-    renderChildren?: (panelProps: any) => ReactNode;
-    /** 层级配置 */
-    levelConfig?: TabbarLevelConfig;
-    /** 展开配置 */
-    expandConfig?: ExpandConfig;
-}
 /**
  * PisellTabbar 组件属性
  */
@@ -107,5 +82,9 @@ export interface PisellTabbarProps {
     expandConfig?: ExpandConfig;
     /** 最大层级数 */
     maxLevel?: 1 | 2 | 3;
+    onSearch?: (value: string) => void;
     __designMode?: boolean;
 }
+export interface PisellTabbarRef {
+    closeSearchMode: () => void;
+}

package/lib/components/PisellTabbar/utils/index.d.ts

@@ -18,7 +18,8 @@ export declare const defaultItems: {
         id: number;
         shop_id: number;
         parent_id: number;
-        name: string;
+        name: any;
+        text: any;
         slug: string;
         key: string;
         icon: string;

package/lib/components/PisellTabbar/utils/index.js

@@ -38,7 +38,8 @@ var defaultItems = {
     id: -1,
     shop_id: 9,
     parent_id: 0,
-    name: "Search",
+    name: (0, import_locales.getText)("table-filter-find"),
+    text: (0, import_locales.getText)("table-filter-find"),
     slug: "Search",
     key: "search",
     icon: "",

package/lib/components/page/index.js

@@ -98,6 +98,9 @@ var Page = (props) => {
     });
   }, [platform, themeColor]);
   const PisellConfigProvid = isRenderPisellConfigProvider ? import_pisell_config_provider.default : import_react.default.Fragment;
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     import_config_provider.default,
     {

package/lib/components/pisellDateTimeDisplay/index.d.ts

@@ -1,2 +1,3 @@
 export { default as PisellDateTimeDisplay } from './PisellDateTimeDisplay';
 export type { PisellDateTimeDisplayProps, LayoutDirection, DateOrder, TextAlign, FieldType, TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, FieldConfig, TextStyleConfig, ContainerStyleConfig, } from './types';
+export { default } from './PisellDateTimeDisplay';

package/lib/components/pisellDateTimeDisplay/index.js

@@ -29,10 +29,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/pisellDateTimeDisplay/index.tsx
 var pisellDateTimeDisplay_exports = {};
 __export(pisellDateTimeDisplay_exports, {
-  PisellDateTimeDisplay: () => import_PisellDateTimeDisplay.default
+  PisellDateTimeDisplay: () => import_PisellDateTimeDisplay.default,
+  default: () => import_PisellDateTimeDisplay2.default
 });
 module.exports = __toCommonJS(pisellDateTimeDisplay_exports);
 var import_PisellDateTimeDisplay = __toESM(require("./PisellDateTimeDisplay"));
+var import_PisellDateTimeDisplay2 = __toESM(require("./PisellDateTimeDisplay"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellDateTimeDisplay

package/lib/components/pisellEmail/PisellEmail.less

@@ -20,7 +20,7 @@
     align-items: center;
 
     // 链接样式
-    .ant-typography-link {
+    .pisell-lowcode-typography-link {
       cursor: pointer;
       transition: all 0.3s;
 
@@ -42,7 +42,7 @@
 
 // AutoComplete 下拉样式优化
 .pisell-email-autocomplete-dropdown {
-  .ant-select-item-option-content {
+  .pisell-lowcode-select-item-option-content {
     display: flex;
     align-items: center;
     gap: 8px;

package/lib/components/pisellFind/PisellFind.stories.d.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellFind } from './index';
+/**
+ * PisellFind 组件 Storybook
+ * 基于 PisellLookup 的组件内查找优化版本
+ */
+declare const meta: Meta<typeof PisellFind>;
+export default meta;
+declare type Story = StoryObj<typeof PisellFind>;
+/**
+ * 基础示例 - 列表查找
+ */
+export declare const Basic: Story;
+/**
+ * 表格查找
+ */
+export declare const TableFind: Story;
+/**
+ * Input 模式查找
+ */
+export declare const InputMode: Story;
+/**
+ * 使用 Ref 控制
+ */
+export declare const WithRef: Story;
+/**
+ * 显示确认按钮
+ */
+export declare const WithConfirmButton: Story;
+/**
+ * 关闭历史记录
+ */
+export declare const NoHistory: Story;
+/**
+ * 多字段搜索
+ */
+export declare const MultiFieldSearch: Story;
+/**
+ * Drawer 模式
+ */
+export declare const DrawerMode: Story;
+/**
+ * Playground - 自由配置
+ */
+export declare const Playground: Story;

package/lib/components/pisellFind/PisellFind.stories.js

@@ -0,0 +1,343 @@
+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/components/pisellFind/PisellFind.stories.tsx
+var PisellFind_stories_exports = {};
+__export(PisellFind_stories_exports, {
+  Basic: () => Basic,
+  DrawerMode: () => DrawerMode,
+  InputMode: () => InputMode,
+  MultiFieldSearch: () => MultiFieldSearch,
+  NoHistory: () => NoHistory,
+  Playground: () => Playground,
+  TableFind: () => TableFind,
+  WithConfirmButton: () => WithConfirmButton,
+  WithRef: () => WithRef,
+  default: () => PisellFind_stories_default
+});
+module.exports = __toCommonJS(PisellFind_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = require("./index");
+var import_antd = require("antd");
+var meta = {
+  title: "Plus Components/PisellFind",
+  component: import_index.PisellFind,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "基于 PisellLookup 的组件内查找组件，专门为已加载数据的查找场景优化。"
+      }
+    }
+  },
+  tags: ["autodocs"]
+};
+var PisellFind_stories_default = meta;
+var mockProducts = [
+  { id: 1, name: "iPhone 15 Pro", price: 7999, category: "手机", stock: 100 },
+  { id: 2, name: "iPhone 14", price: 5999, category: "手机", stock: 150 },
+  { id: 3, name: "MacBook Pro", price: 12999, category: "电脑", stock: 50 },
+  { id: 4, name: "MacBook Air", price: 7999, category: "电脑", stock: 80 },
+  { id: 5, name: "iPad Air", price: 4799, category: "平板", stock: 120 },
+  { id: 6, name: "iPad Pro", price: 6799, category: "平板", stock: 60 },
+  { id: 7, name: "AirPods Pro", price: 1899, category: "耳机", stock: 200 },
+  { id: 8, name: "Apple Watch", price: 2999, category: "手表", stock: 90 }
+];
+var Basic = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.List,
+      {
+        dataSource: filteredData,
+        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement(import_antd.List.Item, null, /* @__PURE__ */ import_react.default.createElement(
+          import_antd.List.Item.Meta,
+          {
+            title: item.name,
+            description: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { color: "blue" }, item.category), /* @__PURE__ */ import_react.default.createElement("span", { style: { color: "#ff4d4f", fontWeight: "bold" } }, "¥", item.price), /* @__PURE__ */ import_react.default.createElement("span", null, "库存: ", item.stock))
+          }
+        ))
+      }
+    ));
+  }
+};
+var TableFind = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    const columns = [
+      { title: "商品名称", dataIndex: "name", key: "name" },
+      { title: "价格", dataIndex: "price", key: "price", render: (v) => `¥${v}` },
+      { title: "分类", dataIndex: "category", key: "category", render: (v) => /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, null, v) },
+      { title: "库存", dataIndex: "stock", key: "stock" }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "商品列表"), /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Table,
+      {
+        dataSource: filteredData,
+        columns,
+        pagination: { pageSize: 10 }
+      }
+    ));
+  }
+};
+var InputMode = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        triggerType: "input",
+        placeholder: "搜索商品名称",
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 } }, filteredData.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Card, { key: item.id, size: "small" }, /* @__PURE__ */ import_react.default.createElement("h4", null, item.name), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#ff4d4f", fontWeight: "bold" } }, "¥", item.price), /* @__PURE__ */ import_react.default.createElement(import_antd.Space, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, null, item.category), /* @__PURE__ */ import_react.default.createElement("span", null, "库存: ", item.stock))))));
+  }
+};
+var WithRef = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    const findRef = (0, import_react.useRef)(null);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = findRef.current) == null ? void 0 : _a.open();
+    } }, "打开查找"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = findRef.current) == null ? void 0 : _a.close();
+    } }, "关闭查找"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      return (_a = findRef.current) == null ? void 0 : _a.setKeyword("iPhone");
+    } }, "搜索 iPhone"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: () => {
+      var _a;
+      const keyword = (_a = findRef.current) == null ? void 0 : _a.getKeyword();
+      alert(`当前关键词: ${keyword}`);
+    } }, "获取关键词")), /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        ref: findRef,
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Table,
+      {
+        dataSource: filteredData,
+        columns: [
+          { title: "商品名称", dataIndex: "name" },
+          { title: "价格", dataIndex: "price", render: (v) => `¥${v}` }
+        ],
+        style: { marginTop: 16 }
+      }
+    ));
+  }
+};
+var WithConfirmButton = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        showConfirmButton: true,
+        confirmButtonText: "Search",
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.List,
+      {
+        dataSource: filteredData,
+        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement(import_antd.List.Item, null, /* @__PURE__ */ import_react.default.createElement(
+          import_antd.List.Item.Meta,
+          {
+            title: item.name,
+            description: `¥${item.price}`
+          }
+        ))
+      }
+    ));
+  }
+};
+var NoHistory = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        showHistory: false,
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.List,
+      {
+        dataSource: filteredData,
+        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement(import_antd.List.Item, null, item.name)
+      }
+    ));
+  }
+};
+var MultiFieldSearch = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        buttonText: "搜索商品",
+        onSearch: (keyword) => {
+          const kw = keyword.toLowerCase();
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(kw) || item.category.toLowerCase().includes(kw)
+          );
+          setFilteredData(filtered);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: 8, color: "#999", fontSize: 12 } }, "支持搜索商品名称和分类")), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Table,
+      {
+        dataSource: filteredData,
+        columns: [
+          { title: "商品名称", dataIndex: "name" },
+          { title: "价格", dataIndex: "price", render: (v) => `¥${v}` },
+          { title: "分类", dataIndex: "category", render: (v) => /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, null, v) },
+          { title: "库存", dataIndex: "stock" }
+        ]
+      }
+    ));
+  }
+};
+var DrawerMode = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        displayType: "drawer",
+        drawerPlacement: "right",
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.List,
+      {
+        dataSource: filteredData,
+        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement(import_antd.List.Item, null, /* @__PURE__ */ import_react.default.createElement(
+          import_antd.List.Item.Meta,
+          {
+            title: item.name,
+            description: `¥${item.price}`
+          }
+        ))
+      }
+    ));
+  }
+};
+var Playground = {
+  render: () => {
+    const [filteredData, setFilteredData] = (0, import_react.useState)(mockProducts);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_index.PisellFind,
+      {
+        triggerType: "button",
+        buttonText: "Find",
+        showConfirmButton: false,
+        showHistory: true,
+        maxHistoryCount: 10,
+        size: "middle",
+        disabled: false,
+        onSearch: (keyword) => {
+          const filtered = mockProducts.filter(
+            (item) => item.name.toLowerCase().includes(keyword.toLowerCase())
+          );
+          setFilteredData(filtered);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Table,
+      {
+        dataSource: filteredData,
+        columns: [
+          { title: "商品名称", dataIndex: "name" },
+          { title: "价格", dataIndex: "price", render: (v) => `¥${v}` },
+          { title: "分类", dataIndex: "category", render: (v) => /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, null, v) }
+        ]
+      }
+    ));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Basic,
+  DrawerMode,
+  InputMode,
+  MultiFieldSearch,
+  NoHistory,
+  Playground,
+  TableFind,
+  WithConfirmButton,
+  WithRef
+});

package/lib/components/pisellFind/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PisellLookupProps, PisellLookupRef } from '../pisellLookup';
+/**
+ * PisellFind Props
+ * 继承 PisellLookup 的所有 Props
+ */
+export declare type PisellFindProps = PisellLookupProps;
+/**
+ * PisellFind Ref
+ * 继承 PisellLookup 的所有 Ref 方法
+ */
+export declare type PisellFindRef = PisellLookupRef;
+/**
+ * PisellFind 组件
+ * 基于 PisellLookup 的组件内查找优化版本
+ *
+ * 核心特点：
+ * - 默认使用 button 触发器
+ * - 默认不显示确认按钮（输入即搜索）
+ * - 默认开启搜索历史
+ * - 默认不展示结果区（结果在页面其他位置展示）
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <PisellFind
+ *   onSearch={(keyword) => {
+ *     const filtered = data.filter(item => item.name.includes(keyword));
+ *     setFilteredData(filtered);
+ *   }}
+ * />
+ *
+ * // 切换为 Input 模式
+ * <PisellFind
+ *   triggerType="input"
+ *   onSearch={(keyword) => filterData(keyword)}
+ * />
+ * ```
+ */
+export declare const PisellFind: React.ForwardRefExoticComponent<PisellLookupProps & React.RefAttributes<PisellLookupRef>>;